:root{
  --studio-cream:#fbf6ef;
  --studio-paper:#fffdf9;
  --studio-sage:#85866a;
  --studio-sage-dark:#69705d;
  --studio-rose:#c97882;
  --studio-rose-dark:#ad6672;
  --studio-border:#e1d0c2;
  --studio-text:#554741;
}


body.studio-v3{
  margin:0 !important;

  background:
    var(--studio-cream) !important;

  color:
    var(--studio-text) !important;
}


/* ==========================================================
   HEADER
   ========================================================== */

#studio-v3-header{
  position:relative;

  z-index:5000;

  background:#fffaf5;
}


.studio-v3-topbar{
  height:42px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:
    0 clamp(30px,6vw,100px);

  background:
    var(--studio-sage);

  color:#fffaf5;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:13px;
}


.studio-v3-topbar-right{
  display:flex;

  align-items:center;

  gap:18px;
}


.studio-v3-topbar a{
  color:#fffaf5;

  text-decoration:none;
}



/* ==========================================================
   NAV
   ========================================================== */

.studio-v3-navigation{
  height:130px;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    400px
    minmax(0,1fr);

  align-items:center;

  padding:
    0 clamp(40px,6vw,110px);

  border-bottom:
    1px solid var(--studio-border);

  background:#fffaf5;
}


.studio-v3-nav-left,
.studio-v3-nav-right{
  display:flex;

  align-items:center;

  gap:
    clamp(28px,3vw,55px);
}


.studio-v3-nav-left{
  justify-content:flex-end;

  padding-right:25px;
}


.studio-v3-nav-right{
  justify-content:flex-start;

  padding-left:25px;
}


.studio-v3-navigation a{
  color:#584944;

  text-decoration:none;

  white-space:nowrap;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:16px;
}


.studio-v3-navigation a:hover,
.studio-v3-navigation a.active{
  color:
    var(--studio-rose-dark);
}


.studio-v3-navigation a.active{
  text-decoration:underline;

  text-decoration-color:
    var(--studio-rose);

  text-underline-offset:8px;
}



/* ==========================================================
   GROS LOGO
   ========================================================== */

.studio-v3-logo{
  width:400px;

  height:120px;

  display:flex;

  align-items:center;

  justify-content:center;

  overflow:hidden;
}


.studio-v3-logo img{
  width:100%;

  height:100%;

  display:block;

  object-fit:contain;

  transform:scale(1.28);
}



/* ==========================================================
   MENU DÉROULANT
   ========================================================== */

.studio-v3-nav-group{
  position:relative;

  display:flex;

  align-items:center;

  gap:3px;
}


.studio-v3-nav-group > button{
  border:0;

  padding:3px;

  background:transparent;

  cursor:pointer;

  color:#62534d;
}


.studio-v3-dropdown{
  position:absolute;

  top:calc(100% + 15px);

  left:-12px;

  display:none;

  min-width:190px;

  padding:7px;

  background:#fffaf5;

  border:
    1px solid var(--studio-border);

  border-radius:8px;

  box-shadow:
    0 14px 30px
    rgba(75,51,42,.14);
}


.studio-v3-nav-group.open
.studio-v3-dropdown{
  display:block;
}


.studio-v3-dropdown a{
  display:block;

  padding:9px 11px;

  border-radius:5px;

  font-size:13px;
}


.studio-v3-dropdown a:hover{
  background:#f4e7df;
}



/* ==========================================================
   VRAIE GRILLE STUDIO
   ========================================================== */

#studio-v3-layout{
  width:100%;

  display:grid;

  grid-template-columns:
    minmax(240px,330px)
    minmax(620px,820px)
    minmax(240px,330px);

  justify-content:center;

  align-items:start;

  gap:22px;

  padding:
    22px 20px 50px;

  box-sizing:border-box;

  background:
    var(--studio-cream);
}



/* ==========================================================
   BANDES D'INSPIRATION
   ========================================================== */

