/* Page institutionnelle — Pourquoi / Sécurité du site */

.pourquoi-page .site-main {
  padding-bottom: 1.5rem;
}

/* Même colonne lecture pour hero, sections et CTA (alignée articles KC) */
.pourquoi-page .site-main .container {
  width: min(100% - 2rem, 52rem) !important;
  max-width: 52rem;
  margin-inline: auto;
  box-sizing: border-box;
}

.pourquoi-page {
  --fa-display: inline-block;
}

.pourquoi-page .site-main > .pourquoi-hero,
.pourquoi-page .site-main > .pourquoi-band,
.pourquoi-page .site-main > .pourquoi-cta {
  padding-block: clamp(1.15rem, 2.5vw, 1.75rem);
}

.pourquoi-page .site-main > .pourquoi-hero {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(1.15rem, 2.5vw, 1.6rem);
  background:
    radial-gradient(ellipse 70% 55% at 85% 5%, rgb(30 64 175 / 10%), transparent 55%),
    linear-gradient(180deg, #f1f5f9 0%, #ffffff 72%);
}

.pourquoi-hero h1 {
  margin: 0.5rem 0 0.65rem;
  font-size: clamp(1.65rem, 3.2vw, 2.35rem);
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--color-navy);
  max-width: none;
  text-wrap: pretty;
  white-space: normal;
}

.pourquoi-hero-lead {
  margin: 0;
  font-size: clamp(1.05rem, 1.8vw, 1.15rem);
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: none;
}

.pourquoi-band--alt {
  background: var(--color-bg-alt);
}

/* Titres + pictogrammes côte à côte, avec espace (pas de texte sous l’icône) */
.pourquoi-band h2,
.pourquoi-cta h2 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0;
  margin: 0 0 0.55rem;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  text-wrap: pretty;
  white-space: normal;
  scroll-margin-top: 5.5rem;
}

.pourquoi-band h2 .pourquoi-h2-text,
.pourquoi-cta h2 .pourquoi-h2-text {
  flex: 1 1 auto;
  min-width: 0;
  display: inline;
}

.pourquoi-page .pourquoi-h2-fa,
.pourquoi-page .pourquoi-li-fa {
  display: inline-block !important;
  flex: 0 0 auto;
  width: 1.35rem;
  margin: 0.15rem 1.1rem 0 0;
  padding: 0;
  color: var(--color-accent);
  font-size: 1.15rem;
  line-height: 1.3;
  text-align: center;
  vertical-align: top;
}

.pourquoi-page .pourquoi-h2-fa::before,
.pourquoi-page .pourquoi-li-fa::before {
  display: inline-block;
  line-height: 1;
}

.pourquoi-band p {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: none;
}

.pourquoi-band p:last-child {
  margin-bottom: 0;
}

/* Listes : icône + texte sur la même ligne */
.pourquoi-list {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.pourquoi-list li {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 0.8rem 0.95rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 0.65rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.pourquoi-list li::marker {
  content: none;
}

.pourquoi-band--alt .pourquoi-list li {
  background: #fff;
}

.pourquoi-band:not(.pourquoi-band--alt) .pourquoi-list li {
  background: var(--color-bg-alt);
}

.pourquoi-list li > .pourquoi-li-fa {
  margin-top: 0.15rem;
}

/* span (pas div) : reste en ligne même hors flex */
.pourquoi-list li > .pourquoi-list-text {
  flex: 1 1 auto;
  min-width: 0;
  display: inline;
}

.pourquoi-list strong {
  color: var(--color-navy);
  font-weight: 600;
}

.pourquoi-quote {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  align-items: flex-start;
  margin: 0.85rem 0 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--color-accent);
  background: rgb(30 64 175 / 4%);
  border-radius: 0 0.5rem 0.5rem 0;
  font-style: italic;
  color: var(--color-navy);
  line-height: 1.55;
}

.pourquoi-quote .pourquoi-li-fa {
  margin-top: 0.2rem;
  font-style: normal;
}

.pourquoi-quote > span {
  flex: 1 1 auto;
  min-width: 0;
}

.pourquoi-limits {
  margin: 0.65rem 0 0.75rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--color-accent);
  background: #fff;
  border-radius: 0 0.5rem 0.5rem 0;
}

.pourquoi-band:not(.pourquoi-band--alt) .pourquoi-limits {
  background: var(--color-bg-alt);
}

.pourquoi-limits p {
  margin: 0;
}

/* CTA — priorité absolue sur section:nth-of-type(even) (fond clair = texte invisible) */
.pourquoi-page .site-main > section.pourquoi-cta,
.pourquoi-page .site-main > section.pourquoi-cta:nth-of-type(even),
.pourquoi-page .site-main > section.pourquoi-cta:nth-of-type(odd) {
  background: #0f172a !important;
  background-image: none !important;
  color: #f1f5f9 !important;
}

.pourquoi-page .site-main > section.pourquoi-cta h2,
.pourquoi-page .site-main > section.pourquoi-cta h2 .pourquoi-h2-text,
.pourquoi-page .site-main > section.pourquoi-cta p,
.pourquoi-page .site-main > section.pourquoi-cta .pourquoi-h2-fa {
  color: #f8fafc !important;
}

.pourquoi-page .site-main > section.pourquoi-cta .pourquoi-h2-fa {
  color: #93c5fd !important;
}

.pourquoi-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.pourquoi-cta-actions .btn-contact-primary,
.pourquoi-cta-actions .btn-contact-secondary {
  width: auto;
  margin: 0;
  padding: 0.7rem 1.15rem;
}

.pourquoi-cta-actions .btn-contact-secondary {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--color-navy) !important;
}

.pourquoi-cta-actions .btn-contact-secondary:hover {
  background: #e2e8f0 !important;
  color: var(--color-navy) !important;
}

@media (max-width: 600px) {
  .pourquoi-cta-actions {
    flex-direction: column;
  }

  .pourquoi-cta-actions .btn-contact-primary,
  .pourquoi-cta-actions .btn-contact-secondary {
    width: 100%;
  }
}