#wppc-customizer{
    display: flex; /* Active la disposition flexible */
    gap: 20px; /* Ajoute un espace entre les colonnes pour l'esthétique */
    /* Assure que le conteneur peut utiliser toute la largeur disponible */
    width: 100%; 
    box-sizing: border-box; /* Inclusion des marges/padding dans la largeur */

}
#wppc-root { display: flex; /* Active la disposition flexible */
    gap: 20px; /* Ajoute un espace entre les colonnes pour l'esthétique */
    /* Assure que le conteneur peut utiliser toute la largeur disponible */
    width: 100%; 
    box-sizing: border-box; /* Inclusion des marges/padding dans la largeur */
  }
.wppc-toolbar { width: 300px; 
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-right: 1px solid #2271b1;
 }
.wppc-gallery { margin-top: .5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.wppc-thumb { width: 80px; height: 80px; object-fit: cover; cursor: pointer; border: 1px solid #ddd; }
.wppc-canvas-wrap{
  position: relative;
  width: 100%;
  max-width: 1200px;        /* Taille max du canvas */
  margin: 0 auto;           /* Centrer le canvas */
  overflow: hidden;
  box-sizing: border-box;
}
#wppc-canvas{
  display: block;
  max-width: 100%;
  height: auto;             /* Maintient le ratio */
}
.wppc-controls{
    width:100%;
    line-height: 30px;
}
.wppc-controls button.button{
    margin:10px auto;
    display: inline;
}
.wppc-typo-controls { width:100%;display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-right:.5rem; }
.wppc-typo-controls select,
.wppc-typo-controls input[type="number"],
.wppc-typo-controls input[type="color"] { min-height:32px; }
.wppc-typo-controls .button.is-active { outline:2px solid #2271b1; }
.wppc-typo-controls.is-disabled { opacity:.6; pointer-events:none; }

/* --- Conteneur des contrôles pour une meilleure gestion de l'alignement --- */
.wppc-typo-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur mobile */
    gap: 10px; /* Espace entre les boutons et les contrôles */
    padding-bottom: 15px; /* Sépare les contrôles du canvas */
}



/* --- Bouton d'action principale (Ajouter Texte / Sauvegarder) --- */
.wppc-add-text,
.wppc-add-image {
    background-color: #38a169; /* Vert apaisant */
    color: #ffffff;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
#texte-utilisateur{
    width:100%;
    margin:3px auto;
}
.wppc-add-text:hover,
.wppc-add-image:hover {
    background-color: #2f855a;
    box-shadow: 0 5px 10px rgba(50, 50, 93, 0.15), 0 3px 6px rgba(0, 0, 0, 0.12);
}

/* --- Bouton de suppression (Rouge) --- */
.wppc-delete {
    background-color: #e53e3e; /* Rouge pour une action destructive */
    color: #ffffff;
}

.wppc-delete:hover {
    background-color: #c53030;
}

/* --- Bouton final (Utiliser cette personnalisation / Sauvegarder) --- */
.wppc-save {
    background-color: #3182ce; /* Bleu vif pour la confirmation finale */
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}

.wppc-save:hover {
    background-color: #2c5282;
}

/* --- Boutons d'état (Gras/Italique) --- */
.wppc-bold,
.wppc-italic {
    padding: 2px 12px;
}

.wppc-bold.is-active,
.wppc-italic.is-active {
    
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}