/*
Theme Name: cyriljarniasfr
Theme URI: https://www.cyriljarnias.fr
Author: Cyril Jarnias
Author URI: https://www.cyriljarnias.fr
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cyriljarniasfr
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* Importation de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* --- Variables de couleurs (Palette Gestion de Patrimoine) --- */
:root {
    --primary-color: #333333;
    --gold-color: #215f8b;
    --gold-hover: #b08d4b;
    --text-body: #555555;
    --bg-light: #f8f9fa;
    --bg-dark: #242424;
}

/* --- Typographie Globale --- */
body {
    font-family: 'Trebuchet','Trebuchet MS',Helvetica,Arial,Lucida,sans-serif;
    color: var(--text-body);
    line-height: 1.6;
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: 'Playfair Display', serif;
    color: var(--primary-color);
}

h1 {
    font-size: 50px;
    color: #FFFFFF!important;
}

h1.text-black {
    color: #000 !important;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 2.5rem;
    line-height: 1.1;
}

/* --- Utilitaires de couleurs personnalisés --- */
.text-gold {
    color: var(--gold-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

/* --- Boutons personnalisés --- */
.btn-gold {
    background-color: var(--gold-color);
    border-color: var(--gold-color);
    color: #fff;
    transition: all 0.3s ease;
}

.btn-gold:hover {
    background-color: var(--gold-hover);
    border-color: var(--gold-hover);
    color: #fff;
    transform: translateY(-2px);
}

/* --- Navbar --- */
.navbar-nav .nav-link {
    color: var(--primary-color);
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    transition: color 0.3s;
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: var(--gold-color);
}

.dropdown-menu {
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    border-top: 3px solid var(--gold-color);
}

/* --- Hero Section --- */
.hero-section {
    background-image: linear-gradient(180deg,rgba(51,51,51,0.6) 0%,rgba(51,51,51,0.6) 100%),url(images/central-business-district-singapore.jpg.webp)!important;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
}

/* Espacement léger pour le sous-titre en majuscules */
.letter-spacing-1 {
    letter-spacing: 1.5px;
}

/* Style spécifique pour la vidéo afin de reproduire l'effet propre */
.ratio {
    background-color: #000; /* Fond noir avant chargement */
}

/* --- Services Cards --- */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.1) !important;
}

.icon-box {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(197, 160, 89, 0.1);
    border-radius: 50%;
}

/* --- Formulaires --- */
.form-control:focus {
    box-shadow: none;
    border: 1px solid var(--gold-color);
    background-color: #fff;
}

/* --- Logos Presse --- */
.grayscale-logos div {
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 2px;
    filter: grayscale(100%);
    transition: opacity 0.3s;
}

/* Small */

.small {
    font-size: .75em !important;
}

/* --- Footer Customization --- */

/* Fond sombre correspondant à la charte (Bleu nuit foncé) */
footer div#footer1 {
    background-color: var(--primary-color) !important; 
}

footer div#footer2 {
    background-color: var(--bg-dark) !important;
}

/* Liens du footer */
.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: var(--gold-color, #c5a059); /* Utilise la variable définie précédemment ou fallback */
    padding-left: 5px; /* Petit effet de glissement au survol */
}

/* Liens utilitaires (Mentions légales, email) */
.hover-white:hover {
    color: #fff !important;
}

/* Boutons réseaux sociaux */
.social-icons .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.social-icons .btn-outline-light:hover {
    background-color: var(--gold-color, #c5a059);
    border-color: var(--gold-color, #c5a059);
    color: #fff;
}

/* --- Styles Formulaire Contact --- */

/* Style des inputs pour un aspect propre */

section#contact {
    background-image: linear-gradient(45deg,#ffffff 90%,#215f8b 90%)!important;
}

section#about-me-expert {
    background-image: linear-gradient(45deg,#ffffff 90%,#215f8b 90%)!important;
}

.dashed {
    border-top-width: 10px;
    border-top-style: dashed;
}

#contact .form-control, 
#contact .form-select {
    background-color: #ffffff;
    border: 1px solid #ced4da;
    padding: 0.75rem 1rem; /* Plus d'espace interne */
    border-radius: 4px; /* Coins légèrement arrondis comme sur l'original */
}

/* Focus : Bordure or */
#contact .form-control:focus, 
#contact .form-select:focus {
    border-color: var(--gold-color);
    box-shadow: 0 0 0 0.25rem rgba(197, 160, 89, 0.25);
    background-color: #fff;
}

