body {
    font-family: "Helvetica", sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;  
    min-height: 100lvh;
    margin: 0;
    padding: 0 24px;
    position: relative;
    animation: backgroundFade 20s infinite;
}

.index-page {
    justify-content: flex-start;
}

* {
    box-sizing: border-box;
}

@keyframes backgroundFade {
    0% {
        background-color: #E4F7F6;  /*vert*/
    }
    10% {
        background-color: #E4F7F6;  /*vert*/
    }
    20% {
        background-color: #CEE1F2;  /*bleu*/
    }
    30% {
        background-color: #CEE1F2;  /*bleu*/
    }
    40% {
        background-color: #F1E8FC;  /*violet*/
    }
    50% {
        background-color: #F1E8FC;  /*violet*/
    }
    60% {
        background-color: #FFE0EE;  /*rouge*/
    }
    70% {
        background-color: #FFE0EE;  /*rouge*/
    }
    80% {
        background-color: #F1E8FC;  /*violet*/
    }
    90% {
        background-color: #CEE1F2;  /*bleu*/
    }
    100% {
        background-color: #E4F7F6;  /*vert*/
    }
}

h1 {
    color: #555555;
    font-size: 36px;
    max-width: 80vw;
    margin-bottom: 0;
}

p {
    color: #555555;
    font-size: 20px;
    max-width: 70vw;
}

.lock-page {
    padding: 24px;
}

.lock-card {
    width: min(460px, 100%);
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 32px;
    background: rgba(235, 235, 235, 0.5);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 44px rgba(120, 80, 120, 0.16);
}

.lock-title {
    width: min(280px, 75%);
    margin-bottom: 18px;
    filter: drop-shadow(0 4px 15px rgba(231, 84, 128, 0.45));
}

.lock-text {
    max-width: 100%;
    margin: 0 auto 18px;
    font-size: 20px;
}

.lock-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.lock-code {
    width: min(240px, 100%);
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    background: rgba(245, 245, 245, 0.85);
    color: #555555;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-align: center;
    box-shadow: inset 0 2px 8px rgba(120, 80, 120, 0.1), 0 3px 24px rgba(120, 80, 120, 0.1);
}

.lock-error {
    margin: 0;
    color: #cb4d74;
    font-size: 17px;
    font-weight: 700;
}

.lock-keypad {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.lock-key {
    min-height: 68px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    background: rgba(245, 245, 245, 0.84);
    color: #555555;
    font-size: 26px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 2px 8px rgba(120, 80, 120, 0.1), 0 3px 24px rgba(120, 80, 120, 0.1);
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    touch-action: manipulation;
}

.lock-key:hover {
    transform: translateY(-4px);
    background: rgba(233, 233, 233, 0.84);
}

.lock-key-action,
.lock-key-submit {
    font-size: 20px;
}

.lock-key-submit {
    background: rgba(37, 148, 241, 1);
    border-color: rgba(185, 215, 255, 1);
    color: #ffffff;
    box-shadow: inset 0 2px 8px rgba(120, 80, 120, 0.3), 0 3px 24px rgba(120, 80, 120, 0.1);
}

.lock-key-submit:hover {
    background: rgba(23, 123, 207, 1);
}

#menu-button {
    position: fixed;
    top: 25px;
    left: 30px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1000; 
}

#heart-button {
    position: fixed;
    top: 25px;
    right: 30px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1000; 
}

#heart-button,
#menu-button {
    border-radius: 999px;
}

#heart-button::after,
#menu-button::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 999px;
    pointer-events: none;
    opacity: 1;
    z-index: -1;
    filter: blur(12px);
}

#heart-button::after {
    background: radial-gradient(circle, rgba(255, 120, 170, 0.58) 0%, rgba(255, 120, 170, 0.3) 44%, rgba(255, 120, 170, 0) 74%);
}

#menu-button::after {
    background: radial-gradient(circle, rgba(87, 177, 255, 0.54) 0%, rgba(87, 177, 255, 0.28) 44%, rgba(87, 177, 255, 0) 74%);
}

#heart-button-img, #menu-button-img {
    width: 35px;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

#heart-button-img {
    transform-origin: center;
    --heart-button-rest-scale: 1;
    --heart-button-pop-scale: 1.48;
    --heart-button-settle-scale: 1.12;
}

#menu-button-img {
    transform-origin: center;
    --menu-button-rotation: 0deg;
}

#menu-button-img.menu-open {
    --menu-button-rotation: -180deg;
    transform: rotate(var(--menu-button-rotation));
}

