/* ==========================================================================
   MonCodeParrain : styles ajoutés (audit SEO, octobre 2026)
   1. Mention d'affiliation
   2. Intro des catégories du blog et liens dans les textes
   3. Image de fond du hero (versions allégées)
   4. Animations : remplacent les interactions Webflow, sur le même vocabulaire
      que le site en ligne (glissés easeOutQuart, logos qui se soulèvent).
      Le contenu reste visible sans JavaScript et sans animation
      quand le visiteur demande de réduire les mouvements.
   ========================================================================== */

:root {
  --mcp-ease-out: cubic-bezier(.25, 1, .5, 1); /* proche du easeOutQuart du site en ligne */
  --mcp-ink: #15242d;
  --mcp-link: #912e31;
}

/* 1. Mention d'affiliation ------------------------------------------------ */

.mention-affiliation {
  max-width: 720px;
  margin: 12px auto 0;
  font-family: Lato, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: #585858;
  text-align: center;
}

.mention-affiliation a {
  color: inherit;
  text-decoration: underline;
}

/* Dans le haut des fiches, sur fond sombre */
.mention-affiliation.fiche {
  margin: 0 0 16px;
  text-align: left;
  color: rgba(255, 255, 255, .78);
}

/* Pied de page : trois liens légaux au lieu de deux, retour à la ligne sur mobile */
@media screen and (max-width: 479px) {
  .div-block-83 {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}

/* Texte lu par les lecteurs d'écran et les moteurs, invisible à l'écran */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Index de tous les articles (/blog) */
.section-tous-articles {
  padding: 40px 0 72px;
}

.tous-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px 48px;
  width: 100%;
}

.tous-articles-groupe .h3 {
  margin-bottom: 12px;
}

.tous-articles-liste {
  margin: 0;
  padding-left: 18px;
  font-family: Lato, sans-serif;
  font-size: 15px;
  line-height: 22px;
}

.tous-articles-liste li {
  margin-bottom: 10px;
}

