/*
 * IA & Marketing Editorial Blocks
 * Maillage interne et CTA.
 *
 * Compatible avec Jannah en mode sombre.
 * Le thème applique une justification globale sur les paragraphes :
 * les CTA forcent donc explicitement un alignement centré.
 */

.iam-further-reading,
.iam-further-reading *,
.iam-cta-wrap,
.iam-cta-wrap * {
  box-sizing: border-box;
}

/*
 * Bloc de maillage interne.
 */
.iam-further-reading {
  margin: 2rem 0;
  padding: 1.5rem;
  border: 1px solid #3a4049;
  border-radius: 14px;
  background: #25282e;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
}

.iam-further-reading,
.iam-further-reading h1,
.iam-further-reading h2,
.iam-further-reading h3,
.iam-further-reading h4,
.iam-further-reading p,
.iam-further-reading li,
.iam-further-reading strong,
.iam-further-reading span,
.iam-further-reading a {
  color: #f5f7fa !important;
}

.iam-further-reading__header {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.iam-further-reading__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 10px;
  background: rgba(169, 214, 255, 0.14);
  color: #a9d6ff !important;
  font-size: 1.08rem;
}

.iam-further-reading__icon i {
  color: inherit !important;
}

.iam-further-reading__eyebrow {
  margin: 0 0 0.55rem;
  color: #a9d6ff !important;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.iam-further-reading__title {
  margin: 0;
  color: #f5f7fa !important;
  font-size: 1.3rem;
  line-height: 1.3;
}

.iam-further-reading__intro {
  margin: 1rem 0 0;
  color: #c9d1d9 !important;
  line-height: 1.6;
}

.iam-further-reading__content {
  margin-top: 1rem;
}

.iam-further-reading__content > :first-child {
  margin-top: 0;
}

.iam-further-reading__content > :last-child {
  margin-bottom: 0;
}

.iam-further-reading__content ul,
.iam-further-reading__content ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.iam-further-reading__content li {
  position: relative;
  margin: 0;
  padding: 0.8rem 0 0.8rem 1.55rem;
  border-top: 1px solid rgba(245, 247, 250, 0.12);
  color: #c9d1d9 !important;
  line-height: 1.6;
}

.iam-further-reading__content li::before {
  position: absolute;
  top: 0.9rem;
  left: 0;
  color: #a9d6ff;
  content: "→";
  font-weight: 800;
}

.iam-further-reading__content li:first-child {
  padding-top: 0;
  border-top: 0;
}

.iam-further-reading__content li:first-child::before {
  top: 0.1rem;
}

.iam-further-reading__content li:last-child {
  padding-bottom: 0;
}

