<style>
/* Variables de couleurs pour chaque style */

/* --- 1. Style Moderne --- */
#style-1 {
--color-primary: #0066cc;
--color-secondary: #e8e8e8;
--color-accent: #ff6b35;
--color-text: #1a1a1a;
--color-background: #f5f5f5;
}

/* --- 2. Style Luxe --- */
#style-2 {
--color-primary: #1a1a1a;
--color-secondary: #e8e4e0;
--color-accent: #d4af37;
--color-text: #2a2a2a;
--color-background: #faf9f7;
}

/* --- 3. Style Professionnel --- */
#style-3 {
--color-primary: #003d99;
--color-secondary: #e8f1ff;
--color-accent: #006633;
--color-text: #0a0a0a;
--color-background: #f0f0f0;
}

/* --- 4. Style Créatif --- */
#style-4 {
--color-primary: #d32f2f;
--color-secondary: #f5e5e3;
--color-accent: #1976d2;
--color-text: #1a1a1a;
--color-background: #fff9f0;
}

/* --- 5. Style Raffiné --- */
#style-5 {
--color-primary: #2c3e50;
--color-secondary: #d4c5b9;
--color-accent: #8b7355;
--color-text: #333333;
--color-background: #ecf0f1;
}

/* --- 6. Style Amical --- */
#style-6 {
--color-primary: #6c5ce7;
--color-secondary: #d4f1d4;
--color-accent: #00b894;
--color-text: #2c3e50;
--color-background: #fcfcfc;
}

/* --- 7. Style Puissant --- */
#style-7 {
--color-primary: #000000;
--color-secondary: #4a4a4a;
--color-accent: #004e89;
--color-text: #1a1a1a;
--color-background: #f5f5f5;
}

/* --- 8. Style Vintage --- */
#style-8 {
--color-primary: #4a4a4a;
--color-secondary: #b8cfe0;
--color-accent: #8b6914;
--color-text: #3a3a3a;
--color-background: #f5ede0;
}

/* --- 1. Style Moderne --- */
#style-1 .preview-box { background-color: #f5f5f5; }
#style-1 h1, #style-1 h2, #style-1 h3, #style-1 h4, #style-1 h5, #style-1 h6 {
font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
font-weight: 700;
letter-spacing: -0.5px;
color: #1a1a1a;
}
#style-1 h1 { font-size: 48px; line-height: 1.2; }
#style-1 h2 { font-size: 36px; line-height: 1.25; }
#style-1 p, #style-1 li {
font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
font-size: 16px;
line-height: 1.65;
color: #333;
}
#style-1 .btn, #style-1 .tag, #style-1 label {
font-family: system-ui, sans-serif;
font-weight: 600;
font-size: 14px;
}
/* Couleurs de la palette appliquées */
#style-1 .btn { background-color: #0066cc; color: white; padding: 10px 15px; border: 2px solid #0066cc; border-radius: 5px; cursor: pointer; margin-right: 10px; }
#style-1 .btn-secondary { background-color: #e8e8e8; color: #0066cc; padding: 10px 15px; border: 2px solid #0066cc; border-radius: 5px; cursor: pointer; font-weight: 600; font-size: 14px; font-family: system-ui, sans-serif; }
#style-1 .tag { background-color: #ff6b35; color: white; padding: 5px 10px; border-radius: 5px; }

/* --- 2. Style Luxe --- */
#style-2 .preview-box { background-color: #faf9f7; }
#style-2 h1, #style-2 h2, #style-2 h3, #style-2 h4, #style-2 h5, #style-2 h6 {
font-family: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
font-weight: 400;
letter-spacing: 0.4px;
color: #2a2a2a;
font-style: normal;
}
#style-2 h1 { font-size: 56px; line-height: 1.1; font-weight: 400; text-align: center; }
#style-2 h2 { font-size: 40px; line-height: 1.2; }
#style-2 p, #style-2 li {
font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
font-size: 17px;
line-height: 1.8;
color: #3a3a3a;
letter-spacing: 0.2px;
}
#style-2 .btn, #style-2 .tag, #style-2 label {
font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
}
/* Couleurs de la palette appliquées */
#style-2 .btn { background-color: #1a1a1a; color: #faf9f7; padding: 12px 18px; border: 2px solid #1a1a1a; border-radius: 2px; cursor: pointer; margin-right: 10px; }
#style-2 .btn-secondary { background-color: #e8e4e0; color: #1a1a1a; padding: 12px 18px; border: 2px solid #1a1a1a; border-radius: 2px; cursor: pointer; font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif; font-weight: 700; font-size: 13px; text-transform: uppercase; }
#style-2 .tag { background-color: transparent; color: #d4af37; border: 2px solid #d4af37; padding: 5px 10px; }

