/*
 * Landing « bientôt » (Figma 373:892), page autonome inspirée de la maintenance du thème.
 * Positions calées sur le cadre Figma de 1440 × 914 px. Style papier : grain, jamais d'ombre CSS.
 */

/* Police des titres de la maquette, à fournir dans assets/fonts (repli Arima Madurai) */
@font-face {
    font-family: 'Desinore';
    src: local('Desinore'), local('Desinore Regular'), url('assets/fonts/Desinore-Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Arima Madurai';
    src: url('assets/fonts/ArimaMadurai-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/Poppins-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

/* Pas de SemiBold dans le thème : le 600 de la maquette retombe sur le Bold */
@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/Poppins-Bold.woff2') format('woff2');
    font-weight: 600 700;
    font-display: swap;
}

:root {
    --night: #112B41;
    --gold: #CC9E40;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.29 0 0 0 0 0.16 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

body {
    margin: 0;
    background: #F7F1E2;
    color: var(--night);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.landing {
    position: relative;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Contenu centré : à 914px de haut il tombe à 191px comme dans Figma ; padding = simple minimum */
    padding: clamp(80px, 13vh, 120px) 24px;
    overflow: hidden;
    --tear-bottom: 13px; /* Figma : -17px, remonté de 30px */
}

/* ---------- Fond : bords déchirés haut / bas et papier clair ---------- */

.landing__tear {
    position: absolute;
    max-width: none;
    pointer-events: none;
}

/* Étirés en largeur (SVG en preserveAspectRatio="none") pour rester bord à bord sur grand écran ;
   origine = centre du calque Figma (l'image déborde de son cadre) */
.landing__tear--top {
    top: 12.5px;
    left: calc(50% + 19px);
    width: max(1509.35px, 100vw + 120px);
    transform-origin: 50% 123.4px;
    transform: translateX(-50%) rotate(3.44deg) scaleY(-1);
}

.landing__tear--bottom {
    bottom: var(--tear-bottom);
    left: 50%;
    width: max(1512.75px, 100vw + 120px);
    transform-origin: 50% 122.1px;
    transform: translateX(-50%) rotate(-176.56deg) scaleY(-1);
}

.landing__paper {
    position: absolute;
    top: 181px;
    right: 0;
    bottom: calc(var(--tear-bottom) + 108px);
    left: 0;
    background: #FAF7EE;
}

/* Grain en voile sur tout le fond (papier + bords déchirés), sinon raccord visible */
.landing::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grain) 0 0 / 220px 220px;
    pointer-events: none;
}

/* ---------- Décor : cercles pointillés et étoiles (droite = miroir de gauche) ---------- */

.landing__decor {
    position: absolute;
    width: 656px;
    height: 656px;
    pointer-events: none;
}

.landing__decor--left {
    top: 57px;
    left: -384px;
}

.landing__decor--right {
    top: 250px;
    right: -379px;
    transform: scaleX(-1);
}

.landing__decor img {
    position: absolute;
    max-width: none;
}

.decor-cercle-1 { top: 0; left: 0; }
.decor-cercle-2 { top: 69.82px; left: 68.5px; }
.decor-cercle-3 { top: 192.32px; left: 191px; }
.decor-etoile-1 { top: 527.27px; left: 430px; }
.decor-etoile-2 { top: 508.05px; left: 568.78px; }
.decor-etoile-3 { top: 42.27px; left: 406.78px; }

/* ---------- Contenu ---------- */

.landing__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 981px;
    text-align: center;
}

.landing__logo {
    position: relative;
    flex: none;
    width: 215.55px;
    height: 75.89px;
}

.landing__logo img {
    position: absolute;
    max-width: none;
}

.logo-1 { top: 0; left: 38.55px; }
.logo-2 { top: 14.97px; left: 0; }
.logo-3 { top: 51.25px; left: 0.13px; }
.logo-4 { top: 50.8px; left: 30.41px; }
.logo-5 { top: 50.93px; left: 138.95px; }

.landing__title {
    margin: min(76px, 8.3vh) 0 0;
    font-family: 'Desinore', 'Arima Madurai', serif;
    font-weight: 400;
    font-size: 70px;
    line-height: 64px;
    text-wrap: balance;
    color: var(--gold);
}

.landing__text {
    max-width: 619px;
    margin: 20px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(17, 43, 65, 0.4);
}

.landing__button {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 51px;
    margin-top: min(91px, 10vh);
    padding: 3px 24px 0;
    border-radius: 100px;
    background: var(--night);
    color: #F7F2DA;
    font-family: 'Arima Madurai', serif;
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s;
}

.landing__button:hover {
    background: var(--gold);
}

.landing__button:focus-visible,
.landing__email:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.landing__email {
    margin-top: 23px;
    font-weight: 600;
    font-size: 12px;
    color: var(--night);
    text-decoration: none;
}

.landing__email:hover {
    color: var(--gold);
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
    .landing {
        padding: clamp(80px, 13vh, 120px) 16px;
    }

    .landing__decor {
        zoom: 0.55;
    }

    .landing__title {
        margin-top: min(56px, 6vh);
        font-size: clamp(36px, 9vw, 56px);
        line-height: 0.95;
    }

    .landing__text br {
        display: none;
    }

    .landing__button {
        margin-top: min(56px, 6vh);
    }
}

/* ---------- Variante : photo de la page de maintenance en plein écran, textes en blanc ---------- */

.landing__logo-light {
    display: none;
}

.landing--photo {
    background: linear-gradient(rgba(17, 43, 65, 0.45), rgba(17, 43, 65, 0.45)), url('assets/images/fond-fjord.webp') 35% 60% / cover no-repeat;
}

/* Même découpe que la version sans fond : la photo remplit les formes déchirées et le papier
   (masque SVG), le fond beige reste autour. Chaque calque contient la photo plein écran
   avec la transformation inverse de son parent, pour que les morceaux se raccordent. */
.landing--photo {
    background: #F7F1E2;
}

.landing--photo .landing__tear,
.landing--photo .landing__paper {
    overflow: hidden;
    background: none;
}

.landing--photo .landing__tear--top {
    height: 238.8px;
    -webkit-mask: url('assets/images/dechire-haut.svg') 0 0 / 100% 100% no-repeat;
    mask: url('assets/images/dechire-haut.svg') 0 0 / 100% 100% no-repeat;
}

.landing--photo .landing__tear--bottom {
    height: 242.2px;
    -webkit-mask: url('assets/images/dechire-bas.svg') 0 0 / 100% 100% no-repeat;
    mask: url('assets/images/dechire-bas.svg') 0 0 / 100% 100% no-repeat;
}

.landing__photo {
    position: absolute;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    background: linear-gradient(rgba(17, 43, 65, 0.45), rgba(17, 43, 65, 0.45)), url('assets/images/fond-fjord.webp') 35% 60% / cover no-repeat;
}

.landing__tear--top .landing__photo {
    top: -12.5px;
    left: calc(max(1509.35px, 100vw + 120px) / 2 - 50vw - 19px);
    transform-origin: calc(50vw + 19px) 135.9px;
    transform: scaleY(-1) rotate(-3.44deg);
}

.landing__tear--bottom .landing__photo {
    bottom: calc(-1 * var(--tear-bottom));
    left: calc(max(1512.75px, 100vw + 120px) / 2 - 50vw);
    transform-origin: 50vw calc(100% - 120.1px - var(--tear-bottom));
    transform: scaleY(-1) rotate(176.56deg);
}

.landing__paper .landing__photo {
    top: -181px;
    left: 0;
}

.landing--photo .landing__logo {
    display: none;
}

.landing--photo .landing__logo-light {
    display: block;
    height: auto;
}

.landing--photo .landing__title,
.landing--photo .landing__text,
.landing--photo .landing__email {
    color: #FBF8EF;
}

.landing--photo .landing__text {
    opacity: 0.85;
}

/* Bouton bleu nuit illisible sur la photo : bouton or, comme sur le site */
.landing--photo .landing__button {
    background: var(--gold);
    color: #FBF8EF;
}

.landing--photo .landing__button:hover {
    background: #FBF8EF;
    color: var(--night);
}

.landing--photo .landing__button:focus-visible,
.landing--photo .landing__email:focus-visible {
    outline-color: #FBF8EF;
}

.landing--photo .landing__email:hover {
    color: var(--gold);
}

/* Décor des côtés (étoiles, cercles) en blanc transparent sur la photo */
.landing--photo .landing__decor {
    filter: brightness(0) invert(1);
}