/* ============================================================
   NIVANO — tarifs.css
   Styles spécifiques à la page Tarifs : grille des deux formules,
   encart « tout inclus », + le simulateur (dupliqué depuis home.css,
   voir note plus bas). nav/footer/btn/hero-court/tldr/section-intro/
   faq/cta-final : global.css / components.css.
   ============================================================ */

/* ==== GRILLE DES DEUX FORMULES ==== */
.pricing-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}
.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--creme-clair);
    border: 1px solid var(--ligne);
    border-radius: 20px;
    padding: 40px 36px;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pricing-card:hover { border-color: var(--rose-fonce); background: white; }
.pricing-card--highlighted {
    border: 1.5px solid var(--rose-fonce);
    box-shadow: 0 30px 60px -24px rgba(205, 101, 144, 0.25);
}

.pricing-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--rose-fonce);
    color: white;
    border-radius: 100px;
    font-family: 'Onest', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pricing-eyebrow {
    font-family: 'Onest', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--rose-fonce);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pricing-eyebrow::before { content: ''; width: 16px; height: 1px; background: var(--rose-fonce); }

.pricing-price {
    font-family: 'Onest', sans-serif;
    font-size: clamp(56px, 7vw, 80px);
    font-weight: 500;
    color: var(--noir);
    letter-spacing: -0.04em;
    line-height: 1;
}
.pricing-price-sub { font-size: 14px; color: var(--gris); line-height: 1.4; margin-top: 12px; }
.pricing-mode {
    font-size: 13px;
    color: var(--noir-doux);
    font-weight: 500;
    margin-top: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ligne);
}

.pricing-list { list-style: none; display: flex; flex-direction: column; gap: 12px; padding: 24px 0; margin: 0; }
.pricing-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--noir-doux); line-height: 1.45; }
.pricing-list li::before { content: '✓'; color: var(--rose-fonce); font-family: 'Onest', sans-serif; font-weight: 700; flex-shrink: 0; }
.pricing-list li strong { color: var(--noir); font-weight: 600; }

.pricing-cta { margin-top: auto; }
.pricing-cta .btn { width: 100%; justify-content: center; }
.pricing-footnote { font-size: 13px; color: var(--gris); line-height: 1.5; margin-top: 16px; }
.pricing-footnote strong { color: var(--noir); font-weight: 600; }

/* ==== ENCART « TOUT INCLUS » ==== */
.tarifs-inclus { padding: 100px 36px 40px; max-width: 1320px; margin: 0 auto; }
.tarifs-inclus-card {
    background: linear-gradient(135deg, var(--rose-pale) 0%, var(--creme-fonce) 100%);
    border-radius: 28px;
    padding: 72px 60px;
    position: relative;
    overflow: hidden;
}
.tarifs-inclus-card::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(205, 101, 144, 0.2) 0%, transparent 65%);
    filter: blur(40px);
}
.tarifs-inclus-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.tarifs-inclus-text h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; color: var(--noir); margin-bottom: 24px; }
.tarifs-inclus-text h2 em { font-family: 'Familjen Grotesk', sans-serif; font-style: italic; color: var(--rose-fonce); font-weight: 500; }
.tarifs-inclus-text p { font-size: 17px; color: var(--noir-doux); line-height: 1.65; margin-bottom: 14px; }
.tarifs-inclus-text p strong { color: var(--noir); font-weight: 600; }
.tarifs-inclus-text p em { font-family: 'Familjen Grotesk', sans-serif; font-style: italic; color: var(--rose-fonce); font-weight: 500; }

.tarifs-inclus-cols { display: flex; flex-direction: column; gap: 16px; }
.inclus-block { border-radius: 14px; padding: 28px; }
.inclus-block.is-yes { background: white; border: 1px solid var(--ligne); }
.inclus-block.is-no { background: var(--noir); color: var(--creme); }
.inclus-block-title { font-family: 'Onest', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 18px; }
.inclus-block.is-yes .inclus-block-title { color: var(--noir); }
.inclus-block.is-no .inclus-block-title { color: var(--rose); }
.inclus-list { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; }
.inclus-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; }
.inclus-block.is-yes .inclus-list li { color: var(--noir-doux); }
.inclus-block.is-no .inclus-list li { color: rgba(246, 240, 230, 0.85); }
.inclus-list li::before { font-family: 'Onest', sans-serif; font-weight: 700; flex-shrink: 0; }
.inclus-block.is-yes .inclus-list li::before { content: '✓'; color: var(--rose-fonce); }
.inclus-block.is-no .inclus-list li::before { content: '✗'; color: var(--rose-pale); }
.inclus-list li strong { font-weight: 600; }
.inclus-block.is-yes .inclus-list li strong { color: var(--noir); }
.inclus-block.is-no .inclus-list li strong { color: white; }

