/* =========================================================
   IRON TV PRO — Light High-Tech Theme (2025) v2 — FULL CSS
   Clean • Serious • Modern • White background
   ========================================================= */

:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --ink:#0b1220;
  --muted:#53617c;
  --line:#e7eaf3;
  --primary:#2456ff;        /* electric blue */
  --primary-2:#7c3aed;      /* violet accent */
  --accent:#00c2ff;         /* cyan accent */
  --ok:#0f9d58;
  --warn:#f59e0b;
  --danger:#ef4444;
  --radius:16px;
  --shadow:0 10px 30px rgba(9, 16, 31, .08);
  --shadow-sm:0 4px 14px rgba(9, 16, 31, .06);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, Poppins, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 480px at 100% -20%, rgba(36,86,255,.06), transparent 60%),
    radial-gradient(1000px 420px at -10% 0%, rgba(0,194,255,.06), transparent 60%),
    linear-gradient(var(--bg), var(--bg));
  line-height:1.6;
}

/* Utilities */
.container{width:min(1180px, 92%); margin-inline:auto}
.section{padding:72px 0}
.section-title{font-size:clamp(1.5rem, 2.5vw, 2rem); font-weight:800; letter-spacing:.2px}
.section-sub{color:var(--muted); margin-top:-6px}
.grid{display:grid; gap:22px}

/* Focus & skip link */
:focus-visible{outline:2px solid var(--primary); outline-offset:3px; border-radius:10px}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:12px; top:12px; padding:.6rem .9rem; background:#111; color:#fff; z-index:9999}

/* Visibility helpers (used by popup) */
.hidden{display:none !important}
.popup.hidden, .popup[aria-hidden="true"]{display:none !important}

/* ================= HEADER ================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;
}
.logo img{display:block; height:auto}

.main-nav ul{display:flex; gap:22px; list-style:none; margin:0; padding:0}
.main-nav a{
  color:var(--ink); text-decoration:none; font-weight:600; font-size:.98rem;
  padding:10px 12px; border-radius:12px; transition:all .25s ease;
}
.main-nav a:hover{background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line)}
.main-nav a.is-active{background:linear-gradient(120deg, rgba(36,86,255,.15), rgba(0,194,255,.15))}

.burger{
  display:none; width:44px; height:44px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface-2); position:relative;
}
.burger span{
  position:absolute; left:10px; right:10px; height:2px; background:#27324b; border-radius:2px;
  transition:transform .25s ease, top .25s ease, opacity .2s;
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){top:21px; transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:21px; transform:rotate(-45deg)}

.mobile-menu{display:none; padding:14px 0 20px; background:#fff; border-bottom:1px solid var(--line)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block; padding:12px 14px; border-radius:12px; text-decoration:none; color:var(--ink)}
.mobile-menu a:hover{background:var(--surface-2)}

/* ================= HERO ================= */
.hero{
  position:relative; isolation:isolate; min-height:72vh;
  display:grid; place-items:center; text-align:center;
  background:
    radial-gradient(1000px 320px at 50% 100%, rgba(124,58,237,.08), transparent 60%);
}
.hero .overlay{position:absolute; inset:0; z-index:-1}
.hero h1{
  font-size:clamp(2.2rem, 6vw, 4rem); margin:0 0 8px; font-weight:900; letter-spacing:.4px;
  background:linear-gradient(90deg, #0b1220, #334155 40%, #0b1220);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero h2{margin:0 0 12px; color:#334155; font-weight:600; opacity:.96}
.hero p{color:var(--muted); margin:0 0 26px}

.btn{
  --g:linear-gradient(120deg, var(--primary), var(--accent));
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 20px; border-radius:14px; border:0; cursor:pointer;
  color:white; font-weight:800; letter-spacing:.2px; text-decoration:none;
  background:var(--g); box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, filter .2s ease;
}
.btn:hover{transform:translateY(-2px); filter:saturate(1.08)}

/* ================= FEATURE CARDS ================= */
.features{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.features{grid-template-columns:1fr}}
.feature{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm);
}

/* ================= PRICING (fond clair + compat) ================= */
#tarifs, .pricing{
  padding:84px 0;
  background:var(--bg);
  text-align:center;
}

#tarifs .section-title,
.pricing .section-title{
  color:var(--ink);
  margin-bottom:10px;
}
#tarifs .section-sub,
.pricing .section-subtitle,
.pricing .intro-text{
  color:var(--muted);
  max-width:900px; margin:0 auto 22px; line-height:1.75;
}

/* Conteneur cartes */
#tarifs .cards{
  display:flex; flex-wrap:wrap; gap:22px; justify-content:center; margin-bottom:24px;
}
.pricing-cards{ /* compat ancien HTML */
  display:flex; flex-wrap:wrap; gap:22px; justify-content:center; margin-bottom:24px;
}

/* Carte prix (version claire) */
#tarifs .card,
.pricing-cards .card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px; text-align:left;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .25s ease, border-color .2s ease;
  flex:0 1 260px;
}
#tarifs .card:hover,
.pricing-cards .card:hover{
  transform:translateY(-4px);
  border-color:#d8def0;
  box-shadow:0 16px 36px rgba(9,16,31,.08);
}

#tarifs .card h3, .pricing-cards .card h4{font-size:1.15rem; margin-bottom:6px}
#tarifs .card .muted, .duration{color:var(--muted); font-size:.95rem; margin-bottom:6px}
#tarifs .card .price, .price{
  font-size:1.9rem; color:var(--primary); margin:10px 0 14px; font-weight:800;
}
#tarifs .card ul, .pricing-cards .card ul{
  list-style:none; margin:0 0 18px; padding:0;
  color:#334155;
}
#tarifs .card ul li, .pricing-cards .card ul li{
  margin:8px 0; padding-left:0;
}
#tarifs .card ul li::before, .pricing-cards .card ul li::before{
  content:"•"; color:var(--primary-2); margin-right:6px;
}
#tarifs .card .btn, .pricing-cards .card .btn{
  display:inline-block; width:100%; padding:12px 18px;
}

