/* =============================================================================
   AutoÉcole Pro — Boutique Responsive
   Design: jeconduis.fr — Navy #0B1340 + Gold #F5C518 + Nunito/Bebas Neue
   ============================================================================= */

/* ── Variables globales ─────────────────────────────────────────────────── */
:root {
  --aep-navy:       #0B1340;
  --aep-navy-light: #1a2660;
  --aep-navy-dark:  #060c28;
  --aep-gold:       #F5C518;
  --aep-gold-dark:  #d4a910;
  --aep-gold-light: rgba(245, 197, 24, 0.12);
  --aep-white:      #ffffff;
  --aep-gray-100:   #f8f9fa;
  --aep-gray-200:   #e9ecef;
  --aep-gray-400:   #ced4da;
  --aep-gray-600:   #6c757d;
  --aep-gray-800:   #343a40;
  --aep-success:    #10b981;
  --aep-error:      #ef4444;
  --aep-warning:    #F5C518;
  --aep-radius:     14px;
  --aep-radius-sm:  8px;
  --aep-shadow:     0 4px 24px rgba(11, 19, 64, 0.10);
  --aep-shadow-lg:  0 8px 48px rgba(11, 19, 64, 0.18);
  --aep-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --aep-font:       'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --aep-font-title: 'Oswald', 'Arial Narrow', 'Segoe UI', sans-serif;
}

/* ── Reset ciblé ────────────────────────────────────────────────────────── */
.aep-boutique *,
.aep-checkout-wrap *,
.aep-modal * {
  box-sizing: border-box;
}

/* =============================================================================
   SECTION HERO BOUTIQUE
   ============================================================================= */
.aep-boutique {
  font-family: var(--aep-font);
  color: var(--aep-navy);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 60px;
}

.aep-boutique__hero {
  background: linear-gradient(135deg, var(--aep-navy) 0%, var(--aep-navy-light) 100%);
  border-radius: var(--aep-radius);
  padding: 52px 40px;
  text-align: center;
  margin-bottom: 48px;
  position: relative;
  overflow: hidden;
}

.aep-boutique__hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 280px; height: 280px;
  background: rgba(245, 197, 24, 0.06);
  border-radius: 50%;
}

.aep-boutique__hero-badge {
  display: inline-block;
  background: var(--aep-gold-light);
  border: 1px solid rgba(245, 197, 24, 0.3);
  color: var(--aep-gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.aep-boutique__hero h2 {
  font-family: var(--aep-font-title);
  font-size: clamp(28px, 5vw, 46px);
  color: var(--aep-white);
  margin: 0 0 14px;
  letter-spacing: 1px;
  line-height: 1.1;
}

.aep-boutique__hero p {
  color: rgba(255,255,255,0.75);
  font-size: 17px;
  margin: 0 auto 28px;
  max-width: 600px;
  line-height: 1.6;
}

/* Avantages en ligne */
.aep-boutique__perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.aep-boutique__perks li {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.aep-boutique__perks li::before {
  content: '✔';
  color: var(--aep-gold);
  font-weight: 700;
}

/* ── Filtres par type ────────────────────────────────────────────────────── */
.aep-boutique__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 36px;
}

.aep-filter-btn {
  font-family: var(--aep-font);
  font-size: 14px;
  font-weight: 700;
  padding: 9px 22px;
  border-radius: 100px;
  border: 2px solid var(--aep-gray-200);
  background: var(--aep-white);
  color: var(--aep-gray-600);
  cursor: pointer;
  transition: var(--aep-transition);
}

.aep-filter-btn:hover,
.aep-filter-btn.active {
  background: var(--aep-navy);
  border-color: var(--aep-navy);
  color: var(--aep-white);
}

.aep-filter-btn.active {
  box-shadow: 0 4px 12px rgba(11,19,64,0.25);
}

/* =============================================================================
   SECTION TITRE TYPE DE PERMIS
   ============================================================================= */
.aep-pack-section {
  margin-bottom: 52px;
}

.aep-pack-section__title {
  font-family: var(--aep-font-title);
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--aep-navy);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--aep-gold);
}

.aep-pack-section__title span.icon {
  font-size: 28px;
}

/* =============================================================================
   GRID DE CARTES
   ============================================================================= */
.aep-boutique-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
  align-items: stretch; /* toutes les cartes d'une rangée ont la même hauteur */
  padding-top: 16px;    /* espace pour le badge « Populaire » qui chevauche le bord haut */
}

