@font-face {
    font-family: 'GeForceCustom';
    src: url('../fonts/GeForce-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
}

body {
    margin: 0;
    /* je suis allé sur un convertisseur svg to css pour intégrer mon cusreur c'est le seul moyens que j'ai trouvé */
    cursor: url('data:image/svg+xml;utf8,<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 18.96 17.28"><defs><style> .cls-1 { fill: %2372b62b; } .cls-2 { fill: %232b3139; } </style></defs><g><path class="cls-2" d="M.06.09c5.43,2.01,10.86,4.03,16.29,6.04.45.17.89.33,1.34.5-.79-.15-2.76-.4-4.61.7-.44.26-.79.55-1.09.84,2.3,2.31,4.6,4.62,6.89,6.94"/><path class="cls-1" d="M.1,0l17.63,6.53-.05.19c-1.02-.06-2.02,0-2.95.28-1,.25-1.69.86-2.66,1.24,0,0,0-.14,0-.14l6.89,6.94-.14.14-6.89-6.94c-.07-.09-.12-.06,0-.14,1.05-1.94,3.89-2.15,5.79-1.57,0,0-.05.19-.05.19L.03.18l.07-.18H.1Z"/></g><g><path class="cls-2" d="M.09.07l8.51,16.77c-.2-1.02-.38-2.74.3-4.61.17-.46.37-.87.58-1.23,2.56,2.02,5.12,4.04,7.68,6.06"/><path class="cls-1" d="M.17.02l8.51,16.77-.18.06c-.61-1.87-.69-4.46.89-5.9,0,0,.02-.12.03-.12,0,0,.12.09.12.09l7.68,6.06s-.12.15-.12.15l-7.68-6.06.14-.03c.02.58-.16,1.01-.34,1.45-.54,1.53-.61,3.15-.5,4.78,0,0-.2-.4-.2-.4L0,.11.17.02H.17Z"/></g></svg>'), auto;
}

a,
button,
[role="button"],
.objet1 img,
input[type="submit"] {
    cursor: url('data:image/svg+xml;charset=utf8,%3Csvg id="Calque_1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 11.85 16.14"%3E%3Cdefs%3E%3Cstyle%3E.cls-1{fill:%23fff;}.cls-2{fill:%2384bc26;}.cls-3{fill:%232b3139;}.cls-4{fill:%2372b62b;}%3C/style%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cpath class="cls-3" d="M.05.06c3.62,3.25,7.23,6.5,10.85,9.75.3.27.59.53.89.8-.57-.36-2.03-1.17-3.81-.88-.42.07-.79.19-1.11.32"/%3E%3Cpath class="cls-4" d="M.11,0l11.74,10.55-.1.13c-.78-.36-1.58-.62-2.39-.69-.86-.11-1.58.15-2.46.15l.04-.11c-.05.02-.1.04-.15.07-.03-.09-.08-.08.04-.11,1.42-1.19,3.7-.48,5,.56l-.1.13L0,.12l.11-.12Z"/%3E%3C/g%3E%3Cg%3E%3Cpath class="cls-3" d="M.08.05l1.46,15.72c.16-.86.55-2.26,1.66-3.51.27-.31.56-.56.83-.78l2.83-1.43"/%3E%3Cpath class="cls-4" d="M.16.04l1.46,15.72h-.16c.1-1.66.84-3.7,2.52-4.34,0,0,.05-.09.06-.08l.07.11-.14.08.12.02c-.16.46-.44.74-.71,1.03-.89,1.03-1.45,2.27-1.87,3.58l-.03-.37L0,.05l.16-.02Z"/%3E%3C/g%3E%3C/g%3E%3Cpath class="cls-1" d="M8.13,8.68c-.88.17-1.6.41-2.14.61-.55.21-1.4.54-2.36,1.22-.62.43-1.08.87-1.4,1.2-.3-3.04-.6-6.08-.9-9.11,2.27,2.03,4.54,4.05,6.8,6.08Z"/%3E%3Cpath class="cls-3" d="M7.26,10.11c-.46.09-1.11.26-1.82.64-.66.35-1.15.76-1.48,1.07.02-.07.06-.22.02-.4-.1-.37-.47-.5-.5-.51,1.11-.56,2.22-1.12,3.33-1.69,0,.09,0,.36.16.61.1.15.22.23.3.28Z"/%3E%3Cellipse class="cls-3" cx="2.41" cy="6.63" rx=".49" ry=".42"/%3E%3Cpath class="cls-3" d="M3.5,6.55c-.09-.34.09-.68.38-.78.23-.08.49,0,.67.2"/%3E%3Cpath class="cls-2" d="M5.22,6.61c.27.89-.2,1.82-1,2.11-.68.24-1.48-.02-1.93-.67"/%3E%3Cpath class="cls-3" d="M6.93,9.46c-.46.09-1.11.26-1.82.64-.66.35-1.15.76-1.48,1.07.02-.07.06-.22.02-.4-.1-.37-.47-.5-.5-.51.34-.32.86-.74,1.56-1.09.68-.34,1.31-.51,1.77-.59,0,.09,0,.36.16.61.1.15.22.23.3.28Z"/%3E%3C/svg%3E') 0 0, pointer !important;
}

main {
    background-color: #000000;
    width: auto;

    min-height: 100vh;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.container {
    width: 1080px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    background-color: black;
}


.section-contenu {
    position: relative;
    width: 95%;
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
    padding: 50px 0;
    overflow: hidden;
}

header a,
footer a {
    display: inline-block;
    font-size: 110%;
    font-weight: bold;
    color: #72b600;
    text-decoration: none;
    font-family: 'GeForceCustom';
    padding: 5px 10px;
    transition: 0.3s;
    line-height: 1;
}

header a.active,
footer a.active {
    background-color: #72b600;
    color: #141819 !important;
    border-radius: 5px;
    text-shadow: none;
}

header li:hover a:not(.active),
footer li:hover a:not(.active) {
    text-decoration: underline;
    text-underline-offset: 10px;
}

.conteneur-3d {
    width: 100%;
    max-width: 1100px;
    height: 50vw;
    max-height: 600px;
    min-height: 300px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

model-viewer {
    --poster-color: transparent;
    height: 100%;
    width: 100%;
    z-index: 2;
}



.fond-decor {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 150px;
    z-index: 1;
}

.textconteneur {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 500px;
}

.textconteneur h1 {
    color: #72b600;
    position: absolute;
    width: auto;
    left: 10%;
    white-space: nowrap;
    font-family: 'GeForceCustom';
    text-shadow: rgba(115, 182, 0, 1) 0px 0px 16px;
}

.conteneur-interactif {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-statique {
    display: block;
    position: absolute;
    width: 80%;
    max-width: 800px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
}

.bouton-performance {
    position: absolute;
    top: -50px;
    right: 0;
    z-index: 100;
    background: transparent;
    color: #72b600;
    border: 1px solid #72b600;
    padding: 8px 15px;
    cursor: pointer;
    font-family: 'GeForceCustom';
    transition: 0.3s;
}

.bouton-performance:hover {
    background: #72b600;
    color: #000;
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #141819;
    border: #609102 2px solid;
    padding: 0px 40px;
    height: auto;
    min-height: 40px;
}

.footer-left {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

footer p {
    color: white;
    font-family: 'GeForceCustom', sans-serif;
    margin: 0;
}

.btn-credits {
    font-size: 160% !important;
    padding: 10px 20px !important;
    list-style-type: none;
}

header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0 30px;
}

.nav-centree {
    display: flex;
    justify-content: center;
}


header li:hover {
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 3px;
    text-decoration-color: #72b600;
    transition: 0.5s;
}



.logo-espace {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-site {
    height: 50px;
    width: auto;
    transition: 0.4s ease;
    filter: drop-shadow(0 0 5px rgba(114, 182, 0, 0.2));
}

.logo-site:hover {
    filter: drop-shadow(0 0 15px #72b600);
    transform: scale(1.05);
}

.boutonsheader {
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    align-items: center;
}

#loader {
    position: fixed;
    inset: 0;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 99999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#loader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader-spinner {
    width: 75px;
    height: 75px;
    border: 5px solid rgba(114, 182, 0, 0.1);
    border-top-color: #72b600;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(114, 182, 0, 0.2);
    animation: loader-spin 0.6s linear infinite;
}

.loader-text {
    color: #72b600;
    font-family: 'GeForceCustom', sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(114, 182, 0, 0.5);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}



#loader.complete .loader-spinner {
    animation: complete-spin 0.6s forwards;
    border-top-color: #ffffff;
    box-shadow: 0 0 30px #72b600;
}

#loader.complete .loader-text {
    animation: complete-pulse 0.6s forwards;
    color: #ffffff;
    text-shadow: 0 0 15px #72b600;
}

@keyframes complete-spin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.3);
        border-top-color: #72b600;
    }

    100% {
        transform: rotate(360deg) scale(1.1);
        border-top-color: #ffffff;
    }
}

