/* /assets/css/style.css */

/* Définition de nos variables de couleurs pour respecter le thème */
:root {
    --unt-blue: #0d6efd; /* Le bleu primaire de Bootstrap, on peut le changer ici */
    --unt-light: #f8f9fa; /* Le gris clair de Bootstrap */
    --unt-dark: #212529;  /* Le noir doux de Bootstrap */
}

/* Appliquer une police plus moderne sur tout le site */
body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /*padding-top: 56px; */
    /* Hauteur de la barre de navigation fixe */
}

/* Style pour la section "Héros" de la page d'accueil */
.hero-section {
    background: linear-gradient(rgba(13, 110, 253, 0.7), rgba(13, 110, 253, 0.8)), url('https://via.placeholder.com/1920x1080.png/0d6efd/ffffff?text=Image+de+fond+UNT') no-repeat center center;
    background-size: cover;
}

/* Personnalisation du bouton Scroll to Top */
#scrollTopButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* Caché par défaut */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1.5; /* Ajuster pour centrer l'icône verticalement */
    z-index: 1000;
}

/* Surcharge des couleurs Bootstrap (si nécessaire) */
.bg-primary {
    background-color: var(--unt-blue) !important;
}

.text-primary {
    color: var(--unt-blue) !important;
}



.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #ffffff;
    opacity: 0.9;
}

/* /assets/css/style.css (ajouts) */

/* ======================================= */
/* STYLES SPÉCIFIQUES À LA PAGE D'ACCUEIL   */
/* ======================================= */

/* Amélioration de la section Héros */
.hero-section {
    min-height: 80vh; /* Hauteur minimale de la section */
    /* L'image de fond est déjà définie, on peut l'ajuster si besoin */
}

/* Style pour les cartes de formation */
.formation-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

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

.formation-card .icon-circle {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Style pour les cartes d'actualités */
.news-card {
    transition: box-shadow 0.3s ease;
}

.news-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.news-card img {
    object-fit: cover; /* Assure que l'image remplit son conteneur sans se déformer */
}

/* Style pour la liste des événements */
.event-date {
    background-color: var(--unt-blue);
    color: white;
    padding: 10px;
    border-radius: 8px;
    width: 70px; /* Largeur fixe pour l'alignement */
    flex-shrink: 0; /* Empêche la réduction de la largeur */
}

.event-details {
    flex-grow: 1;
}

/* Style pour la bannière CTA (Call To Action) */
.cta-banner {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://via.placeholder.com/1920x600.png/212529/ffffff?text=Campus+UNT') no-repeat center center;
    background-size: cover;
    background-attachment: fixed; /* Effet de parallaxe simple */
}
/* /assets/css/style.css (ajouts) */

/* ======================================= */
/* STYLES SPÉCIFIQUES À LA PAGE FORMATIONS */
/* ======================================= */

/* Style pour l'en-tête de la page */
.page-header {
    background: linear-gradient(rgba(13, 110, 253, 0.8), rgba(13, 110, 253, 0.9)), url('https://via.placeholder.com/1920x400.png/0d6efd/ffffff?text=UNT+Campus') no-repeat center center;
    background-size: cover;
}

/* Style pour les cartes de la liste des formations */
.formation-list-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e9ecef; /* Bordure subtile */
}

.formation-list-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    border-color: var(--unt-blue);
}

.formation-list-card .card-title a:hover {
    color: var(--unt-blue) !important;
}

/* /assets/css/style.css (ajouts) */

/* ======================================================= */
/* STYLES SPÉCIFIQUES À LA PAGE DÉTAIL FORMATION           */
/* ======================================================= */

/* Titres de section dans le contenu principal */
.section-title {
    font-weight: 700;
    color: var(--unt-dark);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--unt-blue);
    display: inline-block; /* Pour que la bordure ne prenne pas toute la largeur */
}

/* Carte d'information latérale */
.info-card {
    position: sticky; /* Reste visible au scroll sur les grands écrans */
    top: 100px; /* Espace par rapport à la navbar fixe */
    border-left: 4px solid var(--unt-blue);
    border-radius: 0.5rem;
}

.info-card .card-title {
    color: var(--unt-blue);
    font-weight: 600;
}

/* Tableau des cours */
.course-table thead {
    font-weight: 600;
}

.course-table tbody tr:hover {
    background-color: #eef5ff; /* Un bleu très léger au survol */
}

/* /assets/css/style.css (ajouts) */

/* ======================================= */
/* STYLES SPÉCIFIQUES À LA PAGE ÉVÉNEMENTS */
/* ======================================= */

.event-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.event-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important;
}

.event-card-date {
    background-color: var(--unt-light);
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.5rem;
    height: fit-content;
}