/* Style des labels */
#contact .form-label {
    margin-bottom: 0.3rem;
    color: var(--primary-color);
}

/* Style de l'astérisque rouge */
.text-danger {
    color: #dc3545 !important;
}

/* Style de l'icône ronde à gauche */
.icon-circle {
    transition: all 0.3s ease;
    background-color: rgba(197, 160, 89, 0.1) !important; /* Fond Or très léger */
}

.icon-circle i {
    color: var(--gold-color);
}

/* --- Styles Section Vidéos --- */

/* Bordure Or sous le titre */
.border-gold {
    border-color: var(--gold-color) !important;
}

/* Carte Vidéo */
.video-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.1) !important;
}

/* Image et Effet Zoom */
.video-card .card-img-top {
    object-fit: cover;
    transition: transform 0.5s ease;
}

.video-card:hover .card-img-top {
    transform: scale(1.05);
}

/* Overlay (Calque sombre avec icône Play) */
.video-overlay {
    background-color: rgba(10, 35, 66, 0.4); /* Bleu foncé transparent */
    opacity: 0;
    transition: opacity 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-card:hover .video-overlay {
    opacity: 1;
}

.video-overlay i {
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.video-card:hover .video-overlay i {
    transform: scale(1);
}

/* --- Styles Section Blog --- */

/* Carte Article */
.blog-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.1) !important;
}

/* Image Article (réutilisation de la classe des vidéos) */
.blog-card .card-img-top {
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .card-img-top {
    transform: scale(1.05);
}

/* Badges Catégories */
.bg-gold {
    background-color: var(--gold-color) !important;
    color: #fff;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Liens Titres */
.hover-gold {
    transition: color 0.3s ease;
}

.hover-gold:hover {
    color: var(--gold-color) !important;
}

/* --- Styles Section Presse --- */

/* Conteneur des logos */
.press-logo {
    max-height: 70px;
    max-width: 100%;
    width: auto;
    /*filter: grayscale(100%);
    opacity: 0.7;*/
    transition: all 0.3s ease;
    mix-blend-mode: multiply;
}

/* Effet au survol du logo spécifique */
.press-logo:hover {
    /*filter: grayscale(0%);
    opacity: 1;*/
    transform: scale(1.1);
}

/* Centrage vertical dans la grille */
.grayscale-logos-container .col-6 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px; /* Assure une hauteur de ligne constante */
}

/* --- Styles Section Newsletter --- */

/* Assurer que le fond est bien le bleu foncé de la charte */
.bg-primary {
    background-color: var(--primary-color) !important; /* #0a2342 ou #333 selon votre config */
}

/* Style du champ email */
.newsletter-form .form-control {
    height: 60px; /* Hauteur confortable */
    font-size: 1.1rem;
}

.newsletter-form .form-control:focus {
    box-shadow: none; /* On retire l'ombre bleue par défaut de Bootstrap */
    background-color: #f8f9fa;
}

/* Bouton Envoyer */
.newsletter-form .btn-gold {
    padding-left: 2rem;
    padding-right: 2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
}

.newsletter-form .btn-gold:hover {
    background-color: var(--gold-hover);
}

/* --- Styles Section Approche --- */

/* Style pour les boîtes d'icônes cliquables */
.icon-box-link {
    transition: all 0.3s ease;
    border-color: #dee2e6; /* Gris clair par défaut */
}

/* Au survol : Bordure Or, Fond blanc, Ombre plus marquée */
.icon-box-link:hover {
    border-color: var(--gold-color) !important;
    background-color: #fff !important;
    transform: translateY(-5px); /* Remonte légèrement */
    box-shadow: 0 1rem 3rem rgba(197, 160, 89, 0.2) !important; /* Ombre dorée légère */
}

/* Changement de couleur du texte au survol */
.icon-box-link:hover h4 {
    color: var(--gold-color);
}

/* Espacement lettre pour le sous-titre */
.letter-spacing-1 {
    letter-spacing: 1px;
}

/* --- Styles Section Qui suis-je --- */

/* Ajustement de l'espacement pour la colonne texte */
/* Permet d'aérer le texte par rapport à l'image sur grand écran */
@media (min-width: 992px) {
    .ps-lg-5 {
        padding-left: 3rem !important;
    }
}

/* Ombre portée douce sur l'image */
.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

/* Section Page */

section#page h1 {
    color: #000 !important;
}

