* {















    margin: 0;















    padding: 0;















    box-sizing: border-box;











}











body {















    font-family: 'Tajawal', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;















    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);















    min-height: 100vh;















    padding: 20px;















}































/* ==================== BARRE DE NEWS DÉFILANTE ==================== */















.news-ticker-container {















    position: fixed;















    top: 0;















    left: 0;















    right: 0;















    background: linear-gradient(90deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);















    border-bottom: 2px solid #f39c12;















    z-index: 1001;















    box-shadow: 0 4px 15px rgba(0,0,0,0.3);















    overflow: hidden;















    height: 65px;















}































#recherche {















    width: 400px;















    height: 31px;















    font-family: garamond;















    text-align: center;















    border: 1px solid black;















    border-radius: 15px;















    display: flex;















    align-items: center;















    justify-content: center;















    background-color: white;















    font-family: Tajawal;















}































#recherche:hover {















    background-color: #f8a64a;















    color: white;















}































#bande_blanc p, div {















    margin: 13px;















}































.num {















    margin: 0;















    color: #f4b084;















}































.treret {















    display: flex;















    flex-direction: column;















}































.treret div {















    display: flex;















    margin-top: 0;















    margin-bottom: 0;















}































.treret h3 {















    font-weight: normal;















    font-size: 1em;















    text-align: center;















}


.choixchoix101 {

    background-color: #6647a1;

    border-radius: 5px;

    color: white;

    padding: 15px;

    overflow: hidden;

    width: 90%;

    display: flex;

    justify-content: center;

}




























.choixchoix {

    background-color: #6647a1;

    border-radius: 5px;

    color: white;

    padding: 15px;

    overflow: hidden;

    width: 90%;

    display: flex;

    justify-content: center;

}































.news-ticker {















    background: rgba(0,0,0,0.5);















    padding: 12px 0;















    position: relative;















    padding: 0px;















}































.news-ticker-content {















    display: flex;















    align-items: center;















    white-space: nowrap;















    gap: 40px;















    margin-top: 0px;















}































.news-ticker-content:hover {















    animation-play-state: paused;















}































@keyframes tickerScroll {















    0% {















        transform: translateX(100%);















    }















    100% {















        transform: translateX(-100%);















    }















}































.news-item {















    display: inline-flex;















    align-items: center;















    gap: 12px;















    background: rgba(255,255,255,0.1);















    padding: 5px 18px;















    border-radius: 30px;















    backdrop-filter: blur(5px);















    transition: all 0.3s ease;















    margin: 0 5px;















}































.news-item:hover {















    background: rgba(243, 156, 18, 0.3);















    transform: scale(1.05);















}































.current-period-badge {















    background: linear-gradient(135deg, #f39c12, #e67e22);















    border: 1px solid #ffd700;















    box-shadow: 0 0 10px rgba(243, 156, 18, 0.5);















}































.news-badge {















    display: inline-flex;















    align-items: center;















    gap: 5px;















    padding: 3px 10px;















    border-radius: 20px;















    font-size: 0.75em;















    font-weight: bold;















}































.news-badge.module {















    background: linear-gradient(135deg, #3498db, #2980b9);















    color: white;















}































.news-badge.examen {















    background: linear-gradient(135deg, #e74c3c, #c0392b);















    color: white;















}































.news-icon {















    font-size: 1.1em;















}































.news-title {















    color: white;















    font-size: 0.9em;















    font-weight: 500;















}































.news-periode {















    color: #f39c12;















    font-size: 0.75em;















    direction: ltr;















}































.news-link {















    text-decoration: none;















    display: inline-flex;















    align-items: center;















    gap: 8px;















}































.news-separator {















    color: #f39c12;















    font-size: 1.2em;















    opacity: 0.5;















}































.news-ticker-pause {















    position: absolute;















    right: 20px;















    top: 50%;















    transform: translateY(-50%);















    background: rgba(0,0,0,0.7);















    border-radius: 50%;















    width: 30px;















    height: 30px;















    display: flex;















    align-items: center;















    justify-content: center;















    cursor: pointer;















    z-index: 10;















    color: white;















    font-size: 0.8em;















    transition: all 0.3s ease;















}































.news-ticker-pause:hover {















    background: #f39c12;


    transform: translateY(-50%) scale(1.1);

}



/* ==================== CONTAINER PRINCIPAL ==================== */



.container {

    max-width: 1600px;


    margin: 0 auto;

    background: white;


    border-radius: 15px;

    box-shadow: 0 20px 40px rgba(0,0,0,0.1);

    overflow: hidden;

    margin-top: 10px;

    margin-bottom: 10px;

}


/* ==================== SECTION PRESENTATION ==================== */



.presentation {


    font-size: 1.2em;


    width: 98%;

    display: flex;

    align-items: center;



    justify-content: center;




    height: 160px;

    font-family: Tajawal;















    flex-wrap: wrap;















    gap: 20px;















    padding: 15px;















}































.centred {















    width: 500px;















}































.righted {















    display: flex;















    align-items: center;















}































.contenu2 {















    display: flex;















    color: #16284c;















    justify-content: center;















    font-family: garamond;















}































.presentation a {















    text-decoration: none;















    color: #87255f;















}































.presentation a:hover {















    text-decoration: none;















    color: #f8a64a;















}































/* ==================== HEADER ==================== */















.header {















    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);















    color: white;















    padding: 30px;















    text-align: center;















    position: relative;















}































.header-icon {















    position: absolute;















    top: 40px;















    left: 20px;















    width: 200px;















    height: 200px;















    display: flex;















    align-items: center;















    justify-content: center;















    background: rgba(255,255,255,0.2);















    border-radius: 50%;















    padding: 10px;















    transition: transform 0.3s ease;















}































.header-icon:hover {















    transform: scale(1.1);















}









/* ==================== STYLES POUR LE BOUTON DÉTAIL PROGRESS ==================== */



.progress-detail-toggle {

    text-align: center;

    margin: 15px 0 10px 0;

}



.btn-detail-progress {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: white;

    border: none;

    padding: 12px 25px;

    border-radius: 40px;

    font-size: 1em;

    font-weight: bold;

    cursor: pointer;

    transition: all 0.3s ease;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    font-family: 'Tajawal', 'Segoe UI', sans-serif;

    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);

}



.btn-detail-progress:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);

    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);

}



.btn-detail-progress:active {

    transform: translateY(0);

}



.toggle-icon {

    display: inline-block;

    transition: transform 0.3s ease;

    font-size: 0.9em;

}



.toggle-icon.rotated {

    transform: rotate(90deg);

}



.toggle-badge {

    background: rgba(255, 255, 255, 0.25);

    padding: 4px 10px;

    border-radius: 30px;

    font-size: 0.8em;

    font-weight: normal;

}



/* Animation d'apparition des détails */

.progress-details {

    overflow: hidden;

    transition: all 0.4s ease;

}