.event-card-date .jour {
    font-size: 2rem;
    font-weight: 700;
    color: var(--unt-blue);
    line-height: 1;
}

.event-card-date .mois {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
}
.event-card-date .annee {
    font-size: 0.8rem;
    color: #adb5bd;
}

.event-card img {
    height: 200px;
    object-fit: cover;
}

/* /assets/css/style.css (REMPLACEMENT DES STYLES POUR LA PAGE ACTUALITÉS) */

/* ======================================================= */
/*      DESIGN "MAGAZINE NUMÉRIQUE" POUR ACTUALITES.PHP    */
/* ======================================================= */

/* --- Ambiance générale de la page --- */
/* Pour que cela fonctionne, assurez-vous que le body ou un conteneur parent
   a une couleur de fond, par exemple : body { background-color: #f8f9fa; } */
.page-header {
    /* Style déjà défini, on peut le conserver */
}

/* --- Refonte de la Carte Article en Vedette --- */
.featured-article-card {
    border: none;
    border-radius: 1rem; /* Angles plus doux */
    min-height: 450px;
    position: relative;
    overflow: hidden; /* Crucial pour l'effet de zoom */
    display: flex;
    align-items: flex-end; /* Aligner le contenu en bas */
}

.featured-article-card .card-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.featured-article-card:hover .card-img {
    transform: scale(1.05); /* Effet de zoom subtil au survol */
}

/* On remplace card-img-overlay par un div personnalisé pour un meilleur contrôle */
.featured-article-card .card-content {
    position: relative;
    z-index: 2;
    padding: 2.5rem;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
}

.featured-article-card .card-title {
    font-family: 'Georgia', 'Times New Roman', serif; /* Police éditoriale pour le titre */
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
    margin-bottom: 1rem;
}

.featured-article-card .card-text {
    font-size: 1.1rem;
    max-width: 80%;
    opacity: 0.9;
}

.featured-article-card .article-meta {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.8;
}

/* --- Refonte des Cartes Articles Standards --- */
.article-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 1rem; /* Angles plus doux */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

.article-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.article-card .card-img-top {
    border-radius: 1rem 1rem 0 0; /* Arrondir seulement les coins supérieurs de l'image */
    height: 240px;
    object-fit: cover;
}

.article-card .card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.article-card .card-title {
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--unt-text-dark);
    margin-bottom: 0.75rem;
}

.article-card .article-meta {
    font-size: 0.85rem;
    color: var(--unt-text-muted);
    margin-bottom: 1rem;
}

.article-card .card-text {
    flex-grow: 1; /* Pousse le footer en bas */
    color: #495057;
}

.article-card .card-footer {
    padding: 0 1.5rem 1.5rem;
    background: transparent;
    border-top: none;
}

/* Réinvention du bouton "Lire la suite" */
.article-card .btn-outline-primary {
    color: var(--unt-blue);
    font-weight: 700;
    text-decoration: none;
    border: none;
    padding: 0;
}
.article-card .btn-outline-primary::after {
    content: '\f061'; /* Icône de flèche Font Awesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}
.article-card .btn-outline-primary:hover {
    background: none;
    color: var(--unt-blue);
}
.article-card .btn-outline-primary:hover::after {
    transform: translateX(5px);
}

/* --- Pagination Raffinée --- */
.pagination {
    --bs-pagination-padding-x: 0.9rem;
    --bs-pagination-padding-y: 0.5rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: var(--unt-blue);
    --bs-pagination-bg: #fff;
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-color: #dee2e6;
    --bs-pagination-hover-color: #0a58ca;
    --bs-pagination-hover-bg: #e9ecef;
    --bs-pagination-hover-border-color: #dee2e6;
    --bs-pagination-focus-color: #0a58ca;
    --bs-pagination-focus-bg: #e9ecef;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--unt-blue);
    --bs-pagination-active-border-color: var(--unt-blue);
    --bs-pagination-disabled-color: #6c757d;
    --bs-pagination-disabled-bg: #fff;
    --bs-pagination-disabled-border-color: #dee2e6;
}
.page-item:first-child .page-link, .page-item:last-child .page-link {
    border-radius: 50rem; /* Arrondir complètement les boutons Préc/Suivant */
}

/* ======================================================= */
/* STYLES SPÉCIFIQUES À LA PAGE ÉQUIPE DIRIGEANTE          */
/* ======================================================= */

/* --- Contexte global de la section --- */
.team-section-bg {
    background-color: #f8f9fa; /* Un fond très clair pour contraster */
}

/* --- La carte de profil : le cœur du design --- */
.team-card {
    position: relative;
    background: #ffffff;
    border-radius: 15px;
    text-align: center;
    overflow: hidden; /* Crucial pour les effets de survol */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* --- Effet de "lueur" au survol --- */
.team-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(13, 110, 253, 0.1), transparent 50%);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
    opacity: 0;
    z-index: 1;
}

