/**
 * Libre Permis — Pages Permis accéléré (toutes destinations)
 * Design : hero, avantages, formules, CTA
 */

/* ----- Hero : fond dégradé bleu/vert ----- */
.hero--paris,
.hero--accelere {
  position: relative;
  min-height: 44vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__paris-bg,
.hero__accelere-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    152deg,
    #14080a 0%,
    #3f0f14 22%,
    #7c2d12 46%,
    #b45309 72%,
    #c2410c 100%
  );
  z-index: 0;
}

.hero__paris-bg::after,
.hero__accelere-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(197, 162, 103, 0.26) 0%, transparent 36%),
    radial-gradient(ellipse at 100% 40%, rgba(251, 191, 36, 0.12) 0%, transparent 46%),
    radial-gradient(ellipse at 0% 95%, rgba(255, 237, 213, 0.08) 0%, transparent 42%);
  pointer-events: none;
}

.hero--paris .hero__content,
.hero--accelere .hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--space-8) var(--container-padding);
}

.hero__content--center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__badge {
  display: inline-block;
  padding: 0.35rem 1rem;
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 2rem;
  margin-bottom: var(--space-3);
  backdrop-filter: blur(4px);
}

.hero__title--dark {
  color: var(--color-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.hero__lead--dark {
  color: rgba(255, 255, 255, 0.92);
  max-width: 42ch;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

@media (min-width: 48rem) {
  .hero--paris,
  .hero--accelere {
    min-height: 40vh;
  }

  .hero__title--dark {
    font-size: var(--font-size-display);
  }
}

/* ----- Avantages ----- */
.paris-avantages,
.accelere-avantages {
  padding: var(--space-8) 0;
}

.paris-avantages__title,
.accelere-avantages__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  text-align: center;
  margin: 0 0 var(--space-6);
  max-width: 36ch;
  margin-inline: auto;
}

.paris-avantages__grid,
.accelere-avantages__grid {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: stretch;
  justify-items: stretch;
}

@media (min-width: 48rem) {
  .paris-avantages__grid,
  .accelere-avantages__grid {
    grid-template-columns: repeat(2, minmax(14rem, 1fr));
    max-width: 44rem;
    margin-inline: auto;
  }
}

@media (min-width: 64rem) {
  .paris-avantages__grid,
  .accelere-avantages__grid {
    grid-template-columns: repeat(4, minmax(14rem, 1fr));
    max-width: 68rem;
    margin-inline: auto;
  }
}

.paris-avantage,
.accelere-avantage {
  background: var(--color-white);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--card-radius);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 12rem;
  height: auto;
  overflow: visible;
  gap: var(--space-2);
}

.paris-avantage:hover,
.accelere-avantage:hover {
  border-color: var(--color-blue-light);
  box-shadow: 0 4px 16px rgba(13, 71, 161, 0.08);
}

.paris-avantage__icon,
.accelere-avantage__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--color-blue-light);
  color: var(--color-blue);
  border-radius: 11px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.paris-avantage__icon svg,
.accelere-avantage__icon svg {
  flex-shrink: 0;
}

.paris-avantage__title,
.accelere-avantage__title {
  font-size: 1.0625rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
  line-height: 1.25;
}

.paris-avantage__text,
.accelere-avantage__text {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  margin: 0;
  line-height: 1.42;
  flex-grow: 0;
  max-width: 100%;
  width: 100%;
}

/* ----- Formules : centrées ----- */
.page--permis-accelere .formule-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.page--permis-accelere .formule-section__header {
  margin-bottom: var(--space-3);
}

.page--permis-accelere .formule-section__lead {
  margin-inline: auto;
  margin-bottom: var(--space-6);
  max-width: 48ch;
}

.page--permis-accelere .price-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.25rem, 1fr));
  justify-content: center;
  gap: var(--space-3);
  /* Espace sous les cartes géré par .tarifs-global-note (évite trou trop grand / bouton collé) */
  margin-bottom: 0;
  max-width: 34rem;
  margin-inline: auto;
}