.progress-details.show {

    display: block !important;

    animation: slideDown 0.4s ease forwards;

}



@keyframes slideDown {

    from {

        opacity: 0;

        transform: translateY(-20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Version mobile */

@media (max-width: 768px) {

    .btn-detail-progress {

        padding: 10px 20px;

        font-size: 0.9em;

        gap: 8px;

    }

    

    .toggle-badge {

        font-size: 0.7em;

        padding: 3px 8px;

    }

}



/* Effet de brillance au survol */

.btn-detail-progress {

    position: relative;

    overflow: hidden;

}



.btn-detail-progress::after {

    content: '';

    position: absolute;

    top: -50%;

    left: -60%;

    width: 200%;

    height: 200%;

    background: linear-gradient(

        115deg,

        rgba(255, 255, 255, 0) 0%,

        rgba(255, 255, 255, 0) 40%,

        rgba(255, 255, 255, 0.3) 50%,

        rgba(255, 255, 255, 0) 60%,

        rgba(255, 255, 255, 0) 100%

    );

    transform: rotate(45deg);

    transition: all 0.5s ease;

    pointer-events: none;

}



.btn-detail-progress:hover::after {

    left: 100%;

    transition: all 0.7s ease;

}





















.header-icon img {















    width: 100%;















    height: auto;















}































.header h1 {















    font-size: 2em;















    margin-bottom: 10px;















    display: inline-flex;















    align-items: center;















    gap: 15px;















}































.tab-buttons {















    display: flex;















    justify-content: center;















    gap: 20px;















    margin-top: 20px;















    flex-wrap: wrap;















}































.tab-btn {















    padding: 10px 30px;















    font-size: 1.1em;















    font-weight: bold;















    border: none;















    border-radius: 50px;















    cursor: pointer;















    transition: all 0.3s ease;















    font-family: inherit;















    background: rgba(255,255,255,0.2);















    color: white;















}































.tab-btn.active {















    background: white;















    color: #667eea;















    box-shadow: 0 4px 15px rgba(0,0,0,0.2);















}































.tab-btn:hover:not(.active) {















    background: rgba(255,255,255,0.3);















    transform: translateY(-2px);















}































.header .selection {















    font-size: 1.2em;















    background: rgba(255,255,255,0.2);















    display: inline-block;















    padding: 10px 20px;















    border-radius: 25px;















    margin-top: 15px;















}































.legend {















    display: flex;















    gap: 20px;















    margin-top: 10px;















    font-size: 0.85em;















    color: rgba(255,255,255,0.9);















    flex-wrap: wrap;















    justify-content: center;















}































/* ==================== YEARS BAR ==================== */















.years-bar {


  background: #744fa8;

    padding: 15px 20px;

    border-bottom: 2px solid #4f3573;

    text-align: center;

    min-height: 80px;

}































.years-title {

display: inline-block;
    margin-left: 20px;
    font-weight: bold;
    color: #f6f9fc;
    font-size: 1.1em;
    margin-top: 10px;
}































.years-list {















    display: inline-flex;















    gap: 15px;















    list-style: none;















    flex-wrap: wrap;















    justify-content: center;















}































.years-list li {















    margin: 0;















}































.years-list a {















    display: block;















    padding: 8px 20px;















    background: white;















    text-decoration: none;















    color: #495057;















    border-radius: 25px;















    transition: all 0.3s ease;















    border: 1px solid #dee2e6;















    font-weight: bold;















}































.years-list a:hover {















    background: #667eea;















    color: white;















    transform: translateY(-2px);















    box-shadow: 0 2px 8px rgba(0,0,0,0.1);















}































.years-list a.active {















    background: #764ba2;















    color: white;















    border-color: #764ba2;















    box-shadow: 0 2px 8px rgba(118, 75, 162, 0.3);















}































/* ==================== MAIN CONTENT ==================== */















.main-content {















    display: flex;















    min-height: 600px;















}































.right-column {















    width: 260px;















    background: #7453ad;















    border-right: 1px solid #e9ecef;















    border-left: none;















    padding: 20px;















    overflow-y: auto;















    order: 1;















}































.right-column h3 {















    text-align: center;















    margin-bottom: 20px;















    color: white;















    font-size: 1.1em;















}































.subject-list {















    list-style: none;















}































.subject-list li {















    margin-bottom: 8px;















}































.subject-list a {















    display: block;















    padding: 8px;















    background: white;















    text-align: center;















    text-decoration: none;















    color: #495057;















    border-radius: 8px;















    transition: all 0.3s ease;















    border: 1px solid #dee2e6;















    font-size: 0.9em;















    font-weight: 500;















}































.subject-list a:hover {















    background: #667eea;















    color: white;















    transform: translateX(-5px);















}































.subject-list a.active {















    background: #764ba2;















    color: white;















    border-color: #764ba2;















}































.center-column {















    flex: 1;















    padding: 30px;















    background: #e5d0cb;















    overflow-y: auto;















    order: 2;















    text-align: center;















}































/* ==================== COURSE CONTENT ==================== */















.course-content {















    background: #f8f9fa;















    border-radius: 10px;















    padding: 30px;















    min-height: 500px;















}































.course-placeholder {















    text-align: center;















    color: #6c757d;















    padding: 50px;















}































.course-placeholder i {















    font-size: 4em;















    margin-bottom: 20px;















    display: block;















}































.period-group {















    margin-bottom: 25px;















    border-radius: 10px;















    overflow: hidden;















    background: white;















    box-shadow: 0 2px 4px rgba(0,0,0,0.1);















}































.period-header {















    padding: 15px 20px;















    cursor: pointer;















    display: flex;















    justify-content: space-between;















    align-items: center;















    transition: all 0.3s ease;















    color: white;















}































.period-header:hover {















    filter: brightness(1.05);















    transform: translateY(-2px);















}































.period-title {















    font-size: 1.2em;















    font-weight: bold;















    display: flex;















    align-items: center;















    gap: 12px;















    flex-wrap: wrap;















}































.period-icon {















    font-size: 1.5em;















}































.period-text {















    display: flex;















    flex-direction: column;















    text-align: right;















}































.period-main-title {















    font-size: 1.1em;















}































.period-subtitle {















    font-size: 0.85em;















    opacity: 0.9;















}































.period-badge {















    background: rgba(255,255,255,0.3);















    padding: 3px 10px;















    border-radius: 20px;















    font-size: 0.8em;















}































.period-toggle {















    font-size: 1.5em;















    transition: transform 0.3s ease;















}































.period-toggle.open {















    transform: rotate(90deg);















}































.period-content {















    max-height: 0;















    overflow: hidden;















    transition: max-height 0.3s ease-out;















    background: white;















}































.period-content.open {















    max-height: 2000px;















    transition: max-height 0.5s ease-in;















}































.items-list {















    padding: 20px;















    display: flex;















    flex-direction: column;















    gap: 15px;















}































.item-card {















    background: #f8f9fa;















    border-radius: 10px;















    padding: 20px;















    transition: transform 0.3s ease, box-shadow 0.3s ease;















    border-right: 4px solid #764ba2;















    border-left: none;















    text-align: right;















    position: relative;















}































.item-card.completed {















    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);















    border-right-color: #27ae60;















    opacity: 0.95;















}































.item-card.completed:hover {















    transform: translateY(-2px);















    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);















}































.completed-badge {















    position: absolute;















    top: 15px;















    left: 15px;















    background: linear-gradient(135deg, #27ae60, #229954);















    color: white;















    padding: 5px 12px;















    border-radius: 20px;















    font-size: 0.75em;















    font-weight: bold;















    display: flex;















    align-items: center;















    gap: 5px;















    box-shadow: 0 2px 4px rgba(0,0,0,0.2);















    animation: fadeIn 0.5s ease;















}































@keyframes fadeIn {















    from {















        opacity: 0;















        transform: scale(0.8);















    }















    to {















        opacity: 1;















        transform: scale(1);















    }















}































.item-card:hover {















    transform: translateY(-2px);















    box-shadow: 0 4px 8px rgba(0,0,0,0.15);















}































.item-title {















    font-size: 1.1em;















    font-weight: bold;















    color: #333;















    margin-bottom: 8px;















    padding-left: 80px;















}































.item-card.completed .item-title {















    color: #1b5e20;















}































.item-subtitle {















    color: #666;















    margin-bottom: 12px;















    font-size: 0.9em;















}































.item-info {















    display: flex;















    gap: 20px;















    flex-wrap: wrap;















    margin-top: 12px;















    padding-top: 12px;















    border-top: 1px solid #dee2e6;















    font-size: 0.85em;















    color: #888;















    justify-content: flex-start;















}































.item-info span {















    display: inline-flex;















    align-items: center;















    gap: 5px;















}































.item-links {















    display: flex;















    gap: 10px;















    margin-top: 12px;















    flex-wrap: wrap;















    justify-content: flex-start;















}































/* ==================== BUTTONS ==================== */















.btn {















    display: inline-block;















    padding: 8px 16px;















    background: #667eea;















    color: white;















    text-decoration: none;















    border-radius: 5px;















    font-size: 0.9em;















    transition: all 0.3s ease;















    border: none;















    cursor: pointer;















    font-weight: bold;















}































.btn:hover {















    background: #764ba2;















    transform: translateY(-2px);















    box-shadow: 0 2px 4px rgba(0,0,0,0.2);















}































.btn-primary {















    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);















}































.btn-success {















    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);















}































