/* === Import Fonts (Alternative si non fait en HTML) === */
/* @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Lato:wght@400;700&display=swap'); */

/* === CSS Variables pour les Thèmes === */
:root {
    /* Variables générales - utilisées par défaut ou peuvent être surchargées */
    --font-primary: 'Lato', sans-serif;
    --font-secondary: 'Merriweather', serif;
    --section-padding: 80px 0;
    --section-transition-padding: 40px 0;
    --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --card-shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --transition-speed: 0.3s;
    --border-radius-base: 0.375rem; /* Default Bootstrap radius */
    --border-radius-card: 15px; /* Radius personnalisé pour les cartes */
}

/* Thème Personnalisé (custom) - Basé sur la maquette */
[data-bs-theme="custom"] {
    --bs-body-bg: #FAF3E0; /* Beige clair  FAF3E0*/
    --bs-body-color: #4A4A4A; /* Gris foncé pour le texte */
    --navbar-bg: #964a13; /* Marron (similaire à la barre Figma) 8B4513 */
    --navbar-color: #FFFFFF; /* Texte navbar blanc */
    --navbar-hover-color: #FAF3E0; /* Texte navbar hover beige */
    --hero-overlay-bg: rgba(0, 0, 0, 0.4); /* Assombrissement pour l'image héro */
    --hero-text-color: #FFFFFF; /* Texte blanc sur l'image héro */
    --section-bg-alt: #D4E2D4; /* Vert clair pour sections alternées (comme À propos) */
    --card-bg: #FFFFFF; /* Fond blanc pour les cartes */
    --card-header-bg: #A6D0DD; /* Bleu clair pour header des cartes */
    --card-header-color: #333; /* Texte sombre pour header des cartes */
    --card-border-color: transparent; /* Pas de bordure par défaut */
    --highlight-color: #8B4513; /* Couleur marron pour le texte mis en évidence */
    --footer-bg: #964a13;
    --footer-color: #FFFFFF;
    --about-text-box-bg: #FFFFFF; /* Gris foncé pour la boite "A propos" */
    --about-text-box-color: #4A4A4A; /* Texte blanc dans la boite "A propos" */
    --about-image-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    --theme-toggler-bg: #FAF3E0; /* Fond du bouton theme */
    --theme-toggler-color: #964a13; /* Couleur icône/texte bouton theme 8B4513*/
}

/* Thème Clair (light) */
[data-bs-theme="light"] {
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
    --navbar-bg: #f8f9fa;
    --navbar-color: #000000;
    --navbar-hover-color: #0d6efd;
    --hero-overlay-bg: rgba(255, 255, 255, 0.3);
    --hero-text-color: #212529;
    --section-bg-alt: #f8f9fa;
    --card-bg: #ffffff;
    --card-header-bg: #e9ecef;
    --card-header-color: #212529;
    --card-border-color: var(--bs-border-color);
    --highlight-color: #0d6efd;
    --footer-bg: #f8f9fa;
    --footer-color: #6c757d;
    --about-text-box-bg: #e9ecef;
    --about-text-box-color: #212529;
    --about-image-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    --theme-toggler-bg: #0d6efd;
    --theme-toggler-color: #ffffff;
}

/* Thème Sombre (dark) */
[data-bs-theme="dark"] {
    /* Utilise les variables --bs-dark-* de Bootstrap mais on peut les surcharger */
    --bs-body-bg: #212529;
    --bs-body-color: #dee2e6;
    --navbar-bg: #343a40;
    --navbar-color: #ffffff;
    --navbar-hover-color: #adb5bd;
    --hero-overlay-bg: rgba(0, 0, 0, 0.6);
    --hero-text-color: #ffffff;
    --section-bg-alt: #343a40;
    --card-bg: #2b3035; /* Un peu plus clair que le body */
    --card-header-bg: #495057;
    --card-header-color: #ffffff;
    --card-border-color: #495057;
    --highlight-color: #6ea8fe; /* Bleu clair pour contraste */
    --footer-bg: #343a40;
    --footer-color: #adb5bd;
    --about-text-box-bg: #495057;
    --about-text-box-color: #dee2e6;
    --about-image-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    --theme-toggler-bg: #adb5bd;
    --theme-toggler-color: #212529;
}