/* --- 3. Style Professionnel --- */
#style-3 .preview-box { background-color: #f0f0f0; }
#style-3 h1, #style-3 h2, #style-3 h3, #style-3 h4, #style-3 h5, #style-3 h6 {
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
font-weight: 700;
letter-spacing: 0.1px;
color: #0a0a0a;
}
#style-3 h1 { font-size: 48px; line-height: 1.2; font-weight: 700; }
#style-3 h2 { font-size: 36px; line-height: 1.25; font-weight: 700; }
#style-3 p, #style-3 li {
font-family: system-ui, sans-serif;
font-size: 15px;
line-height: 1.6;
color: #333;
font-weight: 400;
}
#style-3 .btn, #style-3 .tag, #style-3 label {
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.5px;
}
/* Couleurs de la palette appliquées */
#style-3 .btn { background-color: #003d99; color: white; padding: 10px 15px; border: 2px solid #003d99; border-radius: 5px; cursor: pointer; margin-right: 10px; }
#style-3 .btn-secondary { background-color: #e8f1ff; color: #003d99; padding: 10px 15px; border: 2px solid #003d99; border-radius: 5px; cursor: pointer; font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; font-weight: 600; font-size: 12px; letter-spacing: 0.5px; }
#style-3 .tag { background-color: #006633; color: white; padding: 5px 10px; border-radius: 5px; }

/* --- 4. Style Créatif --- */
#style-4 .preview-box { background-color: #fff9f0; }
#style-4 h1, #style-4 h2, #style-4 h3, #style-4 h4, #style-4 h5, #style-4 h6 {
font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
font-weight: 700;
letter-spacing: 0.2px;
color: #1a1a1a;
}
#style-4 h1 { font-size: 52px; line-height: 1.15; }
#style-4 h2 { font-size: 38px; line-height: 1.2; }
#style-4 p, #style-4 li {
font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
font-size: 16px;
line-height: 1.65;
color: #2a2a2a;
}
#style-4 .btn, #style-4 .tag, #style-4 label {
font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Couleurs de la palette appliquées */
#style-4 .btn { background-color: #d32f2f; color: white; padding: 10px 15px; border: 2px solid #d32f2f; border-radius: 5px; cursor: pointer; margin-right: 10px; }
#style-4 .btn-secondary { background-color: #f5e5e3; color: #d32f2f; padding: 10px 15px; border: 2px solid #d32f2f; border-radius: 5px; cursor: pointer; font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
#style-4 .tag { background-color: #1976d2; color: white; padding: 5px 10px; border-radius: 5px; }

/* --- 5. Style Raffiné --- */
#style-5 .preview-box { background-color: #ecf0f1; }
#style-5 h1, #style-5 h2, #style-5 h3, #style-5 h4, #style-5 h5, #style-5 h6 {
font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
font-weight: 700;
letter-spacing: 0.3px;
color: #1a1a1a;
}
#style-5 h1 { font-size: 48px; line-height: 1.2; font-weight: 600; }
#style-5 h2 { font-size: 36px; line-height: 1.25; font-weight: 600; }
#style-5 p, #style-5 li {
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
font-size: 17px;
line-height: 1.8;
color: #333;
letter-spacing: 0.3px;
}
#style-5 .btn, #style-5 .tag, #style-5 label {
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
}
/* Couleurs de la palette appliquées */
#style-5 .btn { background-color: #2c3e50; color: white; padding: 10px 15px; border: 2px solid #2c3e50; border-radius: 5px; cursor: pointer; margin-right: 10px; }
#style-5 .btn-secondary { background-color: #d4c5b9; color: #2c3e50; padding: 10px 15px; border: 2px solid #2c3e50; border-radius: 5px; cursor: pointer; font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif; font-weight: 600; font-size: 13px; text-transform: uppercase; }
#style-5 .tag { background-color: #8b7355; color: white; padding: 5px 10px; border-radius: 5px; }