.btn-sm {















    padding: 6px 12px;















    font-size: 0.85em;















}































/* ==================== PROGRESS BAR ==================== */















.global-progress-container {















    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);















    border-radius: 15px;















    padding: 20px;















    margin-bottom: 25px;















    box-shadow: 0 4px 6px rgba(0,0,0,0.1);















}































.global-progress-container.exam {















    background: linear-gradient(135deg, #ffe6f0 0%, #ffd9e8 100%);















}































.global-progress-container.exam .progress-fill {















    background: linear-gradient(90deg, #e74c3c, #c0392b);















}































.progress-header {















    display: flex;















    justify-content: space-between;















    align-items: center;















    margin-bottom: 15px;















    flex-wrap: wrap;















    gap: 10px;















}































.progress-title {















    font-size: 1.1em;















    font-weight: bold;















    color: #2c3e50;















    display: flex;















    align-items: center;















    gap: 15px;















    flex-wrap: wrap;















}































.progress-percentage {















    background: #667eea;















    color: white;















    padding: 4px 12px;















    border-radius: 20px;















    font-size: 0.9em;















}































.global-progress-container.exam .progress-percentage {















    background: #e74c3c;















}































.progress-stats {















    display: flex;















    gap: 15px;















    font-size: 0.85em;















    color: #555;















    background: rgba(255,255,255,0.8);















    padding: 5px 12px;















    border-radius: 20px;















}































.progress-stats span {















    display: inline-flex;















    align-items: center;















    gap: 5px;















}































.progress-bar-container {















    background: #e0e0e0;















    border-radius: 25px;















    overflow: hidden;















    height: 30px;















    position: relative;















    margin-bottom: 15px;















}































.progress-fill {















    background: linear-gradient(90deg, #667eea, #764ba2);















    height: 100%;















    border-radius: 25px;















    transition: width 0.5s ease;















    display: flex;















    align-items: center;















    justify-content: flex-end;















    padding-right: 15px;















    position: relative;















    overflow: hidden;















    margin: 0px;















}































.progress-fill::after {















    content: '';















    position: absolute;















    top: 0;















    left: 0;















    right: 0;















    bottom: 0;















    background: linear-gradient(90deg, 















        rgba(255,255,255,0.2) 0%,















        rgba(255,255,255,0.1) 50%,















        rgba(255,255,255,0.2) 100%);















    animation: shimmer 2s infinite;















}































@keyframes shimmer {















    0% { transform: translateX(-100%); }















    100% { transform: translateX(100%); }















}































.progress-text-inside {















    color: white;















    font-weight: bold;















    font-size: 0.85em;















    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);















    position: relative;















    z-index: 1;















}































.progress-motivation {















    font-size: 0.9em;















    color: #27ae60;















    text-align: center;















    padding: 10px;















    background: rgba(39, 174, 96, 0.1);















    border-radius: 10px;















}































.progress-complete {















    font-size: 0.95em;















    color: #27ae60;















    text-align: center;















    padding: 10px;















    background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);















    border-radius: 10px;















    font-weight: bold;















}































.progress-details {















    margin-top: 20px;















    padding-top: 15px;















    border-top: 1px solid rgba(0,0,0,0.1);















}































.progress-details-title {















    font-size: 0.9em;















    font-weight: bold;















    color: #2c3e50;















    margin-bottom: 12px;















    text-align: center;















}































.periods-progress {















    display: flex;















    flex-direction: column;















    gap: 12px;















}































.period-progress-item {















    width: 100%;















}































.period-progress-label {















    display: flex;















    justify-content: space-between;















    font-size: 0.8em;















    margin-bottom: 5px;















    color: #555;















}































.period-progress-bar {















    background: #e0e0e0;















    border-radius: 10px;















    overflow: hidden;















    height: 6px;















}































.period-progress-fill {















    height: 100%;















    border-radius: 10px;















    transition: width 0.3s ease;















}































.info-message {







        text-align: center;







    font-size: 1.2em;











    background: #e7f3ff;















    border-right: 4px solid #667eea;















    border-left: none;















    padding: 15px;















    margin-bottom: 20px;















    border-radius: 5px;























}







.rf2



{



    border-bottom: 5px solid #16284c;



    padding-top: 20px;



}







.rf2 h3







{



    font-family: tajawal;



    font-size: 1.3em;



    color: white;



    background-image: url(images/logo_imp5.png);



    background-position: right;



    background-repeat: no-repeat;



    background-color: #745552;



    background-size: 10%;



    padding: 10px;



    background-position: left bottom;



    text-align: right;



    margin : 10px;



}







.rf22 h3 







{



   text-align: right;



}







.prprp



{



    text-align: right;



}























/* ==================== BANDE PR ==================== */















.bande_pr {















    position: fixed;















    top: 70px;















    right: 0;















    left: 0;















    background: linear-gradient(135deg, #313084 0%, #764ba2 100%);















    color: white;















    padding: 10px 20px;















    z-index: 1000;















    box-shadow: 0 2px 10px rgba(0,0,0,0.2);















    font-family: 'Tajawal', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;















}































.bande_pr .content {















    max-width: 1400px;















    margin: 0 auto;















    display: flex;















    justify-content: flex-end;















    align-items: center;















    gap: 20px;















    flex-wrap: wrap;















}































.bande_pr .felsa {















    margin: 0;















    padding: 0;















}































.bande_pr .felsa a {















    color: white;















    text-decoration: none;















    padding: 8px 15px;















    border-radius: 25px;















    transition: all 0.3s ease;















    display: inline-block;















    font-weight: 500;















    font-size: 1.3em;















}































.bande_pr .felsa a:hover {















    background: rgba(255,255,255,0.2);















    transform: translateY(-2px);















}































.bande_pr .bouuton2 {















    margin: 0;















    padding: 0;















    position: relative;















}































.bande_pr .bouuton2 a {















    display: inline-block;















    transition: transform 0.3s ease;















}































.bande_pr .bouuton2 a:hover {















    transform: scale(1.1);















}































.bande_pr h1 {















    margin: 0;















    font-size: 1.2em;















    color: #ff6b6b;















    background: white;















    border-radius: 50%;















    width: 25px;















    height: 25px;















    display: inline-flex;















    align-items: center;















    justify-content: center;















    position: absolute;















    top: -5px;















    right: -10px;















    font-size: 0.8em;















}































/* ==================== STYLES DES SELECT ==================== */















select, .form-select, .mimo select {















    background: white;















    border: 2px solid #e0e0e0;















    border-radius: 10px;















    padding: 12px 15px;















    font-size: 16px;















    color: #333;















    transition: all 0.3s ease;















    cursor: pointer;















    width: 100%;















    max-width: 100%;















    box-sizing: border-box;















    















    -webkit-appearance: none;















    -moz-appearance: none;















    appearance: none;















    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");















    background-repeat: no-repeat;















    background-position: left 15px center;















    background-size: 16px;















    padding-left: 40px;















    text-align: right;















}































select:focus, .form-select:focus, .mimo select:focus {















    outline: none;















    border-color: #764ba2;















    box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.2);















}































select:hover, .form-select:hover, .mimo select:hover {















    border-color: #667eea;















}































/* ==================== BOUTON DE RECHERCHE ==================== */















.brech {















    margin: 20px;















}































.brech input {















    min-width: 200px;















    border: 2px solid white;















}































input[type="submit"], .btn-submit {















    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);















    color: white;















    border: none;















    padding: 10px 25px;















    border-radius: 25px;















    font-size: 1em;















    cursor: pointer;















    transition: all 0.3s ease;















    font-weight: bold;















    border: 2px solid white;















}































