* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    color:#333;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    padding:20px;
}

.container {
    width:100%;
    max-width:900px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 8px 25px rgba(0,0,0,0.25);
    padding:30px;
    animation:fadeIn 0.6s ease-out;
}

h1,h2 {
    text-align:center;
    color:#2c5364;
    margin-bottom:15px;
}

/* ──────────────── INFO-CARDS ──────────────── */
.info-box {
    border:2px solid #ddd;
    border-radius:12px;
    padding:20px;
    margin-bottom:30px;
    background:#fafafa;
    box-shadow:0 6px 12px rgba(0,0,0,0.08);
    transition: opacity .2s ease, transform .2s ease;
}

.info-box.hidden {
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    height:0;
    padding:0;
    margin:0;
    border:0;
    overflow:hidden;
}

/* 👉 AJOUT CORRECT ICI : cacher uniquement les cartes dans le bloc d’infos */
.info-box .hidden-card {
    display: none !important;
}

.option {
    padding:15px;
    border-radius:10px;
    margin-bottom:20px;
    box-shadow:0 4px 8px rgba(0,0,0,0.05);
    background:#fff;
    border:1px solid #e6e6e6;
}

.option h2 { font-size:18px; margin-bottom:8px; }
.option h3 { font-size:15px; margin-bottom:8px; }

.option-red   { border-left:4px solid #e74c3c; background:#fef2f2; }
.option-green { border-left:4px solid #2ecc71; background:#effaf3; }
.option-blue  { border-left:4px solid #3498db; background:#eef6fd; }
.option-yellow { border-left: 4px solid #f1c40f; background: #fef9e7; }
.option-darkgreen { border-left: 4px solid #0B5345; background: linear-gradient(135deg, #E8F8F5, #D1F2EB); }

/* ──────────────── PAIEMENT ──────────────── */
.pricing-tables-wrap { display:flex; flex-direction:column; gap:25px; }

.pricing-table-inner {
    padding:20px;
    border-radius:12px;
    background:#f9f9fb;
    border:1px solid #e0e0e0;
    transition:transform 0.3s, box-shadow 0.3s;
}

.pricing-table-inner:hover {
    transform:translateY(-5px);
    box-shadow:0 10px 20px rgba(0,0,0,0.1);
}

select,input[type="text"] {
    width:100%;
    padding:14px 12px;
    border-radius:8px;
    border:1px solid #ccc;
    font-size:1rem;
    margin-top:10px;
}

input[type="text"]:focus, select:focus {
    border-color:#2c5364;
    outline:none;
}

.parrain-section { 
    margin-top:20px; 
    text-align:center; 
}

/* ──────────────── APERÇU DYNAMIQUE ──────────────── */
.selection-preview{
    margin-top:12px;
    border:1px dashed #cbd5e1;
    border-radius:12px;
    padding:14px;
    background:#f8fafc;
    min-height:80px;
}

.preview-placeholder{
    text-align:center;
    color:#64748b;
    font-size:.95rem;
    padding:6px 0;
}

.preview-card{
    animation:previewIn .24s ease forwards;
}

@keyframes previewIn {
  from { opacity:0; transform: translateY(6px); }
  to   { opacity:1; transform: translateY(0); }
}

@keyframes fadeIn {
    from{opacity:0; transform:translateY(20px);}
    to  {opacity:1; transform:translateY(0);}
}

@media (max-width:600px){
    .container{padding:20px;}
    h1{font-size:1.6rem;}
    h2{font-size:1.2rem;}
}