@media (max-device-width: 1023px) {
  html, body {
  cursor: default !important;
  }
/* ==========================*/
/* 1. VARIABLES GLOBALES         */
/* ============================= */

:root {
  --margin-landscape: clamp(4vmin, 8vw, 12vw);
  --margin-portrait: clamp(2vmin, 4vw, 6vw);

  --text-min: 0.75rem;
  --text-max: 2.4vmin;

  --hero-min: 1.2rem;
  --hero-max: 5vmin;

  --gap-h: clamp(0.2vmin, 0.2vw, 0.4vw);
  --gap-v: clamp(0.2vmin, 0.2vw, 0.4vw);

  --max-width: 1600px;
} 
html, body {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
}

.header {
  position: relative;
  z-index: 9999;
}

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

body {
  margin: 0;
  padding: 0;

  /* Dégradé principal (visible, léger) */
  background:
    linear-gradient(
      180deg,
      rgba(255, 179, 198, 0.50) 0%,
      rgba(179, 199, 255, 0.50) 100%
    ),

    /* Highlight directionnel façon trait doré du logo */
    linear-gradient(
      75deg,
      rgba(255, 255, 255, 0.00) 0%,
      rgba(255, 255, 255, 0.45) 35%,
      rgba(255, 255, 255, 0.00) 70%
    ),

    /* Cristallin : micro reflets */
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.05) 40%,
      rgba(255, 255, 255, 0.20) 80%
    ),

    /* Paillettes visibles */
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.22) 0px,
      rgba(255, 255, 255, 0.22) 2px,
      transparent 3px,
      transparent 8px
    );

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

  font-family: system-ui, sans-serif;
  overflow-x: hidden;
}

/* ============================= */
/* 3. CONTENEUR GLOBAL           */
/* ============================= */

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

/* Portrait : marges réduites */

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

/* ============================= */
/* 4. HEADER : LOGO       */
/* ============================= */

/* Logo maître */
.logo-slot {
  width: clamp(8vmin, 14vmin, 18vmin);
  height: clamp(8vmin, 14vmin, 18vmin);
  z-index: 9999;
}

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

/* =========================================================
   5.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;
    }
 */

/* ============================= */
/* 5.B HERO + BOUTON — VERSION GÉNÉRALE */
/* ============================= */

.hero-title {
  text-align: center;
  font-weight: 700;
  color: #0033cc;
  text-shadow: 0 0.6vmin 1.2vmin rgba(0,0,0,0.15);
  /* ❌ margin-bottom à supprimer ici */
  /* Pas de position → flux naturel sur desktop */
  /* Pas de font-size → géré par clamp global ou par @media */
}

/* BOUTON UC — CONTENEUR (transparent) */
.button-menu {
    position: relative;
    /* centrage parfait */
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    /* conteneur transparent */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* Suppression du glossy */
.button-menu::before {
    content: none;
}

/* Suppression de l'effet tactile */
.button-menu:active {
    transform: none;
    box-shadow: none;
}

/* Bouton UC — lien ACF (bouton réel) */
#btn_uc {
    display: inline-block;
    padding: 1.2vh 2vh;
    background: linear-gradient(
        to bottom,
        rgba(255, 150, 190, 0.40),
        rgba(220, 150, 255, 0.40),
        rgba(150, 180, 255, 0.40)
    );
    backdrop-filter: blur(8px);
    border-radius: 1.2vh;
    color: #fff;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    /* Nécessaire pour glossy */
    position: relative;
    overflow: hidden;
}

/* Glossy sur le vrai bouton */
#btn_uc::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.55),
        rgba(255,255,255,0.10)
    );
    pointer-events: none;
}

/* Effet tactile sur le vrai bouton */
#btn_uc:active {
    transform: translateY(0.4vh);
    box-shadow:
        0 0.3vh 0.8vh rgba(0,0,0,0.25),
        inset 0 0.3vh 0.6vh rgba(255,255,255,0.25);
}
/* ============================= */
/* 6. BLOC UC — VERSION PREMIUM  */
/* ============================= */

.uc-block {
  /* ❌ margin-top global supprimé */
  min-height: 35vh;
  border-radius: 2vmin;
  position: relative;
  overflow: hidden;
  z-index: 50;
}