section#page div.about {
    background-image: linear-gradient(45deg,rgba(0,0,0,0) 90%,#215f8b 90%)!important;
}

section#page div.aboutlinks div.wp-block-buttons {
    display: block;
    margin: 0 auto;
    text-align: center;
}

section#page div.whoami {
    background-color: #f6f6f6;
    padding: 25px;
}

section#page div.logosuniversite img {
    width: 25%;
}

section#newsletter h2 {
    color: #fff !important;
}

div.sidebar-services {
    font-weight: 700;
    background-color: #215F8B;
    border-bottom-width: 2px;
    border-bottom-color: #428BCA;
    padding-top: 5px !important;
    padding-right: 10px !important;
    padding-bottom: 5px !important;
    padding-left: 10px !important;
    margin-bottom: 5px !important;
    width: 100%;
    max-width: 100%;
    color: #fff !important;
}

/* Style de base pour la pagination native de WordPress */
.pagination .nav-links { display: flex; gap: 10px; }
.pagination .page-numbers { padding: 8px 16px; border: 1px solid #dee2e6; color: #333; text-decoration: none; }
.pagination .page-numbers.current { background-color: #205d86; color: white; border-color: #205d86; }

/* Cache la barre de recherche par défaut en la poussant vers le haut */
#search-bar-overlay {
    height: 100%;
    z-index: 10;
    transition: transform 0.4s ease, opacity 0.3s ease;
    transform: translateY(-110%); /* Glisse vers le haut */
    opacity: 0;
    pointer-events: none;
    top: 0;
}

/* État actif de la barre de recherche */
#search-bar-overlay.active {
    transform: translateY(0); /* Glisse vers le bas */
    opacity: 1;
    pointer-events: auto;
}

/* Animation du menu quand la recherche arrive */
#menu-main-container {
    transition: opacity 0.3s ease;
}

#menu-main-container.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Style WP_NAV_MENU pour Bootstrap */
div#navbarNav {
    padding-bottom: 5px !important;
}
#navbarNav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

#navbarNav ul li a {
    text-decoration: none;
    color: #000;
    padding: 8px 15px;
    display: block;
}

.navbar {
    --bs-navbar-padding-y: 0.2rem !important;
}

/* Mobile : Ajustement de l'overlay */
@media (max-width: 991px) {
    #search-bar-overlay {
        position: relative !important;
        margin-top: 15px;
    }
}

/* Bouton d'aide sur la page d'accueil (header) */
.btn-aide {
    display: inline-block;
    background-color: #FFFFFF;
    color: #215f8b;
    padding: 5px 12px;
    text-decoration: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease; 
}
.btn-aide:hover {
    color: #FFFFFF !important;
    background-image: initial;
    background-color: #215F8B;
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1300px !important;
    }
}

/* CSS personnalisé (Uniquement pour ce qui n'existe pas nativement dans Bootstrap) */

/* Couleur de fond gris clair de la section */
.bg-section-profil {
    background-color: #f4f4f4; 
}