/* =============================================================================
   CARTE PACK
   ============================================================================= */
.aep-pack-card {
  background: var(--aep-white);
  border-radius: var(--aep-radius);
  box-shadow: var(--aep-shadow);
  border: 2px solid transparent;
  position: relative;
  transition: var(--aep-transition);
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.aep-pack-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--aep-shadow-lg);
  border-color: var(--aep-gold);
}

.aep-pack-card--featured {
  border-color: var(--aep-gold);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.2), var(--aep-shadow-lg);
}

/* ── Badge ────────────────────────────────────────────────────────────────── */
.aep-pack-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%); /* centré pile sur la bordure haute de la carte */
  background: var(--aep-gold);
  color: var(--aep-navy);
  font-family: var(--aep-font);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 16px;
  border-radius: 100px;
  white-space: nowrap;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(245, 197, 24, 0.45);
}

/* ── Header de la carte ────────────────────────────────────────────────────── */
.aep-pack-card__header {
  background: #ffffff;
  border-bottom: 1px solid #eef1f6;
  border-radius: calc(var(--aep-radius) - 2px) calc(var(--aep-radius) - 2px) 0 0;
  padding: 12px 12px 0;
  color: var(--aep-navy);
  box-sizing: border-box;
  /* Hauteur verrouillee : toutes les cartes s'alignent, quel que soit le
     nombre de lignes du titre ou de la description. */
  height: var(--aep-card-head-h, 220px);
  min-height: var(--aep-card-head-h, 220px);
  max-height: var(--aep-card-head-h, 220px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Le titre ne depasse jamais 2 lignes : sans cela une carte au nom long
   ferait deborder le bloc et casserait l'alignement. */
.aep-pack-card__header .aep-pack-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Surcharge haute priorite : le theme force ses styles via #page-container,
   on garantit le fond blanc et la hauteur partout ou le shortcode est pose. */
#page-container .aep-boutique .aep-pack-card__header,
body .aep-boutique .aep-pack-card__header {
  background: #ffffff !important;
  height: var(--aep-card-head-h, 220px) !important;
  min-height: var(--aep-card-head-h, 220px) !important;
  max-height: var(--aep-card-head-h, 220px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* ── Encart gris du haut de carte ──────────────────────────────────────────
   Le fond gris est detache de la bordure de la carte par la marge blanche du
   header. Angles arrondis en haut pour suivre la carte, carres en bas pour
   rejoindre le trait de separation. Meme famille visuelle que les badges
   "Boite automatique" / "12 mois" du corps de la carte. */
.aep-pack-card__headbox {
  background: #f4f6fa;
  border: 1px solid #e9edf5;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 20px 18px 16px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#page-container .aep-boutique .aep-pack-card__headbox,
body .aep-boutique .aep-pack-card__headbox {
  background: #f4f6fa !important;
  border-radius: 10px 10px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* ── Bouton d'achat : desormais un lien vers la page de paiement ─────────── */
#page-container .aep-boutique a.aep-btn-cta,
body .aep-boutique a.aep-btn-cta {
  display: inline-flex !important;
  width: 100% !important;
  color: var(--aep-navy) !important;
  text-decoration: none !important;
  box-sizing: border-box;
}
.aep-btn-cta.aep-btn-cta--disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.aep-btn-cta.loading { opacity: 0.7; pointer-events: none; }

.aep-pack-card__type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #7a5f14;
  margin-bottom: 6px;
}

.aep-pack-card__title {
  font-family: var(--aep-font-title);
  font-size: 23px;
  font-weight: 500;            /* Oswald 500 : lisible, pas trop gras */
  letter-spacing: 0.4px;       /* aère les lettres */
  color: var(--aep-navy);
  margin: 0 0 8px;
  line-height: 1.3;
}

.aep-pack-card__description {
  font-family: var(--aep-font);
  font-size: 13.5px;
  color: #4b5563;
  line-height: 1.55;
  margin: 0;
  /* hauteur uniforme entre les cartes (max 3 lignes) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.55em * 2);
}

/* ── Corps de la carte ──────────────────────────────────────────────────── */
.aep-pack-card__body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 18px;
}

/* ── Sélecteur d'heures ─────────────────────────────────────────────────── */
.aep-hours-selector {
  background: var(--aep-gray-100);
  border-radius: var(--aep-radius-sm);
  padding: 16px;
}

.aep-hours-selector__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--aep-gray-600);
  margin-bottom: 12px;
}

.aep-hours-selector__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aep-hour-btn {
  font-family: var(--aep-font);
  position: relative;
  flex: 1;
  min-width: 56px;
  padding: 10px 8px;
  border-radius: var(--aep-radius-sm);
  border: 2px solid var(--aep-gray-200);
  background: var(--aep-white);
  color: var(--aep-navy);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--aep-transition);
  text-align: center;
  line-height: 1.2;
}

.aep-hour-btn:hover {
  border-color: var(--aep-navy);
  background: var(--aep-navy);
  color: var(--aep-white);
}

.aep-hour-btn.selected {
  border-color: var(--aep-gold);
  background: var(--aep-gold);
  color: var(--aep-navy);
  box-shadow: 0 4px 12px rgba(245, 197, 24, 0.35);
}

.aep-hour-btn .aep-hour-btn__hours {
  display: block;
  font-size: 17px;
  font-weight: 900;
}

.aep-hour-btn .aep-hour-btn__label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.75;
  margin-top: 2px;
}

/* ── Affichage prix dynamique ────────────────────────────────────────────── */
.aep-pack-card__pricing {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 0;
  border-top: 1px solid var(--aep-gray-200);
}

.aep-pack-card__price-block {}

.aep-pack-card__price-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--aep-gray-600);
  margin-bottom: 3px;
}

