@font-face {
    font-family:SpeedPhreakCondensedItalic ;
    src: url(speed_phreak/speedphreakcondital.ttf);
}
@font-face {
    font-family:SpeedPhreak ;
    src: url(speed_phreak/speedphreak.ttf);
}
@font-face {
    font-family:ArialB ;
    src: url(speed_phreak/ArialBlack.ttf);
}
html, body 
{ 
  height: 100%; 
  margin: 0; 
} 
body { 
  display: flex; 
  flex-direction: column; 
  font-family: Arial;
}
.wrapper { 
  transform-origin: top center;
  flex: 1;
  margin:0 0 20px 0;
 }
body {
  background: #111;
  background-image: url(images/ingredientsFDCol.png);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

a
{
  color:white;
  text-decoration: none;
  font-family: ArialB;
  font-size:20px;
}
.lienBloc
{
  display:block;
  background-size: cover;
  padding: 10px 40px;
    border: 1px solid white;
}

.fontSP
{
  font-family: SpeedPhreak, sans-serif;
  font-size: 20px;
}
svg {
  max-width: 900px;
  display: block;
  margin:0 auto;
  /* height: auto; */
}

/* Couleurs propres */
.white-fill {
  fill: #ffffff;
}

.red-fill {
  fill: #e20e17;
}

.dark-stroke {
  stroke: #1e1e1c;
  stroke-width: 1.2px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.white-stroke {
  stroke: #ffffff;
  stroke-width: 6px;
  fill: none;
}

/* Aiguille */
.needle {
  fill: #be1823;
}

/* Texte ville */
.ville {
  fill: #f4e600;
  stroke: #e52521;
  stroke-width: 2px;
  font-family: SpeedPhreakCondensedItalic, sans-serif;
  font-size: 36px;
}
#flip-wrapper {
  transform-origin: center;
  transform-box: fill-box;
  perspective: 600px;
}
.container-blocs 
{ 
  display: flex; 
  margin-top:-90px;
  justify-content: space-between; 
  width: 100%; 
} 
h3
{
  font-size: 25px;
  margin:0;
}
.footer a
{
  font-size: 18px;
}
  .bloc 
  { width: 280px; 
    padding: 20px;
    margin:0 30px;
    box-sizing: content-box;
    height: auto;  
    color: white; 
    display: flex; 
    text-align: center;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
  } /* Responsive : en dessous de 600px → les blocs se superposent */ 
  .footer 
  { 
    /* position: sticky;  */
    /* bottom: 0;  */
    width: 100%; 
    /* background: rgba(190, 24, 35, 0.5);  */
    /* background-image:url(images/fdFootNB.png); */
    background-size: cover;
    
    color: white; 
    padding: 20px; box-sizing: 
    border-box; 
    z-index: 1; } 
    .footer-title { 
      text-align: center; 
      margin: 20 0 0 0; 
      font-size: 1.5rem; 
    }  
    .footer-columns { 
      display: flex; 
      justify-content: 
      space-between; 
      width: 100%; } 
      .footer .colonne 
      { width: 33.3%; 
        padding: 10px; 
        box-sizing: border-box; 
      }
      .bgTest
      { 
        background-size: cover;
      }
  @media (max-width: 730px) 
  { 
    /* .wrapper { transform: scale(0.8); } */
    .container-blocs { 
      flex-direction: column; 
      margin-top:-50px;
      align-items: center; 
      gap: 10px; /* espace entre les blocs */ 
      width:100%;
    } 
    h3
    {
      font-size: 20px;
    }
    .footer a
    {
      font-size: 16px;
    }
    .bloc
    {margin:0;
      width:100%;
    }
    .footer { 
      flex-direction: column; 
      align-items: center; 
      text-align: center; 
      gap: 20px; } 
      .footer-columns { 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
        gap: 20px; } 
        .footer .colonne { width: 100%; }
  }