/* Police avec empattement (Serif) pour le titre, non incluse par défaut dans BS5 */
.font-serif {
    font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Espacement des lignes des paragraphes pour aérer le texte */
.texte-aere p {
    line-height: 1.8;
    font-size: 1.05rem;
}

/* Le style exact du bouton (Couleur sur mesure et bords carrés) */
.btn-bleu-custom {
    background-color: #215F8B;
    color: #FFFFFF;
    border-radius: 0; /* Enlève les bords arrondis par défaut de Bootstrap */
    padding: 10px 24px;
    font-size: 0.95rem;
    transition: background-color 0.2s ease;
}

.btn-bleu-custom:hover {
    background-color: #174261; /* Bleu légèrement plus foncé au survol */
    color: #FFFFFF;
}

/* Hero */

section#my-vision {
    background-size: initial;
    background-position: right 0px center;
    background-image: linear-gradient(100deg, #215f8b 55%, rgba(0, 0, 0, 0) 45%), url(https://www.cyriljarnias.fr/wp-content/uploads/jarnias-briques.jpg.webp) !important;
}

section#my-vision h2 {
    color: #fff !important;
}

section#my-vision p {
    color: #fff !important;
}

section#my-vision a.btn-custom {
    color: #215F8B !important;
    background-color: #FFFFFF;
    border-radius: 0px !important;
}

section#my-vision a.btn-custom:hover {
    background-color: #215F8B !important;
    color: #fff !important;
}

section#formation-parcours {
    background-size: initial;
    background-position: right 0px center;
    background-image: linear-gradient(100deg, #215f8b 75%, rgba(0, 0, 0, 0) 25%), url(https://www.cyriljarnias.fr/wp-content/uploads/jarnias-briques.jpg.webp) !important;
}

section#formation-parcours h2 {
    color: #fff !important;
}

section#formation-parcours p {
    color: #fff !important;
}

section#formation-parcours a.btn-custom {
    color: #215F8B !important;
    background-color: #FFFFFF;
    border-radius: 0px !important;
}

section#formation-parcours a.btn-custom:hover {
    background-color: #215F8B !important;
    color: #fff !important;
}

/* Couleurs personnalisées basées sur la capture */
:root {
    --blue-dark: #1f5c88;
    --blue-light: #2087c9;
    --bg-gray: #f4f5f7;
}

/* Conteneur principal gris */
.testimonial-container {
    background-color: var(--bg-gray);
    padding: 40px;
}

/* Style de la photo et de sa bordure basse */
.testimonial-photo-wrapper {
    display: inline-block;
}

.testimonial-photo-wrapper img {
    max-width: 160px;
    height: auto;
    display: block;
}

/* Conteneur du texte avec la bordure à gauche */
.testimonial-quote-box {
    border-left: 5px solid var(--blue-dark);
    padding-left: 20px;
}

/* Style du texte de la citation */
.testimonial-text {
    font-family: Arial, sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #000;
    margin-bottom: 1.5rem;
}

/* Style de l'auteur */
.testimonial-author-name {
    color: var(--blue-light);
    font-family: Arial, sans-serif;
    font-size: 1.05rem;
}

.testimonial-author-title {
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 1.05rem;
}

/* Boutons */
.btn-buttomcustomized {
    display: inline-block;
    background-color: #205d86;
    color: #ffffff;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 0;
    border: none;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out; 
}
.btn-buttomcustomized:hover,
.btn-buttomcustomized:focus {
    background-color: #000000;
    color: #ffffff;
    text-decoration: none;
}

/* Couleurs de fond du footer */
#footer1 {
    background-color: #333333;
}
#footer2 {
    background-color: #262626;
}

/* Style des liens des menus (partie haute) */
.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease-in-out;
}
.footer-links a:hover {
    color: #cccccc;
}

/* Style des icônes réseaux sociaux */
.social-icons a {
    color: #ffffff;
    font-size: 1.2rem;
    transition: opacity 0.2s;
}
.social-icons a:hover {
    opacity: 0.7;
}

/* Style des liens de la barre du bas */
.footer-bottom-link {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s;
}
.footer-bottom-link:hover {
    opacity: 0.7;
}

/* Bouton pour remonter en haut de page */
#scrollTopBtn {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    width: 45px;
    height: 45px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0.8;
}

#scrollTopBtn:hover {
    opacity: 1;
    transform: translateY(-3px);
}