/* Mise en avant (Premium) — supporte .pop (nouveau) et .highlight (ancien) */
#tarifs .card.pop,
.pricing-cards > .card.highlight{
  order:2; flex:0 1 310px; transform:scale(1.04);
  z-index:2; border:2px solid var(--primary);
  background:linear-gradient(180deg, rgba(36,86,255,.06), rgba(124,58,237,.05));
  box-shadow:0 10px 36px rgba(36,86,255,.15);
}
.pricing-cards > .card.highlight::before{
  content:"⭐ Populaire";
  position:absolute; top:-12px; right:-12px;
  background:var(--primary-2); color:#fff; font-size:.8rem; font-weight:700;
  padding:4px 8px; border-radius:6px;
  box-shadow:0 2px 6px rgba(9,16,31,.16);
}
#tarifs .card.pop .price,
.pricing-cards > .card.highlight .price{
  font-size:2.25rem; line-height:1.1;
  background:linear-gradient(90deg, var(--primary), var(--primary-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ================= TABLES ================= */
.table{width:100%; border-collapse:separate; border-spacing:0; margin:12px 0 18px}
.table th,.table td{padding:12px 14px; border-bottom:1px solid var(--line)}
.table thead th{background:var(--surface-2); text-align:left}

/* ================= STEPS ================= */
.steps{max-width:900px; margin:56px auto 0}
.steps-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px; margin-top:18px;
}
.step{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px; text-align:center;
  box-shadow:var(--shadow-sm);
}
.step h4{color:var(--primary); font-size:1.05rem; margin-bottom:8px}

/* ================= FORMS / POPUP ================= */
.input, .select, .textarea{
  width:100%; padding:12px 14px; background:#fff;
  border:1px solid var(--line); border-radius:12px; color:var(--ink);
}
.label{font-size:.9rem; color:#334155}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-row.full{grid-template-columns:1fr}
.form-msg{margin-top:8px; color:var(--ok); font-weight:700}

.popup{position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:rgba(9,16,31,.45); backdrop-filter:blur(6px)}
.dialog{width:min(560px,92%); background:#fff; border:1px solid var(--line); border-radius:20px; padding:20px; box-shadow:var(--shadow); position:relative}
.close{position:absolute; top:10px; right:12px; width:36px; height:36px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2); color:#111; font-size:22px; cursor:pointer}

/* Compat si d’anciens templates popup sont utilisés */
.popup-overlay{position:fixed; inset:0; background:rgba(9,16,31,.45); display:flex; justify-content:center; align-items:center; z-index:9999; padding:18px}
.popup-overlay[hidden]{display:none}
.popup-overlay:not([hidden]), .popup-overlay.force-open{display:flex!important}
.popup-content{width:min(520px,96vw); background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; color:var(--ink); box-shadow:var(--shadow)}
.popup-close{position:absolute; top:10px; right:12px; width:36px; height:36px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); color:#0b1220; cursor:pointer}
.popup-content h2{margin-bottom:14px; color:var(--ink); text-align:center; font-size:1.4rem}
.popup-content input{width:100%; padding:12px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink); margin-bottom:10px}

/* ================= FOOTER & FAB ================= */
.footer{margin-top:36px; border-top:1px solid var(--line); background:#fff}
.footer-inner{display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px; width:min(1180px,92%); margin:0 auto; padding:24px 0}
@media (max-width:820px){.footer-inner{grid-template-columns:1fr}}
.footer h4{margin:.2rem 0 .4rem}
.footer p,.footer li{color:#55637f}
.footer ul{list-style:none; margin:0; padding:0}
.footer a{color:#1b2a52; text-decoration:none}
.footer-bottom{border-top:1px solid var(--line); padding:12px 0; text-align:center; color:#6b7a99}

#whatsapp-fab{position:fixed; right:18px; bottom:18px; z-index:60; width:56px; height:56px; border-radius:18px; display:grid; place-items:center; color:#fff; text-decoration:none; background:#25D366; box-shadow:var(--shadow)}

/* ================= MOTION ================= */
@keyframes floaty { from{transform:translateY(0)} 50%{transform:translateY(-6px)} to{transform:translateY(0)} }
.btn.floater{animation:floaty 6s ease-in-out infinite}
.reveal{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}

/* ================= RESPONSIVE NAV ================= */
@media (max-width:940px){
  .main-nav ul{display:none}
  .burger{display:inline-block}
}
/* =========================================================
   TARIFS — plein écran mobile/tablette + CTA lumineux centré
   À placer APRÈS global.css
   ========================================================= */

/* Base: s'assurer que la carte peut pousser le bouton en bas */
.pricing-cards .card{
  display:flex;
  flex-direction:column;
}

/* Bouton lumineux (desktop et +) */
.pricing .card .btn{
  margin-top:auto;
  align-self:center;
  width:100%;
  max-width:520px;
  text-align:center;
  font-weight:800;
  letter-spacing:.2px;
  border:0;
  transition:transform .16s ease, box-shadow .2s ease, filter .2s ease;
  background-image:linear-gradient(90deg, var(--brand-1), var(--brand-2));
  color:var(--on-primary, #fff);
  box-shadow:0 10px 32px rgba(0,0,0,.12), 0 0 0 0 rgba(0,0,0,0);
}
.pricing .card .btn:hover{ transform:translateY(-2px); filter:saturate(1.1); }
.pricing .card .btn:active{ transform:translateY(0); }
.pricing .card .btn:focus-visible{ outline:3px solid color-mix(in srgb, var(--brand-2) 55%, transparent); outline-offset:2px; }

/* Désactiver le zoom de la carte "highlight" sur petits écrans */
@media (max-width: 1200px){
  .pricing-cards > .card.highlight{
    transform:none !important;
    order:initial !important;
    flex:1 1 auto;
  }
}

/* ====================== TABLETTE ====================== */
@media (max-width: 1024px){
  /* Une carte par ligne pour l’impact visuel */
  .pricing-cards{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
  }

  /* La carte remplit l’écran (hors header/marges) */
  .pricing-cards .card{
    min-height:calc(92vh - var(--header-h, 76px));
    padding:26px 22px 24px;
    text-align:center;
    border-radius:18px;
  }

  .pricing .tier-title{ text-align:center; margin:32px 0 16px; }

  /* Typo plus grande pour lecture à distance */
  .pricing .card h4{ font-size:1.35rem; margin-bottom:8px; }
  .pricing .card .duration{ font-size:1.05rem; }
  .pricing .card .price{ font-size:2.35rem; margin:14px 0 16px; }
  .pricing .card ul{ font-size:1rem; line-height:1.7; margin-bottom:18px; }

  /* CTA large et visible */
  .pricing .card .btn{
    font-size:1.1rem;
    padding:16px 22px;
    border-radius:14px;
    box-shadow:
      0 18px 42px color-mix(in srgb, var(--brand-1) 24%, transparent),
      0 2px 0 rgba(0,0,0,.05);
  }
}

/* ====================== MOBILE ====================== */
@media (max-width: 640px){
  .pricing{ padding:40px 0 32px; }
  .pricing .section-title{ font-size:clamp(1.4rem, 4.8vw, 1.8rem); }
  .pricing .section-subtitle,
  .pricing .intro-text{ font-size:.98rem; }

  .pricing-cards{
    gap:18px;
  }

  .pricing-cards .card{
    /* Plein écran + zone sûre pour les encoches */
    min-height:calc(92vh - var(--header-h, 76px));
    padding:24px 18px max(18px, env(safe-area-inset-bottom));
    border-radius:16px;
  }

  .pricing .card h4{ font-size:1.28rem; }
  .pricing .card .duration{ font-size:1.02rem; }
  .pricing .card .price{ font-size:2.25rem; margin:12px 0 14px; }
  .pricing .card ul{ font-size:.98rem; }

  .pricing .card .btn{
    font-size:1.06rem;
    padding:16px 20px;
    max-width:none;         /* plein écran sur mobile */
    width:100%;
    border-radius:16px;
    box-shadow:
      0 20px 46px color-mix(in srgb, var(--brand-2) 28%, transparent),
      0 2px 0 rgba(0,0,0,.06);
  }
}

/* Effet "respire" pour la mise en avant */
@media (max-width: 1024px){
  .pricing-cards > .card.highlight{
    border-width:2px;
    box-shadow:0 18px 40px rgba(0,0,0,.08), 0 0 0 2px color-mix(in srgb, var(--brand-1) 22%, transparent);
  }
}

/* Respect des préférences utilisateur */
@media (prefers-reduced-motion: reduce){
  .pricing .card .btn,
  .pricing-cards > .card.highlight{ transition:none !important; }
}
/* ===== FIX VISIBILITÉ CTA "Commander" ===== */

/* La carte devient un conteneur flex vertical */
.pricing-cards .card{
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Assure-toi que la liste ne "mange" pas la place du CTA */
.pricing .card ul{ margin-bottom: 14px; }

/* Cible explicitement le bouton de commande */
.pricing .card .order-btn{
  margin-top: auto;           /* pousse le bouton en bas de la carte */
  display: block;
  align-self: center;         /* centré */
  width: 100%;
  max-width: 520px;           /* large mais raisonnable sur desktop */
  text-align: center;
  font-weight: 800;
  letter-spacing: .2px;
  border: 0;
  border-radius: 16px;
  padding: 16px 22px;

  /* très visible (dégradé brand) */
  background-image: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  color: var(--on-primary, #fff);

  /* reste visible près du bas de l’écran si la carte est haute */
  position: sticky;
  bottom: max(14px, env(safe-area-inset-bottom)); /* iPhone encoches ok */

  /* glow pour attirer l’œil */
  box-shadow:
    0 18px 42px color-mix(in srgb, var(--brand-2) 28%, transparent),
    0 2px 0 rgba(0,0,0,.06);
  transition: transform .16s ease, filter .18s ease, box-shadow .2s ease;
}
.pricing .card .order-btn:hover{ transform: translateY(-2px); filter: saturate(1.08); }
.pricing .card .order-btn:active{ transform: translateY(0); }
.pricing .card .order-btn:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--brand-2) 55%, transparent);
  outline-offset: 2px;
}

/* ===== Plein écran mobile/tablette + CTA très large ===== */
@media (max-width: 1024px){
  .pricing-cards{
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .pricing-cards .card{
    min-height: calc(92vh - var(--header-h, 76px));
    padding: 26px 20px max(20px, env(safe-area-inset-bottom));
    text-align: center;
    border-radius: 18px;
  }
  .pricing .card .order-btn{
    max-width: none;   /* plein écran sous 1024px */
  }
}

/* Mobile ajustements */
@media (max-width: 640px){
  .pricing-cards .card{
    min-height: calc(92vh - var(--header-h, 76px));
    padding: 24px 16px max(18px, env(safe-area-inset-bottom));
    border-radius: 16px;
  }
  .pricing .card .order-btn{
    font-size: 1.06rem;
    padding: 16px 18px;
    border-radius: 16px;
  }
}

/* iOS/Android barres dynamiques : utilise les unités modernes quand dispo */
@supports (height: 100svh){
  @media (max-width: 1024px){
    .pricing-cards .card{
      min-height: calc(92svh - var(--header-h, 76px));
    }
  }
}

/* Si ta carte mise en avant avait un scale, on neutralise sur petits écrans */
@media (max-width: 1200px){
  .pricing-cards > .card.highlight{
    transform: none !important;
    order: initial !important;
    flex: 1 1 auto;
  }
}

/* Accessibilité: limite les animations si demandé */
@media (prefers-reduced-motion: reduce){
  .pricing .card .order-btn{ transition: none !important; }
}
/* ===== CTA "Commander" — Hard reset visibilité ===== */
.pricing .card .order-btn,
.pricing .card .order-btn:link,
.pricing .card .order-btn:visited{
  /* couleurs sûres */
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  /* stoppe tout clip texte/gradient texte hérité */
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;

  /* fond réellement coloré (avec fallback au cas où les variables seraient trop pâles) */
  background: linear-gradient(
    90deg,
    var(--brand-1, #0066ff),
    var(--brand-2, #00e3a5)
  ) !important;

  /* annule tout style rendant transparent */
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;

  /* s'assure qu'il passe au-dessus de décos/overlays éventuels */
  position: sticky;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 3;
  box-shadow:
    0 18px 42px color-mix(in srgb, var(--brand-2, #00e3a5) 28%, transparent),
    0 2px 0 rgba(0,0,0,.06);
}

/* si un style global met du "gradient text" partout, on neutralise dans le bouton */
.pricing .card .order-btn *,
.pricing .card .order-btn > *{
  -webkit-text-fill-color: inherit !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* au cas où un style "ghost/outline" prendrait le dessus */
.pricing .card .order-btn.btn--ghost,
.pricing .card .order-btn.btn-outline{
  background: linear-gradient(90deg, var(--brand-1, #0066ff), var(--brand-2, #00e3a5)) !important;
  border: 0 !important;
}

/* sur petits écrans on garde le CTA large et lisible */
@media (max-width: 1024px){
  .pricing .card .order-btn{
    width: 100%;
    max-width: none;
    font-weight: 800;
    letter-spacing: .2px;
    padding: 16px 22px;
    border-radius: 16px;
  }
}
/* ==== Popup Commander — styles sûrs & contrastés ==== */
/* Définis clairement la palette (pas d’auto-référence) */
:root{
  --brand-1: #2456ff;  /* bleu électrique */
  --brand-2: #00e3a5;  /* vert/bleu néon */
  --on-primary: #ffffff;
}

/* Conteneur du popup */
#popupOverlay .popup-content{
  max-width: 560px;
  width: min(560px, 96vw);
  padding: 24px;
  background: #fff;         /* fond clair assuré */
  color: #0b1220;           /* texte sombre lisible */
}

/* ====== Récapitulatif (fallback solide + gradient si supporté) ====== */
#popupOverlay .pkg-title,
#popupOverlay .pkg-price,
#popupOverlay .pkg-duration{
  text-align: center;
  font-weight: 800;
  margin: 6px 0;
  letter-spacing: .2px;
  color: #0ea5ff;                 /* fallback visible (sans gradient) */
}

@supports (-webkit-background-clip: text) or (background-clip: text){
  #popupOverlay .pkg-title,
  #popupOverlay .pkg-price,
  #popupOverlay .pkg-duration{
    background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* gradient texte */
    /* on laisse la couleur fallback ci-dessus pour les navigateurs sans support */
  }
}

/* ====== Bouton COMMANDER — gros, centré, bien contrasté ====== */
#popupOverlay .submit-btn{
  display: block;
  width: 100%;
  max-width: 520px;          /* large sur desktop */
  margin: 16px auto 0;       /* centré */
  padding: 16px 22px;
  border: 0;
  border-radius: 16px;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: .2px;
  text-align: center;

  /* fond plein (pas de text-clip ici) */
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  color: var(--on-primary) !important;    /* texte blanc lisible */
  -webkit-text-fill-color: var(--on-primary) !important;

  box-shadow:
    0 18px 42px color-mix(in srgb, var(--brand-2) 28%, transparent),
    0 2px 0 rgba(0,0,0,.06);
  transition: transform .16s ease, filter .18s ease, box-shadow .2s ease;
}
#popupOverlay .submit-btn:hover{ transform: translateY(-2px); filter: saturate(1.08); }
#popupOverlay .submit-btn:active{ transform: translateY(0); }
#popupOverlay .submit-btn:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--brand-2) 55%, transparent);
  outline-offset: 2px;
}

/* Neutralise tout style global de “texte en dégradé” potentiel dans le bouton */
#popupOverlay .submit-btn *,
#popupOverlay .submit-btn > *{
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: inherit !important;
}

/* ====== Pleine largeur sur tablette & mobile ====== */
@media (max-width: 1024px){
  #popupOverlay .popup-content{
    width: min(520px, 96vw);
    padding: 22px 18px;
  }
  #popupOverlay .submit-btn{
    max-width: none;               /* full width */
    border-radius: 16px;
    padding: 16px 20px;
  }
}
@media (max-width: 640px){
  #popupOverlay .popup-content{
    padding: 20px 16px max(18px, env(safe-area-inset-bottom));
    border-radius: 16px;
  }
  #popupOverlay .submit-btn{
    font-size: 1.06rem;
  }
}
/* --- Révélation : ne cacher .reveal que si JS est actif --- */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
html.js .reveal.in { opacity: 1; transform: none; }

/* --- Header toujours lisible au-dessus du hero --- */
.site-header { z-index: 100; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); }
.site-header .main-nav a { color: #0b1220; }

/* --- Hero : texte bien visible, quoi qu'il arrive --- */
.hero .overlay { z-index: -1; pointer-events: none; }
.hero h1 { color: #0b1220; /* fallback lisible si gradient texte ne s’applique pas */ }
.hero h2 { color: #334155; }
.hero p  { color: var(--muted); }

/* Nos applications: empiler sur tablette/mobile */
@media (max-width: 1024px){
  #nos-applications .grid{
    grid-template-columns: 1fr !important; /* passe en 1 colonne */
  }
  #nos-applications .video-wrapper{
    margin-bottom: 16px;
  }
}

/* Rendre l'iframe vraiment responsive */
#nos-applications .video-wrapper{
  aspect-ratio: 16 / 9;           /* garde le ratio */
}
#nos-applications .video-wrapper .app-video{
  width: 100%;
  height: 100%;
}

/* ===== Glow au survol pour les cartes "Pourquoi nous" ===== */
#atouts .features .feature{
  position: relative;
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

/* Halo lumineux + légère élévation */
#atouts .features .feature:hover,
#atouts .features .feature:focus-within{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  box-shadow:
    0 14px 34px rgba(36,86,255,.18),
    0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 26%, transparent);
}

/* Voile de lumière subtil en overlay (sans bloquer les clics) */
#atouts .features .feature::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(36,86,255,.12), transparent 60%),
    radial-gradient(120% 70% at 50% 100%, rgba(124,58,237,.10), transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
}
#atouts .features .feature:hover::before,
#atouts .features .feature:focus-within::before{
  opacity: 1;
}

