/* Shared landscape theme. Component styles remain in their own files. */
html, body {
    background: #dfc7a0;
    color: #272b29;
}
.landscape {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #dfc7a0 url('../images/parallax/paper.webp') repeat;
}
.landscape-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(108vw, 192vh);
    height: max(108vh, 60.8vw);
    transform: translate(-50%, -50%);
}
.landscape-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    will-change: transform;
}
.landscape-layout {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.landscape-layout > .content-container {
    flex: 1;
    min-width: 0;
    padding: 90px 28px 0 305px;
}
.ink-header { position: relative; z-index: 100; }
.ink-brand {
    position: fixed;
    top: 20px;
    left: 30px;
    z-index: 1;
    display: flex;
    gap: 12px;
    align-items: center;
    color: #252b29;
    text-decoration: none;
    font-weight: 800;
    font-size: 1rem;
}
.ink-brand img { object-fit: contain; }
button.ink-brand { padding: 0; border: 0; background: transparent; cursor: pointer; }
.ink-brand small { display: block; font-size: 0.65rem; letter-spacing: 0.09em; }
.ink-navigation { position: fixed; top: 0; left: 0; width: 400px; height: 370px; pointer-events: none; }
.ink-navigation-brush { position: absolute; inset: 0; width: 100%; height: 100%; }
.ink-navigation ul { position: relative; list-style: none; padding: 25px 0 0; margin: 0; }
.ink-navigation li { margin-left: calc(135px - var(--item-index) * 24px); height: 41px; width: 150px; }
.ink-navigation a {
    display: block;
    padding: 6px 14px;
    color: #f6ead5;
    font-family: 'Merienda', cursive;
    font-size: 1.16rem;
    text-decoration: none;
    pointer-events: auto;
    border-radius: 2px;
}
.ink-navigation a.active { color: #fff8e5; }
.ink-navigation a:focus-visible, .ink-menu-toggle:focus-visible, .ink-brand:focus-visible { outline: 3px solid #b77b20; outline-offset: 3px; }
.ink-menu-toggle { display: none; }
.landscape-layout .page-container { color: #272b29; padding-top: 35px; }
.landscape-layout .hero-content {
    margin: 80px 0 80px;
    padding: 28px;
    max-width: 560px;
    border-radius: 10px;
    background: rgba(243, 228, 201, 0.88);
}
.landscape-layout .hero-title { font-family: 'Merienda', cursive; font-size: clamp(1.8rem, 3vw, 2.6rem); text-shadow: none; }
.landscape-layout .hero-description, .landscape-layout .page-description { color: #313831; text-shadow: none; }
.landscape-layout .page-title { background: none; -webkit-text-fill-color: currentColor; color: #333b32; }
.landscape-layout .schedule-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.landscape-layout .schedule-card { background: rgba(243, 228, 201, 0.93); padding: 25px; border-radius: 10px; }
@media (max-width: 1000px) {
    .landscape-layout > .content-container { padding-left: 225px; padding-right: 20px; }
    .ink-navigation { transform: scale(0.8); transform-origin: top left; }
}
@media (max-width: 700px) {
    .ink-header { height: 0; background: transparent; }
    .ink-brand { position: fixed; left: 14px; right: auto; top: 12px; }
    .ink-brand img { width: 42px; height: 42px; }
    .ink-brand small { font-size: 0.52rem; }
    .ink-menu-toggle { display: block; position: absolute; right: 15px; top: 20px; padding: 7px 12px; background: #252b29; color: #fff2d8; border: 0; border-radius: 3px; }
    .ink-navigation { display: none; top: 77px; position: absolute; transform: scale(0.85); }
    .ink-navigation.is-open { display: block; }
    .landscape-layout > .content-container { padding: 0 14px; }
    .landscape-layout .hero-content { margin: 40px 0 60px; padding: 22px; }
    .landscape-layout .schedule-grid { grid-template-columns: 1fr; }
    .landscape-stage { left: 42%; }
}
@media (prefers-reduced-motion: reduce) {
    .landscape-layer { will-change: auto; }
}
.ink-navigation a { position: relative; isolation: isolate; }
.ink-navigation a::before {
    content: '';
    position: absolute;
    left: -7px;
    right: 9px;
    bottom: -3px;
    height: 36px;
    z-index: -1;
    pointer-events: none;
    background: url('../images/navStroke.png') center bottom / contain no-repeat;
    opacity: 0;
}
.ink-navigation a.active::before {
    opacity: 1;
}
@media (max-width: 700px) {
    .landscape-layout .hero-title { font-size: 1.55rem; line-height: 1.3; }
    .landscape-layout .site-footer:has(.cta-wrapper) .footer-bar { padding-top: 110px; }
}

/* The two destinations share one camera; navigation remains outside the scene. */
.camera-site { overflow-x: clip; }
.journey-viewport { display: grid; position: relative; min-height: calc(100svh - 150px); }
.journey-viewport[hidden] { display: none; }
.journey-place { grid-area: 1 / 1; min-width: 0; align-self: start; will-change: transform; }
.journey-place[inert] { pointer-events: none; }
/* Les positions des scènes sont calculées dans Helpers/SceneCamera.cs. */
.dojo-entrance { position: relative; isolation: isolate; width: min(100%, 620px); margin: 38px auto 90px; padding: 58px 28px 55px; }
.dojo-gate { position: absolute; inset: 0 0 -50px; z-index: -1; pointer-events: none; }
.dojo-gate::before, .dojo-gate::after {
    content: ''; position: absolute; top: 20px; bottom: 0; width: 42px;
    background: repeating-linear-gradient(92deg, #302b22 0 6px, #494031 7px 10px, #373127 12px 18px);
    border: 2px solid #272b26; box-shadow: inset 5px 0 0 #a47c4340, 7px 6px 0 #29251b20;
}
.dojo-gate::before { left: 12px; transform: rotate(1deg); }
.dojo-gate::after { right: 12px; transform: rotate(-1deg); }
.dojo-lintel { position: absolute; left: -14px; right: -14px; top: 0; height: 45px; background: #2e3028; border-bottom: 7px solid #8c6939; clip-path: polygon(0 0, 20% 15%, 80% 15%, 100% 0, 98% 78%, 65% 100%, 35% 100%, 2% 78%); }
.dojo-notice { position: relative; padding: 32px clamp(18px, 4vw, 45px); background: #ead6af url('../images/parallax/paper.webp') repeat; border: 9px solid #57452e; outline: 2px solid #2f3027; box-shadow: 9px 14px 22px #29251b30, inset 0 0 35px #9c75432b; color: #292d28; }
.dojo-notice::before, .dojo-notice::after { content: ''; position: absolute; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: #554a37; }
.dojo-notice::before { left: 12px; } .dojo-notice::after { right: 12px; }
.dojo-kicker { font-size: .66rem; letter-spacing: .18em; text-align: center; }
.dojo-notice h1 { font-family: 'Merienda', cursive; font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1.25; text-align: center; color: #292d28; }
.dojo-welcome { text-align: center; font-style: italic; color: #63543e; margin-bottom: 25px; }
.dojo-session { padding: 18px 0; border-top: 1px solid #a58a60; }
.dojo-session h2 { font: 400 1.45rem 'Merienda', cursive; margin: 0 0 10px; }
.dojo-session p { margin: 0 0 4px; }
.dojo-session strong { font-size: 1.1rem; color: #624218; }
.dojo-notice a { display: inline-block; margin-top: 24px; color: #624218; text-underline-offset: 4px; }
.dojo-notice a:focus-visible { outline: 2px solid #624218; outline-offset: 4px; }
@media (max-width: 700px) {
    .journey-viewport { min-height: calc(100svh - 78px); }
    .dojo-entrance { padding: 48px 13px 30px; margin-top: 30px; }
    .dojo-lintel { left: 0; right: 0; }
    .dojo-notice { border-width: 6px; }
}

/* Cadrage du ciel libre à gauche du relief ; pondéré par la caméra C#. */
.landscape { --home-landscape-offset: 22vw; }
@media (max-width: 1000px) { .landscape { --home-landscape-offset: 30vw; } }
@media (max-width: 700px) { .landscape { --home-landscape-offset: 55vw; } }

/* Géométrie des panneaux pour une entrée immédiatement au bord de la fenêtre. */
.journey-viewport { --journey-left: 305px; --journey-right: 28px; }
.journey-training { width: min(100%, 620px); justify-self: center; }
@media (max-width: 1000px) { .journey-viewport { --journey-left: 225px; --journey-right: 20px; } }
@media (max-width: 700px) { .journey-viewport { --journey-left: 14px; --journey-right: 14px; } }
/* Distance unique : panneau et herbe avancent à la même vitesse en pixels. */
.camera-site {
    --journey-left: 305px;
    --journey-right: 28px;
    --journey-panel-width: min(620px, calc(100vw - var(--journey-left) - var(--journey-right)));
    --journey-distance: calc(50vw + var(--journey-panel-width) / 2 - var(--journey-left) / 2 + var(--journey-right) / 2 + 14px);
}
.landscape-terrain { z-index: 1; }
.landscape-foreground { z-index: 3; }
@media (max-width: 1000px) { .camera-site { --journey-left: 225px; --journey-right: 20px; } }
@media (max-width: 700px) { .camera-site { --journey-left: 14px; --journey-right: 14px; } }
/* Navigation compacte, toujours ancrée en haut à gauche. */
@media (max-width: 1024px) {
    .ink-navigation {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: auto;
        width: 300px;
        height: 285px;
        transform: none;
    }
    .ink-navigation-brush { width: 330px; height: 360px; top: 0; bottom: auto; transform: none; }
    .ink-navigation ul { padding-top: 12px; }
    .ink-navigation li { margin-left: calc(125px - var(--item-index) * 22px); height: 42px; width: 155px; }
    .ink-navigation a { font-size: 1.05rem; padding: 8px 14px; }
    .landscape-layout { padding-bottom: 0; }
    .landscape-layout > .content-container { padding: 90px 24px 0 225px; }
    .camera-site, .journey-viewport { --journey-left: 225px; --journey-right: 24px; }
}
@media (max-width: 700px) {
    .landscape-layout > .content-container { padding: 0 14px; }
    .camera-site, .journey-viewport { --journey-left: 14px; --journey-right: 14px; }
}
@media (max-width: 1024px) {
    .ink-brand {
        position: fixed;
        top: 14px;
        left: 14px;
        right: auto;
        bottom: auto;
    }
    .ink-brand img { width: 42px; height: 42px; }
}
@media (max-width: 700px) { .landscape-layout > .site-footer { display: block; } }

@media (max-width: 700px), (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
    .site-footer { display: block !important; }
}
/* Téléphone couché : contenu remonté et place réservée au petit menu. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
    .ink-header { height: 0; background: transparent; }
    .ink-navigation {
        display: block; position: fixed; top: 0; left: 0;
        bottom: auto;
        width: 300px; height: 285px;
        transform: scale(.68); transform-origin: top left;
    }
    .ink-navigation-brush { width: 330px; height: 360px; top: 0; bottom: auto; transform: none; }
    .ink-navigation ul { padding-top: 12px; }
    .ink-navigation li { margin-left: calc(125px - var(--item-index) * 22px); height: 42px; width: 155px; }
    .ink-navigation a { font-size: 1.05rem; padding: 8px 14px; }
    .ink-brand { top: 10px; left: 10px; bottom: auto; }
    .ink-brand img { width: 28px; height: 28px; }
    .landscape-layout { padding-bottom: 0; }
    .landscape-layout > .content-container { padding: 8px 16px 0 210px; }
    .journey-viewport { min-height: calc(100svh - 8px); }
    .camera-site, .journey-viewport { --journey-left: 210px; --journey-right: 16px; }
}
/* Les traits débordent du menu pour conserver de l'encre sous chaque libellé. */
.ink-navigation-brush { width: 500px; height: 450px; }
@media (max-width: 1024px), (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
    .ink-navigation-brush { width: 430px; height: 450px; }
}
/* Le papier reste fixe ; seuls les dessins sont effacés par le C#. */
.landscape-drawings { position: absolute; inset: 0; }
.training-paper { margin: 42px auto 60px; padding: 24px clamp(8px, 3vw, 32px); color: #292d28; }
.training-information h1 { font: 400 clamp(1.8rem, 3vw, 2.6rem)/1.25 'Merienda', cursive; text-align: center; }
.training-information a { display: inline-block; margin-top: 24px; color: #624218; text-underline-offset: 4px; }
.training-information a:focus-visible { outline: 2px solid #624218; outline-offset: 4px; }
@media (max-width: 700px) { .training-paper { margin-top: 24px; padding-top: 12px; } }
@media (orientation: landscape) and (max-height: 600px) { .training-paper { margin-top: 0; padding-top: 4px; } }

/* Effacement local : la zone épouse la hauteur réelle du texte et des images.
   Le même papier recouvre le dessin, avec une marge douce de 36 px. */
.training-paper { position: relative; isolation: isolate; }
.training-erasure {
    position: absolute;
    inset: -85px -64px;
    z-index: -1;
    pointer-events: none;
    mask-image: url('../images/parallax/eraser-mask.png');
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-mode: alpha;
}
.training-erasure-paper {
    position: absolute;
    inset: 0;
    /* Voile crème léger, texture du papier toujours visible. */
    background-image: linear-gradient(#fff5df38, #fff5df38), url('../images/parallax/paper.webp');
    background-color: #dfc7a0;
    background-attachment: fixed;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-mode: alpha;
}
.training-information { opacity: var(--information-reveal, 1); }

/* Les champs et boutons utilisent également la police du site. */
button, input, select, textarea { font-family: inherit; }

/* Merienda : italique synthétique, la police ne fournit pas de variante italique. */
html, body, h1, h2, h3, h4, h5, h6, p, a, span, strong, em, label,
address, li, dt, dd, th, td, button, input, select, textarea, small {
    font-style: italic !important;
}
/* Horaires : cadrage plus à gauche sur les grands écrans. */
@media (min-width: 1200px) {
    .camera-site:not(.mobile-one-page) .journey-training .journey-page-content { position: relative; left: clamp(-300px, -15vw, -160px); }
}
/* Fond gommé également visible sur téléphone, en portrait et paysage. */
@media (max-width: 700px), (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
    .training-erasure { display: block; }
}
/* Une seule page détermine la hauteur ; les pages quittées restent dans le décor pendant leur fondu. */
.journey-place[hidden] { display: none; }
.journey-place.is-departing { position: absolute; inset: 0 0 auto; width: 100%; }
.journey-place.is-current { position: relative; }
.journey-place.journey-training { width: min(100%, 620px); }

/* Téléphone : un parcours vertical, chaque section possède son propre décor. */
.mobile-one-page > .landscape { display: none; }
.mobile-one-page .ink-navigation { display: none !important; }
.mobile-one-page .ink-brand { top: 12px; left: 12px; bottom: auto; }
.mobile-one-page .site-footer { display: block !important; }
.mobile-one-page .site-footer { flex-shrink: 0; margin-top: 0; }
.mobile-one-page .site-footer::after { background-size: cover; background-position: center top; }
.mobile-one-page .site-footer .footer-bar { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 85px 24px 38px; text-align: center; }
.mobile-one-page .site-footer .footer-emblem img { width: 96px; height: 96px; }
.mobile-one-page .site-footer .footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; width: min(100%, 380px); justify-self: center; }
.mobile-one-page .site-footer .footer-links a { padding: 10px 0; }
.mobile-one-page .content-container { padding: 0 !important; }
.mobile-one-page .journey-viewport { display: block; }
.mobile-one-page .journey-place,
.mobile-one-page .journey-place.is-departing,
.mobile-one-page .journey-place.journey-training {
    position: relative; inset: auto; width: 100%; min-height: 100svh;
    box-sizing: border-box; padding: 80px 18px 65px; isolation: isolate;
    transform: none; opacity: 1; scroll-margin-top: 0;
}
.mobile-one-page .journey-home { display: grid; align-items: center; }
.mobile-section-background { position: absolute; inset: 0; overflow: hidden; z-index: -2; pointer-events: none; }
.mobile-section-background .landscape { position: absolute; inset: 0; width: 100%; height: 100%; }
.mobile-section-background .landscape-stage { top: auto; bottom: 0; height: max(100svh, 800px); }
.mobile-section-divider { position: absolute; left: -3%; top: -12px; width: 106%; height: 30px; object-fit: fill; transform: rotate(-3deg); filter: brightness(.25); pointer-events: none; z-index: 2; }
.mobile-one-page .journey-place > :not(.mobile-section-background):not(.mobile-section-divider) { position: relative; left: auto; }
.mobile-one-page .ink-hero { margin: 0 auto; }
.mobile-section-background .landscape-stage { transform: translateX(-50%); }

/* Le sol reste solidaire de l’accueil ; seul le relief reçoit le mouvement de caméra. */
.mobile-one-page .journey-home { display: block; padding-top: 115px; }
.mobile-one-page .journey-home .ink-hero { margin-top: 0; margin-bottom: 0; }
.mobile-one-page .journey-page-content { width: 100%; }
.mobile-one-page .tariffs-page,
.mobile-one-page .club-page,
.mobile-one-page .disciplines-page,
.mobile-one-page .contact-page { left: auto; }
.mobile-one-page .footer-identity,
.mobile-one-page .footer-spirit { border-left: 0; padding-left: 0; }
.mobile-one-page .footer-links { grid-column: 1; grid-row: auto; }
.mobile-one-page .footer-links a + a::before { display: none; }
.mobile-one-page .footer-spirit { justify-self: center; }
.mobile-one-page .mobile-section-background .landscape-foreground { bottom: 0; }
@media (orientation: landscape) and (max-height: 600px) {
 .mobile-one-page .journey-home { padding-top: 65px; }
}

/* Panorama mobile autonome : de l’extrémité gauche à l’extrémité droite du dessin. */
.mobile-section-background { --mobile-world-width: max(100vw, 177.68svh, 1421.44px); }
.mobile-section-background .landscape-stage { left: 0; width: var(--mobile-world-width); transform: none; }

/* Disciplines en one-page : panorama à demi-échelle, caméra adaptée à sa largeur. */
.mobile-one-page .journey-disciplines .mobile-section-background { --mobile-world-width: max(50vw, 88.84svh, 710.72px); }
.mobile-one-page .journey-disciplines .landscape-stage { height: max(50svh, 400px); }
.mobile-one-page .journey-disciplines .landscape-sun { scale: .5; top: calc(100% - max(40svh, 320px)) !important; }

/* Séparateurs dédiés, proportions naturelles et diagonales alternées. */
.mobile-one-page .journey-place { overflow: visible; }
.mobile-one-page .journey-place:not(.journey-home) { padding-top: 125px; }
.mobile-one-page .mobile-section-divider {
    left: -8%; top: -65px; width: 116%; height: auto;
    object-fit: contain; filter: none; transform: rotate(-3deg);
}
.mobile-one-page .journey-place:nth-child(odd) .mobile-section-divider { transform: rotate(3deg); }



/* Même centrage des horaires avant et pendant leur départ. */
.camera-site:not(.mobile-one-page) .journey-training.is-departing {
    left: 0;
    right: 0;
    margin-inline: auto;
}

/* Ceinture : position proportionnelle à sa hauteur, sans écraser le tissu. */
.mobile-one-page .mobile-section-divider { top: 0; transform: translateY(-50%) rotate(-3deg); }
.mobile-one-page .journey-place:nth-child(odd) .mobile-section-divider { transform: translateY(-50%) rotate(3deg); }

/* Image recadrée : centre de la ceinture sur la jonction, contours fondus. */
.mobile-one-page .mobile-section-divider {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* L’ancienne réserve pour le menu fixe n’est plus utile en une page mobile. */
.mobile-one-page .landscape-layout { padding-bottom: 0; }

/* One-page : aucun papier gommé, pour préserver la fluidité. */
.mobile-one-page .training-erasure,
.mobile-one-page .tariffs-paper,
.mobile-one-page .contact-page::before,
.mobile-one-page .disciplines-page::before,
.mobile-one-page .club-page::before {
    display: none !important;
}

/* One-page : papier de riz seul pour Le Club et Contact. */
.mobile-one-page .journey-club,
.mobile-one-page .journey-contact {
    background: #dfc7a0 url('../images/parallax/paper.webp') repeat;
}

/* Premier plan du panorama : bambou au sol à droite, arbre en haut à droite. */
.mobile-one-page .journey-place.journey-contact { min-height: auto; padding: 115px 0 0; }
.mobile-one-page .journey-place.journey-club { padding-bottom: clamp(190px, 48vw, 290px); }
.mobile-one-page .journey-club .location-layout > div:not(.map-frame) { text-align: center; }
.mobile-one-page .journey-club .dojo-section { grid-template-columns: 1fr; }
.mobile-one-page .journey-club .dojo-section > div { display: contents; }
.mobile-one-page .journey-club .dojo-section > div > h2 { grid-row: 1; }
.mobile-one-page .journey-club .dojo-section > div > p { grid-row: 2; }
.mobile-one-page .journey-club .dojo-photo { grid-row: 3; }
.mobile-one-page .journey-club .dojo-section > div > .brush-link { grid-row: 4; justify-self: center; }
.mobile-one-page .journey-place.journey-club > .mobile-club-tree,
.mobile-one-page .journey-place.journey-club > .mobile-club-bamboo { position: absolute; left: auto; right: 0; height: auto; z-index: -1; pointer-events: none; }
.mobile-one-page .journey-club > .mobile-club-tree { top: 0; width: min(65vw, 350px); }
.mobile-one-page .journey-place.journey-club > .mobile-club-bamboo { left: 0; right: auto; bottom: 0; width: min(65vw, 320px); max-height: 290px; object-fit: contain; object-position: right bottom; transform: scaleX(-1); }
.mobile-one-page .tariffs-page .offer-price { text-align: center; }
.mobile-one-page .tariffs-page .family-prices table { width: calc(50% + 1.5rem); table-layout: fixed; }
.mobile-one-page .tariffs-page .family-prices td { width: 3.5rem; text-align: right; padding-left: 0 !important; padding-right: 0; }
.landscape-prop { position: absolute; inset: 0; z-index: 3; pointer-events: none; will-change: transform; }
.landscape-bamboo { position: absolute; right: 0; bottom: 0; width: min(43vw, 760px); height: auto; }
@media (orientation: portrait) and (min-width: 701px) and (max-width: 1100px) {
    .landscape-bamboo { width: min(65vw, 760px); }
}
.landscape-tree { position: absolute; right: 0; top: 0; width: auto; max-width: min(40vw, 700px); height: auto; }

/* One-page : les horaires conservent uniquement le papier de riz. */
.mobile-one-page .journey-place.journey-training {
    background: #dfc7a0 url('../images/parallax/paper.webp') repeat;
    min-height: auto;
    padding-bottom: 45px;
}