@import url("general.css");

/* ===== Accueil (index) moderne ===== */

:root{
  --pink-50: #fff0f7;
  --pink-100:#ffd6ea;
  --pink-500:#ff2c9c;
  --text:#1f1f1f;
  --muted:#6b7280;
  --card:#ffffff;
  --shadow: 0 14px 40px rgba(0,0,0,.10);
  --radius: 18px;
}

.header {
  width: 100%;
  height: auto;          /* ✅ laisse l'image garder ses proportions */
  max-height: 260px;     /* ajuste si tu veux un header moins haut */
  object-fit: contain;   /* ✅ affiche TOUT l'image, sans couper */
  object-position: center top;
  display: block;
}

.imagedefond{
  height: 550px;
  border-radius: 22px;
  background: url("images/pa.avif") center/cover no-repeat;
  margin: 10px auto 26px;
  width: min(1100px, 92%);
  box-shadow: var(--shadow);
}


.liste-articles1{
  width: min(1100px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* CARD */
.article1{
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border: 1px solid rgba(255,44,156,.10);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
}

.article1 p{
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

/* Image ronde + texte à côté (propre) */
.article1:first-child{
  position: relative;
}

#image6{
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: contain;       /* ✅ plus de coupe */
  object-position: center top;
  background: #fff;          /* optionnel: joli si image transparente */
  padding: 6px;              /* optionnel */
}


/* compteur */
#decompteJs{
  width: 100%;
  color: var(--pink-500);
  font-size: 15px;
  font-weight: 700;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

#decompteJs table{
  width: 100%;
  border-collapse: collapse;
  background: linear-gradient(135deg, var(--pink-50), #fff);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,44,156,.12);
}

#decompteJs td{
  padding: 10px 12px;
  text-align: left;
  color: #2b2b2b;
}

#decompteJs tr:nth-child(odd) td{
  background: rgba(255,44,156,.06);
}

/* Image 2e card */
#image5{
  width: 100%;
  height: 150px;
  border-radius: 16px;
  object-fit: cover;           /* remplit */
  object-position: center top; /* ✅ garde la tête */
}

/*  */

/* Boutons CTA */
.bouton{
  width: min(520px, 92%);
  background: linear-gradient(135deg, #111, #2b2b2b);
  color: #fff;
  padding: 14px 18px;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  margin: 16px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  transition: transform .2s, box-shadow .2s, background .2s;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.bouton:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  background: linear-gradient(135deg, #ff2c9c, #ff7bd5);
}

/* Responsive */
@media (max-width: 980px){
  .liste-articles1{
    grid-template-columns: 1fr;
  }
  .article1{
    min-height: auto;
  }
  .imagedefond{
    height: 160px;
  }
}


/* Cartes : plus d'espace entre elles */
.liste-articles1{
  gap: 24px;              /* espace entre les 3 blocs */
  margin-top: 10px;
  margin-bottom: 35px;
}

/* Cartes : padding + hauteur clean */
.article1{
  padding: 26px;
  border-radius: 16px;
  line-height: 1.5;
}

/* Texte dans les cartes : respirer */
.article1 p{
  margin-top: 14px;
  margin-bottom: 0;
}

/* Boutons : espacés entre eux */
.bouton{
  margin: 18px auto 0;    /* espace au-dessus, centré */
  max-width: 420px;       /* évite trop large */
}

/* Sur mobile : empile les 3 cartes proprement */
@media (max-width: 900px){
  .liste-articles1{
    flex-direction: column;
  }
  .article1{
    width: 100%;
  }
}