/* Focus visible (accessibilité) */
#atouts .features .feature:focus-within{
  outline: 0;
}
#atouts .features .feature :focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Réduit les mouvements si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce){
  #atouts .features .feature{ transform: none !important; transition: box-shadow .25s ease, border-color .25s ease; }
}

/* ===== Glow PERSISTANT au chargement + boost au survol ===== */

/* État par défaut : halo léger toujours actif */
#atouts .features .feature{
  /* légère élévation pour donner du relief dès le chargement */
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 26%, var(--line));
  box-shadow:
    0 12px 28px rgba(36,86,255,.12),
    0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent),
    0 0 16px color-mix(in srgb, var(--accent) 18%, transparent);
}
#atouts .features .feature::before{
  opacity: .8; /* voile lumineux visible même sans hover */
}

/* Survol / focus clavier : intensifie l’effet */
#atouts .features .feature:hover,
#atouts .features .feature:focus-within{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  box-shadow:
    0 14px 34px rgba(36,86,255,.18),
    0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 26%, transparent);
}
#atouts .features .feature:hover::before,
#atouts .features .feature:focus-within::before{
  opacity: 1;
}

/* Accessibilité : si l’utilisateur réduit les animations */
@media (prefers-reduced-motion: reduce){
  #atouts .features .feature{
    transform: none; /* pas de translation par défaut */
  }
}