@keyframes complete-pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* pour la scroll bar c'est un tuto ytb pour mon moi du futur en gros
c'est la barre pour la molette de la souris et thumb c'est la partie qui bouge */
::-webkit-scrollbar {
    background-color: #72b600;
    width: 9px;
}

::-webkit-scrollbar-thumb {
    background-color: #0e1823;


    border: 1px solid transparent;
    background-clip: padding-box;
}

/* je commence le style du tableau */

#montableau {
    border-collapse: collapse;
    width: 100%;
    background-color: transparent;
    color: white;
}

#montableau thead th {
    background-color: #72b600;
    color: #142131;
    padding: 15px;
    text-transform: uppercase;
    border-bottom: 3px solid #142131;
}

#montableau tbody td {
    padding: 12px;
    background-color: #142131;
    border-bottom: 1px solid #223a3e;
    color: white;
}

#montableau tbody tr:hover td {
    background-color: #1d3136;
    color: #1aba9f;
    transition: 0.3s;
}

.dataTables_wrapper {
    color: #1aba9f;
}

#montableau_wrapper .dataTables_filter input {
    border: 1px solid #1aba9f;
    background-color: #223a3e;
}

#montableau_wrapper .dataTables_paginate .paginate_button {
    background-color: #223a3e;
    border: 1px solid #1aba9f;
    color: #1aba9f !important;
    background: #223a3e;

}