/* === Styles Généraux === */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px; /* Ajuster selon la hauteur de la navbar fixe */
    height: 100%;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: var(--font-secondary);
}

.section-padding {
    padding: var(--section-padding);
}

.section-bg-alt {
    background-color: var(--section-bg-alt);
    transition: background-color var(--transition-speed) ease;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
    font-weight: 700;
    position: relative;
    padding-bottom: 15px;
    color: var(--bs-body-color); /* Utilise la couleur du texte du body par défaut */
}
/* Soulignement décoratif pour les titres */
.section-title::after {
    content: '';
    position: absolute;
    display: block;
    width: 60px;
    height: 3px;
    background: var(--highlight-color); /* Utilise la couleur highlight du thème */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: background-color var(--transition-speed) ease;
}

/* === Navbar === */
.navbar-custom {
    background-color: var(--navbar-bg);
    transition: background-color var(--transition-speed) ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
    color: var(--navbar-color);
    transition: color var(--transition-speed) ease;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus {
    color: var(--navbar-hover-color);
}

.navbar-custom .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1); /* Ajuster si nécessaire */
}
/* Adapte la couleur de l'icône du toggler */
.navbar-custom .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
[data-bs-theme="light"] .navbar-custom .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Bouton Theme Toggler */
.theme-toggler-btn {
    background-color: var(--theme-toggler-bg) !important; /* Override Bootstrap */
    color: var(--theme-toggler-color) !important; /* Override Bootstrap */
    border: none;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}


/* === Section Accueil (Hero) === */
#accueil {
    min-height: 100vh;
    position: relative;
    /* background: url('https://images.unsplash.com/photo-1531971589569-0d9370cbe1e5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDd8fGZhbnRhc3klMjBsYW5kc2NhcGV8ZW58MHx8fHwxNjE4NzUzMDk5&ixlib=rb-1.2.1&q=80&w=1920') no-repeat center center; */
    background: url('/assets/img/Accueil_AI_generated.png') no-repeat center center;
    background-size: cover;
    color: var(--hero-text-color);
}

/* Overlay pour assombrir/éclaircir l'image et améliorer la lisibilité */
#accueil::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--hero-overlay-bg);
    z-index: 1;
    transition: background-color var(--transition-speed) ease;
}

.hero-content {
    position: relative; /* Pour être au-dessus de l'overlay */
    z-index: 2;
    padding: 20px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4); /* Ombre portée pour lisibilité */
}

.hero-content h1 {
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 3.5rem; /* Ajuster si besoin */
}
.hero-content p {
    font-size: 1.5rem; /* Ajuster si besoin */
}

/* Indicateur de scroll vers le bas */
.scroll-down-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    animation: bounce 2s infinite;
}
.scroll-down-indicator a {
    color: var(--hero-text-color);
    font-size: 1.8rem;
    text-decoration: none;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translate(-50%, 0);}
  40% {transform: translate(-50%, -15px);}
  60% {transform: translate(-50%, -7px);}
}

/* === Section À Propos === */
.highlight-text {
    color: var(--highlight-color);
    transition: color var(--transition-speed) ease;
}

.about-text-box {
    background-color: var(--about-text-box-bg);
    color: var(--about-text-box-color);
    padding: 30px;
    border-radius: var(--border-radius-card); /* Utilise le radius des cartes */
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.about-image-wrapper {
    display: inline-block; /* Pour que l'ombre et la rotation s'appliquent bien */
    border-radius: var(--border-radius-card);
    overflow: hidden; /* Cache les coins de l'image si elle dépasse */
    transform: rotate(3deg); /* Légère rotation comme sur Figma */
    box-shadow: var(--about-image-shadow);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.about-image-wrapper:hover {
     transform: rotate(0deg) scale(1.03); /* Effet au survol */
}

.about-image {
    display: block; /* Empêche les espaces blancs sous l'image */
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-card); /* Correspond au wrapper */
}

/* === Section Compétences === */
.competence-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-card);
    overflow: hidden; /* Assure que le header respecte le border-radius */
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease,
                background-color var(--transition-speed) ease,
                border-color var(--transition-speed) ease;
}

.competence-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--card-shadow-hover);
}

