/* ===========================
   Thème & variables globales
   =========================== */
:root{
  --bg: #ffffff;
  --surface: #f7f9fb;
  --primary: #2d89ef;
  --primary-600: #1b5fb4;
  --accent: #891d1d;
  --success: #28a745;
  --muted: #6b7280;
  --border: #e6e9ee;
  --shadow-sm: 0 6px 18px rgba(16,24,40,0.08);
  --shadow-md: 0 10px 30px rgba(16,24,40,0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --touch-size: 48px; /* taille min pour cibles tactiles */
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Reset minimal */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font);background:var(--surface);color:#0f172a; -webkit-font-smoothing:antialiased;}


#mp-generator-wrapper {
    background-color: #e7e7e7; /* Couleur de fond */
    /* background-image: url('chemin/vers/image.jpg');  si tu veux une image */
}

/* ================================
   Inputs & boutons (réactifs/tactiles)
   ================================ */
#mp-generator-wrapper input,
#mp-generator-wrapper textarea,
#mp-generator-wrapper select {
  font-family: var(--font);
  width: 100%;
  max-width: 480px;
  margin: 8px auto;
  padding: 14px 16px;
  font-size: 15px;
  color: #0f172a;
  background: linear-gradient(180deg, #fff, #fbfdff);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  outline: none;
}

/* focus */
#mp-generator-wrapper input:focus,
#mp-generator-wrapper textarea:focus,
#mp-generator-wrapper select:focus {
  border-color: rgba(45,137,239,0.9);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(45,137,239,0.12);
}

/* Boutons standard */
#mp-generator-wrapper button:not(.mppg-action-btn) {
  min-height: var(--touch-size);
  padding: 10px 18px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg,var(--primary),var(--primary-600));
  color: #fff;
  box-shadow: 0 8px 20px rgba(45,137,239,0.18), inset 0 -2px 0 rgba(0,0,0,0.06);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* hover / active */
#mp-generator-wrapper button:not(.mppg-action-btn):hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
#mp-generator-wrapper button:not(.mppg-action-btn):active { transform: translateY(0); opacity:.95; }

/* Ghost / secondary */
#mp-generator-wrapper button.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: #0f172a;
  box-shadow: none;
}

/* ================================
   Canvas global
   ================================ */
canvas {
  width: 100%;
  height: auto;
  touch-action: none;
  user-select: none;
  display: block;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  background: #fff;
}

/* mp-canvas (carte / surface) */
#mp-canvas {
  position: relative;
  margin: 12px auto;
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  padding: 8px;
  box-sizing: border-box;
  background: linear-gradient(180deg,#ffffff,#fcfeff);
}

/* upload bouton principal */
#mp-photo-upload {
  min-height: var(--touch-size);
  padding: 12px 16px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: transform .12s ease, box-shadow .12s;
}
#mp-photo-upload:active{transform:translateY(1px)}

/* ================================
   Upload & boutons secondaires
   ================================ */
.mp-upload-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
}

