:root{
  --atelier-cream:#faf5ee;
  --atelier-paper:#fffaf6;
  --atelier-rose:#b27b88;
  --atelier-rose-dark:#956471;
  --atelier-rose-soft:#f1dedb;
  --atelier-sage:#84917c;
  --atelier-sage-dark:#6e7968;
  --atelier-sage-soft:#e6ebe2;
  --atelier-text:#574843;
  --atelier-muted:#908078;
  --atelier-border:#e6d7cb;
}


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

html,
body{
  background:
    linear-gradient(
      180deg,
      #fdf9f4 0%,
      var(--atelier-cream) 100%
    );

  color:var(--atelier-text);
}


body{
  margin:0;

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


body.atelier-unified-theme{
  padding-top:0 !important;
}


/* ==========================================================
   NOUVEL EN-TÊTE
   ========================================================== */

.atelier-global-header{
  position:relative;
  z-index:1000;

  background:
    rgba(255,250,245,.97);

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

  box-shadow:
    0 5px 25px
    rgba(86,62,52,.035);
}


.atelier-global-top{
  min-height:32px;

  display:grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:center;

  max-width:1450px;

  margin:auto;

  padding:3px 25px;

  color:#9b8980;

  font-size:10px;
}


.atelier-global-social{
  display:flex;
  gap:9px;
}


.atelier-global-social a{
  color:#ad7c86;

  text-decoration:none;

  font-size:15px;
}


.atelier-global-signature{
  font-style:italic;

  white-space:nowrap;
}


.atelier-global-account{
  display:flex;

  justify-content:flex-end;

  align-items:center;

  gap:12px;
}


.atelier-global-account a{
  color:#7d6a62;

  text-decoration:none;
}


.atelier-global-main{
  max-width:1450px;

  min-height:82px;

  margin:auto;

  padding:5px 25px;

  display:grid;

  grid-template-columns:
    300px 1fr auto;

  align-items:center;

  gap:22px;
}


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

.atelier-global-logo{
  display:block;

  height:70px;

  text-decoration:none;

  overflow:hidden;
}


.atelier-global-logo img{
  display:block;

  height:100%;
  width:100%;

  object-fit:contain;

  object-position:left center;
}


/* ==========================================================
   NAVIGATION
   ========================================================== */

.atelier-global-nav{
  display:flex;

  justify-content:center;

  align-items:center;

  gap:
    clamp(10px,1.3vw,23px);
}


.atelier-global-nav > a,
.atelier-global-nav-group > a{
  color:#5a4943;

  text-decoration:none;

  font-size:14px;

  white-space:nowrap;
}


.atelier-global-nav a:hover,
.atelier-global-nav a.active{
  color:var(--atelier-rose-dark);
}


.atelier-global-nav a.active{
  text-decoration:underline;

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

  text-underline-offset:7px;
}


.atelier-global-nav-group{
  position:relative;

  display:flex;

  align-items:center;

  gap:2px;
}


.atelier-global-arrow{
  border:0;

  background:transparent;

  color:#76645d;

  cursor:pointer;

  padding:4px;
}


.atelier-global-dropdown{
  position:absolute;

  top:calc(100% + 19px);
  left:-15px;

  min-width:215px;

  display:none;

  padding:7px;

  background:#fffaf5;

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

  border-radius:10px;

  box-shadow:
    0 14px 32px
    rgba(70,48,40,.14);
}


.atelier-global-nav-group.open
.atelier-global-dropdown{
  display:block;
}


.atelier-global-dropdown a{
  display:block;

  padding:10px 12px;

  border-radius:6px;

  color:#644f48;

  text-decoration:none;

  font-size:13px;
}


.atelier-global-dropdown a:hover{
  background:#f5e9e2;
}


/* ==========================================================
   COMPTE / PANIER
   ========================================================== */

.atelier-global-actions{
  display:flex;

  align-items:center;

  gap:10px;

  white-space:nowrap;
}


.atelier-global-actions a{
  color:#5e4e48;

  text-decoration:none;
}


.atelier-global-cart{
  padding:9px 14px;

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

  border-radius:999px;

  background:#fff;
}


/* ==========================================================
   PAGES INTÉRIEURES
   ========================================================== */

body.atelier-unified-theme main{
  color:var(--atelier-text);
}


body.atelier-unified-theme h1,
body.atelier-unified-theme .page-title{
  color:var(--atelier-rose);

  font-family:
    "Snell Roundhand",
    "Brush Script MT",
    cursive;

  font-weight:400;
}


body.atelier-unified-theme h2{
  color:#5c4c46;
}


body.atelier-unified-theme input,
body.atelier-unified-theme textarea,
body.atelier-unified-theme select{
  border:
    1px solid #ddcfc4;

  border-radius:12px;

  background:#fffdfa;

  color:var(--atelier-text);
}


body.atelier-unified-theme button,
body.atelier-unified-theme .btn{
  border-radius:999px;
}


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

body.atelier-unified-theme button[type="submit"],
body.atelier-unified-theme .btn-primary{
  background:
    var(--atelier-rose);

  color:white;

  border:
    1px solid var(--atelier-rose);

  transition:.18s ease;
}


body.atelier-unified-theme button[type="submit"]:hover,
body.atelier-unified-theme .btn-primary:hover{
  background:
    var(--atelier-rose-dark);
}


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

body.atelier-unified-theme .card,
body.atelier-unified-theme .product-card{
  background:
    rgba(255,253,250,.97);

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

  border-radius:20px;

  box-shadow:
    0 8px 25px
    rgba(80,58,49,.05);
}


/* ==========================================================
   PAGE IA

   UNIQUEMENT HABILLAGE.
   AUCUNE LOGIQUE IA N'EST MODIFIÉE.
   ========================================================== */

body.atelier-ai-theme{
  background:
    linear-gradient(
      180deg,
      var(--atelier-sage) 0,
      #788574 430px,
      var(--atelier-cream) 430px
    ) !important;
}


body.atelier-ai-theme
.atelier-global-header{
  background:
    rgba(255,250,245,.98);
}


body.atelier-ai-theme main{
  background:transparent;
}


body.atelier-ai-theme h1{
  color:#f5e6e8;
}


/*
   Les gros panneaux du module IA restent
   fonctionnellement inchangés.
*/

body.atelier-ai-theme
section,
body.atelier-ai-theme
.panel{
  border-color:
    rgba(230,215,203,.9);
}


/* ==========================================================
   MOBILE
   ========================================================== */

.atelier-global-mobile{
  display:none;
}


@media(max-width:1100px){

  .atelier-global-top{
    display:none;
  }


  .atelier-global-main{
    grid-template-columns:
      1fr auto;

    min-height:70px;
  }


  .atelier-global-logo{
    height:58px;
  }


  .atelier-global-mobile{
    display:block;

    border:0;

    background:transparent;

    font-size:27px;

    cursor:pointer;
  }


  .atelier-global-nav,
  .atelier-global-actions{
    display:none;
  }


  .atelier-global-header.mobile-open
  .atelier-global-nav{
    position:absolute;

    top:100%;

    left:0;
    right:0;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    padding:20px;

    background:#fffaf5;

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

    box-shadow:
      0 18px 35px
      rgba(70,48,40,.12);
  }


  .atelier-global-dropdown{
    position:static;

    margin-top:8px;
  }

}


@media(max-width:600px){

  .atelier-global-main{
    padding:4px 13px;
  }


  .atelier-global-logo{
    height:50px;
  }

}


/* ==========================================================
   HEADER V2 — ALIGNÉ SUR LA PAGE D'ACCUEIL
   ========================================================== */

.atelier-global-header{
  background:#fffaf5 !important;
}


.atelier-global-top{
  min-height:38px;

  padding:
    4px 38px;

  border-bottom:
    1px solid #eee2d7;
}


.atelier-global-signature span{
  padding:0 6px;

  color:#cdb6a8;
}


.atelier-global-account{
  font-size:10px;
}


.atelier-global-account
.active-language{
  color:#b77a84;

  text-decoration:underline;
}


/*
   Le compte et le panier ne sont PLUS
   répétés dans le second niveau.
*/

.atelier-global-main{
  max-width:1500px;

  min-height:95px;

  grid-template-columns:
    285px 1fr 45px;

  padding:
    5px 30px;

  gap:25px;
}


/*
   Logo nettement plus grand.
*/

.atelier-global-logo{
  width:275px;

  height:82px;

  display:flex;

  align-items:center;

  overflow:visible;
}


.atelier-global-logo img{
  width:100%;

  height:100%;

  object-fit:contain;

  object-position:left center;
}


/*
   Navigation identique dans l'esprit
   à la page de garde.
*/

.atelier-global-nav{
  justify-content:flex-end;

  gap:
    clamp(13px,1.45vw,27px);
}


.atelier-global-nav > a,
.atelier-global-nav-group > a{
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:14px;

  color:#594943;
}


.atelier-global-nav a.active{
  color:#ae7480;

  text-decoration:underline;

  text-decoration-color:#cf9ba2;

  text-underline-offset:7px;
}


/*
   Supprimer toute apparition de l'ancien
   branding dans les pages secondaires.
*/

body.atelier-unified-theme
.site-header,

body.atelier-unified-theme
.topbar,

body.atelier-unified-theme
.header-top,

body.atelier-unified-theme
.top-header{
  display:none !important;
}


/* ==========================================================
   CONTENU DES PAGES
   ========================================================== */

body.atelier-unified-theme{
  background:#fbf6ef !important;
}


body.atelier-unified-theme main{
  background:#fbf6ef;
}


/*
   Même vieux rose que la page d'accueil.
*/

body.atelier-unified-theme h1,
body.atelier-unified-theme .page-title{
  color:#a96f7a !important;
}


/*
   Les cartes produits restent sobres,
   mais dans le même univers.
*/

body.atelier-unified-theme .product-card,
body.atelier-unified-theme .card{
  background:#fffdf9 !important;

  border-color:#e6d7cb !important;

  box-shadow:
    0 7px 22px
    rgba(83,61,51,.055);
}


/* ==========================================================
   MODULE IA

   UNIQUEMENT LE DÉCOR.
   ========================================================== */

body.atelier-ai-theme{
  background:
    linear-gradient(
      180deg,
      #7d8977 0,
      #7d8977 520px,
      #fbf6ef 520px
    ) !important;
}


body.atelier-ai-theme
.atelier-global-header{
  background:#fffaf5 !important;
}


body.atelier-ai-theme main{
  background:transparent;
}


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

@media(max-width:1200px){

  .atelier-global-main{
    grid-template-columns:
      240px 1fr 45px;
  }


  .atelier-global-logo{
    width:230px;
    height:72px;
  }

}


@media(max-width:1100px){

  .atelier-global-main{
    grid-template-columns:
      1fr auto;
  }


  .atelier-global-logo{
    width:250px;
    height:70px;
  }

}


/* ==========================================================
   LOGO ATELIER — CORRECTION AFFICHAGE
   ========================================================== */

.atelier-global-main{
  grid-template-columns:330px 1fr 45px !important;
  min-height:112px !important;
}

.atelier-global-logo{
  width:320px !important;
  height:100px !important;

  display:flex !important;
  align-items:center !important;

  overflow:hidden !important;
}

.atelier-global-logo img{
  display:block !important;

  width:100% !important;
  height:100% !important;

  object-fit:contain !important;
  object-position:center !important;

  transform:scale(1.22);
}


/* ==========================================================
   AJUSTEMENT FINAL HEADER
   ========================================================== */

.atelier-global-main{
  grid-template-columns:360px 1fr 40px !important;
  min-height:118px !important;
  gap:12px !important;
}

.atelier-global-logo{
  width:350px !important;
  height:105px !important;
}

.atelier-global-logo img{
  transform:scale(1.30) !important;
}

.atelier-global-nav{
  justify-content:flex-start !important;
  gap:clamp(12px,1.25vw,23px) !important;
}



/* ==========================================================
   L'ATELIER D'INGRID STUDIO
   HEADER / PAGE D'ENTRÉE
   ========================================================== */

body.atelier-studio-entry{
  background:#faf6ef !important;
}


/* Barre haute sauge */

.studio-entry-top{
  min-height:42px;

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

  padding:
    0 clamp(28px,6vw,105px);

  background:#85866a;

  color:#fffaf3;

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

  font-size:13px;
}


.studio-entry-top > div{
  display:flex;
  align-items:center;
  gap:10px;
}


.studio-entry-top-right{
  gap:18px !important;
}


.studio-entry-top a{
  color:#fffaf3;

  text-decoration:none;
}


/* Navigation principale */

.studio-entry-nav{
  position:relative;

  min-height:130px;

  display:grid;

  grid-template-columns:
    1fr 430px 1fr;

  align-items:center;

  padding:
    0 clamp(35px,7vw,130px);

  background:#fffaf5;

  border-bottom:
    1px solid #eadbcf;

  z-index:1000;
}


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

  align-items:center;

  gap:
    clamp(25px,3vw,60px);
}


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

  padding-right:25px;
}


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

  padding-left:25px;
}


