/* Ma'Tour Guide – page d'accueil : Top Destinations en storytelling au scroll
   Fond et photo fixes ; seul le texte défile ; chaque photo s'ouvre du centre vers toute la moitié droite. */
/* overflow-x:hidden casse position:sticky ; clip coupe le débordement sans créer de zone de défilement */
html{overflow-x:clip!important}
body{overflow-y:visible!important;overflow-x:clip!important}

#destinations.tds{max-width:none!important;padding:100px 0 0!important;text-align:left;background:var(--a-cream,#06141a)!important}
#destinations.tds>h2,#destinations.tds>.subtitle{text-align:center;padding:0 6%}
.tds-story{position:relative;display:grid;max-width:none!important;width:auto!important;margin:40px 0 0!important;padding:0!important}
.tds-sticky,.tds-flow{grid-area:1/1}

/* Couche fixe : fond + photo */
.tds-sticky{position:sticky;top:0;height:100vh;height:100svh;align-self:start;display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);
 background:radial-gradient(120% 90% at 0% 50%,#0e2a32 0%,#06141a 62%)}
.tds-media{position:relative;grid-column:2;overflow:hidden;background:#06141a}
.tds-layer{position:absolute;inset:0;margin:0}
.tds-layer img{width:100%;height:100%;object-fit:cover;display:block}
.tds-media::after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;
 background:linear-gradient(90deg,rgba(6,20,26,.6) 0%,rgba(6,20,26,0) 18%),linear-gradient(0deg,rgba(6,20,26,.35) 0%,rgba(6,20,26,0) 25%)}
.tds.is-ready .tds-layer{will-change:clip-path}
.tds:not(.is-ready) .tds-layer+.tds-layer{display:none}

/* Le texte seul, qui défile */
.tds-flow{position:relative;z-index:30;padding:12vh 0 30vh}
.tds-chapter{min-height:85vh;display:flex;align-items:center}
.tds-text{position:relative;width:min(500px,34vw);margin-left:6%;text-shadow:0 2px 18px rgba(6,20,26,.85)}
.tds-text h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(40px,4.8vw,68px);line-height:1.02;margin:0 0 16px;color:var(--a-ink,#f5efe4)!important}
.tds-text p{font-size:18px;line-height:1.7;margin:0;color:var(--a-ink-2,#c9d6d8)!important}
.tds-link{display:inline-block;margin-top:22px;font-weight:600;letter-spacing:.02em;color:var(--a-gold,#e3bd8a)!important;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;text-shadow:none}
.tds-link:hover{color:#fff!important}
.tds-num{position:absolute;left:-.04em;top:-.66em;font-family:'Fraunces',Georgia,serif;font-size:160px;line-height:1;color:rgba(227,189,138,.08);pointer-events:none;user-select:none;z-index:-1;text-shadow:none}

/* Bouton « EXPLORE » : couche fixe au-dessus du texte, centré sur la photo */
.tds-link{display:none!important}
.tds-flow{pointer-events:none}
.tds-text{pointer-events:auto}
.tds-overlay{grid-area:1/1;position:sticky;top:0;height:100vh;height:100svh;align-self:start;z-index:35;pointer-events:none;
 display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr)}
.tds-cta{grid-column:2;grid-row:1;place-self:center;pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;text-align:center;
 padding:16px 44px;border-radius:999px;color:#fff!important;text-decoration:none!important;
 font-family:'Montserrat',sans-serif;font-weight:300;font-size:14px;letter-spacing:.32em;text-transform:uppercase;text-indent:.32em;text-shadow:0 1px 8px rgba(0,0,0,.45);
 background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.38);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
 box-shadow:0 10px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.28);transition:background .3s,border-color .3s}
.tds-cta:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.6)}
.tds:not(.is-ready) .tds-overlay{display:none}
@media (max-width:860px){
 .tds-overlay{grid-template-columns:1fr}
 .tds-overlay::before{content:"";grid-column:1;grid-row:1;align-self:end;height:26vh;background:linear-gradient(180deg,rgba(6,20,26,0) 0%,rgba(6,20,26,.92) 70%)}
 .tds-cta{grid-column:1;place-self:end center;margin-bottom:6vh}
 .tds-chapter{padding-bottom:30vh}
}

/* Mobile : photo plein écran, texte qui défile par-dessus */
@media (max-width:860px){
 #destinations.tds{padding-top:70px!important}
 .tds-sticky{grid-template-columns:1fr}
 .tds-media{grid-column:1}
 .tds-media::after{background:linear-gradient(0deg,rgba(6,20,26,.92) 0%,rgba(6,20,26,.55) 50%,rgba(6,20,26,.35) 100%)}
 .tds-flow{padding:30vh 0 40vh}
 .tds-chapter{min-height:90vh;align-items:flex-end;padding-bottom:14vh}
 .tds-text{width:auto;margin:0 20px}
 .tds-text h3{font-size:clamp(36px,10.5vw,50px)}
 .tds-text p{font-size:16px;line-height:1.65}
 .tds-num{font-size:104px}
}