/* ========== Bagou — Squelette 3 zones V4OLD pour studio WIP (responsive) ==========
   - Desktop/tablette large: 3 panneaux côte à côte (centre un peu plus large)
   - Mobile: 3 panneaux empilés verticalement (centre un peu plus haut)
   - Chaque panneau: zoom-out => rétracte, zoom-in => décontracte
   - PREVIEWER: flèches (UP/DOWN ou LEFT/RIGHT) changent le "contenu" (titre)
*/
:root{
  --tint-galerie:  rgba(255,  0, 170, .08); /* rose fluo opacifié */
  --tint-previewer:rgba(255, 115,  0, .08); /* orange fluo opacifié */
  --tint-action:   rgba(255, 240,  0, .08); /* jaune fluo opacifié */
}

/* Baseline */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:#fff; 
  color:#111827;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* ---------- Header + footer (version allégée) ---------- */
:root{
  --maxw: min(1920px, 96vw);
  --pad: clamp(12px, 2vw, 24px);
  --gap: clamp(14px, 2.2vw, 28px);

  --panel-bg:#fff;
  --panel-border:#b8b8b8;
  --panel-radius: 22px;
  --panel-shadow: 0 2px 0 rgba(0,0,0,.25);

  --hdr-h: clamp(56px, 8svh, 72px);
  --ftr-h: clamp(56px, 8svh, 96px);

  --icon-size: 42px;
  --title-size: clamp(18px, 2.1vw, 28px);
  --title-color: #6b7280;

  --collapsed-min: 84px; /* min largeur desktop / min hauteur mobile */
}

.header{
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--hdr-h);
  display:flex;
  align-items:center;
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.header .bar{
  width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 12px;
}
.header .logo{
  width: clamp(28px, 6vw, 46px);
  height: auto;
  display:block;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  background: rgba(255,255,255,.85);
}
.header .brand{
  color: rgba(255,255,255,.92);
  font-weight: 800;
  letter-spacing: .3px;
}
/* Footer fixed (simple) */
.footer{
  position: fixed;
  left:0; right:0; bottom:0;
  height: var(--ftr-h);
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 40;
}
.footer .bar{
  width: var(--maxw);
  margin:0 auto;
  padding: 0 var(--pad);
  color: rgba(255,255,255,.85);
  font-size: clamp(12px, 1.6vw, 14px);
}

/* Page wrapper: laisse la place au footer */
.page{
  min-height: calc(100svh - var(--hdr-h));
  padding-bottom: var(--ftr-h);
}

/* ---------- Zone layout ---------- */
.stage{
  width: var(--maxw);
  margin: 0 auto;
  padding: clamp(18px, 4vw, 38px) var(--pad);
}

/* Desktop: 3 colonnes. Mobile: 3 rangées */
.zones{
  display:grid;
  gap: var(--gap);
  align-items: stretch;            /* top+bottom alignés */
}

/* Par défaut (desktop) */
@media (min-width: 821px){
  .zones{
    grid-template-columns: 1fr 1.25fr 1fr;
    grid-template-rows: 1fr;
    min-height: clamp(420px, 45svh, 550px);
  }
}
@media (min-width: 821px){
  .zones{
    grid-template-columns: 1fr 1.25fr 1fr;
    grid-template-rows: 1fr;

    height: clamp(420px, 62svh, 650px);
    max-height: calc(100svh - var(--hdr-h) - var(--ftr-h) - 2 * clamp(18px, 4vw, 38px));
  }
  .panel{ height: 100%; }
}