.studio-entry-nav a{
  color:#564842;

  text-decoration:none;

  white-space:nowrap;

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

  font-size:16px;
}


.studio-entry-nav a:hover,
.studio-entry-nav a.active{
  color:#b66e7a;
}


.studio-entry-nav a.active{
  text-decoration:underline;

  text-decoration-color:#ce8a93;

  text-underline-offset:8px;
}


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

.studio-entry-logo{
  width:430px;
  height:120px;

  display:flex;

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

  overflow:hidden;

  margin:auto;
}


.studio-entry-logo img{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;

  transform:scale(1.18);
}


/* ============================================
   GROUPES + FLÈCHES
   ============================================ */

.studio-entry-group{
  position:relative;

  display:flex;

  align-items:center;

  gap:3px;
}


.studio-entry-arrow{
  border:0;

  padding:4px;

  background:transparent;

  color:#62534c;

  cursor:pointer;
}


/* Sous-menu */

.studio-entry-dropdown{
  position:absolute;

  top:calc(100% + 14px);

  left:-12px;

  min-width:195px;

  display:none;

  padding:7px;

  background:#fffaf5;

  border:
    1px solid #e1d1c5;

  border-radius:9px;

  box-shadow:
    0 14px 32px
    rgba(75,52,43,.14);
}


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


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

  padding:9px 11px;

  border-radius:6px;

  font-size:13px;
}


