:root{
  --paper:#FAF9F5; --ink:#3D3929; --pine:#3E7247; --moss:#5A9464;
  --sage:#B3C3A8; --stone:#6E6D68; --mist:#EDE9DE; --card:#F5F4EF;
  --line:#DAD9D4; --gold:#C96442; --shadow:20 18 14;
  --fz:"Fraunces",Georgia,serif; --hk:"Hanken Grotesk",system-ui,sans-serif; --mo:"Spline Sans Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--hk); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font-family:inherit}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}

/* ---- header ---- */
header.site{position:sticky; top:0; z-index:50; background:rgba(244,239,228,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; gap:14px; height:66px}
.brand{display:flex; align-items:center; gap:10px; cursor:pointer; border:0; background:none; padding:0}
.brand .mk{width:30px; height:30px; flex:0 0 auto}
.brand b{font-family:var(--fz); font-weight:600; font-size:22px; letter-spacing:.2px}
.brand small{font-family:var(--mo); font-size:10px; color:var(--stone); text-transform:uppercase; letter-spacing:.18em; display:block; margin-top:-3px}
.spacer{flex:1}
.subpill{font-family:var(--mo); font-size:11px; letter-spacing:.05em; color:var(--pine); border:1px solid var(--line); background:var(--card); padding:6px 11px; border-radius:999px; display:inline-flex; gap:7px; align-items:center}
.subpill .dot{width:7px;height:7px;border-radius:50%;background:var(--sage)}
.subpill.on .dot{background:var(--moss)}

/* ---- breadcrumb ---- */
.crumbs{font-family:var(--mo); font-size:11px; letter-spacing:.04em; color:var(--stone); display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding:18px 0 4px; text-transform:uppercase}
.crumbs button{border:0;background:none;color:var(--stone);cursor:pointer;padding:0;font:inherit}
.crumbs button:hover{color:var(--pine)}
.crumbs .sep{opacity:.5}
.crumbs .cur{color:var(--ink)}

/* ---- hero ---- */
.hero{position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--line); margin-top:8px; background:var(--mist)}
.hero .media{position:relative; aspect-ratio:16/7; min-height:260px}
.hero-home .media{aspect-ratio:16/8.4; min-height:500px}
.hero .label{position:absolute; left:0; right:0; bottom:0; padding:44px 42px 36px; z-index:3;
  background:linear-gradient(to top, rgba(18,26,20,.82), rgba(18,26,20,.28) 55%, transparent);}
.hero .eyebrow{font-family:var(--hk); font-weight:600; font-size:11.5px; letter-spacing:.32em; text-transform:uppercase; color:#E9E0C8}
.hero h1{font-family:var(--fz); font-weight:400; color:#fff; margin:.2em 0 .22em; line-height:1.02;
  font-size:clamp(38px,7vw,72px); letter-spacing:-.02em}
.hero h1 em{font-style:italic; color:#EBC98A; font-weight:400}
.hero p.tag{color:#EFEADD; margin:0; max-width:50ch; font-size:16.5px; line-height:1.6}

/* ---- photo/fallback media ---- */
.media{position:relative; background:linear-gradient(160deg,#e0dac9,#cfc7b2)}
.media .ph-fallback{position:absolute; inset:0; z-index:1}
.media .ph-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; background:#bcd2bd; z-index:2; opacity:0; transition:opacity .7s ease}
.media .ph-img.show{opacity:1}
@media (prefers-reduced-motion:reduce){ .media .ph-img{transition:none} }
.media.has-photo .ph-fallback{opacity:1}

/* fallback svg scene */
.scene{width:100%;height:100%;display:block}
.stamp{position:absolute; top:14px; right:14px; width:84px; height:84px; z-index:3; opacity:.96; transform:rotate(-7deg)}
.hero .stamp{width:104px;height:104px; top:18px; right:18px}

/* ---- section heads ---- */
.section{margin:72px 0}
.sec-head{display:flex; align-items:baseline; gap:14px; margin:0 0 20px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.sec-head h2{font-family:var(--fz); font-weight:400; font-size:clamp(26px,3.6vw,38px); margin:0; letter-spacing:-.018em; line-height:1.06}
.sec-head h2 em{font-style:italic; color:var(--gold); font-weight:400}
.sec-head .n{font-family:var(--hk); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:4px 11px; background:var(--card)}
.lead{color:var(--stone); max-width:64ch; margin:.2em 0 0; font-size:16px}
.budget-note{max-width:none; margin:-8px 0 0; font-size:13px; white-space:nowrap; font-style:italic}
@media(max-width:720px){ .budget-note{white-space:normal} }

/* ---- card grid ---- */
.grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fill,minmax(252px,1fr))}
.card{position:relative; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--card); cursor:pointer;
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  text-align:left; padding:0; color:inherit; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
.card:hover{transform:translateY(-5px); box-shadow:0 22px 40px -24px rgba(var(--shadow),.55); border-color:var(--sage)}
.card:focus-visible{outline:2px solid var(--pine); outline-offset:2px}
.card .media{aspect-ratio:5/4}
.card .media .ph-img,.card .media{overflow:hidden}
.card:hover .ph-img{transform:scale(1.06)}
.card .ph-img{transition:opacity .7s ease, transform .8s ease}
.card .body{padding:16px 17px 18px}
.card .ar{font-family:var(--hk); font-weight:600; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.card h3{font-family:var(--fz); font-weight:400; font-size:22px; margin:5px 0 5px; letter-spacing:-.015em; line-height:1.15}
.card .sub{color:var(--stone); font-size:13.5px; margin:0; line-height:1.5; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden}
.card .go{position:absolute; bottom:12px; right:12px; z-index:3; width:32px;height:32px;border-radius:50%; border:1px solid rgba(255,255,255,.85); background:transparent; display:grid; place-items:center; color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.28); transition:border-color .2s, background .2s}
.card:hover .go{background:rgba(255,255,255,.3); color:#fff; border-color:#fff}
@media (prefers-reduced-motion:reduce){ .card,.card:hover,.card .ph-img{transform:none} }

/* ---- facts ---- */
.facts{display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:13px; overflow:hidden; margin:22px 0}
.facts div{background:var(--card); padding:14px 16px; flex:1 1 auto; min-width:max-content}
.facts dt{font-family:var(--mo); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); white-space:nowrap}
.facts dd{margin:4px 0 0; font-family:var(--fz); font-size:18px; white-space:nowrap}

/* ---- prose ---- */
.prose p{margin:.7em 0; max-width:68ch}
.prose .intro{font-size:18.5px; max-width:66ch; margin-inline:auto; text-align:center}
.flag-divider{text-align:center; font-size:30px; line-height:1; margin-top:30px}
.flag-divider .flag{margin-right:0; vertical-align:middle; border-radius:3px}
.flag-divider + .section{margin-top:26px}

/* ---- details / accordion ---- */
details.acc{border:1px solid var(--line); border-radius:12px; background:var(--card); margin:10px 0; overflow:hidden; transition:border-color .2s, box-shadow .2s}
details.acc[open]{border-color:var(--sage); box-shadow:0 10px 26px -22px rgba(var(--shadow),.6)}
details.acc>summary{list-style:none; cursor:pointer; padding:15px 17px; display:flex; gap:13px; align-items:flex-start;
  font-family:var(--fz); font-size:18px; font-weight:500; color:var(--ink)}
details.acc>summary::-webkit-details-marker{display:none}
.idx{font-family:var(--mo); font-size:12px; color:var(--moss); background:var(--paper); border:1px solid var(--line); border-radius:8px; min-width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:1px}
.sum-t{flex:1}
.chev{flex:0 0 auto; color:var(--sage); transition:transform .25s ease; margin-top:3px}
details.acc[open]>summary .chev{transform:rotate(90deg); color:var(--moss)}
.acc .det{padding:0 17px 16px 56px; color:var(--stone)}
.acc .det.np{padding-left:17px}
@media (prefers-reduced-motion:reduce){ .chev{transition:none} }

/* restaurant + tip accents */
details.acc.resto>summary{font-size:17px}
.resto .idx{color:var(--gold); border-color:#e7d8bd; background:#faf4e8}
.tip .idx{color:var(--pine)}
.tip>summary{font-size:16.5px; font-family:var(--hk); font-weight:600}

/* ---- locked / paywall ---- */
.locked{position:relative; margin-top:14px; border:1px dashed var(--sage); border-radius:14px; padding:8px; background:linear-gradient(180deg,rgba(155,179,162,.08),rgba(155,179,162,.02))}
.locked .blurzone{filter:blur(5px); pointer-events:none; user-select:none; opacity:.6; max-height:230px; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent)}
.paygate{position:absolute; inset:0; display:grid; place-items:center; padding:20px; z-index:4}
.paycard{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px 22px; max-width:380px; text-align:center; box-shadow:0 22px 50px -28px rgba(var(--shadow),.7)}
.paycard .paylogo{margin:0 auto 12px; text-align:center}
.paycard .paylogo img{height:30px; width:auto; display:inline-block}
.paycard h3{font-family:var(--fz); font-weight:600; font-size:22px; margin:.2em 0 .1em}
.paycard p{color:var(--stone); font-size:14px; margin:.2em 0 14px}
.price{font-family:var(--fz); font-size:30px; color:var(--pine)}
.price small{font-family:var(--mo); font-size:11px; color:var(--stone); letter-spacing:.05em}
.btn{border:0; cursor:pointer; font-family:var(--hk); font-weight:600; font-size:14px; letter-spacing:.02em; border-radius:6px; padding:13px 24px; background:var(--pine); color:#fff; transition:background .2s, transform .15s}
.btn:hover{background:#16302a}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:none; color:var(--pine); border:1px solid var(--pine)}
.btn.ghost:hover{background:var(--mist)}
.gate-note{font-family:var(--mo); font-size:10.5px; color:var(--stone); margin-top:10px; letter-spacing:.03em}
.gate-sub{font-size:12.5px; color:var(--stone); margin-top:6px}

/* ---- toast ---- */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:13px 20px; border-radius:12px; font-size:14.5px; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; z-index:99; display:flex; gap:10px; align-items:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---- footer ---- */
footer.site{border-top:1px solid var(--line); margin-top:60px; padding:28px 0 50px; color:var(--stone); font-size:13px}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between}
footer .mono{font-family:var(--mo); font-size:11px; letter-spacing:.04em}

.backlink{display:inline-flex; align-items:center; gap:8px; font-family:var(--mo); font-size:12px; letter-spacing:.05em; color:var(--pine); background:none; border:0; cursor:pointer; padding:16px 0 0}
.backlink:hover{text-decoration:underline}

.fadein{animation:fadeIn .5s ease both}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .fadein{animation:none} }

/* ---- top nav : destinations + planificateur ---- */
.topnav{display:flex; align-items:center; gap:8px}
.navbtn{border:0; background:none; color:var(--ink); font-family:var(--hk); font-weight:600; font-size:13.5px; letter-spacing:.02em; padding:8px 11px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:color .2s, background .2s}
.navbtn:hover{color:var(--pine); background:var(--mist)}
.navbtn .caret{font-size:11px; color:var(--gold)}
.dd{position:relative}
.ddpanel{position:absolute; top:calc(100% + 8px); right:0; width:660px; max-width:92vw; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 50px -24px rgba(var(--shadow),.55); padding:12px; z-index:60; display:none}
.ddpanel.open{display:block; animation:fadeIn .18s ease both}
.ddpanel input{width:100%; border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-family:var(--hk); font-size:14px; background:var(--paper); color:var(--ink)}
.ddpanel input:focus{outline:2px solid var(--sage); outline-offset:1px}
.ddlist{max-height:min(70vh,520px); overflow:auto; margin-top:8px; scrollbar-width:thin; columns:210px; column-gap:16px}
.ddcont{break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:6px}
.ddgroup{font-family:var(--mo); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); padding:10px 8px 4px}
.ddrow{display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:none; cursor:pointer; padding:9px 8px; border-radius:9px; font:inherit; color:var(--ink)}
.ddrow:hover{background:var(--mist)}
.ddrow .flagdot{width:9px;height:9px;border-radius:50%;background:var(--moss);flex:0 0 auto}
.ddrow .meta{font-family:var(--mo); font-size:11px; color:var(--stone); margin-left:auto}
.ddrow b{font-weight:600}
.ddempty{padding:16px 8px; color:var(--stone); font-size:14px}

/* ---- globe curseur ---- */
#globe{position:fixed; left:0; top:0; width:34px; height:34px; margin:-17px 0 0 -17px; pointer-events:none; z-index:90; opacity:0; transition:opacity .3s ease; will-change:transform; filter:drop-shadow(0 4px 8px rgba(var(--shadow),.35))}
#globe.on{opacity:.96}
#globe .spin{transform-origin:50% 50%; animation:globespin 14s linear infinite}
@media (hover:none){ #globe{display:none} }
@keyframes globespin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ #globe .spin{animation:none} #globe{transition:none} }

/* ---- encadré "passez par Voyajje" ---- */
.promo{position:relative; border:1px solid var(--line); border-left:4px solid var(--moss); background:linear-gradient(120deg,rgba(52,145,95,.10),rgba(52,145,95,.02)); border-radius:14px; padding:16px 18px; margin:22px 0; display:flex; gap:14px; align-items:flex-start}
.promo .pin{flex:0 0 auto; width:38px;height:38px}
.promo h4{font-family:var(--fz); font-weight:600; font-size:17px; margin:0 0 3px}
.promo p{margin:0; color:var(--stone); font-size:14px; max-width:64ch}
.promo.small{padding:13px 15px; margin:18px 0}
.promo.small h4{font-size:15.5px}
.promo.small p{font-size:13px}

/* ---- planificateur ---- */
.plan-grid{display:grid; gap:18px; grid-template-columns:1.3fr .9fr; align-items:start}
@media(max-width:760px){ .plan-grid{grid-template-columns:1fr} }
.checklist{border:1px solid var(--line); border-radius:15px; background:var(--card); overflow:hidden}
.cl-group{border-top:1px solid var(--line)}
.cl-group:first-child{border-top:0}
.cl-group h3{font-family:var(--fz); font-weight:600; font-size:18px; margin:0; padding:14px 16px 4px; display:flex; align-items:center; gap:9px}
.cl-group .cg-ico{color:var(--moss)}
.cl-group .cg-n{flex:1 1 auto}
.cl-group .cg-del{border:0; background:none; color:var(--stone); cursor:pointer; font-size:14px; line-height:1; padding:4px 6px; border-radius:7px; opacity:0; transition:opacity .12s}
.cl-group:hover .cg-del, .cl-group .cg-del:focus-visible{opacity:1}
.cl-group .cg-del:hover{background:var(--paper); color:var(--ink)}
.cl-new{background:var(--paper)}
.ng-emo{display:flex; flex-wrap:wrap; gap:6px; padding:8px 16px 0}
.ng-emo .epick{border:1px solid var(--line); background:var(--card); border-radius:9px; font-size:17px; padding:4px 8px; cursor:pointer; line-height:1}
.ng-emo .epick:hover{transform:scale(1.1)}
.ng-emo .epick.active{border-color:var(--moss); box-shadow:0 0 0 1px var(--moss)}
.cl-items{padding:4px 10px 12px}
.cl-item{display:flex; align-items:center; gap:12px; padding:9px 8px; border-radius:9px; cursor:pointer; transition:background .15s}
.cl-item:hover{background:var(--mist)}
.cl-item input{appearance:none; -webkit-appearance:none; width:21px; height:21px; border:2px solid var(--sage); border-radius:6px; cursor:pointer; flex:0 0 auto; position:relative; transition:background .15s, border-color .15s}
.cl-item input:checked{background:var(--pine); border-color:var(--pine)}
.cl-item input:checked::after{content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg)}
.cl-item span{font-size:15px; flex:1 1 auto; min-width:0}
.cl-item.done span{color:var(--stone); text-decoration:line-through}
.cl-item .del{margin-left:auto; border:0;background:none;color:var(--sage);cursor:pointer;font-size:16px;padding:2px 6px;opacity:0;transition:opacity .15s}
.cl-item:hover .del{opacity:1}
.cl-item .del:hover{color:#b1564a}
.cl-item .prio{flex:0 0 auto; width:16px; height:16px; border-radius:50%; padding:0;
  border:2px solid var(--line); background:var(--paper); cursor:pointer; transition:.15s}
.cl-item .prio:hover{border-color:var(--sage)}
.cl-item .prio.p-basse{background:var(--paper); border-color:var(--line)}
.cl-item .prio.p-moyenne{background:var(--gold); border-color:var(--gold)}
.cl-item .prio.p-haute{background:#b1392b; border-color:#b1392b}
.cl-item.done .prio{opacity:.45}
.addrow{display:flex; gap:8px; padding:10px 14px 14px}
.addrow input{flex:1; border:1px solid var(--line); border-radius:9px; padding:9px 11px; font:inherit; font-size:14px; background:var(--paper)}
.addrow input:focus{outline:2px solid var(--sage); outline-offset:1px}
.progwrap{border:1px solid var(--line); border-radius:15px; background:var(--card); padding:18px 18px 20px; position:sticky; top:78px}
.progwrap h3{font-family:var(--fz); font-weight:600; font-size:19px; margin:0 0 4px}
.progbar{height:11px; border-radius:99px; background:var(--mist); overflow:hidden; margin:14px 0 8px}
.progbar i{display:block; height:100%; background:linear-gradient(90deg,var(--moss),var(--pine)); border-radius:99px; transition:width .3s ease}
.progwrap .pc{font-family:var(--fz); font-size:30px; color:var(--pine)}
.progwrap .sub{color:var(--stone); font-size:13px}
.progwrap .reset{margin-top:14px}

/* budget tile accent */
.facts div.budget dd{color:var(--pine)}
.facts div.budget dt{color:var(--moss)}

@media(max-width:640px){
  body{font-size:16px}
  .hero h1{font-size:clamp(26px,8vw,40px)}
  .acc .det{padding-left:17px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:13px}
  .card h3{font-size:17px}
  header.site .wrap{gap:8px}
  .brand small{display:none}
  .navbtn{padding:7px 10px; font-size:13px}
  .subpill{display:none}
}
/* ---- carrousel atouts ---- */
.slider{position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--card); margin:22px 0}
.slides{display:flex; transition:transform .6s cubic-bezier(.6,.02,.2,1)}
@media (prefers-reduced-motion:reduce){ .slides{transition:none} }
.slide{min-width:100%; box-sizing:border-box; padding:30px 34px; display:flex; gap:24px; align-items:center}
.slide .ill{flex:0 0 auto; width:88px; height:88px}
.slide .stxt{flex:1}
.slide .eyebrow{font-family:var(--mo); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--moss)}
.slide h3{font-family:var(--fz); font-weight:600; font-size:clamp(22px,3.4vw,30px); margin:.18em 0 .25em; line-height:1.05}
.slide p{margin:0 0 14px; color:var(--stone); max-width:54ch}
.slider .ctrl{position:absolute; top:50%; transform:translateY(-50%); width:38px;height:38px;border-radius:50%; border:1px solid var(--line); background:rgba(252,253,250,.9); color:var(--pine); cursor:pointer; display:grid; place-items:center; font-size:18px; z-index:3; transition:background .2s,color .2s}
.slider .ctrl:hover{background:var(--pine); color:#fff; border-color:var(--pine)}
.slider .prev{left:12px} .slider .next{right:12px}
.dots{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3}
.dots button{width:9px;height:9px;border-radius:50%;border:0;background:var(--sage);opacity:.5;cursor:pointer;padding:0;transition:opacity .2s,width .2s}
.dots button.on{opacity:1;width:22px;border-radius:5px;background:var(--pine)}
@media(max-width:600px){ .slide{flex-direction:column; text-align:center; padding:26px 22px} .slide p{margin-inline:auto} .slider .ctrl{display:none} }

/* ---- nos actus ---- */
.actus{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.actu-card{position:relative; border:1px solid var(--line); border-radius:15px; overflow:hidden; background:var(--card); cursor:pointer; text-align:left; padding:0; color:inherit; transition:transform .25s, box-shadow .25s, border-color .25s}
.actu-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px -18px rgba(var(--shadow),.5); border-color:var(--sage)}
.actu-card .media{aspect-ratio:16/9}
.actu-card .body{padding:15px 16px 17px}
.actu-card .meta{font-family:var(--mo); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--moss); display:flex; gap:8px; align-items:center}
.actu-card h3{font-family:var(--fz); font-weight:600; font-size:20px; margin:6px 0 5px; line-height:1.12}
.actu-card .ex{color:var(--stone); font-size:14px; margin:0}
.lockchip{font-family:var(--mo); font-size:9.5px; letter-spacing:.08em; color:var(--gold); border:1px solid #e7d8bd; background:#faf4e8; border-radius:999px; padding:2px 7px}
/* ---- Article : mise en page de lecture ---- */
.article{max-width:760px}
.article .prose p{font-size:17.5px; line-height:1.72; max-width:70ch; margin:0 auto .95em}
.article .prose strong{font-weight:600; color:var(--ink)}

/* chapô : plus grand, en serif, détaché du corps */
.article .prose .intro{font-family:var(--fz); font-size:21px; line-height:1.6; color:var(--ink);
  text-align:left; max-width:70ch; margin:0 auto 30px; padding-bottom:26px; border-bottom:1px solid var(--line)}

/* intertitres : filet doré court en surtitre */
.article .prose h2{font-family:var(--fz); font-weight:600; font-size:27px; line-height:1.22;
  max-width:70ch; margin:52px auto 14px; padding-top:14px; position:relative}
.article .prose h2::before{content:""; position:absolute; top:0; left:0; width:34px; height:3px;
  background:var(--gold); border-radius:2px}
.article .prose h2:first-child{margin-top:8px}
.article .prose h3{font-family:var(--fz); font-weight:600; font-size:18.5px; max-width:70ch;
  margin:28px auto 6px}
.article .prose h3 + p{margin-top:0}

/* photo de pays : pleine largeur de l'article, légende intégrée */
.art-fig{margin:30px 0 32px; border-radius:16px; overflow:hidden; position:relative; cursor:pointer;
  border:1px solid var(--line); background:var(--card); transition:transform .18s, box-shadow .18s}
.art-fig:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgb(var(--shadow) / .16)}
.art-fig:focus-visible{outline:2px solid var(--moss); outline-offset:2px}
.art-fig img{display:block; width:100%; height:340px; object-fit:cover}
.art-fig figcaption{position:absolute; left:0; right:0; bottom:0; padding:34px 18px 14px;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; color:#fff;
  background:linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / 0))}
.art-fig .af-n{font-family:var(--fz); font-weight:600; font-size:20px}
.art-fig .af-t{font-size:13.5px; opacity:.9}
.art-fig .af-go{margin-left:auto; font-family:var(--mo); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; opacity:0; transition:opacity .18s}
.art-fig:hover .af-go{opacity:.95}

/* encadré période / budget */
.art-infos{max-width:70ch; margin:20px auto 8px; display:flex; gap:10px; flex-wrap:wrap}
.art-infos > div{flex:1 1 240px; background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--moss); border-radius:0 11px 11px 0; padding:11px 14px}
.art-infos .ai-k{display:block; font-family:var(--mo); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--stone); margin-bottom:3px}
.art-infos .ai-v{font-size:14.5px; line-height:1.5}

