/* =========================

   HOME - (mobile-first)

========================= */



.univers {

  position: relative;

  z-index: 1;



  margin-top: -80px;

  margin-left: auto;

  margin-right: auto;

  padding-top: 80px;

  padding-bottom: 90px;

  background-image: url("../../assets/img/home/univers/map-bg.png");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  max-width: 2000px;



  overflow: hidden;

}



.univers__inner {

  position: relative;

  max-width: 80%;

}



.univers__title {

  margin: 15px 0 28px;

  text-align: center;

}



.univers__deco {

  display: none;

}



/* ---------- MOBILE (stack propre) ---------- */

.univers__item {

  display: grid;

  grid-template-columns: 1fr;

  gap: 16px;

  margin: 0 0 50px;



  text-align: center;

  align-items: start;

}



.univers__img {

  width: min(800px, 100%);

  height: auto;

  display: block;

  margin-inline: auto;

}



.univers__content {

  margin-inline: auto;

}



.univers__h3 {

  margin: 0 0 8px;

}



.univers__p {

  margin: 0;

  max-width: none;

}



.univers__link {

  display: block;

}



.univers__item--phyto .univers__link {

  order: -1;

}



.univers__item--phyto .univers__content {

  order: 0;

}



/* =========================

   HOVER ZOOM - Univers

========================= */



.univers__link {

  display: block;

  border-radius: 20px;

}



.univers__img {

  transition:

    transform .35s ease,

    opacity .35s ease,

    box-shadow .35s ease;

  will-change: transform;

}



.univers__link:hover .univers__img {

  transform: scale(1.06);

  opacity: 0.80;

}



/* =========================

DESKTOP (maquette)

========================= */



@media (min-width: 768px) {

  .univers__item {

    margin-bottom: 100px;

  }



  .univers__title {

    margin: 50px 0 70px;

  }



  .univers__h3 {

    margin: 0 0 20px;

  }

}



@media (min-width: 820px) {

  .univers {

    margin-top: -110px;

    padding-top: 80px;

    padding-bottom: 90px;

  }



  .univers__title {

    margin: 90px 0 70px;

  }

}



@media (min-width: 1200px) {



  .container--wide {

    width: min(1860px, calc(100% - 400px));

    margin-inline: auto;

  }



  .univers {

    --u-img: clamp(520px, 34vw, 860px);

    --u-text: clamp(520px, 30vw, 760px);

    --u-gap: clamp(12px, 1.8vw, 40px);

    margin-top: -140px;

    padding-top: 180px;

    min-height: 1500px;

  }



  .univers__title {

    margin: 0 0 48px 10px;

    text-align: left;

  }



  .univers__h3 {

    margin: 0 0 8px 10px;

  }



  .univers__p {

    margin-left: 10px;

  }



  .univers__item {

    grid-template-columns:

      minmax(0, var(--u-img)) minmax(0, var(--u-text)) minmax(0, var(--u-img));

    column-gap: var(--u-gap);

    align-items: center;

    text-align: left;

    margin: 0;

  }



  .univers__content {

    width: auto;

    margin-inline: 0;

  }



  .univers__link {

    display: block;

    width: 100%;

    margin: 0;

  }



  .univers__img {

    width: 100%;

    height: auto;

    display: block;

    margin: 0;

  }



  .univers__item--astro .univers__link,

  .univers__item--symboles .univers__link {

    width: 118%;

    margin-left: -10%;

    justify-self: start;

  }



  .univers__item--phyto .univers__link {

    width: 118%;

    margin-right: -10%;

    justify-self: end;

  }



  .univers__item--astro .univers__link {

    grid-column: 1;

  }



  .univers__item--symboles .univers__link {

    grid-column: 1;

  }



  .univers__item--phyto .univers__link {

    grid-column: 3;

    order: 0;

  }



  /* texte PHYTO à gauche */

  .univers__item--phyto .univers__content {

    grid-column: 1 / 3;

    justify-self: end;

    max-width: clamp(520px, 38vw, 760px);

    padding-left: 0;

    padding-right: clamp(10px, 1.2vw, 24px);

  }



  .univers__item--astro .univers__content,

  .univers__item--symboles .univers__content {

    grid-column: 2 / 4;

    padding-left: 20px;

    padding-right: clamp(240px, 18vw, 420px);

    margin-top: 6px;

  }



  /* =========================

     DECOS 

  ========================= */

  .univers__deco {

    display: block;

    position: absolute;

    pointer-events: none;

    user-select: none;

    opacity: .9;

  }



  .univers__deco--boussole {

    width: clamp(260px, 14vw, 380px);

    right: clamp(24px, 2vw, 90px);

    top: 60px;

    opacity: .85;

  }



  .univers__deco--fleche1 {

    width: clamp(500px, 30vw, 700px);

    top: 320px;

    left: 41%;

    transform: translateX(-20%);

  }



  .univers__deco--fleche2 {

    width: clamp(400px, 22vw, 600px);

    top: 640px;

    transform: translateX(135%);

  }



  .univers__deco--croix {

    width: clamp(26px, 2vw, 38px);

    top: 770px;

    left: 45%;

    transform: translateX(-180px);

    opacity: .75;

  }

}





