html {
  background-image: url("img/fond.png");
  scroll-behavior: smooth;
  background-size: 100% auto; /* largeur 100%, hauteur auto */
  background-attachment: fixed; /* Ne bouge pas au scroll */
  background-position: top center; /* Centrage horizontal */
}
    
body {
  font-family: Arial, sans-serif;
  width: 80%;
  margin: auto;
  min-height: 100vh;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: calc(0.2vw);
  background-color: rgba(255, 250, 250, 0.7);
}


h1 {
    font-family: "Monotype Corsiva", cursive;
    font-size: calc(4vw);
    color: darkslategray;
    text-shadow: -2px 2px 4px #EEEEEE;
    text-align: center;
}

.subtitle { 
    font-size: calc(2vw);
}

h2 {
    font-family: 'Gill Sans', sans-serif;
    font-size: calc(2.75vw);
    color: darkslategrey;
    text-shadow: -2px 2px 4px #EEEEEE;
}

  	
    .card {
        position: relative;
        width: 90%;
        aspect-ratio: 240 / 340; /* Ratio de largeur/hauteur */
        border: 0.3em solid #000;
        border-radius: calc(1vw);
        overflow: hidden;
        box-shadow: 0 8px 16px rgba(0,0,0,0.5);
        margin: 10px; /* Espacement entre les cartes */
    }

    .card-wrapper {
      display: flex;
      flex-direction: column;
      align-items: flex;
      width: 100%;
    }

    .card-caption {
      display: flex;
      margin-top: 0.5em;
      text-align: center;
      font-size: calc(1vw);
      width: 100%;
      justify-content: space-evenly;
      flex-direction: row;
    }

    
    .card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Ajoute une ombre noire au survol */
    transition: background-color 0.3s ease, transform 0.2s ease;
    }

    .cards-container {
        display: flex;
        justify-content: center; /* Centre les cartes horizontalement */
        align-items: flex-start;
        margin: 0; 
        margin-bottom: 2em;
        gap: 1rem; 
    }

    .card-front, .card-back {
        margin: 0;
    }

    .card-back {
        background: linear-gradient(145deg, #f0f0f0, #d4d4d4);
        background-size: cover;
        background-position: center;
    }

    .card-image {
        width: 92.5%;
        height: 48%;
        background-position: center;
        background-size: cover;
        border: solid calc(0.25vw) lightgray;
        margin: auto;
    }

    .card-title {
        text-align: center;
        font-size: calc(1.3vw);
        font-weight: bold;
        padding: 6px;
        color: #333;
        background-color: #f0f0f0;
    }

    .card-theme {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: calc(1vw);
        font-weight: bold;
        padding: 4px;
        background-color: #d4d4d4;
        color: #333;
        position: relative;
    }

    .card-logo {
        position: absolute; 
        right: calc(0.75vw);
        top: 50%; 
        transform: translateY(-50%);
    }

    .card-theme::before {
        content: ''; 
        display: inline-block; 
        width: 0; 
        height: 100%;
        vertical-align: middle; 
        margin-right: -0.25em;
    }

    .card-content {
        padding: calc(0.5vw);
        height: 50%;
        border-top: 1px solid #ddd;
        overflow-y: auto;
        font-size: calc(1.1vw);
        background-color: #f0f0f0;
    }
  
    .card-level {
        position: absolute;
        bottom: -1px;
        right: -1px;
        background-color: rgba(255, 255, 255, 0.4);
        border: solid 2px black;
        border-radius: 20%;
        width: calc(2.5vw);
        height: calc(1.4vw);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        font-weight: bold;
        font-size: calc(1vw);
    }

    .card-name {
        position: absolute;
        bottom: -1%;
        left: 0;
        width: 100%;
        color: #333;
        font-size: calc(0.8vw);
        height: calc(1.4vw);
    }
    
    .card-level2 {
        position: absolute;
        bottom: -1px;
        right: -1px;
        background-color: rgba(255, 255, 255, 0.4);
        border: solid 1px black;
        border-radius: 25%;
        width: calc(3.5vw);
        height: calc(1.4vw);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        font-weight: bold;
        font-size: calc(1vw);
    }
    
    .card-level3 {
        position: absolute;
        bottom: -1px;
        right: -1px;
        background-color: rgba(255, 255, 255, 0.4);
        border: solid 1px black;
        border-radius: 25%;
        width: calc(1.5vw);
        height: calc(1.4vw);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        font-weight: bold;
        font-size: calc(1vw);
    }
  
    .card-logo {
        margin-left: auto; /* Pousse l'icône à droite */
        display: flex; /* Permet un bon alignement de l'icône */
    }

    .card-yellow {
        border-color: #e6c300; 
        box-shadow: 0 8px 16px rgba(226, 202, 0, 0.2);
        background-color: #f7f1b3;
    }
    .card-yellow .card-title {
        background-color: #f7f1b3;
    }
    .card-yellow .card-theme {
        background-color: #f7e666;
    }
    .card-yellow .card-content {
        background-color: #feffe3;
    }  
    .card-yellow .card-level {
        border-color: #e6c300;
        background-color: #feffe3;
    }
    .card-yellow .card-name {
        background-color: #f7f1b3;
    }
	
    .card-blue {
        border-color: #0073e6; 
        box-shadow: 0 8px 16px rgba(0, 115, 230, 0.2);
        background-color: #b3d1f7;
    }
    .card-blue .card-title {
        background-color: #b3d1f7;
    }
    .card-blue .card-theme {
        background-color: #66b2f7;
    }
    .card-blue .card-content {
        background-color: #e3f7ff;
    }
    .card-blue .card-level {
        border-color: #0073e6;
        background-color: #e3f7ff;
    }
    .card-blue .card-name {
        background-color: #b3d1f7;
    }
	
    .card-red {
        border-color: #e60000; 
        box-shadow: 0 8px 16px rgba(230, 0, 0, 0.2);
        background-color: #f7b3b3;
    }
    .card-red .card-title {
        background-color: #f7b3b3;
    }
    .card-red .card-theme {
        background-color: #f76666;
    }
    .card-red .card-content {
        background-color: #ffe6e6;
    }
    .card-red .card-level {
        border-color: #e60000;
        background-color: #ffe6e6;
    }
    .card-red .card-name {
        background-color: #f7b3b3;
    }
	
    .card-green {
        border-color: #68c268; 
        box-shadow: 0 8px 16px rgba(119, 221, 119, 0.2);
        background-color: #c9f0c9;
    }
    .card-green .card-title {
        background-color: #c9f0c9;
    }
    .card-green .card-theme {
        background-color: #a6e7a6;
    }
    .card-green .card-content {
        background-color: #e6ffe6;
    }
    .card-green .card-level {
        border-color: #68c268;
        background-color: #e6ffe6;
    }
    .card-green .card-name {
        background-color: #c9f0c9;
    }
	
    .card-purple {
        border-color: #996dc7; 
        box-shadow: 0 8px 16px rgba(177, 156, 217, 0.2);
        background-color: #d6c3f0;
    }
    .card-purple .card-title {
        background-color: #d6c3f0;
    }
    .card-purple .card-theme {
        background-color: #c9a9f5;
    }
    .card-purple .card-content {
        background-color: #f3e6ff;
    }
    .card-purple .card-level {
        border-color: #996dc7;
        background-color: #f3e6ff;
    }
    .card-purple .card-name {
        background-color: #d6c3f0;
    }

    .card-orange {
        border-color: #e69500; 
        box-shadow: 0 8px 16px rgba(255, 179, 71, 0.2);
        background-color: #ffd4a3;
    }
    .card-orange .card-title {
        background-color: #ffd4a3;
    }
    .card-orange .card-theme {
        background-color: #ffc080;
    }
    .card-orange .card-content {
        background-color: #fff0e3;
    }
    .card-orange .card-level {
        border-color: #e69500;
        background-color: #fff0e3;
    }
    .card-orange .card-name {
        background-color: #ffd4a3;
    }
	
    ul, li {
        margin: 0;
        margin-left: -15px;
        hyphens: auto;
    }
  
  a {
    color: inherit; /* Utilise la couleur du texte environnant */
    text-decoration: none; /* Supprime la décoration du texte (soulignement) */
    font: inherit; /* Utilise la même police que l'élément parent */
    background: none; /* Supprime tout fond appliqué au lien */
    border: none; /* Supprime toute bordure appliquée au lien */
    padding: 0; /* Supprime tout remplissage appliqué au lien */
    margin: 0; /* Supprime toute marge appliquée au lien */
    }
    
    a.bouton {
        display: block;
        padding: 10px 20px;
        background-color: antiquewhite;
        color: #333;
        border: solid 1px;
        font-size: 1em;
        text-decoration: none;
        font-weight: bold;
        border-radius: 10px;
        transition: background-color 0.3s ease, transform 0.2s ease;
        text-align: center;
        white-space: nowrap; /* Empêche les retours à la ligne dans le bouton */
    }


    a.bouton:hover {
        background-color: blanchedalmond; /* Couleur au survol */
    }
    
    a.bouton2 {
        padding: 1% 1%;
        background-color: aliceblue;
        width: auto;
        color: #333;
        border: solid 1px;
        font-size: 1em;
        text-decoration: none;
        font-weight: bold;
        border-radius: 10px;
        transition: background-color 0.3s ease, transform 0.2s ease;
        text-align: center;
        white-space: nowrap; /* Empêche les retours à la ligne dans le bouton */
    }
    
    a:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Ajoute une ombre noire au survol */
    }
    

    @media (max-width: 768px) {
    body {
        width: 100%;
    }
    
    .card{
    width: 80%;
        }
        
    .cards-container {
    flex-flow: wrap;
    margin-left: 10%;
    }
        
    h1 { 
        font-size: calc(7vw);
    }
    
    html{
        background-size: auto 100%;   
    }

    h2 {
        font-size: calc(5vw);
    }

    i {
     display: none;
    }
    
    .card {
    border-radius: calc(3vw);
    }


    .subtitle { 
        font-size: calc(3vw)!important;
    }
    
    .card-title { 
        font-size: calc(6vw);
      }
      
    .card-theme { 
        font-size: calc(4vw);
      }
      
    .card-content { 
        font-size: calc(4vw);
        height: 50%;
    }
    
    .card-name { 
        font-size: calc(2.5vw);
        bottom: 0%;
        height: calc(3.5vw);
    }
    
    .card-level { 
        font-size: calc(3.375vw);
        width: calc(7vw);
        height: calc(3.75vw);
    }
        
    .card-caption {
    font-size: calc(2.5vw);
    }
    }