.studio-v3-side{
  position:sticky;

  top:20px;

  align-self:start;

  overflow:hidden;

  border-radius:13px;

  background:#eee4da;

  box-shadow:
    0 10px 28px
    rgba(79,58,49,.08);
}


.studio-v3-side img{
  display:block;

  width:100%;

  height:auto;

  object-fit:contain;
}



/* ==========================================================
   CENTRE
   ========================================================== */

.studio-v3-center{
  min-width:0;
}


body.studio-v3
.studio-v3-center main{
  width:100% !important;

  max-width:none !important;

  margin:0 !important;

  padding:
    38px 38px 35px !important;

  box-sizing:border-box;

  background:
    var(--studio-paper) !important;

  border:
    1px solid rgba(225,208,194,.65);

  border-radius:16px;

  box-shadow:
    0 12px 35px
    rgba(78,57,48,.06);
}



/* ==========================================================
   TITRE
   ========================================================== */

body.studio-v3
.studio-v3-center h1{
  margin:
    5px 0 0 !important;

  color:
    var(--studio-sage-dark) !important;

  opacity:1 !important;

  filter:none !important;

  text-shadow:none !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-style:normal !important;

  font-size:
    clamp(45px,4vw,62px) !important;

  font-weight:400 !important;

  line-height:1.1 !important;

  text-align:center !important;
}



/* ==========================================================
   INTRO
   ========================================================== */

.studio-v3-intro{
  width:min(560px,90%);

  margin:
    14px auto 30px;

  text-align:center;
}


.studio-v3-divider{
  margin-bottom:22px;

  color:
    var(--studio-rose);

  font-size:15px;

  letter-spacing:.07em;
}


.studio-v3-intro p{
  margin:0 !important;

  color:#554a44 !important;

  opacity:1 !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:15px;

  line-height:1.55;
}



/* ==========================================================
   FORMULAIRE EXISTANT
   ========================================================== */

body.studio-v3
.studio-v3-center textarea{
  min-height:115px !important;

  padding:15px !important;

  background:#fffdfa !important;

  border:
    1px solid #d9c7b9 !important;

  border-radius:8px !important;

  box-shadow:none !important;

  color:
    var(--studio-text) !important;
}


body.studio-v3
.studio-v3-center input,

body.studio-v3
.studio-v3-center select{
  background:#fffdfa !important;

  border:
    1px solid #dac9bc !important;

  border-radius:7px !important;
}



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

body.studio-v3
.studio-v3-center button[type="submit"],

body.studio-v3
.studio-v3-center .btn-primary,

body.studio-v3
.studio-v3-center .primary{
  background:
    var(--studio-rose) !important;

  border-color:
    var(--studio-rose) !important;

  border-radius:4px !important;

  color:#fff !important;

  box-shadow:none !important;
}



/* ==========================================================
   CARTES EXISTANTES
   ========================================================== */

body.studio-v3
.studio-v3-center .card,

body.studio-v3
.studio-v3-center .panel,

body.studio-v3
.studio-v3-center .step,

body.studio-v3
.studio-v3-center .option-card,

body.studio-v3
.studio-v3-center .choice-card{
  background:#fffdf9 !important;

  border-color:
    var(--studio-border) !important;

  box-shadow:none !important;
}



/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1250px){

  #studio-v3-layout{
    grid-template-columns:
      230px
      minmax(560px,760px)
      230px;

    gap:14px;

    padding-left:10px;
    padding-right:10px;
  }

}


@media(max-width:1000px){

  #studio-v3-layout{
    display:block;

    padding:
      15px 12px 40px;
  }


  .studio-v3-side{
    display:none;
  }


  .studio-v3-navigation{
    grid-template-columns:
      1fr;

    height:auto;

    min-height:90px;
  }


  .studio-v3-logo{
    margin:auto;
  }


  .studio-v3-nav-left,
  .studio-v3-nav-right{
    display:none;
  }

}


