.title_page {
  border-left: 10px solid #008000;
  padding: 0 20px;
  color: #1f5793;
  margin-bottom: 30px;
}

/*** cardlabo start ***/
.cardlabo {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  background-image: url(../img/bg-2024.png);
  border: 1px solid #0000000f;
  border-radius: 5px;
  box-shadow: 0 14px 28px rgb(24 66 182 / 12%), 0 10px 10px rgb(24 66 182 / 16%);
}
.cardlabo::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #e3f2fd, #90caf9);
  transition: left 0.5s ease-in-out;
}
.cardlabo:hover::before {
  left: 0;
}
.cardlabo-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.cardlabo-text .dir_labo {
  color: #007bff;
  font-size: 1em;
  font-weight: bold;
  transition: color 0.3s;
}
.cardlabo:hover .dir_labo {
  color: #008000;
}
/*** cardlabo End ***/


.page-header {
    background: linear-gradient(rgb(30 115 190 / 81%), rgb(0 86 168 / 52%)), url(../img/bg_cover.png) center center no-repeat;
    background-size: cover;
}

.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--bs-white);
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    font-size: 18px;
    color: var(--bs-white);
}

/*** ens en chiffres ***/
.counter-div {
 /* background-color: #fff;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 20px;
  /*border: solid 3px #ff0101;*/
  border-radius: 5px;
}

.bg-light-bleu{
  background-color: #e5eef6;
}
.text-darkbleu{color: #073b5c;}

/*---------- Formation Initial ------------*/
.bg-light-bleu{
    background-color: #e5eef6;
}
.text-steelblue{
    color: #1f5793;
}
img.filiere-img {
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
}
h4.formations {
    font-family: Saira, sans-serif !important;
    font-size: 20px;
    font-weight: 500;
}

/*** Services Start ***/

.services .services-item {
    box-shadow: 0 0 45px rgb(24 66 182 / 12%);
    width: 100%;
    height: 100%;
    border-radius: 10px;
   /* padding: 10px 0;*/
    position: relative;
}


.services-content::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    border-radius: 10px 10px 0 0;
    background: #61ce7a;
    transition: .5s;
}

.services-content::after {
    top: 0;
    bottom: auto;
    border-radius: 10px 10px 10px 10px;
}

.services-item:hover .services-content::after {
    height: 100%;
    opacity: 1;
    transition: .5s;
}

.services-item:hover .services-content-icon {
    position: relative;
    z-index: 2;
}

.services-item .services-content-icon i,
.services-item .services-content-icon p {
    transition: .5s;
}

.services-item:hover .services-content-icon i {
    color: var(--bs-secondary) !important;
}

.services-item:hover .services-content-icon p {
    color: var(--bs-white);
}

.event-sc {
  border-radius: 0.5rem;
}

/*** Services End ***/

/*** Formation Start ***/
.pdf-container {
    position: relative;
    width: 100%;
    padding-top: 141.4%; /* A4 ratio */
    background: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
}

.pdf-container object {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ===== MOBILE HANDLING ===== */
.pdf-mobile {
    display: none;
}

@media (max-width: 768px) {
    .pdf-desktop {
        display: none;
    }
    .pdf-mobile {
        display: block;
    }
}

/*** Formation End ***/

/*** Formation Continue ***/
.section-title {
    color: #12467d; /* Votre bleu principal */
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.section-title::after {
    content: "";
    width: 50px;
    height: 3px;
    background: #ff6b6b; /* La couleur rouge de votre bouton */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.degree-card {
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    height: 100%;
}

.degree-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(18, 70, 125, 0.15);
    border-bottom: 3px solid #12467d;
}

.degree-icon {
    width: 70px;
    height: 70px;
    background: rgba(18, 70, 125, 0.1);
    color: #12467d;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.8rem;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.degree-card:hover .degree-icon {
    background: #12467d;
    color: #ffffff;
}

.degree-title {
    color: #1e3c72;
    font-weight: 700;
    margin-bottom: 15px;
}

.degree-desc {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}
/*** Formation Continue END ***/

/*** Recherche Start ***/
/* Research Content Section */
.research-content {
    padding: 60px 0;
    background: #f8f9fa;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.section-header h2 {
    font-size: 2.5rem;
    color: #1e3c72;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #4fc3f7, #1e3c72);
    border-radius: 2px;
}

.section-header p {
    color: #666;
    font-size: 1.1rem;
    max-width: 800px;
    margin: 20px auto 0;
    line-height: 1.8;
}

/* Strategy Card */
.strategy-card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.strategy-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

.strategy-card h3 {
    color: #1e3c72;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.strategy-card h3 i {
    color: #4fc3f7;
    font-size: 2rem;
}

.strategy-card p {
    color: #555;
    line-height: 1.9;
    font-size: 1.05rem;
    text-align: justify;
}

/* Domain Cards Grid */
.domains-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.domain-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-left: 5px solid #4fc3f7;
    border-radius: 15px;
    padding: 25px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.domain-card:hover {
    transform: translateX(10px);
    border-left-color: #1e3c72;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.domain-card i {
    color: #4fc3f7;
    font-size: 2rem;
    margin-bottom: 15px;
}

.domain-card h4 {
    color: #1e3c72;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.domain-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Doctoral Centers */
.doctoral-section {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    border-radius: 20px;
    padding: 50px;
    margin-top: 50px;
    color: white;
    position: relative;
    overflow: hidden;
}

.doctoral-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: pulse 15s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.doctoral-section h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    z-index: 1;
    color: #4fc3f7;;
}

.doctoral-section > p {
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 40px;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

.centers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 1;
}

.center-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
}

