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

	
	   #main-container {
			margin-left: 260px; /* largeur du sidebar */
			padding: 20px;
			transition: margin-left 0.3s ease, padding 0.3s ease;
			position: relative;
    		z-index: 1; /* suffisant pour gérer son contenu */
		}
		
		#main-header {
			text-align: center;
			margin-bottom: 20px;
		}
		
		.header-logo {
			height: 100px;
			border-radius: 50%;
			margin-bottom: 10px;
		}
		
		.header-logo-page {
			height: 150px;
			margin-bottom: 10px;
		}
		
		#main-header h1 {
			font-size: 2em;
			margin: 0;
			color: #FFF;
			margin-top:20px;
		}
		
		.swiper {
            width: 90%;
            max-width: 1000px;
            margin: 20px auto;
            border-radius: 12px;
            overflow: hidden;
        }
        .swiper-slide img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 8px;
        }
        section {
            padding: 15px 15px;
            max-width: 1000px;
            margin: auto;
        }
		
		/* Responsive */
		@media (max-width: 768px) {
			#main-container {
				margin-left: 0;
				padding: 5px;
			}
			
			#main-header {
				padding-top: 10px;
			}
		
			#main-header h1 {
				font-size: 1.5em;
			}
		
			.header-logo {
				height: 60px;
			}
			.header-logo-page {
				height: 100px;
			}
		}
		
		footer {
			margin-left: 260px; /* largeur du sidebar */
			margin-bottom:0px;
			margin-right:0px;
            color: #ccc;
            padding: 20px;
            text-align: center;
            font-size: 0.9em;
        }
		
	
		@media (max-width: 768px) {
		  footer {
		 	margin: 0;
			padding-bottom: 80px; /* hauteur du menu en bas */
			position: relative;
			z-index: 999;
		  }
		
		  body {
			padding-bottom: 80px; /* empêche le contenu d'être masqué sous le menu */
		  }
		  
				
		}

		/* Styles généraux pour la section des 3 piliers */
		#pillars {
		  margin-top: 40px;
		  padding: 20px;
		}
		
		#pillars h2 {
		  text-align: center;
		  margin-bottom: 30px;
		}
		
		/* Cartes des piliers */
		#pillars div[style*="background:#111"] {
		  background-color: #111 !important;
		  color: #f5f5f5; /* texte blanc clair */
		  border: 1px solid #222;
		  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
		  transition: transform 0.3s ease, box-shadow 0.3s ease;
		}
		
		#pillars div[style*="background:#111"]:hover {
		  transform: translateY(-5px);
		  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.7);
		}
		
		/* Titres des cartes */
		#pillars h3 {
		  text-align: center;
		  color: #FFD700; /* Or pour l'effet premium */
		  margin-bottom: 15px;
		}
		
		/* Liste des bénéfices */
		#pillars ul {
		  list-style: none; /* Supprime les puces par défaut */
		  padding-left: 0;
		}
		
		#pillars ul li {
		  position: relative;
		  padding-left: 30px; /* espace pour l’icône */
		  margin: 10px 0;
		  font-size: 1em;
		  line-height: 1.5;
		  color: #e0e0e0; /* gris clair lisible */
		}
		
		/* Icône personnalisée devant chaque li */
		#pillars ul li::before {
		  content: "✔"; /* coche */
		  position: absolute;
		  left: 0;
		  color: #00ff99; /* Vert néon pour bien ressortir */
		  font-weight: bold;
		}

		.nav-links a.active {
		  background: linear-gradient(135deg, #1E90FF 0%, #7fb3ff 60%);
		  color: #fff;
		  font-weight: bold;
		  border-radius: 8px;
		  box-shadow: 0 0 12px rgba(30, 144, 255, 0.4);
		  transition: all 0.3s ease;
		}
		
		.nav-links a.active:hover {
		  box-shadow: 0 0 18px rgba(30, 144, 255, 0.7);
		  transform: translateY(-2px);
		}		
		
		.bulles-cosmiques-link {
		  color: #222 !important;
		  transition: color 0.3s ease;
		}
		
		.bulles-cosmiques-link:hover {
		  color: #fff !important;
		}
		
		.btn-inscrire {
			display: inline-block;
			background-color: #007BFF;
			color: white;
			padding: 10px 20px;
			text-decoration: none;
			border-radius: 6px;
			font-weight: bold;
			font-size: 1em;
			box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
			transition: all 0.3s ease;
		}
		
		.btn-inscrire:hover {
			background-color: #0056b3;
			box-shadow: 0 6px 12px rgba(0, 123, 255, 0.4);
			transform: translateY(-2px);
		}
		
		
		  /* Par défaut (desktop) : ratio 16/9 */
		  .iframe-bulles {
			width: 100%;
			aspect-ratio: 16/9;
			border: none;
			border-radius:14px;
		  }
		  
		  /* En mode mobile : ratio 9/16 */
		  @media (max-width: 768px) {
		 	#presentation {
			 	margin:0px auto;
			}
			.iframe-bulles {
			  aspect-ratio: 9/16;
			}
		  }
		
		  .cosmic-tip{
			--bg1:#0a0f1a; --bg2:#0b1f2e; --neon:#00C2FF; --glow:rgba(0,194,255,.45);
			position:relative; border-radius:16px; padding:18px 20px; overflow:hidden;
			background:
			  radial-gradient(90% 130% at 10% -10%, rgba(0,194,255,.18), transparent 60%),
			  radial-gradient(80% 100% at 110% 0%, rgba(0,255,170,.10), transparent 60%),
			  linear-gradient(180deg, var(--bg2), var(--bg1));
			border:1px solid rgba(255,255,255,.08);
			box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 8px 26px rgba(0,0,0,.35), 0 0 24px var(--glow) inset;
			color:#EAFEFF; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
				margin-top: 22px;            /* espace au-dessus */
		  }
		  .cosmic-tip h3{
			margin:0 0 6px; font-size:1.1rem; letter-spacing:.3px; color:#9BE6FF;
			text-shadow:0 0 8px rgba(0,194,255,.6);
			display:flex; align-items:center; gap:8px;
		  }
		  .live-dot{
			width:9px; height:9px; border-radius:50%; background:#ff4d4f; box-shadow:0 0 10px #ff4d4f;
			display:inline-block; animation: pulse 1.2s infinite ease-in-out;
		  }
		  @keyframes pulse{
			0%,100%{ transform:scale(1); box-shadow:0 0 8px #ff4d4f;}
			50%{ transform:scale(1.25); box-shadow:0 0 16px #ff8688;}
		  }
		  
		  .cosmic-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
		  .pill{
			display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
			background:rgba(0,194,255,.10); border:1px solid rgba(0,194,255,.35);
			font-weight:700; font-size:.92rem; color:#EAFEFF; box-shadow: inset 0 0 10px rgba(0,194,255,.18);
		  }
		  .pill small{ opacity:.9; font-weight:600; font-size:.82rem }
		  .tiers{ display:flex; gap:6px; flex-wrap:wrap }
		  .tier{
			padding:4px 9px; border-radius:999px; font-size:.78rem; font-weight:700;
			border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
		  }
		  .tier.gold{  background: linear-gradient(180deg,#FFE08233,#FFD54F22); border-color:#FFD54F66; color:#fff8e1; }
		  .tier.silver{background: linear-gradient(180deg,#B0BEC533,#CFD8DC22); border-color:#B0BEC566; color:#f1f5f9; }
		  .tier.plat{  background: linear-gradient(180deg,#90CAF933,#64B5F622); border-color:#64B5F666; color:#e3f2fd; }
		  .cta{
			margin-left:auto; display:inline-flex; align-items:center; gap:10px; padding:10px 14px;
			border-radius:12px; border:1px solid var(--neon); color:#001018; text-decoration:none; font-weight:800;
			background: linear-gradient(180deg,#00C2FF,#00a6d8); box-shadow: 0 0 18px rgba(0,194,255,.55);
			transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
			white-space:nowrap;
		  }
		  .cta:hover{ transform: translateY(-1px); box-shadow:0 0 26px rgba(0,194,255,.85)}
		  .cta svg{ width:16px; height:16px; fill:currentColor }
		  .sub{ margin-top:4px; font-size:.9rem; opacity:.9 }
		  @media (max-width:720px){
			.cta{ width:100%; justify-content:center; margin-top:10px }
			.cosmic-row{ gap:10px }
		  }
		  
		   .export-hero{
			--bg1:#8b5cf6;     /* violet */
			--bg2:#ec4899;     /* fuchsia */
			--glow:rgba(236,72,153,.55);
			--chip-bg:rgba(255,255,255,.12);
			--chip-bd:rgba(255,255,255,.28);
			--ink:#0f172a;
		
			background: linear-gradient(135deg,var(--bg1),var(--bg2));
			color:#fff; border-radius:18px; padding:16px 18px;
			box-shadow: 0 10px 28px var(--glow);
			display:flex; align-items:center; gap:14px; flex-wrap:wrap;
			margin-top: 22px;            /* espace au-dessus */
		  }
		  .export-hero .eyebrow{
			display:inline-flex; align-items:center; gap:8px;
			padding:6px 10px; border-radius:999px;
			background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35);
			font-weight:800; font-size:.9rem; letter-spacing:.2px;
		  }
		  .export-hero h3{
			margin:0; font-size:1.2rem; font-weight:900; line-height:1.2;
		  }
		  .export-hero .sub{
			margin:2px 0 0; opacity:.95; font-size:.95rem;
		  }
		  .export-hero .chips{ display:flex; gap:6px; flex-wrap:wrap }
		  .export-hero .chip{
			padding:4px 10px; border-radius:999px; font-size:.82rem; font-weight:700;
			background:var(--chip-bg); border:1px solid var(--chip-bd);
		  }
		  .export-hero .cta{
			margin-left:auto; display:inline-flex; align-items:center; gap:10px;
			padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:900;
			background:#fff; color:var(--ink);
			box-shadow:0 0 24px var(--glow);
			transition: transform .12s ease, box-shadow .2s ease;
			white-space:nowrap;
		  }
		  .export-hero .cta:hover{ transform: translateY(-1px); box-shadow:0 0 32px var(--glow) }
		  .export-hero .cta svg{ width:16px; height:16px; fill:currentColor }
		  @media (max-width:720px){
			.export-hero{ padding:14px }
			.export-hero .cta{ width:100%; justify-content:center; margin-top:6px }
		  }
		  
		  /* === Teaser non-abonné === */
		.ch-teaser{
		  border-radius:18px;
		  padding:16px 18px;
		  background:linear-gradient(180deg, rgba(0,191,255,.10), transparent);
		  border:1px solid rgba(0,0,0,.08);
		  box-shadow: 0 8px 30px rgba(0,0,0,.06);
		  backdrop-filter: blur(6px);
		  max-width: 1080px; margin: 14px auto;
		}
		@media (prefers-color-scheme: dark){
		  .ch-teaser{
			background:linear-gradient(180deg, rgba(0,191,255,.10), transparent);
			border-color: rgba(255,255,255,.08);
			box-shadow: 0 8px 30px rgba(0,255,221,.08);
		  }
		}
		.ch-teaser__eyebrow{
		  display:inline-block; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
		  padding:.25rem .5rem; border-radius:999px;
		  background:linear-gradient(180deg, rgba(0,191,255,.10), transparent);
		}
		.ch-teaser__title{ margin:.4rem 0 .2rem 0; font-size: clamp(1.05rem, 1rem + .6vw, 1.5rem); }
		.ch-teaser__bullets{ margin:.4rem 0; padding-left: 1rem; display:grid; gap:.25rem; }
		.ch-teaser__bullets li{ line-height:1.35; }
		.ch-teaser__hint{ margin:.5rem 0 .8rem 0; }
		.ch-teaser__cta{ display:flex; gap:.6rem; flex-wrap:wrap; }
		.ch-btn{
		  display:inline-block; border-radius:999px; padding:.55rem .9rem; text-decoration:none; font-weight:700;
		  border:1px solid transparent;
		}
		.ch-btn--primary{
		  background: linear-gradient(90deg, #00ffe0, #7cffd5, #ffd84d);
		  color:#0b1220; box-shadow: 0 8px 24px rgba(0,255,221,.25);
		}
		.ch-btn--primary:hover{ filter: brightness(1.05); }
		.ch-btn--ghost{
		  background: transparent; border-color: rgba(0,0,0,.15); color:#333;
		}
		@media (prefers-color-scheme: dark){
		  .ch-btn--ghost{ border-color: rgba(255,255,255,.18); color:#dfeaf0; }
		}
		.ch-teaser__note{ margin-top:.5rem; font-size:.8rem; opacity:.8; }
		@media (max-width:768px){
		  .ch-teaser{ padding:14px; }
		  .ch-teaser__cta{ flex-direction:column; }
		  .ch-btn{ text-align:center; width:100%; }
		}
		
		
		/* === HERO GOLD : Planétarium vivant === */
		.gold-hero{
		  --g1:#FFF7E0; --g2:#FFE39F; --g3:#FFD054; --g4:#FFC107; --g5:#FFB300;
		  --ink:#2a1b00; --glow:rgba(255,193,7,.55);
		
		  position:relative;
		  border-radius:18px;
		  padding:16px 18px;
		  color:var(--ink);
		
		  background:
			radial-gradient(90% 130% at 10% -10%, rgba(255,208,84,.22), transparent 60%),
			radial-gradient(80% 100% at 110% 0%, rgba(255,179,0,.16), transparent 60%),
			linear-gradient(135deg, var(--g1), var(--g2));
		  border:1px solid rgba(227,169,0,.55);
		  box-shadow:
			0 10px 28px rgba(0,0,0,.12),
			0 0 38px rgba(255,193,7,.25) inset;
		  overflow:hidden;
		}
		
		/* léger shimmer doux */
		.gold-hero::after{
		  content:"";
		  position:absolute; inset:-30% -40% auto -40%;
		  height:200px;
		  background:linear-gradient(115deg,transparent,rgba(255,255,255,.65),transparent);
		  transform:skewX(-20deg) translateX(-30%);
		  pointer-events:none;
		  opacity:.35;
		  filter:blur(1px);
		}
		@media (prefers-reduced-motion:no-preference){
		  .gold-hero::after{ animation: goldShine 6s ease-in-out infinite; }
		}
		@keyframes goldShine{
		  0%{ transform:skewX(-20deg) translateX(-30%); }
		  100%{ transform:skewX(-20deg) translateX(160%); }
		}
		
		.gold-hero h3{
		  margin:0 0 6px;
		  font-size:1.2rem; font-weight:900; letter-spacing:.3px;
		  color:#7A5600;
		  text-shadow:0 0 10px rgba(255,208,84,.55);
		  display:flex; align-items:center; gap:8px;
		}
		
		/* point live or */
		.gold-dot{
		  width:9px; height:9px; border-radius:50%;
		  background:#FFC107; box-shadow:0 0 12px #FFC107;
		  display:inline-block; animation: pulseGold 1.2s infinite ease-in-out;
		}
		@keyframes pulseGold{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.25);} }
		
		.gold-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
		
		.pill-gold{
		  display:inline-flex; align-items:center; gap:6px;
		  padding:6px 10px; border-radius:999px; font-weight:800; font-size:.92rem;
		  color:#5a3b00;
		  background:linear-gradient(180deg, rgba(255,208,84,.25), rgba(255,208,84,.15));
		  border:1px solid rgba(227,169,0,.6);
		  box-shadow: inset 0 0 10px rgba(255,193,7,.18);
		}
		.pill-gold small{ opacity:.9; font-weight:700; font-size:.82rem }
		.pill-gold.is-outline{
		  background:transparent; border-style:dashed;
		}
		
		.tiers-gold{ display:flex; gap:6px; flex-wrap:wrap }
		.tiers-gold .tier{
		  padding:4px 9px; border-radius:999px; font-size:.78rem; font-weight:800;
		  border:1px solid rgba(227,169,0,.5);
		  background:linear-gradient(180deg, rgba(255,230,160,.35), rgba(255,208,84,.18));
		  color:#6a4a00;
		}
		
		/* CTA or qui claque */
		.cta-gold{
		  margin-left:auto;
		  display:inline-flex; align-items:center; gap:10px;
		  padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:900;
		  background:linear-gradient(180deg,#FFD054,#FFB300);
		  color:#1a1200; border:1px solid #E3A900;
		  box-shadow: 0 0 24px var(--glow), inset 0 1px 0 rgba(255,255,255,.6);
		  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
		  white-space:nowrap;
		}
		.cta-gold:hover{ transform:translateY(-1px); box-shadow:0 0 34px var(--glow); filter:saturate(1.05); }
		.cta-gold svg{ width:16px; height:16px; fill:currentColor }
		
		.gold-hero .sub{ margin-top:4px; font-size:.92rem; opacity:.95 }
		
		@media (max-width:720px){
		  .cta-gold{ width:100%; justify-content:center; margin-top:10px }
		  .gold-row{ gap:10px }
		}
		
		/* Mode sombre */
		@media (prefers-color-scheme: dark){
		  .gold-hero{
			background: linear-gradient(135deg, rgba(255,208,84,.10), rgba(255,179,0,.12));
			color:#fff4d1; border-color:rgba(227,169,0,.45);
			box-shadow:0 10px 28px rgba(0,0,0,.35), 0 0 28px rgba(255,193,7,.18) inset;
		  }
		  .gold-hero h3{ color:#FFECB3; }
		  .pill-gold{ color:#fff4d1; }
		  .pill-gold.is-outline{ border-color:rgba(227,169,0,.45); }
		  .tiers-gold .tier{ color:#ffe7b0; }
		}