.competence-card .card-header {
    background-color: var(--card-header-bg);
    color: var(--card-header-color);
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid var(--card-border-color);
    padding: 0.75rem 1rem;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.competence-card .card-body {
    padding: 1.5rem 1rem;
    min-height: 100px; /* Assure une hauteur minimale pour l'alignement */
}

.skill-icon {
    height: 90px; /* Ajuster la taille des icônes */
    width: auto;
    max-width: 100%; /* Empêche le débordement */
    object-fit: contain; /* Garde les proportions */
}
.skill-icon-large {
    font-size: 2.8rem; /* Taille pour les icônes Font Awesome/Bootstrap */
    color: var(--bs-body-color); /* Utilise couleur texte thème */
    transition: color var(--transition-speed) ease;
}

/* ======== Style des Cartes Projets ======== */

.project-card {
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-card);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    background-color: var(--card-bg);
}

.project-card:hover {
    transform: translateY(-8px); /* Soulèvement un peu plus marqué */
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.17) !important;
}

.project-image {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    /* Hauteur fixe et object-fit pour des images de même taille */
    height: 200px; /* Ajustez cette hauteur selon vos images */
    object-fit: cover; /* Recadre l'image pour remplir l'espace sans déformer */
    object-position: center; /* Centre l'image dans le recadrage */
    background-color: #e9ecef; /* Couleur de fond si l'image charge lentement */
}

.project-card .card-body {
    padding: 1.25rem;
}

.project-card .card-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.project-card .card-text.small {
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.project-tags .badge {
    font-size: 0.75em;
    padding: 0.4em 0.6em;
    margin-bottom: 0.3rem; /* Espace si les badges passent à la ligne */
}

/* Style pour les liens en bas de carte */
.project-links .btn {
    font-size: 0.85rem;
    padding: 0.3rem 0.8rem;
}

.project-links .btn i {
    margin-right: 0.3rem; /* Espace entre l'icône et le texte */
    vertical-align: text-bottom; /* Mieux aligner l'icône */
}

/* ======== VEILLE TECHNOLOGIQUE (Adapté aux Thèmes) ======== */

/* Titres des sous-sections (Vidéos, Articles) */
.veille-subsection-title {
    font-family: var(--font-secondary); /* Hérite de la police secondaire pour les titres */
    font-size: 1.75rem;
    font-weight: 700; /* Ou 600 si vous préférez plus léger */
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--bs-body-color); /* Utilise la couleur du texte du body par défaut */
    position: relative; /* Pour le pseudo-élément de soulignement */
    padding-bottom: 10px; /* Espace pour le soulignement */
    transition: color var(--transition-speed) ease;
}
/* Soulignement décoratif pour les titres de sous-section, similaire au section-title */
.veille-subsection-title::after {
    content: '';
    position: absolute;
    display: block;
    width: 50px; /* Un peu plus petit que le titre principal de section */
    height: 2px; /* Un peu plus fin */
    background: var(--highlight-color); /* Utilise la couleur highlight du thème */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: background-color var(--transition-speed) ease;
}
.veille-subsection-title i {
    color: var(--highlight-color); /* Icône prend la couleur de mise en évidence */
    transition: color var(--transition-speed) ease;
}

/* Cartes pour les Vidéos */
.veille-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-card); /* Utilise votre radius de carte personnalisé */
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease,
                background-color var(--transition-speed) ease,
                border-color var(--transition-speed) ease;
    overflow: hidden; /* Pour que l'iframe respecte le border-radius */
}
.veille-card:hover {
    transform: translateY(-6px); /* Moins que les projets pour varier un peu */
    box-shadow: var(--card-shadow-hover);
}

/* Assure que l'iframe prend bien la place dans le ratio et respecte les coins */
.veille-card .ratio iframe {
    border-top-left-radius: var(--border-radius-card); /* Ajusté pour correspondre à la carte */
    border-top-right-radius: var(--border-radius-card);
    border-bottom-left-radius: 0; /* Pas de radius en bas si le body suit */
    border-bottom-right-radius: 0;
}
/* Si vous voulez que l'iframe ait un radius complet et que le corps de la carte soit distinct: */
/* .veille-card .ratio iframe { border-radius: var(--border-radius-card); margin-bottom: -1px; } */