/* --- 6. Style Amical --- */
#style-6 .preview-box { background-color: #fcfcfc; border-color: #ffeaa7; }
#style-6 h1, #style-6 h2, #style-6 h3, #style-6 h4, #style-6 h5, #style-6 h6 {
font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
font-weight: 600;
letter-spacing: 0.3px;
color: #2c3e50;
}
#style-6 h1 { font-size: 48px; line-height: 1.2; font-weight: 700; }
#style-6 h2 { font-size: 36px; line-height: 1.25; font-weight: 700; }
#style-6 p, #style-6 li {
font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
font-size: 16px;
line-height: 1.65;
color: #2c3e50;
}
#style-6 .btn, #style-6 .tag, #style-6 label {
font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.2px;
}
/* Couleurs de la palette appliquées */
#style-6 .btn { background-color: #6c5ce7; color: white; padding: 10px 15px; border: 2px solid #6c5ce7; border-radius: 50px; cursor: pointer; margin-right: 10px; }
#style-6 .btn-secondary { background-color: #d4f1d4; color: #6c5ce7; padding: 10px 15px; border: 2px solid #6c5ce7; border-radius: 50px; cursor: pointer; font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.2px; }
#style-6 .tag { background-color: #00b894; color: white; padding: 5px 10px; border-radius: 50px; }

/* --- 7. Style Puissant --- */
#style-7 .preview-box { background-color: #f5f5f5; border-color: #000; }
#style-7 h1, #style-7 h2, #style-7 h3, #style-7 h4, #style-7 h5, #style-7 h6 {
font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
font-weight: 700;
letter-spacing: 0.6px;
color: #0a0a0a;
text-transform: uppercase;
}
#style-7 h1 { font-size: 56px; line-height: 1.1; letter-spacing: 1px; }
#style-7 h2 { font-size: 42px; line-height: 1.15; letter-spacing: 0.8px; }
#style-7 p, #style-7 li {
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
font-size: 15px;
line-height: 1.6;
color: #1a1a1a;
font-weight: 400;
}
#style-7 .btn, #style-7 .tag, #style-7 label {
font-family: 'Nimbus Mono PS', 'Courier New', monospace;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
}
/* Couleurs de la palette appliquées */
#style-7 .btn { background-color: #000000; color: #ff6b35; padding: 12px 18px; border: 2px solid #000000; border-radius: 0; cursor: pointer; margin-right: 10px; }
#style-7 .btn-secondary { background-color: #4a4a4a; color: #ffffff; padding: 12px 18px; border: 2px solid #ffffff; border-radius: 0; cursor: pointer; font-family: 'Nimbus Mono PS', 'Courier New', monospace; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; }
#style-7 .tag { background-color: #004e89; color: white; padding: 5px 10px; border-radius: 0; }

/* --- 8. Style Vintage --- */
#style-8 .preview-box { background-color: #f5ede0; }
#style-8 h1, #style-8 h2, #style-8 h3, #style-8 h4, #style-8 h5, #style-8 h6 {
font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
font-weight: 700;
letter-spacing: 0.3px;
color: #3a3a3a;
}
#style-8 h1 { font-size: 52px; line-height: 1.15; font-weight: 700; }
#style-8 h2 { font-size: 40px; line-height: 1.2; font-weight: 700; }
#style-8 p, #style-8 li {
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
font-size: 18px;
line-height: 1.8;
color: #3a3a3a;
letter-spacing: 0.3px;
}
#style-8 .btn, #style-8 .tag, #style-8 label {
font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Couleurs de la palette appliquées */
#style-8 .btn { background-color: #4a4a4a; color: #f5ede0; padding: 10px 15px; border: 2px solid #4a4a4a; border-radius: 3px; cursor: pointer; margin-right: 10px; }
#style-8 .btn-secondary { background-color: #b8cfe0; color: #3a3a3a; padding: 10px 15px; border: 2px solid #3a3a3a; border-radius: 3px; cursor: pointer; font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
#style-8 .tag { background-color: transparent; border: 1px solid #8b6914; color: #8b6914; padding: 5px 10px; }

</style>
