/*======================
  Import global styles
======================*/
@import url('global.css');
@import url('header.css');
@import url('footer.css');

/*======================
  Blog specific styles
======================*/

main {
  /* min-height: 100vh; */
  margin: 0;
}
body{
  background-color: var(--jaune);
}

.hero__bloc {
  /* min-height: 100vh; */
  margin: 0;
  padding-top: 100px;
  background-color: var(--jaune);
}

/* ---------------- actualites ---------------- */

.section {
  top: 0;
  margin: 0;
  clear: both;
  text-align: center;
}
.section__container {
  background: linear-gradient(to right, #FFFB92, #FFFB92);
  color: #323232;
  padding: 60px 40px;
  border-radius: 0px 0px 26px 26px;
}

.section__container--title {
  font-family: 'Raleway', sans-serif;
  font-size: 52px;
  font-weight: 900;
  color: var(--texte-noir);
  line-height: 1.2;
  margin-bottom: 20px;
  text-align: left;
  margin-left: 55px;
}

/* ---------------- ARTICLES ---------------- */
#blog {
  background-color: var(--color-background-2);
  padding: 60px 20px;
  margin: auto;
}

.section__article {
  display: flex;
  align-items: stretch;
  gap: 40px;
  padding: 30px;
  margin-bottom: 30px;
  margin-left: -40px;
  max-width: 95%;
  background: var(--color-background-2);
}

.section__article--img {
  width: 30%;
  height: 400px;
  margin-left: 90px;
  object-fit: cover;
  border-radius: 26px;
  border: 1px solid var(--color-background-2);
}

.section__article--content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: start;
}

/* 
 * Header de l'article avec gestion intelligente du renvoi de ligne
 * 
 * PROBLÈME RÉSOLU : La date doit rester sur la première ligne du titre
 * même quand le titre est trop long et se renvoie à la deuxième ligne.
 * 
 * SOLUTION : Utilisation de flexbox avec flex-wrap et gestion des tailles
 */
.section__article--header {
  display: flex;
  justify-content: space-between;  /* Titre à gauche, date à droite */
  align-items: flex-start;         /* Alignement en haut pour éviter les décalages */
  margin-bottom: 10px;
  flex-wrap: wrap;                 /* Permet au titre de se renvoyer à la ligne */
}

/* 
 * Titre de l'article avec gestion flexible de l'espace
 * 
 * flex: 1          → Prend tout l'espace disponible
 * min-width: 0     → Permet au titre de se rétrécir et se renvoyer à la ligne
 * line-height: 1.2 → Espacement optimal entre les lignes du titre
 */
.section__article--title {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--texte-noir);
  margin: 0;
  line-height: 1.2;
  flex: 1;                         /* Prend l'espace disponible */
  min-width: 0;                    /* Permet le renvoi de ligne */
}

/* 
 * Date de l'article positionnée sur la première ligne
 * 
 * flex-shrink: 0   → La date ne rétrécit jamais, reste toujours visible
 * white-space: nowrap → Empêche la date de se couper sur plusieurs lignes
 * margin-left: 20px → Espacement entre le titre et la date
 * 
 * COMPORTEMENT : Quand le titre se renvoie à la ligne, la date reste
 * positionnée sur la première ligne grâce à flex-wrap et flex-shrink: 0
 */
.section__article--date {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--texte-noir);
  /* color: #888; */
  line-height: 1;
  white-space: nowrap;             /* Date sur une seule ligne */
  flex-shrink: 0;                  /* Ne rétrécit jamais */
  margin-left: 20px;               /* Espacement avec le titre */
}

.section__article--description {  
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--texte-noir);
  margin-bottom: 20px;
  line-height: 1.5;
}

.section__article--btn {
  background: linear-gradient(135deg, #2D5A3D 0%, #1E3A28 100%);
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 500;
  align-self: start;
  margin-top: auto;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: auto;
}

.section__article--btn:hover {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  padding-right: 50px;
}

.section__article--btn:hover .section__article--btn--flechette {
  opacity: 1;
  transform: translateX(0);
}

.section__article--btn--flechette {
  opacity: 0;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  transition: all 0.3s ease;
  transform: translateX(-20px);
  filter: brightness(0) invert(1);
  position: absolute;
  right: 16px;
}