.team-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

.team-card:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* --- Conteneur de l'image --- */
.team-card-img-container {
    height: 280px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.team-card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; /* S'assurer que le haut de l'image est visible */
    transition: transform 0.5s ease;
}

.team-card:hover .team-card-img-container img {
    transform: scale(1.1);
}

/* --- Contenu textuel de la carte --- */
.team-card-content {
    padding: 25px 20px 30px;
    position: relative;
    z-index: 2; /* Pour être au-dessus de la lueur */
    background: #ffffff;
}

.team-card-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--unt-dark);
    margin-bottom: 5px;
}

.team-card-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--unt-blue);
    margin-bottom: 0;
}

/* --- Icônes des réseaux sociaux (effet de survol) --- */
.team-card-social {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 3; /* Au-dessus de tout */
    transform: translateX(60px); /* Caché par défaut */
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

.team-card:hover .team-card-social {
    transform: translateX(0);
    opacity: 1;
}

.team-card-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--unt-blue);
    text-decoration: none;
    border-radius: 50%;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.team-card-social a:hover {
    background-color: var(--unt-blue);
    color: #ffffff;
    transform: scale(1.1);
}

/* /assets/css/style.css (ajouts) */

/* ======================================================= */
/*      STYLES SPÉCIFIQUES À LA PAGE LISTING CELLULES      */
/* ======================================================= */

.cell-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cell-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--unt-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.cell-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.cell-card:hover::before {
    transform: scaleX(1);
}

.cell-card-icon {
    font-size: 3rem;
    color: var(--unt-blue);
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.cell-card-content {
    flex-grow: 1; /* Pousse le footer en bas */
    display: flex;
    flex-direction: column;
}

.cell-card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--unt-dark);
    margin-bottom: 15px;
}

.cell-card-description {
    color: #6c757d;
    line-height: 1.6;
    flex-grow: 1; /* Prend l'espace disponible */
}

.cell-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #f1f1f1;
    margin-top: 20px;
    font-size: 0.9rem;
}

.cell-card-footer span {
    color: #6c757d;
    font-weight: 500;
}

.cell-card-link {
    color: var(--unt-blue);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cell-card-link i {
    transition: transform 0.3s ease;
    margin-left: 5px;
}

.cell-card:hover .cell-card-link i {
    transform: translateX(5px);
}

/* /assets/css/style.css (ajouts) */

/* ======================================================= */
/*      STYLES DENSES ET UNIQUES POUR LA MÉDIATHÈQUE       */
/* ======================================================= */

/* --- Barre de filtrage --- */
.media-filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}
.media-filters-bar .search-wrapper,
.media-filters-bar .select-wrapper {
    position: relative;
    flex-grow: 1;
}
.media-filters-bar i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    color: #adb5bd;
}
.media-filters-bar .form-control,
.media-filters-bar .form-select {
    padding-left: 45px;
    height: 50px;
    border-radius: 8px;
    border: 1px solid #ced4da;
    transition: all 0.3s ease;
}
.media-filters-bar .form-control:focus,
.media-filters-bar .form-select:focus {
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
    border-color: var(--unt-blue);
}

/* --- La fiche de document --- */
.media-card {
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    border: 1px solid #e9ecef;
    transition: all 0.4s ease;
}

.media-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: var(--unt-blue);
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.media-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #dee2e6;
}
.media-card:hover::before {
    width: 100%;
}

.media-card-icon-wrapper {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    text-align: center;
    padding: 30px;
    font-size: 4rem;
    color: var(--unt-blue);
}

.media-card-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.media-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--unt-dark);
    margin-bottom: 10px;
}

.media-card-description {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 20px;
}

.media-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #adb5bd;
    border-top: 1px solid #f1f1f1;
    padding-top: 15px;
}
.media-card-meta i {
    margin-right: 5px;
}

.media-card-download-btn {
    background: var(--unt-blue);
    color: white;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: background 0.3s ease;
}

.media-card-download-btn:hover {
    background: #0b5ed7;
    color: white;
}


/* /assets/css/style.css (ajouts) */

/* ======================================================= */
/*      STYLES DENSES ET UNIQUES POUR LA PAGE CONTACT      */
/* ======================================================= */

.contact-wrapper {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
}

