/* =========================================================
   CyberSource BGFI — Refonte visuelle hero + sections
   100% offline (SVG/CSS inline, aucune dépendance externe)
   ========================================================= */

/* ─────────────────────────────────────────────
   1. HERO : mesh gradient + art géométrique SVG
   ───────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(58, 162, 171, .35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 70%, rgba(170, 182, 147, .15) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(11, 71, 122, .4) 0%, transparent 70%),
    linear-gradient(135deg, #001a30 0%, #002b4f 35%, #003565 65%, #01406f 100%);
  position: relative;
}

/* Motif géométrique en fond (réseau de points + lignes) */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(58, 162, 171, .12) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .5;
  mask-image: radial-gradient(ellipse 80% 60% at 70% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 40%, black 30%, transparent 80%);
  pointer-events: none;
}

/* Formes géométriques flottantes animées */
.hero-shape {
  position: absolute;
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  animation: shapeFloat 8s ease-in-out infinite;
}
.hero-shape--1 {
  top: 15%; right: 8%;
  width: 120px; height: 120px;
  background: linear-gradient(135deg, rgba(58, 162, 171, .25), rgba(58, 162, 171, .05));
  border: 1px solid rgba(58, 162, 171, .3);
  transform: rotate(15deg);
  animation-delay: 0s;
}
.hero-shape--2 {
  bottom: 20%; left: 5%;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(170, 182, 147, .2), transparent);
  border: 1px solid rgba(170, 182, 147, .25);
  animation-delay: 2s;
}
.hero-shape--3 {
  top: 50%; right: 20%;
  width: 60px; height: 60px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .15);
  transform: rotate(-12deg);
  animation-delay: 4s;
}
@keyframes shapeFloat {
  0%, 100% { opacity: 0; transform: translateY(0) rotate(15deg); }
  50% { opacity: .7; transform: translateY(-20px) rotate(20deg); }
}

/* Carte flottante glassmorphism dans le hero */
.hero-glass-card {
  position: absolute;
  bottom: 60px;
  right: 4%;
  width: 280px;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 20px;
  padding: 20px;
  color: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  animation: glassSlideIn .8s ease-out .5s both, glassFloat 4s ease-in-out 1.3s infinite;
}
@keyframes glassSlideIn {
  from { opacity: 0; transform: translateY(30px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes glassFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero-glass-card__label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .6);
  font-weight: 600;
}
.hero-glass-card__value {
  font-family: 'Manrope', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  margin: 4px 0 12px;
  letter-spacing: -.02em;
}
.hero-glass-card__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-glass-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
  color: rgba(255, 255, 255, .8);
}
.hero-glass-card__row .ok { color: #6ee7b7; font-weight: 600; }
.hero-glass-card__bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
  margin-top: 12px;
}
.hero-glass-card__bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3AA2AB, #AAB693);
  width: 0%;
  animation: barFill 1.5s ease-out 1s forwards;
}
@keyframes barFill { to { width: 96.4%; } }

/* Badge flottant sécurité */
.hero-badge {
  position: absolute;
  top: 20%;
  left: 48%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(36, 162, 107, .15);
  border: 1px solid rgba(36, 162, 107, .4);
  color: #6ee7b7;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: .8; }
  50% { opacity: 1; box-shadow: 0 0 20px rgba(36, 162, 107, .3); }
}

@media (max-width: 880px) {
  .hero-glass-card { display: none; }
  .hero-badge { display: none; }
  .hero-shape { opacity: .3; }
}

/* ─────────────────────────────────────────────
   2. BANDEAU LOGOS PAIEMENT
   ───────────────────────────────────────────── */
.payment-logos-strip {
  background: #fff;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}
.payment-logos-strip__title {
  text-align: center;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 20px;
}
.payment-logos-strip__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 36px;
}
.payment-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: #475569;
  opacity: .55;
  transition: opacity .25s ease, transform .25s ease;
  filter: grayscale(100%);
}
.payment-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.05);
}
.payment-logo__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─────────────────────────────────────────────
   3. CARTES SOLUTIONS : photo + overlay icône
   ───────────────────────────────────────────── */
.solution-photo-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 220px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}
.solution-photo-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 50px -12px rgba(7, 42, 74, .3);
}
.solution-photo-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.solution-photo-card:hover .solution-photo-card__img {
  transform: scale(1.08);
}
.solution-photo-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 30, 55, .1) 0%, rgba(0, 30, 55, .75) 100%);
}
.solution-photo-card__icon {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}
.solution-photo-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  color: #fff;
}
.solution-photo-card__num {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 4px;
}
.solution-photo-card__title {
  font-family: 'Manrope', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.solution-photo-card__desc {
  font-size: .85rem;
  color: rgba(255, 255, 255, .8);
  line-height: 1.5;
  max-width: 90%;
}

/* ─────────────────────────────────────────────
   4. SÉPARATEURS DÉCORATIFS SVG
   ───────────────────────────────────────────── */
.section-divider {
  position: relative;
  height: 60px;
  overflow: hidden;
  line-height: 0;
}
.section-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}
.section-divider--flip { transform: rotate(180deg); }

/* ─────────────────────────────────────────────
   5. MOCKUP DASHBOARD BACK-OFFICE
   ───────────────────────────────────────────── */
