.btn {
            display: inline-block;
            margin-top: 24px; /* espace régulier avec H2 */
            padding: 10px 90px;
            border: 1.5px solid #f1f1f1; /* FIX : border correct */
            color: #f1f1f1;
            border-radius: 100px;
            text-decoration: none;
            font-family: "polymath", sans-serif;
            font-weight: 100;
            font-size: 42px;
            transition: 0.3s ease;
        }

        .btn:hover {
            transition: 0.2s ease;
            background-color: #f1f1f1;
            color: #0d0d0d ;
            font-weight: 350;
            border: 0px;
        }

        #intro-video {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: black;
    opacity: 1;
    transition: opacity 0.8s ease;
}


body.intro-active .page-content .video-background{
    display: none;
}

#intro-video video {
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* plein écran sans déformation */
    display: block;
}

#intro-video.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Quand activé, l'écran devient noir */
        body {
            margin: 35px;
            background-color: #0d0d0d;
            color: #f1f1f1;
        }
        
        .center-wrapper {
            position: absolute;
            top: 50%;
            left: 30px;
            transform: translateY(-50%);
        }

        .corner {
             position: fixed;
            font-family: "polymath", sans-serif;
            font-weight: 100;
            color: #f1f1f1;
            font-size: 12pt;
            z-index: 10;
            font-size: clamp(10pt, 35vw, 13pt);
            transition: font-size 0.3s ease;
        }
        .top-left { top: 20px; left: 20px; }
        .top-right { top: 20px; right: 20px; }
        .bottom-left { bottom: 20px; left: 20px; }
        .bottom-right { bottom: 20px; right: 20px; }
        
        h1, h2 {
            margin: 0;
            padding: 0;
            line-height: 1em; 
        }

        h1 {font-family: "polymath", sans-serif;
            font-weight: 900;
            font-style: italic;
            font-size: 40pt;
            color: #f1f1f1;
        }

        h2 {
             font-family: "polymath", sans-serif;
            font-weight: 100;
            font-size: 12pt;
            color: #f1f1f1;
            margin-top: 8px; /* petit espace propre */
            font-size: clamp(13pt, 35vw, 18pt);
}

.video-background {
    position: fixed;   /* Toujours derrière le contenu */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;  /* Cache ce qui dépasse */
    z-index: -1;       /* Passe derrière la page */
}

/* Vidéo responsive */
.video-background video {
    height: 100%;
    width: 100%;
    object-fit: cover; /* ⭐ Le secret du responsive */
}
       
@media (max-width: 768px) { 
.btn {font-size: 25px; padding: 10px 50px;}
.corner {font-size: 10pt;}
h1, h2 {
            margin: 0;
            padding: 0;
            line-height: 1.3em; 
        }
h1 {font-size: 35pt;}
h2 {font-size: 13pt;}
body {margin: 40px;}
}