/* --- Colonne d'information (gauche) --- */
.contact-info-column {
    background: linear-gradient(-45deg, var(--unt-blue), #0b5ed7);
    color: #fff;
    display: flex;
    flex-direction: column;
}

.contact-info-content {
    padding: 40px;
    flex-grow: 1;
}

.contact-info-title {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 2rem;
}

.contact-info-text {
    opacity: 0.9;
    line-height: 1.7;
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}
.info-item-icon {
    font-size: 1.5rem;
    width: 40px;
    margin-right: 20px;
    flex-shrink: 0;
}
.info-item-text h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
}
.info-item-text p {
    margin-bottom: 0;
    opacity: 0.9;
}

.map-container {
    width: 100%;
    height: 250px; /* Hauteur de la carte */
}

/* --- Colonne du formulaire (droite) --- */
.contact-form-column {
    background: #f8f9fa;
}

.contact-form-content {
    padding: 40px;
}

.contact-form-title {
    font-weight: 700;
    color: var(--unt-dark);
    font-size: 2rem;
    margin-bottom: 30px;
}

.form-group .form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

.form-group .form-control {
    border: 2px solid #ced4da;
    border-radius: 8px;
    padding: 12px 15px;
    height: auto;
    background: #fff;
    transition: all 0.3s ease;
}

.form-group .form-control:focus {
    border-color: var(--unt-blue);
    box-shadow: 0 5px 15px rgba(13, 110, 253, 0.1);
}

textarea.form-control {
    resize: vertical;
}

.btn-contact-submit {
    background: var(--unt-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 30px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.2);
    transition: all 0.3s ease;
}

.btn-contact-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(13, 110, 253, 0.3);
}

.btn-contact-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}


/* /assets/css/style.css (ajouts) */

/* ======================================================= */
/*      STYLES DÉDIÉS AU LOGO DE LA NAVIGATION             */
/* ======================================================= */

.navbar-brand.logo-unt {
    padding-top: 5px; /* Ajustement fin du padding vertical */
    padding-bottom: 5px;
    transition: opacity 0.3s ease;
}

.navbar-brand.logo-unt:hover {
    opacity: 0.9;
}

/* --- Style pour le logo complet (desktop) --- */
.logo-unt .logo-complet {
    max-height: 45px; /* Hauteur maximale pour ne pas déformer la barre de navigation. C'EST LA PROPRIÉTÉ LA PLUS IMPORTANTE. */
    width: auto; /* La largeur s'ajustera automatiquement */
}

/* --- Style pour l'icône seule (mobile) --- */
.logo-unt .logo-icone {
    max-height: 40px; /* Légèrement plus petit pour un meilleur équilibre sur mobile */
    width: auto;
}

/* Optionnel : Ajuster légèrement la hauteur de la barre de navigation si le logo l'exige */
.navbar {
    min-height: 60px; /* Assure une hauteur minimale pour un bon espacement */
}

/* S'assurer que les éléments de la nav sont bien centrés verticalement avec le nouveau logo */
.navbar .nav-link, .navbar .btn {
    display: flex;
    align-items: center;
}

/* /assets/css/style.css (ajouts) */

/* ======================================================= */
/*      STYLES PROFONDS POUR LE CONTENU RICHE (PAGE.PHP)   */
/* ======================================================= */

.page-content {
    color: #343a40; /* Un noir légèrement adouci pour un meilleur confort de lecture */
    font-family: 'Georgia', 'Times New Roman', serif; /* Une police avec empattements, idéale pour les longs textes */
    font-size: 1.15rem;
    line-height: 1.9; /* Un interlignage généreux pour aérer le texte */
}

.page-content h2 {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Retour à une police sans empattement pour les titres */
    font-weight: 700;
    color: var(--unt-dark);
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e9ecef;
}
.page-content h2:first-child {
    margin-top: 0;
}

.page-content p {
    margin-bottom: 1.5rem;
}

.page-content strong {
    color: var(--unt-dark);
}

.page-content a {
    color: var(--unt-blue);
    text-decoration: none;
    font-weight: 600;
    background-image: linear-gradient(var(--unt-blue), var(--unt-blue));
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}
.page-content a:hover {
    background-size: 100% 2px;
}

.page-content blockquote {
    border-left: 5px solid var(--unt-blue);
    margin: 2rem 0;
    padding: 1rem 1.5rem;
    background-color: #f8f9fa;
    font-style: italic;
    font-size: 1.1rem;
    color: #495057;
}

.page-content ul,
.page-content ol {
    padding-left: 2rem;
    margin-bottom: 1.5rem;
}
.page-content li {
    margin-bottom: 0.75rem;
}

.page-content hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
    margin: 3rem 0;
}

/* /assets/css/style.css (ajouts) */

/* ======================================================= */
/*      REMASTERISATION EXPERTE DE LA NAVIGATION           */
/* ======================================================= */