input[type="submit"]:hover, .btn-submit:hover {















    transform: translateY(-2px);















    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);















}































/* ==================== FORMULAIRES ==================== */















.form-group {















    display: flex;















    gap: 15px;















    justify-content: center;















    align-items: center;















    flex-wrap: wrap;















}































.welcome-message {















    text-align: center;















    padding: 40px;















    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);















    border-radius: 15px;















    margin: 20px 0;















}































.welcome-message h3 {















    color: #667eea;















    margin-bottom: 10px;















}































.welcome-message p {















    color: #666;















}































.lignep {















    text-align: center;















    margin-bottom: 30px;















    padding: 20px;















    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);















    border-radius: 15px;















    box-shadow: 0 4px 15px rgba(0,0,0,0.05);















}































.lignep3 {















    text-align: center;















    font-family: 'Tajawal';















    font-size: 1.2em;















    line-height: 2;















}































#istimara {















    font-size: 1.4em;















    color: #2c3e50;















    margin-bottom: 20px;















    font-weight: bold;















    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);















    position: relative;















    display: inline-block;















    padding-bottom: 10px;















}































#istimara::after {















    content: '';















    position: absolute;















    bottom: 0;















    right: 50%;















    transform: translateX(50%);















    width: 80px;















    height: 3px;















    background: linear-gradient(90deg, #667eea, #764ba2);















    border-radius: 3px;















}































.ligne {















    display: flex;















    justify-content: center;















    align-items: center;















    margin: 20px 0;















    position: relative;















}































.ligne .fit-picture {















    transition: transform 0.3s ease, filter 0.3s ease;















    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));















}































.ligne .fit-picture:hover {















    transform: scale(1.05);















    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));















}































/* ==================== TABLEAU MIMO ==================== */















.mimo tr {















    height: 50px;















    text-align: center;















    font-size: 1.2em;















}































/* ==================== PIED DE PAGE ==================== */















#pied_de_page {















    font-family: garamond;















    width: 100%;















    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);















    display: flex;















    color: white;















    align-items: center;















    justify-content: space-between;















    padding: 20px 15px;















    border-radius: 10px;















    margin-top: 20px;















    flex-wrap: wrap;















    gap: 15px;















}































.p_de_page {















    margin: 0;















    text-align: center;















    width: auto;















    min-width: 120px;















    flex-shrink: 0;















}































.p_de_page img {















    transition: transform 0.3s ease, filter 0.3s ease;















}































.p_de_page img:hover {















    transform: scale(1.05);















    filter: drop-shadow(0 4px 8px rgba(255,255,255,0.2));















}































#pcentrale {















    border-right: 2px solid #e89e09;















    border-left: 2px solid #e89e09;















    margin: 0 10px;















    padding: 10px 20px;















    text-align: center;















    flex: 1;















    font-size: 0.9em;















    line-height: 1.6;















}































#pcentrale strong {















    color: #f39c12;















    font-weight: bold;















}































#pcentrale br {















    margin-bottom: 5px;















}































.contenu2 a {















    text-decoration: none;















    color: #935387;















    font-weight: bolder;















}































.fit-picture {















    max-width: 100%;















    height: auto;















    display: block;















}































/* ==================== TABLEAU DE TARIFICATION ==================== */































/* Conteneur principal */















.ligne_et {















    display: flex;















    align-items: center;















    justify-content: center;















    gap: 20px;















    margin: 30px 0 20px;















    padding: 15px;















    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);















    border-radius: 15px;















    flex-wrap: wrap;















}































.ligne_et .fit-picture {















    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));















    transition: transform 0.3s ease;















}































