/* ===================================
   AMÉLIORATION GLOBALE DES TITRES
   Pour toutes les pages du site SelfieSmiles
   =================================== */

/* Style pour tous les titres H1 principaux des pages */
h1 {
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #ff4081, #ff8db3, #ffeb3b) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-align: center !important;
    margin: 40px auto 20px auto !important;
    text-shadow: 0 0 30px rgba(255, 64, 129, 0.3) !important;
    padding: 20px 0 !important;
    position: relative !important;
}

/* Effet décoratif sous les titres H1 */
h1::after {
    content: '' !important;
    display: block !important;
    width: 100px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #ff4081, #00c853, #ffeb3b, #03a9f4) !important;
    margin: 15px auto 0 auto !important;
    border-radius: 2px !important;
}

/* Style pour les sous-titres des pages */
.page-header p,
h1 + p {
    font-size: 1.2rem !important;
    color: #ccc !important;
    text-align: center !important;
    max-width: 600px !important;
    margin: 0 auto 40px auto !important;
    line-height: 1.6 !important;
}

/* Amélioration spécifique pour chaque page */

/* Page À Propos */
body:has([href*="about"]) h1,
body:has(h1:contains("À Propos")) h1 {
    background: linear-gradient(135deg, #ff4081, #9c27b0, #673ab7) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Page Galerie */
body:has([href*="galerie"]) h1,
body:has(h1:contains("galerie")) h1,
body:has(h1:contains("Galerie")) h1 {
    background: linear-gradient(135deg, #ff4081, #ff9800, #ffc107) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Page Témoignages */
body:has([href*="temoignages"]) h1,
body:has(h1:contains("Témoignages")) h1 {
    background: linear-gradient(135deg, #ff4081, #4caf50, #8bc34a) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Page Articles */
body:has([href*="articles"]) h1,
body:has(h1:contains("Articles")) h1 {
    background: linear-gradient(135deg, #ff4081, #2196f3, #03a9f4) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Page FAQ */
body:has([href*="faq"]) h1,
body:has(h1:contains("FAQ")) h1,
body:has(h1:contains("Questions")) h1 {
    background: linear-gradient(135deg, #ff4081, #ff5722, #e91e63) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Page Contact */
body:has([href*="contact"]) h1,
body:has(h1:contains("Contact")) h1 {
    background: linear-gradient(135deg, #ff4081, #607d8b, #455a64) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Amélioration des sections avec arrière-plan */
.page-header,
section:first-of-type {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%) !important;
    padding: 60px 20px !important;
    margin-bottom: 40px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Éléments décoratifs de fond pour les titres */
.page-header::before,
section:first-of-type::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="%23ff4081" opacity="0.4"/><circle cx="80" cy="30" r="1.5" fill="%2300c853" opacity="0.4"/><circle cx="60" cy="70" r="2.5" fill="%23ffeb3b" opacity="0.4"/><circle cx="30" cy="80" r="1" fill="%2303a9f4" opacity="0.4"/><circle cx="90" cy="60" r="2" fill="%23ff9800" opacity="0.4"/></svg>') repeat !important;
    animation: float 20s ease-in-out infinite !important;
    z-index: 1 !important;
}

/* Éviter le conflit avec la section options supplémentaires */
.additional-options-redesigned::before {
    z-index: 1 !important;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* S'assurer que le contenu reste au-dessus */
.page-header > *,
section:first-of-type > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem !important;
        padding: 15px 0 !important;
    }
    
    .page-header,
    section:first-of-type {
        padding: 40px 15px !important;
    }
    
    .page-header p,
    h1 + p {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
    }
}

/* Correction pour les titres qui pourraient avoir des styles conflictuels */
h1[style] {
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    color: transparent !important;
    background: linear-gradient(135deg, #ff4081, #ff8db3, #ffeb3b) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Amélioration des titres H2 et H3 */
h2 {
    color: #ff4081 !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin: 30px 0 20px 0 !important;
    text-align: center !important;
}

h3 {
    color: #ff8db3 !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    margin: 25px 0 15px 0 !important;
}

/* Amélioration générale de la lisibilité */
body {
    line-height: 1.6 !important;
}

p {
    color: #ddd !important;
    margin-bottom: 15px !important;
}

/* Masquer les éléments Manus */
a[href*="manus"],
a[href*="Manus"],
div[class*="manus"],
div[id*="manus"],
[class*="manus"],
[id*="manus"] {
    display: none !important;
    visibility: hidden !important;
}