/* --- 1. Définition de notre palette de couleurs --- */
:root {
    --unt-blue: #0d6efd;
    --unt-text-dark: #212529; /* Un noir doux, pas complètement noir */
    --unt-text-muted: #6c757d;
    --unt-hover-bg: #f8f9fa; /* Un gris très subtil pour le fond du survol */
    --unt-border-light: #e9ecef;
}

/* --- 2. Style de la barre de navigation globale --- */
.navbar.bg-white {
    transition: all 0.3s ease-in-out;
    border-bottom: 1px solid var(--unt-border-light); /* Ligne de démarcation nette */
}

/* --- 3. Style des liens de navigation principaux --- */
.navbar-light .navbar-nav .nav-link {
    color: var(--unt-text-dark);
    font-weight: 600; /* Rendre le texte légèrement plus audacieux */
    font-size: 1rem;
    padding: 1.2rem 1rem; /* Augmenter le padding pour un aspect plus aéré */
    position: relative;
    transition: color 0.3s ease;
}

/* L'indicateur animé sous le lien */
.navbar-light .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 10px; /* Positionnement de la barre */
    left: 1rem;
    right: 1rem;
    height: 3px;
    background-color: var(--unt-blue);
    border-radius: 2px;
    transform: scaleX(0); /* Caché par défaut */
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Au survol, le texte devient bleu et la barre apparaît */
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--unt-blue);
}
.navbar-light .navbar-nav .nav-link:hover::after {
    transform: scaleX(1);
}

/* Pour le lien actif, on force la couleur et l'affichage de la barre */
.navbar-light .navbar-nav .nav-link.active {
    color: var(--unt-blue);
}
.navbar-light .navbar-nav .nav-link.active::after {
    transform: scaleX(1);
}

/* --- 4. Refonte complète des menus déroulants --- */
.dropdown-menu {
    border-radius: 12px; /* Adoucir les angles */
    border: 1px solid var(--unt-border-light);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-top: 0.5rem !important; /* Petit espace entre le lien et le menu */
}

.dropdown-item {
    font-weight: 500;
    color: var(--unt-text-dark);
    padding: 0.75rem 1.5rem; /* Padding généreux pour le confort */
    transition: all 0.2s ease-in-out;
}

/* L'état de survol/focus pour les items du dropdown */
.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--unt-blue);
    background-color: var(--unt-hover-bg);
}
.dropdown-item.active, 
.dropdown-item:active {
    color: #fff; /* Texte blanc pour l'item actif */
    background-color: var(--unt-blue);
}

/* --- 5. Style de l'icône du menu mobile (Hamburger) --- */
.navbar-light .navbar-toggler {
    border-color: transparent; /* Pas de bordure sur le bouton */
}
.navbar-light .navbar-toggler-icon {
    /* L'image de fond SVG est définie par Bootstrap, nous pouvons la surcharger si besoin,
       mais navbar-light la colore déjà correctement en sombre. */
    transition: transform 0.3s ease;
}
.navbar-toggler:hover .navbar-toggler-icon {
    transform: rotate(90deg); /* Petite animation au survol */
}

/* /assets/css/style.css (ajouts) */

/* ======================================================= */
/*      STYLES POUR LA RECHERCHE GLOBALE (NAV & RÉSULTATS) */
/* ======================================================= */

/* --- 1. Formulaire dans la barre de navigation --- */
.search-form {
    min-width: 250px; /* Largeur minimale du champ de recherche */
}

.search-form .form-control {
    border-radius: 20px 0 0 20px; /* Angles arrondis à gauche */
    border: 1px solid var(--unt-border-light);
    border-right: none;
    transition: all 0.3s ease;
}
.search-form .form-control:focus {
    box-shadow: none;
    border-color: var(--unt-blue);
}

.search-form .btn-search {
    background-color: var(--unt-blue);
    color: white;
    border-radius: 0 20px 20px 0; /* Angles arrondis à droite */
    border: 1px solid var(--unt-blue);
    transition: background-color 0.3s ease;
}
.search-form .btn-search:hover {
    background-color: #0b5ed7;
}

/* --- 2. Page des résultats de recherche --- */
.search-results-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--unt-border-light);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.search-result-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: var(--unt-blue);
}

.search-result-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: var(--unt-hover-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--unt-blue);
}

.search-result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.search-result-title {
    margin-bottom: 0;
    font-weight: 600;
    color: var(--unt-dark);
}

.search-result-excerpt {
    margin-bottom: 0;
    color: var(--unt-text-muted);
    line-height: 1.6;
}

/* /assets/css/style.css (ajouts) */

/* ======================================================= */
/*      STYLES DÉFINITIFS POUR LA PAGE DÉTAIL ARTICLE      */
/* ======================================================= */