/* image UC fond de UC block qui s'ajuste à UC block */
.uc-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Texte UC (scrollable) — inchangé */
.uc-text {
  max-height: 40vh;
  overflow-y: auto;
  font-size: clamp(var(--text-min), var(--text-max), 3vmin);
  line-height: 1.4;
  padding: 2vmin;
  margin: 2vmin;
  border-radius: 1.5vmin;
  background: linear-gradient(
    to bottom,
    rgba(255, 240, 245, 0.70) 0%,   /* rose très clair + transparence 70% */
    rgba(245, 235, 250, 0.70) 50%,  /* violine très clair + transparence 70% */
    rgba(235, 240, 255, 0.70) 100%  /* bleu très clair + transparence 70% */
  );
  backdrop-filter: blur(6px); /* léger flou premium */
  box-shadow: 0 1vmin 3vmin rgba(0,0,0,0.25);
    opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  z-index: 60;
}

/* ============================= */
/* PANNEAU TEXTE_BB PREMIUM      */
/* ============================= */

.uc-overlay {
  position: absolute;
  inset: 0;
  border-radius: 2vmin;

  /* Dégradé ultra-clair inspiré du thème rose → violine → bleu */
  background: linear-gradient(
    to bottom,
    rgba(255, 240, 245, 0.55) 10%,   /* rose très clair + blanc cassé */
    rgba(245, 235, 250, 0.45) 35%, /* violine très clair + gris doux */
    rgba(235, 240, 255, 0.40) 100% /* bleu très clair + gris clair */
  );

  /* Flou interne réduit de 25% */
  backdrop-filter: blur(2.8px);

  /* Cadre interne premium */
  padding: 0.5vmin;

  /* Animation d’apparition */
  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);
}

/* Texte BB scrollable */
.uc-overlay-inner {
  color: #2a2a7f; /* bleu-violet soleil levant */
  font-size: clamp(1rem, 2vmin, 2.4vmin);
  line-height: 1.5;

  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  padding: 1vmin; /* petit padding interne pour respirer */
}

/* Scrollbar premium */
.uc-overlay-inner::-webkit-scrollbar {
  width: 0.8vmin;
}

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

/* ========================================================= */
/* MENU LANGUAGES — VERSION PREMIUM (STYLE SOLVYLA)          */
/* ========================================================= */

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

.lang-container {
  z-index: 10000;
}

/* MENU DÉROULANT */

.lang-dropdown {
  top: calc(100% + 0.4vmin);
  width: clamp(26vmin, 32vmin, 38vmin);

  /* Dégradé premium */
  background: linear-gradient(
    to bottom,
    rgba(255, 150, 190, 0.15),
    rgba(220, 150, 255, 0.15),
    rgba(150, 180, 255, 0.15),
  );
  backdrop-filter: blur(6px);
  border-radius: 1vmin;

  /* UL propre */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  /* Padding interne */
  padding: 0.4vmin 0.6vmin;

  /* Animation d’ouverture */
  display: none;
  opacity: 0;
  transform: translateY(-0.4vmin);
  transition: opacity 0.25s ease, transform 0.25s ease;

  /* AJOUTS IMPORTANTS POUR LE SCROLL */
  max-height: 45vmin;              /* limite la hauteur → scroll possible */
  overflow-y: auto;                /* active le scroll */
  overscroll-behavior: contain;    /* évite de scroller la page */
  -webkit-overflow-scrolling: touch; /* scroll fluide iOS */

  /* Ombre premium */
  box-shadow: 0 0.6vmin 1.4vmin rgba(0,0,0,0.18);

  z-index: 210;
}

/* Ouverture via JS (desktop + tactile) */
.lang-container.open .lang-dropdown {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Espacement entre les langues */
.lang-dropdown li {
  margin-bottom: 0.05vmin;
}
.lang-dropdown li:last-child {
  margin-bottom: 0;
}

/* CELLULES LANGUES */
.lang-dropdown li a {
  display: flex;
  align-items: center;

  /* Espacement interne compact mais visible */
  padding: 0.6vmin 1vmin;

  /* Correction : supprime les marges fantômes des LI */
  margin: 0 !important;

  gap: 0.6vmin;
  border-radius: 0.8vmin;

  /* Dégradé ultra transparent */
  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;
}

/* Hover */
.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);
}

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


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

}