/* ============================================================
   SIMULATEUR — règles dupliquées depuis css/home.css pour ne pas
   charger tout home.css sur la page Tarifs (interactions/JS identiques).
   Ici présenté en carte autonome (sur fond crème) plutôt qu'en bande
   pleine largeur, pour rester lisible sous une section-intro standard.
   ============================================================ */
.simulator-wrap { max-width: 1100px; margin: 48px auto 0; }
.simulator { background: var(--noir-doux); border-radius: 28px; padding: 56px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; border: 1px solid rgba(255, 255, 255, 0.06); align-items: start; }
.sim-controls h3 { font-size: 22px; font-weight: 500; margin-bottom: 36px; letter-spacing: -0.02em; color: var(--creme); }
.sim-field { margin-bottom: 36px; }
.sim-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.sim-label { font-size: 12px; color: rgba(246, 240, 230, 0.65); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; }
.sim-value { font-family: 'Onest', sans-serif; font-size: 24px; font-weight: 600; color: var(--creme); letter-spacing: -0.02em; }
.sim-slider { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; outline: none; }
.sim-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: var(--rose-fonce); border-radius: 50%; cursor: pointer; border: 3px solid var(--noir-doux); transition: transform 0.2s; }
.sim-slider::-webkit-slider-thumb:hover { transform: scale(1.15); background: var(--rose); }
.sim-slider::-moz-range-thumb { width: 22px; height: 22px; background: var(--rose-fonce); border-radius: 50%; cursor: pointer; border: 3px solid var(--noir-doux); }
.sim-tools-label { font-size: 12px; color: rgba(246, 240, 230, 0.65); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; margin-bottom: 14px; }
.sim-tools { display: flex; flex-direction: column; gap: 8px; }
.sim-tool { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; cursor: pointer; transition: all 0.2s; font-size: 14px; border: 1px solid transparent; }
.sim-tool:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(229, 146, 181, 0.2); }
.sim-tool input { width: 16px; height: 16px; accent-color: var(--rose-fonce); cursor: pointer; flex-shrink: 0; }
.sim-tool-info { flex: 1; min-width: 0; }
.sim-tool-name { color: var(--creme); font-weight: 500; display: block; line-height: 1.3; }
.sim-tool-px { font-family: 'Onest', sans-serif; color: var(--rose); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; flex-shrink: 0; }
.sim-result { display: flex; flex-direction: column; justify-content: space-between; padding: 40px; background: linear-gradient(135deg, var(--rose-fonce) 0%, #B85076 100%); border-radius: 20px; position: relative; overflow: hidden; height: fit-content; position: sticky; top: 100px; }
.sim-result::before { content: ''; position: absolute; top: -50%; right: -30%; width: 80%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 60%); }
.result-content { position: relative; z-index: 1; }
.result-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.8); font-weight: 600; margin-bottom: 20px; }
.result-amount { font-family: 'Onest', sans-serif; font-size: clamp(64px, 8vw, 96px); font-weight: 500; line-height: 0.9; letter-spacing: -0.05em; color: white; margin-bottom: 8px; }
.result-period { font-size: 18px; color: rgba(255, 255, 255, 0.85); margin-bottom: 36px; font-weight: 500; }
.result-projections { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.result-proj { display: flex; flex-direction: column; gap: 4px; }
.proj-label { font-size: 11px; color: rgba(255, 255, 255, 0.65); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.proj-amount { font-family: 'Onest', sans-serif; font-size: 28px; font-weight: 500; color: white; letter-spacing: -0.025em; line-height: 1; }
.result-cta { margin-top: 36px; position: relative; z-index: 1; }
.btn-cream-full { width: 100%; justify-content: center; }
.result-fineprint { font-size: 11px; color: rgba(255, 255, 255, 0.5); margin-top: 24px; line-height: 1.5; position: relative; z-index: 1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .tarifs-inclus-inner { grid-template-columns: 1fr; gap: 48px; }
    .tarifs-inclus-card { padding: 56px 36px; }
    .simulator { grid-template-columns: 1fr; padding: 36px; }
    .sim-result { position: static; }
}

@media (max-width: 768px) {
    .pricing-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .tarifs-inclus { padding-left: 24px; padding-right: 24px; }
    .tarifs-inclus-card { padding: 40px 24px; }
    .pricing-card { padding: 32px 28px; }
    .inclus-block { padding: 24px; }
    .simulator { padding: 28px 24px; }
}