.center-card:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-5px);
}

.center-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #4fc3f7;
}

.center-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    opacity: 0.9;
    margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .section-header h2 {
        font-size: 2rem;
    }

    .strategy-card {
        padding: 25px;
    }

    .doctoral-section {
        padding: 30px 20px;
    }

    .domains-grid {
        grid-template-columns: 1fr;
    }

    .centers-grid {
        grid-template-columns: 1fr;
    }
}
/*** Recherche End ***/


/*** Cité universitaire Start ***/
.cite-card {
    background-color: #f8f9fa;
    border-left: 5px solid #12467d;
    border-radius: 5px;
    transition: transform 0.3s;
}
.cite-card:hover {
    transform: translateX(5px);
    background-color: #e9ecef;
}
.cite-image-container img {
    object-fit: cover;
    height: 100%;
    min-height: 400px;
}


/*** Telechargements Start ***/
    .download-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.download-item {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    transition: all 0.3s ease;
    border-left: 5px solid #12467d; /* Bordure bleue EST */
    cursor: pointer;
}

.download-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-left-color: #008000;
}

.download-item img {
    width: 45px;
    height: 45px;
    margin-right: 20px;
    transition: transform 0.3s ease;
}

.download-item:hover img {
    transform: scale(1.1) rotate(-5deg);
}

.download-item a {
    text-decoration: none;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.download-item h3.cnpn {
    font-family: 'Cairo', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin: 0;
    transition: color 0.3s ease;
}

.download-item:hover h3.cnpn {
    color: #12467d;
}

.download-icon-action {
    color: #ccc;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.download-item:hover .download-icon-action {
    color: #008000;
}
/*** Telechargements Start ***/



/*** Actualitées Start ***/
/* 1. La Carte Globale */
.single-blog {
    background-color: #fff;
    border: 1px solid #eef0f2;
    border-radius: 12px;        /* Coins arrondis */
    overflow: hidden;           /* Masque ce qui dépasse (pour l'image) */
    height: 100%;               /* Force la même hauteur pour toutes les cartes */
    display: flex;
    flex-direction: column;     /* Aligne verticalement : Image -> Texte -> Bouton */
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Effet de survol sur la carte (Lévitation) */
.single-blog:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(30, 60, 114, 0.15);
    border-color: #dbe2e8;
}

/* 2. Conteneur de l'image (Zone fixe) */
.blog__thumb {
    position: relative;
    width: 100%;
    height: 240px;              /* HAUTEUR FIXE OBLIGATOIRE pour aligner la grille */
    overflow: hidden;
    background-color: #f8f9fa;  /* Fond gris clair si l'image charge mal */
}

/* 3. L'Image elle-même */
.blog__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* Coupe l'image intelligemment sans la déformer */
    object-position: center;
    transition: transform 0.5s ease;
}

/* Effet de Zoom sur l'image au survol */
.single-blog:hover .blog__thumb img {
    transform: scale(1.1);
}

/* 4. Corps de la carte (Contenu) */
.blog__meta {
    padding: 25px;
    flex-grow: 1;               /* Occupe tout l'espace libre pour pousser le bouton en bas */
    display: flex;
    flex-direction: column;
}

/* 5. Date et Auteur */
.blog__meta--da {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.85rem;
    color: #6c757d;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.blog__meta--da div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog__meta--da i {
    color: #4fc3f7;             /* Bleu clair pour les icônes */
}

.blog-author a {
    color: #6c757d;
    text-decoration: none;
    font-weight: 500;
}

/* 6. Titre de l'actualité */
.blog__title {
    margin-bottom: 20px;
    font-size: 1.15rem;
    line-height: 1.5;
    font-weight: 700;
}

