:root {
  --HtImageCard: 450px;
  --HtCard: 600px;
  --LgCard: 375px;
  --HtTexte: calc(var(--HtCard) - var(--HtImageCard));
}

* {
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  background-color: #333;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #000000;
  padding: 30px;
  box-shadow: 0 10px 10px #ffffff80;
  text-align: center;
}

footer {
  background-color: #000000;
  padding: 30px;
  box-shadow: 0 -10px 10px #ffffff80;
  text-align: center;
  text-decoration: underline;
}

main {
  flex-grow: 1;
  padding: 40px 20px;
}

h2 {
  text-align: center;
  /*text-decoration: underline;*/
  text-underline-offset: 6px;
  text-shadow: 2px 2px 2px #f1f1f180;
  margin-bottom: 30px;
  font-size: 2rem;
}

/*width :50vw;
   min-width: 300px;
   max-width: 500px;*/

/* ====================== CARTES ============================== */
.card {
  width: clamp(220px, 50vw, 350px);
  border: 2px solid #ffffff;
  border-radius: 10px;
  box-shadow: 3px 3px 6px #ffffff80;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  background-color: #6c6c6c;
  align-items: center;
  /*====== Hauteur de la CARD ======*/
  width: var(--LgCard);
  height: var(--HtCard);
}

.card:hover {
  width: clamp(220px, 50vw, 350px);
  border: 2px solid #ffffff;
  border-radius: 10px;
  box-shadow: 3px 3px 6px #ffffff80;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  background-color: #000000;
  cursor: url(../Curseurs/MainSuperGF-ok.png) 5 5, auto;
}

.img-card {
  width: 375px; /*50%;*/
  min-width: 200px;
  flex-grow: 1;
  /*height:450px;*/
  height: var(--HtImageCard);
  box-shadow: 0 10px 10px #ffffff80;
}

.img-card1 {
  width: 375px; /*50%;*/
  /*margin-left: -280px;*/
  min-width: 200px;
  /* HAUTEUR FIXE sinon des décalages*/
  height: 500px;
  flex-grow: 1;

  --TotalLargeur: 100%;
  --TotalHauteur: 100%;
  --Dim: 94%;
  --MargeH: calc(var(--TotalLargeur) / 2 - var(--Dim) / 2);
  --MargeV: calc(var(--TotalHauteur) / 2 - var(--Dim) * 0.8);
  position: relative;
  width: var(--Dim);
  /*left: calc(var(--MargeH) - 5.7%);*/
  /*border-radius: 8px;*/
  /*height: var(--Dim);*/
}

.img-NoCard {
  position: absolute;
  width: 1%;
  min-width: 100px;

  flex-grow: 1;
}

.img-NoCard:hover {
  position: absolute;
  /*width: 4%;*/
  min-width: 100px;

  /*flex-grow: 1;*/
}

.img-card:hover,
.img-card1:hover {
  /*---Animaton de la photo----*/
  /*animation: MyRotation 0.8s 1.5s;*/

  animation: MyRotation 2.8s 0.8s infinite;

  /*transform: scale(2, 2);*/

  /*transform: scale(1, 1);*/
}

/* ===================== FIN CARTES =========================== */
.card {
  width: clamp(220px, 50vw, 350px);
  border: 2px solid #ffffff;
  border-radius: 10px;
  box-shadow: 3px 3px 6px #ffffff80;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  background-color: #6c6c6c;
  /* justify-content: center;*/
  align-items: center;
}

.Numero {
  /*padding-left: 10px;*/
  position: relative;
  left: 4px;
  z-index: 1;
}

.TextRecette {
  width: clamp(200px, 50vw, 330px);
  border: 1px solid #ffffff;
  border-radius: 10px;
  box-shadow: 3px 3px 6px #ffffff80;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;

  /* justify-content: center;*/
  align-items: center;
}

.card1:hover,
.card2:hover {
  width: clamp(220px, 50vw, 350px);
  border: 2px solid #ffffff;
  border-radius: 10px;
  box-shadow: 3px 3px 6px #ffffff80;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  background-color: #000000;
  cursor: url(../Curseurs/MainSuperGF-ok.png) 5 5, auto;
}

#logoHeader {
  cursor: url(../Curseurs/MainSuperGF-ok.png) 5 5, auto;
}

