/* Reset de base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Fond g�n�ral */
body {
  background-color: #5E96E1;
  color: white;
  font-family: 'Times New Roman', 'Segoe UI', sans-serif;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Banni�re */
.banner {
  display: block;
  max-width: 100%;       /* Ne d�passe jamais la largeur de l'�cran */
  height: auto;          /* Garde le ratio (proportion) de l'image */
  margin: 0 auto;        /* Centre l'image si plus petite que l'�cran */
  width: auto;           /* Laisse la taille naturelle sur les grands ��crans */

}

/* Header */
header {
  text-align: center;
  padding: 20px;
}

/* Main */
main {
  flex: 1;
  padding: 20px;
  text-align: center;
}

/* Boutons */
.button-group {
  display: flex;
  flex-wrap: wrap;
  
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.btn {
  background-color: white;
  color: #3498db;
  padding: 12px 24px;
  border-radius: 25px;
    border: 2px solid cyan;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: #2980b9;
  color: white;
}

/* Bloc blanc centr� */
.white-box {
  background-color: white;
  color: #3498db;
  padding: 20px;
  max-width: 900;       /* Ne d�passe jamais la largeur de l'�cran */
  height: auto;  
  margin-top: 30px;
  border: 3px solid cyan;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.centered-box {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/* Footer */
footer {
  text-align: center;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Responsive typographie (optionnel) */
h1 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

h2 {
  font-size: clamp(1.2rem, 4vw, 2rem);
}

p {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
} 
.date-box {
  background-color: white;
  color: #3498db; /* bleu */
  border: 2px solid cyan;
  padding: 15px 25px;
  border-radius: 10px;
  max-width: 500px;
  margin: 30px auto;
  text-align: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.yellow-box {
  background-color: #FFFFCC; /* Jaune */
  color:  #3498db; /* Texte bleu*/
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
} 

.blue-box {
  background-color: #6699FF; /* bleu vif */
  color:  white; /* Texte blanc*/
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.ligne {
      width: 90%;             /* longueur = 90% de la page */
      margin: 30px auto;      /* espace avant/apr�s + centrage */
      border: none;           /* on supprime le style par d�faut */
      border-top: 4px solid blue; /* ligne noire de 3px */
}   
 
  
 /* === Bloc avec fond bleu, bordure cyan, texte blanc === */
.bloc-styled {
  background-color: #6699FF;  /* bleu fonc� */
  border: 4px solid cyan;     /* bordure cyan */
  color: white;               /* texte en blanc */
  padding: 20px;              /* espace int�rieur */
  border-radius: 10px;        /* coins arrondis */
  max-width: 900px;
  margin: 20px auto;          /* centr� avec marges */
}

/* === Image + texte en flex === */	


.image-texte {
  display: flex;
  align-items: flex-start;   /* aligne le haut de l'image avec le texte */
  gap: 15px;                 /* espace entre image et texte */
  max-width: 800px;          /* largeur max du bloc */
  margin: 0 auto;            /* centre le bloc dans la page */
}


.image-texte img {
  width: 150px;
  border-radius: 8px;
  border: 2px solid cyan;     /* petit rappel visuel */
}

.image-texte .texte {
  flex: 1;                   /* texte prend tout l'espace restant */
  text-align: left;          /* texte align� � gauche */
  font-size: 8px;           /* taille de texte par d�faut */
  line-height: 1.5;          /* lisibilit� */
}


/* 📱 Responsive : sur petit �cran (< 600px), image au-dessus */
@media (max-width: 600px) {
  .image-texte {
    flex-direction: column;  /* pile image puis texte */
    align-items: center;     /* centre l'image */
  }

  .image-texte img {
    margin-bottom: 10px;     /* espace entre image et texte */
  }

  .image-texte .texte {
    font-size: 8px;         /* diminue la taille du texte sur mobile */
    text-align: left;        /* texte reste align� � gauche */
    width: 100%;             /* texte prend toute la largeur dispo */
  }
} 
    :root{
      --cyan: #00bcd4; /* bordure par d�faut */
      --yellow: #ffeb3b; /* int�rieur */
      --radius: 16px;
      --gap: 20px;
      --card-width: 320px; /* change si besoin */
    }



    .blocks{
      display:flex;
      gap:var(--gap);
      align-items:flex-start;
      justify-content:center;
      flex-wrap:wrap;
      max-width: 2000px;
      width:100%;
    }

    .card-link{
      display:block;
      width:var(--card-width);
      text-decoration:none;
      color:inherit;
      border-radius:var(--radius);
      border:4px solid var(--cyan);
      background: #FFFFCC;
      padding:12px;
      box-sizing:border-box;
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      text-align:center;
      -webkit-tap-highlight-color: transparent;
    }

    .card-link:focus{
      outline:3px solid rgba(0,188,212,0.25);
      outline-offset:4px;
    }

    .card-link:hover{
      transform:translateY(-6px);
      box-shadow:0 10px 26px rgba(16,24,40,0.12);
      border-color:red; /* bordure rouge au survol */
    }

    .card-link:active{
      border-color:black; /* bordure noire quand on clique */
    }

    .card-figure{
      margin:0;
      padding:0;
    }

    .card-img{
      width:100%;
      height:200px;
      object-fit:cover;
      border-radius:calc(var(--radius) - 6px);
      display:block;
    }

    .card-title{
      margin:10px 0 0 0;
      font-weight:600;
      font-size:1rem;
    }

    .card-text{
      margin:6px 0 0 0;
      font-size:.95rem;
      color: "#3366FF";
    }

    @media (max-width:720px){
      :root{--card-width: 92%;}
      .blocks{gap:14px}
    }