/* ==========================================================
   STYLES GUTENBERG — valentin-loriod.com
   Pages implantologie basale
   À enqueuer uniquement sur les pages concernées
   ========================================================== */

/* ----------------------------------------------------------
   1. HERO BLOCK
   Classe à appliquer sur un bloc Groupe Gutenberg :
   "vloriod-hero"
   ---------------------------------------------------------- */
.vloriod-hero {
    background: #f0f5fa;
    border-radius: 12px;
    padding: 2.5rem 2rem !important;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.vloriod-hero .vloriod-badge {
    display: inline-block;
    background: #185FA5;
    color: #E6F1FB;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: .75rem;
}

.vloriod-hero h1,
.vloriod-hero h2 {
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: .75rem !important;
    color: #1a2a3a !important;
}

.vloriod-hero p.vloriod-intro {
    font-size: 15px;
    color: #4a5568;
    line-height: 1.7;
    margin: 0;
}

/* ----------------------------------------------------------
   2. BLOC INTRO (bordure bleue)
   Classe : "vloriod-intro-block"
   ---------------------------------------------------------- */
.vloriod-intro-block {
    border-left: 3px solid #378ADD !important;
    padding: 1rem 1.25rem !important;
    background: #f7fafd;
    border-radius: 0 8px 8px 0;
    margin-bottom: 2rem;
}

.vloriod-intro-block p {
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: #2d3748;
    margin: 0;
}

/* ----------------------------------------------------------
   3. GRILLE DE STATISTIQUES
   Classe sur le bloc Colonnes : "vloriod-stats"
   ---------------------------------------------------------- */
.vloriod-stats .wp-block-column {
    background: #f0f5fa;
    border-radius: 8px;
    padding: 1.25rem 1rem !important;
    text-align: center;
}

.vloriod-stats .vloriod-stat-number {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #185FA5;
    line-height: 1.1;
    margin-bottom: .4rem;
}

.vloriod-stats .vloriod-stat-label {
    display: block;
    font-size: 12px;
    color: #4a5568;
    line-height: 1.4;
}

/* ----------------------------------------------------------
   4. TITRE DE SECTION avec trait bleu
   Classe sur un Titre H3 : "vloriod-section-title"
   ---------------------------------------------------------- */
h3.vloriod-section-title,
h2.vloriod-section-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.25rem !important;
    color: #1a2a3a !important;
}

h3.vloriod-section-title::before,
h2.vloriod-section-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 20px;
    background: #378ADD;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   5. CARDS INDICATIONS / OBJECTIFS
   Classe sur le bloc Colonnes : "vloriod-cards"
   ---------------------------------------------------------- */
.vloriod-cards .wp-block-column {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem !important;
}

.vloriod-cards .wp-block-column h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: #1a2a3a;
    margin-bottom: .75rem !important;
}

.vloriod-cards .wp-block-column ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.vloriod-cards .wp-block-column ul li {
    font-size: 15px;
    color: #4a5568;
    padding: 5px 0 5px 1.4rem;
    position: relative;
    line-height: 1.6;
}

.vloriod-cards .wp-block-column ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #378ADD;
    font-size: 13px;
}

/* ----------------------------------------------------------
   6. STEPPER 3 ÉTAPES
   Classe sur le bloc Colonnes : "vloriod-steps"
   ---------------------------------------------------------- */
.vloriod-steps .wp-block-column {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem !important;
    text-align: center;
}

.vloriod-steps .vloriod-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #E6F1FB;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    color: #185FA5;
    margin: 0 auto .75rem;
}

.vloriod-steps .wp-block-column h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: #1a2a3a;
    margin-bottom: .5rem !important;
}

.vloriod-steps .wp-block-column p {
    font-size: 15px !important;
    color: #4a5568;
    line-height: 1.6;
}

/* ----------------------------------------------------------
   7. BLOC CTA (appel à l'action)
   Classe sur un bloc Groupe : "vloriod-cta"
   ---------------------------------------------------------- */
.vloriod-cta {
    background: #185FA5 !important;
    border-radius: 12px !important;
    padding: 1.75rem 2rem !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.vloriod-cta p {
    color: #E6F1FB !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0;
    flex: 1;
}

.vloriod-cta a.wp-block-button__link,
.vloriod-cta .wp-block-button__link {
    background: #ffffff !important;
    color: #185FA5 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: .7rem 1.5rem !important;
    text-decoration: none !important;
    white-space: nowrap;
    border: none !important;
}

.vloriod-cta a.wp-block-button__link:hover,
.vloriod-cta .wp-block-button__link:hover {
    background: #E6F1FB !important;
}

/* ----------------------------------------------------------
   7b. LISTES ET PARAGRAPHES HORS CARDS
   ---------------------------------------------------------- */
.entry-content .wp-block-list li,
.post-content .wp-block-list li,
.wp-block-list li {
    font-size: 15px !important;
    line-height: 1.7 !important;
}

.vloriod-hero p.vloriod-intro {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.7;
    margin: 0;
}

/* ----------------------------------------------------------
   8. RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .vloriod-hero {
        flex-direction: column;
        text-align: center;
    }

    .vloriod-stats .wp-block-column,
    .vloriod-steps .wp-block-column {
        margin-bottom: 12px;
    }

    .vloriod-cta {
        flex-direction: column;
        text-align: center;
    }

    .vloriod-cta p {
        flex: unset;
    }
}