.blog__title a {
    color: #1e3c72;             /* Bleu foncé */
    text-decoration: none;
    transition: color 0.3s ease;
    
    /* Limite le titre à 3 lignes max (optionnel mais recommandé) */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog__title a:hover {
    color: #4fc3f7;
}

/* 7. Bouton "En savoir plus" (Style Moderne) */
.rts-theme-btn {
    margin-top: auto;           /* Pousse le bouton tout en bas */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    background: #1e3c72;        /* Fond Bleu Foncé */
    color: #ffffff !important;  /* Texte Blanc */
    border-radius: 30px;        /* Forme pilule */
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;         /* Le bouton s'adapte à son texte */
}

/* Effet sur le bouton */
.rts-theme-btn:hover {
    background: #4fc3f7;        /* Devient Bleu Clair */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(79, 195, 247, 0.4);
}

.rts-theme-btn span, 
.rts-theme-btn i {
    transition: transform 0.3s ease;
}

.rts-theme-btn:hover span,
.rts-theme-btn:hover i {
    transform: translateX(4px); /* Petite animation de la flèche */
}
/* --- Styles de la Pagination --- */
.pagination {
    gap: 5px; /* Espace entre les boutons */
}

.page-link {
    color: #1e3c72;         /* Texte bleu foncé */
    border: 1px solid #dee2e6;
    border-radius: 5px;     /* Coins arrondis */
    padding: 10px 18px;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Au survol */
.page-link:hover {
    color: #4fc3f7;         /* Texte bleu clair */
    background-color: #f8f9fa;
    border-color: #dee2e6;
    transform: translateY(-2px);
}

/* Page Active (Celle où on se trouve) */
.page-item.active .page-link {
    background-color: #1e3c72; /* Fond bleu foncé */
    border-color: #1e3c72;
    color: white;              /* Texte blanc */
    box-shadow: 0 4px 10px rgba(30, 60, 114, 0.3);
}

/* Boutons Désactivés (Précédent sur page 1, etc.) */
.page-item.disabled .page-link {
    color: #ccc;
    background-color: #fff;
    border-color: #eee;
    cursor: not-allowed;
    transform: none;
}

/* Retirer le focus bleu moche de Bootstrap au clic */
.page-link:focus {
    box-shadow: none;
}

/*** Actualitées End ***/








/* --- NOUVEAU DESIGN MAGNIFIQUE --- */

/* Fond de la section */
.news-section-bg {
    background-color: #f4f7fa; /* Gris très léger pour faire ressortir les cartes */
}

/* Carte de l'article principal */
.article-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(18, 70, 125, 0.08); /* Ombre douce bleutée */
    overflow: hidden;
    margin-bottom: 30px;
    transition: transform 0.3s ease;
}

/* Image de l'article */
.article-image-wrapper {
    position: relative;
    height: 450px; /* Hauteur fixe pour l'élégance */
    overflow: hidden;
}

.article-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image remplit la zone sans déformation */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.article-card:hover .article-image-wrapper img {
    transform: scale(1.05); /* Zoom doux au survol */
}

/* Badge de catégorie sur l'image */
.category-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #12467d, #1e3c72);
    color: #fff;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 2;
}

/* Contenu de l'article */
.article-content {
    padding: 50px;
}

@media (max-width: 768px) {
    .article-image-wrapper { height: 250px; }
    .article-content { padding: 25px; }
}

/* Titre de l'article (si disponible dans $actu['titre']) */
.article-title-main {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #12467d;
    font-size: 2rem;
    margin-bottom: 20px;
    line-height: 1.3;
}

/* Métadonnées (Date, Auteur) */
.article-meta-modern {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
}

.meta-item-modern {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #666;
    font-weight: 500;
}

.meta-icon-box {
    width: 35px;
    height: 35px;
    background-color: rgba(79, 195, 247, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #12467d;
}

/* Corps du texte de l'article */
.article-body-text {
    font-family: 'Segoe UI', 'Tajawal', sans-serif;
    color: #444;
    line-height: 1.9;
    font-size: 1.1rem;
    text-align: justify;
}

.article-body-text p {
    margin-bottom: 20px;
}

.article-body-text img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px 0;
}

/* --- SIDEBAR --- */
.sidebar-sticky {
    position: sticky;
    top: 110px; /* Reste visible au scroll */
}

.sidebar-card {
    background: #fff;
    border-radius: 15px;
    padding: 35px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
    border-top: 5px solid #12467d;
}

.sidebar-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #12467d;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px dashed #eee;
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-list li {
    margin-bottom: 20px;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: #555;
    transition: all 0.3s ease;
    padding: 10px;
    border-radius: 10px;
}

.contact-link:hover {
    background-color: #f8f9fa;
    color: #12467d;
    transform: translateX(5px);
}

.contact-link i {
    font-size: 1.2rem;
    color: #008000;
    width: 25px;
    text-align: center;
}