.studio-entry-dropdown a:hover{
  background:#f4e8e1;
}


/* ==========================================================
   IMPORTANT :
   LE CONTENU IA COMMENCE DIRECTEMENT SOUS CE HEADER
   ========================================================== */

body.atelier-studio-entry
.studio-approved-layout,
body.atelier-studio-entry main{
  margin-top:0 !important;
}


/*
   Les galeries latérales doivent elles aussi
   commencer juste sous le nouveau header.
*/

body.atelier-studio-entry
.studio-rail{
  top:172px !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

.studio-entry-mobile{
  display:none;
}


@media(max-width:1150px){

  .studio-entry-nav{
    grid-template-columns:
      1fr auto;

    min-height:85px;

    padding:
      0 20px;
  }


  .studio-entry-logo{
    width:300px;
    height:78px;

    margin:0;
  }


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


  .studio-entry-mobile{
    display:block;

    justify-self:end;

    border:0;

    background:transparent;

    font-size:28px;

    cursor:pointer;
  }


  .studio-entry-nav.mobile-open,
  .studio-entry-header.mobile-open{
    overflow:visible;
  }


  .studio-entry-header.mobile-open
  .studio-entry-nav-left,
  .studio-entry-header.mobile-open
  .studio-entry-nav-right{
    position:absolute;

    top:100%;

    left:0;
    right:0;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    padding:20px;

    background:#fffaf5;

    gap:15px;
  }


  .studio-entry-header.mobile-open
  .studio-entry-nav-right{
    top:calc(100% + 135px);
  }

}


@media(max-width:650px){

  .studio-entry-top{
    display:none;
  }


  .studio-entry-logo{
    width:250px;
    height:68px;
  }

}


/* ==========================================================
   L'ATELIER D'INGRID STUDIO
   HEADER / PAGE D'ENTRÉE
   ========================================================== */

body.atelier-studio-entry{
  background:#faf6ef !important;
}


/* Barre haute sauge */

.studio-entry-top{
  min-height:42px;

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

  padding:
    0 clamp(28px,6vw,105px);

  background:#85866a;

  color:#fffaf3;

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

  font-size:13px;
}


.studio-entry-top > div{
  display:flex;
  align-items:center;
  gap:10px;
}


.studio-entry-top-right{
  gap:18px !important;
}


.studio-entry-top a{
  color:#fffaf3;

  text-decoration:none;
}


/* Navigation principale */

.studio-entry-nav{
  position:relative;

  min-height:130px;

  display:grid;

  grid-template-columns:
    1fr 430px 1fr;

  align-items:center;

  padding:
    0 clamp(35px,7vw,130px);

  background:#fffaf5;

  border-bottom:
    1px solid #eadbcf;

  z-index:1000;
}


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

  align-items:center;

  gap:
    clamp(25px,3vw,60px);
}


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

  padding-right:25px;
}


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

  padding-left:25px;
}


