/* ===================== */
/* TYPOGRAPHIE           */
/* ===================== */
/**
 * @license
 * Font Family: Cabinet Grotesk
 * Designed by: ITF
 * URL: https://www.fontshare.com/fonts/cabinet-grotesk
 * © 2025 Indian Type Foundry
 */

@font-face{
  font-family: "Manosque";
  src: url("../assets/fonts/Manosque/Manosque-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Glacier";
  font-weight: bold;
  font-style: normal;
  src: url("../assets/fonts/Glacier/Glacier-Bold.woff") format("woff");
}
@font-face{
  font-family: "Palo";
  font-weight: bold;
  font-style: normal;
  src: url("../assets/fonts/Palo/palo-compressed-medium.otf") format("woff");
}
@font-face{
  font-family: "Cabinet";
  font-weight: 700;
  font-style: normal;
  src: url("../assets/fonts/Cabinet/CabinetGrotesk-Bold.woff") format("woff");
}

/* Helpers typo */
.krona-one-regular {
  font-family: "Krona One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.archivo {
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.space-grotesk {
  font-family: "Space Grotesk";
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}


/* ===================== */
/* VARIABLES / THEME     */
/* ===================== */

:root{
  --font-ui: "Manosque", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-title: "Cabinet", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-portfolio: "Palo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --boxcolor: #4971D6;
  --boxcolor_2: #3C5EB2;
  --boxcolor_3: #283F7A;
  --boxcolor_4: #FFFFF2;

  --boxcolor_border: #354f92;
  --boxcolor_border_2: #283E74;
  --boxcolor_border_3: #192646;
  --boxcolor_border_4: #C7C7B9;

  --h2: #FFFFF2;
  --ink:  #243769;

  --g: 10px;
  --speed: 12s;
  --bg: #F9FDFE;

  --borderColor: #0d2257;
}


/* ===================== */
/* RESET / GLOBAL        */
/* ===================== */

*{ box-sizing: border-box; }
html, body{ 
  height: 100%;
  overscroll-behavior: none;
}

body{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;

  padding-bottom: var(--g);
  margin: 0;
  overscroll-behavior: none;
}

body{ background: var(--bg); }

.hidden{ display: none !important; }

h1, h2, h3, h4, h5, h6{
  margin: 0;
  margin-left: 3vw;
}

h2{
  font-family: var(--font-title);
  color: var(--h2);
  font-size: 16px;
  margin-bottom: 0.2vw;
  margin-top: 2vw;
  letter-spacing: 1.5px;
}

h3{
  font-family: var(--font-title);
  color: var(--h2);
  font-size: 48px;
}

p{
  font-family: "Space Grotesk";
  color: var(--h2);
}


/* ===================== */
/* CAROUSELS             */
/* ===================== */

.carousel{
  position: fixed;
  top: 0px;
  right: -10vw;
  transform: rotate(36.41deg);
  z-index: 9990;
  overflow: hidden;
  width: auto;
  max-width: 700px;
  background: #4971D6;
  color: var(--ink);
  padding: 0.75rem 0;
}
.port{
  position: fixed;
  top: 0px;
  right: -10vw;
  transform: rotate(36.41deg);
  z-index: 9990;
  overflow: hidden;
  width: auto;
  max-width: 700px;
  background: #323232;
  color: var(--ink);
  padding: 0.75rem 0;
  pointer-events: none;
}

.carousel-track{
  display: inline-flex;
  white-space: nowrap;
  animation: slide var(--speed) linear infinite;
}

.carousel-item{
  padding: 0 2.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-family: "Cabinet", sans-serif;
  color: #ffffff;
}

/* Variante sneakers */
.carousel_sneakers{
  position: absolute;
  bottom: 100px;
  left: 0px;
  overflow: hidden;
  width: auto;
  max-width: 50vw;
  padding: 0.75rem 0;
}

.carousel-track_sneakers{
  display: inline-flex;
  white-space: nowrap;
  animation: slide var(--speed) linear infinite;
}

.carousel-item_sneakers{
  padding: 0 1rem;
  width: 300px;
}

/* Keyframes unique */
@keyframes slide{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .carousel-track,
  .carousel-track_sneakers{
    animation: none;
  }
}


/* ===================== */
/* GRILLE BASE           */
/* ===================== */

.grid-container{
  display: grid;
  gap: var(--g);
  padding: var(--g);
  height: 90dvh;

  --base: 1fr;

  --c1: var(--base); --c2: var(--base); --c3: var(--base);
  --c4: var(--base); --c5: 10vmax;     --c6: var(--base);
  --c7: var(--base); --c8: var(--base); --c9: var(--base);

  --r1: var(--base); --r2: var(--base); --r3: var(--base);
  --r4: var(--base); --r5: 10vmax;     --r6: var(--base);
  --r7: var(--base); --r8: var(--base); --r9: var(--base);

  grid-template-columns:
    minmax(0,var(--c1)) minmax(0,var(--c2)) minmax(0,var(--c3))
    minmax(0,var(--c4)) minmax(0,var(--c5)) minmax(0,var(--c6))
    minmax(0,var(--c7)) minmax(0,var(--c8)) minmax(0,var(--c9));

  grid-template-rows:
    minmax(0,var(--r1)) minmax(0,var(--r2)) minmax(0,var(--r3))
    minmax(0,var(--r4)) minmax(0,var(--r5)) minmax(0,var(--r6))
    minmax(0,var(--r7)) minmax(0,var(--r8)) minmax(0,var(--r9));

  transition: all .4s ease;
}


/* ===================== */
/* BOXES GRID - BASE     */
/* ===================== */

:where(
  .kc-1, .kaws-1, .kalbut-1, .carte_postale-1, .mapping-1,
  .projet_perso-1, .illustrations-1, .frame-1, .run-1, .logo-1
){
  position: relative;
  overflow: hidden;
  outline-offset: -4px;
}

/* Placement grid */
.kc-1{ grid-column: 1 / 3; grid-row: 1 / 7; }
.kaws-1{ grid-column: 6 / 8; grid-row: 1 / 4; }
.kalbut-1{ grid-column: 8 / 10; grid-row: 1 / 7; }
.carte_postale-1{ grid-column: 8 / 10; grid-row: 7 / 10; }
.mapping-1{ grid-column: 6 / 8; grid-row: 4 / 6; }
.projet_perso-1{ grid-column: 5 / 8; grid-row: 6 / 10; }
.illustrations-1{ grid-column: 3 / 5; grid-row: 5 / 10; }
.frame-1{ grid-column: 1 / 3; grid-row: 7 / 10; }
.run-1{ grid-column: 3 / 6; grid-row: 1 / 5; }

.logo-1{
  grid-column: 5 / 6;
  grid-row: 5 / 6;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Thèmes / outlines + backgrounds */
.logo-1{
  outline: 4px solid var(--boxcolor_border_4);
  background-color: var(--boxcolor_4);
}

/* Overlays spécifiques base */
.kaws-1::before,
.kc-1::before,
.carte_postale-1::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff00;
  z-index: 999;
  outline-offset: -4px;
}

.carte_postale-1::before{
  outline: 4px solid var(--boxcolor_border_2);
}

/* Assets dans les boxes */
.kaws_tshirt{
  position: absolute;
  width: 30vw;
  height: auto;
  right: -10vw;
  top: 85%;
  transform: translateY(-50%);
  pointer-events: none;
  box-sizing: border-box;
}
.run-logo{
  position: absolute;
  width: 22vw;
  height: auto;
  right: 0vw;
  bottom: 0%;
  pointer-events: none;
  box-sizing: border-box;
}

.kalbut-logo{
  position: absolute;
  width: 22vw;
  height: auto;
  right: 0vw;
  bottom: 0%;
  pointer-events: none;
  box-sizing: border-box;
}

.cup{
  position: absolute;
  width: 23vw;
  height: auto;
  right: 0vw;
  bottom: 0%;
  pointer-events: none;
  box-sizing: border-box;
  transform: rotate(-30deg);
}

.carte_postale-1 .cartep-sneaker{
  position: absolute;
  width: 15vw;
  height: auto;
  right: -3vw;
  top: 10vw;
  transform: translateY(-50%);
}

.frame-1 .frame-logo{
  position: absolute;
  width: 9vw;
  height: auto;
  right: 1vw;
  bottom: 1vw;
  pointer-events: none;
}

.kc_keyboard{
  position: absolute;
  width: 70vw;
  height: auto;
  left: -42vw;
  top: 32vw;
  transform: translateY(-50%);
  pointer-events: none;
}

.line{
  overflow: hidden;
  display: block;
}


/* ===================== */
/* HOVER MODIFIERS GRID  */
/* ===================== */

.grid-container:has(.kc-1:hover),
.grid-container--kc-1{ --c2: 2fr; --r6: 2fr; }

.grid-container:has(.run-1:hover),
.grid-container--run-1{ --c4: 2fr; --r1: 2fr; }

.grid-container:has(.kalbut-1:hover),
.grid-container--kalbut-1{ --c9: 2fr; --r1: 2fr; }

.grid-container:has(.kaws-1:hover),
.grid-container--kaws-1{ --c6: 4fr; --r1: 2fr; }

.grid-container:has(.carte_postale-1:hover),
.grid-container--carte_postale-1{ --c9: 3fr; --r9: 2fr; }

.grid-container:has(.illustrations-1:hover),
.grid-container--illustrations-1{ --c3: 2fr; --r8: 2fr; }

/* Zones "not allowed" */
.grid-container:has(.mapping-1:hover),
.grid-container--mapping-1{ cursor: not-allowed; }

.grid-container:has(.projet_perso-1:hover),
.grid-container--projet_perso-1{ cursor: not-allowed; }

.grid-container:has(.frame-1:hover),
.grid-container--frame-1{ cursor: not-allowed; }


/* ===================== */
/* FULLSCREEN GRID       */
/* ===================== */

.grid-container.kc-full{
  height: 100vh;
  gap: var(--g);
  padding: var(--g);
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.grid-container.kc-full .box{ display: none; }

.grid-container.kc-full .kc-1{
  display: block;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  border-radius: 0;
}

.grid-container.kc-full + .contact{ display: none; }



/* ===================== */
/* VP CLONES - BASE      */
/* ===================== */

:where(
  .kc-1-vp, .kaws-1-vp, .kalbut-1-vp, .carte_postale-1-vp,
  .mapping-1-vp, .run-1-vp, .frame-1-vp, .illustrations-1-vp,
  .projet-perso-1-vp
){
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  z-index: 1000;
  outline-offset: -4px;
}

/* Thèmes VP */
.kc-1-vp,
.projet-perso-1-vp{
  outline: 4px solid var(--boxcolor_border_3);
  background-color: var(--boxcolor_3);
}
.kaws-1-vp{
  outline: 4px solid var(--boxcolor_border_3);
  background-color: var(--boxcolor_3);
}
.kalbut-1-vp{
  outline: 4px solid var(--boxcolor_border);
  background-color: var(--boxcolor);
}
.carte_postale-1-vp{
  outline: 4px solid var(--boxcolor_border_2);
  background-color: var(--boxcolor_2);
}
.mapping-1-vp{
  outline: 4px solid var(--boxcolor_border);
  background-color: var(--boxcolor);
}
.run-1-vp,
.frame-1-vp{
  outline: 4px solid var(--boxcolor_border_2);
  background-color: var(--boxcolor_2);
}
.illustrations-1-vp{
  outline: 4px solid var(--boxcolor_border);
  background-color: var(--boxcolor);
}

/* Assets VP */
.kc_keyboard-vp{
  position: absolute;
  width: 70vw;
  height: auto;
  left: -42vw;
  bottom: -30vw;
  transform: translateY(-50%);
  pointer-events: none;
  box-sizing: border-box;
}

.cartep-sneaker-vp{
  position: absolute;
  width: 15vw;
  height: auto;
  right: -3vw;
  bottom: 0vw;
  pointer-events: none;
  box-sizing: border-box;
}


/* ===================== */
/* CONTACT               */
/* ===================== */

.contact{
  height: 10vh;
  outline: 4px solid var(--boxcolor_border_4);
  outline-offset: -4px;
  background-color: var(--boxcolor_4);
  margin: 0;
  margin-left: var(--g);
  margin-right: var(--g);
  display: grid;
  grid-template-columns: 2fr 2fr 3fr 2fr;
  position: relative;
  justify-content: space-between;
}

.contact::before{
  outline: 4px solid var(--boxcolor_border_4);
  outline-offset: -4px;
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff00;
  z-index: 999;
  pointer-events: none;
}

.contact-box{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  outline-offset: -4px;
  overflow: hidden;
  transition: color 0.2s ease;
}

.contact-box::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--boxcolor);
  transform: scaleY(0);
  transform-origin: center bottom;
  transition: transform 0.25s ease;
  z-index: 0;
}

.insta::before{ background-color: var(--boxcolor_2); }
.phone::before{ background-color: var(--boxcolor); }
.linkedin::before{ background-color: var(--boxcolor_3); }
.mail::before{ background-color: var(--boxcolor_2); }

.contact-box > *{ position: relative; z-index: 1; }

.contact-label{
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0.85;
}

.contact-value{
  font-family: "Space Grotesk";
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 600;
}

.contact-box:hover::before,
.contact-box:focus-visible::before{
  transform: scaleY(1);
}

.contact-box:hover,
.contact-box:focus-visible{
  color: #FFFFF2;
}


/* ===================== */
/* BOUTONS PH            */
/* ===================== */

.ph-button{
  position: relative;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.ph-button::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #FFFFF2;
  transform: translate(0, 0);
  z-index: -1;
  transition: transform 0.25s ease;
}

.ph-inner{
  background: #9e9e9e;
  padding: 0.5vw 1vw;
  display: inline-flex;
  align-items: center;
  gap: 26px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  transform-origin: left bottom;
}

.ph-text{
  font-size: 16px;
  color: #FFFFF2;
  white-space: nowrap;
  font-family: "Space Grotesk";
}

.ph-button:hover .ph-inner,
.ph-button:focus-visible .ph-inner{
  transform: rotate(-4deg);
}

.ph-button--figma:hover .ph-inner{ background: #D67E51; }
.ph-button--video:hover .ph-inner{ background: #d6bb51; }

.button{ display: flex; }

.button-KC_figma,
.button-KC_video{
  margin-left: 3vw;
  opacity: 0;
}

.kc-1-vp .button-KC_figma,
.kc-1-vp .button-KC_video{
  z-index: 5;
}


/* ===================== */
/* CLOSE                 */
/* ===================== */

.close{
  position: absolute;
  top: 1vw;
  right: 2vw;

  font-size: 40px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: none;
  padding: 0;

  color: #FFFFF2;
  z-index: 9999;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

/* close cachés au départ */
.run-close-vp,
.frame-close-vp,
.kaws-close-vp,
.mapping-close-vp,
.illustrations-close-vp,
.projet-perso-close-vp,
.kalbut-close-vp{
  opacity: 0;
}

.kc-close-vp:hover{
  transform: scale(1.3);
}


/* ===================== */
/* TEXTE VP              */
/* ===================== */

.texte{
  font-family: "Space Grotesk";
  color: #f7f7f3;
  overflow: hidden;
  font-size: 1.2rem;
  font-weight: 100;
  max-width: 50ch;
  margin-top: 0;
  margin-bottom: 1.3rem;
  margin-left: 3vw;
  display: block;
  line-height: 1.35;
}

.texte p:first-child{ margin-top: 1rem; }
.texte p:last-child{ margin-bottom: 2.3rem; }

.cartep-text-vp,
.kc-text-vp,
.run-text-vp{ opacity: 0; }

strong {
  color: #ffd88a;
  font-weight: 700;
}

.link-strong {
  text-decoration: underline;
}


/* ===================== */
/* SCÈNE DU CARRÉ        */
/* ===================== */

.square-section{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.square-wrapper{
  width: 90vmin;
  height: 90vmin;
  display: flex;
  align-items: center;
  justify-content: center;
}

.square{
  width: 100%;
  height: 100%;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  --squareOpacity: 1;
  --squareScaleX: 1;
  --squareScaleY: 1;
}

.square::before{
  border: 2px solid #243769;
  content: "";
  position: absolute;
  inset: 0;
  background: #FFFFF2;
  opacity: var(--squareOpacity);
  transform-origin: center center;
  transform: scaleX(var(--squareScaleX)) scaleY(var(--squareScaleY));
  z-index: 0;
}

.square::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: center center;
  transform: scaleX(var(--squareScaleX)) scaleY(var(--squareScaleY));
  z-index: 3;
  border-style: solid;
  border-width: var(--borderWidth);
  border-color: var(--borderColor);
}

.portefolio{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portefolio-inner{
  position: relative;
  background-color: #FFFFF2;
}

.card{
  width: 80vw;
  height: 30vw;
  outline: 2px solid #243769;
  position: relative;
}

.card-main{
  z-index: 2;
  height: 26vw;
  background-color: #4971D6;
  padding: 2vw 3vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-portfolio);
  color: #FFFFF2;
}

.card-footer{
  display: flex;
  align-items: center;
  border-top: 2px solid #243769;
  font-size: 2vw;
  font-family: "Cabinet", sans-serif;
  height: 4vw;
  padding: 0;
}

.card-footer p{
  margin: 0;
  margin-left: 1vw;
  color: #243769;
}

.name{
  font-family: "Krona One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.4vw;
  margin: 0 0 1%;
  position: absolute;
  top: -3.5vw;
  color: #243769;
}

.logo-word{
  font-size: 23vw;
  font-weight: 700;
  letter-spacing: 0.3rem;
}


/* ===================== */
/* DÉCOR / IMAGES        */
/* ===================== */

.tchoup{
  width: 80%;
}

.run_1, .run_2, .run_3, .run_4{
  position: absolute;
  width: 100vw;
}

.nike{
  width: 360px;
  height: 360px;
  position: absolute;
  top: -110px;
  right: 280px;
}

.earth{
  width: 150px;
  height: 150px;
  position: absolute;
  bottom: 40px;
  left: 40px;
}

.vent1{ position: absolute; top: 0px; }
.vent2{ position: absolute; top: 170px; }
.vent3{ position: absolute; top: 500px; }
.vent4{ position: absolute; bottom: 0px; }

.star{
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.star2{
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.sneakers{
  width: 470px;
  height: 325px;
  position: absolute;
  bottom: 30px;
  right: 320px;
}


/* ======================================= */
/* VP - LAYER SYSTEM CLEAN (override)      */
/* ======================================= */

/* 1) Contexte propre + rien ne dépasse */
:where(
  .kc-1-vp,
  .kaws-1-vp,
  .kalbut-1-vp,
  .carte_postale-1-vp,
  .projet-perso-1-vp,
  .frame-1-vp,
  .run-1-vp,
  .mapping-1-vp,
  .illustrations-1-vp,
  .logo-1-vp
){
  isolation: isolate;
  overflow: hidden;
  outline: none;
}

/* 2) Images derrière */
:where(
  .kc-1-vp,
  .kaws-1-vp,
  .kalbut-1-vp,
  .carte_postale-1-vp,
  .projet-perso-1-vp,
  .frame-1-vp,
  .run-1-vp,
  .mapping-1-vp,
  .illustrations-1-vp,
  .logo-1-vp
) img{
  z-index: 0;
}


/* 3) Ombre / gradient piloté par une variable */
:where(
  .kc-1-vp,
  .kaws-1-vp,
  .kalbut-1-vp,
  .carte_postale-1-vp,
  .projet-perso-1-vp,
  .frame-1-vp,
  .run-1-vp,
  .mapping-1-vp,
  .illustrations-1-vp,
  .logo-1-vp
)::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.578) 0%,
    rgba(0, 0, 0, 0.395) 35%,
    rgba(0, 0, 0, 0) 70%
  );

  /* 👇 contrôlé par GSAP */
  opacity: var(--gradOpacity, 0);
}


/* 4) Texte / CTA / close au-dessus du gradient */
:where(
  .kc-1-vp,
  .kaws-1-vp,
  .kalbut-1-vp,
  .carte_postale-1-vp,
  .projet-perso-1-vp,
  .frame-1-vp,
  .run-1-vp,
  .mapping-1-vp,
  .illustrations-1-vp,
  .logo-1-vp
) :where(h2, h3, .texte, .button, .close, .button-KC_figma, .button-KC_video){
  position: relative;
  z-index: 20;
}

/* 5) Border du VP TOUT DEVANT */
:where(
  .kc-1-vp,
  .kaws-1-vp,
  .kalbut-1-vp,
  .carte_postale-1-vp,
  .projet-perso-1-vp,
  .frame-1-vp,
  .run-1-vp,
  .mapping-1-vp,
  .illustrations-1-vp,
  .logo-1-vp
)::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  border: 4px solid transparent;
}

/* Couleurs de border par VP */
.kc-1-vp::before{ border-color: var(--boxcolor_border_3); }
.kaws-1-vp::before{ border-color: var(--boxcolor_border_3); }
.kalbut-1-vp::before{ border-color: var(--boxcolor_border); }
.carte_postale-1-vp::before{ border-color: var(--boxcolor_border_2); }
.run-1-vp::before{ border-color: var(--boxcolor_border_2); }
.frame-1-vp::before{ border-color: var(--boxcolor_border_2); }
.mapping-1-vp::before{ border-color: var(--boxcolor_border); }
.illustrations-1-vp::before{ border-color: var(--boxcolor_border); }





.run-1-vp .run_1,
.run-1-vp .run_2,
.run-1-vp .run_3,
.run-1-vp .run_4{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.illu-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.kalb-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.bg-video{
  position: absolute;
  inset: 0;
  z-index: 0;          /* derrière */
  pointer-events: none;
  overflow: hidden;
}

.bg-video video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* <-- le vrai fix */
}


/* Mur de logos KC - seulement en fullscreen */
.kc-logo-wall{
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: url("../assets/kc-logo.svg");
  background-size: 80px 80px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: -1;
}

/* visible seulement quand le VP KC est en plein écran */
.kc-1-vp.vp--full .kc-logo-wall{
  opacity: 0.18;
}


/* ============ TABLETTE (iPad) ============ */
@media (max-width: 1024px) {
  /* Nouveau placement des cases */
  .kc-1{ grid-column: 1 / 6; grid-row: 1 / 3; }
  .run-1{ grid-column: 6 / 10; grid-row: 1 / 3; }

  .kalbut-1{ grid-column: 1 / 5; grid-row: 3 / 5; }
  .kaws-1{ grid-column: 5 / 10; grid-row: 3 / 5; }
  .mapping-1{ grid-column: 1 / 5; grid-row: 5 / 6; }

  .illustrations-1{ grid-column: 1 / 6; grid-row: 6 / 8; }
  .projet_perso-1{ grid-column: 6 / 10; grid-row: 5 / 7; }

  .frame-1{ grid-column: 1 / 6; grid-row: 8 / 10; }
  .carte_postale-1{ grid-column: 6 / 10; grid-row: 7 / 10; }

  .contact{
    height: auto;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 8px;
    padding-block: 8px;
  }
  :where(
    .kc-1-vp,
    .kaws-1-vp,
    .kalbut-1-vp,
    .carte_postale-1-vp,
    .projet-perso-1-vp,
    .frame-1-vp,
    .run-1-vp,
    .mapping-1-vp,
    .illustrations-1-vp,
    .logo-1-vp
  ).vp--full::after{
    background: linear-gradient(
      180deg,                      
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0.4) 40%,
      rgba(0, 0, 0, 0) 80%
    );
  }

  .port{
    display: none;

}

  .grid-container:has(.kc-1:hover),
  .grid-container--kc-1{ --c2: 1fr; --r6: 1fr; }

  .grid-container:has(.run-1:hover),
  .grid-container--run-1{ --c4: 1fr; --r1: 1fr; }

  .grid-container:has(.kalbut-1:hover),
  .grid-container--kalbut-1{ --c9: 1fr; --r1: 1fr; }

  .grid-container:has(.kaws-1:hover),
  .grid-container--kaws-1{ --c6: 1fr; --r1: 1fr; }

  .grid-container:has(.carte_postale-1:hover),
  .grid-container--carte_postale-1{ --c9: 1fr; --r9: 1fr; }

  .grid-container:has(.illustrations-1:hover),
  .grid-container--illustrations-1{ --c3: 1fr; --r8: 1fr; }
}