@media (min-width:1000px) {

    /* Mod **************************************/
        /* styles.css */
    * {
        font-family: Arial;
    }

    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        max-width: 100%;

    }

    header {
        background-color: #453bcb;
        color: black;
        padding: 10px 0;
    }

    header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header .header-main img {
        width: 12%; /* Taille fixe pour le logo */
        float: left;
        margin-left: 40px;
    }

    .header-main h1 {
        font-family: Georgia;
        margin-top: 2%;
        margin-bottom: 3%;
    }

    .nav {
        margin: 0;
        padding: 0;
        list-style: none;
        font-family: Georgia;
    }

    .nav-item {
        margin: 0 10px;
    }

    .nav-link.active,
    .nav-link:hover {
        background-color: #444; /* Couleur pour le menu actif et au survol */
        color: white !important;
    }

    .hero-section {
        position: relative;
        height: 500px;
        background-image: url('img/school.jpg'); 
        background-size: cover;
        background-position: center;
        color: white;
        text-align: left;
    }

    .hero-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
        padding: 20px;
        border-radius: 5px;
        max-width: 600px;
        text-align: center;
    }

    main {
        padding: 20px;
    }

    .section-description {
        text-align: center;
        margin-bottom: 40px;
    }

    .separator {
        width: 100%;
        height: 1px;
        background-color: #e60000;
        position: relative;
        margin: 10px 0 30px 0;
    }

    .separator::before, .separator::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50%;
        height: 1px;
        background-color: #ccc;
    }

    .separator::before {
        left: 0;
    }

    .separator::after {
        right: 0;
    }

    .info-box {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    footer {
        background-color: #021d3a;
        color: #fff;
        padding: 40px 0;
    }

    footer h5 {
        color: #fff;
        position: relative;
        margin-bottom: 20px;
        font-weight: 700;
    }

    footer h5::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 50px;
        height: 2px;
        background-color: #e60000;
    }

    footer .list-unstyled li a {
        color: #999;
        text-decoration: none;
        position: relative;
        padding-left: 20px; /* Espace pour l'icône de coche */
    }

    footer .list-unstyled li a::before {
        content: url('img/check-icon.png'); 
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    footer .list-unstyled li a:hover {
        color: #e60000;
        text-decoration: underline;
    }

    footer .social-icon {
        font-size: 30px; /* Taille fixe pour les icônes des réseaux sociaux */
        margin: 0 10px;
        transition: transform 0.2s;
    }

    footer .social-icon:hover {
        transform: scale(1.2); /* Effet de zoom au survol */
    }

    footer p {
        margin: 10px 0;
    }

    /* Ajout du trait de séparation rouge */
    .red-separator {
        border-top: 2px solid #e60000;
    }

    /* Styles for "Nos filières" section */
    .card {
        margin-bottom: 30px;
    }

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

    /* Styles for "Témoignages" section */
    .testimonial-section {
        background-image: url('img/school.jpg'); 
        background-size: cover;
        background-position: center;
        padding: 60px 0;
    }

    .testimonial {
        background: rgba(0, 0, 0, 0.7);
        padding: 40px;
        border-radius: 10px;
        max-width: 800px;
        margin: 0 auto;
    }

    .testimonial-img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border: 3px solid #fff;
        margin-bottom: 20px;
    }

    .blockquote {
        font-size: 1.2rem;
        font-style: italic;
    }

    /* Styles for "Contact" page */
    .contact-form {
        background: #f8f9fa;
        padding: 40px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .contact-form .form-group label {
        font-weight: bold;
    }

    .contact-form .form-group span.text-danger {
        color: #e60000;
    }

    /* Styles for "Actualités" page */
    .blog-section {
        margin-top: 40px;
    }

    .blog-section .jumbotron {
        padding: 2rem 1rem;
        margin-bottom: 2rem;
        border-radius: 0;
    }

    .blog-section h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .blog-section .btn {
        margin-top: 1rem;
    }

    .blog-section .card {
        margin-bottom: 1.5rem;
    }

    /* Styles for "Inscription" page */
    .inscription-section {
        margin-top: 40px;
    }

    .inscription-section .jumbotron {
        padding: 2rem 1rem;
        margin-bottom: 2rem;
        border-radius: 0;
    }

    .inscription-section h1 {
        font-size: 2.5rem;
    }

    .inscription-section form .form-group label {
        font-weight: bold;
    }

    .inscription-section form .form-group span.text-danger {
        color: #e60000;
    }

    .inscription-section form .btn {
        margin-top: 1rem;
    }

    /* Styles for "Filières" page */
    .filieres-section {
        margin-top: 40px;
    }

    .filieres-section .jumbotron {
        padding: 2rem 1rem;
        margin-bottom: 2rem;
        border-radius: 0;
    }

    .filieres-section h1 {
        font-size: 2.5rem;
    }

    .filieres-section h2 {
        font-size: 2rem;
        margin-top: 20px;
    }

    .filieres-section h3 {
        font-size: 1.5rem;
        margin-top: 20px;
    }

    /* Styles for "Portfolio" page */
    .portfolio-section {
        margin-top: 40px;
    }

    .portfolio-section .jumbotron {
        padding: 2rem 1rem;
        margin-bottom: 2rem;
        border-radius: 0;
    }

    .portfolio-section h1 {
        font-size: 2.5rem;
    }

    .portfolio-section .img-fluid {
        border: 2px solid #ccc;
    }
    /* Mod ******************************************/
    a {
        cursor: pointer;
    }

    body {
        margin: 0;
        padding: 0;
        background-color: #fff;
    }

    .top-bar {
        padding: 10px;
        text-align: center;
        border-radius: 5px;
        background-color: #c3c3c3;
        color: #fff;
        display: flex;
    }

    .contact-info {
        display: flex;
        margin-left: 10%;
    }

    .contact-info div {
        margin: 0 15px;
        margin-left: 20px;
        text-align: center;
    }

    .contact-info p {
        margin-left: 100px;
        margin-top: -10px;
        text-align: center;
    }

    .contact-info img {
        width: auto;
        height: auto;
        margin-left: -140px;
        margin-bottom: -12.5px;
    }

    .header-main {
        text-align: center;
        background-color: #fff;
        padding: 20px 0;
    }

    header img {
        width: 100px;
    }

    header h1 {
        margin: 0;
    }
/* START */
    .nav {
        background-color: #453bcb;
        margin-left: 350px;
    }

    .nav .ul {
        display: flex;
        justify-content: center;
        background-color: #453bcb;
        padding: 0;
        list-style: none;
        border-radius: 20px;
        border-radius: 10px;
        font-family: Georgia;
    }

    .nav .ul li {
        position: relative;
        margin: 0;
        border-radius: 10px;
        transition: all 0.4s linear;
    }

    .nav .ul li a {
        display: block;
        padding: 15px 20px;
        color: #fff;
        text-decoration: none;
        border-radius: 10px;
        transition: all 0.4s linear;
        font-weight: bold;
        font-family: Lucida Fax;
    }

    .nav .ul li a:hover {
        background-color: #555;
        border-radius: 20px;
        color: black;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: white;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
/* END */
    /* ************************************** */
    .nav_ {
        background-color: #322b91;
        position: fixed;
        top: 0px;
        border-radius: 100px;
        opacity: 0;
        transition: 0.8s;
        width: 0%;
        height: 3%;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
        z-index: 1000;
    }

    .nav_ .ul_ {
        display: flex;
        justify-content: center;
        background-color: #322b91;
        padding: 0;
        list-style: none;
        border-radius: 100px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        font-family: Georgia;
    }

    .nav_ .ul_ li[name='li'] {
        position: relative;
        margin: 0;
        border-radius: 100px;
        transition: all 0.4s linear;
    }

    .nav_ .ul_ li[name='li'] .a {
        display: block;
        padding: 15px 20px;
        color: #fff;
        text-decoration: none;
        border-radius: 100px;
        transition: all 0.4s linear;
        font-weight: bold;
        font-family: Lucida Fax;
    }

    .nav_ .ul_ li[name='li'] .a:hover {
        background-color: #555;
        border-radius: 100px;
        color: black;
    }

    .dropdown-conten {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-conten .a {
        color: white;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        border-radius: 100px;
    }

    .dropdown-conten .a:hover {
        background-color: #f1f1f1;
        border-radius: 100px;
    }

    .dropdow:hover .dropdown-conten {
        display: block;
        border-radius: 100px;
    }
    /* ************************************** */

    .info-flash {
        background-color: #585396;
        text-align: left;
        padding: 10px;
        font-weight: bold;
        border-radius: 10px;
    }

    .info-flash span {
        color: white;
        margin-left: 5%;
    }

    .info-flash .o {
        float: right;
        margin-right: 15%;
        font-weight: normal;
    }

    .div {
        background-color: #453bcb;
        border: 10px solid transparent;
    }

    .slider {
        border-radius: 10px;
        width: 100%;
        overflow: hidden;
        margin-top: 20px;
        max-width: 1200px; /* Ajuste la taille maximale du slider */
        margin: 20px auto; /* Centre le slider horizontalement */
    }

    .slider div img {
        width: 100%;
        max-width: 100%; /* S'assure que les images ne dépassent pas la taille du conteneur */
        height: auto;
        margin: auto; /* Centre les images */
        border-radius: 20px;
        animation: slide 15s infinite;
    }

    @keyframes slide {
        0% { margin-left: 50px; }
        2% { margin-left: 0px; }
        15% { margin-left: 0px; }
        100% { margin-left: 0px; }
    }

    .radios {
        background-color: #272176;
        height: 30px;
        display: flex;
        border-radius: 50%;
    }

    .radios button {
        border-radius: 50%;
        width: 26px;
        height: 26px;
        margin-top: 2px;
        margin-left: 5px;
        object-position: center;
        background-color: #c3c3c3;
        cursor: pointer;
    }

    .radios #a {
        margin-left: 35%;
    }

    .div1{
        display: block;
        width: 100%;
    }

    .div2{
        display: none;
        width: 0%;
        background-color: aqua;
    }

    .div3{
        display: none;
        width: 0%;
        background-color: blue;
    }

    .div4{
        display: none;
        width: 0%;
        background-color: #cc0066;
    }

    .div5{
        display: none;
        width: 0%;
        background-color: lime;
    }

    .div6{
        display: none;
        width: 0%;
        background-color: #33cc99;
    }

    .div7{
        display: none;
        width: 0%;
        background-color: #9966cc;
    }

    .div8{
        display: none;
        width: 0%;
        background-color: #cc33cc;
    }

    .div9{
        display: none;
        width: 0%;
        background-color: #999999;
    }

    .div10{
        display: none;
        width: 0%;
        background-color: #cc6600;
    }

    .links {
        display: flex;
        justify-content: center;
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
    }

    .links-c {
        display: flex;
        justify-content: center;
        padding: 20px;
        background-color: #094170;
        border-radius: 10px;
        color: white;
    }

    .students-links span {
        width: 100px;
    }

    .students-links img {
        width: 25px;
        margin-right: -45px;
        cursor: cell;
    }

    .students-links ul {
        display: none;
        background-color: #dedbdb;
        border-radius: 5px;
        width: 90%;
        text-align: left;
    }

    .students-links ul li {
        color: black;
        font-family: Century;
    }

    .students-links ul li a {
        color: black;
    }

    .students-link-card .new_ {
        width: 110%;
        cursor: auto;
    }

    .link-card {
        background-color: #f4f4f4;
        border: 1px solid #ddd;
        margin: 0 5px;
        padding: 20px;
        text-align: center;
        border-radius: 10px;
        border-left: 15px solid #ce6100;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    #link {
        background-color: #f4f4f4;
        border: 1px solid #ddd;
        margin: 0 5px;
        padding: 20px;
        text-align: center;
        border-radius: 10px;
        border-left: 15px solid #5683e9;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    #link2 {
        background-color: #f4f4f4;
        border: 1px solid #ddd;
        margin: 0 5px;
        padding: 20px;
        text-align: center;
        border-radius: 10px;
        border-left: 15px solid #c8e21b;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .link-card-c {
        background-color: #125085;
        border: 1px solid #ddd;
        margin: 0 10px;
        padding: 20px;
        text-align: center;
        border-radius: 10px;
        color: white;
    }

    .link-card h3 {
        margin-top: 0;
    }

    .link-card-c p {
        color: white;
    }

    .links-c h3 {
        color: #aab9c6;
        margin-top: 3%;
        text-align: center;
        text-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    }

    .link-card-c h5 {
        color: #a5acb1;
        margin-top: 0;
    }

    .link-card a {
        color: white;
    }

    .link-card button {
        background-color: #333;
        color: #fff;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
    }

    .link-card button:hover {
        background-color: #555;
    }

    .btn_links,
    .btn_admin {
        border-radius: 100px;
    }

    .administration {
        background-color: #fff;
        padding: 20px;
        width: 100%;
        height: 600px;
        text-align: center;
        margin-bottom: -5%;
    }

    .administration h2 {
        background-color: #322b91;
        color: white;
        font-family: Century;
    }

    .administration a {
        text-decoration: none;
        font-family: Constantia;
        color: white;
    }

    .arr-plan {
        background-image: url("img/image/composition.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        height: 400px;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(255, 255, 255, 1.0);
    }

    .arr-plan h5 {
        margin-right: -500px;
        text-shadow: 0 4px 4px rgba(0, 0, 0, 0.7);
        margin-top: 30px;
    }

    .agenda {
        margin-top: 2.5%;
        text-align: left;
        margin-left: 45%;
        margin-right: 15%;
        border-top: 3px solid red;
        border-left: 2px solid #e08a4b;
        border-top-left-radius: 20px;
    }

    .agenda .main {
        margin-bottom: -15%;
        margin-left: 66px;
    }

    .agenda hr {
        color: red;
        height: 5px;
    }

    .administration .agenda p {
        margin: 15px 0;
        margin-left: 25%;
        color: black;
        font-family: Georgia;
        font-style: italic;
        font-weight: bold;
    }

    .agenda * {
        margin-left: 40px;
    }

    .proviseur {
        width: 270px;
        margin-top: -30%;
        margin-left: 20%;
    }

    .proviseur img {
        border-radius: 50%;
        object-fit: cover;
        width: 150px;
        height: 150px;
    }

    .lien-proviseur {
        text-decoration: none;
        text-align: left;
        color: white;
    }

    .lien-proviseur h5 {
        font-size: 14px;
    }

    .cadre-pr {
        font-family: Georgia;
        color: black;
    }

    .administration #one {
        margin-left: 70px;
    }

    .administration #two {
        margin-left: -5px;
    }

    .administration button {
        background-color: #2b5513;
        color: #fff;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        opacity: 0.9;
        padding-right: 40px;
        padding-left: 40px;
    }

    .administration button a {
        color: white;
        opacity: 0.9;
        margin-left: -10px;
    }

    .administration button:hover {
        opacity: 1;
    }
    .administration button a:hover {
        opacity: 1;
    }

    /* Styles pour la section des élèves */
    .students {
        background-color: #fff;
        padding: 20px;
        text-align: center;
    }

    .students h2 {
        color: #fff;
        margin-bottom: 20px;
        background-color: #322b91;
        font-family: Century;
    }

    .students-content {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .students-links {
        width: 60%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 60%; /* Réduction de la largeur */
    }

    .students-link-card {
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        background-color: #78909c;
        color: #fff;
        padding: 10px 20px;
        margin: 5px 0;
        width: 100%;
        cursor: pointer;
        border-radius: 5px;
        margin-left: -100px;
    }

    .resultat-link {
        font-weight: bold;
    }

    .students a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        font-family: Rockwell;
    }

    .students-link-card p {
        margin: 0;
        margin-left: -2%;
    }

    .students-link-card span {
        font-size: 1.5em;
        font-weight: bold;
        margin-right: -15%;
    }

    .students-link-card span img{
        display: inline;
    }

    .students-link-card .new {
        background-color: transparent;
        color: #000;
        padding: 2px 5px;
        margin-left: 10px;
        font-size: 0.8em;
    }

    .students-info {
        width: 35%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 350px; /* Réduction de la largeur */
    }

    .info-card {
        background-color: #fff;
        color: #d10439;
        padding: 10px;
        margin-bottom: 24px;
        border: 1px solid #4a148c;
        width: 100%;
        text-align: center;
        cursor: pointer;
        border-radius: 5px;
    }

    .info-card h3 {
        margin-top: 30px;
        color: #d10439;
        font-size: 22px;
        font-family: Tahoma;
    }

    .major-students {
        background-color: #fff;
        padding: 5px;
        width: 60%;
        text-align: center;
        margin-top: -38%;
        margin-left: 210px;
        border-radius: 5px;
        overflow: hidden;
    }

    .major-students h3 {
        color: black;
        margin: 0 0 10px 0;
        text-align: center;
        font-size: 16px;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        margin-left: 0px;
    }

    .major-student {
        width: 80%;
        border: 3px solid #c3c3c3;
        border-radius: 10px;
        margin-right: 0px;
    }

    .major-student .un {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .major-student p {
        margin: 5px 0;
    }

    /* Styles pour la section des événements */
    .events {
        background-color: #f9f9f9;
        padding: 40px 0;
        text-align: center;
    }

    .events h2 {
        color: #616161;
        margin-bottom: 20px;
    }

    .events-content {
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .event {
        background-color: #fff;
        border: 1px solid #ddd;
        padding: 10px;
        width: 45%;
        text-align: center;
        border-radius: 10px;
    }

    .event img {
        width: 100%;
        height: auto;
        border-radius: 20px;
    }

    .event button {
        background-color: #333;
        color: #fff;
        border: none;
        padding: 10px 20px;
        margin-top: 10px;
        cursor: pointer;
    }

    .event button:hover {
        background-color: #555;
    }

    /* Touche personnelle */
    .btn_event{
        border-radius: 100px;
    }

    /* Styles pour la section année scolaire */
    .school-year {
        background-color: #fff;
        padding: 40px 0;
        text-align: center;
    }

    .school-year h2 {
        color: #616161;
        margin-bottom: 20px;
    }

    .stats {
        display: flex;
        justify-content: center;
        gap: 40px;
    }

    .stat {
        text-align: center;
        width: 20%;
    }

    .stat img {
        width: 50px;
        height: auto;
        margin-bottom: 10px;
    }

    .stat .number {
        font-size: 2em;
        color: #78909c;
        margin: 0;
    }

    .stat .label {
        font-size: 1em;
        color: #333;
    }

    /* Styles pour le pied de page */
    footer {
        background-color: #021d3a;
        color: #fff;
        text-align: center;
        padding: 20px 0;
        border-radius: 10px;
    }

    .footer-top {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        padding-bottom: 10px;
        border-bottom: 1px solid #555;
    }

    .footer-top div,
    .footer-top a {
        color: #fff;
        text-decoration: none;
        font-size: 0.9em;
    }

    .footer-middle {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding: 20px 0;
    }

    .footer-middle a img {
        width: 30px;
        height: auto;
    }

    .footer-bottom {
        padding-top: 10px;
        font-size: 0.8em;
    }

    .footer-bottom span {
        display: block;
        margin: 5px 0;
    }
/* Mon propre CSS */
    #active_menu {
        background-color: #5D5D69;
        color: blue;
        border-radius: 20px;
    }

    .nav .ul .dropdown .dropdown-content {
        background-color: #666;
        border-radius: 20px;
    }

    .nav_ .ul_ .dropdow .dropdown-conten {
        background-color: #666;
        border-radius: 100px;
    }

    .nav .ul li div a {
        background-color: #666;
    }

    .section_zone {
        text-align: center;
        float: right;
        margin-bottom: -25%;
        margin-top: 20%;
        margin-right: 1.5%;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
        border: none;
        border-radius: 10px;
        /*animation: anime 1s infinite;*/
        background-color: #453bcb;
        transform: rotate(90deg);
        opacity: 0.9;
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
    }

    /*@keyframes anime {
        0% { background-color: #c3c3c3; }
        33% { background-color: #efebeb; }
        66% { background-color: #c3c3c3; }
        100% { background-color: #efebeb; }
    }*/

    .section_zone a {
        font-weight: bold;
    }

    .cadre_zone {
        border: none;
        padding-left: 25px;
        padding-right: 25px;
    }

    .lien_zone {
        text-decoration: none;
        color: white;
        border-width: 1.5px;
        border-color: blue;
        border-radius: 100px;
        padding: 5px;
        font-size: 15px;
    }

    .h {
        color: white;
    }

    .lien_zone_ {
        border-width: 0px;
        border-radius: 100px;
        color: blue;
        padding: 5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
        cursor: pointer;
    }

    .lien_zone:hover, .cadre_zone:hover {
        opacity: 1;
        color: white;
        transition: 0.2s;
        border-radius: 10px;
    }

    .lien_zone_:hover {
        background-color: green;
        color: white;
    }

    .section-hist {
        width: 100%;
    }

    .image-hist {
        width: 100%;
        height: 100px;
    }

    .form-hist h2 {
        font-family: Georgia;
        color: black;
        margin-left: 20px;
        text-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
        text-align: left;
        margin-top: -100px;
        margin-left: 20%;
    }

    .cadre-hist {
        border: none;
        margin-left: 20%;
    }

    .p-hist {
        font-family: Lucida Fax;
        text-align: left;
        width: 75%;
        font-weight: bold;
        vertical-align: baseline;
        line-height: 30px;
    }

    .org {
        font-family: Georgia;
        color: black;
        margin-left: 20px;
        text-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
        text-align: left;
        margin-left: 20%;
    }

    .org-section {
        margin-bottom: -25%;
    }

    .org-div {
        width: 100%;
        /* margin-bottom: 50%; */
        margin-bottom: 30%;
    }

    .org-div a {
        text-decoration: none;
        color: black;
    }

    .org-div .org-image {
        margin-left: 14%;
    }

    .org-lien-1 {
        margin-left: 40%;
        margin-top: -42.5%;
    }

    .org-lien-2 {
        margin-left: 61.5%;
        margin-top: 3.5%;
    }
    
    .org-lien-3 {
        margin-left: 40%;
        margin-top: 5%;
    }
    
    .org-lien-4 {
        margin-left: 18.5%;
        margin-top: 3.2%;
    }
    
    .org-lien-5 {
        margin-left: 35.2%;
        margin-top: -2.7%;
    }
    
    .org-lien-6 {
        margin-left: 64%;
        margin-top: -3.2%;
    }
    
    .org-lien-7 {
        margin-left: 16.2%;
        margin-top: 5.2%;
    }
    
    .org-lien-8 {
        margin-left: 32.3%;
        margin-top: -2.3%;
    }
    
    .org-lien-9 {
        width: 8%;
        line-height: 22px;
        margin-left: 57.3%;
        margin-top: -3%;
    }
    
    .org-lien-10 {
        margin-left: 48.6%;
        margin-top: 5.2%;
    }
    
    .org-lien-11 {
        margin-left: 41%;
        margin-top: 6.6%;
    }
    
    .org-lien-12 {
        width: 12%;
        line-height: 22px;
        text-align: center;
        margin-left: 57.5%;
        margin-top: -3.8%;
    }
    
    .org-lien-13 {
        width: 12%;
        line-height: 22px;
        text-align: center;
        margin-left: 65.2%;
        margin-top: -21%;
    }
    
    .org-lien-14 {
        width: 12%;
        line-height: 22px;
        text-align: center;
        margin-left: 75.7%;
        margin-top: -4.5%;
    }

    .contact-form {
        text-align: center;
        font-family: Lucida Fax;
    }

    .students-links,
    .div-info-card {
        display: inline-flex;
    }

    .students-links{
        display: block;
        width: 40%;
        height: 40%;
        left: 20px;
    }

    .students-links div {
        text-align: left;
        width: 100%;
    }

    .div-info-card{
        display: block;
        width: 60%;
        height: 110%;
        margin-right: 10%;
        float: left;
    }

    .div-info-card {
        margin-top: 5px;
        height: 40.5%;
        margin-left: -63%;
        float: left;
        width: 103%;
        display: block;
    }

    .div-info-card div {
        height: 58.5%;
    }

    .div-info-card h3 {
        text-align: center;
    }

    /* Ajout de Fréjus ************************************/
    .conteneur{
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0, 32, 63, .45), 0 8px 8px rgba(0, 32, 63, .45);
        position: relative;
        overflow: hidden;
        min-height: 480px;
        width: 768px;
        max-width: 100%;
        text-wrap: wrap;
        margin-left: 20%;
    }

    .inscription{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        float: right;
    }

    .form{
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0 50px;
        height: 100%;
        text-align: center;
    }

    .name,.mail,.pass{
        background-color: aquamarine;
        border: none;
        padding: 12px 15px;
        margin: 8px 0px;
        width: 100%;
        cursor: pointer;
    }

    .create{
        background-color: aquamarine;
        color: #00203f;
        border: 1px solid aquamarine;
        font-size: 16px;
        font-weight: bold;
        padding: 16px 32px;
        margin-top: 24px;
        letter-spacing: 1px;
        border-radius: 50px;
        border-color: rgba(0, 32, 63, .45);
        transition: 0.2s ease-in;
        margin-bottom: 5px;
    }

    .create:hover{
        cursor: pointer;
        background-color: #00203f;
        color: white;
    }

    .txt{
        font-size: 14px;
        font-weight: bold;
    }

    .Salutation{
        font-family: sans-serif;
        background: linear-gradient(to right, #adf0d1,#e7f0fd);
        background: #adf0d1;
        display: flex;
        flex-direction: column;
        position: absolute;
        right: 50%;
        width: 50%;
        height: 100%;
        overflow: hidden;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .diff{
        padding-bottom: 10px;
        font-size: 40px;
    }

    .Salutation h4{
        width: 200px;
        padding-bottom: 10px;
    }
    /* ****************************************************/

    /* New portfolio */
    .img-gallery{
        width: 90%;
        margin: 100px auto 50px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-gap: 30px;
    }

    .img-gallery img{
        width: 100%;
        cursor: pointer;
        transition: 0.4s;
    }

    .img-gallery img:hover{
        transform: scale(0.8) rotate(-15deg);
        border-radius: 20px;
        box-shadow: 0 32px 75px rgba(68, 77, 136, 0.2);
    }

    .full-img {
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.9);
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 100;
    }

    .full-img img {
        width: 45%;
        max-width: 600px;
    }

    .full-img span {
        position: absolute;
        top: 10%;
        right: 5%;
        font-size: 30px;
        color: #fff;
        cursor: pointer;
    }

    ._1{
        height: 60%;
    }

    ._8 {
        height: 80%;
    }


/* Mon propre CSS */
}

/*
*********************************************** Mobile ************************************************
*/

@media (max-width:1000px) {
    a {
        cursor: pointer;
    }
    
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f4f4f4;
        max-width: 100%;
    }

    .top-bar {
        background-color: #ccc;
        padding: 10px;
        text-align: center;
        border-radius: 5px;
    }

    .contact-info span {
        margin: 0 10px;
    }

    .header-main {
        text-align: center;
        background-color: #fff;
        padding: 20px 0;
    }

    header img {
        width: 100px;
    }

    header h1 {
        margin: 0;
        color: black;
        font-family: Georgia;
    }

    nav ul {
        display: flex;
        justify-content: center;
        background-color: #333;
        padding: 0;
        list-style: none;
        width: 100%;
        max-width: 100%;
        border-radius: 20px;
        font-family: Georgia;
    }

    nav ul li {
        position: relative;
        margin: 0;
    }

    nav ul li a {
        display: block;
        padding: 10px 7px;
        color: #fff;
        text-decoration: none;
        font-size: 10px;
    }

    nav ul li a:hover {
        background-color: #555;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .info-flash {
        background-color: #ffeb3b;
        text-align: center;
        padding: 10px;
        font-weight: bold;
        border-radius: 10px;
        color: black;
    }

    .slider {
        width: 100%;
        overflow: hidden;
        position: relative;
        margin-top: 20px;
        max-width: 100%; /* Ajuste la taille maximale du slider */
        margin: 20px auto; /* Centre le slider horizontalement */
    }

    .slides {
        display: flex;
        width: 100%;
        animation: slide 15s infinite;
    }

    .slides img {
        width: 80%;
        max-width: 100%; /* S'assure que les images ne dépassent pas la taille du conteneur */
        height: auto;
        margin: auto;
        border-radius: 20px; /* Centre les images */
    }

    @keyframes slide {
        0% { margin-left: 0%; }
        33% { margin-left: -80%; }
        66% { margin-left: -160%; }
        100% { margin-left: 0%; }
    }

    .featured-content {
        background-color: #2e7d32;
        color: #fff;
        text-align: center;
        padding: 20px 0;
        position: relative;
        width: 100%;
        border-radius: 10px;
    }

    .featured-content h2 {
        margin: 0;
    }

    .featured-content img {
        width: 100%;
        height: auto;
        border-radius: 20px;
    }

    .code-etablissement,
    .contact {
        position: absolute;
        top: 20px;
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
    }
/* CSS hors services */
    /*.code-etablissement {
        left: 10px;
    }*/

    /*.contact {
        right: 10px;
        transform: rotate(-90deg);
        transform-origin: right;
    }*/

    .links {
        width: 100%;
        display: block;
        justify-content: center;
        padding: 0px;
        background-color: #fff;
        max-width: 100%;
        border-radius: 10px;
    }

    .link-card {
        background-color: #f4f4f4;
        border: 1px solid #ddd;
        margin-bottom: 10px;
        margin-left: ;
        padding: 20px;
        text-align: center;
        border-radius: 10px;
    }

    .link-card h3 {
        margin-top: 0;
    }

    .link-card button {
        background-color: #333;
        color: #fff;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
    }

    .link-card button:hover {
        background-color: #555;
    }

    .btn_links,
    .btn_admin {
        border-radius: 100px;
    }

    .administration {
        background-color: #fff;
        padding: 20px;
        text-align: center;
    }

    .administration .agenda p {
        margin: 10px 0;
    }

    .administration button {
        background-color: #2e7d32;
        color: #fff;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
    }

    .administration button:hover {
        background-color: #4caf50;
    }

    /* Styles pour la section des élèves */
    .students {
        background-color: #fff;
        padding: 20px;
        text-align: center;
    }

    .students h2 {
        color: #4a148c;
        margin-bottom: 20px;
    }

    .students-content {
        display: block;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .students-links {
        width: 60%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 600px; /* Réduction de la largeur */
    }

    .students-link-card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #78909c;
        color: #fff;
        padding: 10px 20px;
        margin: 5px 0;
        width: 100%;
        cursor: pointer;
        border-radius: 10px;
    }

    .students-link-card p {
        margin: 0;
    }

    .students-link-card span {
        font-size: 1.5em;
        font-weight: bold;
    }

    .students-link-card .new {
        background-color: #ffeb3b;
        color: #000;
        padding: 2px 5px;
        margin-left: 10px;
        font-size: 0.8em;
    }

    .students-info {
        width: 35%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 350px; /* Réduction de la largeur */
    }

    .info-card {
        background-color: #fff;
        color: #4a148c;
        padding: 10px;
        margin: 10px 0;
        border: 1px solid #4a148c;
        width: 150%;
        text-align: left;
        cursor: pointer;
        border-radius: 10px;
    }

    .info-card h3 {
        margin: 0;
        color: blue;
    }

    .major-students {
        background-color: #e1bee7;
        padding: 10px;
        width: 200%;
        text-align: left;
        margin-top: 20px;
        border-radius: 10px;
    }

    .major-students h3 {
        color: #4a148c;
        margin: 0 0 10px 0;
    }

    .major-student {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .major-student img {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
        border-radius: 20px;
    }

    .major-student p {
        margin: 5px 0;
    }

    /* Styles pour la section des événements */
    .events {
        background-color: #f9f9f9;
        padding: 40px 0;
        text-align: center;
    }

    .events h2 {
        color: #616161;
        margin-bottom: 20px;
    }

    .events-content {
        display: block;
        justify-content: center;
        gap: 20px;
    }

    .event {
        background-color: #fff;
        border: 1px solid #ddd;
        padding: 10px;
        width: 45%;
        text-align: center;
        border-radius: 10px;
        margin-bottom: 5px;
    }

    .event img {
        width: 100%;
        height: auto;
        border-radius: 20px;
    }

    .event button {
        background-color: #333;
        color: #fff;
        border: none;
        padding: 10px 20px;
        margin-top: 10px;
        cursor: pointer;
    }

    .event button:hover {
        background-color: #555;
    }

    /* Touche personnelle */
    .btn_event{
        border-radius: 100px;
    }

    /* Styles pour la section année scolaire */
    .school-year {
        background-color: #fff;
        padding: 40px 0;
        text-align: center;
        width: 100%;
    }

    .school-year h2 {
        color: #616161;
        margin-bottom: 20px;
        width: 100%;
    }

    .stats {
        display: flex;
        justify-content: center;
        gap: 40px;
        width: 95%;
    }

    .stat {
        text-align: center;
        width: 15%;
    }

    .stat img {
        width: 50px;
        height: auto;
        margin-bottom: 10px;
    }

    .stat .number {
        font-size: 2em;
        color: #78909c;
        margin: 0;
    }

    .stat .label {
        font-size: 1em;
        color: #333;
    }

    /* Styles pour le pied de page */
    footer {
        background-color: #000;
        color: #fff;
        text-align: center;
        padding: 20px 0;
    }

    .footer-top {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        padding-bottom: 10px;
        border-bottom: 1px solid #555;
    }

    .footer-top span,
    .footer-top a {
        color: #fff;
        text-decoration: none;
        font-size: 0.9em;
    }

    .footer-middle {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding: 20px 0;
    }

    .footer-middle a img {
        width: 30px;
        height: auto;
    }

    .footer-bottom {
        padding-top: 10px;
        font-size: 0.8em;
    }

    .footer-bottom span {
        display: block;
        margin: 5px 0;
    }

    #menu {
        background-color: #c3c3c3;
        color: blue;
        border-radius: 100px;
    }

    /* Mon propre CSS */
    #active_menu {
        background-color: #5D5D69;
        color: blue;
    }

    .section_zone {
        text-align: center;
        float: right;
        margin-top: -21%;
        margin-right: 1%;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
        border: none;
        border-radius: 20px;
    }

    .cadre_zone {
        border: none;
    }

    .lien_zone {
        text-decoration: none;
        color: blue;
        border-width: 1.5px;
        border-color: blue;
        border-radius: 100px;
        padding: 5px;
        font-size: 15px;
    }

    .lien_zone_ {
        border-width: 0px;
        border-radius: 100px;
        color: blue;
        padding: 5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
        cursor: pointer;
    }

    .lien_zone:hover {
        background-color: green;
        color: white;
    }

    .lien_zone_:hover {
        background-color: green;
        color: white;
    }
/* Mon propre CSS */

}