/* ===== STEPS — Glow persistant + boost au survol ===== */
.steps .step{
  position: relative;
  overflow: hidden;                  /* pour le halo interne */
  transform: translateY(-2px);       /* léger relief dès le chargement */
  border-color: color-mix(in srgb, var(--primary) 26%, var(--line));
  box-shadow:
    0 12px 28px rgba(36,86,255,.12),
    0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent),
    0 0 16px color-mix(in srgb, var(--accent) 18%, transparent);
  transition:
    transform .18s ease,
    box-shadow .25s ease,
    border-color .2s ease,
    background .25s ease;
}

/* Halo lumineux interne (identique à la section atouts) */
.steps .step::before{
  content: "";
  position: absolute;
  inset: -2px;                       /* couvre toute la carte (léger débord pour le blur) */
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(16px);
  opacity: .8;                       /* visible même sans hover */
  transform: translateZ(0);
  transition: opacity .25s ease, transform .35s ease;

  /* deux nappes radiales pour un glow propre */
  background:
    radial-gradient(820px 280px at 70% -10%,
      color-mix(in srgb, var(--primary) 22%, transparent) 0,
      transparent 60%),
    radial-gradient(700px 240px at -20% 120%,
      color-mix(in srgb, var(--accent) 24%, transparent) 0,
      transparent 58%);
}

