dans index.html — y compris la
tablette en portrait, qui reçoit l'image smartphone via
(pointer: coarse) and (orientation: portrait). Les anciennes règles
background-image par orientation sur .layer-bg étaient peintes DERRIÈRE le ![]()
opaque (object-fit:cover) → invisibles → supprimées. .layer-bg conserve son fond
plat #FAF8F4 (ci-dessus) comme repli avant chargement / si le ![]()
échoue. */
.layer-label {
position: relative;
margin: 0;
padding: 1rem;
text-align: center;
font-family: "Klee One", Georgia, serif;
font-weight: 600;
font-size: clamp(1.8rem, 6vw, 4rem);
line-height: 1.1;
color: var(--text-light);
text-shadow: 0 2px 12px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.7);
}
.hero-intro {
position: absolute;
top: clamp(8rem, 12vh, 7rem);
left: clamp(4rem, 6vw, 5rem);
max-width: 90vw;
width: max-content;
text-align: left;
z-index: 6;
}
@media (min-width: 1025px) {
.hero-intro {
width: auto;
}
}
@media (pointer: coarse) and (orientation: landscape) {
.hero-intro {
top: 3% !important;
}
.hero-intro-sub {
white-space: normal;
max-width: 38ch;
}
}
.hero-intro-title {
margin: 0 0 1.2rem 0;
font-family: "Klee One", Georgia, serif;
font-weight: 600;
font-size: clamp(2.5rem, 6.5vw, 5.5rem);
line-height: 1.05;
color: var(--text-light);
text-shadow: 4px 3px 9px rgba(0,0,0,0.9);
user-select: none;
white-space: nowrap;
position: relative;
z-index: 6;
}
/* Non-homepage pages (those carrying a page-* body class, e.g. body.page-flights)
get a hero title ~20% smaller. Scoped to [class*="page-"] rather than [class]
so it never matches homepages while they transiently carry JS transition
classes (fm-entering / fm-leaving). */
body[class*="page-"] .hero-intro-title {
font-size: clamp(1.9rem, 5vw, 4rem);
}
.hero-intro-sub {
margin: 0;
font-family: "Quicksand", sans-serif;
font-weight: 400;
font-size: clamp(0.9rem, 1.8vw, 1.2rem);
line-height: 1.6;
color: var(--text-light);
opacity: 0.85;
text-shadow: 3px 2px 4px rgba(0,0,0,0.9);
white-space: normal;
max-width: 38ch;
user-select: none;
}
@media (max-width: 1250px) {
.hero-intro-sub {
white-space: normal;
max-width: 34ch;
}
}
@media (max-width: 600px) {
.hero-intro-sub {
max-width: 24ch;
}
}
@media (min-width: 1250px) {
body.page-transfers .hero-intro-sub {
white-space: normal;
max-width: 38ch;
}
}
.hero-intro-sub strong {
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.promo-card {
position: relative;
z-index: 2;
margin-top: 1.5rem;
width: 280px;
display: flex;
flex-direction: column;
align-items: flex-start;
background: transparent;
border-radius: 2em;
overflow: hidden;
box-shadow: none;
transition: background 300ms ease,
box-shadow 300ms ease,
border-radius 300ms ease;
}
.promo-card.is-expanded {
border-radius: 16px;
background: rgba(255, 255, 255, 0.50);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(74, 59, 51, 0.15);
overflow: visible;
}
.promo-content {
overflow: hidden;
max-height: 0;
opacity: 0;
padding: 0 0.8rem;
order: 1;
transition: max-height 250ms ease-in, opacity 60ms ease 0ms;
}
.promo-card.is-expanded .promo-content {
max-height: 400px;
opacity: 1;
}
.promo-langs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.promo-lang-item {
position: relative;
display: inline-block;
font-family: "Klee One", Georgia, serif;
font-weight: 600;
font-size: 1.25rem;
color: var(--text);
cursor: default;
padding-bottom: 4px;
}
.promo-btn {
display: inline-block;
align-self: flex-start;
background: var(--peach);
color: var(--text-light);
border: none;
border-radius: 2em;
padding: 0.6em 1.8em;
font-size: clamp(0.9rem, 2vw, 1.4rem);
font-family: "Quicksand", sans-serif;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
position: relative;
z-index: 1;
margin: 0.8rem 0 0.8rem 0.8rem;
cursor: pointer;
transition: background 200ms ease;
box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.mika-info-close { display: none; }
.social-links {
position: relative;
height: 80px;
margin-left: 0.8rem;
transition: none;
}
.mika-info-panel.is-open ~ .social-links {
opacity: 0;
pointer-events: none;
}
.social-links a {
position: absolute;
}
.social-links a[aria-label="YouTube"] { top: 25px; left: 0px; }
.social-links a[aria-label="Instagram"] { top: 30px; left: 92px; }
.social-links a[aria-label="Pinterest"] { top: 31px; left: 174px; }
.social-links a {
opacity: 0.8;
transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}
.social-links a img {
filter: brightness(0) invert(96%) sepia(5%) saturate(200%) hue-rotate(320deg)
drop-shadow(2px 3px 5px rgba(0,0,0,0.8));
}
.social-links a:hover {
opacity: 1;
transform: scale(1.15);
}
.social-links a:hover img {
filter: brightness(0) saturate(100%) invert(72%) sepia(40%) saturate(600%) hue-rotate(330deg) brightness(105%);
}
.promo-btn.is-fading {
opacity: 0;
transition: opacity 200ms ease;
}
.promo-btn.is-visible {
opacity: 1;
transition: opacity 300ms ease 800ms;
}
.promo-card.is-expanded .promo-btn {
margin: 0.8rem 0 0.8rem 0.8rem;
}
.promo-langs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.promo-lang-item {
position: relative;
display: inline-block;
font-family: "Klee One", Georgia, serif;
font-weight: 600;
font-size: 1.25rem;
color: var(--text);
cursor: pointer;
padding-bottom: 4px;
user-select: none;
}
.promo-waiting {
margin: 0.5rem 0;
font-family: "Klee One", sans-serif;
font-size: 0.9rem;
color: #A9A9A9;
opacity: 0.75;
font-style: italic;
}
.promo-country-wrap {
position: relative;
width: 100%;
}
.promo-country-input {
width: 100%;
border: none;
border-bottom: 2px solid var(--peach);
background: transparent;
font-family: "Klee One", sans-serif;
font-size: 1.1rem;
color: #A9A9A9;
padding: 0.4em 0.2em;
outline: none;
cursor: text;
}
.promo-country-input::placeholder {
color: #A9A9A9;
}
.promo-country-list {
list-style: none;
margin: 0;
padding: 0.3rem 0;
background: #FAF8F4;
border-radius: 12px;
box-shadow: 0 -6px 20px rgba(74, 59, 51, 0.12);
max-height: 220px;
overflow-y: auto;
scrollbar-width: auto;
scrollbar-color: #ffa07a transparent;
}
.promo-country-list::-webkit-scrollbar {
width: 18px;
}
.promo-country-list::-webkit-scrollbar-track {
background: transparent;
}
.promo-country-list::-webkit-scrollbar-thumb {
background: #ffa07a;
border-radius: 9px;
}
.promo-country-option {
padding: 0.45em 1em;
font-family: "Klee One", sans-serif;
font-size: 0.9rem;
color: var(--text);
cursor: pointer;
}
@media (hover: hover) {
.promo-country-option:hover {
background: rgba(255, 160, 122, 0.12);
color: var(--peach-deep);
}
}
@media (hover: hover) {
.promo-btn:hover { background: var(--peach-deep); }
}
@media (prefers-reduced-motion: reduce) {
.nav-inner { transition: none; }
.nav-dropdown { transition: none; }
.hero-layer { transition: none; }
.hero-layer.is-entering { animation: none; }
.promo-card { transition: none; }
.promo-content { transition: none; }
}
.hero-intro-title,
.hero-intro-sub,
.layer-label {
padding: 8px 16px;
opacity: 0;
}
.lang-li { position: relative; }
.lang-spiral {
position: absolute;
top: 50%;
left: 40%;
transform: translate(-50%, -50%);
width: 125%;
height: 220%;
overflow: visible;
pointer-events: none;
}
.lang-li.lang-selected:hover .lang-dropdown {
opacity: 0 !important;
pointer-events: none !important;
}
.lang-dropdown:focus-within,
.lang-li .btn-lang:focus ~ .lang-dropdown,
#btn-lang:focus ~ .lang-dropdown {
opacity: 0 !important;
pointer-events: none !important;
}
/* Drop the readability shadow on hover ONLY when the bar is opaque/light
(homepage hover → light bar; blog white bar). When the header is transparent
(.is-on-peach, e.g. blog section 3), the base .nav-item/.logo shadow (~line
114) must survive hover so the white text stays legible over the photo — so
exclude .is-on-peach here. The scrolled-over-peach hover case keeps being
handled by the .is-scrolled.is-on-peach:hover rules above. */
.nav-trigger:hover ~ .site-header:not(.is-on-peach) .nav-item,
.site-header:not(.is-on-peach):hover .nav-item {
text-shadow: none;
}
.nav-trigger:hover ~ .site-header:not(.is-on-peach) .logo,
.site-header:not(.is-on-peach):hover .logo {
text-shadow: none;
}
.dropdown-item {
text-shadow: none;
}
.mika-info {
position: relative;
margin-top: 1.5rem;
display: inline-block;
}
.mika-info-panel {
position: absolute;
top: 0;
left: 0;
width: 400px;
background: #FAF8F4;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-radius: 16px;
padding: 4rem 1.2rem 1rem 1.2rem;
font-family: "Quicksand", sans-serif;
font-size: 1.05rem;
line-height: 1.7;
color: var(--text);
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 400ms ease, opacity 300ms ease;
}
.mika-info-panel.is-open {
max-height: 400px;
opacity: 1;
}
@media (max-width: 600px) {
.hero-intro {
left: 1.25rem;
right: 1.25rem;
max-width: none;
width: auto;
top: 100px !important;
}
.mika-info-panel {
width: calc(100vw - 2.5rem);
max-width: 400px;
}
.mika-info-panel.is-open {
max-height: 75vh;
}
}
.menu-mobile-li { display: none; }
.menu-mobile-single-li { display: none; }
@media (max-width: 1250px) {
.nav-list > li:not(.lang-li):not(.menu-mobile-li):not(.menu-mobile-single-li) { display: none; }
.menu-mobile-li { display: block; }
.lang-spiral { display: none; }
.site-header { min-height: 90px; }
.nav-inner {
min-height: 66px;
align-items: center;
justify-content: flex-end;
}
.nav-list {
margin-left: auto;
}
.nav-list {
flex-wrap: nowrap;
}
}
@media (max-width: 1250px) {
.lang-dropdown { display: none !important; }
.lang-spiral { display: none; }
}
@media (max-width: 600px) {
.site-header {
min-height: 110px;
}
.nav-inner {
min-height: 110px;
}
.nav-inner {
justify-content: center;
}
.nav-list {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 0.5rem;
row-gap: 1.4rem;
justify-content: center;
justify-items: center;
width: fit-content;
margin: 0 auto;
}
.btn-menu-mobile,
.btn-lang,
#btn-lang {
width: 100%;
text-align: center;
}
.lang-spiral { display: none; }
.lang-dropdown { display: none !important; }
.menu-mobile-li { display: none; }
.menu-mobile-single-li { display: block; }
}
.btn-menu-mobile {
font-family: "Quicksand", sans-serif;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.12em;
color: #ffffff;
background: transparent;
border: 2px solid transparent;
--dash-color: #ffa07a;
position: relative;
border-radius: 2em;
padding: 0.3em 1.1em;
min-width: 7.5rem;
cursor: pointer;
text-shadow: none;
transition: color 200ms, border-color 200ms, filter 200ms, background-color 200ms;
}
.btn-menu-mobile,
.btn-lang:not(.btn-menu-mobile) {
min-width: 7.5rem;
text-align: center;
justify-content: center;
}
.mob-drawer-list {
position: relative;
z-index: 1;
list-style: none;
margin: 0;
padding: 3.25rem 0 1.5rem 0;
}
.mob-drawer-list > li { margin: 0; }
.mob-drawer-cat {
display: block;
width: 100%;
text-align: left;
font-family: "Quicksand", sans-serif;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text);
background: transparent;
border: 0;
padding: 0.85em 1.5em;
cursor: pointer;
}
.mob-drawer-sub {
display: block;
width: 100%;
text-align: left;
font-family: "Quicksand", sans-serif;
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.01em;
color: var(--text);
background: transparent;
border: 0;
padding: 0.65em 1.5em;
cursor: pointer;
}
.mob-drawer-back {
display: block;
width: 100%;
text-align: left;
font-family: "Quicksand", sans-serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--peach);
background: transparent;
border: 0;
border-bottom: 1px solid rgba(74, 59, 51, 0.1);
padding: 0.85em 1.5em;
cursor: pointer;
}
.mob-drawer-back-row {
grid-column: 1 / -1;
}
@keyframes drawerArrowBounce {
0%, 100% { transform: translateY(0); }
15% { transform: translateY(5px); }
30% { transform: translateY(-4px); }
45% { transform: translateY(3px); }
60% { transform: translateY(-2px); }
75% { transform: translateY(1px); }
}
svg:has(#blog-arrow) {
overflow: visible;
}
.mob-drawer-blog svg,
#blog-arrow {
animation: drawerArrowBounce 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.mob-drawer-blog svg,
#blog-arrow { animation: none; }
}
@media (min-width: 601px) and (pointer: coarse) and (orientation: portrait) {
:root { --nav-h: 163px; }
.site-header { min-height: 163px; }
.nav-inner {
min-height: 150px;
padding-inline: clamp(0.4rem, 1vw, 0.6rem);
justify-content: center;
}
.hero-intro-title {
font-size: clamp(3.75rem, 9.75vw, 8.25rem);
}
body[class*="page-"] .hero-intro-title {
font-size: clamp(2.85rem, 7.5vw, 6rem);
}
.hero-intro {
top: calc(clamp(8rem, 12vh, 7rem) + 40px);
}
.hero-intro-sub {
font-size: clamp(1.35rem, 2.7vw, 1.8rem);
max-width: 28ch;
}
.logo { font-size: clamp(1.875rem, 6.875vw, 3.25rem); }
.nav-list { gap: 1.3rem !important; }
.btn-menu-mobile {
min-width: 0;
font-size: 1.625rem;
letter-spacing: 0.06em;
padding: 0.625em 0.875em;
}
.btn-lang,
#btn-lang {
min-width: 10rem;
font-size: 1.625rem;
padding: 0.625em 0.875em;
}
.mob-drawer-list {
padding: 0;
}
.mob-drawer-cat {
font-size: 3rem;
padding: 0 1.7em;
}
.mob-drawer-sub {
font-size: 2.5rem;
font-weight: 800;
padding: 0 1.7em;
}
.mob-drawer-back {
font-size: 1.66rem;
padding: 0 1.73em;
}
.promo-btn {
font-size: 1.3rem;
padding: 0.55em 1.7em;
}
.social-links {
transform: scale(1.3);
transform-origin: left center;
}
.mob-drawer-blog svg {
width: 22px;
height: 22px;
}
#mob-drawer {
width: 60vw !important;
max-width: 60vw !important;
display: flex;
flex-direction: column;
}
/* is-lang-view replaces the broken nested-:has() approach: CSS Selectors L4 forbids
:has() inside another :has() argument (even via :not()), so browsers silently
dropped the whole selector and the drawer stayed at 50vw. The class is toggled in
JS (openDrawer / closeDrawer) instead. */
#mob-drawer.is-lang-view {
width: 50vw !important;
max-width: 50vw !important;
overflow: hidden;
}
#mob-drawer.is-lang-view .mob-drawer-list {
flex: 1 1 auto;
min-height: 0;
display: grid;
grid-template-columns: 1fr;
align-content: space-evenly;
padding-top: 0;
padding-bottom: 0;
}
#mob-drawer.is-lang-view .mob-drawer-sub {
padding-top: 0.65em;
padding-bottom: 0.65em;
font-weight: 800;
font-size: 2.6rem;
font-family: "Quicksand", sans-serif;
}
#mob-drawer.is-lang-view .mob-drawer-sub[data-lang-group="ru"],
#mob-drawer.is-lang-view .mob-drawer-sub[data-lang-group="zh"],
#mob-drawer.is-lang-view .mob-drawer-sub[data-lang-group="ja"],
#mob-drawer.is-lang-view .mob-drawer-sub[data-lang-group="ko"] {
font-weight: 400;
}
#mob-drawer.is-lang-view .mob-drawer-sub[data-lang-group="ko"] {
font-weight: 400;
}
#mob-drawer:not(.is-lang-view) .mob-drawer-list {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding-bottom: 0;
}
#scroll-chevron {
bottom: 7rem;
}
#scroll-chevron svg {
width: 60px;
height: 30px;
}
.carousel-card-wrapper { top: 62%; }
}
@media (min-width: 601px) and (pointer: coarse) and (orientation: landscape) {
:root { --nav-h: 117px; }
.site-header { min-height: 117px; }
.nav-inner {
min-height: 117px;
padding-inline: clamp(0.77rem, 1.8vw, 1.13rem);
justify-content: center;
}
.logo { font-size: clamp(1.37rem, 4.97vw, 2.36rem); }
.nav-list { gap: 0.35rem; }
.btn-menu-mobile {
min-width: 0;
font-size: 1.23rem;
letter-spacing: 0.06em;
padding: 0.45em 1.30em;
}
.btn-lang,
#btn-lang {
min-width: 9.72rem;
font-size: 1.4rem;
padding: 0.45em 1.30em;
}
.mob-drawer-list {
padding: 2.2rem 0 1rem 0;
}
.mob-drawer-cat {
font-size: 1.5rem;
padding: 0 1.4em;
}
.mob-drawer-sub {
font-size: 1.7rem;
padding: 0 1em;
}
.mob-drawer-back {
font-size: 1.1rem;
padding: 0 1.4em;
}
.social-links {
transform: scale(1.3);
transform-origin: left center;
}
.mob-drawer-blog svg {
width: 22px;
height: 22px;
}
#mob-drawer {
width: 35vw !important;
max-width: 45vw !important;
display: flex;
flex-direction: column;
}
#mob-drawer.is-lang-view {
width: 50vw !important;
max-width: 50vw !important;
overflow: hidden;
}
#mob-drawer.is-lang-view .mob-drawer-list {
flex: 1 1 auto;
min-height: 0;
display: grid;
grid-template-columns: 0.8fr 1fr;
align-content: space-evenly;
padding-top: 0;
padding-bottom: 0;
padding-left: 2rem;
font-weight: 800;
font-size: 2rem;
}
#mob-drawer.is-lang-view .mob-drawer-sub {
padding-top: 0.7em;
padding-bottom: 0.7em;
font-family: "Quicksand", sans-serif;
}
#mob-drawer.is-lang-view .mob-drawer-sub[data-lang-group="ru"],
#mob-drawer.is-lang-view .mob-drawer-sub[data-lang-group="zh"],
#mob-drawer.is-lang-view .mob-drawer-sub[data-lang-group="ja"],
#mob-drawer.is-lang-view .mob-drawer-sub[data-lang-group="ko"] {
font-weight: 400;
}
#mob-drawer:not(.is-lang-view) .mob-drawer-list {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding-top: 0;
padding-bottom: 0;
}
.carousel-card-wrapper { top: 62%; }
}
/* Touch tablets in PORTRAIT (pointer: coarse, ≥601px → phones ≤600px keep their own
≤600 rules; non-touch desktop excluded by pointer:coarse): show ONLY the single
"Menu" button (.menu-mobile-single-li) + Langues (.lang-li). Hide the three
VOYAGER/EXPLORER/PRÉPARER buttons (.menu-mobile-li). Landscape is handled by the
(pointer:coarse) and (orientation:landscape) block further down. No max-width so wide
tablets are covered too. Overrides the generic max-width:1250 block above. */
@media (pointer: coarse) and (min-width: 601px) and (orientation: portrait) {
.menu-mobile-li { display: none; }
.menu-mobile-single-li { display: block; }
}
@media (pointer: coarse) and (min-width: 601px) {
.nav-list > li:not(.lang-li):not(.menu-mobile-single-li) { display: none !important; }
.menu-mobile-single-li { display: block !important; }
.menu-mobile-li { display: none !important; }
.lang-dropdown { display: none !important; }
.lang-spiral { display: none; }
}
@media (hover: hover) {
.btn-menu-mobile {
background: rgba(0, 0, 0, 0.3);
--dash-color: #ffa07a;
}
.page-blog .site-header.is-on-peach .btn-menu-mobile {
background: transparent;
--dash-color: #FAF8F4;
}
.page-blog .site-header.is-on-peach .btn-menu-mobile:hover {
--dash-color: #FAF8F4;
}
}
@media (hover: hover) {
.btn-menu-mobile:hover {
color: #fff;
background: transparent;
--dash-color: #fff;
filter: drop-shadow(0 0 8px rgba(255,255,255,0.9));
}
}
.nav-trigger:hover ~ .site-header .btn-menu-mobile,
.site-header:hover .btn-menu-mobile,
.site-header.is-scrolled .btn-menu-mobile {
color: #4a3b33;
background: transparent;
}
@media (hover: hover) {
.nav-trigger:not(:hover) ~ .site-header:not(.is-scrolled):not(:hover) .btn-menu-mobile {
color: #FAF8F4 !important;
}
}
@media (hover: hover) {
.nav-trigger:hover ~ .site-header .btn-menu-mobile:hover,
.site-header:hover .btn-menu-mobile:hover {
color: #c05a2f;
--dash-color: #e07a4f;
filter: none;
}
}
.dash-border {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.dash-border > rect {
fill: none;
stroke: var(--dash-color, #ffa07a);
stroke-width: 2;
stroke-dasharray: 12 2;
stroke-dashoffset: 0;
transition: stroke 200ms;
}
@keyframes dash-travel {
to { stroke-dashoffset: -200; }
}
@media (hover: hover) {
.btn-menu-mobile:hover .dash-border > rect,
.dash-travel:hover .dash-border > rect {
animation: dash-travel 4s linear infinite;
}
}
@media (prefers-reduced-motion: reduce) {
.dash-border > rect { animation: none !important; }
}
#mob-overlay {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transition: opacity 220ms ease, visibility 0s linear 220ms;
}
#mob-overlay.is-open {
opacity: 1;
visibility: visible;
transition: opacity 280ms ease, visibility 0s;
}
#mob-drawer {
position: fixed;
top: 0;
right: 0;
width: 80vw;
max-width: 360px;
height: 100vh;
height: 100dvh;
z-index: 1001;
background: #FAF8F4;
box-shadow: -10px 0 30px rgba(74, 59, 51, 0.18);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX(100%);
transition: transform 220ms ease;
}
#mob-drawer.is-open {
transform: translateX(0);
transition: transform 280ms ease;
}
@media (max-width: 600px) {
#mob-drawer {
width: 70vw;
max-width: 70vw;
display: flex;
flex-direction: column;
}
#mob-drawer .mob-drawer-list {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding-bottom: 0;
}
#mob-drawer.is-lang-view {
overflow: hidden;
}
#mob-drawer.is-lang-view .mob-drawer-list {
padding-top: 0;
}
}
#drawer-hearts-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
#mob-drawer,
#mob-drawer.is-open { transition: none; }
#mob-overlay,
#mob-overlay.is-open { transition: none; }
}
#mika-info-btn {
opacity: 0;
transition: opacity 0.8s ease;
}
#mika-info-btn.is-visible {
opacity: 1;
}
.legal-page {
max-width: 70ch;
margin: 0 auto 5rem;
padding: 6rem 1.25rem 0;
color: #4a3b33;
font-size: 1rem;
line-height: 1.7;
}
.legal-page h1 {
margin: 0 0 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #ffa07a;
color: #4a3b33;
font-size: 1.75rem;
line-height: 1.2;
}
.legal-page h2 {
margin: 2.25rem 0 0.75rem;
color: #ffa07a;
font-size: 1.15rem;
}
.legal-page p { margin: 0 0 1rem; }
.legal-page ul {
margin: 0 0 1.25rem;
padding-left: 1.25rem;
}
.legal-page li { margin: 0 0 0.4rem; }
.legal-page a {
color: #ffa07a;
text-decoration: underline;
word-break: break-word;
}
@media (min-width: 601px) {
.legal-page {
padding-top: 7rem;
font-size: 1.05rem;
}
.legal-page h1 { font-size: 2.25rem; }
.legal-page h2 { font-size: 1.4rem; }
}
.site-footer {
position: relative;
z-index: 4;
background: #FAF8F4;
color: #4a3b33;
font-size: 0.75rem;
line-height: 1.6;
text-align: center;
padding: 3rem 1rem;
}
.site-footer__disclosure {
max-width: none;
white-space: normal;
margin: 0 auto 1rem;
}
.site-footer__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1.25rem;
}
.site-footer__links a {
color: #4a3b33;
text-decoration: none;
transition: color 0.2s ease;
}
.site-footer__links a:hover,
.site-footer__links a:focus { color: #e07a4f; }
/* ── Tablet-landscape: close the ~20px sticky-hero (#s1) bleed at the page bottom ──
On touch tablets in landscape, the page settles/overshoots ~20px past the footer's
layout box at max scroll, exposing the pinned sticky hero (#s1, position:sticky,
z-index:1, height:100dvh) in a thin band below the footer — #s1 uses the dynamic
viewport (dvh) while the stacked sections use the stable one (#s4:100lvh, #s3:100vh),
and that unit mismatch leaves the foreground ~20px short of the absolute page bottom.
The footer is the TOPMOST layer (z-index:4) with an opaque #FAF8F4 background, so we
extend its PAINTED box ~28px below its layout box to cover that band, anchoring the
footer's bottom to the absolute bottom of the page. padding-bottom grows the painted
(background) box downward; the matching NEGATIVE margin-bottom cancels the added flow
height, so document scrollHeight is UNCHANGED — no new scrollbar, no shifted scroll
end, only the paint reaches lower (the extra beige sits below the document bottom and
shows ONLY in the overshoot band where #s1 was bleeding; otherwise it's off-screen).
Footer-only: touches no section, scroll, or bubble rule. Scoped to the project's
tablet-landscape query — min-height:450px excludes landscape PHONES, which hide #s4
(line ~1421) and scroll differently. */
@media (pointer: coarse) and (orientation: landscape) and (min-height: 450px) {
.site-footer {
padding-bottom: calc(3rem + 28px);
margin-bottom: -28px;
}
}
.blog-s1.blog-hero {
position: sticky;
top: 0;
z-index: 1;
height: auto;
background: var(--beige);
}
.blog-hero {
min-height: 100vh;
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: center;
gap: clamp(2rem, 5vw, 5rem);
padding: calc(66px + 2.5rem) clamp(1.25rem, 5vw, 4rem) clamp(2.5rem, 6vh, 4rem);
}
.blog-hero__text {
flex: 1 1 55%;
max-width: 55%;
min-width: 0;
padding-top: 0.5rem;
padding-bottom: 2.5rem;
padding-left: clamp(0rem, 3vw, 4rem);
opacity: 0;
animation: blogHeroFadeIn 1s ease 0.15s forwards;
}
#heroTitle {
font-family: "Klee One", sans-serif;
font-weight: 600;
font-size: clamp(2rem, 3.9vw, 3.4rem);
line-height: 1.1;
text-wrap: balance;
margin: 0 0 0.5rem;
color: #4a3b33;
opacity: 1 !important;
animation: none !important;
}
.blog-hero__hook {
font-size: clamp(1rem, 0.9rem + 0.52vw, 1.35rem);
font-weight: 500;
color: var(--peach-deep);
margin: 0 0 1.25rem;
}
.blog-hero__intro {
font-size: clamp(0.9rem, 0.86rem + 0.22vw, 1.05rem);
line-height: 1.7;
color: var(--text);
margin: 0 0 1.75rem;
}
.blog-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin-bottom: 5rem;
}
.blog-hero__btn-compose,
.blog-hero__btn-destinations {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
box-sizing: border-box;
min-width: 0;
max-width: 100%;
font-family: "Quicksand", "Klee One", sans-serif;
font-weight: 600;
text-align: center;
font-size: clamp(0.8rem, 0.72rem + 0.35vw, 1rem);
line-height: 1;
padding: 0.75em 1.4em;
border-radius: 999px;
cursor: pointer;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
@media (max-width: 600px) {
.blog-hero__btn-compose,
.blog-hero__btn-destinations {
flex: 1 1 100%;
}
}
.blog-hero__btn-compose {
border: 0;
color: var(--text-light);
background: var(--peach);
}
.blog-hero__btn-compose:hover,
.blog-hero__btn-compose:focus-visible {
background: var(--peach-deep);
box-shadow: 0 10px 24px rgba(224, 122, 79, 0.45);
}
.blog-hero__btn-destinations {
border: 2px dashed var(--peach);
color: var(--text);
background: #transparent;
}
.blog-hero__btn-destinations:hover,
.blog-hero__btn-destinations:focus-visible {
background: var(--peach-soft);
}
.blog-hero__media {
flex: 0 1 45%;
align-self: flex-start;
margin-top: clamp(1.5rem, 8vw, 8.3rem);
display: flex;
padding-left: clamp(0rem, 4vw, 4rem);
align-items: center;
justify-content: center;
opacity: 0;
animation: blogHeroSlideInRight 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
.blog-hero__video {
width: min(100%, 420px, 47.8vh);
height: auto;
aspect-ratio: 9 / 16;
object-fit: cover;
border-radius: 20px;
background: #000;
box-shadow: 0 18px 50px rgba(74, 59, 51, 0.28);
transition: transform 0.3s ease-out;
will-change: transform;
}
@keyframes blogHeroFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes blogHeroSlideInRight {
from { opacity: 0; transform: translateX(120%); }
to { opacity: 1; transform: translateX(0); }
}
.pop-text span {
display: inline-block;
opacity: 0;
white-space: pre;
}
.pop-text span.is-popped {
animation: mangaLetterPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes mangaLetterPop {
0% { opacity: 0; transform: translateY(6px) scale(0.6); }
60% { opacity: 1; transform: translateY(-4px) scale(1.15); }
80% { transform: translateY(1px) scale(0.97); }
100% { opacity: 1; transform: translateY(0px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.pop-text span.is-popped { animation: none; opacity: 1; transform: none; }
}
/* Tablette (861–1024px) : on GARDE les deux colonnes, mais sur ce viewport plus
étroit la vidéo prenait trop de place et tassait le texte. On rétrécit la
vidéo et sa colonne, on élargit la colonne de texte, et on réduit
proportionnellement les tailles de police, le gap et les paddings. */
@media (min-width: 861px) and (max-width: 1024px) {
.blog-hero {
gap: 2rem;
padding: calc(66px + 1.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 5vh, 3rem);
}
.blog-hero__text {
flex: 1 1 62%;
max-width: 62%;
padding-left: clamp(0rem, 1.5vw, 1.5rem);
}
.blog-hero__media {
flex: 0 1 38%;
margin-top: clamp(1rem, 4vw, 3rem);
padding-left: clamp(0rem, 2vw, 1.5rem);
}
.blog-hero__video {
width: min(100%, 300px, 38vh);
}
#heroTitle {
font-size: clamp(1.7rem, 3.2vw, 2.6rem);
}
.blog-hero__hook {
font-size: clamp(0.95rem, 1.6vw, 1.2rem);
}
.blog-hero__intro {
font-size: clamp(0.85rem, 1.4vw, 1rem);
}
}
@media (max-width: 860px) {
.blog-hero {
flex-direction: column;
text-align: left;
gap: 2rem;
padding: calc(66px + 1.5rem) clamp(1.25rem, 5vw, 4rem) clamp(2rem, 6vh, 4rem);
}
.blog-hero__media {
order: -1;
flex: 0 0 auto;
margin-top: 0;
padding-left: 0;
display: none;
}
.blog-hero__text {
flex: 1 1 auto;
max-width: 100%;
padding-left: 0;
text-align: left;
}
.blog-hero__actions {
justify-content: center;
margin-bottom: 2rem;
text-align: left;
}
.blog-hero__video {
height: auto;
width: min(80vw, 300px);
max-height: 70vh;
}
}
@media (prefers-reduced-motion: reduce) {
.blog-hero__text,
.blog-hero__media {
animation: none;
opacity: 1;
}
.blog-hero__video {
transition: none;
transform: none;
}
}
.compose-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
}
.compose-modal[hidden] { display: none; }
.compose-modal__overlay {
position: absolute;
inset: 0;
background: rgba(26, 58, 92, 0.30);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
animation: composeOverlayIn 0.25s ease both;
}
.compose-modal__dialog {
position: relative;
width: min(420px, 100%);
background: var(--beige);
border-radius: 22px;
padding: 2rem 1.75rem 1.75rem;
box-shadow: 0 24px 70px rgba(74, 59, 51, 0.4);
animation: composeDialogIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.compose-modal__close {
position: absolute;
top: 0.85rem;
right: 0.95rem;
width: 2rem;
height: 2rem;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--text);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.compose-modal__close:hover,
.compose-modal__close:focus-visible {
background: var(--peach-soft);
color: var(--peach-deep);
}
.compose-modal__title {
font-family: "Klee One", sans-serif;
font-weight: 600;
font-size: 1.4rem;
text-align: center;
margin: 0 0 1.25rem;
color: var(--text);
}
.compose-modal__options {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem;
}
.compose-modal__option {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.5em;
width: 100%;
padding: 1em 1.1em;
border-radius: 14px;
border: 0;
background: var(--peach);
color: var(--text-light);
font-family: "Quicksand", "Klee One", sans-serif;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.compose-modal__option:hover,
.compose-modal__option:focus-visible {
background: var(--peach-deep);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(224, 122, 79, 0.32);
}
@media (max-width: 600px) {
.compose-modal__options { grid-template-columns: 1fr; }
}
@keyframes composeOverlayIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes composeDialogIn {
from { opacity: 0; transform: translateY(16px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.blog-s2.blog-carousel {
position: sticky;
top: 0;
z-index: 2;
/* Promote the carousel to its own compositing layer. The polaroid cards carry
a permanent will-change:transform (and the JS bumps a card to z-index:5
while expanding), so each card is promoted to its own compositor layer.
Promoting the section too keeps the whole subtree compositing within this
z-index:2 group, so its cards stay strictly behind .blog-s4 (z-index 4)
instead of bleeding ON TOP of the post-its. */
will-change: transform;
margin-top: 0;
margin-left: 0;
margin-right: 0;
width: 100%;
min-height: 100vh;
background: #FAF8F4;
border-radius: 0;
/* .blog-carousel__track cards are translateX'd horizontally; the track's
clip-path only clips painting, not scrollable overflow, so contain it
here. The track sits well within this 100vh section vertically, so its
-90px clip-path vertical bleed is not affected. */
overflow: hidden;
/* This section is position:sticky + min-height:100vh, so once the user
scrolls past it into .blog-s4 the pinned section still physically covers
the viewport BEHIND s4 (carousel z-index:2 < s4 z-index:4). Its opaque
background would otherwise swallow clicks aimed at s4's links/post-its
wherever no s4 element sits directly under the cursor. Make the section
transparent to the mouse; pointer-events is re-enabled on the interactive
carousel track below so dragging/expanding polaroids still works. */
pointer-events: none;
}
.blog-carousel {
max-width: 100%;
margin: 0 auto;
padding: 3rem 0 4rem;
}
/* ---------------------------------------------------------------------------
Mobile: disable the sticky-stacking / overlap effect.
On desktop these hero/carousel sections use `position: sticky` + z-index so
each pins while the next (higher z-index) section scrolls up and overlaps
it ("stacked paper" look). On phones that overlap is unwanted — sections
must scroll normally, one after another. Un-pinning them (position: static)
drops them back into normal flow; z-index is then irrelevant (it only
affects positioned boxes) but reset for clarity.
Placed AFTER every targeted base rule (home .hero-section, blog .blog-s1 /
.blog-s2) so it wins on source order at equal specificity — no !important.
NOT touched: .blog-s3__sticky, which is a JS-driven horizontal scroll-jack
(a different effect), and the modal/drawer/overlay stickies.
--------------------------------------------------------------------------- */
@media (max-width: 600px) {
.hero-section,
.blog-s1.blog-hero,
.blog-s2.blog-carousel {
position: static;
top: auto;
z-index: auto;
}
/* Stabilise #s1's document-flow height on phones. The base rule uses 100dvh
which changes when the URL bar collapses mid-scroll, reflowing #s2's
offsetTop and causing a visible jolt at the S1→S2 boundary. 100svh is the
small (URL-bar-visible) viewport height — a constant that never changes
during scroll. .hero-stage inside keeps 100dvh (intentional: tracks the
visual viewport for the hero image); it is clipped by #s1's overflow:hidden
(inherited from the base rule) and cannot affect the document layout. */
.hero-section {
height: 100vh; /* fallback for browsers without svh */
height: 100svh; /* stable: always the small viewport height */
}
}
/* Tablettes tactiles (pointer: coarse ET min-width:601px) : on dé-pingle les
sections blog .blog-s1/.blog-s2. Pas de PLAFOND en px → les grandes tablettes
(iPad 10e gén. 1180px, iPad Pro 1366px) restent incluses. Les TÉLÉPHONES (≤600px)
sont exclus ici car déjà dé-pinglés, à l'identique, par la règle
@media (max-width:600px) ci-dessus ; min-width:601px supprime simplement le
double-emploi (aucun changement de rendu sur téléphone). L'empilement « papier »
(sticky + z-index) provoque un chevauchement non voulu sur tactile ;
position:static les remet en flux normal (z-index sans effet, remis à auto pour
clarté). Desktop (pointer: fine) inchangé → le sticky reste actif. On NE touche
PAS .blog-s3__sticky (scroll-jack JS), ni les overlays/modales/tiroirs. En
mouvement normal, main.js ne pose qu'un `top` inline sur .blog-s1 (inerte sur un
élément static) ; en reduced-motion il force position:relative inline → aucun
chevauchement. */
@media (pointer: coarse) and (min-width: 601px) {
.blog-s1.blog-hero,
.blog-s2.blog-carousel {
position: static;
top: auto;
z-index: auto;
}
}
/* Home page, tablettes tactiles (pointer:coarse + min-width:601px) : même
dé-pinglage que la règle @media (max-width:600px) ci-dessous, pour supprimer
l'empilement « papier » (sticky + z-index) sur tablette. Desktop (pointer:fine)
inchangé. On ne dé-pingle QUE les deux sections réellement ÉPINGLÉES :
• .hero-section (#s1, position:sticky) → static : #s2 (.cover-section) glisse
alors normalement à sa suite → plus de recouvrement #s2 sur #s1.
• #s3 (sticky via style inline) → position:relative !important (PAS static) :
#amazon-title est position:absolute ancré sur #s3 ; le passer en static le
ferait fuir vers un ancêtre lointain et disparaître.
On NE touche volontairement PAS (contrairement à ce qu'on pourrait croire) :
• .cover-section (#s2) : doit rester relative — c'est l'offsetParent de #s3 et
main.js lit s3.offsetTop (fond beige→pêche ligne ~2392, cible de scroll
ligne ~4756). Le passer en static casserait ces mesures sur tablette ; la
règle ≤600px l'évite déjà pour la même raison.
• .cover-section-4 (#s4) : non épinglé (relative). Dé-pingler #s3 suffit à
enlever le recouvrement #s4 sur #s3 ; #s4 reste en flux normal, aucun reset
requis. */
@media (pointer: coarse) and (min-width: 601px) {
#s3 {
position: relative !important;
top: auto !important;
z-index: auto !important;
}
}
/* Tablettes tactiles uniquement (pointer: coarse + min-width:601px → téléphones et
desktop exclus). Le vide en bas du héros ne vient PAS de min-height : le geler
n'a rien changé car .blog-hero est en flex avec justify-content:center — en une
colonne (≤860px, flex-direction:column) le mou est CENTRÉ (réparti en haut ET en
bas), donc -50px de hauteur n'enlève que ~25px en bas ; et si le contenu remplit
déjà ~100vh, min-height ne contraint rien. La vraie réserve située tout en bas du
héros est son padding-bottom (~3–4rem selon la largeur), posé SOUS le contenu
quelle que soit la mise en page (1 col. centrée ou 2 col. alignées en haut). On le
réduit donc ici → l'espace bas diminue d'environ 40–50px. Sûr : la section suivante
(.blog-carousel) garde son padding-top:3rem, aucun chevauchement. Desktop,
téléphones (≤600px), .blog-s3__sticky, overlays et la règle max-width:600px :
inchangés. */
@media (pointer: coarse) and (min-width: 601px) {
.blog-hero {
padding-bottom: 1rem;
}
}
/* Grandes tablettes tactiles (pointer: coarse, ≥1025px : iPad 10e gén. 1180px,
iPad Pro 1366px…). Au-delà de 1024px aucun palier ne redéfinit la vidéo : elle
reprend la taille de base DESKTOP (min(100%, 420px, 47.8vh)), trop grande sur
tablette. On la réduit de 15% : min(85%, 357px, 40.63vh) = 0,85 × la base
(chaque borne ×0,85 ⇒ la min résolue est exactement à −15%, quelle que soit la
borne contraignante). On NE descend PAS à 601px : le palier 861–1024px impose
déjà une vidéo plus petite (min(100%, 300px, 38vh)) ; une règle coarse ≥601
l'écraserait à 357px et l'AGRANDIRAIT (régression). À ≤860px la vidéo est masquée
(.blog-hero__media: display:none). Desktop (fine) et téléphones (≤600px) : inchangés. */
@media (pointer: coarse) and (min-width: 1025px) {
.blog-hero__video {
width: min(85%, 357px, 40.63vh);
}
}
/* Home page: un-pin the destinations stack so #s4 stops overlapping #s3 on
phones. #s3 is the sticky "paper" holding the destinations carousel; #s4
(.cover-section-4, z-index 3) scrolls up and overlaps the pinned #s3. #s3's
stickiness comes from an INLINE style (fr/index.html: style="position:sticky;
top:0"), so only an !important author rule can override it.
Use position: RELATIVE (not static): relative still cancels the sticky
pinning — so the overlap is gone — but, unlike static, it keeps #s3 a
positioning containing block. That matters because #amazon-title (the "Mes
bons plans voyage !" title) is position:absolute and is anchored to #s3; a
static #s3 would let it escape to a far ancestor and vanish off-screen.
We deliberately DON'T touch #s2.cover-section here. It must stay its base
position:relative so (a) it remains #s3's offsetParent — main.js reads
s3.offsetTop to drive the beige→peach background behind the cards, which
breaks if offsetParent jumps to — and (b) its z-index:2 background
layer keeps painting behind the carousel. */
@media (max-width: 600px) {
#s3 {
position: relative !important;
top: auto !important;
height: auto !important;
z-index: auto !important;
}
/* The destinations carousel inherits desktop sticky/parallax sizing
(height:100vh, padding-top:53vh, padding-bottom:200px from the base
#dest-outer rule). With #s3 un-pinned above, those values just bake huge
empty bands above and below the cards. Collapse the box to its content and
give it ordinary in-flow spacing. No !important needed: this rule is later
in source than the base #dest-outer (line ~747) with equal specificity, so
it wins at ≤600px. The cards keep their own clamp() height and the carousel
JS (driven by #dest-track card widths, not this height) is unaffected. */
#dest-outer {
height: auto;
padding-top: 2rem;
padding-bottom: 2rem;
}
/* Collapse the 100px spacer ()
that precedes #s4. On desktop it cushions the globe scene; on phones #s4 is
display:none, so the spacer is left as a dead peach band under the carousel.
This is the ONLY element in the page whose style attribute is exactly
"height:100px;", so the exact-match attribute selector hits nothing else.
Inline height has specificity (1,0,0,0), so !important is required to beat
it. Scoped to ≤600px → desktop keeps its cushion. */
div[aria-hidden="true"][style="height:100px;"] {
height: 0 !important;
}
}
/* Bike page, all touch devices (phones + tablets portrait + landscape) : collapse
the 200px spacer before #s4. On phones, #s4 is display:none so the spacer is a
dead peach band. On tablets, #s4 is visible but the 200px gap is still unwanted
(mirrors the 100px collapse the home page already gets from the tablet block at
line ~3481). The bare 200px selector is NOT used here because the same div
appears on flights pages where #s4 IS restored on phones (body.page-flights #s4
display:block), so the bare selector would incorrectly collapse that spacer too.
body.page-bike keeps this fix precise. Desktop (pointer:fine) keeps the 200px
cushion. */
@media (pointer: coarse) {
body.page-bike div[aria-hidden="true"][style="height:200px;"] {
height: 0 !important;
}
}
/* Home page, tablettes tactiles (pointer:coarse + min-width:601px) : même collapse
que le bloc ≤600px ci-dessus (le sticky est déjà annulé par le bloc coarse plus
haut), avec deux particularités tablette :
• #dest-outer { padding-top: 2rem } doit être en !important : sur 768–1400px une
règle existante (#dest-outer { padding-top: calc(55vh + 80px) !important }, ~l.764,
vestige du parallax sticky desktop) imposerait sinon une grande bande vide
AU-DESSUS des cartes. height (base 100vh) et padding-bottom (base 200px) n'ont
pas de !important concurrent → ils l'emportent par l'ordre source, sans !important.
• #s3 { height: auto !important } annule le height:100vh INLINE de #s3
(fr/index.html:488) — ce que le bloc ≤600px ne fait pas. Sans ça, le 100vh laisse
une bande morte sous les cartes une fois #dest-outer collapsé. Sûr : #s3 ne contient
que #amazon-title + #dest-outer (aucun widget haut à clipper) et main.js ne lit que
s3.offsetTop (position) + un s3Height codé en dur (2*innerHeight), jamais sa hauteur
réelle.
Le spacer 200px est réduit à 0 comme sur téléphone (sélecteur exact, unique). NB : sur
tablette #s4 EST visible (fond yuuki_robot_tablette.webp) — c'est donc un resserrement
de l'espace avant la scène du globe, pas la suppression d'un vide mort comme sur
téléphone. On NE touche PAS .blog-s3__sticky, les overlays ni les tiroirs/modales. */
@media (pointer: coarse) and (min-width: 601px) {
#dest-outer {
height: auto;
padding-top: 2rem !important;
padding-bottom: 2rem;
margin-top: -30px;
margin-bottom: 80px;
}
#s3 {
height: auto !important;
}
div[aria-hidden="true"][style="height:100px;"] {
height: 0 !important;
}
}
@media (max-width: 600px) {
body.page-flights #dest-outer {
height: auto;
padding-bottom: 2rem;
}
}
@media (pointer: coarse) and (min-width: 601px) {
body.page-flights #dest-outer {
height: auto;
padding-top: 2rem !important;
padding-bottom: 2rem;
}
}
@media (pointer: coarse) {
body.page-transfers div[aria-hidden="true"][style="height:200px;"] {
height: 0 !important;
}
}
@media (max-width: 600px) {
body.page-transfers div[aria-hidden="true"][style="height:200px;"] {
height: 0 !important;
}
}
/* Home page, tablettes tactiles (pointer:coarse + min-width:601px) : la
.carousel-section « Mes précédentes aventures » est en height:100vh (parallax
sticky desktop) mais ne contient QUE #carousel-track (position:absolute, cartes
injectées en JS) → height:auto la réduirait à 0 et ferait disparaître le
carrousel. On lui donne donc une hauteur explicite ajustée au contenu, ET on
abaisse la position verticale des cartes pour supprimer la bande vide SOUS les
cartes sans qu'elles débordent sur la section suivante.
Sur tablette on réduit aussi #carousel-title de 35vh (base) à 20vh, pour resserrer
l'espace AU-DESSUS du titre. Les deux calc() ci-dessous utilisent donc 20vh comme
réserve de titre (au lieu de 35vh) afin de rester cohérents avec cette hauteur.
Géométrie : main.js applique transform: translateY(calc(-50% + wave)) à chaque
carte → la valeur CSS `top` est le CENTRE de la carte (pas son bord haut). Les
cartes ondulent verticalement de ±WAVE_AMP=38px (+ rotation ~±5°). Le titre
#carousel-title (hauteur 20vh sur tablette, absolu, au-dessus de la section) doit
rester dégagé. D'où :
• height = 20vh (titre) + hauteur carte + 8rem (4rem de marge en haut + 4rem
en bas, > l'amplitude d'ondulation ~50px → aucun débordement).
• top (centre) = 20vh + 4rem + hauteur_carte/2 → bord haut de la carte à
20vh+4rem (sous le titre), bord bas à 4rem du bas de la section.
Portée : sélecteur `.carousel-section .carousel-card-wrapper` (spécificité 0,2,0)
→ cible UNIQUEMENT le carrousel d'accueil ; les cartes du blog (même classe, mais
sous .blog-s2.blog-carousel) gardent leur top:58%/64% existant. PAS de !important
sur `top` : l'état « carte dépliée » de main.js pose un top:'55%' INLINE qui doit
l'emporter, et le reset (top:'') doit revenir à cette règle. #carousel-title garde
ses 35vh sur desktop (pointer:fine) et ≤600px → inchangés. */
@media (pointer: coarse) and (min-width: 601px) {
#carousel-title {
height: 18vh;
}
.carousel-section {
height: calc(20vh + clamp(338px, 27.3vw, 350px) + 8rem);
}
.carousel-section .carousel-card-wrapper {
top: calc(20vh + 4rem + clamp(338px, 27.3vw, 350px) / 2);
}
}
.blog-s4, .blog-s5, .blog-s6 {
position: relative;
z-index: 4;
background: var(--beige);
}
/* .blog-s2.blog-carousel sets pointer-events:none so its pinned sticky
background doesn't swallow clicks meant for s4. pointer-events does NOT
inherit from carousel to s4 (they are siblings, not ancestor/descendant),
but set it explicitly here so s4 and its subtree are unambiguously
click-interactive regardless of any future cascade changes. */
.blog-s4 {
pointer-events: auto;
}
#blog-carousel-title {
text-align: center;
margin: 2rem 0 2.5rem;
}
#blog-carousel-title-text {
display: inline-block;
position: relative;
margin: 0;
white-space: normal;
font-family: "Klee One", sans-serif;
font-weight: 600;
font-size: clamp(1.6rem, 4vw, 3rem);
color: #4a3b33;
}
@media (pointer: coarse) and (orientation: portrait) {
#blog-carousel-title-text { white-space: nowrap; }
}
#blog-carousel-title-text span {
display: inline-block;
opacity: 0;
white-space: pre;
}
#blog-carousel-title-text span.is-popped {
animation: mangaLetterPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#blog-stabilo-svg {
position: absolute;
left: -18px;
top: 0;
width: calc(100% + 36px);
height: 100%;
z-index: -1;
pointer-events: none;
overflow: visible;
clip-path: inset(0 100% 0 0);
}
#blog-stabilo-poly { fill: #ffa07a; opacity: 0.45; }
#blog-stabilo-svg.is-drawn {
clip-path: inset(0 0 0 0);
transition: clip-path 600ms ease-out;
}
.blog-carousel__track-wrap {
position: relative;
width: 100%;
margin-top: 0rem;
}
.blog-carousel__track {
position: relative;
height: clamp(400px, 60vh, 520px);
clip-path: inset(-90px 0);
/* Re-enable mouse interaction here: the parent .blog-s2.blog-carousel sets
pointer-events:none so its background doesn't intercept clicks meant for
.blog-s4. The track (and the polaroids inside it) must stay grabbable. */
pointer-events: auto;
cursor: grab;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.blog-polaroid {
position: absolute;
top: 50%;
left: 0;
width: clamp(220px, 70vw, 304px);
background: #ffffff;
border-radius: clamp(18px, 6.4vw, 28px);
padding: clamp(11px, 3.7vw, 16px) clamp(11px, 3.7vw, 16px) clamp(28px, 9.2vw, 40px);
box-shadow: 4px 12px 36px rgba(74, 59, 51, 0.2);
cursor: grab;
will-change: transform;
user-select: none;
-webkit-user-select: none;
}
.blog-polaroid__photo {
width: 100%;
aspect-ratio: 272 / 240;
border-radius: 0px;
overflow: hidden;
}
.blog-polaroid__img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
pointer-events: none;
}
.blog-polaroid__caption {
margin-top: 16px;
text-align: center;
font-family: "Klee One", sans-serif;
font-size: 0.95rem;
color: #4a3b33;
}
@media (max-width: 860px) {
.blog-polaroid {
width: clamp(160px, 60vw, 260px);
max-width: 80vw;
}
.blog-polaroid__photo,
.blog-polaroid__img {
max-width: 100%;
}
}
/* Tablettes tactiles en grand format (pointer: coarse, ≥861px : tablettes en
PAYSAGE — iPad 10e gén. 1180px, iPad Pro 1194/1366px…). À ces largeurs la
polaroid reprend sa taille de BASE clamp(220px, 70vw, 304px) (le palier
max-width:860px ne s'applique pas), jugée trop petite sur tablette. On l'agrandit
de 15% → clamp(253px, 70vw, 349px) ≈ base × 1,15 (sur tablette la borne MAX est
contraignante : 304→349). On NE descend PAS à 601px : sous 861px la polaroid a une
base PLUS PETITE (clamp(160px, 60vw, 260px) via le palier max-width:860px) ; une
règle coarse ≥601 l'y écraserait à 349px et la sur-agrandirait (régression).
Desktop (pointer: fine) et téléphones (≤600px) : inchangés. */
@media (pointer: coarse) and (min-width: 861px) {
.blog-polaroid {
width: clamp(253px, 70vw, 349px);
}
}
.blog-s3.blog-video-text {
position: relative;
z-index: 3;
margin-top: 0;
height: 300vh;
min-height: 300vh;
transform-origin: right top;
will-change: transform;
border-radius: 0;
box-shadow: 0 -14px 18px -3px rgba(74, 59, 51, 0.30);
}
.blog-s3-backdrop {
position: fixed;
inset: 0;
z-index: 2;
background: #FAF8F4;
opacity: 0;
pointer-events: none;
}
.blog-s3-backdrop.is-active { opacity: 1; }
.blog-s3__sticky {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
.blog-s3__hscroll {
display: flex;
flex-wrap: nowrap;
height: 100%;
will-change: transform;
}
.blog-s3__panel {
flex: 0 0 80vw;
height: 100%;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(2rem, 5vw, 5rem);
box-sizing: border-box;
padding: 50px 8vw 0;
color: var(--text-light);
}
/* Le panneau 3 a la MÊME largeur que les panneaux 1 et 2 (80vw). Il était
auparavant plus large (120vw) pour ménager une marge à droite de l'image Yuuki.
Yuuki ayant été retirée, cette largeur supplémentaire n'a plus lieu d'être :
justify-content:center centrait le surplus (40vw) des deux côtés, donc la moitié
(20vw) atterrissait à GAUCHE et gonflait l'écart entre le texte du panneau 2 et
la vidéo du panneau 3 par rapport à l'écart 1→2. On repasse donc à 80vw. */
.blog-s3__panel-3 {
flex: 0 0 80vw;
}
.blog-s3__yuuki {
margin-left: auto;
flex-shrink: 0;
margin-right: 3vw;
margin-top: 4rem;
}
.blog-s3__text-col {
flex: 1 1 0;
max-width: 540px;
align-self: center;
padding-top: 0;
padding-left: 80px;
margin-top: -120px;
}
.blog-s3__title {
position: relative;
display: inline-block;
margin: 0 0 1.25rem;
font-family: "Klee One", sans-serif;
font-weight: 600;
font-size: clamp(1.28rem, 2.56vw, 2.18rem);
line-height: 1.15;
color: var(--text-light);
}
.blog-s3__title-text {
position: relative;
z-index: 1;
display: inline-block;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s ease, transform 0.5s ease;
white-space: nowrap;
}
.blog-s3__panel.is-active .blog-s3__title-text {
opacity: 1;
transform: none;
transition-delay: 0.65s;
}
.blog-s3__title-underline {
position: absolute;
z-index: 0;
left: -18px;
top: 0;
width: calc(100% + 36px);
height: 100%;
pointer-events: none;
overflow: visible;
clip-path: inset(0 100% 0 0);
}
.blog-s3__title-underline svg { display: block; width: 100%; height: 100%; }
.blog-s3__title-underline path { fill: #7a3a1a; }
.blog-s3__panel.is-active .blog-s3__title-underline {
clip-path: inset(0 0 0 0);
transition: clip-path 0.6s ease-out;
}
.blog-s3__body {
margin: 0;
max-width: 46ch;
font-family: "Quicksand", "Klee One", sans-serif;
font-size: clamp(1rem, 1.2vw, 1.15rem);
line-height: 1.7;
color: var(--text-light);
opacity: 0;
transform: translateY(10px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.blog-s3__panel.is-active .blog-s3__body {
opacity: 1;
transform: none;
transition-delay: 0.9s;
}
.blog-s3__video-1,
.blog-s3__video-2,
.blog-s3__video-3 {
flex: 0 0 auto;
width: clamp(172px, 20.3vw, 265px);
aspect-ratio: 9 / 16;
object-fit: cover;
border-radius: 16px;
background: #000;
box-shadow: 0 18px 50px rgba(74, 59, 51, 0.35);
display: block;
margin-top: 0;
}
.blog-s3__video-1 {
opacity: 0;
transform: translateX(-120%);
transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-s3__panel-1.is-active .blog-s3__video-1 { opacity: 1; transform: none; }
.blog-s3__video-2 {
opacity: 0;
transform: translateY(120%);
transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-s3__panel-2.is-active .blog-s3__video-2 { opacity: 1; transform: none; }
.blog-s3__video-3 {
opacity: 0;
transform: translateY(-120%);
transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-s3__panel-3.is-active .blog-s3__video-3 { opacity: 1; transform: none; }
.blog-s3__lava {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
opacity: 0;
}
/* ============================================================================
Section 3 — GEL desktop sous 860px (pointer: fine).
Sous 860px la fenêtre déclenche la barre de défilement horizontale (body
min-width:860px). Sans gel, le contenu de .blog-s3 continue de rétrécir car
tout y est en unités VIEWPORT (vw), calculées sur la fenêtre, pas sur le
panneau : flex-basis des panneaux (80vw), gap (5vw), padding (8vw),
largeur des vidéos (20.3vw), marge de Yuuki (3vw), taille du titre (2.56vw).
On fige chaque vw à son équivalent px AU point de rupture 860px (vw × 860/100)
pour que 859px rende À L'IDENTIQUE de 860px — aucun reflow, aucun saut au seuil
(à 861px un panneau vaut déjà 80vw ≈ 689px ≈ la valeur figée 688px).
IMPORTANT — on NE fige PAS .blog-s3__text-col : en flex:1 1 0, une fois TOUS
ses voisins figés en px, sa largeur devient déterministe automatiquement (et
elle diffère entre les panneaux 1/2 et le panneau 3 qui porte Yuuki) ; lui
imposer un px casserait l'un des deux. .blog-s3__body est déjà gelé : son
font-size clamp(1rem, 1.2vw, 1.15rem) bute sur 1rem dès que la fenêtre passe
sous ~1333px. Le scroll-jack (main.js) lit hscroll.scrollWidth et se recale au
resize, donc une largeur de rail fixe (2064px) reste parfaitement synchrone.
Cible (pointer:fine) : le tactile garde sa pile verticale (bloc ci-dessous). */
@media (pointer: fine) and (max-width: 859px) {
.blog-s3__hscroll { min-width: 2064px; } /* 688 × 3 */
.blog-s3__panel { flex: 0 0 688px; gap: 43px; padding: 50px 68.8px 0; } /* 80vw / 5vw / 8vw @860 */
.blog-s3__panel-3 { flex: 0 0 688px; } /* 80vw @860 (égal aux panneaux 1/2) */
.blog-s3__video-1,
.blog-s3__video-2,
.blog-s3__video-3 { width: 174.58px; } /* 20.3vw @860 */
.blog-s3__yuuki { margin-right: 25.8px; } /* 3vw @860 */
.blog-s3__title { font-size: 1.376rem; } /* 2.56vw @860 = 22.016px */
/* .blog-hero (blog-s1) — gel des unités vw sous 860px. Sous 860px le bloc
@media (max-width:860px) passe le héros en UNE colonne et masque
.blog-hero__media (la vidéo) ; il ne reste que la colonne texte. Ses seules
valeurs qui rétrécissent encore avec la fenêtre sont le padding gauche/droit
(5vw) et les tailles de police (clamp à terme vw). On les fige à leur valeur
à 860px (vw × 860/100). La largeur de la boîte est déjà figée par
body{min-width:860px}. NB : #blog-widget-mount n'est PAS dans .blog-hero (il
est dans .blog-s4) et n'a aucune dimension en vw → rien à y geler ici. */
.blog-hero { padding-left: 43px; padding-right: 43px; } /* 5vw @860 */
#heroTitle { font-size: 33.54px; } /* 3.9vw @860 */
.blog-hero__hook { font-size: 18.87px; } /* 0.9rem + 0.52vw @860 */
.blog-hero__intro { font-size: 15.65px; } /* 0.86rem + 0.22vw @860 */
.blog-hero__btn-compose,
.blog-hero__btn-destinations { font-size: 14.53px; } /* 0.72rem + 0.35vw @860 */
}
/* ============================================================================
Section 3 — TACTILE (pointer: coarse, tablette & mobile) : reset structurel.
Le scroll-jack horizontal ET le pivot S3->S4 sont desactives en JS sur pointeur
grossier (main.js, gabarit `(hover: hover) and (pointer: fine)` = l'inverse exact
de ce @media, pour qu'une tablette large en paysage tombe du bon cote),
qui ajoute aussi .is-active a tous les panneaux : plus besoin de !important
pour neutraliser un transform inline. On repasse la section en flux normal ->
3 panneaux empiles verticalement, scroll natif, videos + textes visibles.
(Le layout qui alterne gauche/droite arrivera a l'etape suivante.)
NE PAS confondre avec le bloc Yuuki fluide (1025-1400px) ni le bloc fleche
(861-1400px) plus bas, qui restent inchanges. */
@media (pointer: coarse) {
/* Section : plus de hauteur fixe (le 300vh n'etait que la course du
scroll-jack), conteneur sticky depingle, rail transforme en pile verticale. */
.blog-s3.blog-video-text {
height: auto;
min-height: 0;
/* Clippe l'overflow horizontal : les videos demarrent hors panneau
(translateX +/-120%) pour le slide-in et ne doivent pas creer de barre de
defilement horizontale. `clip` ne cree pas de conteneur de scroll et
laisse le flux vertical intact. */
overflow-x: clip;
}
/* Pas d'ombre « feuille superposee » en tactile (cet effet ne sert que la pile
desktop). !important car ces ombres viennent d'un