.mp-upload-label{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:#324154;
  box-shadow: 0 6px 16px rgba(50,65,84,0.12);
  transition: transform .12s ease, background .12s;
  outline:none;
}
.mp-upload-label:hover{ transform: translateY(-3px); background: #3f5568; }

.mp-upload-success { background: var(--success) !important; box-shadow: 0 8px 20px rgba(40,167,69,0.12); }

.mp-download-btn{
  padding:10px 16px;
  background: linear-gradient(180deg,var(--accent), #6f1212);
  color:#fff;
  border:none;
  border-radius:999px;
  cursor:pointer;
  font-size:14px;
  box-shadow: 0 8px 20px rgba(137,29,29,0.14);
}

/* ================================
   Champs title/subtitle & cadenas
   ================================ */
.mppg-field-row{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  margin-bottom:12px;
  width:100%;
}

#mp-title-input, #mp-subtitle-input{
  flex:1 1 auto;
  max-width:100%;
  border-radius:10px;
}

/* action buttons (cadenas etc.) */
.mppg-action-btn{
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:6px;
  border-radius:12px;
  transition: background .12s;
}
.mppg-action-btn:hover { background: rgba(0,0,0,0.05); transform: translateY(-2px); }

/* ================================
   Labels / hover ciblé
   ================================ */
label[for^="mp-photo-upload"]{
  transition: background .12s ease;
  border-radius:8px;
  padding:6px;
}
label[for^="mp-photo-upload"]:hover{ background:#891d1d; color:#fff !important; }

/* ================================
   Mobile App layout (version "app") 
   - bottom bar, floating action, safe-area
   ================================ */
.app-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:env(safe-area-inset-top,12px) 16px env(safe-area-inset-bottom,72px);
}

/* barre d'actions en bas */
.app-bottom-bar{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  height:64px;
  background: linear-gradient(180deg,#ffffff, #f6f9fc);
  border-radius: 999px;
  box-shadow: 0 18px 40px rgba(8,15,30,0.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 14px;
  z-index:1200;
  border:1px solid var(--border);
}

/* Floating action button (FAB) */
.app-fab{
  position:fixed;
  right:22px;
  bottom:86px;
  width:64px;
  height:64px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background: linear-gradient(180deg,var(--primary),var(--primary-600));
  color:#fff;
  box-shadow: 0 18px 40px rgba(45,137,239,0.18);
  border:none;
  cursor:pointer;
  z-index:1300;
}

/* ================================
   Desktop: grille à deux colonnes (conserve ta version)
   ================================ */
@media (min-width: 992px) {
  #mp-generator-wrapper{  
    display:grid;
    grid-template-columns: 560px minmax(360px, 1fr);
    gap:28px;
    align-items:start;
    text-align:left;
    padding:24px;
    max-width:1200px;
    margin:12px auto;
    background-color: #e7e7e7;  
  }

  /* Canvas dans colonne 1 */
  #mp-generator-wrapper > canvas,
  #mp-generator-wrapper > #mp-canvas {
    grid-column:1;
    width:100% !important;
    max-width:100% !important;
    height:auto;
    margin:0;
    display:block;
    box-sizing:border-box;
  }

  /* Contrôles dans colonne 2 */
  #mp-generator-wrapper > .mp-controls {
    grid-column:2;
    overflow-y:auto;
    max-height: calc(100vh - 120px);
    padding-left:12px;
    box-sizing:border-box;
    background:linear-gradient(180deg,rgba(255,255,255,0.7),transparent);
    border-radius:10px;
    padding:18px;
  }

  .mp-controls .mppg-field-row,
  .mp-controls .mp-upload-row,
  .mp-controls input,
  .mp-controls .mp-download-btn,
  .mp-controls hr{
    width:100%;
    max-width:100%;
    margin:8px 0;
    box-sizing:border-box;
  }

  .mp-controls .mppg-field-row{
    justify-content:flex-start;
    gap:12px;
  }
  .mp-controls .mppg-field-row input {
    flex: 1 1 auto;
    max-width: calc(100% - 64px);
  }
  .mp-controls .mppg-action-btn {
    flex: 0 0 48px;
    width:48px;
    height:48px;
  }

  .mp-controls hr{ border:none; border-top:1px solid #f0f2f5; margin:10px 0; }
}

/* ================================
   Small screens tweaks — mobile first polishing
   ================================ */
@media (max-width: 768px){
  #mp-canvas{ max-width: 98%; padding:10px; margin:8px auto; }
  #mp-generator-wrapper input,
  #mp-generator-wrapper button,
  #mp-generator-wrapper textarea { font-size:15px; padding:12px; }
  #mp-title-input, #mp-subtitle-input { max-width:100%; }
  .mppg-action-btn{ width:48px; flex:0 0 48px; }
  .mp-upload-label{ width:40px; height:40px; }
  .mp-download-btn{ padding:10px 14px; font-size:14px; border-radius:999px; max-width:50%;}
}

/* Extra small */
@media (max-width:420px){
  .mp-upload-label{ width:36px; height:36px; }
  .mp-download-btn{ padding:8px 12px; font-size:13px; max-width:50%; }
  .app-bottom-bar{ height:68px; padding:8px; bottom:8px; left:8px; right:8px; }
  .app-fab{ right:16px; bottom:78px; width:56px; height:56px; }
}

/* ================================
   Utility / accessibility
   ================================ */
.visually-hidden{ position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px;}
.small { font-size:13px; color:var(--muted); }
.center { text-align:center; }