* {



    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;



}







.prprp {



    color: black !important;



    font-family: 'Tajawal';



    font-size: 1.2em;



    font-size: 1.3em !important;



    background: white;



    padding: 20px !important;



    text-align: right;



}







.rf22 {



    border-bottom: 3px solid black;



    color: white;



    margin-right: 50px;



    margin-left: 50px;



}







/* ==================== 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;



    font-family: 'Tajawal';



}







#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: 1740px;



    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;



    color: white;



}







.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;



    font-family: 'Tajawal';



}







.entete-cour {



    margin: 15px;



}







.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;



}







.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);



    }



}







@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;



    }



}







.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: #4f72a8;



    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;



    font-family: 'Tajawal';



}







.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;



    direction: rtl;



    font-family: 'Tajawal';



}







.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: linear-gradient(90deg, #667eea, #764ba2);



    padding: 10px;



    background-position: left bottom;



    text-align: right;



    margin: 10px;



}







.rf22 h3 {



    text-align: right;



    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));



    padding: 5px;



    margin: 5px;



    font-family: tajawal;



}







/* Conteneur principal */



.f44 {



    display: flex;



    justify-content: center;



    align-items: center;



    margin: 30px 0;



    padding: 10px;



}







/* Style du premier bouton (leçon non terminée) */



.f45 {



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



    color: white;



    padding: 15px 30px;



    border-radius: 50px;



    text-align: center;



    cursor: pointer;



    transition: all 0.3s ease;



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



    border: none;



    display: inline-block;



    min-width: 250px;



}







.f45:hover {



    transform: translateY(-3px);



    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);



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



}







.f45:active {



    transform: translateY(1px);



}







.f45 strong {



    font-size: 1.2em;



    letter-spacing: 1px;



    font-family: 'Tajawal';



}







/* Style du deuxième bouton (leçon déjà terminée) */



.f46 {



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



    color: white;



    padding: 15px 30px;



    border-radius: 50px;



    text-align: center;



    cursor: pointer;



    transition: all 0.3s ease;



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



    border: none;



    display: inline-block;



    min-width: 350px;



}







.f46:hover {



    transform: translateY(-3px);



    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);



    background: linear-gradient(135deg, #e87de0 0%, #e8455c 100%);



}







.f46:active {



    transform: translateY(1px);



}







.f46 strong {



    font-size: 1.1em;



    letter-spacing: 1px;



    font-family: 'Tajawal';



}







/* Style des liens */



.f44 a {



    text-decoration: none;



    display: inline-block;



}







/* Version responsive pour mobile */



@media (max-width: 768px) {



    .f45, .f46 {



        padding: 12px 20px;



        min-width: 200px;



    }



    



    .f45 strong, .f46 strong {



        font-size: 0.9em;



    }



    



    .f44 {



        margin: 20px 10px;



    }



}







/* Animation d'apparition */



.f45, .f46 {



    animation: fadeInUp 0.5s ease-out;



    border : 2px solid black;



}







@keyframes fadeInUp {



    from {



        opacity: 0;



        transform: translateY(20px);



    }



    to {



        opacity: 1;



        transform: translateY(0);



    }



}







/* Style alternatif pour le premier bouton (version plus discrète) */



.f45-alt {



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



}







/* Style alternatif pour le deuxième bouton */



.f46-alt {



    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);



}







/* Conteneur principal */



.choix3 {



    max-width: 800px;



    margin: 50px auto;



    padding: 30px;



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



    border-radius: 20px;



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



    font-family: 'Cairo', 'Tahoma', 'Segoe UI', sans-serif;



    text-align: center;



}







/* Titres dans choix3 */



.choix3 h1 {



    color: #2c3e6d;



    font-size: 1.8em;



    margin: 15px 0;



    padding: 10px;



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



    border-radius: 15px;



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



}







.choix3 h1:first-of-type {



    color: #1a5490;



    border-right: 5px solid #3498db;



    padding-right: 20px;



}







.choix3 h1:last-of-type {



    color: #2c3e6d;



    font-size: 1.5em;



}







/* Message d'erreur */