/* =========================

   HOME - PROCHAINS RENDEZ-VOUS

========================= */



.events {

  position: relative;

  z-index: 3;

  margin-top: -110px;

  padding: 90px 0 70px;

  background: url("../../assets/img/home/events/banniere-vague-finale-mobile.webp") center/cover no-repeat;

  overflow: hidden;

}



.events__title {

  margin: 0 0 28px;

  color: #fff;

  text-align: center;

}



.events__grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 40px;

}



.event-card {

  text-align: center;

  color: #fff;

  max-width: 300px;

  margin-inline: auto;

}



/* ✅ lien = largeur de la carte */

.event-card__link {

  display: block;

  width: 100%;

  margin: 0 auto 20px;

}



/* ✅ le ratio est ici (wrapper) */

.event-card__media {

  width: 100%;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  border-radius: 14px;

  box-shadow: var(--shadow);

}



/* ✅ l'image remplit le wrapper */

.event-card__img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  margin: 0;

  border-radius: 0;

  box-shadow: none;



  transition: transform .35s ease, opacity .35s ease;

  will-change: transform;

}



/* HOVER */

.event-card__link:hover .event-card__img {

  transform: scale(1.06);

  opacity: 0.80;

}



.event-card__h3 {

  margin: 0 0 10px;

  font-weight: 600;

}



.event-card__p1,

.event-card__p2 {

  margin: 0 0 10px;

  opacity: .95;

  color: #fff;

}



.event-card__p2 {

  display: none;

}



/* CTA global en bas (pas dans une carte) */

.events__cta {

  margin-top: 30px;

  text-align: center;

}



/* =========================

   TABLETTE

========================= */

@media (min-width: 768px) {

  .events {

    background: url("../../assets/img/home/events/banniere-vague-finale-768.webp") center/cover no-repeat;

    margin-top: -150px;

    padding: 120px 0 110px;

  }

  .events__grid {

    gap: 80px;

  }



  .events__title {

    margin-bottom: 40px;

  }



  .event-card {

    max-width: 500px;

  }

}



/* =========================

   LARGE TABLET / SMALL DESKTOP

========================= */

@media (min-width: 992px) {

  .events {

    background: url("../../assets/img/home/events/banniere-vague-finale-1024.webp") center/cover no-repeat;

    margin-top: -170px;

    padding: 150px 0 150px;

  }



  .events__title {

    margin-bottom: 60px;

  }



  .event-card {

    max-width: 700px;

  }

}



/* =========================

   DESKTOP

========================= */

@media (min-width: 1200px) {

  .events {

    background: url("../../assets/img/home/events/banniere-vague-finale.webp") center/cover no-repeat;

    width: min(2000px, 100%);

    margin-inline: auto;

    padding: 190px 0 110px;

  }



  .events__grid {

    grid-template-columns: repeat(3, 1fr);

    align-items: start;

    gap: 60px;

  }



  .events__title {

    margin: -30px 0 50px 60px;

    text-align: start;

  }



  .event-card {

    max-width: 420px;

  }



  .event-card__p1,

  .event-card__p2 {

    max-width: 380px;

    margin: 20px auto;

  }



  .event-card__p2 {

    display: block;

  }



  .events__cta {

    margin-top: 50px;

    margin-right: 40px;

    text-align: end;

  }

}





/* =========================

   HOME - MEDIA

========================= */



.media {

  padding: 30px 0 40px;

}



.media__title {

  margin: 0 0 30px;

  text-align: center;

}



.media__grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 70px;

}



.media-card {

  display: grid;

  gap: 10px;

}



.media-card__img {

  width: 90%;

  height: 180px;

  display: block;

  border-radius: 14px;

  box-shadow: var(--shadow);

  margin: auto;

}



.media-card__h3 {

  margin: 6px 0 0;

  font-weight: 600;

  text-align: center;

}



.media-card__p {

  margin: 0;

  text-align: center;

}



.media-card__link {

  width: fit-content;

  color: inherit;

  text-decoration: none;

  font-weight: 500;

  margin: auto;

  font-size: 17px;

}



.media-card__link:hover,

.media-card__link:focus-visible {

  text-decoration: underline;

}



.media__cta {

  margin-top: 30px;

  display: flex;

  justify-content: center;

}



@media (min-width: 768px) {

  .media {

    padding: 30px 0 60px;

  }



  .media__grid {

    gap: 90px;

  }



  .media-card {

    gap: 20px;

  }



  .media-card__img {

    width: 90%;

    height: 300px;

  }



  .media-card__link {

    font-size: 25px;

  }



  .media__cta {

    margin-top: 50px;

  }

}



@media (min-width: 820px) {

  .media-card {

    gap: 20px;

  }



  .media-card__img {

    height: 350px;

  }



  .media-card__link {

    font-size: 29px;

  }

}