.social-sidebar {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.social-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #f4f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #12467d;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.social-btn:hover {
    background: linear-gradient(135deg, #12467d, #1e3c72);
    color: #fff;
    transform: rotate(360deg);
}

/* --- RESPONSIVE / MOBILE (Max 768px) --- */
@media screen and (max-width: 768px) {
    
    /* 1. Ajustement de la carte et de l'image */
    .article-card {
        border-radius: 15px; /* Arrondi un peu moins prononcé sur mobile */
        margin-bottom: 20px;
    }

    .article-image-wrapper {
        height: 220px; /* Hauteur réduite pour laisser voir le titre */
    }

    /* 2. Badge de catégorie plus discret */
    .category-badge {
        top: 15px;
        left: 15px;
        padding: 5px 15px;
        font-size: 0.75rem;
    }

    /* 3. Contenu plus compact */
    .article-content {
        padding: 20px; /* Réduit l'espace blanc pour gagner de la place */
    }

    /* 4. Typographie adaptée */
    .article-title-main {
        font-size: 1.5rem; /* Titre plus petit (env. 24px) */
        line-height: 1.3;
        margin-bottom: 15px;
    }

    .article-body-text {
        font-size: 1rem; /* Texte légèrement plus petit pour la lecture mobile */
        line-height: 1.6;
        text-align: left; /* IMPORTANT : Enlever le justifié sur mobile pour éviter les grands espaces */
    }

    /* 5. Métadonnées (Auteur/Date) */
    .article-meta-modern {
        flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si l'écran est trop petit */
        gap: 15px;
        margin-bottom: 20px;
        padding-bottom: 15px;
    }
    
    .meta-item-modern {
        font-size: 0.85rem;
    }

    /* 6. Gestion de la Sidebar sur mobile */
    /* Sur mobile, la sidebar passe généralement en dessous, le sticky n'est plus utile */
    .sidebar-sticky {
        position: relative;
        top: 0;
        margin-top: 10px; /* Espace entre l'article et la sidebar */
    }

    .sidebar-card {
        padding: 20px; /* Moins de padding interne */
    }
    
    .contact-link {
        padding: 8px; /* Zone de clic un peu plus compacte */
    }
}

/* --- TRES PETITS ECRANS (Max 480px) --- */
@media screen and (max-width: 480px) {
    .article-title-main {
        font-size: 1.35rem; /* Encore plus petit pour les vieux smartphones */
    }
    
    .social-sidebar {
        gap: 10px;
    }
    
    .social-btn {
        width: 40px;
        height: 40px;
    }
}





/*** Contact Start ***/
.contact-detail::before {
    position: absolute;
    content: "";
    height: 10%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #12467d;
    /*background: linear-gradient(#ff0101c2, #ff01014f), url(../img/top-bar-pattern_transparent.png);*/
    border-radius: 10px;
    z-index: -1;
}

.contact-map {
    background: #12467d;
}

.contact-form {
    background: #12467d;
}

.contact-head {
    background-color: #12467d;
    border-radius: 10px;
}

/*** tabs list***/
.tabscontact-list {
  width: 100%;
}

div.tabscontact-desc {
  background-color: #f1f1f1;
  padding: 20px;
  display: none;
}

.tabscontact-list div.tabscontact-item h4.tabscontact-header {
  padding: 20px;
  background-color: #fbfbfb;
  color: #1f5793;
  border: 0.5px solid #cccccc;
  transition: 0.1s all;
  cursor: pointer;
  margin: 0;
}

.tabscontact-list div.tabscontact-item h4.tabscontact-header:hover {
  background-color: #ffffff;
  border-top: 2px solid #008000;
}

.tabscontact-list div.tabscontact-item.active h4.tabscontact-header {
  background-color: #ffffff;
  border-top: 2px solid #008000;
  border-bottom: 0.5px solid #ffffff;
}

.tabscontact-list div.tabscontact-item.active div.tabscontact-desc {
  display: block;
  border-right: 0.5px solid #cccccc;
  border-left: 0.5px solid #cccccc;
}

/* =========================================
   STYLE MEDIA MOBILE (Max 768px)
   ========================================= */
@media (max-width: 768px) {

    /* --- 1. Ajustements des Espacements (Reset Bootstrap) --- */
    .contact-head.p-5 {
        padding: 20px 15px !important; /* Réduit le padding global */
    }

    .pb-5 {
        padding-bottom: 1.5rem !important;
    }

    .mb-5 {
        margin-bottom: 2rem !important;
    }

    .row.g-5 {
        --bs-gutter-y: 1.5rem; /* Réduit l'espace vertical entre les éléments */
    }

    h3 {
        font-size: 1.5rem; /* Titre principal plus petit */
    }

    /* --- 2. Cartes du Haut (Adresse, Tél, Email) --- */
    .contact-head .d-flex.bg-light {
        flex-direction: column; /* Empile l'icône et le texte */
        text-align: center;
        padding: 25px !important;
    }

    .contact-head .d-flex.bg-light .ms-3 {
        margin-left: 0 !important;
        margin-top: 15px;
        width: 100%; /* S'assure que le conteneur texte prend toute la largeur */
    }

    .btn-square {
        margin: 0 auto; /* Centre l'icône verte */
    }

    /* Correction Email spécifique pour le haut */
    .contact-head a.h5 {
        display: block;
        font-size: 1rem;
        overflow-wrap: anywhere;  /* Force la coupe n'importe où si trop long */
        word-break: break-word;   /* Compatibilité */
        line-height: 1.4;
    }

    /* --- 3. Transformation des Tableaux en Liste (Admin & Profs) --- */
    
    /* On cache l'en-tête du tableau */
    .custom-table thead {
        display: none;
    }

    .custom-table, .custom-table tbody, .custom-table tr, .custom-table td {
        display: block;
        width: 100%;
        border: none !important; /* Enlève les bordures par défaut */
    }

    /* Chaque ligne devient une "Carte" */
    .custom-table tr {
        margin-bottom: 20px;
        background-color: #fff;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    }

    /* Le Nom (1ère colonne) */
    .custom-table td:first-child {
        font-weight: bold;
        color: #333;
        font-size: 1.1rem;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        margin-bottom: 10px;
    }

    /* L'Email (2ème colonne) - CORRECTION AFFICHAGE */
    .custom-table td:last-child {
        display: flex !important;    /* Active Flexbox */
        align-items: flex-start;     /* Aligne l'icône en haut */
        color: #555;
        font-size: 0.95rem;
        padding: 0 !important;
    }

    /* Gestion du texte de l'email pour qu'il casse proprement */
    .custom-table td:last-child {
        overflow-wrap: anywhere;    /* Coupe l'email si nécessaire */
        word-break: break-word;
    }

    /* L'icône devant l'email (enveloppe orange) */
    .custom-table td i {
        min-width: 24px;            /* Largeur fixe pour l'icône */
        margin-right: 8px;
        margin-top: 5px;            /* Descend un peu l'icône pour s'aligner au texte */
        color: #fd7e14;             /* Couleur orange (fallback si text-lightorange marche pas) */
    }

    /* --- 4. Google Maps --- */
    iframe {
        height: 300px !important;
    }
}
/*** Contact End ***/



/*** Evenements Start ***/
/* --- NOUVEAU DESIGN POUR LA SECTION ÉVÉNEMENTS --- */

/* Conteneur de la carte */
.single-event {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
    height: 100%; /* Assure que toutes les cartes ont la même hauteur */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Effet de survol sur la carte */
.single-event:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(18, 70, 125, 0.15); /* Ombre bleutée au survol */
}

/* Conteneur de l'image */
.event__thumb {
    position: relative;
    height: 220px; /* Hauteur fixe pour l'uniformité */
    overflow: hidden;
    width: 100%;
}

/* L'image elle-même */
.event__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recadre l'image sans la déformer */
    transition: transform 0.5s ease;
}

/* Zoom sur l'image au survol */
.single-event:hover .event__thumb img {
    transform: scale(1.08);
}

/* Zone de contenu (Titre, Date) */
.event__meta {
    padding: 20px 25px 10px;
    flex-grow: 1; /* Pousse le footer (lieu) vers le bas */
}

/* Style de la date */
.event-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4fc3f7; /* Bleu clair */
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-date i {
    font-size: 1rem;
}

/* Style du titre */
.event__title {
    margin: 0;
    line-height: 1.4;
}

.event__title a {
    color: #12467d; /* Bleu foncé EST */
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
    transition: color 0.3s ease;
    
    /* Limiter le titre à 2 lignes avec "..." si trop long */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event__title a:hover {
    color: #ff5252; /* Couleur accent (rouge du bouton) au survol */
}

/* Zone du lieu (Footer de la carte) */
.event-place {
    padding: 15px 25px 20px;
    border-top: 1px solid #f0f0f0;
    color: #6c757d;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.event-place i {
    color: #12467d;
}

/* Design pour "Aucun événement" */
.no-event-box {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 40px;
    border: 2px dashed #dee2e6;
}
.no-event-box h4 {
    color: #12467d;
    margin-top: 15px;
}
/* Style de la pagination */
.pagination {
    margin-top: 40px;
    gap: 5px;
}

.page-link {
    color: #12467d; /* Bleu foncé */
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.page-link:hover {
    background-color: #f8f9fa;
    color: #4fc3f7; /* Bleu clair */
    border-color: #4fc3f7;
}

.page-item.active .page-link {
    background-color: #12467d;
    border-color: #12467d;
    color: white;
    box-shadow: 0 4px 10px rgba(18, 70, 125, 0.3);
}

.page-item.disabled .page-link {
    color: #bdc3c7;
    background-color: #fff;
    border-color: #dee2e6;
}


/* --- 1. DESIGN DE LA MIGNATURE (Image principale plus petite) --- */
.event-details__content--thumb {
    height: 350px; /* Hauteur fixe limitée */
    width: 100%;
    margin-bottom: 30px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    background-color: #f0f0f0;
}

.event-details__content--thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Coupe l'image proprement pour remplir le rectangle */
    object-position: center;
    transition: transform 0.5s ease;
}

.event-details__content--thumb:hover img {
    transform: scale(1.03); /* Zoom léger au survol */
}

/* --- 2. TITRE ET DESCRIPTION --- */
.rts-section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #12467d;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}

.rts-section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #008000;
    margin-top: 8px;
    border-radius: 2px;
}

.description {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    text-align: justify;
    margin-bottom: 2rem;
}

/* --- 3. GALERIE (Pour le slider au clic) --- */
.gallery-img-wrapper {
    height: 180px; /* Hauteur des petites images */
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer; /* Curseur main pour indiquer le clic */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    position: relative;
}

.gallery-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-img-wrapper:hover img {
    transform: scale(1.1);
    opacity: 0.95;
}

/* --- 4. SIDEBAR (Colonne de droite) --- */
.event-sidebar {
    background: #ffffff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border-top: 5px solid #12467d; /* Ligne bleue en haut */
    position: sticky;
    top: 100px; /* La sidebar suit le défilement */
}

/* Liste des événements suggérés dans la sidebar */
.hover-bg-light {
    transition: background-color 0.3s ease;
    border-radius: 8px;
    padding: 8px;
}

.hover-bg-light:hover {
    background-color: #f8f9fa;
}

/* Adaptation Mobile */
@media (max-width: 991px) {
    .event-details__content--thumb {
        height: 250px; /* Encore plus petit sur mobile */
    }
    
    .event-sidebar {
        position: static; /* Enlève l'effet sticky sur mobile */
        margin-top: 40px;
    }
}
/*** Evenements End ***/




/*-------------------------   IA/IDD/INSEM/CASI   ----------------------------- */
.section-cyber {
    background-color: #f8f9fa !important;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
    color: #2c3e50;
    overflow-x: hidden;
}

/* --- Changement 3 : Optimisation du Header de Section --- */
.section-header-row {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(248, 249, 250, 0.1));
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.03);
}

