/* 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;
}
section h1, footer h1, nav a
{
	font-family: "Times New Roman";
	font-weight: bold;
} 

h1
{
	color: blue;
	font-size: 30px;
}
/*la propriété CSS text-transform: uppercase; (que nous n'avons pas vue auparavant) pour faire en sorte
que mes titres soient toujours écrits en majuscules. Cette propriété transforme en effet le texte en majuscules (elle peut aussi faire
l'inverse avec lowercase).*/

a  /* Liens par défaut (non survolés) */
{
   list- style-type: none;
   text-decoration: none;
   color: red;
   font-style: italic;
   font-size: 20px;
}

a:focus /* Quand le visiteur sélectionne le lien */
{
    background-color: #FFCC66;
}

a:hover /* Apparence au survol des liens */
{
   text-decoration: underline;
   color: green;
}

a:active /* Quand le visiteur clique sur le lien */
{
    background-color: #FFCC66;
}

nav ul 
{
   list- style-type: none;
      font-size: 20px;
}

nav li
{
   list- style-type: none;
   text-decoration: none;
}

/* Header */
header
/* 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: 10px;
  max-width: 900;       /* Ne dépasse jamais la largeur de l'écran */
  height: auto;  
  margin-top: 20px;
  border: 3px solid cyan;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}


/* Bloc blanc centré */
.white-box2 {
  background-color: white;
  color: #3498db;
  padding: 20px;
  max-width: 900;
  width: auto;       /* 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;
  font-weight: bold;
  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 */
    }
	
.arrondie {
	-moz-border-top-left-radius: 0px;
	-moz-border-top-right-radius: 25px;
	-moz-border-bottom-right-radius: 0px;
	-moz-border-bottom-left-radius: 25px;
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 25px;
	-webkit-border-bottom-right-radius: 0px;
	-webkit-border-bottom-left-radius: 25px;
	border-top-left-radius: 0px;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 25px;
	bordercolor:blue; 
    
}
.arrondie2 {
	-moz-border-top-left-radius: 25px;
	-moz-border-top-right-radius: 0px;
	-moz-border-bottom-right-radius: 25px;
	-moz-border-bottom-left-radius: 0px;
	-webkit-border-top-left-radius: 25px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 25px;
	-webkit-border-bottom-left-radius: 0px;
	border-top-left-radius: 25px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 25px;
	border-bottom-left-radius: 0px;
    bordercolor:blue;


    .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}
    }