#montableau_wrapper .dataTables_paginate .paginate_button:hover,
#montableau_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: aliceblue;
    color: #142131 !important;
    border: 1px solid aliceblue;
    transition: 0.8s;
    transform: none;
}

.conteneurglobal {
    height: auto;
    gap: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 85px;
}

.conteneurcase {
    background-color: #313236;
    width: 100%;
    max-width: 300px;
    height: 300px;
    border: 2px solid #72b600;
    align-items: center;
    text-align: center;
}

.conteneurcase h3 {
    color: aliceblue;
    font-weight: bold;
    font-family: "GeForceCustom";
    font-size: 155%;
    text-decoration: underline;
    text-underline-offset: 30px;
    text-decoration-thickness: 3px;
    text-decoration-color: #72b600;
    margin-bottom: 0;

}

.conteneurcase .description-case {
    color: aliceblue;
    font-weight: bold;
    font-family: "GeForceCustom";
    font-size: 85%;
    margin-top: 50px;
    display: block;
    width: 100%;
    text-align: left;
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.formulaire {
    margin: 50px auto;
    max-width: 800px;
}

.formulairecontaineur {
    background-color: #141819;
    border: 1px solid #333;
    border-top: 4px solid #72b600;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.en-tete {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 15px;
}

.champgroupe {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.champtexte {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
}

.champtexte,
input[type="email"],
textarea {
    background-color: #000;
    border: 1px solid #444;
    color: #fff;
    font-family: 'Arial', sans-serif;
    padding: 12px 15px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.champtexte:focus,
input[type="email"]:focus,
textarea:focus {
    outline: none;
    border-color: #72b600;
    box-shadow: 0 0 10px rgba(114, 182, 0, 0.2);
}

textarea {
    min-height: 150px;
    resize: vertical;
}

.formulairecontaineur label {
    background-color: transparent;
    color: #72b600;
    font-family: 'GeForceCustom', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0;
    margin-bottom: 5px;
}

.formulairecontaineur p strong {
    color: #fff;
    font-family: 'GeForceCustom';
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}


.choix-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    padding: 15px;
    background: #0d1112;
    border: 1px inset #222;
}

.choix-contact label {
    color: #fff !important;
    font-size: 0.8rem !important;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
}

.choix-contact label:hover {
    color: #72b600 !important;
}

.choix-contact input[type="radio"] {
    accent-color: #72b600;
    margin-right: 10px;
}

label {
    user-select: none;
}


input[type="submit"] {
    background-color: transparent;
    border: 2px solid #72b600;
    color: #72b600;
    font-family: 'GeForceCustom';
    text-transform: uppercase;
    padding: 15px 40px;
    width: auto;
    align-self: flex-end;
    cursor: pointer;
    transition: 0.4s;
    letter-spacing: 2px;
}

input[type="submit"]:hover {
    background-color: #72b600;
    color: #000;
    box-shadow: 0 0 20px rgba(114, 182, 0, 0.4);
}

/* hover de mon image de puce nvidia trouvé sur https://prismic.io/blog/css-hover-effects*/

.gallery {
    --g: 8px;
    display: grid;
    position: relative;
    width: 400px;
    margin: 50px auto;
}

.objet1 {
    grid-area: 1/1;
    display: grid;
    position: relative;
    pointer-events: none;
    z-index: 1;
}

.objet1 img {
    grid-area: 1/1;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: .4s;
    cursor: pointer;
    pointer-events: auto;
}


.objet1:first-child img {
    clip-path: polygon(0 0, calc(100% + var(--_p, -8px)) 0, 0 calc(100% + var(--_p, -8px)));
}

.objet1:last-child img {
    clip-path: polygon(100% 100%, 100% calc(0% - var(--_p, -8px)), calc(0% - var(--_p, -8px)) 100%);
}


.info-texte {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 250px;
    color: #72b600;
    font-family: 'GeForceCustom', sans-serif;
    opacity: 0;
    transition: 0.5s;
    pointer-events: none;
    text-shadow: rgba(115, 182, 0, 1) 0px 0px 16px;
}

.texte-gauche {
    right: 110%;
    text-align: right;

}

.texte-droite {
    left: 110%;
    text-align: left;
}

.objet1:hover .info-texte {
    opacity: 1;
}

.gallery:hover .objet1 img {
    --_p: calc(-50% - var(--g));
}

.gallery .objet1:hover img {
    --_p: calc(50% - var(--g)) !important;
}

.coin-nvidia {
    position: absolute;
    background-color: #72b600;
    z-index: 5;
    pointer-events: none;
}

.coin-haut {
    top: -10px;
    right: -10px;
    width: 200px;
    height: 40px;
    clip-path: polygon(80% 0, 100% 100%, 0 0, 50% 0);
    filter: drop-shadow(0px 0px 10px rgba(115, 182, 0, 0.8));
}

.coin-bas {
    bottom: -10px;
    left: -10px;
    width: 200px;
    height: 40px;

    clip-path: polygon(20% 100%, 0 0, 100% 100%, 50% 100%);
    filter: drop-shadow(0px 0px 10px rgba(115, 182, 0, 0.8));
}

@keyframes clignoter-vert {
    0% {
        border-color: #72b600;
        box-shadow: 0 0 5px #72b600;
    }

    50% {
        border-color: rgba(114, 182, 0, 0.2);
        box-shadow: 0 0 20px #72b600;
    }

    100% {
        border-color: #72b600;
        box-shadow: 0 0 5px #72b600;
    }
}

@keyframes clignoter-rouge {
    0% {
        border-color: #ff0000;
        box-shadow: 0 0 5px #ff0000;
    }

    50% {
        border-color: rgba(255, 0, 0, 0.2);
        box-shadow: 0 0 20px #ff0000;
    }

    100% {
        border-color: #ff0000;
        box-shadow: 0 0 5px #ff0000;
    }
}

.reponse-mail {
    font-weight: bold;
    text-align: center;
    margin: 20px auto;
    font-family: 'GeForceCustom', sans-serif;
    border: 1px solid;
    padding: 20px;
    max-width: 600px;
    background: rgba(10, 10, 10, 0.9);
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
}

/* Version Succès (Vert NVIDIA) */
.reponse-mail.succes {
    color: #72b600;
    border-color: #72b600;
    text-shadow: 0 0 15px rgba(114, 182, 0, 0.7);
    animation: clignoter-vert 2s infinite ease-in-out;
}

/* Version Erreur (Rouge Alerte) */
.reponse-mail.erreur {
    color: #ff0000;
    border-color: #ff0000;
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
    animation: clignoter-rouge 2s infinite ease-in-out;
}

.reponse-mail::before {
    content: "> SYSTEM STATUS:";
    display: block;
    font-size: 0.7rem;
    margin-bottom: 10px;
    opacity: 0.6;
}

.textcredits {
    color: aliceblue;
    font-family: 'GeForceCustom', sans-serif;
    font-size: 120%;
    line-height: 1.6;
    margin-bottom: 20px;
    padding-left: 20px;
    margin: 0 auto;

}

.textcredits li {
    margin-bottom: 10px;
}

.custom-list {
    list-style-type: disc;
    padding-left: 20px;
}

.conteneur-rectangle {
    max-width: 1080px;
    max-height: auto;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    margin-bottom: 100px;
    margin-top: 50px;
    color: #72b600;
    border: 2px solid #72b600;
    text-shadow: rgba(115, 182, 0, 1) 0px 0px 16px;
}

/* Style des cartes */
.conteneur-partenaires {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 50px;
}

.card {
    --b: 5px;
    --g: 15px;
    --c: #72b600;

    width: 350px;
    height: 450px;
    background: black;
    border: 2px solid #72b600;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    box-sizing: border-box;
    color: white;
    text-align: center;


    outline: 250px solid #0000;
    outline-offset: -250px;
    transition: .3s;
}

.card:hover {
    outline: var(--b) solid var(--c);
    outline-offset: var(--g);
}

.card h3 {
    color: #72b600;
    font-family: 'GeForceCustom', sans-serif;
    margin-bottom: 15px;
}

.card p {
    font-family: 'GeForceCustom', sans-serif;
    font-size: 1.1rem;
}

.conteneurphoto {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid #72b600;
    overflow: hidden;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.photopartenaires {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.btn-partenaire {
    display: inline-block;
    margin: auto 0 20px;
    padding: 12px 30px;
    color: #72b600;
    border: 2px solid #72b600;
    text-transform: uppercase;
    text-decoration: none;
    font: bold 1.1rem 'GeForceCustom', sans-serif;
    transition: 0.3s;
}

.btn-partenaire:hover {
    background-color: #72b600;
    color: #000;
    transition: 0.3s;
}

.card-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card h3 {
    color: #72b600;
    font-family: 'GeForceCustom', sans-serif;
    margin: 0 0 10px 0;
}

.PrenomNomdupartenaire {
    font-family: 'GeForceCustom', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    margin: 0;
}

.conteneur-rectangle2 {
    max-width: 1080px;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 50px auto 100px;
    position: relative;
}

.rectangle2,
.rectangle3 {
    flex: 1;
    max-width: 500px;
    min-height: 300px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #72b600;
    border: 2px solid #72b600;
    position: relative;
    overflow: hidden;
    transition: 0.4s;
}

.rectangle2 p,
.rectangle3 p {
    display: none;
}

.rectangle2:hover p,
.rectangle3:hover p {
    display: block;
    font-size: 1.1rem;
    ;
    font-family: 'GeForceCustom';
    text-align: center;

}

.rectangle2:hover h2,
.rectangle3:hover h2 {
    display: none;
}

.rectangle2 h2,
.rectangle3 h2 {
    font-size: 2rem;
    color: #ffffff;
    position: relative;
    display: inline-block;
    font-family: 'GeForceCustom';

}

.rectangle2::after,
.rectangle2::before,
.rectangle3::after,
.rectangle3::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    background: linear-gradient(to right, #72b600, #000000);
    bottom: -5px;
    left: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease-out;
}

.rectangle2::before,
.rectangle3::before {
    top: -5px;
    transform-origin: left;
}

.rectangle2:hover::after,
.rectangle2:hover::before,
.rectangle3:hover::after,
.rectangle3:hover::before {
    transform: scaleX(1);
}

/* C'est le css de mon graphique */
.sectiondugraphique {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    flex-direction: column;
}

.titre-graphique {
    color: #72b600;
    font-family: 'GeForceCustom';
    text-align: center;
    margin-bottom: 20px;
    text-shadow: rgba(115, 182, 0, 1) 0px 0px 16px;
    font-size: 2rem;
}

canvas {
    max-width: 1080px;
}

.erreur-formulaire {
    background-color: #ffcccc;
    border: 2px solid #cc0000;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
}

.erreur-formulaire .erreur {
    color: #cc0000;
    margin: 5px 0;
    font-weight: bold;
}

.sectiongalerie {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
    margin-top: 10px;
    color: white;
}

.mesphotos {
    width: 15%;
    height: auto;
    cursor: pointer;
    filter: grayscale(100%);
    transition: filter 0.4s ease;
    border-radius: 4%;
    transition: 0.6s;
    border: 2px solid #72b600;
    box-sizing: border-box;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.8);

}

.mesphotos:hover {
    filter: grayscale(0%);
    border-radius: 10%;
    transform: scale(1.1);
    filter: brightness(1.2);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
    border-color: #ffffff;
    box-shadow: 0px 0px 15px #72b600;
}

.titrepage {
    text-align: center;
    color: #72b600;
    font-family: 'GeForceCustom';
    text-shadow: rgba(115, 182, 0, 1) 0px 0px 16px;
    margin-bottom: 0px;
    font-size: 2.5rem;
}

.boutonchoisir {
    display: inline-block;
    margin: 10px 0;
    padding: 12px 30px;
    color: #72b600;
    border: 2px solid #72b600;
    text-transform: uppercase;
    text-decoration: none;
    font: bold 1.1rem 'GeForceCustom', sans-serif;
    background-color: black;
    cursor: pointer;
    transition: 0.3s;
}

.inputfichier {
    display: none;
}

.boutontelecharger {
    display: inline-block;
    margin: 10px 0;
    padding: 12px 12px;
    color: #72b600;
    border: 2px solid #72b600;
    text-transform: uppercase;
    font: bold 1.1rem 'GeForceCustom', sans-serif;
    background-color: black;
    cursor: pointer;
    transition: 0.3s;
    text-shadow: 0 0 10px #72b600;
    animation: clignoter-vert 1.5s infinite;
}

.boutonchoisir:hover {
    background-color: #72b600;
    color: #000;
}

.boutontelecharger:hover {
    background-color: #72b600;
    color: #000;
}

input[type="submit"].boutontelecharger {
    padding: 12px 20px;
}

/* je fais la page crédits ici ( c pour me reperer plus facilement ) */

.credits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
    margin-top: 50px;
    padding-bottom: 50px;
}

.credit-card {
    background: #141819;
    border: 1px solid #333;
    border-left: 5px solid #72b600;
    padding: 25px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.credit-card:hover {
    transform: translateY(-5px);
    border-color: #72b600;
    box-shadow: 0 10px 30px rgba(114, 182, 0, 0.1);
}

.credit-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.credit-header h3 {
    color: #72b600;
    font-family: 'GeForceCustom', sans-serif;
    margin: 0;
    letter-spacing: 1px;
    font-size: 1.4rem;
}

.credit-content p {
    color: #fff;
    font-family: 'GeForceCustom', sans-serif;
    margin: 5px 0;
}

.source-desc {
    color: #aaa !important;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 20px !important;
}

.btn-source {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid #72b600;
    color: #72b600;
    text-decoration: none;
    font-family: 'GeForceCustom', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    transition: 0.3s;
}

.btn-source:hover {
    background: #72b600;
    color: #000 !important;
}


.credit-card::before {
    content: "NVIDIA";
    position: absolute;
    bottom: -10px;
    right: -10px;
    font-size: 4rem;
    font-family: 'GeForceCustom';
    color: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}

.saetitre {
    margin-left: 20px; 
    font-size: 1.1rem;
    color: #72b600;
    font-family: 'GeForceCustom', sans-serif;
    border: 2px solid #72b600;
    padding: 5px 10px;
    white-space: nowrap;
}

.carousel {
    margin: 100px auto;
    width: 90%;
    display: flex;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    /* Effet de fondu sur les côtés */
}

.groupecarousel {
    display: flex;
    align-items: center;
    gap: 2em;
    animation: spin 25s infinite linear;
}

@keyframes spin {
    from {
        transform: translateX(0);
    }

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

.cardcarousel {
    flex: 0 0 250px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cardcarousel img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 10px;
    width: auto;
}

.grille-maquettes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

.objet-maquette {
    background: #111;
    border: 2px solid #333;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
    text-align: center;
}

.objet-maquette:hover {
    transform: translateY(-10px);
    border-color: #72b600;
}

.objet-maquette img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid #333;
}

.objet-maquette p {
    color: #fff;
    padding: 15px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
.rectangle-documents {
    background-color: #111;
    padding: 20px;
    border-left: 5px solid #72b600;
    margin-top: 20px;
    width: 100%;
}

.liste-documents {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}

.lien_du_documents {
    display: inline-block;
    padding: 10px 20px;
    background-color: #222;
    color: #72b600;
    text-decoration: none;
    border: 1px solid #72b600;
    border-radius: 4px;
    font-family: 'Oswald', sans-serif;
    transition: all 0.3s ease;
}

.lien_du_documents:hover {
    background-color: #72b600;
    color: #000;
    transform: scale(1.05);
}
.rectangle-documents h2 {
    color: #ffffff;
}