/* =============================== */
/*            BUTTONS              */
/* =============================== */

/* Boutons principaux */
.btn-primary,
.button-wide {
    width: 100%;
    background: #0070ba;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 15px;
    margin-top: 8px;
    transition: background 0.2s ease;
}

.btn-primary:hover,
.button-wide:hover {
    background: #005a96;
}

/* Bouton secondaire */
.btn-secondary {
    background: #ddd;
    color: #222;
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    transition: background 0.2s ease;
}

.btn-secondary:hover {
    background: #c9c9c9;
}

/* Bouton animaux */
.btn-animaux {
    width: 100%;
    background: #ff9800;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 16px;
    margin: 8px 0 16px 0;
    transition: background 0.2s ease;
}

.btn-animaux:hover {
    background: #e68900;
}

/* Boutons matière animaux */
.btn-matiere {
    flex: 1;
    background: #e0e0e0;
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-size: 15px;
    transition: background 0.2s ease;
}

.btn-matiere:hover {
    background: #d5d5d5;
}

/* Bouton Ajouter un texte */
#addTextBtn.button-wide {
    background: #0070ba;
    color: #fff;
}

/* =============================== */
/*   BOUTONS MODE DE PERSONNALISATION   */
/* =============================== */

.mode-toggle {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.mode-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: 0.2s ease;
    color: #fff;
}

/* Création libre */
#modeLibre {
    background: #28a745;
}

#modeLibre:hover {
    background: #1e7e34;
}

#modeLibre.active {
    background: #155d27;
}

/* Modèles prédéfinis */
#modeTemplate {
    background: #0070ba;
}

#modeTemplate:hover {
    background: #005a96;
}

#modeTemplate.active {
    background: #003f6b;
}

/* =============================== */
/*   BOUTON PANIER DÉSACTIVÉ       */
/* =============================== */

.btn-disabled,
.add-to-cart-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* =============================== */
/*   BOUTON CHOIX TAILLE       */
/* =============================== */
.size-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.size-btn {
    padding: 6px 12px;
    border: 1px solid #999;
    border-radius: 6px;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
}

.size-btn:hover {
    background: #e0e0e0;
}

.size-btn.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}
/* =============================== */
/*   BOUTON RECTO / VERSO      */
/* =============================== */
.switch-container {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

/* Style général des boutons */
.switch-container button {
    padding: 8px 16px;
    border: 1px solid #888;
    border-radius: 6px;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
}

/* Hover */
.switch-container button:hover {
    background: #e0e0e0;
}

/* Bouton actif (Recto ou Verso sélectionné) */
.switch-container button.active {
    background: #28a745;      /* Vert */
    border-color: #28a745;
    color: white;
    font-weight: bold;
}
/* =============================== */
/*   BOUTONS CHOIX COULEUR         */
/* =============================== */

.color-options {
    display: flex;
    gap: 20px;                 /* ESPACEMENT ENTRE LES BOUTONS */
    flex-wrap: wrap;
    margin-top: 18px;          /* ESPACEMENT AVEC LE BOUTON TAILLE */
    margin-bottom: 6px;
}

/* Bouton couleur (rond) */
.color-btn {
    width: 50px;               /* PLUS GROS */
    height: 50px;
    border-radius: 50%;
    border: 3px solid #d0d0d0;
    cursor: pointer;
    transition: 0.2s ease;
    box-sizing: border-box;
}

/* Hover */
.color-btn:hover {
    transform: scale(1.12);
    border-color: #999;
}

/* Sélectionné — garde la couleur visible */
.color-btn.selected {
    border-color: #0070ba;     /* ton bleu principal */
    box-shadow: 0 0 0 3px #0070ba inset;
}