.iam-further-reading__content a,
.iam-further-reading__content a:link,
.iam-further-reading__content a:visited,
.iam-further-reading__content a:hover,
.iam-further-reading__content a:focus,
.iam-further-reading__content a:focus-visible,
.iam-further-reading__content a:active {
  color: #a9d6ff !important;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/*
 * Conteneur CTA.
 *
 * Jannah applique parfois text-align:justify !important à tous les <p>.
 * Le CTA est entouré d'une balise <p>, il faut donc surcharger cette règle.
 */
p.iam-cta-wrap,
.iam-cta-wrap {
  display: block;
  margin: 2rem 0 !important;
  padding: 0 !important;
  text-align: center !important;
  text-align-last: center !important;
  line-height: 1 !important;
}

/*
 * CTA.
 *
 * Les règles couvrent tous les états du lien et ses enfants.
 * Elles empêchent les décorations et effets de lien hérités de Jannah.
 */
p.iam-cta-wrap a.iam-cta,
p.iam-cta-wrap a.iam-cta:link,
p.iam-cta-wrap a.iam-cta:visited,
p.iam-cta-wrap a.iam-cta:hover,
p.iam-cta-wrap a.iam-cta:focus,
p.iam-cta-wrap a.iam-cta:focus-visible,
p.iam-cta-wrap a.iam-cta:active,
p.iam-cta-wrap a.iam-cta *,
p.iam-cta-wrap a.iam-cta:hover *,
p.iam-cta-wrap a.iam-cta:focus *,
p.iam-cta-wrap a.iam-cta:focus-visible *,
p.iam-cta-wrap a.iam-cta:active * {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: 0 !important;
  text-decoration-skip-ink: none !important;
  -webkit-text-decoration: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}

p.iam-cta-wrap a.iam-cta::before,
p.iam-cta-wrap a.iam-cta::after,
p.iam-cta-wrap a.iam-cta:hover::before,
p.iam-cta-wrap a.iam-cta:hover::after,
p.iam-cta-wrap a.iam-cta .iam-cta__label::before,
p.iam-cta-wrap a.iam-cta .iam-cta__label::after,
p.iam-cta-wrap a.iam-cta:hover .iam-cta__label::before,
p.iam-cta-wrap a.iam-cta:hover .iam-cta__label::after {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  transform: none !important;
  transition: none !important;
}

p.iam-cta-wrap a.iam-cta,
p.iam-cta-wrap a.iam-cta:link,
p.iam-cta-wrap a.iam-cta:visited,
p.iam-cta-wrap a.iam-cta:hover,
p.iam-cta-wrap a.iam-cta:focus,
p.iam-cta-wrap a.iam-cta:focus-visible,
p.iam-cta-wrap a.iam-cta:active {
  display: inline-flex;
  min-width: 220px;
  min-height: 48px;
  gap: 0.65rem;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center !important;
  text-align-last: center !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  white-space: normal !important;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

p.iam-cta-wrap a.iam-cta:hover,
p.iam-cta-wrap a.iam-cta:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

p.iam-cta-wrap a.iam-cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(169, 214, 255, 0.42);
}

p.iam-cta-wrap a.iam-cta .iam-cta__label,
p.iam-cta-wrap a.iam-cta .iam-cta__icon,
p.iam-cta-wrap a.iam-cta .iam-cta__icon i {
  display: inline-block;
  color: inherit !important;
  line-height: inherit !important;
  text-align: center !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  white-space: normal !important;
}

/*
 * Variante principale.
 */
p.iam-cta-wrap a.iam-cta--primary,
p.iam-cta-wrap a.iam-cta--primary:link,
p.iam-cta-wrap a.iam-cta--primary:visited {
  border-color: #2878b9;
  background: #2878b9;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(40, 120, 185, 0.26);
}

p.iam-cta-wrap a.iam-cta--primary:hover,
p.iam-cta-wrap a.iam-cta--primary:focus,
p.iam-cta-wrap a.iam-cta--primary:focus-visible,
p.iam-cta-wrap a.iam-cta--primary:active {
  border-color: #1f6398;
  background: #1f6398;
  color: #ffffff !important;
}

/*
 * Variante secondaire.
 */
p.iam-cta-wrap a.iam-cta--secondary,
p.iam-cta-wrap a.iam-cta--secondary:link,
p.iam-cta-wrap a.iam-cta--secondary:visited {
  border-color: #498a4b;
  background: #498a4b;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(73, 138, 75, 0.24);
}

p.iam-cta-wrap a.iam-cta--secondary:hover,
p.iam-cta-wrap a.iam-cta--secondary:focus,
p.iam-cta-wrap a.iam-cta--secondary:focus-visible,
p.iam-cta-wrap a.iam-cta--secondary:active {
  border-color: #376b39;
  background: #376b39;
  color: #ffffff !important;
}

/*
 * Variante contour.
 */
p.iam-cta-wrap a.iam-cta--outline,
p.iam-cta-wrap a.iam-cta--outline:link,
p.iam-cta-wrap a.iam-cta--outline:visited {
  border-color: #a9d6ff;
  background: transparent;
  color: #a9d6ff !important;
}

p.iam-cta-wrap a.iam-cta--outline:hover,
p.iam-cta-wrap a.iam-cta--outline:focus,
p.iam-cta-wrap a.iam-cta--outline:focus-visible,
p.iam-cta-wrap a.iam-cta--outline:active {
  border-color: #f5f7fa;
  background: rgba(169, 214, 255, 0.12);
  color: #ffffff !important;
}

/*
 * Responsive.
 */
@media (max-width: 640px) {
  .iam-further-reading {
    margin: 1.5rem 0;
    padding: 1.125rem;
  }

  .iam-further-reading__title {
    font-size: 1.2rem;
  }

  p.iam-cta-wrap,
  .iam-cta-wrap {
    margin: 1.5rem 0 !important;
  }

  p.iam-cta-wrap a.iam-cta,
  p.iam-cta-wrap a.iam-cta:link,
  p.iam-cta-wrap a.iam-cta:visited,
  p.iam-cta-wrap a.iam-cta:hover,
  p.iam-cta-wrap a.iam-cta:focus,
  p.iam-cta-wrap a.iam-cta:focus-visible,
  p.iam-cta-wrap a.iam-cta:active {
    width: 100%;
    min-width: 0;
  }
}

/*
 * Accessibilité : réduction des animations.
 */
@media (prefers-reduced-motion: reduce) {
  p.iam-cta-wrap a.iam-cta,
  p.iam-cta-wrap a.iam-cta:link,
  p.iam-cta-wrap a.iam-cta:visited,
  p.iam-cta-wrap a.iam-cta:hover,
  p.iam-cta-wrap a.iam-cta:focus,
  p.iam-cta-wrap a.iam-cta:focus-visible,
  p.iam-cta-wrap a.iam-cta:active {
    transition: none;
  }
}