/* =========================================================
   L'ATELIER D'INGRID — ESPACE CLIENT V1
   ========================================================= */

:root{
  --ingrid-bg:#fbf7f1;
  --ingrid-paper:#fffdf9;
  --ingrid-cream:#f6eee5;
  --ingrid-border:#e6d8cc;

  --ingrid-rose:#b86d73;
  --ingrid-rose-soft:#f8e9e7;

  --ingrid-olive:#737855;
  --ingrid-olive-dark:#596041;
  --ingrid-olive-soft:#eef0e6;

  --ingrid-gold:#c5a369;

  --ingrid-text:#433a35;
  --ingrid-muted:#80736b;

  --ingrid-shadow:
    0 14px 40px rgba(74,55,44,.07);
}

body{
  background:
    radial-gradient(
      circle at 10% 5%,
      rgba(184,109,115,.06),
      transparent 28%
    ),
    var(--ingrid-bg);
}

.account-shell{
  width:min(1500px,96%);
  margin:28px auto 80px;
  color:var(--ingrid-text);
}


/* ---------------------------------------------------------
   TOP BAR
   --------------------------------------------------------- */

.account-top{
  background:rgba(255,253,249,.92);
  border:1px solid var(--ingrid-border);
  border-radius:18px;
  padding:10px 14px;
  margin-bottom:18px;
  box-shadow:0 8px 25px rgba(75,55,45,.04);
}

.account-back{
  color:var(--ingrid-text);
  text-decoration:none;
}

#account-logout-top{
  border-color:var(--ingrid-border);
}


/* ---------------------------------------------------------
   ESPACE PRINCIPAL
   --------------------------------------------------------- */

#account-space{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:20px;
  align-items:start;
  background:transparent;
  border:0;
  padding:0;
}

#account-space[hidden]{
  display:none;
}


/* ---------------------------------------------------------
   HERO CLIENT
   --------------------------------------------------------- */

.account-dashboard-hero{
  grid-column:1 / -1;
  min-height:190px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:30px;
  align-items:center;

  padding:30px 34px;
  margin-bottom:2px;

  background:
    linear-gradient(
      110deg,
      rgba(255,253,249,.98),
      rgba(250,238,235,.78)
    );

  border:1px solid var(--ingrid-border);
  border-radius:24px;

  box-shadow:var(--ingrid-shadow);

  position:relative;
  overflow:hidden;
}

.account-dashboard-hero::after{
  content:"";
  position:absolute;
  width:270px;
  height:270px;
  right:-80px;
  bottom:-120px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(184,109,115,.13),
      transparent 68%
    );
}

.account-dashboard-eyebrow{
  font-size:12px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ingrid-olive);
  font-weight:700;
  margin-bottom:8px;
}

.account-dashboard-title{
  font-family:Georgia,"Times New Roman",serif;
  font-size:36px;
  line-height:1.08;
  margin:0;
  font-weight:500;
}

.account-dashboard-title span{
  color:var(--ingrid-rose);
}

.account-dashboard-subtitle{
  max-width:650px;
  margin:12px 0 0;
  line-height:1.7;
  color:var(--ingrid-muted);
}

.account-dashboard-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}

.account-dashboard-actions .btn{
  border-radius:11px;
}

.account-dashboard-note{
  position:relative;
  z-index:1;
  padding:20px;
  text-align:center;
  background:rgba(255,253,249,.86);
  border:1px dashed #d8bfb0;
  border-radius:16px;
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.6;
}

.account-dashboard-note strong{
  display:block;
  color:var(--ingrid-rose);
  margin-bottom:7px;
}


/* ---------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------- */

.account-tabs{
  grid-column:1;
  position:sticky;
  top:20px;

  display:flex;
  flex-direction:column;
  gap:4px;

  margin:0;
  padding:14px;

  background:var(--ingrid-paper);
  border:1px solid var(--ingrid-border);
  border-radius:20px;

  box-shadow:var(--ingrid-shadow);
}

.account-tab{
  width:100%;
  border:0;
  background:transparent;
  color:var(--ingrid-text);

  border-radius:11px;
  padding:12px 13px;

  display:flex;
  align-items:center;
  gap:10px;

  text-align:left;
  font-size:14px;
  cursor:pointer;

  transition:
    background .18s ease,
    transform .18s ease,
    color .18s ease;
}

.account-tab:hover{
  background:#faf2eb;
  transform:translateX(2px);
}

.account-tab.active{
  background:var(--ingrid-olive-soft);
  color:var(--ingrid-olive-dark);
  font-weight:700;
}

.account-tab-separator{
  height:1px;
  background:var(--ingrid-border);
  margin:8px 5px;
}


/* ---------------------------------------------------------
   SECTIONS
   --------------------------------------------------------- */

.account-section{
  grid-column:2;
  min-width:0;
  margin:0;
}

.account-section.active{
  display:block;
}

.account-card{
  background:var(--ingrid-paper);
  border:1px solid var(--ingrid-border);
  border-radius:20px;
  padding:24px;
  box-shadow:var(--ingrid-shadow);
}


/* ---------------------------------------------------------
   DASHBOARD
   --------------------------------------------------------- */

.account-dashboard{
  display:grid;
  gap:18px;
}

.account-dashboard-stats{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(160px,1fr));
  gap:14px;
}

.account-stat-card{
  min-height:140px;
  padding:18px;

  background:var(--ingrid-paper);
  border:1px solid var(--ingrid-border);
  border-radius:18px;

  box-shadow:0 8px 25px rgba(75,55,45,.04);
}