@media(max-width:650px){

  .studio-v3-topbar{
    display:none;
  }


  .studio-v3-logo{
    width:280px;
    height:80px;
  }


  body.studio-v3
  .studio-v3-center main{
    padding:
      25px 12px !important;
  }

}

/* ==========================================================
   STUDIO V3 — AJUSTEMENT FINAL STRUCTURE
   ========================================================== */


/* Header réellement fixe */

#studio-v3-header{
  position:sticky !important;
  top:0 !important;
  z-index:5000 !important;
}


/* La grille commence juste sous le header */

#studio-v3-layout{
  align-items:start !important;
}


/* Les deux compositions ont exactement la même géométrie */

.studio-v3-side{
  position:sticky !important;

  top:194px !important;

  height:calc(100vh - 215px) !important;

  min-height:650px !important;

  max-height:820px !important;

  overflow:hidden !important;

  align-self:start !important;

  border-radius:14px !important;
}


/* Même rendu gauche / droite */

.studio-v3-left,
.studio-v3-right{
  height:calc(100vh - 215px) !important;
}


/*
  Les deux images remplissent la même hauteur
  sans être coupées de manière différente.
*/

.studio-v3-side img{
  width:100% !important;
  height:100% !important;

  object-fit:cover !important;
  object-position:center top !important;

  display:block !important;
}


/*
  Un peu plus longues / présentes à l'écran
*/

#studio-v3-layout{
  grid-template-columns:
    minmax(260px,350px)
    minmax(620px,820px)
    minmax(260px,350px) !important;

  gap:24px !important;
}


/* Grand écran */

@media(min-width:1500px){

  #studio-v3-layout{
    grid-template-columns:
      360px
      minmax(680px,840px)
      360px !important;
  }

  .studio-v3-side{
    min-height:700px !important;
    max-height:860px !important;
  }

}


/* Tablette : on conserve les côtés tant qu'il y a la place */

@media(max-width:1250px){

  #studio-v3-layout{
    grid-template-columns:
      230px
      minmax(560px,740px)
      230px !important;
  }

}


/* Mobile : galerie supprimée comme avant */

@media(max-width:1000px){

  .studio-v3-side{
    display:none !important;
  }

}


/* ==========================================================
   DÉCOUVRIR AUSSI L'ATELIER
   ========================================================== */

.studio-discover{
  max-width:1450px;

  margin:20px auto 60px;

  padding:45px 25px;

  background:#fbf6ef;
}


.studio-discover-heading{
  text-align:center;

  margin-bottom:28px;
}


.studio-discover-heading span{
  color:#a96d79;

  font-size:10px;

  letter-spacing:.15em;

  font-weight:700;
}


.studio-discover-heading h2{
  margin:6px 0 0;

  color:#6d765f;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:35px;

  font-weight:400;
}


.studio-discover-grid{
  display:grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));

  gap:15px;
}


.studio-discover-grid a{
  overflow:hidden;

  background:#fffdf9;

  border:1px solid #e4d4c7;

  border-radius:14px;

  color:#574943;

  text-decoration:none;

  text-align:center;

  box-shadow:
    0 7px 22px rgba(72,53,45,.05);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.studio-discover-grid a:hover{
  transform:translateY(-4px);

  box-shadow:
    0 13px 28px rgba(72,53,45,.11);
}


.studio-discover-grid img{
  width:100%;

  aspect-ratio:1.45;

  object-fit:cover;

  display:block;
}


.studio-discover-grid h3{
  margin:12px 8px 4px;

  color:#a66f79;

  font-size:20px;
}


.studio-discover-grid p{
  margin:0 12px 17px;

  color:#88766e;

  font-size:12px;
}


@media(max-width:1000px){

  .studio-discover-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media(max-width:600px){

  .studio-discover-grid{
    grid-template-columns:1fr;
  }

}