/* Survol / focus clavier : intensifie l’effet */
.steps .step:hover,
.steps .step:focus-within{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  box-shadow:
    0 14px 34px rgba(36,86,255,.18),
    0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 26%, transparent);
}
.steps .step:hover::before,
.steps .step:focus-within::before{
  opacity: 1;
}

/* Accessibilité : si l’utilisateur réduit les animations */
@media (prefers-reduced-motion: reduce){
  .steps .step{ transform: none; }
}

/* ===== PRICING — Glow persistant UNIQUEMENT pour les Premium (.card.highlight) ===== */
.pricing-cards .card.highlight{
  position: relative;
  overflow: hidden;                       /* halo interne propre */
  transform: translateY(-2px);            /* léger relief dès le chargement */
  /* renforce le cadre existant sans écraser ta mise en avant */
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  box-shadow:
    0 12px 28px rgba(36,86,255,.16),
    0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 22%, transparent);
  transition:
    transform .18s ease,
    box-shadow .25s ease,
    border-color .2s ease,
    background .25s ease;
  will-change: transform, box-shadow;
}

/* Halo lumineux interne (radiales bleue/violet) */
.pricing-cards .card.highlight::before{
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(16px);
  opacity: .85;                           /* visible même sans hover */
  transform: translateZ(0);
  transition: opacity .25s ease, transform .35s ease;
  background:
    radial-gradient(880px 300px at 70% -10%,
      color-mix(in srgb, var(--primary) 26%, transparent) 0,
      transparent 60%),
    radial-gradient(760px 260px at -20% 120%,
      color-mix(in srgb, var(--primary-2) 26%, transparent) 0,
      transparent 58%);
}

/* Survol / focus clavier : boost l’éclat et l’élévation */
.pricing-cards .card.highlight:hover,
.pricing-cards .card.highlight:focus-within{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  box-shadow:
    0 16px 36px rgba(36,86,255,.22),
    0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent),
    0 0 28px color-mix(in srgb, var(--accent) 28%, transparent);
}
.pricing-cards .card.highlight:hover::before,
.pricing-cards .card.highlight:focus-within::before{
  opacity: 1;
}