.studio-entry-nav a{
  color:#564842;

  text-decoration:none;

  white-space:nowrap;

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

  font-size:16px;
}


.studio-entry-nav a:hover,
.studio-entry-nav a.active{
  color:#b66e7a;
}


.studio-entry-nav a.active{
  text-decoration:underline;

  text-decoration-color:#ce8a93;

  text-underline-offset:8px;
}


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

.studio-entry-logo{
  width:430px;
  height:120px;

  display:flex;

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

  overflow:hidden;

  margin:auto;
}


.studio-entry-logo img{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;

  transform:scale(1.18);
}


/* ============================================
   GROUPES + FLÈCHES
   ============================================ */

.studio-entry-group{
  position:relative;

  display:flex;

  align-items:center;

  gap:3px;
}


.studio-entry-arrow{
  border:0;

  padding:4px;

  background:transparent;

  color:#62534c;

  cursor:pointer;
}


/* Sous-menu */

.studio-entry-dropdown{
  position:absolute;

  top:calc(100% + 14px);

  left:-12px;

  min-width:195px;

  display:none;

  padding:7px;

  background:#fffaf5;

  border:
    1px solid #e1d1c5;

  border-radius:9px;

  box-shadow:
    0 14px 32px
    rgba(75,52,43,.14);
}


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


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

  padding:9px 11px;

  border-radius:6px;

  font-size:13px;
}