.veille-card .card-body {
    padding: 1rem 1.25rem; /* Espacement interne */
    color: var(--bs-body-color); /* Texte de la carte utilise la couleur du body */
}

.veille-card .card-title {
    font-family: var(--font-secondary);
    font-size: 1.1rem;
    font-weight: 600; /* Un peu plus gras que le texte normal */
    margin-bottom: 0.5rem;
    color: var(--bs-body-color); /* Ou var(--highlight-color) si vous voulez un titre plus coloré */
}

.veille-card .card-text.small {
    font-size: 0.875rem; /* Taille standard pour le texte petit */
    line-height: 1.5;
    /* La couleur est héritée de .card-body ou peut être spécifiée avec --bs-secondary-color par exemple */
}


/* Liste pour les Articles */
.veille-list {
    border-radius: var(--border-radius-card);
    box-shadow: var(--card-shadow);
    overflow: hidden; /* Pour que les items respectent le radius */
    border: 1px solid var(--card-border-color); /* Ajout d'une bordure pour la cohérence */
    background-color: var(--card-bg); /* Fond de la liste */
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.veille-item {
    background-color: transparent; /* L'item lui-même est transparent, le fond est sur .veille-list */
    padding: 1.25rem;
    border-bottom: 1px solid var(--card-border-color); /* Utilise la couleur de bordure du thème */
    transition: border-color var(--transition-speed) ease;
    color: var(--bs-body-color);
}
.veille-item:last-child {
    border-bottom: none;
}

.veille-title a {
    font-family: var(--font-secondary);
    color: var(--highlight-color); /* Titre de l'article utilise la couleur de mise en évidence */
    font-weight: 600;
    font-size: 1.05rem; /* Légèrement plus petit que le titre de la carte vidéo */
    text-decoration: none; /* Bootstrap l'ajoute, mais pour être sûr */
    transition: color var(--transition-speed) ease;
}
.veille-title a:hover {
    /* Vous pouvez ajouter un effet de soulignement Bootstrap si vous le souhaitez,
       ou une légère modification de couleur gérée par le thème au survol du lien.
       Ex: text-decoration: underline !important; (si non géré par Bootstrap pour cette couleur)
    */
    opacity: 0.85; /* Léger effet d'opacité au survol */
}
.veille-title a i.small { /* Pour l'icône de lien externe */
    font-size: 0.8em;
    vertical-align: middle;
}


.veille-source {
    font-size: 0.8em;
    color: var(--bs-secondary-color, var(--bs-body-color)); /* Utilise la couleur secondaire de Bootstrap ou la couleur du body si non définie */
    opacity: 0.8; /* Pour la rendre un peu moins proéminente */
    display: block;
    margin-bottom: 0.5rem;
    transition: color var(--transition-speed) ease, opacity var(--transition-speed) ease;
}

.veille-description {
    font-size: 0.9rem;
    line-height: 1.6;
    /* La couleur est héritée de .veille-item */
}


/* ======== CONTACT (Adapté aux Thèmes) ======== */

.contact-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-card); /* Utilise votre radius de carte personnalisé */
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease,
                background-color var(--transition-speed) ease,
                border-color var(--transition-speed) ease;
    position: relative; /* Important pour le stretched-link */
}

.contact-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--card-shadow-hover);
}

.contact-icon {
    font-size: 3rem; /* Taille des icônes de contact */
    color: var(--highlight-color); /* Utilise la couleur de mise en évidence du thème */
    margin-bottom: 1rem !important; /* Forcer la marge avec !important si Bootstrap est trop spécifique */
    transition: color var(--transition-speed) ease;
}

.contact-title {
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--bs-body-color); /* Couleur de texte principale du thème */
    transition: color var(--transition-speed) ease;
}

.contact-text {
    font-size: 1rem;
    color: var(--bs-body-color); /* Couleur de texte principale du thème */
    transition: color var(--transition-speed) ease;
}

.contact-text a {
    color: var(--bs-body-color); /* Le lien prend la couleur du texte pour un look plus intégré */
    text-decoration: none; /* Pas de soulignement par défaut */
    font-weight: 500; /* Légèrement plus gras pour le lien */
    transition: color var(--transition-speed) ease;
}