.aep-pack-card__price-value {
  font-family: var(--aep-font-title);
  font-size: 38px;
  font-weight: 600;
  color: var(--aep-navy);
  letter-spacing: 0.3px;
  line-height: 1;
  transition: var(--aep-transition);
}

.aep-pack-card__price-value.updating {
  opacity: 0.4;
  transform: scale(0.96);
}

.aep-pack-card__price-sub {
  font-size: 12px;
  color: var(--aep-gray-600);
  margin-top: 4px;
}

.aep-pack-card__price-sub span.unit {
  font-weight: 700;
  color: var(--aep-navy);
}

/* ── Bouton CTA ─────────────────────────────────────────────────────────── */
.aep-btn-cta {
  font-family: var(--aep-font);
  width: 100%;
  padding: 14px 20px;
  background: var(--aep-gold);
  color: var(--aep-navy);
  font-size: 15px;
  font-weight: 800;
  border: none;
  border-radius: var(--aep-radius-sm);
  cursor: pointer;
  transition: var(--aep-transition);
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 14px rgba(245, 197, 24, 0.3);
}

/* Chevron ">" à droite du bouton (dessiné en CSS, hérite de la couleur du texte) */
.aep-btn-cta::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-left: 2px;
}

.aep-btn-cta:hover {
  background: var(--aep-gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 197, 24, 0.45);
  color: var(--aep-navy);
  text-decoration: none;
}

.aep-btn-cta:active {
  transform: translateY(0);
}

.aep-btn-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Infos badges bas de carte ───────────────────────────────────────────── */
.aep-pack-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aep-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--aep-gray-600);
  background: var(--aep-gray-100);
  border-radius: 100px;
  padding: 4px 12px;
}

/* =============================================================================
   VIDE / LOADING
   ============================================================================= */
.aep-empty-store {
  text-align: center;
  padding: 60px 20px;
  color: var(--aep-gray-600);
  font-size: 17px;
  background: var(--aep-gray-100);
  border-radius: var(--aep-radius);
}

.aep-loading-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}

.aep-skeleton-card {
  height: 380px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: aep-shimmer 1.5s infinite;
  border-radius: var(--aep-radius);
}

@keyframes aep-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =============================================================================
   CHECKOUT PAGE — REFONTE COMPLÈTE
   ============================================================================= */
.aep-checkout-wrap {
  font-family: var(--aep-font);
  color: var(--aep-navy);
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 16px 80px;
}

.aep-checkout-wrap h1 {
  font-family: var(--aep-font-title);
  font-size: clamp(26px, 4vw, 38px);
  color: var(--aep-navy);
  margin: 0 0 8px;
  letter-spacing: 1px;
}

.aep-checkout-wrap .aep-checkout-subtitle {
  font-size: 15px;
  color: var(--aep-gray-600);
  margin-bottom: 36px;
}