.ligne_et .fit-picture:hover {















    transform: scale(1.05);















}































.ijko {















    color: white;















    font-size: 1.8em;















    margin: 0;















    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);















    font-weight: bold;















}































/* Conteneur du tableau */















.tarification {















    background: white;















    border-radius: 15px;















    padding: 20px;















    box-shadow: 0 10px 30px rgba(0,0,0,0.1);















    overflow-x: auto;















    margin: 20px 0;















}































.tarification_table {















    width: 100%;















    border-collapse: collapse;















    font-family: 'Tajawal', 'Segoe UI', sans-serif;















    min-width: 800px;















}































/* En-têtes du tableau */















.tarification_table th {















    padding: 15px 10px;















    text-align: center;















    font-weight: bold;















    border: 1px solid #e0e0e0;















}































.thkissimo {















    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);















    color: white;















    font-size: 0.9em;















}































.thkissimo2 {















    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);















    color: white;















    font-size: 0.9em;















}































.kissimo {















    background-color: #f0f0f0;















    color: #333;















    font-size: 0.85em;















}































.kissimo2 {















    background-color: #e8e8e8;















    color: #333;















    font-size: 0.85em;















}































/* Cellules du corps */















.tarification_table td {















    padding: 12px 8px;















    text-align: center;















    border: 1px solid #e0e0e0;















    font-size: 0.9em;















    position: relative;















}































.missimo {















    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);















    font-weight: bold;















    color: #333;















    text-align: right !important;















    min-width: 120px;















}































/* Lignes alternées */















.tarification_table tbody tr:nth-child(even) {















    background-color: #fafafa;















}































/* Supprimer l'effet de survol sur la ligne entière */















.tarification_table tbody tr {















    transition: none;















}































.tarification_table tbody tr:hover {















    transform: none;















    box-shadow: none;















    background-color: transparent;















}































/* Supprimer l'effet de survol sur toutes les cellules */















.tarification_table td {















    transition: none;















    cursor: default;















}































.tarification_table td:hover {















    transform: none !important;















    box-shadow: none !important;















    background: inherit !important;















    color: inherit !important;















    border-radius: 0 !important;















}































/* ===== EFFET UNIQUEMENT SUR LES BALISES <a> (LIENS) ===== */































/* Style de base des liens dans le tableau */















.tarification_table a {















    text-decoration: none;















    display: block;















    width: 100%;















    height: 100%;















    color: inherit;















   /* padding: 8px;















    margin: -8px; */















    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);















   /* border-radius: 8px; */















    color: wheat;















}































/* Effet de survol sur les liens dans les cellules de prix */















.kissimo a:hover, .kissimo2 a:hover {















    transform: scale(1.05);















    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;















    color: white !important;















    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);















    position: relative;















    z-index: 10;















    font-weight: bold;















}































/* Effet de survol sur les liens dans les cellules promotionnelles */















.dissimo a:hover, .dissimo2 a:hover, .dissimo3 a:hover {















    transform: scale(1.03);















    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;















    color: white !important;















    box-shadow: 0 6px 16px rgba(243, 156, 18, 0.4);















    position: relative;















    z-index: 10;















}































/* Assurer la lisibilité du texte au survol */















.kissimo a:hover *,















.kissimo2 a:hover *,















.dissimo a:hover *,















.dissimo2 a:hover *,















.dissimo3 a:hover * {















    color: white !important;















}































/* ===== AUCUN EFFET SUR LES CELLULES SANS LIEN ===== */































/* AUCUN EFFET SUR LA CELLULE DE MATIÈRE (pas de lien) */















.missimo {















    transition: none;















    cursor: default;















}































.missimo:hover {















    transform: none !important;















    box-shadow: none !important;















    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;















    color: #333 !important;















}































/* AUCUN EFFET SUR LES EN-TÊTES (pas de lien) */















.tarification_table th {















    transition: none;















    cursor: default;















}































.tarification_table th:hover {















    transform: none !important;















    box-shadow: none !important;















    background: inherit !important;















    color: inherit !important;















}































/* Cellules de promotion */