/* S’assure que le contenu (texte, bouton) passe au-dessus du halo */
.pricing-cards .card.highlight > *{
  position: relative;
  z-index: 1;
}

/* Accessibilité : réduit l’animation si demandé par l’utilisateur */
@media (prefers-reduced-motion: reduce){
  .pricing-cards .card.highlight{ transform:none; transition:none; }
  .pricing-cards .card.highlight::before{ transition:none; }
}

/* ===== PREMIUM GLOW — force visible dès le chargement, sans hover ===== */
/* Spécificité volontairement élevée pour écraser les styles précédents */
.pricing .pricing-cards > .card.highlight{
  position: relative;
  /* garde ton style existant mais ajoute un glow net et persistant */
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line)) !important;
  box-shadow:
    0 14px 34px rgba(36,86,255,.20),
    0 0 0 2px color-mix(in srgb, var(--primary) 26%, transparent),
    0 0 26px color-mix(in srgb, var(--accent) 26%, transparent) !important;
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
  overflow: visible; /* laisse le halo respirer autour */
}

/* Halo doux en arrière-plan, sans blend-mode (compat mobile) */
.pricing .pricing-cards > .card.highlight::after{
  content:"";
  position:absolute;
  inset:-6px;                     /* déborde légèrement pour un effet diffus */
  border-radius: inherit;
  pointer-events:none;
  z-index:0;
  opacity:.85;                    /* visible dès le chargement */
  background:
    radial-gradient(420px 220px at 80% -10%,
      color-mix(in srgb, var(--primary) 22%, transparent) 0%,
      transparent 62%),
    radial-gradient(380px 200px at -10% 110%,
      color-mix(in srgb, var(--primary-2) 22%, transparent) 0%,
      transparent 60%);
  filter: blur(10px);
}

/* S’assure que le contenu passe par-dessus le halo */
.pricing .pricing-cards > .card.highlight > *{
  position: relative;
  z-index: 1;
}

/* Hover/focus : on accentue légèrement */
.pricing .pricing-cards > .card.highlight:hover,
.pricing .pricing-cards > .card.highlight:focus-within{
  transform: translateY(-4px);
  box-shadow:
    0 18px 40px rgba(36,86,255,.26),
    0 0 0 2px color-mix(in srgb, var(--primary) 32%, transparent),
    0 0 32px color-mix(in srgb, var(--accent) 32%, transparent) !important;
}

/* Mobile : garde le glow même si d’autres règles neutralisent transform */
@media (max-width:1200px){
  .pricing .pricing-cards > .card.highlight{
    transform: none; /* conforme à tes règles mobiles */
  }
}

/* Accessibilité : pas d’animations si préférence réduite */
@media (prefers-reduced-motion: reduce){
  .pricing .pricing-cards > .card.highlight{ transition: none; }
}

/* Titre principal (H1 du hero) en dégradé lumineux */
.hero h1{
  background: linear-gradient(90deg, #2456ff, #00c2ff 50%, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; /* Chrome/Safari */
  color: transparent;                   /* fallback */
  text-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 22px rgba(36,86,255,.10);
}

/* ===== CONTACT — addendum (rev A) ===== */
/* Messages d’erreurs et aides */
.form .help{ color: var(--muted); margin: 6px 0 0; font-size: .92rem; }
.form .err{ color: var(--danger); margin: 6px 0 0; font-weight: 700; font-size: .92rem; }
.input[aria-invalid="true"]{
  border-color: color-mix(in srgb, var(--danger) 60%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent);
}

/* Honeypot (visuellement masqué mais présent pour les bots) */
.hp-field{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Consentement */
.consent-row{ align-items: start; }
.consent{ display: flex; gap: 10px; align-items: flex-start; font-size: .98rem; }
.consent a{ text-decoration: underline; color: var(--ink); }

/* CTA state */
.btn[disabled]{ opacity: .6; cursor: not-allowed; filter: grayscale(.1); }

/* Message global */
.form-message{ margin-top: 10px; font-weight: 700; }

/* Petits raffinements */
.cta-row .btn{ min-height: 44px; }

/* =========================================================
   CONTACT — "Pro Look" pack (visuel + accessibilité)
   Coller en BAS du global.css
   ========================================================= */

/* --- Sélecteurs limités à la section Contact pour éviter les effets de bord --- */
#contact{ position: relative; overflow: hidden; scroll-margin-top: 90px; }

/* Halo de fond subtil, pro (z-index négatif pour ne pas gêner les clics) */
#contact::before,
#contact::after{
  content:""; position:absolute; inset:auto; z-index:-1; pointer-events:none; filter: blur(18px); opacity:.6;
}
#contact::before{
  top:-120px; right:-160px; width:520px; height:320px;
  background:
    radial-gradient(420px 220px at 30% 50%, color-mix(in srgb, var(--brand-1, #2456ff) 22%, transparent), transparent 62%),
    radial-gradient(380px 200px at 80% 60%, color-mix(in srgb, var(--brand-2, #00e3a5) 22%, transparent), transparent 60%);
}
#contact::after{
  bottom:-160px; left:-140px; width:560px; height:340px;
  background:
    radial-gradient(480px 240px at 60% 40%, color-mix(in srgb, var(--accent, #00c2ff) 22%, transparent), transparent 62%),
    radial-gradient(360px 200px at 10% 50%, color-mix(in srgb, var(--primary-2, #7c3aed) 18%, transparent), transparent 60%);
}

/* --- Cartes "glass" (formulaire + aside) avec bordure dégradée propre --- */
#contact .form,
#contact aside.card{
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, color-mix(in srgb, var(--brand-1) 40%, transparent), color-mix(in srgb, var(--brand-2) 40%, transparent)) border-box;
  border:1px solid transparent;
  border-radius: 18px;
  box-shadow: var(--shadow);
}
#contact .form{ padding:20px; }
#contact aside.card{ padding:18px !important; }

/* Effet hover discret et pro sur les cartes */
#contact .form:hover,
#contact aside.card:hover{
  box-shadow: 0 18px 40px rgba(9,16,31,.10);
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .25s ease;
}

/* --- Champs : focus ring lumineux, hover doux, hauteur/typo harmonisées --- */
#contact .input, #contact .select, #contact .textarea{
  background:#fff;
  border-radius: 12px;
  border:1px solid var(--line);
  transition: border-color .18s ease, box-shadow .25s ease, background .2s ease;
}
#contact .input:hover, #contact .select:hover, #contact .textarea:hover{
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
}
#contact .input:focus, #contact .select:focus, #contact .textarea:focus{
  outline:0;
  border-color: color-mix(in srgb, var(--brand-1) 55%, var(--line));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand-1) 18%, transparent),
    0 10px 24px rgba(9,16,31,.06);
}

/* Messages d’aide / erreurs plus lisibles */
#contact .help{ color: #5b6b8a; font-size:.92rem; margin:6px 0 0; }
#contact .err{ color: var(--danger); font-weight:700; font-size:.92rem; margin:6px 0 0; }

/* --- Boutons : variantes différenciées + micro-animations --- */
#contact .btn{ will-change: transform, filter, box-shadow; }
#contact .btn:hover{ transform: translateY(-2px); filter: saturate(1.06); }

#contact .whatsapp-btn{
  background: #25D366 !important;
  color:#fff !important;
  box-shadow: 0 12px 28px rgba(37,211,102,.26), 0 2px 0 rgba(0,0,0,.05);
}
#contact .whatsapp-btn:hover{
  box-shadow: 0 16px 36px rgba(37,211,102,.30), 0 2px 0 rgba(0,0,0,.06);
}

#contact .mail-btn{
  background: linear-gradient(90deg, #0ea5ff, #2563eb) !important;
  color:#fff !important;
  box-shadow: 0 12px 28px rgba(14,165,255,.22), 0 2px 0 rgba(0,0,0,.05);
}
#contact .mail-btn:hover{
  box-shadow: 0 16px 36px rgba(14,165,255,.28), 0 2px 0 rgba(0,0,0,.06);
}

