:root{
  --bg-main:#eef5d6;
  --bg-panel:#ffffff;
  --text-main:#2b2b2b;
  --text-muted:#7a7a7a;
  --accent-wood:#8b6a45;
  --accent-dark:#5e442c;
  --line-soft:rgba(0,0,0,0.08);
  --shadow-soft:0 18px 50px rgba(0,0,0,0.06);
  --radius:18px;
}

*{box-sizing:border-box}

html, body{
  height:100%;
  /* overflow:hidden uniquement si le contenu tient dans la fenêtre.
     Elementor gère son propre scroll — on ne bloque pas. */
  overflow:auto;
}

body{
  margin:0;
  background:var(--bg-main);
  color:var(--text-main);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* ===== BUREAU ===== */
/* --nav-h : hauteur de la barre de navigation WordPress au-dessus du configurateur.
   Ajustez cette valeur si votre thème a une nav plus haute ou plus basse. */
:root{ --nav-h: 120px; }

.wrapper{
  max-width:1200px;
  /* Bureau : hauteur fixe pour remplir la fenêtre */
  height:calc(100vh - var(--nav-h));
  margin:0 auto;
  padding:20px;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:24px;
  align-items:stretch;
}

.stage{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.98));
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(0,0,0,0.05);
  display:flex;
  flex-direction:column;
  justify-content:center;  /* centre le canvas verticalement quand il est petit */
}

/* flex:1 = le container s'étire pour remplir toute la hauteur du .stage */
#container{
  width:100%;
  max-width:100%;
  flex:1;
  border-radius:14px;
  overflow:hidden;
}

/* Note absolue en bas à gauche, ne perturbe pas le layout */
.engraving-note{
  position:absolute;
  bottom:18px;
  left:18px;
  max-width:340px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(4px);
  font-size:0.75rem;
  line-height:1.45;
  color:rgba(43,43,43,0.85);
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}
.engraving-note strong{
  display:block;
  font-weight:600;
  margin-bottom:4px;
}

.panel{
  background:var(--bg-panel);
  border-radius:var(--radius);
  padding:26px 24px;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(0,0,0,0.05);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.15) transparent;
}
.panel::-webkit-scrollbar{ width:5px; }
.panel::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:999px; }

.panelTitle{
  font-family:"Playfair Display",serif;
  font-weight:600;
  font-size:1.45rem;
  margin:6px 0 16px;
}

label{
  font-size:0.78rem;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--text-muted);
  display:block;
  margin-top:14px;
}

input,select{
  width:100%;
  margin-top:6px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line-soft);
  background:#fff;
  color:var(--text-main);
  font-size:1rem;
}

.notice{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  background:#faf8f5;
  border-left:3px solid var(--accent-wood);
  font-size:0.85rem;
}

.hr{
  height:1px;
  background:var(--line-soft);
  margin:16px 0;
}

button{
  width:100%;
  margin-top:10px;
  padding:11px 16px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:600;
  font-size:0.95rem;
  background:var(--accent-dark);
  color:#fff;
}
button.secondary{
  background:transparent;
  border:1px solid var(--line-soft);
  color:var(--text-main);
}

.rowBtns{ display:flex; gap:10px; margin-top:6px; }
.muted{ margin-top:8px; font-size:0.78rem; color:var(--text-muted); }
#downloadFinal, #downloadPattern{ display:none !important; }



/* mob-toolbar masqué sur bureau, mob-row se comporte comme un bloc normal */
.mob-toolbar{ display:none; }
.mob-row{ display:block; }
.mob-row > div + div { margin-top:0; }


/* ===== ACCORDÉON notice & engraving-note ===== */
details.notice,
details.engraving-note{
  cursor:default;
}
details.notice > summary,
details.engraving-note > summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:6px;
  user-select:none;
}
details.notice > summary::-webkit-details-marker,
details.engraving-note > summary::-webkit-details-marker{ display:none; }

.notice-hint{
  font-size:0.75rem;
  color:var(--accent-wood);
  margin-left:auto;
  opacity:0.7;
}
details[open] .notice-hint{ opacity:0; }

details.notice p,
details.engraving-note p{
  margin:8px 0 0;
  line-height:1.5;
}

/* ===== LIGNE Ajouter + Effacer ===== */
.row-action{
  display:flex;
  gap:8px;
  margin-top:10px;
  align-items:center;
}
.row-action #addText{
  flex:1;
  margin:0;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.row-action #reset{
  flex:none;
  margin:0;
  padding:11px 18px;
  white-space:nowrap;
  width:auto;
  font-size:0.88rem;
}
button.small{
  font-size:0.85rem;
  padding:10px 14px;
}

/* ===== CONTRÔLE TAILLE +/- ===== */
/* Desktop : input classique visible, mobile masqué */
.fontSize-desktop{ display:block; }
.fontSize-mobile{ display:none !important; }