.choix3 h2[style*="color: red"] {



    background: #ffe6e6;



    color: #d32f2f !important;



    padding: 12px 20px;



    border-radius: 10px;



    border-left: 5px solid #d32f2f;



    font-size: 1.2em;



    margin: 20px auto;



    display: inline-block;



    animation: shake 0.5s ease-in-out;



}







/* Sous-titre "Code d'accès" */



.choix3 h2:not([style]) {



    color: #2c3e6d;



    font-size: 1.6em;



    margin: 25px 0 15px;



    position: relative;



    display: inline-block;



    padding-bottom: 10px;



}







.choix3 h2:not([style])::after {



    content: '';



    position: absolute;



    bottom: 0;



    left: 25%;



    width: 50%;



    height: 3px;



    background: linear-gradient(90deg, #3498db, #9b59b6);



    border-radius: 3px;



}







/* Formulaire */



.choix3 form {



    background: white;



    padding: 30px;



    border-radius: 20px;



    margin-top: 20px;



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



}







.choix3 form p {



    margin: 0;



}







/* Label */



.choix3 label {



    display: block;



    font-size: 1.1em;



    font-weight: bold;



    color: #2c3e6d;



    margin-bottom: 10px;



}







/* Champ de saisie */



.choix3 input[type="text"] {



    width: 80%;



    max-width: 300px;



    padding: 12px 20px;



    font-size: 1.1em;



    text-align: center;



    border: 2px solid #ddd;



    border-radius: 50px;



    transition: all 0.3s ease;



    outline: none;



    font-family: monospace;



    font-size: 1.3em;



    letter-spacing: 2px;



}







.choix3 input[type="text"]:focus {



    border-color: #3498db;



    box-shadow: 0 0 10px rgba(52, 152, 219, 0.3);



    transform: scale(1.02);



}







/* Span à côté du champ */



.choix3 span {



    display: inline-block;



    margin-left: 15px;



    color: #7f8c8d;



    font-size: 0.9em;



    background: #ecf0f1;



    padding: 5px 12px;



    border-radius: 20px;



}







/* Bouton de connexion */



.choix3 .bouton {



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



    color: white;



    padding: 12px 35px;



    font-size: 1.1em;



    font-weight: bold;



    border: none;



    border-radius: 50px;



    cursor: pointer;



    transition: all 0.3s ease;



    margin-top: 20px;



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



}







.choix3 .bouton:hover {



    transform: translateY(-2px);



    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);



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



}







.choix3 .bouton:active {



    transform: translateY(1px);



}







/* Lien pour demander un code */



.choix3 a {



    color: #3498db;



    text-decoration: none;



    font-weight: bold;



    transition: all 0.3s ease;



    border-bottom: 2px dotted #3498db;



    padding-bottom: 2px;



}







.choix3 a:hover {



    color: #9b59b6;



    border-bottom-color: #9b59b6;



    transform: scale(1.05);



    display: inline-block;



}







.choix3 h2 a {



    font-size: 1.1em;



    background: #f0f0f0;



    padding: 8px 20px;



    border-radius: 30px;



    display: inline-block;



    margin-top: 10px;



    border-bottom: none;



}







.choix3 h2 a:hover {



    background: #3498db;



    color: white;



    transform: translateY(-2px);



}







/* Animation de shake pour l'erreur */



@keyframes shake {



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



    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }



    20%, 40%, 60%, 80% { transform: translateX(5px); }



}







/* Responsive */



@media (max-width: 768px) {



    .choix3 {



        margin: 20px 15px;



        padding: 20px;



    }



    



    .choix3 h1 {



        font-size: 1.3em;



    }



    



    .choix3 h2:not([style]) {



        font-size: 1.2em;



    }



    



    .choix3 input[type="text"] {



        width: 90%;



        font-size: 1.1em;



        margin-bottom: 10px;



    }



    



    .choix3 span {



        display: block;



        margin: 10px auto 0;



        width: fit-content;



    }



    



    .choix3 .bouton {



        width: 80%;



    }



    



    .choix3 form {



        padding: 20px;



    }



}







/* Version pour grands écrans */



@media (min-width: 1200px) {



    .choix3 {



        max-width: 1000px;



    }



}







/* Animation d'entrée */