/* Animation de "shine" très légère au survol des boutons */
@keyframes btn-shine { from{ background-position: 200% 0 } to{ background-position: -200% 0 } }
#contact .btn[data-variant]{
  background-size: 200% 100%;
}
#contact .btn[data-variant]:hover{
  animation: btn-shine 1.2s linear;
}

/* --- Bandeau d’état (form-message) façon toast pro --- */
#contact .form-message{
  margin-top: 12px; font-weight: 700; padding: 10px 12px; border-radius: 12px;
  background: var(--surface-2);
  border:1px solid var(--line);
}
#contact .form-message:empty{ display:none; }

/* --- Titre & sous-titre : un peu plus de présence --- */
#contact .section-title{
  letter-spacing:.3px;
  background: linear-gradient(90deg, var(--ink), #334155 40%, var(--ink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#contact .section-sub{ font-size:1.02rem; }

/* --- Grille responsive : garde le focus sur le formulaire --- */
@media (max-width: 920px){
  #contact .grid{ grid-template-columns: 1fr !important; }
  #contact aside.card{ order: 2; }   /* Le formulaire reste en premier */
}

/* --- Accessibilité & préférences utilisateur --- */
@media (prefers-reduced-motion: reduce){
  #contact .form:hover, #contact aside.card:hover{ transform:none; transition:none; }
  #contact .btn[data-variant]:hover{ animation:none; }
}

/* =========================================================
   APK — cartes centrées + glow léger + forme uniforme
   À coller en BAS de global.css
   ========================================================= */

/* Conteneur: passe en grille responsive, espacements réguliers */
#apk-list .apk-cards{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* Cartes APK: centre total + même forme/hauteur + bordure dégradée */
#apk-list .apk-cards .card{
  position: relative;
  display: flex;                 /* uniformise la hauteur et l’alignement */
  flex-direction: column;
  align-items: center;           /* centre horizontalement tout le contenu */
  justify-content: flex-start;
  text-align: center;            /* titres, listes, textes centrés */
  padding: 22px;
  min-height: 420px;             /* même “gabarit” pour toutes */
  border-radius: 18px;
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg,
      color-mix(in srgb, var(--brand-1, #2456ff) 40%, transparent),
      color-mix(in srgb, var(--brand-2, #00e3a5) 40%, transparent)
    ) border-box;
  box-shadow: var(--shadow-sm);
  overflow: hidden;              /* propre autour du glow */
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Glow doux qui entoure la carte (léger par défaut, un peu plus au hover) */
#apk-list .apk-cards .card::after{
  content: "";
  position: absolute;
  inset: -6px;                   /* déborde légèrement pour un halo externe */
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: .55;                  /* léger */
  filter: blur(14px);
  background:
    radial-gradient(420px 220px at 80% -10%,
      color-mix(in srgb, var(--primary, #2456ff) 22%, transparent) 0,
      transparent 62%),
    radial-gradient(380px 200px at -10% 110%,
      color-mix(in srgb, var(--primary-2, #7c3aed) 22%, transparent) 0,
      transparent 60%);
}
#apk-list .apk-cards .card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(9,16,31,.10);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
}
#apk-list .apk-cards .card:hover::after{ opacity: .75; }

/* S’assure que le contenu passe au-dessus du glow (::after) */
#apk-list .apk-cards .card > *{ position: relative; z-index: 1; }

/* Zone logo: bloc carré identique pour toutes + logo centré/contain */
#apk-list .apk-cards .card .logo{
  width: 96px; height: 96px;
  border-radius: 22px;
  display: grid; place-items: center;
  margin: 4px 0 10px;
  background: linear-gradient(180deg, var(--surface-2), #fff);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
#apk-list .apk-cards .card .logo img{
  max-width: 70%; max-height: 70%;
  width: auto; height: auto;
  object-fit: contain; display: block;
}

/* Titres / meta */
#apk-list .apk-cards .card h3{ margin: 10px 0 6px; font-size: 1.15rem; }
#apk-list .apk-cards .card .duration{ margin: 0 0 10px; }

/* Liste centrée et aérée (mêmes hauteurs entre cartes) */
#apk-list .apk-cards .card ul{
  list-style: none; padding: 0; margin: 0 0 14px;
  text-align: center;
}
#apk-list .apk-cards .card ul li{
  margin: 6px 0;
}
#apk-list .apk-cards .card ul li::before{
  content: "•"; color: var(--primary-2); margin-right: 6px;
}

/* Bloc boutons: centré et largeur maîtrisée, pousse vers le bas pour
   équilibrer la hauteur (le CTA reste au même niveau visuel entre cartes) */
#apk-list .apk-cards .card .grid{
  width: 100%;
  max-width: 380px;
  align-self: center;
  justify-items: center;
  margin-top: auto;    /* pousse le bloc boutons vers le bas de la carte */
  gap: 10px !important;
}
#apk-list .apk-cards .card .btn{ width: 100%; }
#apk-list .apk-cards .card .muted{ display: block; text-align: center; }

/* Responsive: cartes un peu moins hautes et logos plus compacts */
@media (max-width: 640px){
  #apk-list .apk-cards .card{ min-height: 380px; padding: 20px; }
  #apk-list .apk-cards .card .logo{ width: 84px; height: 84px; border-radius: 20px; }
}

/* Accessibilité — réduit les animations si demandé */
@media (prefers-reduced-motion: reduce){
  #apk-list .apk-cards .card,
  #apk-list .apk-cards .card:hover{ transform: none; transition: none; }
}

/* =========================================================
   TARIFS — Glow léger global + Premium très lumineux + badge
   À coller en BAS de global.css (après tous les autres styles)
   ========================================================= */

/* 1) Toutes les cartes : halo discret en permanence + léger lift au hover */
.pricing-cards .card{
  position: relative;
  overflow: hidden; /* propre pour le halo externe */
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 16%, var(--line));
  box-shadow:
    0 10px 26px rgba(36,86,255,.06),
    0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent);
}
.pricing-cards .card::after{
  /* halo externe très léger (persisant) */
  content:"";
  position:absolute; inset:-6px;
  border-radius: inherit;
  pointer-events:none;
  z-index:0;
  opacity:.45;
  filter: blur(12px);
  background:
    radial-gradient(420px 220px at 80% -10%,
      color-mix(in srgb, var(--primary) 16%, transparent) 0,
      transparent 62%),
    radial-gradient(360px 200px at -10% 110%,
      color-mix(in srgb, var(--accent) 18%, transparent) 0,
      transparent 60%);
}
.pricing-cards .card:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 26%, var(--line));
  box-shadow:
    0 16px 36px rgba(36,86,255,.10),
    0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}