@media(max-width:640px){
  .article .prose .intro{font-size:19px}
  .article .prose h2{font-size:23px; margin-top:40px}
  .art-fig img{height:220px}
}
@media(max-width:600px){ .actu-card .media{aspect-ratio:16/10} }

/* ---- faq ---- */
.faq-teaser{border:1px solid var(--line); border-radius:16px; background:linear-gradient(120deg,var(--mist),var(--card)); padding:26px; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.faq-teaser h2{font-family:var(--fz); font-weight:600; font-size:24px; margin:0 0 4px}
.faq-teaser p{margin:0; color:var(--stone); max-width:52ch}
.faqlist{max-width:760px}

/* ---- newsletter (bas de page) ---- */
.news{border-top:1px solid var(--line); background:linear-gradient(120deg,rgba(35,76,58,.09),rgba(168,124,54,.05))}
.news .wrap{display:flex; gap:22px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:26px 22px}
.news h3{font-family:var(--fz); font-weight:600; font-size:22px; margin:0 0 3px}
.news p{margin:0; color:var(--stone); font-size:14px}
.newsform{display:flex; gap:9px; flex-wrap:wrap}
.newsform input{border:1px solid var(--line); border-radius:10px; padding:11px 13px; font:inherit; font-size:14px; background:var(--card); min-width:230px}
.newsform input:focus{outline:2px solid var(--sage); outline-offset:1px}
@media(max-width:600px){ .newsform{width:100%} .newsform input{flex:1; min-width:0} }
/* ---- compte / fenêtre d'inscription ---- */
.navbtn.primary{background:var(--pine); color:#fff; padding:9px 16px; border-radius:999px}
.navbtn.primary:hover{background:#16302a; color:#fff}
.acctwrap{position:relative}
.acctpanel{position:absolute; top:calc(100% + 8px); right:0; width:230px; background:var(--card); border:1px solid var(--line); border-radius:13px; box-shadow:0 22px 48px -24px rgba(var(--shadow),.55); padding:14px; z-index:60; display:none}
.acctpanel.open{display:block; animation:fadeIn .18s ease both}
.acctpanel .who{font-family:var(--fz); font-size:17px; margin:0 0 1px}
.acctpanel .det2{font-size:12.5px; color:var(--stone); margin:0 0 10px}
.acctpanel .acct-plan{font-size:12.5px; font-weight:600; margin:0 0 12px; padding:5px 10px; border-radius:8px; background:var(--wash); color:var(--stone); text-align:center}
.acctpanel .acct-plan.on{background:rgba(111,143,79,.16); color:#4f6d38}
.modal-bg{position:fixed; inset:0; background:rgba(20,30,24,.5); backdrop-filter:blur(3px); z-index:120; display:none; align-items:center; justify-content:center; padding:20px}
.modal-bg.open{display:flex; animation:fadeIn .2s ease both}
.modal{position:relative; width:430px; max-width:100%; max-height:92vh; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:30px 30px 24px; box-shadow:0 40px 90px -30px rgba(var(--shadow),.8)}
.modal-x{position:absolute; top:14px; right:14px; border:0; background:none; cursor:pointer; font-size:18px; color:var(--stone)}
.modal-x:hover{color:var(--ink)}

/* ---- pop-up de l'offre de lancement ---- */
.promo-bg{z-index:140}
.promo-modal{position:relative; width:400px; max-width:100%; text-align:center; border-radius:20px; padding:34px 30px 26px;
  color:#fff; background:linear-gradient(150deg, var(--pine), var(--moss)); overflow:hidden;
  box-shadow:0 34px 80px -30px rgba(0,0,0,.7); animation:promoPop .32s cubic-bezier(.2,.8,.3,1.1) both}
@keyframes promoPop{from{opacity:0; transform:translateY(14px) scale(.96)} to{opacity:1; transform:none}}
.promo-modal .modal-x{color:rgba(255,255,255,.75)}
.promo-modal .modal-x:hover{color:#fff}
.promo-tag{display:inline-block; font-family:var(--mo); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); background:#EBC98A; border-radius:999px; padding:6px 13px; font-weight:600}
.promo-modal h3{font-family:var(--fz); font-weight:600; font-size:27px; margin:14px 0 8px; color:#fff}
.promo-sub{font-size:15px; line-height:1.55; color:rgba(255,255,255,.9); margin:0 auto 18px; max-width:32ch}
.promo-sub strong{color:#EBC98A; font-weight:600}
.promo-price{display:flex; align-items:baseline; justify-content:center; gap:12px; margin-bottom:20px}
.promo-price .pp-strike{font-size:15px; color:rgba(255,255,255,.65); text-decoration:line-through}
.promo-price .pp-big{font-family:var(--fz); font-weight:600; font-size:40px; color:#fff; line-height:1}
.promo-price .pp-big small{font-family:var(--hk); font-weight:500; font-size:15px; color:rgba(255,255,255,.85); margin-left:5px}
.promo-modal .btn{background:#fff; color:var(--pine); border:0; padding:13px 20px; font-size:15px}
.promo-modal .btn:hover{background:#EBC98A; color:var(--ink)}
.promo-later{display:block; margin:12px auto 0; border:0; background:none; cursor:pointer;
  font-family:var(--hk); font-size:13px; color:rgba(255,255,255,.7)}
.promo-later:hover{color:#fff; text-decoration:underline}
.mseal{height:34px; margin:0 auto 12px; text-align:center}
.mseal img{height:34px; width:auto; display:inline-block}
.modal h3{font-family:var(--fz); font-weight:600; font-size:24px; text-align:center; margin:.1em 0 .15em}
.msub{text-align:center; color:var(--stone); font-size:13.5px; line-height:1.5; margin:0 auto 16px; max-width:34ch}
/* deux offres mises en avant dans la modale d'inscription */
.auth-offers{display:flex; gap:10px; margin:0 0 18px}
.auth-offers .ao-tile{flex:1 1 0; min-width:0; position:relative; text-align:center; border:1px solid var(--line);
  border-radius:13px; padding:14px 10px 12px; background:var(--paper)}
.auth-offers .ao-hl{border-color:var(--gold); background:rgba(201,100,66,.06); box-shadow:0 0 0 1px var(--gold) inset}
.auth-offers .ao-tag{position:absolute; top:-9px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mo); font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--gold);
  border-radius:999px; padding:3px 9px; font-weight:600}
.auth-offers .ao-price{font-family:var(--fz); font-weight:600; font-size:25px; color:var(--ink); line-height:1.05}
.auth-offers .ao-price span{font-family:var(--hk); font-weight:500; font-size:12.5px; color:var(--stone); margin-left:3px}
.auth-offers .ao-note{font-size:11.5px; color:var(--stone); margin-top:3px}
.field{margin:10px 0}
.field label{display:block; font-family:var(--mo); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); margin:0 0 5px}
.field input{width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 12px; font:inherit; font-size:15px; background:var(--paper); color:var(--ink)}
.field input:focus{outline:2px solid var(--sage); outline-offset:1px}
.frow{display:flex; gap:10px}
.frow .field{flex:1}
.merr{color:#b1564a; font-size:13px; min-height:18px; margin:4px 2px 8px}
.modal .btn{width:100%; justify-content:center; margin-top:6px}
.mswitch{text-align:center; font-size:13px; color:var(--stone); margin-top:12px}
.mswitch button{border:0;background:none;color:var(--pine);font:inherit;font-weight:600;cursor:pointer;padding:0}
.mswitch button:hover{text-decoration:underline}
.mprice{text-align:center; font-family:var(--mo); font-size:11px; letter-spacing:.03em; color:var(--stone); margin:9px 0 0}

/* ---- forum ---- */
.bubbles{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.bubble{position:relative; border:1px solid var(--line); border-radius:15px; background:var(--card); padding:18px 18px 16px; cursor:pointer; text-align:left; color:inherit; transition:transform .22s, box-shadow .22s, border-color .22s}
.bubble:hover{transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(var(--shadow),.5); border-color:var(--sage)}
.bubble .bemoji{font-size:26px}
.bubble h3{font-family:var(--fz); font-weight:600; font-size:19px; margin:8px 0 4px}
.bubble p{margin:0 0 10px; color:var(--stone); font-size:13.5px}
.bubble .bmeta{font-family:var(--mo); font-size:11px; color:var(--moss)}
.thread{max-width:760px}
.msg{display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--line)}
.msg:first-child{border-top:0}
.avatar{flex:0 0 auto; width:38px;height:38px;border-radius:50%; background:var(--pine); color:#fff; display:grid; place-items:center; font-family:var(--fz); font-size:17px}
.avatar.me{background:var(--gold)}
.mwrap{flex:1}
.mtop{display:flex; gap:9px; align-items:baseline}
.mtop b{font-size:15px}
.mtop .mt{font-family:var(--mo); font-size:11px; color:var(--stone)}
.mtext{margin:3px 0 0; font-size:15px; white-space:pre-wrap}
.composer{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:14px; margin-top:18px; position:sticky; bottom:14px}
.composer textarea{width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 12px; font:inherit; font-size:15px; background:var(--paper); resize:vertical; min-height:74px}
.composer textarea:focus{outline:2px solid var(--sage); outline-offset:1px}
.composer .crow{display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:10px}
.composer .cas{font-size:13px; color:var(--stone)}
.gate{border:1px solid var(--line); border-radius:16px; background:linear-gradient(120deg,var(--mist),var(--card)); padding:30px; text-align:center}
.gate .paylogo{margin:0 auto 12px; text-align:center}
.gate .paylogo img{height:32px; width:auto; display:inline-block}
.gate h2{font-family:var(--fz); font-weight:600; font-size:24px; margin:.1em 0 .2em}
.gate p{color:var(--stone); max-width:48ch; margin:0 auto 16px}
.mapwrap{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--mist)}
.mapwrap iframe{width:100%; height:360px; border:0; display:block}
@media(max-width:600px){ .mapwrap iframe{height:260px} }
/* ---- agenda & budget ---- */
.evform{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:14px 16px 16px; margin-bottom:16px}
.evform select{width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 12px; font:inherit; font-size:15px; background:var(--paper); color:var(--ink)}
.evform .field input,.evform select:focus{outline:none}
.evform select:focus{outline:2px solid var(--sage); outline-offset:1px}
.evform .btn{width:100%; justify-content:center; margin-top:4px}
.agenda{border:1px solid var(--line); border-radius:14px; background:var(--card); overflow:hidden}
.agenda .empty{color:var(--stone); font-size:14px; padding:18px 16px; margin:0}
.evrow{display:flex; align-items:center; gap:12px; padding:12px 15px; border-top:1px solid var(--line)}
.evrow:first-child{border-top:0}
.evdot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.evmain{flex:1; min-width:0}
.evt{font-size:15px; font-weight:600}
.evmeta{font-family:var(--mo); font-size:11px; color:var(--stone)}
.evamt{font-family:var(--fz); font-size:16px; color:var(--pine); white-space:nowrap}
.evrow .del{border:0;background:none;color:var(--sage);cursor:pointer;font-size:15px;padding:2px 4px}
.evrow .del:hover{color:#b1564a}
.budgetwrap{border:1px solid var(--line); border-radius:15px; background:var(--card); padding:18px; position:sticky; top:78px; align-self:start}
.budgetwrap h3{font-family:var(--fz); font-weight:600; font-size:19px; margin:0 0 10px}
.donut{display:flex; justify-content:center}
.donut svg{width:170px; height:170px}
.donut .dtot{font-family:var(--fz); font-size:17px; fill:var(--ink); font-weight:600}
.donut .dlab{font-family:var(--mo); font-size:7px; fill:var(--stone); letter-spacing:.1em}
.legend{margin-top:12px}
.leg{display:flex; align-items:center; gap:9px; padding:5px 0; font-size:13.5px}
.legdot{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.legn{flex:1}
.legv{font-family:var(--mo); font-size:11.5px; color:var(--stone)}
/* ---- résumé stats ---- */
.sumgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px}
.sumgrid div{background:var(--paper); border:1px solid var(--line); border-radius:11px; padding:12px 10px; text-align:center; transition:transform .2s, border-color .2s}
.sumgrid div:hover{transform:translateY(-2px); border-color:var(--sage)}
.sumgrid b{display:block; font-family:var(--fz); font-size:26px; color:var(--pine); line-height:1}
.sumgrid span{font-family:var(--mo); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone)}

/* ---- planificateur : deux colonnes côte à côte ---- */
.plan-duo{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
@media(max-width:900px){ .plan-duo{grid-template-columns:1fr} }
.resume-top{margin-bottom:22px}
.resume-flex{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
.resume-flex .evform{margin-bottom:0}
.resume-out{min-width:0}
@media(max-width:720px){ .resume-flex{grid-template-columns:1fr} }
.resume-stats{margin-top:18px}
.combo{position:relative}
.combo-menu{position:absolute; top:100%; left:0; right:0; z-index:30; margin-top:5px; max-height:240px; overflow-y:auto; background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.16); padding:5px}
.combo-item{display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:0; background:transparent; padding:8px 10px; border-radius:9px; font:inherit; font-size:15px; color:var(--ink); cursor:pointer}
.combo-item:hover{background:var(--mist)}
.combo-item .flag{width:22px; height:15px; border-radius:3px; flex:none; margin:0}
.combo-item span{min-width:0}
.dgroup{border:1px solid var(--line); border-radius:12px; background:var(--paper); margin-bottom:10px; overflow:hidden}
.dgroup > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:11px 14px; font-family:var(--fz); font-weight:600; font-size:14.5px; color:var(--ink); user-select:none}
.dgroup > summary::-webkit-details-marker{display:none}
.dgroup > summary::after{content:'▾'; color:var(--stone); font-size:12px; transition:transform .2s}
.dgroup[open] > summary::after{transform:rotate(180deg)}
.dgroup > summary:hover{background:var(--mist)}
.dg-date{text-transform:capitalize}
.dg-meta{margin-left:auto; font-family:var(--mo); font-size:12px; color:var(--moss); font-weight:500; white-space:nowrap}
.dg-body{padding:2px 12px 10px}
.app-cat{margin-top:20px}
.app-cat:first-of-type{margin-top:10px}
.app-cat h4{font-family:var(--fz); font-weight:600; font-size:15.5px; margin:0 0 11px; color:var(--pine); display:flex; align-items:center; gap:8px}
#panel-reserver .pcol + .pcol{margin-top:22px}
.dest-search{margin:20px auto 0; max-width:460px}
.dest-search input{width:100%; border:1px solid var(--line); border-radius:12px; background:var(--card); padding:13px 16px; font:inherit; font-size:15px; color:var(--ink)}
.dest-search input:focus{outline:2px solid var(--sage); outline-offset:1px; border-color:var(--sage)}
.pcol{border:1px solid var(--line); border-radius:16px; background:var(--card); padding:18px}
.pcol > h3{font-family:var(--fz); font-weight:600; font-size:20px; margin:0 0 4px; display:flex; align-items:center; gap:9px}
.pcol > .sub{color:var(--stone); font-size:13px; margin:0 0 14px}
.pcol .evform,.pcol .agenda,.pcol .budgetwrap{margin-bottom:0}
.pcol .budgetwrap{position:static; margin-top:16px; box-shadow:none}
.pcol .agenda{margin-top:14px}
/* ================= FINITIONS DESIGN ================= */
/* survols : légers mouvements des cases (sans soulignage) */
.navbtn{transition:border-color .2s, color .2s, background .2s, transform .15s}
.navbtn:hover{transform:translateY(-1px)}
.facts div{transition:transform .2s ease, background .2s ease}
.facts div:hover{transform:translateY(-3px); background:var(--paper)}
.btn{transition:background .2s, transform .12s, box-shadow .2s}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px -12px rgba(var(--shadow),.6)}
.btn:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){ .navbtn,.facts div,.btn{transition:none} }
/* ---- encadré ville (focus) dans une région ---- */
.cityfocus{border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:16px;
  background:linear-gradient(120deg,var(--mist),var(--card)); padding:20px 22px}
.cf-head{margin-bottom:14px}
/* accès rapide vers les focus villes */
.focus-sec{scroll-margin-top:84px}
.focus-jump{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 22px;
  padding:13px 16px; border:1px solid var(--line); border-left:4px solid var(--gold);
  border-radius:14px; background:linear-gradient(120deg,var(--mist),var(--card))}
.fj-label{font-family:var(--mo); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.fj-btn{font-family:var(--hk); font-weight:600; font-size:14px; color:var(--pine);
  border:1px solid var(--line); background:var(--card); border-radius:999px; padding:7px 14px;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:border-color .2s, box-shadow .2s, transform .2s}
.fj-btn:hover{border-color:var(--sage); box-shadow:0 8px 20px -16px rgba(var(--shadow),.7); transform:translateY(-1px)}
.fj-btn .fj-ar{color:var(--gold); font-weight:700}
/* focus ville repliable */
details.cityfocus > summary{list-style:none; cursor:pointer; display:block; position:relative; padding-right:36px}
details.cityfocus > summary::-webkit-details-marker{display:none}
details.cityfocus > summary .cf-head{margin:0}
details.cityfocus > summary .chev{position:absolute; right:2px; top:2px; font-family:var(--fz); font-size:26px; line-height:1; color:var(--gold); transition:transform .2s}
details.cityfocus[open] > summary{margin-bottom:20px}
details.cityfocus[open] > summary .chev{transform:rotate(90deg)}
.cf-eyebrow{font-family:var(--mo); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.cf-head h2{font-family:var(--fz); font-weight:600; font-size:26px; margin:.15em 0 .1em; border:0}
.cf-head h2::after{display:none}
.cf-head p{margin:0; color:var(--stone); max-width:60ch}
.cf-tips{margin-top:16px}
.cf-tips h3{font-family:var(--fz); font-weight:400; font-size:clamp(26px,3.6vw,38px); letter-spacing:-.018em; margin:0 0 14px; display:flex; align-items:baseline; gap:8px}
.pcol h3,.city-duo h3,.duo-col h3{font-family:var(--fz); font-weight:600; font-size:18px; margin:0 0 10px; display:flex; align-items:baseline; gap:8px}
.pcol h3 .cnt,.duo-col h3 .cnt,.city-duo h3 .cnt{font-family:var(--mo); font-size:12px; color:var(--moss)}
.duo-col{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:16px}
.city-duo{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
@media(max-width:820px){ .city-duo{grid-template-columns:1fr} }
/* ---- À faire sur deux colonnes, Où manger dessous ---- */
.acts-2col{display:grid; grid-template-columns:1fr 1fr; gap:0 18px; align-items:start}
.acts-2col > div{min-width:0}
.subhead{font-family:var(--fz); font-weight:400; font-size:clamp(26px,3.6vw,38px); letter-spacing:-.018em; line-height:1.06; margin:36px 0 20px; padding-bottom:14px; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:10px}
.subhead .cnt{font-family:var(--hk); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:4px 11px; background:var(--card)}
@media(max-width:700px){ .acts-2col{grid-template-columns:1fr} }
/* ---- conseil en ligne (sans accordéon) ---- */
.tipline{border:1px solid var(--line); border-radius:12px; background:var(--card); margin:10px 0;
  padding:15px 17px; display:flex; gap:13px; align-items:flex-start}
.tipline .idx{font-family:var(--mo); font-size:12px; color:var(--pine); background:var(--paper); border:1px solid var(--line); border-radius:8px; min-width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:1px}
.tipline .sum-t{font-size:18px; font-family:var(--fz); font-weight:500; line-height:1.5; color:var(--ink)}

/* ---- badge activité familiale ---- */
.fam-badge{display:inline-flex; align-items:center; gap:4px; margin-left:7px; padding:1px 7px 1px 5px;
  border:1px solid #cfe0cd; background:#eef5ec; color:var(--pine); border-radius:999px;
  font-family:var(--mo); font-size:9.5px; letter-spacing:.04em; vertical-align:middle}
.fam-badge svg{width:12px; height:12px}

/* ---- spécialités culinaires ---- */
.hotels{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.hotel{border:1px solid var(--line); border-radius:12px; background:var(--card); padding:13px 16px; display:flex; flex-direction:column; gap:3px}
.hotel-t{font-family:var(--fz); font-weight:600; font-size:17px; color:var(--ink)}
.hotel-d{font-size:16px; line-height:1.6; color:var(--stone)}
.specialites{margin:14px 0 4px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--line);
  background:var(--card); border-radius:999px; font-size:13.5px}
.chip::before{content:"🍴"; font-size:12px; filter:grayscale(.2)}

/* ---- « À savoir » : blocs d'information ---- */
.savoir-stack{display:flex; flex-direction:column; gap:38px; margin-top:6px}
.savoir-block{margin:0}
.savoir-sub{font-family:var(--fz); font-weight:400; font-size:23px; letter-spacing:-.012em;
  line-height:1.1; margin:0 0 16px; display:flex; align-items:center; gap:12px; color:var(--ink)}
.savoir-sub .si{width:36px; height:36px; border-radius:10px; background:var(--mist);
  border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; color:var(--pine)}
.savoir-sub .si svg{width:20px; height:20px}
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:640px){ .info-grid{grid-template-columns:1fr} }
.info-card{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:18px 20px;
  transition:border-color .2s, box-shadow .2s}
.info-card:hover{border-color:var(--sage); box-shadow:0 10px 26px -22px rgba(var(--shadow),.6)}
.info-card h4{font-family:var(--hk); font-weight:700; font-size:12.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--pine); margin:0 0 9px; display:flex; align-items:center; gap:8px}
.info-card h4 svg{width:17px; height:17px; flex:0 0 auto; color:var(--moss)}
.info-card p{margin:0; color:var(--stone); font-size:15px; line-height:1.55}
.info-card.wide{grid-column:1/-1}
.evt-list{margin:0; padding:0; list-style:none; columns:2; column-gap:28px}
.evt-list li{break-inside:avoid; padding:6px 0 6px 16px; position:relative; color:var(--stone);
  font-size:14.5px; line-height:1.45}
.evt-list li::before{content:""; position:absolute; left:0; top:12px; width:5px; height:5px;
  border-radius:50%; background:var(--gold)}
@media(max-width:600px){ .evt-list{columns:1} }
/* urgences : cartes numéro */
.emerg-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:12px; margin-bottom:14px}
.emerg-card{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:18px 16px;
  text-align:center; transition:border-color .2s, box-shadow .2s}
.emerg-card:hover{border-color:var(--sage); box-shadow:0 10px 26px -22px rgba(var(--shadow),.6)}
.emerg-card .num{font-family:var(--fz); font-weight:600; font-size:40px; line-height:1; color:var(--pine)}
.emerg-card .lbl{font-family:var(--hk); font-weight:600; font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--stone); margin-top:7px}
.emerg-note{margin:0; border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:12px;
  background:var(--card); padding:15px 18px; color:var(--stone); font-size:15px; line-height:1.55}

/* ---- Itinéraire de 3 semaines (timeline) ---- */
.itin-meta{display:flex; flex-wrap:wrap; gap:12px; margin:0 0 28px}
.itin-meta .im{border:1px solid var(--line); border-radius:12px; background:var(--card);
  padding:11px 18px; display:flex; flex-direction:column; gap:2px; min-width:140px}
.itin-meta .im-k{font-family:var(--hk); font-weight:600; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--stone)}
.itin-meta .im-v{font-family:var(--fz); font-weight:500; font-size:21px; color:var(--pine)}
.itin{list-style:none; margin:0; padding:0; position:relative}
.itin-acc .det .itin{margin-top:6px}
.itin-step{position:relative; padding-left:64px; padding-bottom:22px}
.itin-step::before{content:""; position:absolute; left:23px; top:8px; bottom:-4px; width:2px; background:var(--line)}
.itin-step:last-child::before{display:none}
.is-num{position:absolute; left:6px; top:2px; width:36px; height:36px; border-radius:50%;
  background:var(--pine); color:#fff; font-family:var(--fz); font-weight:600; font-size:17px;
  display:flex; align-items:center; justify-content:center; z-index:1; border:3px solid var(--paper)}
.is-leg{font-family:var(--mo); font-size:11px; letter-spacing:.03em; color:var(--stone);
  margin:0 0 8px; display:flex; align-items:center; gap:6px}
.is-leg svg{width:13px; height:13px; flex:0 0 auto; color:var(--gold)}
.is-card{display:block; width:100%; text-align:left; border:1px solid var(--line); border-radius:14px;
  background:var(--card); padding:16px 18px; cursor:pointer; font:inherit; color:inherit;
  transition:border-color .2s, box-shadow .2s, transform .2s}
.is-card:hover{border-color:var(--sage); box-shadow:0 12px 30px -24px rgba(var(--shadow),.7); transform:translateY(-2px)}
.is-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.is-region{font-family:var(--hk); font-weight:600; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold)}
.is-card h3{font-family:var(--fz); font-weight:500; font-size:22px; margin:.12em 0 0;
  letter-spacing:-.01em; line-height:1.1; color:var(--ink)}
.is-nights{flex:0 0 auto; font-family:var(--hk); font-weight:600; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--pine); border:1px solid var(--line); background:var(--paper);
  border-radius:999px; padding:5px 11px; white-space:nowrap}
.is-desc{margin:10px 0 0; color:var(--stone); font-size:15px; line-height:1.55}
.is-go{display:inline-block; margin-top:12px; font-family:var(--hk); font-weight:600; font-size:13px; color:var(--moss)}
.is-card:hover .is-go{color:var(--pine)}
@media(max-width:560px){
  .itin-step{padding-left:52px}
  .is-num{width:32px; height:32px; font-size:15px}
  .itin-step::before{left:21px}
}

/* ---- planificateur : mon voyage / sauvegarde ---- */
.trip-save{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-top:4px}
.trip-mini{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:12px 14px}
.trip-mini .trip-save{margin-top:0}
.trip-mini .field{margin:0}
.trip-save .field{flex:1 1 240px}
.trips-list{margin-top:14px; display:flex; flex-direction:column; gap:8px}
.trip-row{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--card)}
.trip-row .tt{font-weight:600; flex:1 1 auto}
.trip-row .meta{font-family:var(--mo); font-size:11px; color:var(--stone)}
.trip-row button{border:1px solid var(--line); background:var(--paper); border-radius:8px; padding:6px 10px; cursor:pointer; font-size:13px}
.trip-row button.load{color:var(--pine); border-color:#cfe0cd; background:#eef5ec}
.savenote{font-size:12.5px; color:var(--stone); margin-top:8px}

/* ---- carte à points (Leaflet) ---- */
.planmap{height:380px; border-radius:16px; overflow:hidden; border:1px solid var(--line); z-index:0}
.planmap-fallback{height:auto; padding:22px; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--stone)}
.pinlist{margin-top:12px; display:flex; flex-direction:column; gap:8px}
.pin-row{display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:12px; background:var(--card)}
.pin-row .dot{width:12px;height:12px;border-radius:50%;background:var(--moss);flex:0 0 auto}
.pin-row .pemo{font-size:17px;line-height:1;flex:0 0 auto}
.emoji-pick{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.emoji-pick .epick{border:1px solid var(--line);background:var(--card);border-radius:10px;font-size:20px;padding:5px 9px;cursor:pointer;line-height:1;transition:transform .1s}
.emoji-pick .epick:hover{transform:scale(1.12)}
.emoji-pick .epick.active{border-color:var(--moss);box-shadow:0 0 0 1px var(--moss)}
.qp-map{height:460px}
.qp-months{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.qp-months .qpm{border:1px solid var(--line);background:var(--card);border-radius:9px;font-family:var(--mo);font-size:11px;letter-spacing:.05em;padding:6px 10px;cursor:pointer}
.qp-months .qpm:hover{border-color:var(--moss)}
.qp-months .qpm.active{background:var(--moss);color:#fff;border-color:var(--moss)}
.qp-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--stone)}
.qp-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;border:1px solid rgba(0,0,0,.12)}
.qp-tip{font-size:12.5px;line-height:1.45}
.qp-tip + .qp-tip{margin-top:6px;padding-top:6px;border-top:1px solid #eee}
.emoji-pin{background:none;border:0}
.emoji-pin span{font-size:26px;line-height:34px;display:block;text-align:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.pin-row .pn{flex:1 1 auto; font-weight:500}
.pin-row .co{font-family:var(--mo); font-size:11px; color:var(--stone)}
.pin-row button{border:0; background:none; color:var(--stone); cursor:pointer; font-size:18px; line-height:1}

/* ---- boutons services / réservation ---- */
.svc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-top:6px}
.svc{display:flex; flex-direction:column; gap:3px; padding:14px 16px; border:1px solid var(--line); border-radius:14px;
  background:var(--card); text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s}
.svc:hover{transform:translateY(-2px); box-shadow:0 8px 22px var(--shadow); border-color:var(--sage)}
.svc .svc-n{font-weight:600}
.svc .svc-d{font-size:12.5px; color:var(--stone)}
.svc .svc-go{font-family:var(--mo); font-size:11px; color:var(--moss); margin-top:2px}

/* ---- formalités & visa (page pays) ---- */
.visa-box{display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:space-between;
  padding:16px 18px; border:1px solid var(--line); border-left:4px solid var(--pine);
  border-radius:14px; background:linear-gradient(120deg,var(--mist),var(--card)); margin-top:14px}
.visa-box .vt{font-family:var(--fz); font-weight:600; font-size:18px}
.visa-box .vd{font-size:13.5px; color:var(--stone); max-width:52ch; margin-top:2px}
.visa-btns{display:flex; gap:10px; flex-wrap:wrap}
/* ---- onglets du planificateur ---- */
.plan-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 4px}
.ptab{border:1px solid var(--line); background:var(--paper); padding:9px 16px; border-radius:999px;
  cursor:pointer; font-family:var(--hk); font-weight:600; font-size:14px; color:var(--stone); transition:.15s}
.ptab:hover{border-color:var(--sage); color:var(--ink)}
.ptab.active{background:var(--pine); color:#fff; border-color:var(--pine)}
.plan-panel{margin-top:8px}
.plan-panel[hidden]{display:none}
/* ---- espacement & logos ---- */
.news{margin-top:46px}
.visa-box{margin-bottom:8px}
.svc-head{display:flex; align-items:center; gap:9px}
.svc-logo{width:22px; height:22px; border-radius:5px; flex:0 0 auto; background:var(--paper); object-fit:contain}
.ddflag{font-size:18px; line-height:1; flex:0 0 auto; width:22px; text-align:center; display:inline-flex; align-items:center; justify-content:center}
/* drapeaux pays en SVG inline (rendu fiable multi-plateforme) */
.flag{display:inline-block; width:1.5em; height:1em; border-radius:2px; margin-right:.42em;
  vertical-align:-.1em; box-shadow:0 0 0 1px rgba(33,31,25,.15); overflow:hidden}
.ddflag .flag{width:22px; height:14.7px; margin-right:0}
/* ---- redesign éditorial : raffinements finaux ---- */
h1 em, h2 em{font-style:italic; color:var(--gold); font-weight:400}
.faq-teaser{border-radius:8px; background:linear-gradient(120deg,var(--mist),var(--card))}
.faq-teaser h2{font-weight:400; font-size:clamp(24px,3vw,31px)}
.actu-card{border-radius:8px}
.actu-card h3{font-weight:400; font-size:21px}
.actu-card .meta{font-family:var(--hk); font-weight:600; letter-spacing:.14em; color:var(--gold)}
.slide .eyebrow{font-family:var(--hk); font-weight:600; letter-spacing:.26em; color:var(--gold)}
.slide h3{font-weight:400}
.news h3{font-weight:400; font-size:clamp(22px,2.6vw,28px)}
details.acc{border-radius:8px}
.cityfocus{border-radius:10px}
.brand small{font-family:var(--hk); font-weight:600; letter-spacing:.22em}
.backlink{font-family:var(--hk); font-weight:600; letter-spacing:.09em; text-transform:uppercase; font-size:11.5px}

/* ---- carrousel en éventail (accueil : continents) ---- */
/* ---- continents en encadrés (4 en haut, 3 en bas) ---- */
.cont-section{position:relative; z-index:20; padding:12px 0 0}
.cont-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:18px; max-width:1000px; margin:0 auto}
.cont-box{flex:1 1 224px; max-width:236px; min-width:210px; height:250px; position:relative; overflow:hidden;
  border-radius:18px; border:1px solid var(--line); background:var(--mist); cursor:pointer; padding:0;
  box-shadow:0 16px 34px -20px rgba(var(--shadow),.5); transition:transform .2s, box-shadow .2s}
.cont-box:hover{transform:translateY(-4px); box-shadow:0 24px 44px -20px rgba(var(--shadow),.6)}
.cont-box:focus-visible{outline:2px solid var(--moss); outline-offset:3px}
.cont-box .media{position:absolute; inset:0; height:100%; transition:transform .5s ease}
.cont-box:hover .media{transform:scale(1.06)}
.cont-box .cb-label{position:absolute; left:0; right:0; bottom:0; z-index:4; padding:34px 16px 15px; text-align:left;
  background:linear-gradient(to top, rgba(16,24,18,.9), rgba(16,24,18,.4) 55%, transparent); color:#fff; pointer-events:none}
.cont-box .cb-c{display:block; font-family:var(--mo); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#EBC98A}
.cont-box .cb-n{display:block; font-family:var(--fz); font-weight:500; font-size:21px; line-height:1.12; margin-top:4px; color:#fff}
@media(max-width:900px){ .cont-grid{max-width:500px} .cont-box{flex:1 1 210px; max-width:none} }
@media(max-width:479px){ .cont-grid{max-width:340px} .cont-box{flex:1 1 100%; height:210px} }

/* ---- encadré de l'offre (accueil) ---- */
.offer-box{display:flex; gap:34px; align-items:center; flex-wrap:wrap; border-radius:20px; padding:30px 34px;
  background:linear-gradient(135deg, var(--pine), var(--moss)); color:#fff;
  box-shadow:0 24px 50px -22px rgba(var(--shadow),.5)}
.offer-box .ob-left{flex:1 1 340px; min-width:0}
.offer-box .ob-eye{font-family:var(--mo); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#EBC98A}
.offer-box h2{font-family:var(--fz); font-weight:600; font-size:clamp(26px,3.4vw,34px); line-height:1.12; margin:8px 0 10px; color:#fff}
.offer-box h2 em{font-style:italic; color:#EBC98A; font-weight:600}
.offer-box .ob-left > p{color:rgba(255,255,255,.9); font-size:15.5px; line-height:1.6; margin:0 0 14px; max-width:52ch}
.offer-box .ob-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 20px}
.offer-box .ob-list li{position:relative; padding-left:24px; font-size:14.5px; color:rgba(255,255,255,.95)}
.offer-box .ob-list li::before{content:"✓"; position:absolute; left:0; top:-1px; color:#EBC98A; font-weight:700}
.offer-box .ob-right{flex:0 1 270px; border-radius:16px; padding:18px; text-align:center}
.offer-box .ob-right.glass{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px -12px rgba(0,0,0,.35)}
/* deux offres distinctes */
.offer-box .ob-opt{border:1px solid rgba(255,255,255,.28); border-radius:12px; padding:12px 12px; background:rgba(255,255,255,.06)}
.offer-box .ob-opt-hl{border-color:#EBC98A; background:rgba(235,201,138,.16)}
.offer-box .ob-opt-tag{display:inline-block; font-family:var(--mo); font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:#EBC98A; border-radius:999px; padding:4px 9px; margin-bottom:8px; font-weight:600}
.offer-box .ob-opt-price{font-family:var(--fz); font-weight:600; font-size:30px; color:#fff; line-height:1}
.offer-box .ob-opt-price span{font-family:var(--hk); font-weight:500; font-size:13px; color:rgba(255,255,255,.85); margin-left:4px}
.offer-box .ob-opt-note{font-size:12px; color:rgba(255,255,255,.78); margin-top:4px}
.offer-box .ob-or{display:flex; align-items:center; gap:10px; margin:11px 2px; color:rgba(255,255,255,.7);
  font-family:var(--mo); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase}
.offer-box .ob-or::before, .offer-box .ob-or::after{content:""; flex:1; height:1px; background:rgba(255,255,255,.25)}
.offer-box .ob-right .btn{width:100%; margin-top:15px; background:#fff; color:var(--pine); border:0}
.offer-box .ob-right .btn:hover{background:#EBC98A; color:var(--ink)}
@media(max-width:620px){ .offer-box{padding:24px 22px; gap:22px} .offer-box .ob-right{flex:1 1 100%} }

/* ---- cartes pays « à venir » ---- */
.card-soon{cursor:default; opacity:.8}
.card-soon .media{filter:saturate(.55)}
.card-soon .ar{color:var(--gold)}
.card-soon:hover{transform:none; box-shadow:none}

/* ---- en-tête de la section continents ---- */
.fan-head{justify-content:center; gap:14px}
.fan-head h2{font-size:clamp(34px,4.6vw,50px); text-align:center}

/* ---- héro typographique animé (accueil) ---- */
.hero-text{text-align:center; padding:84px 22px 36px}
.hero-text .eyebrow{display:block; font-family:var(--hk); font-weight:600; font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); opacity:0; animation:heroFade .9s ease .05s forwards}
.hero-text h1{font-family:var(--fz); font-weight:400; color:var(--ink); margin:.35em auto .3em; line-height:1.06; font-size:clamp(40px,7.4vw,78px); letter-spacing:-.02em; max-width:16ch}
.hero-text h1 em{font-style:italic; color:var(--gold); font-weight:400}
.hero-text h1 .w{display:inline-block; opacity:0; transform:translateY(.55em) rotate(.5deg); filter:blur(6px); animation:heroWord .85s cubic-bezier(.16,.68,.32,1) forwards}
.hero-text h1 .w:last-of-type{position:relative}
.hero-text h1 .w:last-of-type::after{content:''; position:absolute; left:2%; right:2%; bottom:.03em; height:.085em; background:var(--gold); border-radius:99px; opacity:.5; transform:scaleX(0); transform-origin:left; animation:heroLine .7s cubic-bezier(.2,.7,.2,1) 1.2s forwards}
.hero-text .tag{color:var(--stone); margin:0 auto; max-width:52ch; font-size:17px; opacity:0; animation:heroFade 1s ease .95s forwards}
@keyframes heroWord{to{opacity:1; transform:none; filter:none}}
@keyframes heroFade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes heroLine{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .hero-text .eyebrow, .hero-text h1 .w, .hero-text .tag{opacity:1; transform:none; filter:none; animation:none}
  .hero-text h1 .w:last-of-type::after{transform:scaleX(1); animation:none}
}

/* espace entre les continents et l'encadré « Avant de partir » */
.cont-section{margin-bottom:70px}


/* ---- itinéraire animé (accueil : ligne de voyage vers les continents) ---- */
.route-anim{max-width:820px; margin:-8px auto -18px; padding:0 22px}
.route-anim svg{width:100%; height:auto; display:block; overflow:visible; color:var(--gold)}
.route-line{fill:none; stroke:currentColor; stroke-width:3.2; stroke-linecap:round;
  stroke-dasharray:1 15; stroke-dashoffset:0; opacity:.8; animation:routeFlow 1.15s linear infinite}
.route-plane{fill:var(--pine); opacity:.9}
@keyframes routeFlow{to{stroke-dashoffset:-16}}
@media (prefers-reduced-motion:reduce){
  .route-line{animation:none}
  .route-plane{display:none}
}
@media (max-width:640px){ .route-anim{margin:-2px auto -10px} .route-line{stroke-width:4.5} }