.account-stat-icon{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  background:var(--ingrid-cream);
  font-size:19px;
}

.account-stat-label{
  font-size:12px;
  color:var(--ingrid-muted);
  margin-bottom:6px;
}

.account-stat-value{
  font-family:Georgia,"Times New Roman",serif;
  font-size:28px;
  line-height:1;
}

.account-stat-help{
  font-size:12px;
  color:var(--ingrid-muted);
  margin-top:10px;
  line-height:1.5;
}

.account-dashboard-grid{
  display:grid;
  grid-template-columns:
    minmax(0,1.55fr)
    minmax(280px,.8fr);
  gap:18px;
}

.account-dashboard-panel{
  background:var(--ingrid-paper);
  border:1px solid var(--ingrid-border);
  border-radius:20px;
  padding:22px;
  box-shadow:var(--ingrid-shadow);
}

.account-dashboard-panel h2{
  font-family:Georgia,"Times New Roman",serif;
  margin:0 0 16px;
  font-size:22px;
  font-weight:500;
}

.account-dashboard-empty{
  padding:28px 18px;
  border-radius:15px;
  background:var(--ingrid-cream);
  color:var(--ingrid-muted);
  text-align:center;
}

.account-idea-box{
  background:
    linear-gradient(
      135deg,
      var(--ingrid-rose-soft),
      #fffaf7
    );
}

.account-idea-input{
  width:100%;
  min-height:82px;
  resize:vertical;
  box-sizing:border-box;

  background:white;
  border:1px solid var(--ingrid-border);
  border-radius:12px;

  padding:12px;
  margin-top:8px;

  font:inherit;
  color:var(--ingrid-text);
}


/* ---------------------------------------------------------
   CREATIONS — APERCUS PROTEGES
   --------------------------------------------------------- */

#account-projects img{
  user-select:none;
  -webkit-user-drag:none;
}

.account-protected-preview{
  position:relative;
  overflow:hidden;
}

.account-protected-preview::after{
  content:"APERÇU · L’ATELIER D’INGRID";
  position:absolute;
  inset:0;

  display:grid;
  place-items:center;

  font-size:13px;
  letter-spacing:.12em;
  font-weight:700;
  color:rgba(90,74,64,.30);

  transform:rotate(-16deg);

  pointer-events:none;
}

.account-protected-preview img{
  max-height:250px;
}


/* ---------------------------------------------------------
   FORMULAIRES
   --------------------------------------------------------- */

.account-field input,
.account-field textarea,
.account-field select{
  border-radius:10px;
  border:1px solid var(--ingrid-border);
  background:#fff;
}

.account-grid{
  gap:18px;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:1050px){

  #account-space{
    grid-template-columns:1fr;
  }

  .account-dashboard-hero,
  .account-tabs,
  .account-section{
    grid-column:1;
  }

  .account-tabs{
    position:static;
    flex-direction:row;
    overflow:auto;
  }

  .account-tab{
    width:auto;
    min-width:max-content;
  }

  .account-dashboard-stats{
    grid-template-columns:
      repeat(2,minmax(140px,1fr));
  }

  .account-dashboard-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:650px){

  .account-shell{
    width:94%;
    margin-top:16px;
  }

  .account-dashboard-hero{
    grid-template-columns:1fr;
    padding:22px;
  }

  .account-dashboard-note{
    display:none;
  }

  .account-dashboard-title{
    font-size:29px;
  }

  .account-dashboard-stats{
    grid-template-columns:1fr 1fr;
  }
}


/* MES CREATIONS — CARTE FINALE V3 */

.account-creation-embroidery{
 position:relative;
 overflow:hidden;
 border-radius:16px;
 background:#f5ede4;
 cursor:zoom-in;
}

.account-creation-embroidery img{
 display:block;
 width:100%;
 height:275px;
 object-fit:contain;
 transition:
  transform .32s ease,
  filter .32s ease;
}

.account-creation-embroidery::after{
 content:"Cliquer pour agrandir";
 position:absolute;
 right:10px;
 bottom:10px;
 padding:6px 9px;
 border-radius:999px;
 background:rgba(255,250,245,.88);
 color:#715e57;
 font-size:10px;
 opacity:0;
 transform:translateY(4px);
 transition:
  opacity .25s ease,
  transform .25s ease;
 pointer-events:none;
}

@media (hover:hover){

 .account-creation-embroidery:hover img{
  transform:scale(1.075);
 }

 .account-creation-embroidery:hover::after{
  opacity:1;
  transform:translateY(0);
 }

}


.account-creation-transfer{
 width:82%;
 max-width:255px;
 margin:16px auto 0;
 border:1px solid var(--ingrid-border);
 border-radius:15px;
 overflow:hidden;
 background:#faf5ef;
}

.account-creation-transfer img{
 display:block;
 width:100%;
 height:190px;
 object-fit:contain;
 background:#f6efe8;
}

.account-creation-transfer-title{
 padding:8px 12px;
 text-align:center;
 font-size:12px;
 font-weight:700;
 color:var(--ingrid-muted);
 background:#fffaf5;
}


.account-creation-actions{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:9px;
 margin-top:16px;
}


@media(max-width:650px){

 .account-creation-embroidery img{
  height:245px;
 }

 .account-creation-transfer{
  width:88%;
 }

 .account-creation-transfer img{
  height:170px;
 }

}