.pricing-cards .card:hover::after{ opacity:.65; }

/* 2) Premium (.highlight) : bordure dégradée + halo plus fort et constant */
.pricing-cards > .card.highlight{
  border: 2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(120deg, var(--brand-1), var(--brand-2)) border-box;
  box-shadow:
    0 14px 34px rgba(36,86,255,.20),
    0 0 0 2px color-mix(in srgb, var(--primary) 24%, transparent),
    0 0 26px color-mix(in srgb, var(--accent) 26%, transparent);
  transform: translateY(-2px);
}
.pricing-cards > .card.highlight::after{
  /* halo interne/extérieur plus visible */
  opacity:.9;
  filter: blur(14px);
  background:
    radial-gradient(520px 260px at 80% -10%,
      color-mix(in srgb, var(--brand-1) 34%, transparent) 0,
      transparent 62%),
    radial-gradient(480px 240px at -10% 110%,
      color-mix(in srgb, var(--brand-2) 34%, transparent) 0,
      transparent 60%);
}
.pricing-cards > .card.highlight:hover{
  transform: translateY(-4px);
  box-shadow:
    0 18px 40px rgba(36,86,255,.26),
    0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent),
    0 0 32px color-mix(in srgb, var(--accent) 32%, transparent);
}

/* 3) Badge “Le + populaire” (top-right) — robuste et lisible */
#tarifs .pricing-cards > .card.highlight::before,
.pricing .pricing-cards > .card.highlight::before{
  content:"⭐ Le + populaire";
  position:absolute;
  top:-12px; right:-12px;
  z-index:2;
  padding:4px 10px;
  font-size:.82rem; font-weight:800; letter-spacing:.2px;
  color:#fff;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(9,16,31,.18);
}

/* S’assure que le contenu passe au-dessus des halos */
.pricing-cards .card > *{ position: relative; z-index: 1; }

/* Mobile/tablette : garde l’effet sans exagérer */
@media (max-width: 1024px){
  .pricing-cards .card{ transform: none; }
  .pricing-cards .card:hover{ transform: none; }
  .pricing-cards > .card.highlight{
    box-shadow:
      0 14px 32px rgba(36,86,255,.18),
      0 0 0 2px color-mix(in srgb, var(--primary) 24%, transparent),
      0 0 24px color-mix(in srgb, var(--accent) 24%, transparent);
  }
}

/* Accessibilité : réduit les motions si demandé */
@media (prefers-reduced-motion: reduce){
  .pricing-cards .card,
  .pricing-cards .card:hover,
  .pricing-cards > .card.highlight,
  .pricing-cards > .card.highlight:hover{
    transition: none !important;
    transform: none !important;
  }
}