@media (hover: hover) and (pointer: fine) {
    #heart-button-img:hover {
        --heart-button-rest-scale: 1.35;
        --heart-button-pop-scale: 1.62;
        --heart-button-settle-scale: 1.42;
        transform: scale(var(--heart-button-rest-scale));
    }

    #menu-button-img:hover {
        transform: scale(1.35);
    }
}

#heart-button-img.is-popping {
    animation: heartButtonPop 0.72s cubic-bezier(0.2, 0.9, 0.25, 1);
}

@keyframes heartButtonPop {
    0% {
        transform: scale(var(--heart-button-rest-scale)) rotate(0deg);
    }
    30% {
        transform: scale(var(--heart-button-pop-scale)) rotate(-8deg);
    }
    58% {
        transform: scale(var(--heart-button-settle-scale)) rotate(6deg);
    }
    100% {
        transform: scale(var(--heart-button-rest-scale)) rotate(0deg);
    }
}

.progress-nav {
    transition: transform 0.3s ease, width 0.3s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

#menu-button-img.menu-open:hover {
    transform: rotate(var(--menu-button-rotation)) scale(1.35);
}

.progress-nav {
    width: 198px;
    margin: 0;
    position: fixed;
    top: 110px;
    left: 24px;
    bottom: auto;
    max-height: calc(93vh - 122px);
    z-index: 950;
}

.progress-nav-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-height: calc(93vh - 122px);
    padding: 14px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(120, 80, 120, 0.12);
    scrollbar-width: thin;
}

.progress-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    color: #555555;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.85);
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.progress-link:hover {
    transform: translateX(4px);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 20px rgba(120, 80, 120, 0.12);
}

.progress-link.is-active {
    background: linear-gradient(135deg, rgba(255, 251, 254, 1), rgba(255, 218, 236, 1));
    border: 1px solid rgba(254, 222, 255, 1);
    box-shadow: 0 8px 24px rgba(231, 84, 128, 0.31);
}

.progress-label {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

body.progress-nav-collapsed .progress-nav {
    transform: translateX(calc(-100% - 24px));
}

.column {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
}

.photo-row-down {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.photo-row-up {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.spacer {
    height: 40px;
    width: 100%;
}

.large-spacer {
    height: 300px;
    width: 100%;
}

#title {
    width: 400px;
    height: auto;
    filter: drop-shadow(0 4px 15px rgba(231, 84, 128, 0.7));
    animation: shadow-move-1 5s infinite;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

#finger-down {
    height: 56px;
    width: auto;
    margin-top: 52px;
    margin-bottom: 38px;
    cursor: pointer;
    filter: drop-shadow(0 0 8px rgba(255, 214, 87, 0.55)) drop-shadow(0 0 16px rgba(255, 214, 87, 0.22));
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), filter 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

#finger-up {
    height: 56px;
    width: auto;
    margin-top: 23px;
    margin-bottom: 12px;
    cursor: pointer;
    filter: drop-shadow(0 0 8px rgba(255, 214, 87, 0.55)) drop-shadow(0 0 16px rgba(255, 214, 87, 0.22));
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), filter 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

#finger-down:hover, #finger-up:hover {
    filter: drop-shadow(0 0 10px rgba(255, 214, 87, 0.65)) drop-shadow(0 0 18px rgba(255, 214, 87, 0.28));
    transform: scale(1.4);
}

#three {
    height: 500px;
    width: auto;
    animation: shadow-move-1 5s infinite;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

#main-photo {
    width: 300px;
    height: auto;
    filter: drop-shadow(0 4px 15px rgba(231, 84, 128, 0.7));
    animation: shadow-move-2 5s infinite;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

#main-photo:hover {
    transform: scale(1.15);
}

.base-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 11px 22px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #555555;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(120, 80, 120, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.base-button:hover {
    transform: scale(1.15);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 22px rgba(120, 80, 120, 0.38);
}

.home-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 10px;
}

.map-page {
    justify-content: flex-start;
    padding-top: 48px;
    padding-bottom: 0;
}

.map-card {
    width: min(900px, 100%);
    padding: 28px 28px 22px;
    margin-top: 1vh;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 36px;
    background: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px rgba(120, 80, 120, 0.12);
}

.video-card {
    width: min(960px, 100%);
}

.map-mobile-spacer {
    display: none;
}

.france-map-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(240, 249, 255, 0.88), rgba(255, 242, 248, 0.84));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}

#visited-map {
    width: 100%;
    height: min(67vh, 590px);
    display: block;
}

.video-frame-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(240, 249, 255, 0.88), rgba(255, 242, 248, 0.84));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}

.video-frame-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.whiteboard-page {
    padding-bottom: 24px;
}

