/* ============================================================
   NIVANO — essai-gratuit.css
   Styles spécifiques à la page de transition /essai-gratuit.
   Réutilise les variables et composants partagés (global.css,
   components.css). Aucune nouvelle palette.
   ============================================================ */

/* ==== CONDITIONS : inclus / pas demandé ==== */
.essai-conditions { max-width: 1320px; margin: 0 auto; padding: 120px 36px; }

.essai-conditions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.essai-condition-card {
    display: flex;
    flex-direction: column;
    background: var(--creme-clair);
    border: 1px solid var(--ligne);
    border-radius: 18px;
    padding: 36px;
}

.essai-condition-card--dark {
    background: var(--noir);
    border-color: var(--noir);
    color: var(--creme);
}

.essai-condition-eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--rose-fonce);
    margin-bottom: 20px;
}
.essai-condition-card--dark .essai-condition-eyebrow { color: var(--rose); }

.essai-condition-title {
    font-family: 'Onest', sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--noir);
    margin-bottom: 28px;
}
.essai-condition-card--dark .essai-condition-title { color: var(--creme); }

.essai-condition-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: auto;
}
.essai-condition-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: var(--noir-doux);
    line-height: 1.5;
}
.essai-condition-card--dark .essai-condition-list li { color: var(--gris-clair); }

.essai-ic-check { color: var(--rose-fonce); flex-shrink: 0; margin-top: 1px; }
.essai-ic-cross { color: var(--rose); opacity: 0.7; flex-shrink: 0; margin-top: 1px; }

/* ==== COMMENT ÇA MARCHE (fond clair) ==== */
.essai-steps { background: var(--creme-fonce); }
.essai-steps-inner { max-width: 1320px; margin: 0 auto; padding: 120px 36px; }

.essai-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.essai-step { padding-right: 12px; }
.essai-step-eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--rose-fonce);
    margin-bottom: 16px;
}
.essai-step-title {
    font-family: 'Onest', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--noir);
    margin-bottom: 14px;
}
.essai-step-text { font-size: 16px; color: var(--gris); line-height: 1.65; }

/* ==== AU BOUT DES 30 JOURS ==== */
.essai-fin { max-width: 1320px; margin: 0 auto; padding: 120px 36px; }

.essai-fin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}
.essai-fin-card {
    display: flex;
    flex-direction: column;
    background: var(--creme-clair);
    border: 1px solid var(--ligne);
    border-radius: 18px;
    padding: 32px;
}
.essai-fin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--rose-trace);
    color: var(--rose-fonce);
    margin-bottom: 20px;
}
.essai-fin-title {
    font-family: 'Onest', sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--noir);
    margin-bottom: 14px;
}
.essai-fin-text { font-size: 16px; color: var(--gris); line-height: 1.7; }

/* ==== RESPONSIVE ==== */
@media (max-width: 768px) {
    .essai-conditions,
    .essai-steps-inner,
    .essai-fin { padding: 72px 24px; }

    .essai-conditions-grid,
    .essai-steps-grid,
    .essai-fin-grid { grid-template-columns: 1fr; }

    .essai-condition-card,
    .essai-fin-card { padding: 28px; }
}