/* ============================================================================
   WAFACTURE LLC — Feuille de style principale
   ============================================================================
   Sommaire :
     1. Variables & reset
     2. Typographie de base
     3. Mise en page / utilitaires
     4. Boutons
     5. Formulaires
     6. En-tête / navigation
     7. Alertes & badges de statut
     8. Page d'accueil (hero, comparatif, avantages, étapes, CTA)
     9. Page tarifs (pricing card, FAQ)
    10. Page inscription (register)
    11. Page merci
    12. Page paiement
     13. Pied de page + bouton WhatsApp flottant
     14. Espace admin (login, stats, tableau, détail client)
     15. Responsive
     16. Effets "WOW" (glow, glassmorphism, animations au scroll, particules)
     17. Sélecteur de langue
     18. RTL (arabe)
     19. Lightbox (démo preuve de paiement)
     20. Barre de progression du formulaire
   ==========================================================================*/

/* ---------- 1. Variables & reset ------------------------------------------ */
:root {
  --color-primary: #0d47a1;
  --color-primary-dark: #1a237e;
  --color-primary-light: #e3ecfb;
  --color-red: #d32f2f;
  --color-red-light: #fdecea;
  --color-green: #2e7d32;
  --color-green-light: #e8f5e9;
  --color-gold: #ffd700;
  --color-gold-dark: #b8960a;
  --color-bg: #ffffff;
  --color-bg-alt: #f6f8fc;
  --color-bg-dark: #0a1128;
  --color-bg-dark-2: #0d1442;
  --color-text: #2b2f3a;
  --color-text-light: #616875;
  --color-border: #e3e7ef;

  /* Effets "wow" : lueurs, dégradés étendus (voir section 16) */
  --glow-gold: rgba(255, 215, 0, 0.45);
  --glow-primary: rgba(61, 106, 255, 0.45);
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.18);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(13, 30, 66, 0.06);
  --shadow-md: 0 8px 24px rgba(13, 30, 66, 0.10);
  --shadow-lg: 0 20px 48px rgba(13, 30, 66, 0.16);

  --font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --container-width: 1160px;
}

* , *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  line-height: 1.25;
  margin: 0 0 16px;
  font-weight: 700;
}

h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.35rem; }
p { margin: 0 0 16px; color: var(--color-text-light); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
ul { padding-left: 0; list-style: none; margin: 0; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-primary);
  color: #fff; padding: 10px 16px; z-index: 2000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Mise en page / utilitaires ---------------------------------- */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 80px 0; }
.section--alt { background: var(--color-bg-alt); }
.text-center { text-align: center; }
.section-eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: 1.5px;
  font-size: 0.78rem; font-weight: 700; color: var(--color-red);
  background: var(--color-red-light); padding: 6px 14px; border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.section-header { max-width: 680px; margin: 0 auto 52px; text-align: center; }
.section-header p { font-size: 1.08rem; }

.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 4. Boutons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600; font-size: 1rem;
  padding: 15px 30px; border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  text-decoration: none; line-height: 1;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-lg { padding: 19px 40px; font-size: 1.12rem; }
.btn-sm { padding: 10px 20px; font-size: 0.9rem; }
.btn-block { width: 100%; }

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff; box-shadow: var(--shadow-md);
}
.btn-primary:hover { box-shadow: 0 12px 32px var(--glow-primary), var(--shadow-lg); color: #fff; }

.btn-gold {
  background: linear-gradient(135deg, #ffe066 0%, var(--color-gold) 100%);
  color: #4a3b00; box-shadow: 0 8px 24px rgba(255, 215, 0, 0.35);
  position: relative; overflow: hidden;
}
.btn-gold:hover { color: #4a3b00; box-shadow: 0 14px 36px var(--glow-gold); }
.btn-gold::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size: 200% 100%; background-position: 120% 0; transition: opacity .2s ease;
}
.btn-gold:hover::after { opacity: 1; animation: wf-shimmer 1.1s ease; }
@keyframes wf-shimmer {
  0%   { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}

.btn-outline {
  background: transparent; border-color: var(--color-primary); color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: #fff; }

.btn-outline-light { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.15); color: #fff; }

.btn-danger { background: var(--color-red); color: #fff; }
.btn-danger:hover { background: #b71c1c; color: #fff; }

.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ---------- 5. Formulaires --------------------------------------------------- */
.form-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 40px; border: 1px solid var(--color-border);
}
.form-group { margin-bottom: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
label {
  display: block; font-weight: 600; margin-bottom: 8px; font-size: .94rem; color: var(--color-text);
}
label .required { color: var(--color-red); }
.form-hint { font-size: .82rem; color: var(--color-text-light); margin-top: 6px; }

input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], select, textarea {
  width: 100%; padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border); font-family: var(--font-body);
  font-size: 1rem; color: var(--color-text); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-light);
}
textarea { resize: vertical; min-height: 110px; }

.field-error input, .field-error select, .field-error textarea { border-color: var(--color-red); }
.field-error-msg { color: var(--color-red); font-size: .84rem; margin-top: 6px; display: block; }

.radio-group { display: flex; gap: 18px; flex-wrap: wrap; }
.radio-option {
  display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--color-border);
  padding: 12px 18px; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; flex: 1;
  transition: border-color .15s ease, background .15s ease;
}
.radio-option:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-light); }
.radio-option input { width: auto; }
.radio-option .tag { margin-left: auto; font-size: .72rem; background: var(--color-green-light); color: var(--color-green); padding: 3px 10px; border-radius: var(--radius-pill); font-weight: 700; }