.dissimo {















    background: linear-gradient(135deg, #fff5e6 0%, #ffe6cc 100%);















    text-align: center;















    padding: 20px !important;















}































.dissimo h3 {















    color: #e67e22;















    margin: 10px 0;















    font-size: 1.1em;















}































.dissimo2, .dissimo3 {















    background: #f39c12;















    text-align: center;















    padding: 15px !important;















}































.dissimo2 a, .dissimo3 a {















    text-decoration: none;















    color: white;















    transition: all 0.3s ease;















    display: inline-block;















    padding: 10px 20px;















    margin: -10px -20px;















}































.dissimo2 a:hover, .dissimo3 a:hover {















    transform: scale(1.02);















}































.dissimo2 h2, .dissimo3 h2 {















    margin: 0;















    font-size: 1.2em;















    color: white;















}































/* Style des liens */















.tarification_table a h2 {















    transition: color 0.3s ease;















}































/* ==================== RESPONSIVE MOBILE ==================== */















@media (max-width: 768px) {















    /* Réorganisation générale */















    .main-content {















        flex-direction: column;















    }















    















    .right-column {















        width: 100%;















        border: none;















        border-bottom: 1px solid #e9ecef;















        order: 1;















    }















    















    .center-column {















        order: 2;















        padding: 15px;















    }















    















    .years-list {















        flex-direction: column;















        align-items: center;















    }


    .years-title {



        display: block;


        margin-bottom: 10px;

        margin-left: 0;



    }


    .period-title {


        font-size: 1em;















    }















    















    .header-icon {















        position: static;















        margin-bottom: 15px;















        display: inline-flex;















    }



    .header {















        display: flex;















        flex-direction: column;















        align-items: center;















    }















    















    .item-title {















        padding-left: 0;















        margin-top: 30px;















    }















    















    .completed-badge {















        position: relative;















        top: 0;















        left: 0;















        margin-bottom: 10px;















        display: inline-block;















    }















    















    .progress-header {















        flex-direction: column;















        text-align: center;















    }















    















    .progress-stats {















        justify-content: center;















    }















    















    /* Ajustement de la barre de news sur mobile */















    .news-item {















        padding: 3px 12px;















    }















    















    .news-title {















        font-size: 0.75em;















    }















    















    .news-badge {















        font-size: 0.65em;















    }















    















    .container {















        margin-top: 110px;















        margin-left: 10px;















        margin-right: 10px;















        border-radius: 10px;















    }















    















    /* Ajustement de la barre de menu */















    .bande_pr {















        top: 70px;















    }















    















    .bande_pr .content {















        justify-content: center;















        gap: 10px;















    }















    















    .bande_pr .felsa a {















        padding: 5px 10px;















        font-size: 0.85em;















    }















    















    /* ===== SECTION PRESENTATION MOBILE ===== */















    .presentation {















        flex-direction: column;















        height: auto !important;















        width: 100%;















        padding: 20px 15px;















        gap: 15px;















    }















    















    .presentation > p {















        margin: 0;















        text-align: center;















    }















    















    .presentation .fit-picture {















        height: 70px !important;















        width: auto;















    }















    















    .centred {















        width: 100% !important;















        max-width: 100%;















        padding: 0 10px;















    }















    















    .contenu2 {















        display: flex;















        justify-content: center;















        width: 100%;















    }















    















    #recherche {















        width: 100% !important;















        max-width: 300px;















        margin: 0 auto;















        font-size: 14px;















        padding: 8px 12px;















        height: auto;















        min-height: 40px;















    }















    















    .righted {















        display: flex;















        flex-direction: column;















        align-items: center !important;















        justify-content: center;















        width: 100%;















        gap: 15px;















    }















    















    .righted > div:first-of-type {















        margin-left: 0 !important;















        min-width: auto !important;















        width: 100%;















        text-align: center;















        display: flex;















        align-items: center;















        justify-content: center;















        gap: 5px;















        flex-wrap: wrap;















    }















    















    .righted > div:first-of-type h2 {















        margin: 0;















    }















    















    .num {















        font-size: 1.2em;















        display: inline-block;















    }















    















    .righted > .fit-picture:first-child {















        height: 35px !important;















        width: auto;















    }















    















    .treret {















        display: flex;















        flex-direction: column;















        align-items: center;















        width: 100%;















    }















    















    .treret h3 {















        font-size: 0.9em;















        margin-bottom: 10px;















    }















    















    .treret div {















        display: flex;















        justify-content: center;















        gap: 20px;















    }















    















    .bouuton2 {















        margin: 0;















    }















    















    .bouuton2 img {















        height: 40px !important;















        width: auto;















    }















    















    /* Pied de page mobile */















    #pied_de_page {















        flex-direction: column;















        padding: 20px 15px;















        gap: 20px;















        border-radius: 10px;















    }















    















    .p_de_page {















        width: 100%;















        text-align: center;















        order: 2;















    }















    















    .p_de_page:first-of-type {















        order: 1;















    }















    















    .p_de_page:last-of-type {















        order: 3;















    }















    















    #pcentrale {















        border-right: none;















        border-left: none;















        border-top: 1px solid #e89e09;















        border-bottom: 1px solid #e89e09;















        margin: 0;















        padding: 15px 10px;















        width: 100%;















        order: 2;















        font-size: 0.85em;















    }















    















    .p_de_page img {















        height: 70px !important;















        width: auto;















    }















    















    /* ===== CORRECTION DU TABLEAU DES SELECT ===== */















    .ninome {















        width: 100%;















        overflow-x: hidden;















        padding: 0 5px;















    }















    















    .mimo {















        width: 100%;















        display: block;















        margin: 0;















        padding: 0;















    }















    















    .mimo tbody {















        display: block;















        width: 100%;















    }















    















    .mimo tr {















        display: flex;















        flex-direction: column;















        width: 100%;















        margin-bottom: 20px;















        height: auto !important;















    }















    















    .mimo th, 















    .mimo td {















        display: block;















        width: 100%;















        text-align: center;















        padding: 5px 0;















    }















    















    .mimo th {















        font-size: 1em;















        font-weight: bold;















        color: white;















        padding-bottom: 8px;















        text-align: center;















    }















    















    .mimo td {















        padding: 0;















        margin: 0;















    }















    















    .mimo select {















        width: 100% !important;















        min-width: 100% !important;















        max-width: 100% !important;















        display: block;















        margin: 0 auto;















        box-sizing: border-box;















    }















    















    /* Bouton de recherche */















    .brech {















        margin: 20px auto 10px;















        text-align: center;















        width: 100%;















    }















    















    .brech input {















        width: 100%;















        min-width: auto;















        padding: 12px 20px;















    }















    















    /* Tableau de tarification mobile */















    .ligne_et {















        flex-direction: column;















        gap: 10px;















        padding: 20px;















        margin: 20px 10px;















    }















    















    .ligne_et .fit-picture {















        height: 70px !important;















    }















    















    .ijko {















        font-size: 1.3em;















        text-align: center;















    }















    















    .tarification {















        padding: 10px;















        margin: 10px 0;















        border-radius: 10px;















    }















    















    .tarification_table {















        min-width: 100%;















        display: block;















        border-collapse: separate;















        border-spacing: 0;















    }















    















    .tarification_table thead {















        display: none;















    }















    















    .tarification_table tbody,















    .tarification_table tr,















    .tarification_table td {















        display: block;















        width: 100%;















    }















    















    .tarification_table tr {















        margin-bottom: 20px;















        border: 1px solid #e0e0e0;















        border-radius: 10px;















        overflow: hidden;















        background: white;















        box-shadow: 0 2px 8px rgba(0,0,0,0.1);















    }















    















    .tarification_table td {















        display: flex;















        justify-content: space-between;















        align-items: center;















        text-align: right !important;















        padding: 12px 15px;















        border: none;















        border-bottom: 1px solid #f0f0f0;















        border-radius: 0;















    }















    















    .tarification_table td:last-child {















        border-bottom: none;















    }















    















    .tarification_table td:first-child {















        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);















        font-weight: bold;















        font-size: 1.1em;















        justify-content: center;















        border-bottom: 2px solid #667eea;















    }















    















    .dissimo, .dissimo2, .dissimo3 {















        margin-top: 10px;















        border-radius: 10px;















    }















    















    .dissimo h3, .dissimo2 h2, .dissimo3 h2 {















        font-size: 0.9em;















    }















    















    .missimo {















        font-size: 1em;















    }















    















    /* Ajustement survol mobile - uniquement sur les liens */















    .kissimo a:hover, .kissimo2 a:hover {















        transform: scale(1.02);















    }















    















    .dissimo a:hover, .dissimo2 a:hover, .dissimo3 a:hover {















        transform: scale(1.01);















    }















    















    /* Ajustements supplémentaires */















    #istimara {















        font-size: 1.1em;















    }















    















    .lignep {















        padding: 15px;















        margin-bottom: 20px;















    }















    















    .ligne .fit-picture {















        height: 70px !important;















    }















    















    .choixchoix {















        padding: 15px;















    }















    















    .container {















        margin-top: 140px;















    }















}































/* Pour les très petits écrans (moins de 480px) */















