/*
 * Refonte — page Solution digitale. Les forfaits reprennent les présentations de la page
 * « Particulier & Entreprise » (charte.css, .charte #pricing : tuiles à encoche, carrousel avec carte vedette).
 * Réorganisation propre à cette page : en-tête centré, cartes sur une ligne, avantages en dessous
 * (icône au-dessus du texte), et fond sombre pour le groupe vedette (couleur de l'ancienne version).
 */

.charte #pricing.aj-sd {
  padding: 96px 0;
  overflow-x: clip; /* le fond pleine largeur du groupe vedette ne crée pas de défilement horizontal */
}

/* ---------- En-tête centré : « Forfait » puis le nom ---------- */

.charte .aj-sd__entete {
  margin-bottom: var(--space-10);
  text-align: center;
}

.charte #pricing .aj-sd__entete .etiquette {
  justify-content: center;
  margin-bottom: var(--space-3);
  font-size: var(--texte-lg);
}

.charte #pricing .aj-sd__entete .section-title { text-align: center; }

/* ---------- Cartes : toutes sur une ligne (jusqu'à 4) ---------- */

.charte .tuiles.aj-sd__tuiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.charte .tuiles.aj-sd__tuiles--4 .tuile { padding-left: var(--space-6); padding-right: var(--space-6); }

/* ---------- Avantages : titre centré, points sur une ligne, icône au-dessus du texte ---------- */

.charte .aj-sd__avantages { margin-top: var(--space-16); }

.charte #pricing .aj-sd__avantages .section-sous-titre { text-align: center; }

.aj-sd__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.aj-sd__points--1 { grid-template-columns: minmax(0, 640px); justify-content: center; }
.aj-sd__points--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.aj-sd__points--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }

.aj-sd__points li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  font-size: var(--texte-base);
  line-height: 1.6;
  color: var(--texte);
}

.aj-sd__point-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-1);
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: var(--ombre-legere);
  color: var(--vert-action);
  font-size: 1.625rem;
  line-height: 1;
  transition: transform var(--transition), background-color var(--transition), color var(--transition);
}

/* « #pricing ul i » (style.css, customer.css) imposait 18 px, un décalage et une autre couleur */
.charte #pricing .aj-sd__point-icone .bi { padding: 0; font-size: 1.625rem; line-height: 1; color: inherit; }

.aj-sd__points li:hover .aj-sd__point-icone {
  transform: translateY(-3px);
  background: var(--vert-action);
  color: var(--blanc);
}

/* ---------- Groupe vedette (Adhésion service +) : fond sombre de l'ancienne version, pleine largeur ---------- */

.charte #pricing.aj-sd .groupe-vedette {
  z-index: 0; /* contexte d'empilement : le fond ::before reste derrière le contenu du groupe */
  margin-top: 96px;
  padding: 96px 0;
  border-top: 0;
}

.charte #pricing.aj-sd .groupe-vedette::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(25, 135, 84, 0.35) 0%, rgba(25, 135, 84, 0) 70%),
    var(--texte-fort);
}

/* Dernier groupe de la page : le fond sombre va jusqu'au pied de page */
.charte #pricing.aj-sd .groupe-vedette:last-child { margin-bottom: -96px; }

/* Titre et trait centrés, comme l'en-tête du groupe Hotline */
.charte #pricing.aj-sd .groupe-vedette .section-header { text-align: center; }
.charte #pricing.aj-sd .groupe-vedette .section-header .section-divider { margin: 0 auto; }

/* Titre en rouge comme les autres titres de section (le blanc de charte.css était prévu pour la photo de bannière) */
/* Taille : la même que le titre du groupe Hotline et que « Adhésion service + » de Particulier & Entreprise (charte.css, .groupe-tuiles .section-title) */
.charte #pricing.aj-sd .groupe-vedette .section-header .section-title {
  font-size: 2.5rem; /* 40px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: red !important;
  text-align: center;
}

/* Textes lisibles sur le fond sombre */
.charte #pricing.aj-sd .groupe-vedette .aj-sd__avantages .section-sous-titre { color: var(--blanc); }
.charte #pricing.aj-sd .groupe-vedette .aj-sd__points li { color: rgba(255, 255, 255, 0.85); }
.charte #pricing.aj-sd .groupe-vedette .aj-sd__point-icone { background: rgba(255, 255, 255, 0.1); box-shadow: none; color: var(--vert-clair); }
.charte #pricing.aj-sd .groupe-vedette .aj-sd__points li:hover .aj-sd__point-icone { background: var(--vert-action); color: var(--blanc); }
.charte #pricing.aj-sd .groupe-vedette .carrousel-pagination .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.5); }
.charte #pricing.aj-sd .groupe-vedette .carrousel-pagination .swiper-pagination-bullet-active { background: var(--blanc); }

/* ---------- Tablette et mobile ---------- */

@media (max-width: 1199.98px) {
  .charte .tuiles.aj-sd__tuiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aj-sd__points--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .charte #pricing.aj-sd { padding: 72px 0; }
  .charte #pricing.aj-sd .groupe-vedette { margin-top: 72px; padding: 72px 0; }
  .charte #pricing.aj-sd .groupe-vedette:last-child { margin-bottom: -72px; }
  .charte .aj-sd__avantages { margin-top: var(--space-12); }
}

@media (max-width: 767px) {
  .charte #pricing.aj-sd { padding: 56px 0; }
  .charte #pricing.aj-sd .groupe-vedette { margin-top: 56px; padding: 56px 0; }
  .charte #pricing.aj-sd .groupe-vedette:last-child { margin-bottom: -56px; }
  .charte #pricing.aj-sd .groupe-vedette .section-header .section-title { font-size: 1.75rem; /* 28px, comme .groupe-tuiles */ }
  .charte .tuiles.aj-sd__tuiles--4,
  .aj-sd__points,
  .aj-sd__points--2,
  .aj-sd__points--4 { grid-template-columns: minmax(0, 1fr); }
  .aj-sd__points { gap: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .aj-sd__point-icone { transition: none; }
  .aj-sd__points li:hover .aj-sd__point-icone { transform: none; }
}