/* 
 * components.css
 * 
 * Ce fichier regroupe les classes de composants sémantiques réutilisables du site
 * (Méthode 2 de l'harmonisation de la charte graphique).
 */



/* Custom styles for service description (the hook block) */
#service-descriptif,
#service-descriptif p,
#service-descriptif span {
    font-size: 1rem !important; /* Force standard 16px size */
    line-height: 1.6 !important;
    text-align: justify !important;
}
#service-descriptif {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}
@media (min-width: 768px) {
    #service-descriptif {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}
#service-descriptif > :first-child {
    margin-top: 0 !important;
}
#service-descriptif p {
    margin-bottom: 1rem !important;
}
#service-descriptif p:last-child {
    margin-bottom: 0 !important;
}


.editor-content p {
    text-align: justify !important;
}

/* Headings in rich text (.editor-content and article.prose) */
.editor-content h1, article.prose h1,
.editor-content h2, article.prose h2,
.editor-content h3, article.prose h3,
.editor-content h4, article.prose h4 {
    font-family: 'Playfair Display', serif !important;
    color: #1c1917 !important; /* stone-800 */
    font-weight: 700 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
}

.dark .editor-content h1, .dark article.prose h1,
.dark .editor-content h2, .dark article.prose h2,
.dark .editor-content h3, .dark article.prose h3,
.dark .editor-content h4, .dark article.prose h4 {
    color: #ffffff !important;
}

/* Font sizes for H1, H2, H3, H4 */
.editor-content h1, article.prose h1 { font-size: 1.5rem !important; }
.editor-content h2, article.prose h2 { font-size: 1.2rem !important; }
.editor-content h3, article.prose h3 { font-size: 1.1rem !important; }
.editor-content h4, article.prose h4 { font-size: 1.0rem !important; }

@media (min-width: 768px) {
    .editor-content h1, article.prose h1 { font-size: 2.0rem !important; }
    .editor-content h2, article.prose h2 { font-size: 1.7rem !important; }
    .editor-content h3, article.prose h3 { font-size: 1.4rem !important; }
    .editor-content h4, article.prose h4 { font-size: 1.2rem !important; }
}

/* Presentation content component (specifically for structured training/coaching pages) */
.component-presentation {
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #44403c !important;
}

.dark .component-presentation {
    color: #e5e7eb !important;
}

.component-presentation h2 {
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important;
    color: #1c1917 !important;
    line-height: 1.2 !important;
    margin-bottom: 1.25rem !important;
    margin-top: 1.2em !important; /* Default top margin for H2 headings - standardized to 1.2em */
}

.dark .component-presentation h2 {
    color: #ffffff !important;
}

/* Specificity overrides to ensure presentation margins override editor-content defaults */
.editor-content.component-presentation h2,
.component-presentation h2 {
    margin-top: 1.2em !important;
}

.editor-content.component-presentation h2:first-of-type,
.component-presentation h2:first-of-type {
    margin-top: 0.4em !important;
}

/* Font sizing for H2 in presentation */
.component-presentation h2 {
    font-size: 1.2rem !important; /* reduced from 1.875rem */
}
@media (min-width: 768px) {
    .component-presentation h2 {
        font-size: 1.7rem !important; /* reduced from 2.25rem */
    }
}


/* Service main content card with cream background */
.component-service-card {
    background-color: #faf8f5 !important;
}
.dark .component-service-card {
    background-color: #1c1917 !important; /* stone-900 */
}

/* Sidebar Call-To-Action (Option 3: Style Aérien / Glassmorphic) */
.component-sidebar-cta {
    background-color: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(220, 220, 220, 0.25) !important;
}

.dark .component-sidebar-cta {
    background-color: rgba(28, 25, 23, 0.2) !important;
    border: 1px solid rgba(68, 64, 60, 0.25) !important;
}