@media (max-width: 480px) {















    .presentation {















        padding: 15px 10px;















    }















    















    .presentation .fit-picture {















        height: 55px !important;















    }















    















    #recherche {















        font-size: 12px;















        padding: 6px 10px;















    }















    















    .num {















        font-size: 1em;















    }















    















    .treret h3 {















        font-size: 0.8em;















    }















    















    .bouuton2 img {















        height: 35px !important;















    }















    















    .righted > .fit-picture:first-child {















        height: 30px !important;















    }















    















    .righted > div:first-of-type {















        font-size: 0.9em;















    }















    















    #pied_de_page {















        padding: 15px 10px;















        gap: 15px;















    }















    















    #pcentrale {















        font-size: 0.75em;















        padding: 12px 8px;















        line-height: 1.5;















    }















    















    .p_de_page img {















        height: 55px !important;















    }















    















    .ligne_et {















        margin: 15px 5px;















        padding: 15px;















    }















    















    .ligne_et .fit-picture {















        height: 55px !important;















    }















    















    .ijko {















        font-size: 1.1em;















    }















    















    .tarification {















        padding: 5px;















    }















    















    .tarification_table td {















        padding: 10px 12px;















        font-size: 0.8em;















    }















    















    .dissimo h3, .dissimo2 h2, .dissimo3 h2 {















        font-size: 0.8em;















    }















    















    .dissimo, .dissimo2, .dissimo3 {















        padding: 12px !important;















    }















}































/* Pour les tablettes (entre 769px et 1024px) */















@media (min-width: 769px) and (max-width: 1024px) {















    .presentation {















        height: auto;















        padding: 15px;















        flex-wrap: wrap;















    }















    















    .righted {















        flex-wrap: wrap;















        justify-content: center;















    }















    















    .centred {















        width: auto;















        min-width: 250px;















    }















    















    #recherche {















        width: 250px;















    }















    















    #pied_de_page {















        padding: 15px;















    }















    















    #pcentrale {















        font-size: 0.8em;















        padding: 8px 15px;















    }















    















    .p_de_page img {















        height: 75px !important;















    }















    















    .tarification {















        overflow-x: auto;















    }















    















    .tarification_table {















        min-width: 900px;















    }















    















    .thkissimo, .thkissimo2 {















        font-size: 0.8em;















        padding: 10px 5px;















    }















    















    .kissimo, .kissimo2 {















        font-size: 0.75em;















        padding: 8px 4px;















    }















    















    .missimo {















        font-size: 0.85em;















        min-width: 100px;















    }















}































/* Version desktop - garder les select côte à côte */















@media (min-width: 769px) {















    .mimo tr {















        display: table-row;















        height: 50px;















    }















    















    .mimo th, 















    .mimo td {















        display: table-cell;















        width: auto;















        vertical-align: middle;















    }















    















    .mimo th {















        white-space: nowrap;















        padding-left: 15px;















    }















    















    .mimo select {















        width: auto;















        min-width: 250px;















    }















    















    #pied_de_page {















        flex-direction: row;















    }















    















    .p_de_page {















        width: auto;















    }















    















    #pcentrale {















        border-right: 2px solid #e89e09;















        border-left: 2px solid #e89e09;















    }















}































/* Animation au défilement */















.bande_pr.scrolled {















    padding: 5px 20px;















    background: linear-gradient(135deg, #11105a 0%, #6b46a0 100%);















    transition: all 0.3s ease;















}































/* Désactiver l'effet de zoom sur iOS pour les select */















@media screen and (-webkit-min-device-pixel-ratio: 0) {















    select, .form-select, .mimo select {















        font-size: 16px;















    }















}































/* Animation et améliorations visuelles */















#pcentrale {















    background: rgba(255,255,255,0.03);















    border-radius: 8px;















    transition: all 0.3s ease;















}































#pcentrale:hover {















    background: rgba(255,255,255,0.08);















}































/* Style des liens dans le footer */















#pied_de_page a {















    text-decoration: none;















    transition: all 0.3s ease;















    display: inline-block;















}































#pied_de_page a:hover {















    opacity: 0.8;















}































/* Style pour les prix */















[class*="kissimo"] {















    font-weight: bold;















}































/* Amélioration de la lisibilité */















.dissimo, .dissimo2, .dissimo3 {















    font-size: 0.95em;















}































/* Éviter que le survol des cellules n'affecte la disposition */















.tarification_table {















    border-collapse: separate;















    border-spacing: 2px;















}























/* Style pour la période en cours */







.period-group.current-period .period-header {







    background: linear-gradient(135deg, #f39c12, #e67e22);







    border: 2px solid #fff;







    box-shadow: 0 0 15px rgba(243, 156, 18, 0.5);







}















.period-group.current-period {







    animation: pulse-border 2s infinite;







}















.current-badge {







    background: #fff;







    color: #e67e22;







    padding: 4px 12px;







    border-radius: 20px;







    font-size: 0.75em;







    font-weight: bold;







    margin-right: 10px;







    animation: pulse 1.5s infinite;







}















@keyframes pulse-border {







    0% {







        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.4);







    }







    70% {







        box-shadow: 0 0 0 10px rgba(243, 156, 18, 0);







    }







    100% {







        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0);







    }







}















@keyframes pulse {







    0% {







        transform: scale(1);







        opacity: 1;







    }







    50% {







        transform: scale(1.05);







        opacity: 0.8;







    }







    100% {







        transform: scale(1);







        opacity: 1;







    }







}















/* Rendre la période en cours plus visible */







.period-group.current-period .period-content {







    border-left: 4px solid #f39c12;







    border-right: 4px solid #f39c12;







}















.news-item .matiere-tag {







        background: rgba(255,255,255,0.2);







        padding: 2px 8px;







        border-radius: 12px;







        font-size: 0.8em;







        margin-left: 8px;







        font-weight: normal;







    }







    







    .news-item .annee-tag {







        background: rgba(255,255,255,0.15);







        padding: 2px 8px;







        border-radius: 12px;







        font-size: 0.75em;







        margin-left: 8px;







        font-weight: normal;







        border: 1px solid rgba(255,255,255,0.3);







    }







    







    .current-period-banner {







        background: linear-gradient(135deg, #2c3e50, #3498db);







        color: white;







        text-align: center;







        padding: 10px 15px;







        margin: 10px 20px;







        border-radius: 40px;







        font-weight: bold;







        box-shadow: 0 4px 15px rgba(0,0,0,0.2);







        display: flex;







        justify-content: center;







        gap: 20px;







        flex-wrap: wrap;







        font-size: 0.95em;







    }







    







    .current-period-banner span {







        display: inline-flex;







        align-items: center;







        gap: 8px;







    }















    /* ========== STYLES POUR LES CLASSES (CLASS OUVERT) ========== */















/* Conteneur principal des classes */







.ligne {







    display: flex;







    flex-wrap: wrap;







    justify-content: center;







    align-items: flex-start; /* Aligner en haut */







    gap: 30px;







    padding: 20px;







    margin: 20px auto;







    max-width: 1400px;







}















/* Bloc pour chaque année - Tous alignés horizontalement */







.fonta {







    flex: 1;







    min-width: 280px;







    max-width: 350px;







    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);







    border-radius: 20px;







    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);







    padding: 20px;







    transition: transform 0.3s ease, box-shadow 0.3s ease;







    border: 1px solid rgba(0, 0, 0, 0.05);







    display: flex;







    flex-direction: column;







}















