@media (min-device-width: 1024px){

    /* ============================= */
    /* 1. VARIABLES GLOBALES DESKTOP */
    /* ============================= */

    :root {
        --margin-wide: clamp(6vmin, 10vw, 14vw);
        --margin-tall: clamp(4vmin, 6vw, 10vw);

        --text-min: 0.85rem;
        --text-max: 2.2vmin;

        --hero-min: 1.4rem;
        --hero-max: 4.2vmin;

        --gap-h: clamp(0.3vmin, 0.3vw, 0.6vw);
        --gap-v: clamp(0.3vmin, 0.3vw, 0.6vw);

        --max-width: 1800px;
    }

    html, body {
        height: auto;
        min-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        font-family: system-ui, sans-serif;
    }

    /* ============================= */
    /* 2. BODY + FOND DÉGRADÉ DESKTOP */
    /* ============================= */

    body {
        margin: 0;
        padding: 0;

        background:
            linear-gradient(180deg, rgba(255,179,198,0.40) 0%, rgba(179,199,255,0.40) 100%),
            linear-gradient(75deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.35) 35%, rgba(255,255,255,0.00) 70%),
            linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.15) 80%),
            repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 2px, transparent 3px, transparent 8px);

        background-blend-mode: screen, lighten, overlay, soft-light, color-dodge;
    }

    /* ============================= */
    /* 3. WRAPPER + LAYOUT DESKTOP   */
    /* ============================= */

    .qhd-wrapper {
        position: relative;
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }

    .layout {
        margin: 0;
        padding: 0;
    }

    /* ============================= */
    /* 4. LOGO — STYLE GLOBAL DESKTOP */
    /* ============================= */

    .logo-slot {
        /* ⚠️ AUCUNE POSITION ICI */
        /* ⚠️ AUCUNE TAILLE ICI */
        z-index: 9999;
    }

    .logo-inner {
        width: 100%;
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        filter: drop-shadow(0 0.4vmin 0.9vmin rgba(0,0,0,0.25));
    }

    /* ============================= */
    /* 5. HERO — STYLE GLOBAL DESKTOP */
    /* ============================= */

    .hero-title {
        text-align: center;
        font-weight: 700;
        color: #0033cc;
        text-shadow: 0 0.4vmin 0.9vmin rgba(0,0,0,0.15);
        /* ⚠️ AUCUNE MARGE-TOP ICI */
        /* ⚠️ AUCUNE POSITION ICI */
    }

/* =========================================================
   6.A - ACTION RAIL
   SCROLL HORIZONTAL FUTUR
   A ACTIVER QUAND > 3 BOUTONS
   ========================================================= */