/* Mobile */
@media (max-width: 820px){
  .zones{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
}

/* ---------- Panel ---------- */
.panel{
  position: relative;
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  border: 3px dashed var(--panel-border);
  box-shadow: var(--panel-shadow);
  overflow: hidden;

  /* Empêche le scroll horizontal interne */
  min-width: 0;
}

/* contenu scrollable verticalement (future-proof) */
.panel__scroll{
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(16px, 2.2vw, 22px);
  padding: clamp(16px, 2.2vw, 22px);
}

/* Title */
.panel__title{
  position: sticky;
  top: 0;

  height: 56px; /* hauteur garantie, jamais chevauchée */
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  background: var(--panel-bg);

  color: var(--title-color);
  font-family: "Jersey-10", "Jersey 10", "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: var(--title-size);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;

  z-index: 2;
  pointer-events: none;
}

/* Zoom button */
.zoom-btn{
  position:absolute;
  top: 14px;
  right: 14px;
  width: var(--icon-size);
  height: var(--icon-size);
  border: none;
  background: transparent;
  padding:0;
  cursor:pointer;
  display:grid;
  place-items:center;
  touch-action: manipulation;
  z-index: 3;
}
.zoom-btn img{
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.zoom-btn:focus-visible{
  outline: 3px solid rgba(255,0,168,.55);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Placeholder */
.placeholder{
  margin-top: 64px;
  height: calc(100% - 64px);
  display:grid;
  place-items:center;
  color: rgba(17,24,39,.28);
  font-weight:700;
  font-size: clamp(14px, 1.6vw, 18px);
  text-align:center;
  padding: 18px;
}

/* ---------- Collapsed behavior ---------- */

/* Desktop collapsed: réduit la largeur + titre pivoté */
@media (min-width: 821px){
  .panel.is-collapsed{
    /* le grid prendra en compte min/max; on force une largeur visuelle */
    width: 100%;
  }
  .panel.is-collapsed{
    /* On simule "min-width = icône ou titre" via une contrainte */
    min-width: var(--collapsed-min);
  }

  @media (min-width: 821px){
    .panel.is-collapsed .panel__title{
      position: absolute;          /* plus sticky en rétracté */
      top: 50%;
      left: 50%;

      height: auto;                /* clé : plus de height:56px */
      width: max-content;          /* prend la taille du texte */
      white-space: nowrap;         /* évite un wrap chelou */

      background: transparent;     /* évite une "barre" qui se fait couper */
      padding: 0;                  /* idem */

      transform: translate(-50%, -50%) rotate(90deg);
      transform-origin: center;
    }
  }

  .panel.is-collapsed .panel__scroll{
    padding: 0;
    overflow: hidden;
  }

  .panel.is-collapsed .placeholder{
    display:none;
  }

  /* Zoom icon en bas-centre (comme maquette) */
  .panel.is-collapsed .zoom-btn{
    top: auto;
    right: auto;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
  }

  .panel.is-collapsed .panel__content{
    display: none;
  }

}

/* Mobile collapsed: réduit la hauteur (titre non pivoté) */
@media (max-width: 820px){
  .panel.is-collapsed{
    min-height: var(--collapsed-min);
    height: var(--collapsed-min);
  }
  .panel.is-collapsed .panel__scroll{
    padding: 0;
    overflow:hidden;
  }
  .panel.is-collapsed .placeholder{
    display:none;
  }
  /* Zoom icon reste à droite du titre (cohérent avec maquette) */

  .panel.is-collapsed .panel__content{
    display: none;
  }

}

@media (max-width: 820px){
  /* hauteur max des panneaux en mobile -> scroll interne via .panel__scroll */
  .panel:not(.is-collapsed){
    max-height: calc(100svh - var(--hdr-h) - var(--ftr-h) - 2 * clamp(18px, 4vw, 38px) - 28px);
  }
}


/* ---------- Previewer arrows ---------- */
.preview-wrap{
  position: relative;
  height: 100%;
  
}

/* Boutons flèches */
.arrow{
  position:absolute;
  width:  clamp(20px, 3.2vw, 34px);
  height: clamp(20px, 3.2vh, 34px);
  border: none;
  background: transparent;
  padding:0;
  cursor:pointer;
  display:grid;
  place-items:center;
  touch-action: manipulation;
  z-index: 5;
}
.arrow img{
  width: 100%;
  height: 100%;
  display:block;
  image-rendering: pixelated;
  user-select:none;
  -webkit-user-drag:none;
}
.arrow:focus-visible{
  outline: 3px solid rgba(255,0,168,.55);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Desktop: UP / DOWN au-dessus et en-dessous du panel central */
/* @media (min-width: 821px){
  .arrow--up{
    left: 50%;
    transform: translateX(-50%);
    top: calc(-1 * (clamp(46px, 6vw, 68px) + 10px));
  }
  .arrow--down{
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(-1 * (clamp(46px, 6vw, 68px) + 10px));
  }
  .arrow--left, .arrow--right{ display:none; }
} */
@media (min-width: 821px){
  .arrow--up{
    left: 50%;
    transform: translateX(-50%);
    top: -22px;                 /* proche du panel */
  }
  .arrow--down{
    left: 50%;
    transform: translateX(-50%);
    bottom: -22px;              /* proche du panel */
  }
  .arrow--left, .arrow--right{ display:none; }
}

/* Mobile: LEFT / RIGHT sur les côtés du previewer */
/* @media (max-width: 820px){
  .arrow--left{
    top: 50%;
    transform: translateY(-50%);
    left: calc(-1 * (clamp(46px, 6vw, 68px) + 8px));
  }
  .arrow--right{
    top: 50%;
    transform: translateY(-50%);
    right: calc(-1 * (clamp(46px, 6vw, 68px) + 8px));
  }
  .arrow--up, .arrow--down{ display:none; }
} */
@media (max-width: 820px){
  .arrow--left{
    top: 50%;
    transform: translateY(-50%);
    left: -20px;               /* proche du panel (pas au bord fenêtre) */
  }
  .arrow--right{
    top: 50%;
    transform: translateY(-50%);
    right: -20px;
  }
  .arrow--up, .arrow--down{ display:none; }
}

/* Mobile normal: le previewer est un peu plus haut */
@media (max-width: 820px){
  .panel[data-zone="previewer"]:not(.is-collapsed){
    min-height: clamp(260px, 34svh, 420px);
  }
}

/* Desktop normal: panels s'étirent pareil */
@media (min-width: 821px){
  .panel{
    min-height: 100%;
  }
}

/* En mode "hybride", on laisse la place aux zones non-collapsées :
   - desktop: on force des colonnes flexibles mais une colonne collapsée ne grossit pas */
/* @media (min-width: 821px){
  .zones{
    grid-template-columns:
      minmax(var(--collapsed-min), 1fr)
      minmax(var(--collapsed-min), 1.25fr)
      minmax(var(--collapsed-min), 1fr);
  }
  .panel.is-collapsed{
    max-width: var(--collapsed-min);
    justify-self: center; 
  }
  .panel[data-zone="previewer"]:not(.is-collapsed){
    width: 100%;
  }
} */

@media (min-width: 821px){

  /* Colonnes pilotées par variables -> permet "collées" en hybride */
  .zones{
    --col1: 1fr;
    --col2: 1.25fr;
    --col3: 1fr;

    --gap-normal: var(--gap);
    --gap-compact: 12px;

    grid-template-columns: var(--col1) var(--col2) var(--col3);
    column-gap: var(--gap-normal);
  }

  /* Dès qu'une zone est rétractée => on compacte l'écart entre zones */
  .zones.is-compact{
    column-gap: var(--gap-compact);
  }

  /* Si une zone est collapsed, sa colonne devient étroite */
  .zones.c-galerie{  --col1: var(--collapsed-min); }
  .zones.c-previewer{ --col2: var(--collapsed-min); }
  .zones.c-action{   --col3: var(--collapsed-min); }

  /* Un panel collapsed doit se coller à son bord de colonne (pas centré) */
  .panel.is-collapsed{
    justify-self: stretch;
    width: 100%;
    max-width: none;
  }
}
/* @media (min-width: 821px){
  .zones{
    grid-template-columns: 1fr 1.25fr 1fr;
    grid-template-rows: 1fr;
    height: clamp(420px, 62svh, 650px);
    max-height: calc(100svh - var(--hdr-h) - var(--ftr-h) - 2 * clamp(18px, 4vw, 38px));
  }
}
@media (min-width: 821px){
  .panel{ height: 100%; }
} */


/* Mobile: une zone collapsed se réduit, les autres prennent leur hauteur */
@media (max-width: 820px){
  .panel.is-collapsed{
    max-height: var(--collapsed-min);
  }
}

/* Petits bonus: pas de scroll horizontal global */
body{ overflow-x: hidden; }

/* Pour debug visuel (désactivé) */
/* .panel{ outline: 1px solid rgba(255,165,0,.25); } */

@media (min-width: 821px){
  .zones.all-collapsed{
    column-gap: 0;
    justify-content: start;
    /* on force une grille "serrée" */
    grid-template-columns: var(--collapsed-min) var(--collapsed-min) var(--collapsed-min);
  }

  /* en full-retract, on ne centre plus les panels */
  .zones.all-collapsed .panel.is-collapsed{
    justify-self: start;
    max-width: var(--collapsed-min);
  }
}

.studio-wip-icons{
  font-size: 64px;
  line-height: 1.2;
}