.fonta:hover {







    transform: translateY(-5px);







    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);







}















/* Version responsive : sur mobile, les blocs se superposent */







@media (max-width: 992px) {







    .fonta {







        flex: 1 1 calc(33.33% - 30px);







        min-width: 250px;







    }







}















@media (max-width: 768px) {







    .ligne {







        flex-direction: column;







        align-items: center;







        gap: 25px;







    }







    







    .fonta {







        width: 100%;







        max-width: 100%;







        min-width: auto;







    }







}















/* Carte principale de l'année (partie du haut) */







.carre1 {







    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);







    border-radius: 20px;







    padding: 25px;







    text-align: center;







    cursor: pointer;







    transition: all 0.3s ease;







    margin-bottom: 20px;







    position: relative;







    overflow: hidden;







    min-width: 230px;







}















/* Couleurs différentes pour chaque année */







.fonta[data-annee="6"] .carre1 {







    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);







}















.fonta[data-annee="5"] .carre1 {







    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);







}















.fonta[data-annee="4"] .carre1 {







    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);







}















.carre1::before {







    content: '';







    position: absolute;







    top: 0;







    left: 0;







    right: 0;







    bottom: 0;







    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);







    pointer-events: none;







}















.carre1:hover {







    transform: scale(1.02);







    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);







}















.carre1 .classe {







    font-size: 1.6em;







    color: white;







    margin: 0 0 10px 0;







    font-weight: bold;







    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);







}















.carre1 .leçon {







    width: auto;







    height: 90px;







    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));







    transition: transform 0.3s ease;







}















.carre1:hover .leçon {







    transform: scale(1.05);







}















/* Conteneur pour la liste des classes (partie du bas) */







.fontas-list {







    flex: 1;







    display: flex;







    flex-direction: column;







}















/* Titre des sections d'élèves */







.fonta > h1 {







    font-size: 1.1em;







    color: #2c3e50;







    margin: 10px 0 10px 0;







    padding: 8px 0;







    border-bottom: 3px solid #667eea;







    display: inline-block;







    font-weight: bold;







}















/* Compteur de classes */







.fonta > h1::before {







    content: '📚 ';







    font-size: 1em;







}















/* Lignes des classes (élèves) */







.tasjil {







    background: linear-gradient(95deg, #f0f2f5 0%, #ffffff 100%);







    padding: 10px 15px;







    margin: 8px 0;







    border-radius: 10px;







    font-size: 0.85em;







    color: #2c3e50;







    transition: all 0.3s ease;







    border-right: 4px solid #667eea;







    font-weight: 500;







    cursor: pointer;







    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);







}















.tasjil:hover {







    transform: translateX(-5px);







    background: linear-gradient(95deg, #e8ebf0 0%, #f8f9fa 100%);







    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);







}















.tasjil a {







    text-decoration: none;







    color: inherit;







    display: block;







}















.tasjil a h3 {







    margin: 0;







    font-size: 0.9em;







    font-weight: 500;







}















/* Style pour les badges de statut */







.tasjil span {







    font-weight: bold;







    display: inline-block;







}















.tasjil span[style*="green"] {







    background: #d4edda;







    padding: 2px 8px;







    border-radius: 20px;







    font-size: 0.75em;







}















.tasjil span[style*="red"] {







    background: #f8d7da;







    padding: 2px 8px;







    border-radius: 20px;







    font-size: 0.75em;







}















/* Message quand aucune classe n'est disponible */







.fonta h2 {







    text-align: center;







    color: #95a5a6;







    padding: 20px;







    background: #f8f9fa;







    border-radius: 12px;







    font-size: 0.9em;







}







.contenu_image img







{







width: 100%;



}







.triple2



{



    display: flex;



    align-items: center;



    justify-content: center;



       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);



    color: white;



}







.f1a



{



        font-size: 1em;



    background: rgba(255, 255, 255, 0.2);



    display: inline-block;



    padding: 10px 20px;



    border-radius: 25px;



    margin-top: 15px;



    color : white !important;



}























/* Ligne d'en-tête */







.lignep {







text-align: center;







    margin: 20px 0 15px 0;







    padding: 15px;







    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);







    border-radius: 15px;







    /* color: white;







}















.lignep h1 {







    margin: 5px 0;







    font-size: 1.3em;







}















.lignep h1:first-child {







    font-size: 1.5em;







    font-weight: bold;







}















/* RESPONSIVE DETAILS */







@media (max-width: 992px) {







    .ligne {







        gap: 20px;







    }







    







    .carre1 .classe {







        font-size: 1.4em;







    }







    







    .carre1 .leçon {







        height: 80px;







    }







    







    .tasjil a h3 {







        font-size: 0.85em;







    }







}















@media (max-width: 768px) {







    .lignep h1:first-child {







        font-size: 1.2em;







    }







    







    .lignep h1:last-child {







        font-size: 1em;







    }







    







    .carre1 {







        padding: 20px;







    }







    







    .carre1 .classe {







        font-size: 1.3em;







    }







    







    .carre1 .leçon {







        height: 70px;







    }







    







    .fonta > h1 {







        font-size: 1em;







    }







    







    .tasjil {







        padding: 8px 12px;







    }







    







    .tasjil a h3 {







        font-size: 0.85em;







    }







    







    .tasjil span {







        font-size: 0.7em;







        padding: 2px 6px;







    }







}















@media (max-width: 480px) {







    .carre1 {







        padding: 15px;







    }







    







    .carre1 .classe {







        font-size: 1.2em;







        margin-bottom: 8px;







    }







    







    .carre1 .leçon {







        height: 55px;







    }







    







    .fonta {







        padding: 15px;







    }







    







    .tasjil {







        padding: 6px 10px;







        margin: 6px 0;







    }







    







    .tasjil a h3 {







        font-size: 0.8em;







    }







    







    .fonta h2 {







        font-size: 0.85em;







        padding: 12px;







    }







}















/* Animation d'apparition */







@keyframes fadeInUp {







    from {







        opacity: 0;







        transform: translateY(30px);







    }







    to {







        opacity: 1;







        transform: translateY(0);







    }







}















.fontas {







    animation: fadeInUp 0.5s ease-out;







}















/* Effet de brillance au survol des cartes */







.carre1::after {







    content: '';







    position: absolute;







    top: -50%;







    left: -60%;







    width: 200%;







    height: 200%;







    background: linear-gradient(







        115deg,







        rgba(255, 255, 255, 0) 0%,







        rgba(255, 255, 255, 0) 40%,







        rgba(255, 255, 255, 0.3) 50%,







        rgba(255, 255, 255, 0) 60%,







        rgba(255, 255, 255, 0) 100%







    );







    transform: rotate(45deg);







    transition: all 0.5s ease;







    pointer-events: none;







}















.carre1:hover::after {







    left: 100%;







    transition: all 0.7s ease;







}