/* ── Layout 2 colonnes ───────────────────────────────────────────────────── */
.aep-checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}

@media (max-width: 860px) {
  .aep-checkout-layout {
    grid-template-columns: 1fr;
  }
  .aep-checkout-sidebar { order: -1; }
}

/* ── Box générique ───────────────────────────────────────────────────────── */
.aep-checkout-box {
  background: var(--aep-white);
  border-radius: var(--aep-radius);
  box-shadow: var(--aep-shadow);
  padding: 28px;
  margin-bottom: 24px;
}

.aep-checkout-box h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--aep-navy);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--aep-gray-200);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Récapitulatif commande ───────────────────────────────────────────────── */
.aep-order-summary {
  background: linear-gradient(135deg, var(--aep-navy) 0%, var(--aep-navy-light) 100%);
  border-radius: var(--aep-radius);
  padding: 28px;
  color: var(--aep-white);
  position: sticky;
  top: 20px;
}

.aep-order-summary h3 {
  font-family: var(--aep-font-title);
  font-size: 20px;
  color: var(--aep-gold);
  margin: 0 0 22px;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 14px;
}

.aep-summary-pack-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--aep-white);
  margin-bottom: 6px;
}

.aep-summary-pack-detail {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 22px;
}

.aep-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.aep-summary-line:last-of-type { border-bottom: none; }

.aep-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px solid rgba(245, 197, 24, 0.3);
}

.aep-summary-total-label {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}

.aep-summary-total-price {
  font-family: var(--aep-font-title);
  font-size: 40px;
  color: var(--aep-gold);
  letter-spacing: 0.5px;
  line-height: 1;
}

.aep-summary-perks {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aep-summary-perk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}

.aep-summary-perk::before {
  content: '✓';
  color: var(--aep-gold);
  font-weight: 700;
  width: 16px;
  flex-shrink: 0;
}

/* ── Formulaire guest email ───────────────────────────────────────────────── */
.aep-guest-notice {
  background: rgba(245, 197, 24, 0.08);
  border: 1px solid rgba(245, 197, 24, 0.3);
  border-radius: var(--aep-radius-sm);
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: 13.5px;
  color: var(--aep-navy);
  line-height: 1.5;
}

.aep-guest-notice strong {
  color: var(--aep-navy);
  display: block;
  margin-bottom: 3px;
}

/* ── Champs formulaire ───────────────────────────────────────────────────── */
.aep-form-group {
  margin-bottom: 18px;
}

.aep-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--aep-navy);
  margin-bottom: 7px;
  letter-spacing: 0.3px;
}

.aep-form-group label span.required {
  color: var(--aep-error);
  margin-left: 3px;
}

.aep-form-control {
  font-family: var(--aep-font);
  width: 100%;
  padding: 13px 16px;
  font-size: 15px;
  border: 2px solid var(--aep-gray-200);
  border-radius: var(--aep-radius-sm);
  color: var(--aep-navy);
  background: var(--aep-white);
  transition: var(--aep-transition);
  outline: none;
}

.aep-form-control:focus {
  border-color: var(--aep-gold);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.15);
}

.aep-form-control.error {
  border-color: var(--aep-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.aep-form-control::placeholder { color: var(--aep-gray-400); }

.aep-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 500px) {
  .aep-form-row { grid-template-columns: 1fr; }
}

/* ── Séparateur login/guest ───────────────────────────────────────────────── */
.aep-auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  color: var(--aep-gray-400);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.aep-auth-divider::before,
.aep-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--aep-gray-200);
}

