/* --- MOTIFS GÉNÉRATIFS COMMUNS --- */

/* 🌊 ONDE (Bleu) */
.onde-1 { background: repeating-linear-gradient(45deg, #0d2b42, #0d2b42 10px, #3498db 10px, #3498db 20px); }
.onde-2 { background: repeating-radial-gradient(circle, #0d2b42, #0d2b42 8px, #3498db 8px, #3498db 16px); }
.onde-3 { background: conic-gradient(#0d2b42 25%, #3498db 25%, #3498db 50%, #0d2b42 50%, #0d2b42 75%, #3498db 75%); }
.onde-4 { background: repeating-conic-gradient(#0d2b42 0 15deg, #3498db 15deg 30deg); }
.onde-5 { background: linear-gradient(90deg, #0d2b42 50%, transparent 50%), linear-gradient(#0d2b42 50%, #3498db 50%); background-size: 20px 20px; }
.onde-6 { background: repeating-linear-gradient(0deg, #0d2b42, #0d2b42 8px, #3498db 8px, #3498db 16px); }
.onde-7 { background: repeating-linear-gradient(90deg, #0d2b42, #0d2b42 8px, #3498db 8px, #3498db 16px); }
.onde-8 { background: linear-gradient(135deg, #0d2b42 50%, #3498db 50%); }
.onde-9 { background-color: #3498db; background-image: radial-gradient(#0d2b42 4px, transparent 4px); background-size: 15px 15px; }
.onde-10 { background: repeating-linear-gradient(-45deg, #0d2b42, #0d2b42 4px, #3498db 4px, #3498db 25px); }

/* 💥 ÉCLAT (Orange) */
.eclat-1 { background: conic-gradient(from 45deg, #e67e22, #f39c12, #e74c3c); }
.eclat-2 { background: repeating-conic-gradient(#e67e22 0 15deg, #e74c3c 15deg 30deg); }
.eclat-3 { background: repeating-linear-gradient(-45deg, #e67e22, #e67e22 10px, #e74c3c 10px, #e74c3c 20px); }
.eclat-4 { background: linear-gradient(135deg, #f39c12 50%, #e74c3c 50%); }
.eclat-5 { background: repeating-radial-gradient(circle at 50% 50%, #e74c3c, #e74c3c 10px, #f39c12 10px, #f39c12 20px); }
.eclat-6 { background: repeating-linear-gradient(90deg, #e67e22, #e67e22 5px, #e74c3c 5px, #e74c3c 20px); }
.eclat-7 { background: repeating-radial-gradient(circle at 0 0, #e67e22, #e67e22 15px, #e74c3c 15px, #e74c3c 30px); }
.eclat-8 { background: conic-gradient(from 0deg, #e67e22 25%, #e74c3c 25%, #e74c3c 50%, #e67e22 50%, #e67e22 75%, #e74c3c 75%); }
.eclat-9 { background: linear-gradient(to right, #f39c12 33%, #e67e22 33%, #e67e22 66%, #e74c3c 66%); }
.eclat-10 { background: repeating-linear-gradient(0deg, #e67e22, #e67e22 12px, #f39c12 12px, #f39c12 24px); }

/* 🧱 STRUCTURE (Vert) */
.structure-1 { background: repeating-linear-gradient(45deg, #145a32, #145a32 10px, #27ae60 10px, #27ae60 20px); }
.structure-2 { background-color: #145a32; background-image: linear-gradient(90deg, #27ae60 2px, transparent 2px), linear-gradient(0deg, #27ae60 2px, transparent 2px); background-size: 15px 15px; }
.structure-3 { background: conic-gradient(at 50% 50%, #145a32 25%, #27ae60 25%, #27ae60 50%, #145a32 50%, #145a32 75%, #27ae60 75%); }
.structure-4 { background: repeating-linear-gradient(0deg, #145a32, #145a32 15px, #2ecc71 15px, #2ecc71 20px); }
.structure-5 { background: linear-gradient(135deg, #145a32 25%, #27ae60 25%, #27ae60 50%, #145a32 50%, #145a32 75%, #27ae60 75%, #27ae60 100%); background-size: 20px 20px; }
.structure-6 { background-color: #27ae60; background-image: linear-gradient(45deg, #145a32 25%, transparent 25%, transparent 75%, #145a32 75%, #145a32), linear-gradient(45deg, #145a32 25%, transparent 25%, transparent 75%, #145a32 75%, #145a32); background-size: 20px 20px; background-position: 0 0, 10px 10px; }
.structure-7 { background: repeating-radial-gradient(circle, #145a32, #145a32 5px, #27ae60 5px, #27ae60 10px); }
.structure-8 { background-image: linear-gradient(90deg, #145a32 50%, transparent 50%), linear-gradient(0deg, #145a32 50%, #27ae60 50%); background-size: 10px 10px; }
.structure-9 { background: repeating-linear-gradient(135deg, #145a32, #145a32 4px, #27ae60 4px, #27ae60 12px); }
.structure-10 { background: linear-gradient(90deg, #145a32 20%, #27ae60 20%, #27ae60 80%, #145a32 80%); }

/* 🔗 LIEN (Violet) */
.lien-1 { background-color: #1a1a1a; background-image: radial-gradient(circle, #9b59b6 20%, transparent 20%), radial-gradient(circle, #8e44ad 20%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px; }
.lien-2 { background-color: #1a1a1a; background-image: radial-gradient(#9b59b6 2px, transparent 2px); background-size: 10px 10px; }
.lien-3 { background-color: #1a1a1a; background-image: linear-gradient(#8e44ad 1px, transparent 1px), linear-gradient(90deg, #8e44ad 1px, transparent 1px); background-size: 10px 10px; }
.lien-4 { background-color: #1a1a1a; background-image: repeating-linear-gradient(45deg, #8e44ad 0, #8e44ad 2px, transparent 2px, transparent 8px); }
.lien-5 { background-color: #1a1a1a; background-image: radial-gradient(#9b59b6 3px, transparent 3px), linear-gradient(0deg, #8e44ad 1px, transparent 1px), linear-gradient(90deg, #8e44ad 1px, transparent 1px); background-size: 20px 20px; background-position: 0 0, 10px 10px, 10px 10px; }
.lien-6 { background: repeating-linear-gradient(45deg, #1a1a1a, #1a1a1a 8px, #8e44ad 8px, #8e44ad 16px); }
.lien-7 { background: repeating-conic-gradient(#1a1a1a 0 9deg, #9b59b6 9deg 18deg); }
.lien-8 { background: repeating-radial-gradient(circle at 100% 100%, #1a1a1a, #1a1a1a 8px, #8e44ad 8px, #8e44ad 16px); }
.lien-9 { background: repeating-linear-gradient(90deg, #1a1a1a, #1a1a1a 2px, transparent 2px, transparent 15px), repeating-linear-gradient(0deg, #1a1a1a, #1a1a1a 2px, #9b59b6 2px, #9b59b6 15px); }
.lien-10 { background-color: #1a1a1a; background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, #9b59b6 5px, #9b59b6 7px); }

/* ❤️ CŒUR (Rouge - Passion) - VERSION CORRIGÉE */

/* Motif 1 : C'était le coupable ! (Aplat) -> Remplacé par des Rayures Lourdes */
.coeur-1 { 
    background: repeating-linear-gradient(
        45deg, 
        #c0392b, 
        #c0392b 10px, 
        #641e16 10px, 
        #641e16 20px
    ); 
}

/* Motif 2 : Cible */
.coeur-2 { background: repeating-radial-gradient(circle, #641e16, #641e16 10px, #c0392b 10px, #c0392b 20px); }

/* Motif 3 : Damier Conique */
.coeur-3 { background: conic-gradient(#641e16 25%, #c0392b 25%, #c0392b 50%, #641e16 50%, #641e16 75%, #c0392b 75%); }

/* Motif 4 : Rayures Fines */
.coeur-4 { background: repeating-linear-gradient(45deg, #641e16, #641e16 5px, #c0392b 5px, #c0392b 10px); }

/* Motif 5 : Losanges (Arlequin) - Sécurisé */
.coeur-5 { 
    background-color: #922b21;
    background-image: linear-gradient(45deg, #c0392b 25%, transparent 25%, transparent 75%, #c0392b 75%, #c0392b), 
                      linear-gradient(45deg, #c0392b 25%, transparent 25%, transparent 75%, #c0392b 75%, #c0392b);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
}

/* Motif 6 : Rayures Inversées Fortes (Simplifié pour être sûr qu'il s'affiche) */
.coeur-6 { 
    background: repeating-linear-gradient(135deg, #641e16, #641e16 10px, #c0392b 10px, #c0392b 20px); 
}

/* Motif 7 : Pois */
.coeur-7 { background-color: #c0392b; background-image: radial-gradient(#641e16 4px, transparent 4px); background-size: 15px 15px; }

/* Motif 8 : Rayures Fines Inversées */
.coeur-8 { background: repeating-linear-gradient(-45deg, #641e16, #641e16 5px, #c0392b 5px, #c0392b 15px); }

/* Motif 9 : Petits Pois */
.coeur-9 { background-color: #922b21; background-image: radial-gradient(#e74c3c 3px, transparent 3px); background-size: 15px 15px; }

/* Motif 10 : Écossais / Plaid */
.coeur-10 { background: repeating-linear-gradient(90deg, #641e16, #641e16 10px, transparent 10px, transparent 20px), repeating-linear-gradient(0deg, #c0392b, #c0392b 10px, #922b21 10px, #922b21 20px); }