.choix3 {



    animation: fadeIn 0.6s ease-out;



}







@keyframes fadeIn {



    from {



        opacity: 0;



        transform: translateY(20px);



    }



    to {



        opacity: 1;



        transform: translateY(0);



    }



}







/* Style pour le formulaire en mode RTL */



.choix3[dir="rtl"],



.choix3 {



    direction: rtl;



    font-family: 'Tajawal';



}







.choix3 span {



    margin-left: 0;



    margin-right: 15px;



}







/* ==================== 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 MODERNE REDESIGNÉ ==================== */







/* Conteneur principal du footer */



#pied_de_page {



    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);



    border-radius: 20px 20px 0 0;



    



    padding: 40px 30px 25px;



    position: relative;



    overflow: hidden;



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



    gap: 30px;



}







/* Effet de brillance en haut du footer */



#pied_de_page::before {



    content: '';



    position: absolute;



    top: 0;



    left: 0;



    right: 0;



    height: 3px;



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



    background-size: 200% 100%;



    animation: gradientMove 3s ease infinite;



}







@keyframes gradientMove {



    0% { background-position: 0% 50%; }



    50% { background-position: 100% 50%; }



    100% { background-position: 0% 50%; }



}







/* Élément décoratif flou en arrière-plan */



#pied_de_page::after {



    content: '';



    position: absolute;



    bottom: -50px;



    right: -50px;



    width: 200px;



    height: 200px;



    background: radial-gradient(circle, rgba(102,126,234,0.1) 0%, rgba(118,75,162,0) 70%);



    border-radius: 50%;



    pointer-events: none;



}







/* Colonnes du footer */



.p_de_page {



    text-align: center;



    transition: all 0.3s ease;



    z-index: 2;



    position: relative;



}







/* Style des images dans le footer */



.p_de_page img {



    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));



    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);



    border-radius: 15px;



}







.p_de_page img:hover {



    transform: translateY(-8px) scale(1.02);



    filter: drop-shadow(0 15px 25px rgba(102, 126, 234, 0.4));



}







/* Section centrale du footer */



#pcentrale {



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



    backdrop-filter: blur(5px);



    border-radius: 20px;



    padding: 20px 25px;



    margin: 0 15px;



    transition: all 0.3s ease;



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



    position: relative;



    overflow: hidden;



}







#pcentrale:hover {



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



    border-color: rgba(102, 126, 234, 0.3);



    transform: translateY(-3px);



}







/* Ligne décorative dans la section centrale */



#pcentrale::before {



    content: '';



    position: absolute;



    top: 0;



    left: 20px;



    right: 20px;



    height: 1px;



    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);



}







/* Texte dans la section centrale */



#pcentrale strong {



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



    -webkit-background-clip: text;



    background-clip: text;



    color: transparent;



    font-weight: bold;



    position: relative;



    display: inline-block;



}







/* Ligne sous le texte "Adresse IP" */



#pcentrale strong:first-child {



    background: linear-gradient(135deg, #a8c0ff, #e9e7ef);



    -webkit-background-clip: text;



    background-clip: text;



    color: transparent;



}







/* Style pour les visiteurs */



#pcentrale > strong {



    display: inline-block;



    margin: 5px 0;



    font-size: 0.95em;



}







/* Séparateur entre les infos */



#pcentrale br + strong {



    margin-top: 10px;



}







/* Conteneur des infos visiteurs */



.visitor-stats {



    display: flex;



    justify-content: center;



    gap: 25px;



    margin-top: 12px;



    padding-top: 12px;



    border-top: 1px dashed rgba(255, 255, 255, 0.15);



    flex-wrap: wrap;



}







.visitor-stats span {



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



    padding: 4px 12px;



    border-radius: 20px;



    font-size: 0.85em;



}







/* Animation pour le compteur de visiteurs */



@keyframes pulseGlow {



    0%, 100% {



        text-shadow: 0 0 2px rgba(243, 156, 18, 0.5);



    }



    50% {



        text-shadow: 0 0 8px rgba(243, 156, 18, 0.8);



    }



}







#pcentrale strong:has(+ br) {



    animation: pulseGlow 2s ease-in-out infinite;



}







/* Version tablette */