.aep-link-login {
  font-size: 14px;
  color: var(--aep-navy);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.aep-link-login:hover { text-decoration: underline; color: var(--aep-gold-dark); }

/* ── Bouton payer ────────────────────────────────────────────────────────── */
.aep-btn-pay {
  font-family: var(--aep-font);
  width: 100%;
  padding: 18px 24px;
  background: var(--aep-gold);
  color: var(--aep-navy);
  font-size: 17px;
  font-weight: 900;
  border: none;
  border-radius: var(--aep-radius-sm);
  cursor: pointer;
  transition: var(--aep-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(245, 197, 24, 0.35);
  letter-spacing: 0.3px;
  margin-top: 8px;
}

.aep-btn-pay:hover {
  background: var(--aep-gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(245, 197, 24, 0.5);
}

.aep-btn-pay:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.aep-btn-pay .spinner {
  display: none;
  width: 20px; height: 20px;
  border: 3px solid var(--aep-navy-light);
  border-top-color: var(--aep-navy);
  border-radius: 50%;
  animation: aep-spin 0.8s linear infinite;
}

.aep-btn-pay.loading .spinner { display: block; }
.aep-btn-pay.loading .btn-text { display: none; }

@keyframes aep-spin {
  to { transform: rotate(360deg); }
}

/* ── Sécurité stripe ────────────────────────────────────────────────────── */
.aep-secure-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  color: var(--aep-gray-600);
  margin-top: 14px;
  text-align: center;
}

.aep-secure-badge svg { flex-shrink: 0; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.aep-alert {
  padding: 14px 18px;
  border-radius: var(--aep-radius-sm);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.aep-alert--success {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #065f46;
}

.aep-alert--error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #7f1d1d;
}

.aep-alert--info {
  background: rgba(11, 19, 64, 0.05);
  border: 1px solid rgba(11, 19, 64, 0.15);
  color: var(--aep-navy);
}

/* ── Confirmation succès ─────────────────────────────────────────────────── */
.aep-checkout-success {
  text-align: center;
  padding: 60px 30px;
  max-width: 580px;
  margin: 0 auto;
}

.aep-checkout-success__icon {
  width: 80px; height: 80px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin: 0 auto 24px;
  border: 3px solid rgba(16, 185, 129, 0.3);
}

.aep-checkout-success h2 {
  font-family: var(--aep-font-title);
  font-size: 32px;
  color: var(--aep-navy);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.aep-checkout-success p {
  font-size: 15px;
  color: var(--aep-gray-600);
  line-height: 1.6;
  margin-bottom: 8px;
}

.aep-checkout-success .aep-next-steps {
  margin-top: 32px;
  background: var(--aep-gray-100);
  border-radius: var(--aep-radius-sm);
  padding: 22px;
  text-align: left;
}

.aep-checkout-success .aep-next-steps h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--aep-navy);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.aep-checkout-success .aep-next-step-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--aep-gray-600);
  margin-bottom: 10px;
}

.aep-checkout-success .aep-next-step-item:last-child { margin-bottom: 0; }

.aep-step-num {
  width: 22px; height: 22px;
  background: var(--aep-navy);
  color: var(--aep-white);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* =============================================================================
   MODAL CHECKOUT (Avant redirect)
   ============================================================================= */
.aep-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11, 19, 64, 0.75);
  backdrop-filter: blur(4px);
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.aep-modal-overlay.open {
  display: flex;
}

.aep-modal {
  background: var(--aep-white);
  border-radius: var(--aep-radius);
  max-width: 520px;
  width: 100%;
  padding: 36px 32px;
  position: relative;
  box-shadow: var(--aep-shadow-lg);
  animation: aep-modal-in 0.25s ease;
}

@keyframes aep-modal-in {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.aep-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  background: var(--aep-gray-100);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--aep-transition);
  color: var(--aep-gray-600);
}

.aep-modal__close:hover { background: var(--aep-gray-200); color: var(--aep-navy); }

.aep-modal__header {
  margin-bottom: 24px;
}

.aep-modal__header h3 {
  font-family: var(--aep-font-title);
  font-size: 26px;
  color: var(--aep-navy);
  margin: 0 0 6px;
  letter-spacing: 0.5px;
}

.aep-modal__header p {
  font-size: 14px;
  color: var(--aep-gray-600);
  line-height: 1.5;
  margin: 0;
}

.aep-modal__summary {
  background: var(--aep-gold-light);
  border: 1px solid rgba(245,197,24,0.3);
  border-radius: var(--aep-radius-sm);
  padding: 16px;
  margin-bottom: 22px;
}

.aep-modal__summary-name {
  font-weight: 800;
  color: var(--aep-navy);
  margin-bottom: 4px;
}