.dashboard-mockup {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(0, 30, 55, .4);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  animation: mockupFloat 5s ease-in-out infinite;
}
@keyframes mockupFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.dashboard-mockup__topbar {
  height: 36px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
}
.dashboard-mockup__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dashboard-mockup__dot--red { background: #ef6a5b; }
.dashboard-mockup__dot--yellow { background: #f7c85c; }
.dashboard-mockup__dot--green { background: #58c27d; }
.dashboard-mockup__url {
  margin-left: 12px;
  font-size: .72rem;
  color: #94a3b8;
  background: #fff;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
}
.dashboard-mockup__body {
  display: grid;
  grid-template-columns: 140px 1fr;
  min-height: 320px;
}
.dashboard-mockup__sidebar {
  background: linear-gradient(180deg, #002b4f, #001a35);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dashboard-mockup__nav-item {
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  font-size: .72rem;
  color: rgba(255, 255, 255, .5);
}
.dashboard-mockup__nav-item--active {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-left: 3px solid #3AA2AB;
}
.dashboard-mockup__nav-icon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: currentColor;
  opacity: .5;
}
.dashboard-mockup__content {
  padding: 20px;
  background: #f8fafc;
}
.dashboard-mockup__title {
  font-size: .9rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 16px;
  font-family: 'Manrope', sans-serif;
}
.dashboard-mockup__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.dashboard-mockup__stat {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
}
.dashboard-mockup__stat-label {
  font-size: .65rem;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: .05em;
}
.dashboard-mockup__stat-value {
  font-family: 'Manrope', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: #003565;
  margin-top: 4px;
}
.dashboard-mockup__stat-change {
  font-size: .68rem;
  color: #24a26b;
  font-weight: 600;
}
.dashboard-mockup__chart-area {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  height: 140px;
  position: relative;
}
.dashboard-mockup__chart-title {
  font-size: .72rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .dashboard-mockup__sidebar { display: none; }
  .dashboard-mockup__body { grid-template-columns: 1fr; }
  .dashboard-mockup__stats { grid-template-columns: 1fr; }
  .payment-logos-strip__grid { gap: 20px; }
  .payment-logo { font-size: .9rem; }
}

/* =========================================================
   FAQ : Refonte style accordion moderne
   ========================================================= */

/* Layout general */
#faq .faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 14px;
}

/* Item : carte avec bordure animee */
#faq .faq-item {
  background: #fff;
  border: 2px solid #E4EBF2;
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease, transform .2s ease;
  position: relative;
}
#faq .faq-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #3AA2AB, #AAB693);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
#faq .faq-item:hover:not(.active) {
  border-color: rgba(58, 162, 171, .35);
  transform: translateX(2px);
}
#faq .faq-item.active {
  border-color: rgba(58, 162, 171, .4);
  box-shadow: 0 12px 40px -16px rgba(7, 42, 74, .2);
}
#faq .faq-item.active::before { transform: scaleY(1); }

/* Bouton question */
#faq .faq-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  background: transparent;
  border: 0;
  padding: 22px 24px;
  text-align: left;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: #003565;
  transition: color .2s ease;
  cursor: pointer;
  line-height: 1.4;
}
#faq .faq-button:hover { color: #0B477A; }

/* Numero de question */
#faq .faq-button .q-num {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #F0F7FA, #EFF6F7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 800;
  color: #3AA2AB;
  transition: background .3s ease, color .3s ease;
}
.faq-item.active #faq .faq-button .q-num {
  background: linear-gradient(135deg, #3AA2AB, #2E8F98);
  color: #fff;
}

/* Le texte de la question prend l espace restant */
#faq .faq-button .q-text { flex: 1; }

/* Icone plus/moins moderne (SVG-style avec pseudo-elements) */
#faq .faq-button .plus {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F0F7FA;
  position: relative;
  transition: background .3s ease, transform .3s ease;
  border: 0;
}
#faq .faq-button .plus::before,
#faq .faq-button .plus::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: #3AA2AB;
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.16,1,.3,1), background .3s ease;
}
.faq-button .plus::before {
  width: 14px;
  height: 2.5px;
  transform: translate(-50%, -50%);
}
#faq .faq-button .plus::after {
  width: 2.5px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.faq-item.active #faq .faq-button .plus {
  background: #3AA2AB;
  transform: rotate(180deg);
}
#faq .faq-item.active .faq-button .plus::before { background: #fff; }
.faq-item.active #faq .faq-button .plus::after {
  background: #fff;
  transform: translate(-50%, -50%) scaleY(0);
}

/* Panneau de reponse */
#faq .faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.16,1,.3,1);
}
#faq .faq-item.active .faq-panel { max-height: 300px; }

#faq .faq-panel p {
  padding: 0 24px 24px 78px;
  font-size: .95rem;
  color: #5F7288;
  line-height: 1.7;
  margin: 0;
}

/* Tag indicatif dans la reponse */
#faq .faq-panel .faq-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px 78px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(36, 162, 107, .1);
  color: #1e8a5a;
  font-size: .78rem;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 620px) {
  #faq .faq-button { padding: 18px 16px; font-size: .92rem; gap: 12px; }
  #faq .faq-button .q-num { width: 30px; height: 30px; flex-basis: 30px; font-size: .72rem; }
  #faq .faq-button .plus { width: 28px; height: 28px; }
  #faq .faq-panel p { padding: 0 16px 20px 58px; font-size: .88rem; }
  #faq .faq-panel .faq-tag { margin-left: 58px; }
}