.whiteboard-card {
    width: min(680px, 100%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.whiteboard-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.whiteboard-title-image {
    max-height: 56px;
    margin-bottom: 0;
}

.whiteboard-toolbar {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.whiteboard-tool {
    min-height: 48px;
    padding: 11px 22px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #555555;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(120, 80, 120, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.whiteboard-tool:hover {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 22px rgba(120, 80, 120, 0.28);
}

.whiteboard-tool.is-active {
    background: linear-gradient(135deg, rgba(255, 251, 254, 1), rgba(255, 218, 236, 1));
    border-color: rgba(254, 222, 255, 1);
    box-shadow: 0 8px 24px rgba(231, 84, 128, 0.25);
}

.whiteboard-surface {
    width: min(100%, 540px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(227, 227, 227, 0.9), 0 12px 30px rgba(120, 80, 120, 0.12);
}

#whiteboard-canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: crosshair;
}

#visited-map .leaflet-control-zoom a {
    color: #555555;
}

#visited-map .leaflet-popup-content-wrapper,
#visited-map .leaflet-popup-tip {
    background: rgba(255, 255, 255, 0.96);
}

#visited-map .leaflet-popup-content {
    fill: #555555;
    color: #555555;
    font-family: "Helvetica", sans-serif;
}

#visited-map .leaflet-popup-content a {
    color: #cb4d74;
    font-weight: 700;
}

.photo-title {
    display: block;
    max-height: 47px;
    height: auto;
    width: auto;
    animation: shadow-move-1 5s infinite;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    margin-top: 0px;
}

.agde-title {
    margin-top: 50px;
}

.little-photo {
    height: 230px;
    margin: 15px;
    animation: pulse1 3s infinite ease-in-out;
}

.medium-photo {
    height: 270px;
    margin: 15px;
    animation: pulse1 3s infinite ease-in-out;
}

.large-photo {
    height: 320px;
    margin: 15px;
    animation: pulse2 3s infinite ease-in-out;
}

.little-photo, .medium-photo, .large-photo {
    border: 10px solid #fff;
    border-image: linear-gradient(145deg, #FFFFFF, #DCDCDC) 1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border-radius: 4px;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes pulse1 {
    0%, 100% {
        transform: scale(1) rotate(-0.6deg);
    }
    50% {
        transform: scale(1.07) rotate(0.6deg);
    }
}

@keyframes pulse2 {
    0%, 100% {
        transform: scale(1.05) rotate(0.6deg);
    }
    50% {
        transform: scale(1) rotate(-0.6deg);
    }
}

@keyframes pulse3 {
    0%, 100% {
        transform: scale(1.3) rotate(2deg);
    }
    50% {
        transform: scale(1) rotate(-8deg);
    }
}

@keyframes shadow-move-1 {
    0% {
        filter: drop-shadow(0 0 0 rgba(255, 50, 150, 0.8));  /*rose*/
    }
    10% {
        filter: drop-shadow(-2px 2px 0 rgba(255, 50, 150, 0.8));  /*rose*/
    }
    20% {
        filter: drop-shadow(2px -2px 0 rgba(255, 50, 150, 0.8));  /*rose*/
    }
    30% {
        filter: drop-shadow(-2px 2px 0 rgba(255, 50, 150, 0.8));  /*rose*/
    }
    40% {
        filter: drop-shadow(2px -2px 0 rgba(255, 70, 50, 0.9));  /*rouge*/
    }
    50% {
        filter: drop-shadow(-4px -4px 0 rgba(255, 70, 50, 0.8));  /*rouge*/
    }
    60% {
        filter: drop-shadow(6px 6px 0 rgba(255, 50, 150, 0.8));  /*rose, bas droite*/
    }
    70% {
        filter: drop-shadow(6px 6px 0 rgba(255, 50, 150, 0.8));  /*rose, bas droite*/
    }
    80% {
        filter: drop-shadow(-4px -4px 0 rgba(130, 50, 255, 0.6));  /*violet, haut gauche*/
    }
    90% {
        filter: drop-shadow(-4px -4px 0 rgba(130, 50, 255, 0.6));  /*violet, haut gauche*/
    }
    100% {
        filter: drop-shadow(0 0 0 rgba(255, 50, 150, 0.8));  /*rose*/
    }
}

@keyframes shadow-move-2 {
    0% {
        filter: drop-shadow(0 0 0 rgba(255, 50, 150, 0.8));  /*rose*/
    }
    10% {
        filter: drop-shadow(4px -4px 0 rgba(255, 50, 150, 0.8));  /*rose*/
    }
    20% {
        filter: drop-shadow(-4px 4px 0 rgba(255, 50, 150, 0.8));  /*rose*/
    }
    30% {
        filter: drop-shadow(4px -4px 0 rgba(255, 50, 150, 0.8));  /*rose*/
    }
    40% {
        filter: drop-shadow(-4px 4px 0 rgba(255, 70, 50, 0.9));  /*rouge*/
    }
    50% {
        filter: drop-shadow(6px 6px 0 rgba(255, 70, 50, 0.8));  /*rouge*/
    }
    60% {
        filter: drop-shadow(-13px -13px 0 rgba(255, 50, 150, 0.8));  /*rose, bas droite*/
    }
    70% {
        filter: drop-shadow(-13px -13px 0 rgba(255, 50, 150, 0.8));  /*rose, bas droite*/
    }
    80% {
        filter: drop-shadow(10px 10px 0 rgba(130, 50, 255, 0.6));  /*violet, haut gauche*/
    }
    90% {
        filter: drop-shadow(10px 10px 0 rgba(130, 50, 255, 0.6));  /*violet, haut gauche*/
    }
    100% {
        filter: drop-shadow(0 0 0 rgba(255, 50, 150, 0.8));  /*rose*/
    }
}

/* Coeurs animés */

.hearts {
    position: absolute;
    inset: 0;
    min-height: 100vh;
    min-height: 100lvh;
    pointer-events: none;
    overflow: visible;
    z-index: 999;
}

.heart {
    position: absolute;
    left: 0;
    top: 0;
    animation: floatUp linear forwards;
}

.heart-burst {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.25);
    filter: hue-rotate(var(--heart-hue, 0deg)) drop-shadow(0 8px 16px rgba(255, 96, 146, 0.22));
    will-change: transform, opacity;
    animation: heartBurst cubic-bezier(0.22, 0.7, 0.18, 1) forwards;
}