.card-press {
    border: 1px solid #f4f4f4;
    border-radius: 10px;
    text-align: center;
    padding: 25px;
}

div.btn-press a {
    display: inline-block !important;
    background-color: #205d86 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
    border-radius: 0 !important;
    border: none !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease-in-out !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
div.btn-press a:hover,
div.btn-press a:focus {
    background-color: #000000 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

section#press .is-layout-flex {
    display: inline-flex !important;
    text-align: center !important;
}

/* Ombre portée personnalisée pour la barre de navigation */
.navbar-custom-shadow {
    border-bottom: none !important; 
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.04), 
        0 8px 15px rgba(0, 0, 0, 0.08) !important;
}

#mega-menu-wrap-primary .mega-menu-toggle {
    background-color: #fff !important;
}

#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner {
    top: 4px !important;
}

#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner, #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before, #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
    background-color: #212529 !important;
    height: 2px !important;
}

/* ==========================================================================
   1. STYLES DE BASE (Communs à tous les blocs)
   ========================================================================== */

/* Remplacez votre premier bloc de CSS par celui-ci pour inclure les nouveaux blocs */
.custom-block-goodtoknow,
.custom-block-contact,
.custom-block-audio,
.custom-block-disclaimer,
.custom-block-diagnostic,
.custom-block-example,  /* NOUVEAU */
.custom-block-tip,      /* NOUVEAU */
.custom-block-attention /* NOUVEAU */ {
    padding: 2rem 2.5rem;
    border-radius: 12px;
    margin: 2rem 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
    border-left-width: 4px;
}