.aep-modal__summary-detail {
  font-size: 13px;
  color: var(--aep-gray-600);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.aep-modal__summary-price {
  font-family: var(--aep-font-title);
  font-size: 26px;
  color: var(--aep-navy);
}

/* =============================================================================
   RESPONSIVE MOBILE
   ============================================================================= */
@media (max-width: 768px) {
  .aep-boutique__hero { padding: 36px 20px; }
  .aep-boutique-grid { grid-template-columns: 1fr; }
  .aep-pack-card__body { padding: 18px; }
  .aep-checkout-wrap { padding: 24px 12px 60px; }
  .aep-checkout-box { padding: 20px; }
  .aep-order-summary { padding: 22px; }
  .aep-modal { padding: 28px 20px; }
}

@media (max-width: 400px) {
  .aep-hour-btn .aep-hour-btn__hours { font-size: 14px; }
  .aep-pack-card__price-value { font-size: 28px; }
}

/* =============================================================================
   COMPATIBILITY DIVI
   ============================================================================= */
.et_pb_section .aep-boutique,
.et_pb_row .aep-boutique {
  max-width: 100%;
}

.et-db #et-boc .et_pb_section .aep-btn-cta,
.et-db #et-boc .et_pb_section .aep-btn-pay {
  -webkit-appearance: none;
  appearance: none;
}

/* =============================================================================
   COLONNES FORCÉES · CARTE UNIQUE · PRIX INLINE  (shortcodes v1.2.0)
   ============================================================================= */

/* Wrapper posé par [aep_boutique columns="N"] / [aep_pack columns="N"] :
   la variable --aep-cols est définie en inline sur le wrapper (voir class-frontend). */
.aep-cols-override .aep-boutique-grid {
  grid-template-columns: repeat(var(--aep-cols, 3), minmax(0, 1fr));
}