/* Au survol de la carte (pas seulement du lien), le lien change de style */
.contact-card:hover .contact-text a {
    color: var(--highlight-color); /* Le lien prend la couleur de mise en évidence au survol de la carte */
    text-decoration: underline;
}

/* Stretched-link rend toute la carte cliquable. Assurez-vous que la carte a position:relative */
.contact-card a.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

/* === Footer === */
.footer-custom {
    background-color: var(--footer-bg);
    border-top: 1px solid var(--bs-border-color-translucent);
    transition: background-color var(--transition-speed) ease;
}
.footer-custom .text-muted {
     color: var(--footer-color) !important; /* Force la couleur du thème */
     transition: color var(--transition-speed) ease;
}

.footer-custom .footer-brand,
.footer-custom .footer-link {
    color: var(--navbar-color);
    transition: color var(--transition-speed) ease;
}

.footer-custom .footer-link:hover,
.footer-custom .footer-link:focus {
    color: var(--navbar-hover-color);
}

/* === Responsive === */
@media (max-width: 991.98px) {
    html {
        scroll-padding-top: 60px; /* Ajuster si hauteur navbar change */
    }
    .section-padding {
        padding: 60px 0;
    }
    .hero-content h1 {
        font-size: 2.8rem;
    }
    .hero-content p {
        font-size: 1.2rem;
    }
    .about-image-wrapper {
        margin-top: 30px;
        transform: rotate(0deg); /* Enlever rotation sur mobile/tablette */
        max-width: 80%; /* Limiter la taille sur mobile */
    }
    .competence-card .card-body {
        min-height: 80px;
    }
    .skill-icon {
        height: 55px;
    }
     .skill-icon-large {
        font-size: 2.5rem;
    }
}

@media (max-width: 767.98px) {
    .hero-content h1 {
        font-size: 2.2rem;
    }
    .hero-content p {
        font-size: 1rem;
    }
    .section-title {
        margin-bottom: 40px;
    }

    .project-image {
        height: 180px; /* Un peu moins haut sur tablette/mobile */
    }
    .veille-subsection-title {
        font-size: 1.5rem; /* Titres de sous-section un peu plus petits sur mobile */
    }
    .veille-card .card-body {
        padding: 1rem;
    }
    .veille-item {
        padding: 1rem;
    }
    .contact-icon {
        font-size: 2.5rem; /* Icônes un peu plus petites sur mobile */
    }
    .contact-card {
        padding: 1.25rem !important; /* Ajuster le padding sur mobile si p-4 est trop grand */
    }
}


.section-transition{
    /* Gradient entre la couleur du background et la couleur de la section-alt*/
    background: linear-gradient(to bottom, var(--bs-body-bg), var(--section-bg-alt));
    transition: background-color var(--transition-speed) ease;
    padding: var(--section-transition-padding);
}

.section-transition-inverted{
    /* Gradient entre la couleur de la section-alt et la couleur du background*/
    background: linear-gradient(to bottom, var(--section-bg-alt), var(--bs-body-bg));
    transition: background-color var(--transition-speed) ease;
    padding: var(--section-transition-padding);
}

.text-justify {
    text-align: justify;
    text-justify: inter-word; /* Justification entre les mots */
}

#login-section {
    /* Vous pouvez forcer un fond spécifique si besoin */
    /* background-color: #f8f9fa; */ /* Exemple: section-bg-alt */
    min-height: calc(100vh - 100px); /* Essaye de prendre de la hauteur (ajuster 100px selon hauteur header/footer) */
    display: flex;
    align-items: center; /* Centre verticalement le contenu de la section */
}

.ml-pc-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-card);
    overflow: hidden; /* Assure que le header respecte le border-radius */
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease,
                background-color var(--transition-speed) ease,
                border-color var(--transition-speed) ease;
}

.ml-pc-card .card-header {
    background-color: var(--card-header-bg);
    color: var(--card-header-color);
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid var(--card-border-color);
    padding: 0.75rem 1rem;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.ml-pc-card .card-body {
    padding: 1.5rem 1rem;
    min-height: 100px; /* Assure une hauteur minimale pour l'alignement */
}