.studio-entry-dropdown a:hover{
  background:#f4e8e1;
}


/* ==========================================================
   IMPORTANT :
   LE CONTENU IA COMMENCE DIRECTEMENT SOUS CE HEADER
   ========================================================== */

body.atelier-studio-entry
.studio-approved-layout,
body.atelier-studio-entry main{
  margin-top:0 !important;
}


/*
   Les galeries latérales doivent elles aussi
   commencer juste sous le nouveau header.
*/

body.atelier-studio-entry
.studio-rail{
  top:172px !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

.studio-entry-mobile{
  display:none;
}


@media(max-width:1150px){

  .studio-entry-nav{
    grid-template-columns:
      1fr auto;

    min-height:85px;

    padding:
      0 20px;
  }


  .studio-entry-logo{
    width:300px;
    height:78px;

    margin:0;
  }


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


  .studio-entry-mobile{
    display:block;

    justify-self:end;

    border:0;

    background:transparent;

    font-size:28px;

    cursor:pointer;
  }


  .studio-entry-nav.mobile-open,
  .studio-entry-header.mobile-open{
    overflow:visible;
  }


  .studio-entry-header.mobile-open
  .studio-entry-nav-left,
  .studio-entry-header.mobile-open
  .studio-entry-nav-right{
    position:absolute;

    top:100%;

    left:0;
    right:0;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    padding:20px;

    background:#fffaf5;

    gap:15px;
  }


  .studio-entry-header.mobile-open
  .studio-entry-nav-right{
    top:calc(100% + 135px);
  }

}


@media(max-width:650px){

  .studio-entry-top{
    display:none;
  }


  .studio-entry-logo{
    width:250px;
    height:68px;
  }

}

/* ==========================================================
   CORRECTIONS FINES - STUDIO
   ========================================================== */

/* 1) RAILS LATÉRAUX : un peu moins grands, mieux cadrés */
.studio-rail,
.studio-side-rail,
.studio-left-rail,
.studio-right-rail {
  width: 340px !important;
  max-width: 340px !important;
}

/* si les visuels latéraux sont des <img> */
.studio-rail img,
.studio-side-rail img,
.studio-left-rail img,
.studio-right-rail img,
.studio-rail picture img,
.studio-side-rail picture img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  display: block;
}