.logoCard,
.logoCard1,
.logoCard2,
.logoCard3,
.logoCard4,
.logoCard5,
.logoCard6,
.logoCard7,
.logoCard8,
.logoCard9,
.logoCard10,
.logoCard11,
.logoCard12,
.logoCard13,
.logoCard14,
.logoCard15,
.logoCard16,
.logoCard17,
.logoCard18,
.logoCard19,
.logoCard20,
.logoCard21,
.logoCard22,
.logoCard23,
.logoCard24,
.logoCard25,
.logoCard26,
.logoCard27,
.logoCard28,
.logoCard29,
.logoCard30,
.logoCard31,
.logoCard32,
.logoCard33,
.logoCard34,
.logoCard35,
.logoCard36,
.logoCard37,
.logoCard38,
.logoCard39,
.logoCard40,
.logoCard41,
.logoCard42 {
  position: relative;
  margin-top: calc(0px - var(--DimA)); /*-300px;*/
  --TotalLargeur: 100%;
  --DimA: 250px;
  --MargeH: calc(var(--TotalLargeur) / 2 - var(--DimA) / 2);
  --MargeV: calc(
    var(--HtCard) / 2 - var(--DimA) / 2 + var(--DimA) - var(--HtTexte) / 2
  );
  width: var(--DimA);
  display: flex;
  flex-wrap: wrap;
  left: var(--MargeH);
  top: var(--MargeV);
  color: #666666;
  /*opacity: 0.5;*/
  visibility: hidden;
  border-radius: 10px;
}

/* ====================== ANIMATIONS ============================== */
@keyframes MyRotation {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg) scale(0.01);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

.gpsBeige {
  color: #f0e68c;
  font-family: cursive;
  font-size: 1.5rem;
  text-shadow: 2px 2px 4px #000000;
}

.gpsNoir {
  top: 6px;
  color: #f0e68c;
  font-family: cursive;
  font-size: 1rem;
  text-shadow: 2px 2px 3px #000000;
}

gpsNoirNum {
  color: #000000;
  font-family: cursive;
  font-size: 22px;
  text-shadow: 2px 2px 4px #000000;
}

gpsNoirTitre {
  color: #f0e68c;
  font-family: cursive;
  font-size: 1.5rem;
  text-shadow: 2px 2px 4px #000000;
}

.TitreRecette1,
.TitreRecette2,
.TitreRecette3,
.TitreRecette4,
.TitreRecette5,
.TitreRecette6,
.TitreRecette7,
.TitreRecette8,
.TitreRecette9,
.TitreRecette10,
.TitreRecette11,
.TitreRecette12,
.TitreRecette13,
.TitreRecette14,
.TitreRecette15,
.TitreRecette16,
.TitreRecette17,
.TitreRecette18,
.TitreRecette19,
.TitreRecette20,
.TitreRecette21,
.TitreRecette22,
.TitreRecette23,
.TitreRecette24,
.TitreRecette25,
.TitreRecette26,
.TitreRecette27,
.TitreRecette28,
.TitreRecette29,
.TitreRecette30,
.TitreRecette31,
.TitreRecette32,
.TitreRecette33,
.TitreRecette34,
.TitreRecette35,
.TitreRecette36,
.TitreRecette37,
.TitreRecette38,
.TitreRecette39,
.TitreRecette40,
.TitreRecette41,
.TitreRecette42 {
  position: relative;
  top: -23px;
  /*margin: 0 auto;*/
  width: 100%;
  text-align: center;
  height: 38px;
  /*padding-bottom : 4px;*/
  margin-bottom: -23px;
  background-color: #939393;
  /*border-top: 2px solid #4f4f4f;*/
  /*box-sizing: border-box;*/
  /*box-shadow: 2px solid #4f4f4f;*/
}

.text-card {
  width: 50%;
  min-width: 200px;
  flex-grow: 1;
  text-align: justify;
  min-height: 200px;
  display: flex;
  justify-content: center;
  /*align-items: center;*/
  padding: 15px;
  border-top: 2px solid #4f4f4f;
}

.text-card:hover {
  width: 50%;
  min-width: 200px;
  flex-grow: 1;
  text-align: justify;
  min-height: 200px;
  display: flex;
  justify-content: center;
  /*align-items: center;*/
  padding: 15px;
  border-top: 2px solid #bdbdbd;
}

.container {
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  /*Espacement entre cartes*/
  gap: 20px;
  /*Centrage des cartes*/
  justify-content: center;
  /*align-items: center; MAUVAIS DONNE DES HAUTEURS DIFFERENTES DES CARTES*/
}

/*width :50vw;
    min-width: 300px;
    max-width: 500px;*/

@media (max-width: 762px) {
  .card {
    width: clamp(600px, 50vw, 650px);
    border: 2px solid #ffffff;
    border-radius: 10px;
    box-shadow: 3px 3px 6px #ffffff80;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    /*====== Hauteur de la CARD ======*/
    width: var(--LgCard);
    height: var(--HtCard);
  }

  .card:hover {
    width: clamp(600px, 50vw, 650px);
    border: 2px solid #ffffff;
    border-radius: 10px;
    box-shadow: 3px 3px 6px #ffffff80;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    background-color: #000000;
    cursor: url(../Curseurs/MainSuperGF-ok.png) 5 5, auto;
    /*====== Hauteur de la CARD ======*/
    width: var(--LgCard);
    height: var(--HtCard);
  }
}