@media (min-width: 992px) {

  .media-card__img {

    height: 430px;

  }



  .media-card__link {

    font-size: 32px;

  }

}



@media (min-width: 1200px) {

  .media {

    padding: 40px 0 50px;
    max-width: 90%;
    margin: auto;

  }



  .media__title {

    margin: 0 0 40px 15px;

    text-align: start;

  }



  .media-card {

    gap: 20px;

  }



  .media-card__img {

    width: 100%;

    height: 350px;

  }



  .media-card__h3 {

    text-align: start;

  }



  .media-card__p {

    text-align: start;

  }



  .media-card__link {

    margin: 0;

    font-size: 20px;

  }



  .media__grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 28px;

    align-items: start;

  }



  .media__cta {

    margin-top: 30px;

    display: flex;

    justify-content: end;

  }

}



/* =========================

   HOME - NEWSLETTER

========================= */



.newsletter {

  padding: 30px 0 90px;

}



.newsletter__inner {

  background: rgba(0, 0, 0, .78);

  border-radius: 16px;

  padding: 26px 20px;

  color: #fff;

  box-shadow: var(--shadow);

}

@media (min-width: 768px) {
  .newsletter {
    width: 90%;
    margin: auto;
  }

  .newsletter__inner {
    padding: 28px;
  }
}

/* ── MailPoet overrides (newsletter home) ───────── */

.newsletter .mailpoet_spacer {
  display: none !important;
}

/* Titre MailPoet — même taille que h2 en base.css */
.newsletter .mailpoet-heading {
  font-family: var(--font-serif) !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  color: #fff !important;
  margin: 0 0 12px !important;
  line-height: 1.3;
}

/* Texte MailPoet — même taille que body en base.css */
.newsletter p.mailpoet_form_paragraph {
  font-family: "Roboto", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  margin: 0 0 20px !important;
  display: block !important;
  line-height: 1.6;
}

/* Span interne MailPoet (inline styles) → forcer Roboto normal */
.newsletter span.mailpoet-has-font-size {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
}

/* Bouton MailPoet — même taille responsive que les autres boutons */
.newsletter .mailpoet_submit {
  font-family: "Roboto", sans-serif !important;
  font-size: var(--fs-btn) !important;
  font-weight: 500 !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  background: var(--btn-blue) !important;
  color: var(--btn-blue-text) !important;
  box-shadow: 3px 5px 12px rgba(56, 56, 56, 0.55) !important;
  cursor: pointer !important;
  transition: background .2s ease !important;
}

.newsletter .mailpoet_submit:hover {
  background: var(--btn-blue-hover) !important;
}

@media (min-width: 768px) {
  .newsletter .mailpoet-heading {
    font-size: 40px !important;
    margin-bottom: 16px !important;
  }

  .newsletter p.mailpoet_form_paragraph {
    font-size: 24px !important;
    margin-bottom: 28px !important;
  }
}

@media (min-width: 820px) {
  .newsletter .mailpoet-heading {
    font-size: 45px !important;
    margin-bottom: 18px !important;
  }

  .newsletter p.mailpoet_form_paragraph {
    font-size: 28px !important;
    margin-bottom: 32px !important;
  }
}

@media (min-width: 992px) {
  .newsletter .mailpoet-heading {
    font-size: 50px !important;
    margin-bottom: 20px !important;
  }

  .newsletter p.mailpoet_form_paragraph {
    font-size: 30px !important;
    margin-bottom: 36px !important;
  }
}

@media (min-width: 1200px) {
  .newsletter .mailpoet-heading {
    font-size: 35px !important;
    margin-bottom: 14px !important;
  }

  .newsletter p.mailpoet_form_paragraph {
    font-size: 18px !important;
    margin-bottom: 24px !important;
  }
}

/* =========================

   HOME - PARTENAIRES

========================= */

.partners {
  padding: 40px 0 10px;
}

.partners__inner {
  text-align: center;
}

.partners__title {
  margin: 0 0 30px;
}

/* Mobile: 2 colonnes */
.partners__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
  align-items: center;
  justify-items: center;
  max-width: 700px;
  margin: 0 auto;
}

.partners__item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partners__logo {
  max-width: 100px;
  width: 100%;
  height: auto;
  display: block;
  opacity: .95;
  transition: transform .2s ease, opacity .2s ease;
}

/* Hover comme réseaux */
.partners__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: .9;
}

.partners__link:hover {
  opacity: 1;
}

.partners__link:hover .partners__logo {
  transform: translateY(-2px);
  opacity: 1;
}

/* Desktop: 1 ligne (4 colonnes) */

@media (min-width: 768px) {
  .partners__grid {
    max-width: 900px;
  }

  .partners__logo {
    max-width: 180px;
  }
}

@media (min-width: 992px) {
  .partners__logo {
    max-width: 250px;
  }
}

@media (min-width: 1200px) {
  .partners__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1400px;
    gap: 100px;
  }

  .partners__title {
    margin: 0 0 40px;
  }

  .partners__logo {
    max-width: 200px;
  }
}