/* Polices de caractère */


.alan-sans-regular {
  font-family: "Alan Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.alan-sans-medium {
  font-family: "Alan Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

@font-face {
    font-family: 'Pally-regular';
    src: url('../fonts/Pally-Regular\ 2.otf') format('woff2'),
         url('../fonts/Pally-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Pally-medium';
    src: url('../fonts/Pally-Medium\ 2.otf') format('woff2'),
         url('../fonts/Pally-Medium.otf') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Pally-bold';
    src: url('../fonts/Pally-Bold\ 2.otf') format('woff2'),
         url('../fonts/Pally-Bold.otf') format('woff');
    font-weight: 700;
    font-style: normal;
}

/* Styles globaux */

html {
    box-sizing: border-box;
    width: 100%;
}

body {
    font-family: 'alans-sans-regular', sans-serif;
    margin: 40;
    padding: 40;
    height: 100vh; 
    background-color: #fff4e4;
}

.container {
      display: flex;
      gap: 20px; /* espace entre les cadres */
      padding: 20px;
    }

.col {
      flex: 1; /* chaque cadre prend la moitié de la largeur */
      width: 400px; /* hauteur fixe pour l’exemple */
      height: auto;
    }

div {
    text-align: left;
    margin: 5%;
}

logo img {
    width: 200px;
    height: auto;
    margin-bottom: 20px;
}


h1 {
    font-family: 'Pally-bold', sans-serif;
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

p {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 968px) {
      .container {
        flex-direction: column; /* les cadres passent l’un au-dessus de l’autre */
        align-items: center;
      }

      .col {
        width: 90%; /* pour qu’ils ne prennent pas toute la largeur */
        margin-bottom: 0%; /* espace en bas */
      }

      div {
        margin-left: 5%; /* espace autour du contenu */
        margin-right: 5%;
      }

      p {
        margin-bottom: 0%; /* texte un peu plus petit */
      }
    }