/* :LIEN TYPO */

 @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Share+Tech+Mono&display=swap');

 /* Color backgroud */


 html {
     width: 100%;
     background-color: #383838;

 }


 /* Police */

 h1,
 h2,
 div {
     font-family: "Quicksand", sans-serif;
     font-weight: 400;
     font-style: normal;
 }

 ul {
     margin-top: 2rem;
 }

 .titres,
 h1 {
     color: red
 }

 .fit-picture {
     width: 250px;

 }

 .liste {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
     gap: 7rem;
     width: 100%;
     overflow: hidden;
     position: relative;
 }

 .bloc-liste {
     position: relative;
     margin-top: 100px;
     max-width: 450px;
     max-height: 200px;
     width: 400px;
     height: 200px;

 }

 figure {
     display: flex;
     flex-flow: column;
     position: absolute;
     right: 12rem;
     bottom: 2rem;
 }

 img {
     width: 150px;
     height: 150px;
     object-fit: cover;
     border-radius: 250rem;
     margin-right: 100px;
 }

 figcaption {
     background-color: #FFEFC6;
     color: black;
     font: italic smaller sans-serif;
     width: 150px;
     padding: 3px;
     text-align: center;
 }

 .description {
     display: flex;
     flex-direction: column;
     background-color: #58B450;
     padding: 1rem;
     border-radius: 25px;
     width: 400px;
     height: 200px;
 }

 .description-title {
     display: flex;
     justify-content: end;
     height: 5rem;
     width: 100%;
 }

 .description-details {
     display: flex;
     justify-content: right;
 }

 .description-title>h2 {
     text-wrap: nowrap;
     display: flex;
     justify-content: end;
     width: 100%;
     min-width: 100%;
 }

 .titres {
     margin-top: 1rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 .titres h2 {
     margin-bottom: 1.5rem;
 }

 .titres a {
     color: #33B83B;
 }

 .OK {
     color: #86b499;
     ;
     background-color: #103B13;
 }

 .OK:hover {
     background-color: #288229;
 }

 .ok :active {
     box-shadow:
         inset -2px -2px 3px rgba(255, 255, 255, 0.876),
         inset 2px 2px 3px rgba(0, 0, 0, 0.875);
 }

 dialog {
     background-color: #36b96d;
     width: 200px;
     border-radius: 10px;
 }

 dialog form {
     display: flex;
     justify-content: right;
     height: 25px;
 }


 dialog p {
     display: flex;
     justify-content: center;
 }

 .OK {
     display: flex;
     align-items: center;
     border-radius: 8px;
     font-size: 15px;
     padding: 8px;
 }

 .description {
     left: 1rem;
 }

 .contenaire {
     padding-left: 1rem;
     padding-right: 1rem;
 }

 #btn-detail {
     width: 200px;
     margin-top: 30px;
     align-self: center;
     color: white;
     background-color: #33B83B;
     border-radius: 20px;
     text-shadow: -2px 1px 1px black;
     background-image: linear-gradient(to top left,
             rgb(0 0 0 / 0.2),
             rgb(0 0 0 / 0.2) 30%,
             transparent);
     box-shadow:
         inset 2px 2px 3px rgb(255 255 255 / 0.6),
         inset -2px -2px 3px rgb(0 0 0 / 0.6);
 }

 #btn-detail:hover {
     background-color: rgb(64, 255, 191);
 }

 #btn-detail:active {
     box-shadow:
         inset -2px -2px 3px rgb(255 255 255 / 0.6),
         inset 2px 2px 3px rgb(0 0 0 / 0.6);
 }

 /* Bouton de changement de version */
 .version-toggle-btn {
     position: fixed;
     top: 20px;
     right: 20px;
     background: linear-gradient(135deg, #2ecc71, #27ae60);
     color: white;
     padding: 12px 24px;
     border-radius: 50px;
     text-decoration: none;
     font-weight: 600;
     box-shadow: 0 5px 20px rgba(46, 204, 113, 0.4);
     z-index: 1000;
     transition: all 0.3s ease;
     font-family: "Quicksand", sans-serif;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .version-toggle-btn:hover {
     background: linear-gradient(135deg, #27ae60, #229954);
     transform: translateY(-2px);
     box-shadow: 0 8px 30px rgba(46, 204, 113, 0.6);
 }

 .version-toggle-btn span {
     display: flex;
     align-items: center;
     gap: 5px;
 }

 @media (max-width: 768px) {
     .version-toggle-btn {
         top: 10px;
         right: 10px;
         padding: 10px 18px;
         font-size: 0.85rem;
     }
 }