/* style.css */
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

    body {
        margin: 0;
        background: #ececec;
        font-family: 'Poppins', sans-serif;
    }

    /* Loader Overlay */
    #loader-overlay {
        position: fixed;
        inset: 0;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .profile-photo{
        align-content: center;
        justify-content: center;
        display: flex;
    }
    .spinner {
        margin-top: 10px;
        border: 6px solid #f3f3f3;
        border-top: 6px solid #333;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Agrandissement du board */
    #board {
        position: relative;
        width: 95vw;
        height: 90vh;
        max-width: 1200px;
        max-height: 900px;
        margin: 20px auto;
        padding: 30px;
        background: #fbfaf5 url('https://www.transparenttextures.com/patterns/asfalt-light.png');
        border: 4px solid #d3cbb8;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        overflow: hidden;
    }

    /* Widget Base */
    .widget {
        position: absolute;
        background: #fff;
        padding: 14px;
        border: 2px solid #ccc;
        border-radius: 6px;
        box-shadow: 4px 4px 12px rgba(0,0,0,0.15);
        transform-origin: center;
    }
    .widget::before {
        content: '';
        position: absolute;
        top: -16px;
        left: 50%;
        width: 30px;
        height: 30px;
        transform: translateX(-50%);
        background: url('https://upload.wikimedia.org/wikipedia/commons/7/70/Push_pin_icon.svg') no-repeat center/contain;
    }

    /* Répositionnement des widgets pour plus d'espace */
    .pos1 { top: 10%; left: 10%; transform: rotate(-5deg); }
    .pos2 { top: 10%; right: 40%; transform: rotate(5deg); }
    .pos3 { top: 60%; left: 10%; transform: rotate(-4deg); }
    .pos4 { bottom:55%; right: 5%; transform: rotate(4deg); }
    .pos5 { top: 70%; left: 60%; transform: translate(-50%, -50%) rotate(0deg); }

    /* Tailles inchangées des widgets individuels */
    #intro-widget { width: 240px; }
    #intro-widget .profile-photo { width: 100px; height: 100px; border-radius: 0; margin-bottom: 1px; }
    #spotify-widget { width: 300px; height: 80px; }
    #spotify-widget iframe { width: 100%; height: 100%; border: none; }
    #polaroid-widget { width: 180px; padding-bottom: 36px; }
    .polaroid img { width: 100%; border: 1px solid #ddd; }
    #youtube-widget { width: 360px; height: 203px; }
    #youtube-widget iframe { width: 100%; height: 100%; border: none; }
    #codepen-widget { width: 500px; height: 350px; }
    .codepen iframe { width: 100%; height: 100%; border: none; }

    /* 1) Hide the mobile-overlay by default */
    #mobile-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: #fff;
        z-index: 9999;
        font-family: 'Poppins', sans-serif;
        font-size: 1.5rem;
        text-align: center;
        padding: 2rem;
        align-items: center;
        justify-content: center;
    }

    /* New widget position */
    .pos6 {
        bottom: 10%;      /* adjust as needed */
        left: 84%;        /* adjust as needed */
        transform: rotate(2deg);
    }

    /* Sizing for the flag GIF */
    /* Make the Breton flag widget transparent and border‐free */
    #flag-widget {
        background: none !important;   /* no white background */
        padding: 0 !important;         /* no extra inner space */
        border: none !important;       /* remove any border */
        box-shadow: none !important;   /* if widgets have a drop-shadow, kill it here */
    }

    #flag-widget .flag-gif {
        display: block;
        width: 100%;
        height: auto;
    }


    /* 2) When JS detects mobile, add .active to show it */
    #mobile-overlay.active {
        display: flex;
    }

    /* 3) Hide the rest of the site whenever the overlay is active */
    #mobile-overlay.active ~ #loader-overlay,
    #mobile-overlay.active ~ #board {
        display: none !important;
    }