/* =========================================================
   WEBBRAD — COUCHE RESPONSIVE
   Ne modifie pas les visuels approuvés; adapte leur affichage.
   ========================================================= */

:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

img,video{
  max-width:100%;
}

/* Gros boutons communs : restent utilisables sur petits écrans. */
.kwik-large-nav{
  left:calc(18px + var(--safe-left)) !important;
  right:calc(18px + var(--safe-right)) !important;
  bottom:calc(18px + var(--safe-bottom)) !important;
  gap:14px;
}
.kwik-large-nav a{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* -------- TABLETTE -------- */
@media (max-width: 1024px){
  .kwik-large-nav a{
    font-size:clamp(18px,2.6vw,28px) !important;
    padding:12px 18px 11px !important;
    border-width:3px !important;
    box-shadow:5px 5px 0 #f20a78 !important;
  }

  /* Offre */
  .stage .art{
    max-width:88vw !important;
    max-height:88svh !important;
  }
  .left,.right{
    width:18vw !important;
  }
  .bolt{transform:scale(.82)}
  .star{transform:scale(.82)}

  /* Contact / Galerie */
  .page,.wrap{
    width:100% !important;
    max-width:100% !important;
  }
}

/* -------- MOBILE / PORTRAIT -------- */
@media (max-width: 760px), (orientation:portrait) and (max-width:900px){

  html,body{
    min-height:100%;
    min-height:100svh;
  }

  /* Navigation bas de page */
  .kwik-large-nav{
    left:calc(8px + var(--safe-left)) !important;
    right:calc(8px + var(--safe-right)) !important;
    bottom:calc(8px + var(--safe-bottom)) !important;
    gap:8px !important;
  }
  .kwik-large-nav a{
    flex:0 1 auto;
    max-width:48%;
    font-size:clamp(13px,3.7vw,18px) !important;
    padding:9px 10px 8px !important;
    border-width:2px !important;
    box-shadow:4px 4px 0 #f20a78 !important;
    line-height:1.05 !important;
  }

  /* ACCUEIL : même composition, mais menu réellement adaptable. */
  .home{
    min-height:100svh !important;
    height:100svh !important;
  }
  .frame{
    width:100vw !important;
    height:56.25vw !important;
    max-height:74svh !important;
  }
  .menu-mask{
    left:3% !important;
    width:94% !important;
    top:0 !important;
    height:18% !important;
  }
  .topnav{
    left:4% !important;
    top:1.2% !important;
    width:92% !important;
    height:auto !important;
    transform:none !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-content:center !important;
    gap:5px 10px !important;
    white-space:normal !important;
    font-size:clamp(10px,2.7vw,15px) !important;
    line-height:1.1 !important;
  }
  .topnav .sep{
    display:none !important;
  }
  .topnav a{
    min-height:25px;
  }

  /* POURQUOI KWIK / vidéo Brad */
  .page{
    min-height:100svh;
  }
  .video-wrap{
    width:94vw !important;
    max-width:94vw !important;
    max-height:62svh !important;
    top:48% !important;
  }
  .video-wrap video{
    border-width:4px !important;
  }

  /* OFFRE : conserve l'affiche sans l'étirer. */
  .stage{
    min-height:100svh !important;
    height:100svh !important;
  }
  .stage .art{
    max-width:96vw !important;
    max-height:78svh !important;
    box-shadow:0 8px 20px rgba(0,0,0,.22) !important;
  }
  .left,.right{
    width:12vw !important;
    opacity:.78;
  }
  .bolt,.star{
    display:none !important;
  }

  /* GALERIE : permet le défilement vertical si nécessaire. */
  body:has(.wrap){
    display:block !important;
    overflow-y:auto !important;
    align-items:initial !important;
  }
  .wrap{
    width:100vw !important;
    margin:0 auto !important;
    padding-bottom:82px;
  }
  .gallery{
    width:100% !important;
    height:auto !important;
  }
  .lb{
    padding:10px !important;
  }
  .lb img{
    max-width:94vw !important;
    max-height:78svh !important;
  }
  .close{
    right:10px !important;
    top:10px !important;
    width:42px !important;
    height:42px !important;
  }
  .prev,.next{
    width:42px !important;
    height:60px !important;
    font-size:30px !important;
  }
  .prev{left:6px !important}
  .next{right:6px !important}

  /* CONTACT */
  body:has(.page){
    overflow-x:hidden !important;
  }
  .page{
    width:100vw !important;
    max-width:100vw !important;
    padding-bottom:74px;
  }
  .page img{
    width:100% !important;
    height:auto !important;
  }
  body::before,body::after{
    width:7vw !important;
    min-width:24px !important;
    opacity:.7;
  }
  .contact-zap-left,.contact-zap-right{
    display:none !important;
  }

  /* L'ancien petit bouton Accueil de Contact est redondant
     avec la navigation responsive commune. */
  .home{
    display:none !important;
  }
}

/* -------- TRÈS PETIT MOBILE -------- */
@media (max-width: 430px){
  .kwik-large-nav a{
    font-size:12px !important;
    padding:8px 8px 7px !important;
  }
  .topnav{
    font-size:10px !important;
    gap:4px 8px !important;
  }
  .video-wrap{
    width:96vw !important;
  }
}

/* -------- ÉCRANS BAS / PAYSAGE MOBILE -------- */
@media (max-height: 520px) and (orientation:landscape){
  .kwik-large-nav{
    bottom:6px !important;
  }
  .kwik-large-nav a{
    font-size:13px !important;
    padding:7px 10px 6px !important;
  }
  .video-wrap{
    width:min(72vw,1100px) !important;
    max-height:72vh !important;
    top:50% !important;
  }
  .topnav{
    top:1% !important;
    font-size:clamp(10px,1.6vw,15px) !important;
  }
}