/* Une seule carte via [aep_pack id="X"] : taille lisible, centrée. */
.aep-boutique--shortcode { padding: 0; }
.aep-boutique-grid--single {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

/* Prix inline [aep_prix] — charte jeconduis.fr, s'intègre dans n'importe quel texte. */
.aep-prix-inline {
  font-family: var(--aep-font, 'Nunito', sans-serif);
  font-weight: 800;
  color: var(--aep-navy, #0B1340);
  white-space: nowrap;
}
.aep-prix-inline--ht     { color: var(--aep-gray-600, #6c757d); }
.aep-prix-inline--heure  { color: var(--aep-navy, #0B1340); }
.aep-prix-inline--complet { font-weight: 700; }
.aep-prix-error {
  color: var(--aep-error, #ef4444);
  font-size: 0.9em;
  font-style: italic;
}

/* Sur mobile, les colonnes forcées repassent en pleine largeur (lisibilité). */
@media (max-width: 768px) {
  .aep-cols-override .aep-boutique-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SURCHARGES HAUTE PRIORITÉ — battent le thème/Divi/Customizer
   (le site force Bebas + gris via #page-container … !important : on gagne avec
   une spécificité supérieure #page-container + classe)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Titres cartes : Oswald lisible (moins gras, plus d'espace) ────────────── */
#page-container .aep-boutique .aep-pack-card__title,
body .aep-boutique .aep-pack-card__title {
  font-family: 'Oswald', 'Trebuchet MS', 'Segoe UI', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.6px !important;
  font-size: 21px !important;
  line-height: 1.3 !important;
  color: #0B1340 !important;
  text-transform: none !important;
}

/* ── Descriptions : BLANC sur le dégradé navy ──────────────────────────────── */
#page-container .aep-boutique .aep-pack-card__description,
body .aep-boutique .aep-pack-card__description {
  color: #4b5563 !important;
  opacity: 1 !important;
  font-family: 'Nunito', sans-serif !important;
}

/* ── Label "X HEURES" en or, prix en Oswald navy ───────────────────────────── */
#page-container .aep-boutique .aep-pack-card__type,
body .aep-boutique .aep-pack-card__type { color: #7a5f14 !important; }
#page-container .aep-boutique .aep-pack-card__price-value,
body .aep-boutique .aep-pack-card__price-value {
  font-family: 'Oswald', 'Trebuchet MS', sans-serif !important;
  color: var(--aep-navy) !important;
  font-weight: 600 !important;
}

/* ── Boutons d'heures : "13 h" CÔTE À CÔTE (plus jamais empilé) ─────────────── */
#page-container .aep-boutique .aep-hour-btn,
body .aep-boutique .aep-hour-btn {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
}
#page-container .aep-boutique .aep-hour-btn .aep-hour-btn__hours,
body .aep-boutique .aep-hour-btn .aep-hour-btn__hours {
  display: inline !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
#page-container .aep-boutique .aep-hour-btn .aep-hour-btn__label,
body .aep-boutique .aep-hour-btn .aep-hour-btn__label {
  display: inline !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  opacity: 0.85 !important;
  margin: 0 !important;
}

/* ── Badge « Populaire » À CHEVAL sur la bordure haute ─────────────────────── */
/* La carte ne doit plus rogner le badge ; on arrondit header + corps pour garder
   les coins nets malgré overflow:visible. */
#page-container .aep-boutique .aep-pack-card,
body .aep-boutique .aep-pack-card { overflow: visible !important; }
#page-container .aep-boutique .aep-pack-card__header,
body .aep-boutique .aep-pack-card__header { border-radius: 14px 14px 0 0 !important; }
#page-container .aep-boutique .aep-pack-card__body,
body .aep-boutique .aep-pack-card__body { border-radius: 0 0 14px 14px !important; }
#page-container .aep-boutique .aep-pack-card__badge,
body .aep-boutique .aep-pack-card__badge {
  top: 0 !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 6 !important;
}

/* ── Mise en page : grille unifiée en FLEX, MAX 3 colonnes, centrée ─────────── */
/* (flex + wrap : les cartes filtrées ou la dernière rangée restent centrées,
   jamais de carte seule qui flotte à gauche ni de rangée vide) */
#page-container .aep-boutique .aep-boutique-grid,
body .aep-boutique .aep-boutique-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 24px !important;
  max-width: 1062px !important;   /* 3 × 330 + 2 × 24 + marge */
  margin-left: auto !important;
  margin-right: auto !important;
}
#page-container .aep-boutique .aep-boutique-grid .aep-pack-card,
body .aep-boutique .aep-boutique-grid .aep-pack-card {
  flex: 0 0 330px !important;
  max-width: 330px !important;
  width: 330px !important;
}
@media (max-width: 720px) {
  #page-container .aep-boutique .aep-boutique-grid .aep-pack-card,
  body .aep-boutique .aep-boutique-grid .aep-pack-card {
    flex: 0 0 100% !important;
    max-width: 420px !important;
    width: 100% !important;
  }
}

/* ── Prix : plus petit, TOUJOURS sur une seule ligne ───────────────────────── */
#page-container .aep-boutique .aep-pack-card__price-value,
body .aep-boutique .aep-pack-card__price-value {
  font-size: 27px !important;
  white-space: nowrap !important;
  line-height: 1.05 !important;
}
/* Le prix prend toute la largeur, les badges (boîte/validité) passent dessous */
#page-container .aep-boutique .aep-pack-card__pricing,
body .aep-boutique .aep-pack-card__pricing {
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
}

/* ── Titre hero + boutons de filtre en Oswald (cohérence des titres) ───────── */
#page-container .aep-boutique .aep-boutique__hero h2,
body .aep-boutique .aep-boutique__hero h2,
#page-container .aep-boutique .aep-filter-btn,
body .aep-boutique .aep-filter-btn,
#page-container .aep-boutique .aep-pack-section__title,
body .aep-boutique .aep-pack-section__title {
  font-family: 'Oswald', 'Trebuchet MS', 'Segoe UI', sans-serif !important;
}

/* ── Aération : plus d'espace entre colonnes ET entre rangées ──────────────── */
#page-container .aep-boutique .aep-boutique-grid,
body .aep-boutique .aep-boutique-grid {
  gap: 46px 38px !important;   /* 46px vertical (rangées) · 38px horizontal (colonnes) */
  max-width: 1090px !important;
}

/* ── Badges/stickers : texte CENTRÉ + SOMBRE (fond or) ─────────────────────── */
#page-container .aep-boutique .aep-pack-card__badge,
body .aep-boutique .aep-pack-card__badge {
  color: #0B1340 !important;              /* texte sombre lisible sur l'or */
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Bordures douces (glassmorphism), plus de bordure sombre ───────────────── */
#page-container .aep-boutique .aep-pack-card,
body .aep-boutique .aep-pack-card {
  border: 1px solid #e6e9f2 !important;
  box-shadow: 0 6px 22px rgba(11, 19, 64, 0.08) !important;
}
#page-container .aep-boutique .aep-pack-card--featured,
body .aep-boutique .aep-pack-card--featured {
  border: 1px solid rgba(245, 197, 24, 0.55) !important;
  box-shadow: 0 10px 34px rgba(11, 19, 64, 0.14) !important;
}