.size-ctrl{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
}
.size-ctrl input{
  flex:1;
  margin:0;
  text-align:center;
  min-width:0;
}
.size-btn{
  flex:none;
  width:36px;
  height:36px;
  padding:0 !important;
  font-size:1.2rem;
  line-height:1;
  border-radius:10px;
  margin:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===== TABLETTE (≤ 1024px) ===== */
@media (max-width:1024px){
  html, body{ height:auto; overflow:auto; }

  .wrapper{
    height:auto;
    grid-template-columns:1fr;
    gap:16px;
    padding:14px;
    max-width:100%;
    width:100%;
  }

  .stage, .panel{ padding:16px; }

  #container{ width:100%; overflow:hidden; flex:none; }

  .engraving-note{
    left:12px; bottom:12px; max-width:240px;
    font-size:0.72rem; padding:10px 12px;
  }

  .panel{ overflow-y:visible; }
}


/* ===== ÉCRASE ELEMENTOR SUR MOBILE ===== */
@media (max-width:768px){
  /* Elementor impose souvent min-height sur ses conteneurs */
  .elementor-widget-html,
  .elementor-widget-container,
  .elementor-widget,
  .elementor-element,
  .e-con,
  .e-con-inner,
  .elementor-section,
  .elementor-container,
  .elementor-row,
  .elementor-column,
  .elementor-column-wrap,
  .elementor-widget-wrap{
    min-height:0 !important;
    height:auto !important;
  }
}

/* ===== SMARTPHONE (≤ 768px) ===== */
@media (max-width:768px){
  html, body{
    height:auto !important;
    min-height:0 !important;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .wrapper{
    display:flex;
    flex-direction:column;
    height:auto !important;
    min-height:0 !important;
    padding:10px;
    gap:10px;
    margin:0;
    max-width:100%;
    width:100%;
    align-self:flex-start;
    padding-bottom:20px;
  }

  /* --- Zone canvas --- */
  .stage{
    padding:10px;
    border-radius:16px;
    flex-shrink:0;
    /* flex pour centrer le canvas horizontalement et coller à sa hauteur */
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    overflow:hidden;
    height:auto !important;
    min-height:unset !important;
  }
  #container{
    overflow:hidden;
    border-radius:10px;
    flex-shrink:0;
    max-height:360px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
  }
  .engraving-note{
    position:relative;
    bottom:auto; left:auto;
    max-width:100%;
    margin-top:8px;
    font-size:0.7rem;
    padding:8px 10px;
  }

  /* --- Panel compact --- */
  .panel{
    padding:14px;
    border-radius:16px;
    overflow:visible;
    max-height:none;
  }

  .panelTitle{
    font-size:1rem;
    margin:0 0 10px;
  }

  label{
    font-size:0.68rem;
    letter-spacing:0.07em;
    margin-top:10px;
    margin-bottom:0;
  }

  input[type="text"],
  select{
    padding:10px 12px;
    font-size:15px;
    border-radius:10px;
    margin-top:4px;
    -webkit-appearance:none;
    appearance:none;
  }
  input[type="number"]{
    padding:10px 12px;
    font-size:15px;
    border-radius:10px;
    margin-top:4px;
  }

  input[type="file"]{
    padding:8px 10px;
    font-size:13px;
    margin-top:4px;
  }

  .notice{
    margin-top:8px;
    padding:8px 10px;
    font-size:0.78rem;
    border-radius:10px;
  }

  .hr{ margin:10px 0; }

  /* Accordéons plus compacts sur mobile */
  details.notice > summary,
  details.engraving-note > summary{
    font-size:0.8rem;
    padding:2px 0;
  }
  details.notice p,
  details.engraving-note p{
    font-size:0.78rem;
    margin-top:6px;
  }

  /* Ligne Ajouter + Effacer */
  .row-action{ margin-top:8px; gap:6px; flex-wrap:nowrap; align-items:stretch; }
  .row-action #addText{ font-size:0.88rem; padding:12px 8px; flex:1; min-width:0; }
  .row-action #reset{
    font-size:0.78rem;
    padding:12px 10px;
    flex:none;
    width:auto;
    white-space:nowrap;
    min-width:72px;
  }

  /* === Police + Taille sur une ligne === */
  .mob-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    align-items:end;
    margin-top:4px;
  }
  .mob-row > div{ display:flex; flex-direction:column; }
  .mob-row label{ margin-top:0; }
  .mob-row select,
  .mob-row input{ margin-top:4px; }

  /* Mobile : masquer input desktop, afficher +/- */
  .fontSize-desktop{ display:none !important; }
  .fontSize-mobile{
    display:flex !important;
    align-items:center;
    gap:4px;
    margin-top:4px;
    width:100%;
  }
  .fontSize-mobile .fs-val{
    flex:1;
    text-align:center;
    font-size:1rem;
    font-weight:600;
    color:var(--text);
    display:block;
    line-height:36px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:10px;
    min-width:44px;
  }
  .fs-btn{
    display:flex !important;
    align-items:center;
    justify-content:center;
    padding:0 !important;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    flex-shrink:0;
    font-size:1.2rem !important;
    line-height:1 !important;
  }

  /* === Toolbar Style + Alignement sur une ligne === */
  .mob-toolbar{
    display:flex;
    gap:5px;
    margin-top:8px;
    align-items:stretch;
  }
  .mob-toolbar-sep{
    width:1px;
    background:var(--line-soft);
    margin:0 3px;
    flex-shrink:0;
  }
  .mob-toolbar button{
    flex:1;
    width:auto;
    margin:0;
    padding:10px 4px;
    border-radius:10px;
    font-size:1rem;
    font-weight:400;
    font-family:inherit;
    min-width:0;
    white-space:nowrap;
    line-height:1;
    text-align:center;
  }

  /* Cacher les rowBtns originaux sur mobile (remplacés par mob-toolbar) */
  .rowBtns{ display:none; }
  /* Masquer le label Style & Alignement sur mobile (la toolbar suffit) */
  .label-style-align{ display:none; }

  /* Boutons principaux */
  #addText, #addToCart{
    padding:13px 14px;
    font-size:0.95rem;
    margin-top:10px;
  }
  #reset{
    padding:10px 14px;
    font-size:0.85rem;
    margin-top:6px;
  }

  button{
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }

  /* Colonne taille s'adapte à son contenu */
  .mob-row{ grid-template-columns:1fr auto; }

}

/* ===== SMARTPHONE ÉTROIT (≤ 480px) ===== */
@media (max-width:480px){
  .wrapper{ padding:8px; gap:8px; }
  .stage{ padding:10px; }
  .panel{ padding:12px; border-radius:14px; }
}