@import url("https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap");


ul, ol {     /* enlève point pour les listes */
  list-style: none;
}     
  

*,
  ::before,
  ::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
  text-decoration: none;
}

a {
  text-decoration: none; /* Enlève le soulignement */
}

body {  
  margin: 0;      /* enlève marge blanche */
  padding: 0;     /* enlève marge blanche */
  font-family: "Shadows Into Light", cursive;
}


.footer {
  background-color: #13406e;
  color: #FFFFFF; 
  padding: 20px;
  height: 120px; /* taille de la bande bleu */
  display: flex;
  align-items: center ;
  margin-top: 50px; /* espace entre le fooer et le reste */
  justify-content: center;
}









.annoncement {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative; /* Permet de positionner .date par rapport à ce bloc */
  font-family: "Shadows Into Light", cursive;
}

.annoncement h2 {
  z-index: 1;
  color: #df304e; 
  font-size: 36px;
  margin: 10px 215px;
}


.annoncement p {
  z-index: 1;      /* permet de régler qui est au premier plan, premier plan = z le plus grand  */
  /* Creer les crochets  */
  --s: 30px; /* La taille du coin */
  --t: 4px;  /* L'épaisseur de la bordure */
  --g: 20px; /* L'écart entre la bordure et le texte */
  
  padding: 50px;
  padding-bottom: 50px;
  margin-left: 90px;
  margin-top: 15px;
  outline: var(--t) solid black; /* La couleur de la bordure */
  outline-offset: calc(-1 * var(--t));
  mask:
    conic-gradient(at var(--s) var(--s), #0000 75%, #000 0)
    0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
  display: inline-block; /* Nécessaire pour que le texte puisse être traité comme un bloc */
  transition: .4s;

  color: #13406e; 
  padding-left: 40px;
  font-size: 4rem;

  margin-left: 0;
  max-width: 90%; /* Évite que le texte soit trop large sur mobile */

  position: relative; /* Nécessaire pour contenir .date en absolu */
  display: inline-block;
  padding-bottom: 80px; /* Ajuste selon l'espace nécessaire */
}

.date {
  color: #13406eb2;
  position: absolute;
  bottom: 10px;  /* Ajuste pour bien coller au bord */
  right: 375px;  /* Ajuste pour bien s’aligner avec le crochet */
  font-size: 20px;
}

/* Quand l'écran devient plus petit que 518px, la position reste figée mais pour l'instant marche pas bien*/
@media (max-width: 518px) {
  .date {
    position: relative; /* Fixe la date à sa dernière position */
    left: -100px;  /* Ajuste la position pour qu'elle reste visible */
    bottom: 30px; /* Garde une distance constante du bas */
  }
}

.text:hover {
  outline-offset: calc(var(--g) / -1);
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centre tous les éléments à l'intérieur */
  text-align: center; /* Centre le texte à l'intérieur de .container */
}

.container h2 {
  color: #df304e; 
  font-size: 36px; 
  margin: 50px 0 10px 0; /* Marge verticale pour espacer le titre */
  max-width: 90%; /* Évite que le texte soit trop large sur mobile */
  text-align: center; /* Centre le texte */
  padding-left: 0; /* Retire le padding à gauche pour centrer */
  padding-right: 0; /* Retire le padding à droite pour centrer */
}

.annoncement a{
  color: #df304e;
}

/* Creer les polaroïds  */

article {
	width: 18rem;
	padding: 20px;
	background-color: #fbfcfc;
	box-shadow: rgba(0, 0, 0, 0.33) 0px 4px 12px;

	display: flex;
	align-items: center;
	flex-direction: column;
  position: relative;
  top: 20px;
  margin: 20px;  /* Espace entre les polaroïds  */
  max-width: 90%;  /* permet aux polaroids de s'adapter sur mobile  */

  border: #dfdfdf 1px solid;
}

.polaroid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px; /* Espacement entre les polaroïds */
}

header {
	width: 100%;
}

header img{
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	object-position: center;
}

article a{
  color: #13406e;
  display: flex;
  justify-content: center;
	margin-top: 10px;
	font-size: 1.5rem;
	font-family:"Shadows Into Light", cursive;
}




main{
	position: relative;
  height: 100vh;
}


@media screen and (max-width: 1023px) {
  .annoncement p{
    font-size: 3rem;
  }
}

@media screen and (max-width: 767px) {
  .annoncement p{
    font-size: 2.5rem;
  }

}