/* --- Fil d'Ariane (Breadcrumbs) --- */
.breadcrumb-nav {
    background-color: var(--unt-hover-bg);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2.5rem;
    border: 1px solid var(--unt-border-light);
}
.breadcrumb {
    margin-bottom: 0;
}
.breadcrumb-item a {
    color: var(--unt-text-muted);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}
.breadcrumb-item a:hover {
    color: var(--unt-blue);
}
.breadcrumb-item.active {
    color: var(--unt-text-dark);
    font-weight: 500;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--unt-text-muted);
}

/* --- Boîte Auteur --- */
.author-box {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: var(--unt-hover-bg);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--unt-border-light);
}
.author-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}
.author-name {
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--unt-dark);
}
.author-title {
    font-size: 0.95rem;
    color: var(--unt-blue);
    margin-bottom: 0;
}

/* --- Partage Social --- */
.social-share {
    display: flex;
    gap: 10px;
}
.social-icon {
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}
.social-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.social-icon.facebook { background-color: #1877F2; }
.social-icon.twitter { background-color: #1DA1F2; }
.social-icon.linkedin { background-color: #0A66C2; }
.social-icon.email { background-color: #6c757d; }

/* --- Navigation Précédent/Suivant --- */
.post-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    border-top: 1px solid var(--unt-border-light);
    padding-top: 2rem;
}
.post-navigation .nav-link {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 48%;
    padding: 15px;
    border: 1px solid var(--unt-border-light);
    border-radius: 10px;
    color: var(--unt-text-dark);
    text-decoration: none;
    transition: all 0.3s ease;
}
.post-navigation .nav-link:hover {
    border-color: var(--unt-blue);
    background-color: var(--unt-hover-bg);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
.post-navigation .nav-link.next {
    text-align: right;
    justify-content: flex-end;
}
.post-navigation .nav-link i {
    font-size: 1.5rem;
    color: var(--unt-blue);
}
.post-navigation .nav-link strong {
    display: block;
    font-size: 0.8rem;
    color: var(--unt-text-muted);
    margin-bottom: 5px;
}
/* Modifier cette règle existante */
body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* /assets/css/style.css (ajouts) */

/* ======================================================= */
/*      DESIGN D'EXPERTISE POUR LA TOP-BAR                 */
/* ======================================================= */

.top-bar {
    background-color: var(--unt-blue);
    color: #ffffff;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    font-weight: 500;
}

.top-bar a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}
.top-bar a:hover {
    opacity: 0.8;
}

.top-bar-left, .top-bar-right {
    display: flex;
    align-items: center;
    height: 100%;
}
.top-bar-right {
    justify-content: flex-end;
}

.contact-item {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
}
.contact-item i {
    margin-right: 8px;
    font-size: 1rem;
}

.social-icons {
    display: inline-flex;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 20px;
    margin-left: 0; /* Annule le margin du dernier contact-item */
}
.social-icons a {
    margin-left: 15px;
}

/* --- Style du formulaire de recherche dans la Top-Bar --- */
.top-bar-search {
    flex-grow: 1;
    max-width: 300px;
    display: flex;
}
.top-bar-search .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 20px 0 0 20px;
    height: 38px;
    font-size: 0.9rem;
}
.top-bar-search .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}
.top-bar-search .form-control:focus {
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}
.top-bar-search .btn {
    background-color: #ffffff;
    color: var(--unt-blue);
    border-radius: 0 20px 20px 0;
    height: 38px;
}

/* --- Style du bouton E-Cours --- */
.btn-ecours {
    background-color: #4991fc;
    color: #000 !important; /* Force la couleur demandée */
    font-weight: 800;
    border-radius: 20px;
    padding: 0.5rem 1.2rem;
    transition: all 0.3s ease;
    flex-shrink: 0; /* Empêche le bouton de se réduire */
}
.btn-ecours:hover {
    background-color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.btn-ecours i {
    transition: transform 0.3s ease;
}
.btn-ecours:hover i {
    transform: translateX(4px);
}

/* --- Ajustements pour le "fixed-top" --- */
/* La top-bar n'est pas "fixed", seul le nav l'est */
.navbar.fixed-top {
    top: 46px; /* Hauteur de notre top-bar, à ajuster si besoin */
}

/* --- Réactivité --- */
@media (max-width: 991.98px) {
    /* Sur mobile, on cache la top-bar et on remet le padding-top initial */
    .top-bar {
        display: block;
    }
    .navbar.fixed-top {
        top: 0;
    }
    body {
        padding-top: 60px; /* Hauteur de la nav seule */
    }
    /* Il faudra donc remettre la recherche et le bouton e-cours dans le menu hamburger pour le mobile */
    /* Cette partie sera gérée dans une future itération si nécessaire pour ne pas complexifier ici.
       La solution la plus simple est de dupliquer ces éléments dans le menu collapsable
       et de les afficher/cacher avec les classes d-lg-none. */
}


/* /assets/css/style.css (ajouts) */

/* ======================================================= */
/*      SYSTÈME DE CARROUSEL DYNAMIQUE D'EXCELLENCE       */
/* ======================================================= */

#heroCarousel {
    height: 90vh; /* Hauteur du carrousel */
    min-height: 600px;
    position: relative;
    color: #fff;
}

.carousel-item {
    height: 90vh;
    min-height: 600px;
}

.slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.slide-background img,
.slide-background video,
.slide-background .color-background {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assure que le média remplit l'espace sans se déformer */
}

/* Superposition sombre pour la lisibilité */
.slide-background .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.carousel-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.carousel-caption .container {
    /* Animation du contenu */
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.8s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.carousel-item.active .carousel-caption .container {
    transform: translateY(0);
    opacity: 1;
}

.carousel-title {
    font-size: 3.5rem;
    font-weight: 800;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}
.carousel-subtitle {
    font-size: 1.25rem;
    font-weight: 300;
    max-width: 700px;
    margin: 20px auto;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
.carousel-caption.text-gauche .carousel-subtitle { margin-left: 0; }
.carousel-caption.text-droite .carousel-subtitle { margin-right: 0; }

.btn-hero {
    background: #fff;
    color: var(--unt-blue);
    border: 2px solid #fff;
    border-radius: 50px;
    padding: 12px 35px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-top: 20px;
}
.btn-hero:hover {
    background: transparent;
    color: #fff;
}

/* --- Contrôles et Indicateurs Personnalisés --- */
.carousel-control-prev, .carousel-control-next {
    width: 5%;
    z-index: 3;
}
.carousel-control-icon {
    background-color: rgba(255, 255, 255, 0.2);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: background-color 0.3s ease;
}
.carousel-control-prev:hover .carousel-control-icon,
.carousel-control-next:hover .carousel-control-icon {
    background-color: rgba(255, 255, 255, 0.4);
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    margin: 0 8px;
    transition: all 0.3s ease;
}
.carousel-indicators button.active {
    background-color: #fff;
    transform: scale(1.2);
}

/* --- RÉACTIVITÉ ABSOLUE --- */
@media (max-width: 767.98px) {
    #heroCarousel, .carousel-item {
        height: 80vh; /* Moins haut sur mobile */
        min-height: 500px;
    }
    .carousel-title {
        font-size: 2.2rem;
    }
    .carousel-subtitle {
        font-size: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Limite le texte à 3 lignes */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .btn-hero {
        padding: 10px 25px;
        font-size: 0.9rem;
    }
    .carousel-control-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}

/* /assets/css/style.css (ajouts) */

/* ======================================================= */
/*    STYLES DÉFINITIFS POUR LE PROFIL PUBLIC DIRIGEANT    */
/* ======================================================= */

.dirigeant-sidebar {
    position: sticky;
    top: 100px; /* Espace sous la navbar fixe */
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid var(--unt-border-light);
}

.dirigeant-photo-wrapper {
    width: 100%;
    height: auto;
}
.dirigeant-photo-wrapper img {
    aspect-ratio: 1 / 1; /* Assure que l'image est toujours carrée */
    object-fit: cover;
}

.dirigeant-contact-info {
    padding: 30px;
}
.dirigeant-contact-info h4 {
    font-weight: 700;
    color: var(--unt-dark);
}

.info-line {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.info-line i {
    font-size: 1.2rem;
    color: var(--unt-blue);
    width: 30px;
    text-align: center;
    margin-right: 15px;
}
.info-line a {
    text-decoration: none;
    color: var(--unt-text-muted);
    font-weight: 500;
    transition: color 0.3s ease;
}
.info-line a:hover {
    color: var(--unt-blue);
}

/* On réutilise les styles .section-title et .page-content déjà définis */
.dirigeant-content {
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border: 1px solid var(--unt-border-light);
}

/* /assets/css/style.css (ajouts) */
.team-card-link {
    text-decoration: none;
    color: inherit;
}
.team-card-footer {
    background: var(--unt-hover-bg);
    padding: 10px;
    font-weight: 600;
    color: var(--unt-blue);
    transition: all 0.3s ease;
}
.team-card-link:hover .team-card-footer {
    background: var(--unt-blue);
    color: #fff;
}
.team-card-footer i {
    transform: translateX(0);
    transition: transform 0.3s ease;
}
.team-card-link:hover .team-card-footer i {
    transform: translateX(5px);
}

/* /assets/css/style.css (ajouts) */
/* ======================================================= */
/*      TRANSFORMATION EN MEGA MENU (DESKTOP UNIQUEMENT)   */
/* ======================================================= */

@media (min-width: 992px) { /* Appliquer ces styles seulement sur les grands écrans */

    /* Empêche le dropdown-toggle de Bootstrap de fonctionner au clic, on gère au survol */
    .navbar-nav .dropdown-toggle::after {
        /* On peut cacher la flèche par défaut si on le souhaite */
        /* display: none; */
    }

    .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .dropdown-menu {
        display: block; /* Forcer l'affichage pour pouvoir l'animer */
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px); /* Position de départ pour l'animation */
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        
        margin-top: 0 !important; /* Annuler le décalage de Bootstrap */
        border-radius: 0 0 12px 12px; /* Angles arrondis seulement en bas */
        border: none;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        min-width: 220px;
    }
    
    /* Pour un vrai Mega Menu, on peut styliser les listes en colonnes */
    .dropdown-menu[aria-labelledby="navbarDropdownUniversite"] {
        /* Par exemple, si on voulait 2 colonnes */
        /* width: 400px;
        columns: 2; */
    }
}

/* Assurer que le comportement mobile reste le même */
@media (max-width: 991.98px) {
    .dropdown-menu {
        background-color: #f8f9fa; /* Un fond légèrement différent sur mobile */
        border: none;
    }
    .dropdown-item {
        padding-left: 2rem;
    }
}


/* /assets/css/style.css (REMPLACEMENT DES STYLES POUR LA PAGE DÉTAIL ACTU) */

/* ======================================================= */
/*    DESIGN "ARTICLE DE PRESTIGE" POUR ACTUALITE.PHP      */
/* ======================================================= */

/* --- Ambiance générale --- */
/* On s'assure que le corps de l'article est sur un fond blanc pour le contraste */
.article-container {
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 3rem;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
}
@media (max-width: 767px) {
    .article-container { padding: 1.5rem; }
}

/* --- En-tête Héroïque Amélioré --- */
.article-header {
    height: 65vh; /* Plus immersif */
    min-height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column; /* Permet d'aligner en bas et au centre */
    justify-content: flex-end; /* Aligne le contenu en bas */
    padding: 4rem 0;
}
.article-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%);
}
.article-header .container {
    position: relative;
    z-index: 2;
    text-align: center; /* Centrer le contenu de l'en-tête */
}
.article-header h1 {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 3.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 767px) {
    .article-header h1 { font-size: 2.5rem; }
}

.article-meta-details {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* --- Fil d'Ariane Raffiné --- */
.breadcrumb-nav {
    margin-bottom: 2rem;
    padding: 0;
    background: none;
    border: none;
}
.breadcrumb {
    font-size: 0.9rem;
}

/* --- Corps de l'Article et Colonne Latérale --- */
/* On réutilise les styles .page-content pour la typographie de l'article */
.article-body {
    font-size: 1.1rem;
    line-height: 1.8;
}

/*.sidebar-widget {
    position: sticky;
    top: 120px; /* Espace pour la navbar + un peu de marge */
}*/
.widget-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--unt-dark);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--unt-border-light);
}