.section-title-block {
    position: relative;
}

.badge-custom {
    background: linear-gradient(135deg, #12467d, #2980b9);
    color: white;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 15px;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(18, 70, 125, 0.2);
}

.title-modern {
    font-weight: 800;
    color: #12467d;
    font-size: 1.9rem;
    margin-bottom: 15px;
    line-height: 1.2;
}

.line-accent {
    width: 100px;
    height: 4px;
    background: #008000;
    border-radius: 10px;
}

.lead-text-container {
    border-left: 5px solid #008000;
    padding-left: 25px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0 15px 15px 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

.lead-text {
    font-size: 1rem;
    line-height: 1.7;
    color: #4a5568;
    font-weight: 500;
    margin: 0;
}

/* --- Changement 1 : Image Agrandie --- */
.image-card {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    height: 400px; /* Hauteur augmentée de 300px à 400px */
}

.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.image-card:hover img {
    transform: scale(1.08);
}

.overlay-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(18, 70, 125, 0.7), transparent);
}

/* Cartes de contenu génériques */
.content-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.card-icon {
    background: #12467d;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-icon i {
    color: white;
    font-size: 1.8rem;
}

.card-body-custom {
    padding: 25px;
}

.card-title {
    color: #12467d;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Accordéon */
.custom-accordion .accordion-item {
    border: none;
    background: white;
    border-radius: 14px;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.custom-accordion .accordion-button {
    background: white;
    font-weight: 700;
    color: #12467d;
    padding: 20px 25px;
    font-size: 1.1rem;
    box-shadow: none;
}

.custom-accordion .accordion-button:not(.collapsed) {
    background: #f4f8fb;
    color: #0d335d;
}

.year-badge {
    background: #12467d;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    margin-right: 15px;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(18, 70, 125, 0.3);
}

/* --- Changement 2 : Modules avec Objectifs --- */
.semester-box {
    background: #fff;
    border: 1px solid #f0f0f0;
    padding: 20px;
    border-radius: 12px;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
}

.semester-box h6 {
    color: #008000;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 15px;
    display: inline-block;
    border-bottom: 2px solid rgba(18, 124, 41, 0.3);
    padding-bottom: 4px;
}

.semester-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.module-item {
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

.module-item:last-child {
    border-bottom: none;
}

.module-header {
    display: flex;
    align-items: center;
    font-weight: 700;
    color: #34495e;
    margin-bottom: 5px;
    font-size: 0.95rem;
}

.module-header i {
    color: #12467d;
    margin-right: 10px;
    font-size: 0.85rem;
}

.module-objective {
    font-size: 0.85rem;
    color: #7f8c8d;
    padding-left: 24px;
    line-height: 1.4;
    font-style: italic;
}

.pfe-item .module-header {
    color: #008000;
}

/* Stages */
.internship-item {
    display: flex;
    align-items: flex-start;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid #4fc3f7;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    margin-bottom: 15px;
}

.internship-item .icon-box {
    width: 50px;
    height: 50px;
    background: #f4f8fb;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #12467d;
    margin-right: 15px;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.internship-item .info h5 {
    font-size: 1rem;
    margin-bottom: 5px;
    font-weight: 700;
}

.internship-item .info span {
    font-size: 0.8rem;
    color: #12467d;
    font-weight: 600;
    background: rgba(18, 70, 125, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 8px;
    display: inline-block;
}

/* Sidebar */
.profile-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(18, 70, 125, 0.08);
    overflow: hidden;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.card-header-gradient {
    height: 100px;
    background: linear-gradient(135deg, #12467d, #2980b9);
}

.profile-content {
    padding: 0 30px 40px 30px;
    margin-top: -50px;
}

.avatar-circle {
    width: 100px;
    height: 100px;
    background: white;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border: 3px solid white;
}

.avatar-circle i {
    font-size: 2.8rem;
    color: #12467d;
}

.coordinator-name {
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
}

.role {
    color: #7f8c8d;
    font-size: 0.9rem;
}

.qr-container img {
    border: 5px solid #fff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@media (max-width: 991px) {
    .section-header-row {
        padding: 20px;
        text-align: center;
    }

    .lead-text-container {
        border-left: none;
        border-top: 4px solid #008000;
        padding-left: 0;
        padding-top: 20px;
        border-radius: 0 0 15px 15px;
    }

    .line-accent {
        display: none;
    }

    .content-card {
        flex-direction: column;
        text-align: center;
    }

    .card-icon {
        width: 100%;
        height: 70px;
    }

    .image-card {
        height: 300px;
    }
}


/*---------- Club des étudiants style ------------*/
/* --- Styles Généraux (PC et base) --- */

.flex-club-section {
    padding: 20px 0;
}

/* Style de la carte */
.card-clubs {
    overflow: hidden;
    padding: 15px;
    background: linear-gradient(171.38deg, #446b99 3.36%, #E2EAF5 95.69%);
    box-shadow: 0px 0px 20px rgba(227, 235, 246, 0.3);
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    width: 220px;       
    min-width: 220px;   
    margin: 0 !important; 
}

.card-clubs:hover {
    transform: scale(1.05);
}

.card-clubs_img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    background-color: white;
    border-radius: 15px;
}

.card-clubs_body {
    padding-top: 10px;
}
@media (max-width: 991px) {

    .clubs-scroll-container {
        display: grid !important;              
        grid-template-columns: 1fr 1fr;       
        gap: 15px !important;               
        overflow: visible !important;
        flex-wrap: wrap !important; 
        justify-content: center;
    }

    .club-item {
        width: 100% !important;
        margin: 0 !important;
    }

    .card-clubs {
        width: 100% !important;      
        min-width: 0 !important;      
        margin: 0 !important;
        height: 100%;                 
    }

    .card-clubs_img img {
        height: 100px !important;    
        object-fit: contain;
    }
}

/* Style des boutons réseaux sociaux */
a.bg-light.nav-fill.btn.rounded-circle {
    width: 35px;
    height: 35px;
    line-height: 35px;
    padding: 0;
    margin: 0 5px;
}

a.bg-light.nav-fill.btn.rounded-circle:hover {
    background-color: #67ad67 !important;
    color: #fff !important;
}

/* Scrollbar personnalisée pour le mode horizontal (optionnel) */
.clubs-scroll-container::-webkit-scrollbar {
    height: 8px;
}
.clubs-scroll-container::-webkit-scrollbar-thumb {
    background: #446b99;
    border-radius: 4px;
}
.clubs-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}


/* --- RESPONSIVE : Mobiles et Tablettes (max-width: 991px) --- */
/* C'est ici que la magie opère pour empiler les cartes */
@media screen and (max-width: 991px) {

    /* 1. Modifier le conteneur principal */
    .clubs-scroll-container {
        /* On force la direction verticale */
        flex-direction: column !important;
        /* On désactive le scroll horizontal inutile */
        overflow: visible !important;
        /* On augmente l'espace entre les cartes empilées (remplace gap-1) */
        gap: 25px !important;
    }

    /* 2. Modifier les cartes individuelles */
    .card-clubs {
        /* La carte prend toute la largeur disponible */
        width: 100% !important;
        min-width: auto !important;
        /* On limite la largeur pour que ça reste joli sur tablette */
        max-width: 400px !important;
        margin: 0 auto !important;
    }

    .card-clubs_img img {
        height: 150px;
    }
}


.est-container {
    display: flex;          /* Active le mode flexible */
    align-items: center;    /* Centre verticalement image et texte */
    justify-content: space-between;
    gap: 40px;              /* Espace entre les deux colonnes */
    margin-bottom: 20px;
}

/* Chaque bloc prend 50% de l'espace moins la moitié du gap */
.est-bloc {
    flex: 1;
    width: 50%; /* Sécurité pour certains navigateurs */
}

/* Style de l'image */
.est-img {
    width: 100%;        /* Prend toute la largeur de son bloc */
    height: auto;       /* Garde les proportions */
    border-radius: 10px; /* Jolis bords arrondis */
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Légère ombre esthétique */
}

/* 2. CONFIGURATION TABLETTE ET MOBILE (Écrans < 992px) */
@media (max-width: 992px) {
    .est-container {
        flex-direction: column; /* On empile verticalement */
    }

    .est-bloc {
        width: 100%; /* Le bloc prend toute la largeur de l'écran */
        flex: none;  /* Désactive le partage 50/50 */
    }

    /* Ajoute un espace sous l'image quand elle est au-dessus du texte */
    
}



/*-------------------- 404 ------------------------- */
/* --- STYLE PAGE 404 --- */

/* La carte principale (basée sur votre style .article-card) */
.error-card {
    background: #fff;
    border-radius: 20px;
    padding: 60px 40px;
    box-shadow: 0 10px 40px rgba(18, 70, 125, 0.08); /* Votre ombre bleutée */
    border-top: 5px solid #12467d; /* Ligne bleue EST en haut */
    position: relative;
    overflow: hidden;
}

/* Effet décoratif en arrière-plan */
.error-card::before {
    content: '404';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15rem;
    font-weight: 900;
    color: rgba(18, 70, 125, 0.03); /* Bleu très très pâle */
    z-index: 0;
    pointer-events: none;
}

/* Conteneur de l'icône */
.error-icon-box {
    position: relative;
    z-index: 1;
    width: 200px;
    height: 200px;
    background: rgba(79, 195, 247, 0.1); /* Votre bleu clair #4fc3f7 en transparent */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    animation: pulse-shadow 2s infinite;
}

.error-icon-box i {
    font-size: 6rem;
    color: #12467d; /* Bleu foncé */
}

/* Titre */
.error-title {
    position: relative;
    z-index: 1;
    font-family: 'Cairo', sans-serif;
    color: #12467d;
    font-weight: 700;
    font-size: 2.5rem;
}

/* Texte */
.error-text {
    position: relative;
    z-index: 1;
    color: #666;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Bouton secondaire (Optionnel, style inverse du vert) */
.btn-secondary-est {
    background: #fff !important;
    color: #12467d !important;
    border: 2px solid #12467d;
    box-shadow: none;
}

.btn-secondary-est:hover {
    background: #12467d !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* Animation douce pour l'icône */
@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 0 0 rgba(18, 70, 125, 0.2);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(18, 70, 125, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(18, 70, 125, 0);
    }
}

/* Adaptation Mobile */
@media (max-width: 768px) {
    .error-card {
        padding: 40px 20px;
    }
    .error-title {
        font-size: 1.8rem;
    }
    .error-card::before {
        font-size: 8rem;
    }
}


/* ---------------------------- Avis au étudiants ------------------------------------ */
        
/* Conteneur principal nettoyé */
.testimonial-item.p-5 {
    padding: 0 !important; /* On gère le padding nous-même */
    background: transparent;
    box-shadow: none;
}

/* La Carte "Conférence/Avis" */
.conference {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 25px;
    margin-bottom: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    border-left: 5px solid #12467d; /* Bleu EST */
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Effet de survol */
.conference:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(18, 70, 125, 0.15); /* Ombre bleutée */
    border-left-color: #008000; /* Devient vert au survol */
}

/* La boîte de date (Carré à gauche) */
.conf-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    height: 90px;
    background: #f8f9fa; /* Gris très clair */
    border-radius: 10px;
    margin-right: 25px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.conference:hover .conf-date {
    background: #12467d; /* Le fond de la date devient bleu */
    border-color: #12467d;
}

.conf-date .day {
    font-size: 1.4rem;
    font-weight: 800;
    color: #12467d;
    line-height: 1.1;
}

.conf-date .month {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    color: #666;
    margin-top: 2px;
}

.conf-date .year {
    font-size: 0.7rem;
    color: #999;
}

/* Changement de couleur du texte de la date au survol */
.conference:hover .conf-date .day,
.conference:hover .conf-date .month,
.conference:hover .conf-date .year {
    color: #ffffff;
}

/* Contenu Texte */
.conf-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.conf-title {
    font-family: 'Cairo', sans-serif; /* Police supposée du site */
    font-size: 1.15rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.conference:hover .conf-title {
    color: #12467d; /* Titre devient bleu */
}

.conf-more {
    font-size: 0.85rem;
    font-weight: 700;
    color: #008000; /* Vert */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    width: fit-content;
}

.conf-more::after {
    content: '\f061'; /* Flèche FontAwesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 8px;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.conference:hover .conf-more {
    color: #12467d;
    padding-left: 5px;
}

.conference:hover .conf-more::after {
    transform: translateX(5px);
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .conference {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .conf-date {
        margin-right: 0;
        margin-bottom: 15px;
        width: 100%;
        height: auto;
        padding: 10px;
        flex-direction: row;
        gap: 10px;
    }
    
    .conf-date .day { font-size: 1.2rem; }
    .conf-date .month, .conf-date .year { font-size: 0.9rem; }
    
    .conf-more {
        margin: 0 auto;
    }
}


/* ---------------------------- Stages et projets ------------------------------------ */
/* 1. Le conteneur principal (La carte blanche) */
.dut-section {
    background-color: #ffffff;
    padding: 50px;
    border-radius: 15px;
    /* Ombre portée bleutée identique à vos autres cartes */
    box-shadow: 0 10px 40px rgba(18, 70, 125, 0.08); 
    /* Bordure supérieure bleue caractéristique */
    border-top: 5px solid #12467d; 
    max-width: 1000px;
    margin: 0 auto; /* Centrer la carte */
    position: relative;
    transition: transform 0.3s ease;
}

/* Petit effet de lévitation au survol (comme vos cartes "Services") */
.dut-section:hover {
    transform: translateY(-5px);
}

/* 2. Le Titre Principal (H1) */
.dut-title {
    font-family: 'Cairo', 'Saira', sans-serif; /* Vos polices */
    color: #12467d; /* Bleu Principal */
    font-weight: 700;
    font-size: 2rem;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

/* 3. Le Sous-titre (H2) */
.dut-subtitle {
    font-family: 'Cairo', sans-serif;
    font-size: 1.2rem;
    color: #444;
    margin-bottom: 30px;
    font-weight: 600;
    border-left: 4px solid #008000; /* Bleu clair sur le côté */
    padding-left: 15px;
    line-height: 1.3;
}

/* 4. Les Paragraphes */
.dut-text {
    font-family: 'Segoe UI', sans-serif;
    color: #555; /* Gris texte lisible */
    font-size: 1.1rem;
    line-height: 1.8; /* Aération du texte */
    text-align: justify; /* Alignement propre */
    margin-bottom: 20px;
}

/* 5. Responsive Mobile */
@media (max-width: 768px) {
    .dut-section {
        padding: 30px 20px;
    }
    .dut-title {
        font-size: 1.8rem;
    }
    .dut-subtitle {
        font-size: 1.2rem;
    }
    .dut-text {
        text-align: left; /* Enlever le justifié sur mobile pour éviter les trous */
        font-size: 1rem;
    }
}