.page--permis-accelere .price-card {
  width: 100%;
  max-width: none;
  padding: 0.55rem 0.65rem;
  gap: 0.65rem;
  overflow: visible;
}

.page--permis-accelere .price-card__meta {
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  line-height: 1.4;
}

.page--permis-accelere .price-card__label {
  font-size: 1.0625rem;
  line-height: 1.28;
}

.page--permis-accelere .price-card__price {
  font-size: clamp(1.28rem, 3vw, 1.58rem);
  margin-block: 0.12rem;
}

.page--permis-accelere .price-card__info {
  font-size: 0.8125rem;
  line-height: 1.45;
}

.page--permis-accelere .formule-section .btn {
  margin-top: 0;
}

/* ----- Formules : en-tête avec icône ----- */
.formule-section__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.formule-section__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: var(--color-blue-light);
  color: var(--color-blue);
  border-radius: 12px;
  flex-shrink: 0;
}

.formule-section__icon--green {
  background: var(--color-green-light);
  color: var(--color-green);
}

.formule-section__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* ----- Section auto : touche de couleur ----- */
.permis-section--auto .formule-section__title {
  color: var(--color-blue);
}

.permis-section--manuelle .formule-section__title {
  color: var(--color-green);
}

/* ----- CTA final ----- */
.cta-final--paris,
.cta-final--accelere {
  background: linear-gradient(135deg, #0071bc 0%, #0f5590 40%, #1d8fd6 100%);
}

.cta-final__btn {
  min-width: 12rem;
}

/* ----- Hero permis accéléré « premium » (page principale) — chaleur / dynamisme : bordeaux → brique → ambre (hors bleus des autres hubs) ; typo : main.css hub ----- */
.hero--accelere-premium {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__accelere-premium-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    152deg,
    #14080a 0%,
    #3f0f14 22%,
    #7c2d12 46%,
    #b45309 72%,
    #c2410c 100%
  );
  z-index: 0;
}

.hero__accelere-premium-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(197, 162, 103, 0.26) 0%, transparent 36%),
    radial-gradient(ellipse at 100% 40%, rgba(251, 191, 36, 0.12) 0%, transparent 46%),
    radial-gradient(ellipse at 0% 95%, rgba(255, 237, 213, 0.08) 0%, transparent 42%);
  pointer-events: none;
}

.hero--accelere-premium .hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* ----- Étapes parcours accéléré ----- */
.accelere-etapes {
  padding: var(--space-8) 0;
  background: var(--color-cream);
}

.accelere-etapes__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin: 0 0 var(--space-6);
  color: var(--color-gray-900);
}

.accelere-etapes__grid {
  display: grid;
  gap: var(--space-4);
  max-width: 32rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  align-items: stretch;
  justify-items: stretch;
}

@media (min-width: 48rem) {
  .accelere-etapes__grid {
    max-width: 44rem;
    grid-template-columns: repeat(2, minmax(14rem, 1fr));
  }
}

@media (min-width: 64rem) {
  .accelere-etapes__grid {
    max-width: 68rem;
    grid-template-columns: repeat(4, minmax(14rem, 1fr));
  }
}

.accelere-etape {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3);
  background: var(--color-white);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  box-sizing: border-box;
  width: 100%;
  min-height: 13rem;
  height: auto;
  overflow: visible;
}

.accelere-etape__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  background: var(--color-blue-light);
  color: var(--color-blue);
  border-radius: 11px;
}

.accelere-etape__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.accelere-etape__title {
  font-size: 1.0625rem;
  font-weight: var(--font-weight-semibold);
  margin: 0;
  color: var(--color-gray-900);
  line-height: 1.25;
}

.accelere-etape__text {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  line-height: 1.42;
  flex-grow: 0;
  max-width: 100%;
  width: 100%;
}

.accelere-etape > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  width: 100%;
}

.accelere-etape__text strong {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
}