.tous-articles-liste a {
  color: var(--mcp-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tous-articles-date {
  color: #767676;
  font-size: 13px;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .section-tous-articles {
    padding: 32px 15px 56px;
  }
}

/* 2. Intro des catégories du blog ----------------------------------------- */

.section-intro-blog {
  padding: 48px 0 72px;
}

.intro-categorie-blog {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

.intro-categorie-blog .paragraph-2 {
  font-size: 16px;
  line-height: 27px;
}

.intro-categorie-blog a,
.div-block-58 .paragraph-2 a,
.methode .paragraph-2 a {
  color: var(--mcp-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media screen and (max-width: 767px) {
  .section-intro-blog {
    padding: 32px 15px 64px;
  }
}

/* 3. Image de fond du hero : 287 Ko au lieu de 1,6 Mo ---------------------- */

@media screen and (min-width: 992px) {
  .section-head {
    background-image: url('../images/WOMAN_BGV2_HP-p-2000.png'), linear-gradient(#243642, #15242d);
  }
}

@media screen and (min-width: 992px) and (max-width: 1600px) {
  .section-head {
    background-image: url('../images/WOMAN_BGV2_HP-p-1600.png'), linear-gradient(#243642, #15242d);
  }
}

/* 4. Animations ------------------------------------------------------------ */

@keyframes mcp-in-right {
  from { opacity: .01; transform: translate3d(60px, 0, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes mcp-in-up {
  from { opacity: .01; transform: translate3d(0, 28px, 0); }
  to { opacity: 1; transform: none; }
}

/* Pas de fondu sur les visuels du hero : ils restent comptés dès le premier affichage (LCP). */
@keyframes mcp-float-in {
  from { transform: translate3d(0, 18px, 0) scale(.97); }
  to { transform: none; }
}

@keyframes mcp-wiggle {
  0% { transform: none; }
  30% { transform: rotate(-8deg) scale(1.08); }
  60% { transform: rotate(5deg) scale(1.05); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {

  /* 4.1 Hero : joué dès le premier affichage, sans attendre de script */
  .section-head .div-block-88,
  .section_header_offre .div-block-88,
  .header-blog .div-block-88 {
    animation: mcp-in-right .9s var(--mcp-ease-out) both;
  }

  .section-head .div-block-2 {
    animation: mcp-in-right .9s .12s var(--mcp-ease-out) both;
  }

  .section-head .div-block-300,
  .section_header_offre .div-block-300 {
    animation: mcp-in-up .8s .24s var(--mcp-ease-out) both;
  }

  .section-head .div-block-90,
  .header-blog .div-block-90 {
    animation: mcp-in-up .8s .34s var(--mcp-ease-out) both;
  }

  .section-head .div-block-89 img,
  .section_header_offre .div-block-89 img {
    animation: mcp-float-in 1.1s .1s var(--mcp-ease-out) both;
  }

  /* Sur mobile, glissé vertical : pas de débordement horizontal */
  @media screen and (max-width: 767px) {
    .section-head .div-block-88,
    .section_header_offre .div-block-88,
    .header-blog .div-block-88,
    .section-head .div-block-2 {
      animation-name: mcp-in-up;
    }
  }

  /* 4.2 Apparitions au scroll (classes posées par js/mcp-animations.js) */
  .mcp-anim .mcp-reveal {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition: opacity .8s var(--mcp-ease-out), transform .8s var(--mcp-ease-out);
    transition-delay: var(--mcp-delay, 0s);
  }

  .mcp-anim .mcp-reveal.mcp-right {
    transform: translate3d(60px, 0, 0);
  }

  .mcp-anim .mcp-reveal.mcp-down {
    transform: translate3d(0, -40px, 0);
  }

  .mcp-anim .mcp-reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* 4.3 Survols : uniquement avec une souris */
  @media (hover: hover) {
    .top-promo,
    .div-block-49,
    .bloc_offre,
    .offre_end,
    .article_item_landing,
    .article-item {
      transition: transform .25s var(--mcp-ease-out), box-shadow .25s var(--mcp-ease-out);
    }

    .top-promo:hover,
    .div-block-49:hover {
      transform: translate3d(0, -4px, 0);
      box-shadow: 0 18px 30px -12px rgba(21, 36, 45, .25);
    }

    .bloc_offre:hover,
    .offre_end:hover,
    .article_item_landing:hover,
    .article-item:hover {
      transform: translate3d(0, -4px, 0);
    }

    /* Le logo de marque se soulève, comme sur le site en ligne */
    .logo_top img {
      transition: transform .2s var(--mcp-ease-out);
    }

    .top-promo:hover .logo_top img {
      transform: translate3d(0, -8px, 0);
    }

    .div-block-49:hover .picto_avantage {
      animation: mcp-wiggle .5s var(--mcp-ease-out);
    }

    .cta,
    .cta-2,
    .cta_secondary,
    .cta_categorie {
      transition: background-color .2s, color .2s, transform .2s var(--mcp-ease-out), box-shadow .2s var(--mcp-ease-out);
    }

    .cta:hover,
    .cta-2:hover {
      transform: translate3d(0, -2px, 0);
      box-shadow: 0 10px 18px -8px rgba(255, 114, 94, .6);
    }

    .cta_secondary:hover,
    .cta_categorie:hover {
      transform: translate3d(0, -2px, 0);
    }

    .cta:active,
    .cta-2:active,
    .cta_secondary:active,
    .cta_categorie:active {
      transform: scale(.98);
    }
  }

  /* 4.4 Icône du sommaire : pivote à l'ouverture */
  .dropdown-toggle .icon-3 {
    transition: transform .6s var(--mcp-ease-out);
  }

  .dropdown-toggle.w--open .icon-3 {
    transform: rotate(180deg);
  }
}