.checkbox-line { display: flex; align-items: flex-start; gap: 12px; }
.checkbox-line input { width: auto; margin-top: 4px; }
.checkbox-line label { margin: 0; font-weight: 500; }

.file-upload {
  border: 2px dashed var(--color-border); border-radius: var(--radius-md);
  padding: 22px; text-align: center; cursor: pointer; position: relative;
  transition: border-color .15s ease, background .15s ease; background: var(--color-bg-alt);
}
.file-upload:hover { border-color: var(--color-primary); }
.file-upload input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.file-upload__label { font-weight: 600; color: var(--color-primary); }
.file-upload__filename { margin-top: 8px; font-size: .88rem; color: var(--color-text); font-weight: 600; }

.form-section-title {
  font-family: var(--font-heading); font-weight: 700; color: var(--color-primary-dark);
  margin: 36px 0 18px; padding-top: 20px; border-top: 1px solid var(--color-border);
  font-size: 1.1rem;
}
.form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ---------- 6. En-tête / navigation ----------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.97);
  box-shadow: 0 4px 24px rgba(13,30,66,.08);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 78px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand__logo { width: 40px; height: 40px; }
.brand__text { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--color-primary-dark); }
.brand__accent { color: var(--color-red); margin-left: 3px; }

.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a:not(.btn) {
  color: var(--color-text); font-weight: 600; font-size: .96rem; position: relative; padding: 6px 0;
}
.site-nav a:not(.btn):hover, .site-nav a.active { color: var(--color-primary); text-decoration: none; }
.site-nav a.active::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 3px;
  background: var(--color-primary); border-radius: 2px;
}
.nav-whatsapp { display: flex; align-items: center; gap: 6px; color: var(--color-green) !important; }

.site-header--minimal .site-header__inner { justify-content: space-between; }
.header-trust { font-size: .85rem; color: var(--color-green); font-weight: 600; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px; width: 44px; height: 44px;
}
.nav-toggle span { display: block; height: 2.5px; width: 100%; background: var(--color-primary-dark); border-radius: 2px; }