@media (max-width: 992px) {



    #pied_de_page {



        padding: 30px 20px 20px;



        gap: 25px;



    }



    



    #pcentrale {



        padding: 15px 20px;



        margin: 0 10px;



    }



    



    .p_de_page img {



        max-width: 100px;



        height: auto;



    }



}







/* Version mobile */



@media (max-width: 768px) {



    #pied_de_page {



        flex-direction: column;



        padding: 30px 20px 25px;



        border-radius: 20px 20px 0 0;



        gap: 20px;



    }



    



    .p_de_page {



        width: 100%;



        order: 2;



    }



    



    .p_de_page:first-of-type {



        order: 1;



        margin-bottom: 5px;



    }



    



    .p_de_page:last-of-type {



        order: 3;



        margin-top: 5px;



    }



    



    #pcentrale {



        border: none;



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



        border-bottom: 1px solid rgba(255, 255, 255, 0.1);



        margin: 5px 0;



        padding: 20px 15px;



        border-radius: 15px;



        order: 2;



        width: 100%;



    }



    



    .p_de_page img {



        max-width: 90px;



        height: auto;



    }



    



    .visitor-stats {



        gap: 12px;



    }



    



    .visitor-stats span {



        font-size: 0.75em;



        padding: 3px 10px;



    }



}







/* Version très petite mobile */



@media (max-width: 480px) {



    #pied_de_page {



        padding: 25px 15px 20px;



    }



    



    .p_de_page img {



        max-width: 75px;



    }



    



    #pcentrale {



        padding: 15px 12px;



        font-size: 0.8em;



    }



    



    #pcentrale strong {



        font-size: 0.9em;



    }



    



    .visitor-stats {



        gap: 8px;



    }



    



    .visitor-stats span {



        font-size: 0.7em;



        padding: 2px 8px;



    }



}







/* Support pour les écrans très larges */



@media (min-width: 1400px) {



    #pied_de_page {



        padding: 50px 50px 30px;



    }



    



    .p_de_page img {



        max-width: 130px;



    }



    



    #pcentrale {



        padding: 25px 35px;



        font-size: 1.05em;



    }



}







/* Animation d'entrée pour le footer */



@keyframes footerSlideUp {



    from {



        opacity: 0;



        transform: translateY(30px);



    }



    to {



        opacity: 1;



        transform: translateY(0);



    }



}







#pied_de_page {



    animation: footerSlideUp 0.6s ease-out;



}







/* Effet de survol global */



#pied_de_page:hover {



    background: linear-gradient(135deg, #1a1640, #3a3568, #2a2548);



    transition: background 0.3s ease;



}







/* Style pour les liens si présents dans le footer */



#pied_de_page a {



    text-decoration: none;



    transition: all 0.3s ease;



    display: inline-block;



}







#pied_de_page a:hover {



    transform: translateY(-2px);



    filter: brightness(1.1);



}







/* Effet de verre dépoli amélioré sur la section centrale */



#pcentrale {



    backdrop-filter: blur(8px);



    -webkit-backdrop-filter: blur(8px);



}







.contenu2 a {



    text-decoration: none;



    color: #935387;



    font-weight: bolder;



}







.fit-picture {



    max-width: 100%;



    height: auto;



    display: block;



}







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



.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;



}







.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;



}







.tarification_table th {



    padding: 15px 10px;



    text-align: center;



    font-weight: bold;



    border: 1px solid #e0e0e0;

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

    color: white;



}







.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;



}







.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;



}







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



    background-color: #fafafa;



}







.tarification_table tbody tr {



    transition: none;



}







.tarification_table tbody tr:hover {



    transform: none;



    box-shadow: none;



    background-color: transparent;



}







.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;



}







.tarification_table a {



    text-decoration: none;



    display: block;



    width: 100%;



    height: 100%;



    color: inherit;



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



    color: wheat;



}







.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;



}







.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;



}







.kissimo a:hover *,



.kissimo2 a:hover *,



.dissimo a:hover *,



.dissimo2 a:hover *,



.dissimo3 a:hover * {



    color: white !important;



}







.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;



}







.tarification_table th {



    transition: none;



    cursor: default;



}