/* si chaque rail contient un bloc/carte */
.studio-rail > *,
.studio-side-rail > *,
.studio-left-rail > *,
.studio-right-rail > * {
  transform: scale(0.92);
  transform-origin: top center;
}

/* 2) BLOC CENTRAL : un peu plus présent */
.studio-approved-layout,
.studio-main-panel,
.studio-center-panel,
.studio-approved-hero {
  max-width: 760px !important;
}

/* 3) TITRE CENTRAL : plus gros et surtout moins pâle */
.studio-approved-layout h1,
.studio-main-panel h1,
.studio-center-panel h1,
.studio-approved-hero h1,
.studio-hero-title,
.studio-title {
  color: #b07a84 !important;
  opacity: 1 !important;
  font-size: clamp(44px, 4.8vw, 78px) !important;
  line-height: 1.06 !important;
  font-weight: 500 !important;
  text-align: center;
  text-shadow: none !important;
}

/* petits motifs / coeur au-dessus */
.studio-approved-layout .studio-ornament,
.studio-main-panel .studio-ornament,
.studio-center-panel .studio-ornament,
.studio-approved-hero .studio-ornament {
  opacity: 1 !important;
  color: #d8a4ad !important;
}

/* texte sous le titre : un peu plus lisible */
.studio-approved-layout .studio-intro,
.studio-main-panel .studio-intro,
.studio-center-panel .studio-intro,
.studio-approved-hero .studio-intro,
.studio-approved-layout p,
.studio-main-panel p,
.studio-center-panel p {
  color: #8a766f !important;
  opacity: 1 !important;
}

/* si un voile blanc rend le centre trop délavé */
.studio-approved-layout::before,
.studio-main-panel::before,
.studio-center-panel::before,
.studio-approved-hero::before {
  opacity: 0.18 !important;
}

/* sur grands écrans : on respire un peu mieux */
@media (min-width: 1400px) {
  .studio-rail,
  .studio-side-rail,
  .studio-left-rail,
  .studio-right-rail {
    width: 360px !important;
    max-width: 360px !important;
  }

  .studio-approved-layout,
  .studio-main-panel,
  .studio-center-panel,
  .studio-approved-hero {
    max-width: 800px !important;
  }
}