/*
    .action-rail {
        overflow-x:auto;
        overflow-y:hidden;
        scroll-behavior:smooth;
        scrollbar-width:none;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.2vmin;
    }
    .action-rail::-webkit-scrollbar {
        display:none;
    }
 */

    /* ============================= */
    /* 6.B - BOUTON UC — STYLE GLOBAL   */
    /* ============================= */

    .button-menu {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        background: none;
        backdrop-filter: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        /* ⚠️ AUCUNE POSITION ICI */
        /* ⚠️ AUCUNE MARGE-TOP ICI */
    }

    .button-menu::before {
        content: none;
    }

    #btn_uc {
        display: inline-block;
        padding: 1.2vh 2vh;
        background: linear-gradient(
            to bottom,
            rgba(255,150,190,0.35),
            rgba(220,150,255,0.35),
            rgba(150,180,255,0.35)
        );
        backdrop-filter: blur(6px);
        border-radius: 1vh;
        color: #fff;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
    }

    #btn_uc::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 45%;
        background: linear-gradient(
            to bottom,
            rgba(255,255,255,0.45),
            rgba(255,255,255,0.10)
        );
        pointer-events: none;
    }

    #btn_uc:hover {
        transform: translateY(0.3vh);
        box-shadow:
            0 0.3vh 0.6vh rgba(0,0,0,0.25),
            inset 0 0.2vh 0.4vh rgba(255,255,255,0.25);
    }

    /* ============================= */
    /* 7. UC BLOCK — STYLE GLOBAL    */
    /* ============================= */

    .uc-block {
        position: relative;
        border-radius: 2vmin 2vmin 0 0; /* arrondi haut seulement */
        overflow: visible;              /* permet au texte de dépasser */
        padding-bottom: 4vh;            /* espace sous l'image */
        background: transparent;
        box-shadow: 0 1.2vmin 2.4vmin rgba(0,0,0,0.12);
        z-index: 50;}
  

    .uc-image {
        position: relative;     /* libère le ratio */
        width: 100%;
        height: auto;           /* pas de hauteur forcée */
        background-repeat: no-repeat;
        background-position: center;
        /* ⚠️ aucun background-size ici */
        /* ⚠️ aucun aspect-ratio ici */
     }

    .uc-text {
        position: relative;
        visibility: hidden;
        margin-top: 3vh;        /* dépassement sous l'image */
        padding: 2vmin;
        font-size: clamp(1rem, 2vmin, 2.4vmin);
        overflow: visible;      /* pas de scroll */
        max-height: none;       /* pas de limite */
        background: transparent;
        backdrop-filter: blur(6px);
        border-radius: 1.5vmin;
        box-shadow: none;
        z-index: 60;
    }

    /* ============================= */
    /* 8. OVERLAY — STYLE GLOBAL     */
    /* ============================= */

    .uc-overlay {
        position: absolute;
        inset: 0;
        border-radius: 2vmin;
        background: linear-gradient(
            to bottom,
            rgba(255,240,245,0.55),
            rgba(245,235,250,0.45),
            rgba(235,240,255,0.40)
        ) !important;
        backdrop-filter: blur(2.8px);
        padding: 0.5vmin;
        opacity: 0;
        transform: translateY(1vmin);
        transition: opacity 0.35s ease, transform 0.35s ease;
        z-index: 70;
    }

    .uc-overlay.active {
        opacity: 1;
        transform: translateY(0);
    }

    .uc-overlay-inner {
        color: #2a2a7f;
        font-size: clamp(1rem, 2vmin, 2.4vmin);
        line-height: 1.5;
        max-height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1vmin;
    }

    .uc-overlay-inner::-webkit-scrollbar {
        width: 0.8vmin;
    }

    .uc-overlay-inner::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.25);
        border-radius: 1vmin;
    }

    /* ============================= */
    /* 9. LANGUAGES — STYLE GLOBAL   */
    /* ============================= */

    .lang-label {
        background: none !important;
        box-shadow: none !important;
        padding: 0.8vmin 1.6vmin;
        font-weight: 700 !important;
        color: #0055FF !important;
        cursor: pointer;
        transition: transform 0.25s ease, color 0.25s ease;
        display: inline-block;
    }

    .lang-container {
        z-index: 10000;
        /* ⚠️ AUCUNE POSITION ICI */
    }

    .lang-dropdown {
        top: calc(100% + 0.4vmin);
        width: clamp(26vmin, 32vmin, 38vmin);
        background: linear-gradient(
            to bottom,
            rgba(255,150,190,0.15),
            rgba(220,150,255,0.15),
            rgba(150,180,255,0.15)
        );
        cursor: default;
        scrollbar-width: thin;
        backdrop-filter: blur(6px);
        border-radius: 1vmin;
        margin: 0 !important;
        padding: 0.4vmin 0.6vmin;
        list-style: none !important;
        display: none;
        opacity: 0;
        transform: translateY(-0.4vmin);
        transition: opacity 0.25s ease, transform 0.25s ease;
        max-height: 45vmin;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 0.6vmin 1.4vmin rgba(0,0,0,0.18);
        z-index: 210;
    }

    .lang-container.open .lang-dropdown {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    .lang-dropdown li {
        margin-bottom: 0.05vmin;
    }

    .lang-dropdown li:last-child {
        margin-bottom: 0;
    }

    .lang-dropdown li a {
        display: flex;
        align-items: center;
        padding: 0.6vmin 1vmin;
        margin: 0 !important;
        gap: 0.6vmin;
        border-radius: 0.8vmin;
        background: linear-gradient(
            to right,
            rgba(255,150,190,0.08),
            rgba(220,150,255,0.08),
            rgba(150,180,255,0.08)
        );
        backdrop-filter: blur(6px);
        color: rgba(0,85,255,0.85);
        font-size: clamp(0.9rem, 1.5vmin, 1.9vmin);
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 0.3vmin 0.6vmin rgba(0,0,0,0.12);
        transition: background 0.25s ease, transform 0.25s ease;
    }

    .lang-dropdown li a:hover {
        background: linear-gradient(
            to right,
            rgba(255,150,190,0.25),
            rgba(220,150,255,0.25),
            rgba(150,180,255,0.25)
        );
        transform: translateX(0.3vmin);
        backdrop-filter: blur(12px);
    }

    .lang-dropdown img {
        width: clamp(1.8vmin, 2.4vmin, 2.8vmin);
        height: auto;
        border-radius: 0.4vmin;
        margin-left: 0.3vmin;
    }

    /* ========================================================= */
    /* FOOTER - COPYRIGHT  */
      /* ========================================================= */
    .footer {
        position: relative;
        flex-shrink: 0;
        text-align: center;
        width: 100%;
        margin-top: 3vh !important
    }

}