@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-100vh) scale(1.5); opacity: 0; }
}

@keyframes heartBurst {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--rotate-start, 0deg)) scale(0.25);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    52% {
        opacity: 0.92;
    }
    78% {
        opacity: 0.5;
    }
    100% {
        transform: translate3d(var(--x-drift, 0px), var(--y-drift, 220px), 0) rotate(var(--rotate-end, 0deg)) scale(1.2);
        opacity: 0;
    }
}

/* Responsive */

@media (min-width: 801px) {
    .home-actions {
        width: min(100%, 470px);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 14px 14px;
    }

    .home-actions .base-button {
        width: 100%;
        max-width: 228px;
        margin-top: 0;
    }
}

@media (max-width: 800px) {
    body {
        padding: 0 12px;
    }
    .index-page {
        padding-top: 30px;
    }
    .lock-page {
        padding: 16px;
    }
    .lock-card {
        width: 100%;
        padding: 20px 16px;
        border-radius: 24px;
    }
    .lock-title {
        width: min(240px, 82%);
        margin-bottom: 14px;
    }
    .lock-text {
        font-size: 17px;
        margin-bottom: 14px;
    }
    .lock-form {
        gap: 12px;
    }
    .lock-code {
        width: 100%;
        max-width: 220px;
        padding: 12px 16px;
        font-size: 24px;
    }
    .lock-keypad {
        gap: 10px;
    }
    .lock-key {
        min-height: 60px;
        border-radius: 18px;
        font-size: 24px;
    }
    .lock-key-action,
    .lock-key-submit {
        font-size: 18px;
    }
    .lock-key:hover {
    transform: translateY(0px);
}
    h1 {
        font-size: 60px;
        max-width: 90vw;
    }
    p {
        font-size: 40px;
        max-width: 90vw;
    }
    #title {
        width: 38vh;
        margin-top: 0vh;
    }
    #heart-button {
        top: 18px;
        right: 14px;
    }
    #menu-button {
        top: 18px;
        left: 14px;
    }
    #heart-button-img, #menu-button-img {
        width: 35.7px;
    }
    .progress-nav {
        width: min(194px, calc(100vw - 32px));
        top: 52%;
        left: 16px;
        bottom: auto;
        max-height: 75vh;
        border-radius: 28px;
        box-shadow: 0 18px 36px rgba(120, 80, 120, 0.18);
        transform: translate(calc(-100% - 24px), -50%);
    }
    .progress-nav-inner {
        flex-direction: column;
        align-items: stretch;
        max-height: 75vh;
        padding: 12px;
        gap: 10px;
        border-radius: 28px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .progress-link {
        width: 100%;
        flex: 0 0 auto;
        display: flex;
        min-height: 43px;
        padding: 10.8px 14px;
        justify-content: flex-start;
    }
    .progress-label {
        font-size: 15.4px;
    }
    #main-photo {
        width: 30vh;
    }
    .photo-title {
        display: block;
        max-height: 5vh;
        max-width: 96vw;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 25px;
        margin-top: 0px;
    }
    .agde-title {
        margin-top: 60px;
    }
    .map-page .photo-title {
        max-width: 100%;
    }
    .photo {
        width: 38vw;
    }
    .photo-row-down,
    .photo-row-up {
        gap: 4px;
    }
    .little-photo {
        height: 24vw;
    }
    .medium-photo {
        height: 29vw;
    }
    .large-photo {
        height: 34vw;
    }
    .little-photo, .medium-photo, .large-photo {
        margin: 6px;
        border-width: 6px;
    }
    #finger-up {
        height: 5.6vh;
        margin-top: 16px;
        margin-bottom: 21px;
    }
    #finger-down {
        height: 5.6vh;
        margin-top: 26px;
        margin-bottom: 21px;
    }
    #three {
        height: 60vh;
    }
    .large-spacer {
        height: 33vh;
    }
    .map-page {
        padding-top: 28px;
    }
    .map-card {
        padding: 22px 14px 18px;
        margin-top: 7vh;
        border-radius: 28px;
    }
    .home-actions {
        margin-top: 10px;
    }
    .video-card {
        width: min(100%, 900px);
    }
    .map-mobile-spacer {
        display: block;
        height: 10px;
        width: 100%;
    }
    .home-actions {
        width: min(110%, 350px);
        gap: 12px;
        margin-left: auto;
        margin-right: auto;
    }
    .base-button {
        width: auto;
        max-width: none;
        min-height: 40px;
        margin-top: 3px;
        padding: 9px 14px;
        font-size: 16.8px;
        text-align: center;
    }
    .home-actions .base-button {
        width: min(100%, 220px);
    }
    .france-map-wrapper {
        border-radius: 22px;
    }
    .video-frame-wrapper {
        border-radius: 22px;
    }
    #visited-map {
        height: min(58vh, 460px);
    }
    body.progress-nav-expanded .progress-nav {
        transform: translate(0, -50%);
    }
    body.progress-nav-collapsed .progress-nav {
        transform: translate(calc(-100% - 24px), -50%);
    }
    #heart-button-img:hover,
    #menu-button-img:hover,
    #main-photo:hover,
    #finger-down:hover,
    #finger-up:hover,
    .progress-link:hover,
    .base-button:hover,
    .little-photo:hover,
    .medium-photo:hover,
    .large-photo:hover {
        transform: none;
        box-shadow: inherit;
        background: inherit;
    }
    #menu-button-img.menu-open:not(.is-opening):not(.is-closing),
    #menu-button-img.menu-open:hover:not(.is-opening):not(.is-closing) {
        --menu-button-rotation: -180deg;
        transform: rotate(var(--menu-button-rotation)) !important;
    }

    html.nav-preexpanded #menu-button-img:not(.is-opening):not(.is-closing),
    body.progress-nav-expanded #menu-button-img:not(.is-opening):not(.is-closing) {
        --menu-button-rotation: -180deg;
        transform: rotate(var(--menu-button-rotation));
    }

    html.nav-precollapsed #menu-button-img:not(.is-opening):not(.is-closing),
    body.progress-nav-collapsed #menu-button-img:not(.is-opening):not(.is-closing) {
        --menu-button-rotation: 0deg;
        transform: rotate(var(--menu-button-rotation));
    }

    #menu-button-img.is-opening,
    #menu-button-img.is-closing {
        backface-visibility: hidden;
        will-change: transform;
        animation-duration: 0.44s;
        animation-timing-function: cubic-bezier(0.22, 0.72, 0.24, 1);
        animation-fill-mode: forwards;
    }

    #menu-button-img.is-opening {
        animation-name: menuButtonOpenMobile;
    }

    #menu-button-img.is-closing {
        animation-name: menuButtonCloseMobile;
    }

}

@keyframes menuButtonOpenMobile {
    0% {
        transform: rotate(0deg) scale(1);
    }
    28% {
        transform: rotate(-52deg) scale(1.08);
    }
    56% {
        transform: rotate(-118deg) scale(1.04);
    }
    78% {
        transform: rotate(-160deg) scale(1.01);
    }
    100% {
        transform: rotate(-180deg) scale(1);
    }
}

@keyframes menuButtonCloseMobile {
    0% {
        transform: rotate(-180deg) scale(1);
    }
    28% {
        transform: rotate(-128deg) scale(1.08);
    }
    56% {
        transform: rotate(-62deg) scale(1.04);
    }
    78% {
        transform: rotate(-18deg) scale(1.01);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}