/* ---------- 7. Alertes & badges --------------------------------------------- */
.alert {
  padding: 16px 20px; border-radius: var(--radius-md); margin: 20px 0; font-weight: 500;
  border: 1.5px solid transparent;
}
.alert-success { background: var(--color-green-light); color: #1b5e20; border-color: #a5d6a7; }
.alert-error { background: var(--color-red-light); color: #b71c1c; border-color: #ef9a9a; }
.alert-info { background: var(--color-primary-light); color: var(--color-primary-dark); border-color: #90caf9; }

.badge {
  display: inline-block; padding: 5px 14px; border-radius: var(--radius-pill);
  font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.badge-pending { background: #fff3e0; color: #e65100; }
.badge-awaiting { background: #fffde7; color: #a68b00; }
.badge-paid { background: #e3f2fd; color: #0d47a1; }
.badge-processing { background: #f3e5f5; color: #6a1b9a; }
.badge-completed { background: #e8f5e9; color: #1b5e20; }
.badge-rejected { background: #ffebee; color: #b71c1c; }

/* ---------- 8. Page d'accueil ------------------------------------------------ */
.hero {
  background: radial-gradient(1100px 520px at 85% -10%, #16308a 0%, var(--color-bg-dark) 55%, #060b1c 100%);
  color: #fff; padding: 90px 0 110px; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,215,0,.08) 0, transparent 45%);
}
.hero__orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero__orb {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  animation: wf-float 16s var(--ease-smooth) infinite alternate;
}
.hero__orb--1 { width: 420px; height: 420px; top: -120px; right: 8%; background: radial-gradient(circle, rgba(61,106,255,.55), transparent 70%); animation-duration: 18s; }
.hero__orb--2 { width: 320px; height: 320px; bottom: -80px; left: 4%; background: radial-gradient(circle, rgba(255,215,0,.32), transparent 70%); animation-duration: 22s; animation-delay: -4s; }
.hero__orb--3 { width: 260px; height: 260px; top: 30%; left: 40%; background: radial-gradient(circle, rgba(211,47,47,.22), transparent 70%); animation-duration: 26s; animation-delay: -9s; }
@keyframes wf-float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-24px, 30px) scale(1.08); }
  100% { transform: translate(18px, -20px) scale(0.96); }
}
.hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; position: relative; z-index: 1; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25); padding: 8px 18px; border-radius: var(--radius-pill);
  font-size: .84rem; font-weight: 600; margin-bottom: 24px; color: #ffe066;
  box-shadow: 0 0 0 0 rgba(255,215,0,.35); animation: wf-badge-pulse 2.8s ease-out infinite;
  position: relative; z-index: 1;
}
@keyframes wf-badge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,215,0,.35); }
  70%  { box-shadow: 0 0 0 10px rgba(255,215,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
}
.hero h1 { color: #fff; font-size: 3rem; margin-bottom: 20px; }
.hero h1 span { color: var(--color-gold); }
.hero__subtitle { color: #cdd7ef; font-size: 1.15rem; max-width: 560px; margin-bottom: 34px; }
.hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.hero__trust { display: flex; gap: 28px; flex-wrap: wrap; }
.hero__trust-item { display: flex; align-items: center; gap: 10px; color: #cdd7ef; font-size: .92rem; font-weight: 500; }
.hero__trust-item strong { color: #fff; font-size: 1.3rem; display: block; font-family: var(--font-heading); }

.hero__visual {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: 30px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  position: relative; z-index: 1;
}
.hero__visual-card {
  background: rgba(255,255,255,.94); border-radius: var(--radius-md); padding: 22px; margin-bottom: 16px;
  box-shadow: var(--shadow-lg); display: flex; gap: 14px; align-items: flex-start;
  backdrop-filter: blur(8px); transition: transform .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth);
}
.hero__visual-card:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 20px 44px rgba(0,0,0,.28); }
.hero__visual-card:last-child { margin-bottom: 0; }
.hero__visual-icon {
  width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 1.3rem; flex-shrink: 0;
}
.hero__visual-card h4 { margin: 0 0 4px; font-size: 1rem; color: var(--color-primary-dark); }
.hero__visual-card p { margin: 0; font-size: .86rem; color: var(--color-text-light); }

/* Comparatif */
.compare-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.compare-table { width: 100%; border-collapse: collapse; background: #fff; min-width: 640px; }
.compare-table th, .compare-table td { padding: 20px 24px; text-align: left; border-bottom: 1px solid var(--color-border); }
.compare-table thead th {
  font-family: var(--font-heading); font-size: 1rem;
}
.compare-table thead th:first-child { background: #fafbfd; color: var(--color-text-light); }
.compare-table thead th:last-child { background: var(--color-primary); color: #fff; }
.compare-table tbody td:first-child { color: var(--color-text-light); }
.compare-table tbody td:last-child { font-weight: 600; color: var(--color-primary-dark); background: var(--color-primary-light); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.x-mark { color: var(--color-red); font-weight: 700; margin-right: 8px; }
.check-mark { color: var(--color-green); font-weight: 700; margin-right: 8px; }

/* Cartes avantages */
.advantage-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 36px 30px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.advantage-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.advantage-card__icon {
  width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; margin-bottom: 20px;
  background: var(--color-primary-light);
}
.advantage-card:nth-child(2) .advantage-card__icon { background: #fff8e1; }
.advantage-card:nth-child(3) .advantage-card__icon { background: var(--color-green-light); }

/* Étapes */
.steps { position: relative; }
.step-card { background: #fff; border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); height: 100%; position: relative; }
.step-number {
  width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; margin-bottom: 18px;
}
.step-card h3 { font-size: 1.08rem; }

/* CTA band */
.cta-band {
  background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary));
  color: #fff; border-radius: var(--radius-lg); padding: 56px 50px; text-align: center;
  margin: 0 24px;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #cdd7ef; font-size: 1.08rem; }

/* ---------- 9. Page tarifs --------------------------------------------------- */
.pricing-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border: 2px solid var(--color-primary); max-width: 780px; margin: 0 auto; overflow: hidden;
}
.pricing-card__head {
  background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary));
  color: #fff; padding: 40px 44px; text-align: center; position: relative;
}
.pricing-card__ribbon {
  position: absolute; top: 18px; right: -42px; background: var(--color-gold); color: #4a3b00;
  padding: 6px 50px; transform: rotate(40deg); font-weight: 700; font-size: .78rem; letter-spacing: .5px;
}
.pricing-card__price { font-family: var(--font-heading); font-size: 3.4rem; font-weight: 800; color: #fff; margin: 10px 0 4px; }
.pricing-card__price small { font-size: 1.1rem; font-weight: 500; opacity: .85; }
.pricing-card__usd { color: #cdd7ef; font-size: .94rem; }
.pricing-card__body { padding: 40px 44px; }
.pricing-value {
  display: flex; justify-content: space-between; align-items: center; background: var(--color-bg-alt);
  border-radius: var(--radius-md); padding: 16px 22px; margin-bottom: 28px;
}
.pricing-value strike { color: var(--color-text-light); }
.pricing-value .save { color: var(--color-green); font-weight: 700; }

.checklist { display: grid; gap: 14px; margin-bottom: 32px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; font-weight: 500; color: var(--color-text); }
.checklist .check-mark { font-size: 1.1rem; margin-top: 1px; }

.pricing-annual {
  background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 18px 22px;
  font-size: .92rem; color: var(--color-text-light); margin-bottom: 30px; text-align: center;
}

.faq-item { border-bottom: 1px solid var(--color-border); padding: 22px 0; }
.faq-question {
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  font-family: var(--font-heading); font-weight: 600; color: var(--color-primary-dark); font-size: 1.02rem;
}
.faq-question::after { content: '+'; font-size: 1.4rem; color: var(--color-primary); transition: transform .2s ease; }
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-item.open .faq-answer { max-height: 320px; margin-top: 14px; }

/* ---------- 10. Page inscription --------------------------------------------- */
.register-header { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.register-wrap { max-width: 820px; margin: 0 auto; padding: 60px 24px 100px; }
.progress-note {
  display: flex; align-items: center; gap: 10px; background: var(--color-primary-light);
  color: var(--color-primary-dark); padding: 14px 20px; border-radius: var(--radius-md);
  font-size: .9rem; font-weight: 500; margin-bottom: 30px;
}

/* ---------- 11. Page merci ---------------------------------------------------- */
.confirmation-wrap { max-width: 620px; margin: 90px auto; padding: 0 24px; text-align: center; }
.confirmation-icon {
  width: 96px; height: 96px; border-radius: 50%; background: var(--color-green-light);
  display: flex; align-items: center; justify-content: center; font-size: 3rem; margin: 0 auto 28px;
}
.confirmation-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 50px 40px; border: 1px solid var(--color-border); }
.confirmation-steps { text-align: left; background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 24px 28px; margin: 28px 0; }
.confirmation-steps li { display: flex; gap: 12px; padding: 8px 0; color: var(--color-text); }

/* ---------- 12. Page paiement -------------------------------------------------- */
.payment-wrap { max-width: 720px; margin: 50px auto 100px; padding: 0 24px; }
.payment-amount {
  background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary));
  color: #fff; border-radius: var(--radius-lg); padding: 34px; text-align: center; margin-bottom: 30px;
}
.payment-amount .amount { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 800; }
.bank-details { background: #fff; border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); padding: 30px; margin-bottom: 30px; }
.bank-details dl { display: grid; grid-template-columns: 160px 1fr; gap: 12px 16px; margin: 0; }
.bank-details dt { color: var(--color-text-light); font-weight: 600; font-size: .9rem; }
.bank-details dd { margin: 0; font-weight: 700; color: var(--color-primary-dark); font-family: 'Inter', monospace; }
.payment-instructions { counter-reset: step; margin-bottom: 30px; }
.payment-instructions li {
  counter-increment: step; position: relative; padding: 12px 0 12px 44px; color: var(--color-text);
}
.payment-instructions li::before {
  content: counter(step); position: absolute; left: 0; top: 8px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .84rem;
}
.copy-btn { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 4px 10px; font-size: .78rem; cursor: pointer; margin-left: 8px; }

/* ---------- 13. Pied de page + WhatsApp flottant ------------------------------- */
.whatsapp-float {
  position: fixed; bottom: 26px; right: 26px; width: 60px; height: 60px; border-radius: 50%;
  background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .45); z-index: 900; animation: wf-pulse 2.4s infinite;
}
@keyframes wf-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

.site-footer { background: var(--color-bg-dark); color: #a7b0c7; padding: 70px 0 0; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col a { color: #a7b0c7; }
.footer-col a:hover { color: var(--color-gold); }
.brand--footer .brand__text { color: #fff; }
.footer-brand p { margin-top: 14px; font-size: .92rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; flex-wrap: wrap; gap: 8px; font-size: .82rem; }
.footer-disclaimer { max-width: 460px; text-align: right; }

/* ---------- 14. Espace admin --------------------------------------------------- */
.admin-body { background: var(--color-bg-alt); min-height: 100vh; }
.admin-topbar {
  background: #fff; border-bottom: 1px solid var(--color-border); padding: 0 28px; height: 72px;
  display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100;
}
.admin-topbar .brand__text { font-size: 1.15rem; }
.admin-topbar-right { display: flex; align-items: center; gap: 18px; }
.admin-user { font-size: .88rem; color: var(--color-text-light); }

.admin-wrap { max-width: 1240px; margin: 0 auto; padding: 34px 28px 80px; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-bg-dark), #142451); padding: 24px; }
.login-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 46px 40px; width: 100%; max-width: 400px; text-align: center; }
.login-card .brand { justify-content: center; margin-bottom: 26px; }
.login-card h1 { font-size: 1.4rem; }

.stat-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-bottom: 34px; }
.stat-card { background: #fff; border-radius: var(--radius-md); padding: 22px 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); text-align: center; }
.stat-card .value { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 800; color: var(--color-primary-dark); }
.stat-card .label { font-size: .78rem; color: var(--color-text-light); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-top: 4px; }
.stat-card.is-total .value { color: var(--color-primary); }

.toolbar {
  background: #fff; border-radius: var(--radius-md); padding: 18px 20px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 22px;
}
.toolbar form { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; align-items: center; }
.toolbar input, .toolbar select { width: auto; min-width: 180px; padding: 10px 14px; }
.toolbar .search-input { flex: 1; min-width: 220px; }

.table-card { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); overflow: hidden; }
table.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; padding: 14px 18px; background: var(--color-bg-alt); font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; color: var(--color-text-light); border-bottom: 1px solid var(--color-border); }
.admin-table th a { color: inherit; }
.admin-table td { padding: 16px 18px; border-bottom: 1px solid var(--color-border); font-size: .92rem; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: #fafbfe; }
.admin-table .actions { display: flex; gap: 8px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 8px; border: 1px solid var(--color-border); background: #fff; color: var(--color-text); cursor: pointer;
}
.icon-btn:hover { background: var(--color-bg-alt); text-decoration: none; }
.icon-btn.danger:hover { background: var(--color-red-light); border-color: #ef9a9a; color: var(--color-red); }

.empty-state { text-align: center; padding: 60px 20px; color: var(--color-text-light); }

.pagination { display: flex; gap: 8px; justify-content: center; padding: 24px; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--color-border); font-size: .88rem; font-weight: 600; color: var(--color-text); }
.pagination a:hover { background: var(--color-bg-alt); text-decoration: none; }
.pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
.detail-card { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); padding: 26px 28px; margin-bottom: 22px; }
.detail-card h3 { font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.detail-row { display: grid; grid-template-columns: 190px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px dashed var(--color-border); font-size: .92rem; }
.detail-row:last-child { border-bottom: none; }
.detail-row dt { color: var(--color-text-light); font-weight: 600; }
.detail-row dd { margin: 0; font-weight: 500; word-break: break-word; }
.doc-link { display: flex; align-items: center; justify-content: space-between; background: var(--color-bg-alt); padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 10px; font-size: .9rem; font-weight: 600; }
.doc-link .muted { color: var(--color-text-light); font-weight: 400; }

.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; font-weight: 600; }

/* ---------- 15. Responsive ------------------------------------------------------ */
@media (max-width: 1100px) {
  .stat-cards { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { order: -1; }
  .detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.6rem; }
  .section { padding: 56px 0; }

  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed; top: 78px; left: 0; right: 0; background: #fff; flex-direction: column;
    align-items: stretch; padding: 20px 24px; gap: 6px; border-bottom: 1px solid var(--color-border);
    transform: translateY(-130%); opacity: 0; transition: transform .25s ease, opacity .25s ease;
    box-shadow: var(--shadow-md);
  }
  .site-nav.is-open { transform: translateY(0); opacity: 1; }
  .site-nav a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
  .site-nav a.btn { margin-top: 10px; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-disclaimer { text-align: center; }
  .cta-band { margin: 0; padding: 40px 26px; }
  .pricing-card__head, .pricing-card__body { padding: 30px 24px; }
  .bank-details dl { grid-template-columns: 1fr; }
  .toolbar form { flex-direction: column; align-items: stretch; }
  .toolbar input, .toolbar select { width: 100%; }
  .admin-wrap { padding: 24px 16px 60px; }
  .form-card { padding: 26px 20px; }
}

/* ============================================================================
   16. EFFETS "WOW" — animations au scroll, glassmorphism, compteurs, badges
   ==========================================================================*/

/* --- Révélation au scroll (IntersectionObserver, voir script.js) --------- */
.reveal {
  opacity: 0;
  transition: opacity .7s var(--ease-smooth), transform .7s var(--ease-smooth);
  will-change: opacity, transform;
}
.reveal-up    { transform: translateY(28px); }
.reveal-fade  { transform: none; }
.reveal-left  { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.reveal-zoom  { transform: scale(.92); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Décalage progressif pour les grilles de cartes (effet "cascade") */
.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-smooth), transform .6s var(--ease-smooth); }
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .15s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .25s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .35s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .45s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .55s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .hero__orb, .hero__badge, .btn-gold::after, .stats-band__bg, .icon-float { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* --- Glassmorphism réutilisable ------------------------------------------- */
.glass-card {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
}

/* --- Compteurs animés (stat-value avec data-count-to, voir script.js) ---- */
.counter-value { font-family: var(--font-heading); font-weight: 800; display: inline-block; }

/* --- Badges "Nouveau" / "Populaire" ---------------------------------------- */
.badge-new {
  display: inline-flex; align-items: center; gap: 4px; background: var(--color-red);
  color: #fff; font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; padding: 3px 10px; border-radius: var(--radius-pill);
  animation: wf-badge-pulse 2.8s ease-out infinite; vertical-align: middle;
}

/* --- Icônes avec légère animation de flottement au repos ------------------ */
.icon-float { display: inline-block; animation: wf-icon-float 3.6s ease-in-out infinite; }
@keyframes wf-icon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* --- Micro-interactions génériques ----------------------------------------- */
.advantage-card, .step-card, .pricing-card, .compare-table-wrap, .stat-card, .detail-card {
  transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth);
}
a, button, .btn, .icon-btn { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, opacity .18s ease; }
.icon-btn:hover { transform: translateY(-2px); }
.checklist li { transition: transform .2s ease; }
.checklist li:hover { transform: translateX(4px); }
[dir="rtl"] .checklist li:hover { transform: translateX(-4px); }

/* ============================================================================
   17. SÉLECTEUR DE LANGUE (FR / AR)
   ==========================================================================*/
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(13,71,161,.08);
  border: 1.5px solid var(--color-border); color: var(--color-primary-dark); font-weight: 700;
  font-size: .82rem; padding: 8px 14px; border-radius: var(--radius-pill); cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.lang-switch:hover { background: var(--color-primary-light); text-decoration: none; }
.site-header--minimal .lang-switch,
.hero .lang-switch { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.site-header--minimal .lang-switch:hover { background: rgba(255,255,255,.2); }

/* ============================================================================
   18. RTL — mise en page arabe
   ==========================================================================*/
[dir="rtl"] {
  text-align: right;
  /* Bascule automatique de la typographie pour tout élément utilisant
     var(--font-heading) / var(--font-body) : Cairo (titres/chiffres) et
     Tajawal (texte courant) sont les polices arabes réellement chargées
     (voir includes/header.php), au lieu de Poppins/Inter qui ne supportent
     pas l'arabe et retombaient silencieusement sur une police système. */
  --font-heading: 'Cairo', 'Tahoma', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Tajawal', 'Tahoma', 'Segoe UI', Arial, sans-serif;
}
[dir="rtl"] .site-header__inner,
[dir="rtl"] .site-nav,
[dir="rtl"] .brand,
[dir="rtl"] .hero__ctas,
[dir="rtl"] .hero__trust,
[dir="rtl"] .footer-bottom,
[dir="rtl"] .radio-group,
[dir="rtl"] .doc-link,
[dir="rtl"] .admin-topbar,
[dir="rtl"] .admin-topbar-right,
[dir="rtl"] .toolbar,
[dir="rtl"] .toolbar form,
[dir="rtl"] .pagination,
[dir="rtl"] .checkbox-line,
[dir="rtl"] .nav-whatsapp { direction: rtl; }

[dir="rtl"] .hero__inner { direction: rtl; }
[dir="rtl"] .hero__content,
[dir="rtl"] .compare.eyebrow,
[dir="rtl"] .section-header,
[dir="rtl"] .form-card,
[dir="rtl"] .confirmation-card,
[dir="rtl"] .pricing-card,
[dir="rtl"] .faq-answer p { text-align: right; }

[dir="rtl"] .site-nav a.active::after { right: 0; left: auto; }
[dir="rtl"] .brand__accent { margin-left: 0; margin-right: 3px; }
[dir="rtl"] .whatsapp-float { right: auto; left: 26px; }
[dir="rtl"] .nav-toggle span { align-self: flex-end; }

[dir="rtl"] .compare-table th, [dir="rtl"] .compare-table td { text-align: right; }
[dir="rtl"] .x-mark, [dir="rtl"] .check-mark { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .checklist li { flex-direction: row-reverse; }
[dir="rtl"] .detail-row { grid-template-columns: 1fr 190px; }
[dir="rtl"] .detail-row dt { text-align: right; }
[dir="rtl"] .form-row,
[dir="rtl"] .bank-details dl { direction: rtl; }
[dir="rtl"] .bank-details dl { grid-template-columns: 1fr 160px; }
[dir="rtl"] .payment-instructions { padding-right: 0; }
[dir="rtl"] .payment-instructions li { padding: 12px 44px 12px 0; }
[dir="rtl"] .payment-instructions li::before { right: 0; left: auto; }
[dir="rtl"] .footer-disclaimer { text-align: right; }
[dir="rtl"] .step-number { margin-inline-end: 0; }
[dir="rtl"] .stat-card, [dir="rtl"] .advantage-card, [dir="rtl"] .confirmation-icon { text-align: center; }
[dir="rtl"] .admin-table th, [dir="rtl"] .admin-table td { text-align: right; }
[dir="rtl"] .icon-btn, [dir="rtl"] .admin-table .actions { direction: ltr; }
[dir="rtl"] .field-error-msg, [dir="rtl"] .form-hint { text-align: right; }
[dir="rtl"] .skip-link { right: -999px; left: auto; }
[dir="rtl"] .skip-link:focus { right: 0; left: auto; border-radius: 0 0 8px 0; }

/* Force l'affichage LTR des numéros de téléphone, emails, RIB/IBAN et URLs
   même dans une page RTL (évite que le signe "+" ou l'ordre des chiffres
   soit inversé par l'algorithme bidirectionnel). */
.ltr-text { direction: ltr; unicode-bidi: embed; display: inline-block; }
[dir="rtl"] .admin-table td:nth-child(3),
[dir="rtl"] .admin-table td:nth-child(4) { direction: ltr; text-align: right; unicode-bidi: plaintext; }

@media (max-width: 768px) {
  [dir="rtl"] .site-nav { direction: rtl; }
  [dir="rtl"] .site-nav a:not(.btn) { text-align: right; }
}

/* ============================================================================
   19. LIGHTBOX (démo de la preuve de paiement)
   ==========================================================================*/
.payment-demo {
  background: #fff; border: 1.5px dashed var(--color-border); border-radius: var(--radius-lg);
  padding: 20px; margin-bottom: 24px; text-align: center;
}
.payment-demo__caption { font-size: .86rem; color: var(--color-text-light); margin: 10px 0 2px; font-weight: 600; }
.payment-demo__hint { font-size: .76rem; color: var(--color-text-light); margin: 0; }
.payment-demo__trigger { display: inline-block; cursor: zoom-in; border-radius: var(--radius-md); overflow: hidden; position: relative; }
.payment-demo__trigger img { max-height: 220px; width: auto; border-radius: var(--radius-md); display: block; transition: transform .3s ease; }
.payment-demo__trigger:hover img { transform: scale(1.03); }
.payment-demo__trigger::after {
  content: '🔍'; position: absolute; bottom: 8px; right: 8px; background: rgba(13,30,66,.7);
  color: #fff; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: .85rem;
}
[dir="rtl"] .payment-demo__trigger::after { right: auto; left: 8px; }

.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(6, 11, 27, .88); z-index: 3000;
  display: flex; align-items: center; justify-content: center; padding: 30px;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
  backdrop-filter: blur(6px);
}
.lightbox-overlay.is-open { opacity: 1; visibility: visible; }
.lightbox-overlay img { max-width: min(92vw, 720px); max-height: 88vh; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.lightbox-close {
  position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff;
  font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255,255,255,.22); }
[dir="rtl"] .lightbox-close { right: auto; left: 26px; }

/* ============================================================================
   20. BARRE DE PROGRESSION (formulaire d'inscription)
   ==========================================================================*/
.form-progress-track {
  position: sticky; top: 78px; height: 5px; background: var(--color-border);
  z-index: 500; margin: 0 0 -5px;
}
.form-progress-bar {
  height: 100%; width: 0%; background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
  transition: width .15s ease; border-radius: 0 4px 4px 0;
}
[dir="rtl"] .form-progress-bar { border-radius: 4px 0 0 4px; }

/* ============================================================================
   21. EFFET TYPING DU HERO
   ==========================================================================*/
.hero-typing { color: var(--color-gold); display: inline; }
.hero-typing__cursor {
  display: inline-block; color: var(--color-gold); font-weight: 300; margin-inline-start: 2px;
  animation: wf-caret-blink 1s step-end infinite;
}
@keyframes wf-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-typing__cursor { animation: none; opacity: 0; } }

/* ============================================================================
   22. CHIFFRES CLÉS (stats-band) — dégradé animé + glassmorphism
   ==========================================================================*/
.stats-band {
  position: relative; overflow: hidden; color: #fff; isolation: isolate;
}
.stats-band__bg {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, #0a1128, #16308a, #1a237e, #0a1128);
  background-size: 300% 300%;
  animation: wf-gradient-shift 16s ease infinite;
}
@keyframes wf-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.stats-band .section-header p { color: #cdd7ef; }
.section-eyebrow--light {
  color: #ffe066; background: rgba(255,255,255,.12);
}
.stats-band__title { color: #fff; }
.stats-grid { gap: 24px; }
.stat-tile {
  padding: 34px 22px; text-align: center; border-radius: var(--radius-lg);
  transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth);
}
.stat-tile:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.stat-tile__value { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 800; color: var(--color-gold); }
.stat-tile__label { margin-top: 8px; font-size: .88rem; color: #cdd7ef; font-weight: 600; }

/* ============================================================================
   23. À PROPOS
   ==========================================================================*/
.about-grid { margin-bottom: 34px; }
.about-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 32px 30px; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth);
}
.about-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.about-card h3 { font-size: 1.15rem; margin-bottom: 12px; }
.about-card p { margin-bottom: 0; }
.about-values { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.about-value-chip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--color-primary-light);
  color: var(--color-primary-dark); font-weight: 700; font-size: .92rem; padding: 10px 22px;
  border-radius: var(--radius-pill); transition: transform .2s ease, box-shadow .2s ease;
}
.about-value-chip:hover { transform: translateY(-3px) scale(1.03); box-shadow: var(--shadow-sm); }

/* ============================================================================
   24. TÉMOIGNAGES
   ==========================================================================*/
.testimonial-grid { align-items: stretch; }
.testimonial-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 28px 26px; box-shadow: var(--shadow-sm); margin: 0; display: flex; flex-direction: column;
  transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth);
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.testimonial-card__stars { color: var(--color-gold); letter-spacing: 2px; margin-bottom: 12px; font-size: .95rem; }
.testimonial-card blockquote {
  margin: 0 0 20px; color: var(--color-text); font-size: .95rem; line-height: 1.65; flex: 1;
  font-style: italic;
}
.testimonial-card figcaption { display: flex; align-items: center; gap: 12px; font-size: .86rem; color: var(--color-text-light); }
.testimonial-card__avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; flex-shrink: 0;
  font-family: var(--font-heading);
}
.testimonial-disclaimer { text-align: center; font-size: .76rem; color: var(--color-text-light); margin-top: 30px; opacity: .8; }

/* ============================================================================
   25. BADGES DE CONFIANCE
   ==========================================================================*/
.trust-section { padding: 60px 0; }
.trust-badges { gap: 24px; }
.trust-badge { text-align: center; padding: 8px 12px; }
.trust-badge__icon {
  width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 14px;
  transition: transform .3s var(--ease-smooth);
}
.trust-badge:hover .trust-badge__icon { transform: scale(1.12) rotate(-4deg); }
.trust-badge h4 { font-size: .98rem; margin-bottom: 6px; }
.trust-badge p { font-size: .84rem; margin-bottom: 0; }

/* ============================================================================
   26. RESPONSIVE — nouvelles sections
   ==========================================================================*/
@media (max-width: 960px) {
  .stats-grid, .trust-badges { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .stats-grid, .trust-badges, .testimonial-grid, .about-grid { grid-template-columns: 1fr; }
  .stat-tile__value { font-size: 2.1rem; }
  .about-values { gap: 10px; }
  .about-value-chip { padding: 8px 16px; font-size: .85rem; }
}

/* ============================================================================
   27. RTL — nouvelles sections
   ==========================================================================*/
[dir="rtl"] .testimonial-card figcaption { direction: rtl; }
[dir="rtl"] .hero-typing__cursor { margin-inline-start: 0; margin-inline-end: 2px; }
[dir="rtl"] .trust-badge:hover .trust-badge__icon { transform: scale(1.12) rotate(4deg); }

/* ============================================================================
   28. CORRECTIFS SPÉCIFIQUES iOS SAFARI / MOBILE
   ==========================================================================*/
/* Évite tout débordement horizontal parasite sur mobile Safari (orbes, dégradés) */
html, body { overflow-x: hidden; width: 100%; }

/* iOS Safari applique un halo bleu/gris disgracieux au tap ; on le neutralise
   partout, tout en gardant les états focus clavier visibles (accessibilité) */
a, button, .btn, .icon-btn, input, textarea, select {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 2px;
}

/* Respect de l'encoche / la zone sûre sur iPhone (notch, Dynamic Island, barre du bas) */
.whatsapp-float {
  bottom: max(26px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  right: max(26px, calc(env(safe-area-inset-right, 0px) + 16px));
}
[dir="rtl"] .whatsapp-float {
  left: max(26px, calc(env(safe-area-inset-left, 0px) + 16px)); right: auto;
}
.site-footer { padding-bottom: max(0px, env(safe-area-inset-bottom, 0px)); }

/* Empêche le zoom automatique de Safari iOS sur les champs de formulaire
   (déclenché quand un champ actif a une taille de police < 16px) */
input, select, textarea { font-size: max(16px, 1rem); }

/* Repli pour Safari < 15.4 qui ne supporte pas :has() : le style de sélection
   de la LLC/C-Corp est appliqué via une classe JS (voir script.js) en plus
   du sélecteur CSS natif, garantissant le même résultat sur tous les Safari. */
.radio-option.is-checked { border-color: var(--color-primary); background: var(--color-primary-light); }

/* Grilles figées en 1 colonne dès 480px pour les très petits écrans (iPhone SE
   et modèles compacts en portrait), évite tout texte tronqué ou débordement */
@media (max-width: 480px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.75rem; }
  .hero__badge { font-size: .76rem; padding: 7px 14px; }
  .container { padding: 0 18px; }
  .cta-band { padding: 34px 20px; }
  .pricing-card__price { font-size: 2.6rem; }
  .form-card { padding: 22px 16px; }
  .stat-card .value { font-size: 1.5rem; }
}

/* Hauteur d'écran fiable sur Safari iOS (la barre d'adresse rétractable
   fausse `100vh`) : on préfère min-height + repli -webkit-fill-available */
.login-wrap { min-height: 100vh; min-height: -webkit-fill-available; }
html { height: -webkit-fill-available; }