.tarification_table th:hover {



    transform: none !important;



    box-shadow: none !important;



    background: inherit !important;



    color: inherit !important;



}







.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;



}







.tarification_table a h2 {



    transition: color 0.3s ease;



}







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



@media (max-width: 768px) {



    .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;



    }



    .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;



    }



    .bande_pr {



        top: 70px;



    }



    .bande_pr .content {



        justify-content: center;



        gap: 10px;



    }



    .bande_pr .felsa a {



        padding: 5px 10px;



        font-size: 0.85em;



    }



    .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;



    }



    .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;



    }



    .brech {



        margin: 20px auto 10px;



        text-align: center;



        width: 100%;



    }



    .brech input {



        width: 100%;



        min-width: auto;



        padding: 12px 20px;



    }



    .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;



    }



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



        transform: scale(1.02);



    }



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



        transform: scale(1.01);



    }



    #istimara {



        font-size: 1.1em;



    }



    .lignep {



        padding: 15px;



        margin-bottom: 20px;



    }



    .ligne .fit-picture {



        height: 70px !important;



    }



    .choixchoix {



        padding: 15px;



    }



    .container {



        margin-top: 140px;



    }



}







@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;



    }



    .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;



    }



}







@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;



    }



    .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;



    }



}







@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;



    }



}







.bande_pr.scrolled {



    padding: 5px 20px;



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



    transition: all 0.3s ease;



}







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



    select, .form-select, .mimo select {



        font-size: 16px;



    }



}







#pcentrale {



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



    border-radius: 8px;



    transition: all 0.3s ease;



    text-align: center;



    min-width: 70%;



}







#pcentrale:hover {



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



}







[class*="kissimo"] {



    font-weight: bold;



}







.dissimo, .dissimo2, .dissimo3 {



    font-size: 0.95em;



}







.tarification_table {



    border-collapse: separate;



    border-spacing: 2px;



}







.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;



    }



}







.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;



}







.news-ticker-content {



    transition: animation-play-state 0.3s ease;



}







.news-ticker-container:hover .news-ticker-content {



    animation-play-state: paused !important;



}







.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;



}







.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;



}







.fontas 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;



    min-width: 70%;



}







.lignep {



    text-align: center;



    margin: 20px 0 15px 0;



    padding: 15px;



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



    border-radius: 15px;



}







.lignep h1 {



    margin: 5px 0;



    font-size: 1.3em;



}







.lignep h1:first-child {



    font-size: 1.5em;



    font-weight: bold;



}







@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;



    }



    .fontas > 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;



    }



    .fontas {



        padding: 15px;



    }



    .tasjil {



        padding: 6px 10px;



        margin: 6px 0;



    }



    .tasjil a h3 {



        font-size: 0.8em;



    }



    .fontas h2 {



        font-size: 0.85em;



        padding: 12px;



    }



}







@keyframes fadeInUp {



    from {



        opacity: 0;



        transform: translateY(30px);



    }



    to {



        opacity: 1;



        transform: translateY(0);



    }



}







.fontas {



    animation: fadeInUp 0.5s ease-out;



}







.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;



}







.ligne {



    display: flex;



    flex-wrap: wrap;



    justify-content: center;



    align-items: flex-start;



    gap: 30px;



    padding: 20px;



    margin: 20px auto;



    max-width: 1400px;



}







.fontas {



    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;



}







.fontas:hover {



    transform: translateY(-5px);



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



}







@media (max-width: 992px) {



    .fontas {



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



        min-width: 250px;



    }



}







@media (max-width: 768px) {



    .ligne {



        flex-direction: column;



        align-items: center;



        gap: 25px;



    }



    .fontas {



        width: 100%;



        max-width: 100%;



        min-width: auto;



    }



}







.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;



}







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



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



}







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



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



}







.fontas[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);



    font-family: 'Tajawal';



}







.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);



}







.fontas-list {



    flex: 1;



    display: flex;



    flex-direction: column;



}







.fontas > 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;



}







.fontas > h1::before {



    content: '📚 ';



    font-size: 1em;



}







#pied_de_page



{



    display: flex;



    align-items: center;



    justify-content: center;



    width: 100%;



}