@charset "utf-8";
/* CSS Document */


		
		.pricing-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 2rem;
			margin: 2rem auto;
		}
		.pricing-card {
			background: white;
			width: 280px;
			padding: 2rem 1.5rem;
			border-radius: 14px;
			box-shadow: 0 3px 10px rgba(0,0,0,0.08);
			text-align: center;
			position: relative;
			transition: 0.3s;
		}
		.pricing-card:hover {
			transform: translateY(-6px);
			box-shadow: 0 6px 15px rgba(0,0,0,0.12);
		}
		
		
		
		.badge-popular {
			position: absolute;
			top: -12px;
			left: 50%;
			transform: translateX(-50%);
			background: #FFB703;
			color: #fff;
			font-size: 0.8rem;
			font-weight: bold;
			padding: 0.3rem 0.8rem;
			border-radius: 12px;
			box-shadow: 0 2px 5px rgba(0,0,0,0.15);
		}
		.price {
			font-size: 1.6rem;
			margin: 0.5rem 0 0.8rem;
			font-weight: bold;
			color: #007BFF;
		}
		.limits { color:#333; margin-bottom:0.3rem; }
		.totals { font-size:0.85rem; color:#666; margin-bottom:0.8rem; }
		.desc { font-size:0.85rem; color:#555; min-height:3.2rem; }
		.cta-btn {
			display:inline-block;
			background:#007BFF;
			color:#fff;
			padding:0.7rem 1.3rem;
			border-radius:8px;
			text-decoration:none;
			font-weight:bold;
			transition:0.2s;
		}
		.cta-btn:hover { background:#0056b3; }
		@media(max-width:900px){
			.pricing-container { flex-direction:column; align-items:center; }
		}
		
		
		.bulles-cosmiques-link {
		  color: #222 !important;
		  transition: color 0.3s ease;
		}
		
		.bulles-cosmiques-link:hover {
		  color: #fff !important;
		}
		
		
		/* Badge RECOMMANDÉ (Platine) */
		.badge-reco{
		  position:absolute;
		  top:-12px;
		  left:50%;
		  transform:translateX(-50%);
		  background: linear-gradient(90deg,#22d3ee,#3b82f6);
		  color:#001018;
		  font-size: .8rem;
		  font-weight: 800;
		  padding:.3rem .8rem;
		  border-radius:12px;
		  box-shadow: 0 2px 10px rgba(34,211,238,.35);
		  letter-spacing:.2px;
		}
		
		/* Mettre la carte Platine un peu en avant */
		.pricing-card.recommended{
		  border:1px solid #22d3ee;
		  box-shadow: 0 10px 26px rgba(34,211,238,.25);
		  transform: translateY(-3px);
		}
		
		/* Slogan dans la carte Platine */
		.card-slogan{
		  margin: .7rem 0 20px;           /* 👈 espace de 20px en bas */
		  padding: .55rem .7rem;
		  border-radius: 8px;
		  border: 1px dashed rgba(34,211,238,.6);
		  background: #e6fbff;
		  color: #0b3a44;
		  font-size: .86rem;
		  line-height: 1.35;
		}
		
		/* Sous-titre GOLD — beau, lisible, responsive */
		.pricing-card .soustitre_gold{
		  --gold-1:#FFF5CC; --gold-2:#FFE39F; --gold-3:#FFD054; --gold-stroke:#E3A900;
		  margin:.75rem 0 0;
		  padding:.75rem .9rem;
		  font-size:clamp(.92rem,.9rem + .15vw,1.02rem);
		  line-height:1.35;
		  color:#2a1b00;
		  background:linear-gradient(135deg,var(--gold-1) 0%,var(--gold-2) 45%,var(--gold-1) 100%);
		  border:1px solid rgba(227,169,0,.6);
		  border-radius:10px;
		  box-shadow:0 6px 16px rgba(255,193,7,.15), inset 0 1px 0 rgba(255,255,255,.55);
		  position:relative;
		}
		
		/* Liseré or à gauche */
		.pricing-card .soustitre_gold::before{
		  content:"";
		  position:absolute; inset:0 auto 0 0;
		  width:6px; border-radius:10px 0 0 10px;
		  background:linear-gradient(180deg,#FFDF70,#FFB300);
		  box-shadow:0 0 0 1px rgba(0,0,0,.08) inset;
		}
		
		/* Liens et emphase à l’intérieur (si besoin) */
		.pricing-card .soustitre_gold a{
		  color:#8a5b00; text-decoration:underline; text-underline-offset:3px; text-decoration-color:#FFCC33;
		}
		.pricing-card .soustitre_gold strong{ color:#8a5b00; }
		
		/* Mode sombre (auto) */
		@media (prefers-color-scheme: dark){
		  .pricing-card .soustitre_gold{
			color:#fff6e0;
			background:linear-gradient(135deg,rgba(255,208,84,.06),rgba(255,208,84,.12));
			border-color:rgba(227,169,0,.35);
			box-shadow:0 10px 24px rgba(255,193,7,.12), inset 0 1px 0 rgba(255,255,255,.05);
		  }
		  .pricing-card .soustitre_gold::before{
			background:linear-gradient(180deg,#FFD54F,#FFB300);
		  }
		  .pricing-card .soustitre_gold a{ color:#FFD54F; }
		}
		
		/* Petit effet “glow” doux si animations autorisées */
		@media (prefers-reduced-motion: no-preference){
		  .pricing-card .soustitre_gold{
			background-size:200% 200%;
			animation:goldGlow 6s ease-in-out infinite alternate;
		  }
		  @keyframes goldGlow{
			0%{ background-position:0% 50%; box-shadow:0 6px 16px rgba(255,193,7,.12), inset 0 1px 0 rgba(255,255,255,.5); }
			100%{ background-position:100% 50%; box-shadow:0 12px 26px rgba(255,193,7,.2), inset 0 1px 0 rgba(255,255,255,.65); }
		  }
		}
		
		/* Variante compacte si tu veux réduire la place */
		.pricing-card .soustitre_gold.is-compact{
		  padding:.6rem .75rem; font-size:.92rem;
		}
		
		/* Badge GOLD (style “recommandé” version or) */
		.badge-gold{
		  position:absolute;
		  top:-12px;
		  left:50%;
		  transform:translateX(-50%);
		  background: linear-gradient(90deg,#FFE39F,#FFD054 45%,#FFC107 75%,#FFB300);
		  color:#2a1b00;
		  font-size:.8rem;
		  font-weight:800;
		  padding:.3rem .8rem;
		  border-radius:12px;
		  letter-spacing:.2px;
		  box-shadow:
			0 2px 10px rgba(255,193,7,.35),
			inset 0 1px 0 rgba(255,255,255,.6);
		  border:1px solid rgba(227,169,0,.6);
		}
		
		/* Mettre la carte GOLD un peu en avant (équivalent Platine) */
		.pricing-card.gold{
		  border:1px solid #E3A900;
		  box-shadow:0 10px 26px rgba(255,193,7,.25);
		  transform:translateY(-3px);
		}
		
		/* Slogan / encart version GOLD (si tu veux, optionnel) */
		.card-slogan--gold{
		  margin:.7rem 0 20px;
		  padding:.55rem .7rem;
		  border-radius:8px;
		  border:1px dashed rgba(227,169,0,.6);
		  background:#FFF7E0;
		  color:#5a3b00;
		  font-size:.86rem;
		  line-height:1.35;
		}
		
		/* Mode sombre (optionnel) */
		@media (prefers-color-scheme: dark){
		  .badge-gold{ color:#1a1200; }
		  .pricing-card.gold{
			border-color:rgba(227,169,0,.55);
			box-shadow:0 10px 26px rgba(255,193,7,.18);
		  }
		  .card-slogan--gold{
			background:rgba(255,208,84,.10);
			border-color:rgba(227,169,0,.4);
			color:#ffe7b0;
		  }
		}


		/* --- Badge Univers --- */
		.badge-univers{
		  position:absolute;
		  top:-12px; left:50%; transform:translateX(-50%);
		  background: linear-gradient(90deg,#7dd3fc,#38bdf8,#0ea5e9);
		  color:#02243b;
		  font-size:.8rem; font-weight:800;
		  padding:.3rem .8rem; border-radius:12px;
		  box-shadow:0 2px 10px rgba(14,165,233,.35), inset 0 1px 0 rgba(255,255,255,.6);
		  border:1px solid rgba(56,189,248,.6);
		  letter-spacing:.2px;
		}
		
		/* --- Carte Univers : ciel étoilé + halo en rotation --- */
		.pricing-card.univers{
		  position: relative;
		  overflow:visible;
		  border:1px solid rgba(56,189,248,.45);
		  box-shadow:0 10px 26px rgba(56,189,248,.18);
		  transform:translateY(-3px);
		  background:
			radial-gradient(1200px 500px at 120% -20%, rgba(56,189,248,.12), rgba(3,105,161,0) 60%),
			radial-gradient(800px 600px at -10% 120%, rgba(125,211,252,.12), rgba(2,132,199,0) 60%),
			linear-gradient(180deg, #06131e, #0a1c2c 55%, #0b1f34);
		  color:#e6f7ff;
		}
		
		/* petits “étoiles” simulées */
		.pricing-card.univers::after{
		  content:"";
		  position:absolute; inset:0;
		  background-image:
			radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.45),transparent 40%),
			radial-gradient(1px 1px at 80% 60%,rgba(255,255,255,.35),transparent 40%),
			radial-gradient(1px 1px at 60% 20%,rgba(255,255,255,.35),transparent 40%),
			radial-gradient(1px 1px at 35% 75%,rgba(255,255,255,.4),transparent 40%),
			radial-gradient(1px 1px at 70% 85%,rgba(255,255,255,.3),transparent 40%);
		  pointer-events:none;
		}
		
		/* halo conique en rotation */
		.pricing-card.univers::before{
		  content:"";
		  position:absolute;
		  left:-30%; top:-30%; width:160%; height:160%;
		  background: conic-gradient(from 0deg,
			rgba(56,189,248,.0) 0deg,
			rgba(125,211,252,.16) 35deg,
			rgba(56,189,248,.0) 70deg);
		  filter: blur(18px);
		  animation: spinLight 18s linear infinite;
		  pointer-events:none;
		}
		@keyframes spinLight{
		  to{ transform: rotate(360deg); }
		}
		@media (prefers-reduced-motion:no-preference){
		  .pricing-card.univers::before{ animation-duration: 18s; }
		}
		@media (prefers-reduced-motion:reduce){
		  .pricing-card.univers::before{ animation: none; }
		}
		
		/* Sous-titre Univers (style “aurore”) */
		.pricing-card .soustitre_univers{
		  margin:.75rem 0 0; padding:.75rem .9rem;
		  font-size:clamp(.92rem,.9rem + .15vw,1.02rem); line-height:1.35;
		  color:#dff6ff;
		  background:linear-gradient(135deg,rgba(56,189,248,.18),rgba(14,165,233,.28));
		  border:1px solid rgba(56,189,248,.45);
		  border-radius:10px;
		  box-shadow:0 8px 20px rgba(56,189,248,.15), inset 0 1px 0 rgba(255,255,255,.08);
		  position:relative;
		}
		.pricing-card .soustitre_univers::before{
		  content:"";
		  position:absolute; inset:0 auto 0 0; width:6px; border-radius:10px 0 0 10px;
		  background:linear-gradient(180deg,#7dd3fc,#0ea5e9);
		  box-shadow:0 0 0 1px rgba(0,0,0,.08) inset;
		}
		
		/* 🌌 Lisibilité sur fond nuit (Univers) */
		.pricing-card.univers{ position:relative; overflow:visible; color:#EAF7FF; }
		.pricing-card.univers::before,
		.pricing-card.univers::after{ z-index:0; }   /* halo/étoiles en dessous */
		.badge-univers{ z-index:3; }                 /* badge au-dessus */
		
		/* Titres & prix */
		.pricing-card.univers h3{ color:#BFE9FF !important; text-shadow:0 1px 0 rgba(0,0,0,.5); }
		.pricing-card.univers .price{ color:#7DD3FC !important; text-shadow:0 1px 0 rgba(0,0,0,.6); }
		
		/* Textes de contenu */
		.pricing-card.univers .limits{ color:#D9F2FF !important; text-shadow:0 1px 0 rgba(0,0,0,.5); }
		.pricing-card.univers .totals{ color:#BFE5FF !important; text-shadow:0 1px 0 rgba(0,0,0,.5); }
		.pricing-card.univers .desc{ color:#EAF7FF !important; text-shadow:0 1px 0 rgba(0,0,0,.5); }
		.pricing-card.univers .desc strong,
		.pricing-card.univers .limits b,
		.pricing-card.univers .totals b{ color:#FFFFFF !important; }
		
		/* Sous-titre Univers */
		.pricing-card .soustitre_univers{
		  color:#EAF8FF; border-color:rgba(56,189,248,.55);
		  box-shadow:0 8px 20px rgba(56,189,248,.18), inset 0 1px 0 rgba(255,255,255,.08);
		}
		.pricing-card .soustitre_univers strong{ color:#fff; }
		
		/* Bouton */
		.pricing-card.univers .pay-btn,
		.pricing-card.univers .cta-btn{ background:#38BDF8; }
		.pricing-card.univers .pay-btn:hover,
		.pricing-card.univers .cta-btn:hover{ background:#0EA5E9; }
		
		
		
		/* Effet commun à toutes les cartes */
		.pricing-card{
		  --base-lift: 0px;                     /* décalage de base (par défaut 0) */
		  transition: transform .3s, box-shadow .3s;
		  will-change: transform;
		  transform: translateY(var(--base-lift));
		}
		.pricing-card:hover{
		  transform: translateY(calc(var(--base-lift) - 6px)); /* lève de 6px par-dessus la base */
		  box-shadow: 0 6px 15px rgba(0,0,0,.12);
		}
		
		/* Variantes : juste l’offset de base, PAS de transform ici */
		.pricing-card.gold{    --base-lift: -3px; }
		.pricing-card.univers{ --base-lift: -3px; }
		
		/* (optionnel) hover un peu plus fort pour les “mises en avant” */
		.pricing-card.gold:hover,
		.pricing-card.univers:hover{
		  transform: translateY(calc(var(--base-lift) - 8px));
		}