/* Nouvelles cartes pour les articles récents dans la sidebar */
.sidebar-widget .list-group-item {
    padding: 1rem 0;
    border: none;
    border-bottom: 1px solid var(--unt-border-light);
    gap: 1rem;
}
.sidebar-widget .list-group-item:last-child {
    border-bottom: none;
}
.sidebar-widget .list-group-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.5rem;
}
.sidebar-widget .list-group-item h6 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.3s ease;
}
.sidebar-widget .list-group-item:hover h6 {
    color: var(--unt-blue);
}
.sidebar-widget .list-group-item p {
    font-size: 0.85rem;
}

/* --- Boîte Auteur Améliorée et Partage Social --- */
.author-box {
    margin-top: 3rem;
    padding: 2rem;
    background-color: var(--unt-hover-bg);
    border-radius: 1rem;
    border-top: 3px solid var(--unt-blue);
}

/* Partage social modernisé */
.social-share a {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    border-radius: 0.5rem;
}

/* --- Navigation Séquentielle "Premium" --- */
.post-navigation {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    border: none;
    padding: 0;
}
.post-navigation .nav-link {
    width: 100%;
    padding: 1.5rem;
    border: 1px solid var(--unt-border-light);
    border-radius: 1rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}
.post-navigation .nav-link:hover {
    border-color: var(--unt-blue);
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.post-navigation .nav-link i {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--unt-blue);
}
.post-navigation .nav-link span {
    line-height: 1.4;
}
.post-navigation .nav-link strong {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--unt-text-muted);
}
.post-navigation .nav-link.next {
    text-align: right;
    align-items: flex-end;
}