/* sur écrans un peu plus serrés : rails légèrement plus petits */
@media (max-width: 1360px) {
  .studio-rail,
  .studio-side-rail,
  .studio-left-rail,
  .studio-right-rail {
    width: 300px !important;
    max-width: 300px !important;
  }

  .studio-rail > *,
  .studio-side-rail > *,
  .studio-left-rail > *,
  .studio-right-rail > * {
    transform: scale(0.88);
  }
}

/* correctif supplémentaire si les rails utilisent background-image */
.studio-rail,
.studio-side-rail,
.studio-left-rail,
.studio-right-rail {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
}

/* ==========================================================
   HEADER MAÎTRE — L'ATELIER D'INGRID
   ========================================================== */

#atelier-master-header{
  position:sticky;
  top:0;
  z-index:9000;

  background:#fffaf5;

  border-bottom:1px solid #e5d5c8;
}


.atelier-master-top{
  height:42px;

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

  padding:0 clamp(35px,6vw,105px);

  background:#85866a;

  color:#fffaf5;

  font-family:Georgia,"Times New Roman",serif;
  font-size:13px;
}


.atelier-master-top-right{
  display:flex;
  align-items:center;
  gap:18px;
}


.atelier-master-top a{
  color:#fffaf5;
  text-decoration:none;
}


.atelier-master-nav{
  height:130px;

  display:grid;

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

  align-items:center;

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


.atelier-master-left,
.atelier-master-right{
  display:flex;
  align-items:center;

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


.atelier-master-left{
  justify-content:flex-end;
  padding-right:28px;
}


.atelier-master-right{
  justify-content:flex-start;
  padding-left:28px;
}


.atelier-master-nav a{
  color:#574842;

  text-decoration:none;

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

  font-size:16px;

  white-space:nowrap;
}


.atelier-master-nav a:hover,
.atelier-master-nav a.active{
  color:#b56d79;
}


.atelier-master-nav a.active{
  text-decoration:underline;
  text-decoration-color:#cf8992;
  text-underline-offset:8px;
}


/* Gros logo central */

.atelier-master-logo{
  width:420px;
  height:120px;

  display:flex;

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

  overflow:hidden;
}


.atelier-master-logo img{
  width:100%;
  height:100%;

  display:block;

  object-fit:contain;

  transform:scale(1.32);
}


/* Dropdowns */

.atelier-master-group{
  position:relative;

  display:flex;
  align-items:center;
  gap:3px;
}


.atelier-master-group > button{
  border:0;
  padding:3px;

  background:transparent;

  color:#65554e;

  cursor:pointer;
}


.atelier-master-dropdown{
  display:none;

  position:absolute;

  top:calc(100% + 15px);
  left:-12px;

  min-width:205px;

  padding:7px;

  background:#fffaf5;

  border:1px solid #e1d0c3;

  border-radius:9px;

  box-shadow:
    0 14px 30px rgba(72,50,41,.14);
}


.atelier-master-group.open
.atelier-master-dropdown{
  display:block;
}


.atelier-master-dropdown a{
  display:block;

  padding:9px 11px;

  border-radius:6px;

  font-size:13px;
}


.atelier-master-dropdown a:hover{
  background:#f3e7df;
}


.atelier-master-mobile{
  display:none;
}


/* Responsive */

@media(max-width:1050px){

  .atelier-master-nav{
    height:90px;

    grid-template-columns:1fr auto;
  }


  .atelier-master-logo{
    width:290px;
    height:80px;
  }


  .atelier-master-left,
  .atelier-master-right{
    display:none;
  }


  .atelier-master-mobile{
    display:block;

    justify-self:end;

    border:0;

    background:transparent;

    font-size:27px;

    cursor:pointer;
  }

}


@media(max-width:650px){

  .atelier-master-top{
    display:none;
  }

}