/* Effet fluide au survol */
.custom-block-goodtoknow:hover,
.custom-block-contact:hover,
.custom-block-audio:hover,
.custom-block-disclaimer:hover,
.custom-block-diagnostic:hover,
.custom-block-example:hover,  /* NOUVEAU */
.custom-block-tip:hover,      /* NOUVEAU */
.custom-block-attention:hover /* NOUVEAU */ {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

/* Typographie des paragraphes à l'intérieur des blocs */
.wp-block-group[class*="custom-block-"] p {
    color: #4a4a55; /* Gris anthracite doux, plus élégant que le noir pur */
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Supprime la marge du dernier paragraphe pour un espacement parfait */
.wp-block-group[class*="custom-block-"] p:last-child {
    margin-bottom: 0;
}

/* Style du Sous-titre ("Bon à savoir", "Disclaimer", etc.) */
.subtitle-block {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   2. STYLES SPECIFIQUES (Couleurs par section)
   ========================================================================== */

/* --- Bon à savoir (Bleu doux - Information) --- */
.background-goodtoknow {
    background-color: #f0f7ff;
    border-color: #e0efff;
    border-left-color: #0066cc; /* Accent visuel */
}
.background-goodtoknow .subtitle-block {
    color: #0066cc;
}

/* --- Contact (Violet/Indigo pâle - Action douce) --- */
.background-contact {
    background-color: #f5f3fa;
    border-color: #ebe7f5;
    border-left-color: #6b4c9a;
}
.background-contact .subtitle-block {
    color: #6b4c9a;
}

/* --- Audio (Gris argenté minimaliste) --- */

.custom-block-audio.background-audio {
    background-color: #84b7ba;
    border: none;
    border-radius: 0;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: none;
    transform: none;
}

.custom-block-audio .audio-title {
    color: #ffffff !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    text-align: center;
    line-height: 1.3;
}

.custom-block-audio .audio-author {
    color: #ffffff !important;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.custom-block-audio .audio-author strong {
    font-weight: 700;
}

.custom-block-audio .wp-block-audio {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.custom-block-audio audio {
    width: 100%;
    outline: none;
    color-scheme: dark;
    filter: invert(1) sepia(1) saturate(0) hue-rotate(180deg) brightness(2);
    border-radius: 30px;
}

@media (max-width: 768px) {
    .custom-block-audio .audio-title {
        font-size: 1.4rem;
    }
    .custom-block-audio.background-audio {
        padding: 2rem 1.5rem;
    }
}

/* --- Disclaimer (Orange pastel/Ambre - Attention mais sans agresser) --- */
.background-disclaimer {
    background-color: #fff8f0;
    border-color: #ffeedb;
    border-left-color: #d97706;
}
.background-disclaimer .subtitle-block {
    color: #d97706;
}

/* --- Diagnostic (Vert menthe/Sauge - Santé/Analyse) --- */
.background-diagnostic {
    background-color: #f0fdf4;
    border-color: #e0f8e9;
    border-left-color: #16a34a;
}
.background-diagnostic .subtitle-block {
    color: #16a34a;
}

/* 1. Conteneur du tableau (Gestion des bordures et de l'ombre) */
.wp-block-table {
    margin: 2rem auto;
    border-radius: 12px; /* Bords arrondis pour le style moderne */
    overflow: hidden; /* Permet aux bords arrondis de s'appliquer au tableau enfant */
    box-shadow: 0 5px 20px rgba(32, 93, 134, 0.08); /* Ombre douce bleutée */
    background-color: #ffffff;
}

/* Cas particulier de WordPress : annuler les marges si une balise figure est imbriquée dans une autre */
.wp-block-table .wp-block-table {
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}

/* 2. Style général du tableau */
.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    margin: 0;
}

/* 3. L'en-tête du tableau (Bleu foncé) */
.wp-block-table thead th {
    background-color: #205d86; /* Votre bleu foncé */
    color: #ffffff; /* Texte en blanc pour le contraste */
    padding: 1.2rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 3px solid #15415e; /* Ligne légèrement plus foncée sous l'en-tête */
}

/* 4. Les cellules du corps du tableau */
.wp-block-table tbody td {
    padding: 1rem 1.5rem;
    color: #334e60; /* Gris-bleu foncé pour une bonne lisibilité */
    font-weight: 500;
    border-bottom: 1px solid #d4e4f0; /* INTERLIGNES : Bordure bleu clair */
}

/* Supprimer l'interligne tout en bas du tableau pour faire plus propre */
.wp-block-table tbody tr:last-child td {
    border-bottom: none;
}

/* 5. Alternance des couleurs (Effet Zébré) */
/* Lignes impaires : Fond blanc */
.wp-block-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

/* Lignes paires : Fond bleu très clair */
.wp-block-table tbody tr:nth-child(even) {
    background-color: #f4f8fb; 
}

/* 6. Effet au survol de la souris (Optionnel mais très élégant) */
.wp-block-table tbody tr:hover {
    background-color: #e3eff6; /* Bleu clair un peu plus soutenu au survol */
    transition: background-color 0.3s ease;
}

.wp-block-table thead th {
    border-bottom: 0px !important;
}

.wp-block-table td, .wp-block-table th {
    border: 0px !important;
}

/* 7. Design Responsive (Pour les téléphones) */
@media (max-width: 600px) {
    .wp-block-table {
        display: block;
        overflow-x: auto; /* Permet de scroller horizontalement si le tableau est trop large sur mobile */
        white-space: nowrap; /* Empêche le texte de s'écraser sur plusieurs lignes */
    }
    
    .wp-block-table thead th, 
    .wp-block-table tbody td {
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
    }
}

/* 1. Le conteneur principal (La carte) */
.custom-block-keyfigure {
    background-color: #f4f8fb;
    border-radius: 16px;
    padding: 3rem 2rem;
    margin: 2rem auto;
    box-shadow: 0 10px 30px rgba(32, 93, 134, 0.12);
    border-top: 5px solid #205d86;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Effet de survol (hover) pour rendre la carte interactive */
.custom-block-keyfigure:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(32, 93, 134, 0.2);
}

/* 2. Gestion de l'espacement interne (Spécifique à WordPress) */
.custom-block-keyfigure .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

/* 3. Le chiffre clé (très grand et mis en valeur) */
.custom-block-keyfigure .strong-number {
    display: block;
    font-size: 4.5rem; /* Taille massive */
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
    
    /* Dégradé de texte basé sur votre couleur et une nuance légèrement plus claire */
    background: linear-gradient(135deg, #205d86 0%, #3a8ebf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #205d86; /* Fallback si le dégradé n'est pas supporté */
}

/* Ligne séparatrice décorative sous le chiffre */
.custom-block-keyfigure .strong-number::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background-color: #205d86;
    margin: 1.5rem auto 0 auto;
    border-radius: 2px;
}

/* 4. Le texte descriptif */
.custom-block-keyfigure p {
    font-size: 1.25rem;
    color: #334e60; /* Un gris-bleu foncé pour une lecture optimale */
    margin: 0;
    line-height: 1.6;
    font-weight: 500;
    max-width: 600px;
}

/* 5. Responsive Design (Pour tablettes et téléphones) */
@media (max-width: 768px) {
    .custom-block-keyfigure {
        padding: 2rem 1.5rem;
    }
    
    .custom-block-keyfigure .strong-number {
        font-size: 3rem; /* On réduit la taille sur mobile */
        word-break: break-all; /* Évite que les nombreux zéros ne débordent de l'écran */
    }

    .custom-block-keyfigure p {
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   NOUVEAUX BLOCS D'INFORMATION (Exemple, Astuce, Attention)
   ========================================================================== */

/* --- Exemple (Turquoise/Cyan doux - Concret et Pratique) --- */
.background-example {
    background-color: #f0fdfa;
    border-color: #ccfbf1;
    border-left-color: #0d9488;
}
.background-example .subtitle-block {
    color: #0d9488;
}

/* --- Astuce (Jaune/Or pâle - Idée / Optimisation) --- */
.background-tip {
    background-color: #fffbeb;
    border-color: #fef08a;
    border-left-color: #ca8a04;
}
.background-tip .subtitle-block {
    color: #ca8a04;
}

/* --- Attention (Rouge pastel - Alerte douce) --- */
.background-attention {
    background-color: #fef2f2;
    border-color: #fee2e2;
    border-left-color: #dc2626;
}
.background-attention .subtitle-block {
    color: #dc2626;
}

/* ==========================================================================
   BLOC : CONTENEUR DE CARTES (Zones stratégiques)
   ========================================================================== */

.custom-block-cards-container {
    background-color: #f8fafc; /* Fond gris très clair pour faire ressortir les cartes */
    border-radius: 16px;
    padding: 3rem 2.5rem;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Style du sous-titre du conteneur */
.subtitle-cards {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 1rem;
    color: #205d86; /* Votre bleu charte */
}

.custom-block-cards-container p {
    color: #4a4a55;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

/* Style individuel des cartes (Écrase les styles inline de WordPress avec !important) */
.custom-single-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Accent visuel en haut de chaque carte */
.custom-single-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #205d86, #3a8ebf);
}

.custom-single-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(32, 93, 134, 0.08); /* Ombre aux tons bleutés */
}

/* Titre à l'intérieur de la carte */
.custom-single-card .wp-block-heading {
    display: block;
    color: #205d86;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    margin-top: 0;
}

.custom-single-card p {
    font-size: 1rem;
    margin-bottom: 0;
}

/* ==========================================================================
   BLOC : CITATION LARGE (Blockquote)
   ========================================================================== */

.wp-block-quote.is-style-large {
    margin: 3rem 0;
    padding: 2.5rem 3rem 2.5rem 4rem;
    background-color: #f4f8fb; /* Rappel du fond du tableau / Chiffre clé */
    border: none;
    border-left: 5px solid #205d86;
    border-radius: 0 16px 16px 0;
    position: relative;
    box-shadow: 0 5px 20px rgba(32, 93, 134, 0.05);
}

/* Icône guillemet décorative */
.wp-block-quote.is-style-large::before {
    content: "«";
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 5rem;
    color: rgba(32, 93, 134, 0.1);
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
}

/* Texte de la citation */
.wp-block-quote.is-style-large p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #334e60;
    font-style: italic;
    position: relative;
    z-index: 1;
    margin-bottom: 1.5rem;
}

/* Auteur / Source de la citation */
.wp-block-quote.is-style-large cite {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #205d86;
    font-style: normal;
}

.wp-block-quote.is-style-large cite::before {
    content: "— "; /* Tiret avant la source */
}

.custom-block-cards-container .wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
}

.custom-block-cards-container .wp-block-column.custom-single-card {
    width: 100% !important;
    flex-basis: auto !important;
    margin: 0 !important;
    height: 100%; /* Force toutes les cartes à avoir la même hauteur */
}

figure.wp-block-image img {
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(32, 93, 134, 0.08);
    width: 100%;
    height: auto;
    display: block;
}

figure.wp-block-image .wp-element-caption {
    color: #334e60;
    font-size: 0.8rem;
    line-height: 1.6;
    padding: 1.2rem 1.5rem;
    text-align: center;
}

.wp-block-image :where(figcaption) {
    margin-top: 0px !important;
}

h1.wp-block-heading {
    color: #000 !important;
}

b.lwptoc_title {
    font-size: 24px !important;
}

div.lwptoc_item {
    font-size: 17px !important;
}

aside.sidebar-wrapper {
    height: 100% !important;
}

.sidebarcta {
    top: 100px !important;
}

/* ==========================================================================
   3. RESPONSIVE (Mobiles)
   ========================================================================== */

@media (max-width: 768px) {
    /* Blocs d'information */
    .custom-block-goodtoknow,
    .custom-block-contact,
    .custom-block-audio,
    .custom-block-disclaimer,
    .custom-block-diagnostic,
    .custom-block-example,
    .custom-block-tip,
    .custom-block-attention {
        padding: 1.5rem; 
    }

    /* Conteneur de cartes */
    .custom-block-cards-container {
        padding: 2rem 1.5rem;
    }
    
    .custom-single-card {
        padding: 1.5rem !important;
    }

    /* Citation */
    .wp-block-quote.is-style-large {
        padding: 2rem 1.5rem 2rem 2.5rem;
    }
    
    .wp-block-quote.is-style-large::before {
        left: 10px;
        font-size: 3.5rem;
    }
    
    .wp-block-quote.is-style-large p {
        font-size: 1.05rem;
    }
}

.lwptoc .lwptoc_i {
    width: 100% !important;
}

.pagination {
    margin-bottom: 15px !important;
}

/* Breakpoints */
section.bg-section-profil {
    text-align: center !important;
}
img.img-medias {
    max-width: 300px !important;
}
img.img-aboutme {
    max-width: 210px !important;
}
#mega-menu-wrap-primary .mega-menu-toggle {
    border-radius: 15px !important;
}
section#my-vision a.d-block span {
    display: block;
    font-family: 'Playfair Display', serif;
    color: var(--primary-color);
    font-size: calc(1.275rem + .3vw);
    font-weight: 500;
    line-height: 1.2;
}
.g-5, .gx-5 {
    --bs-gutter-x: 0rem !important;
}
@media (max-width: 1300px) {
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link, .main-navigation ul li a {
        color: #fff !important;
    }
}
@media (max-width: 992px) {
    button#search-open {
        display: none !important;
    }
}
@media (max-width: 768px) {
    section#my-vision {
        background-color: #215f8b !important;
        background-image: initial !important;
    }
    section#my-vision .text-dark {
        color: #fff !important;
    }
    section#my-vision a.d-block span {
        color: #fff !important;
    }
    section#formation-parcours {
        background-color: #215f8b !important;
        background-image: initial !important;
    }
    #scrollTopBtn {
        bottom: 15px !important;
        right: 15px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
}
@media (min-width: 576px) {
    div.container {
        width: 100% !important;
        max-width: 100% !important;
    }
    .g-5, .gx-5 {
        --bs-gutter-x: 0rem !important;
    }
}
@media (min-width: 768px) {
    section.bg-section-profil {
        text-align: left !important;
    }
}
@media (min-width: 992px) {
    body {
        overflow-x: visible !important;
    }
}
@media (min-width: 1200px) {
    img.img-aboutme {
        max-width: 260px !important;
    }
}
@media (min-width: 1400px) {
    div.container {
        max-width: 1300px !important;
    }
}