/*
  LH Pricing Block – Frontend styles
  Polices : Cormorant Garamond (display) + Jost (sans)
*/

/* ── Google Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;1,300&family=Jost:wght@300;400&display=swap');

.lh-pricing {
    --lh-gold:        #c8a882;
    --lh-ink:         #111111;
    --lh-off:         #f8f6f2;
    --lh-white:       #ffffff;
    --lh-muted:       #777772;
    --lh-subtle:      #999994;
    --lh-border:      #d8d5d0;
    --lh-border-card: #d0cdc8;

    --lh-cta-bg:      #111111;
    --lh-cta-text:    #ffffff;
    --lh-btn-radius:  0;
    --lh-btn-px:      1.75rem;
    --lh-btn-py:      1rem;

    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    background: var(--lh-off) !important;
    padding: 4rem 1.5rem !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    color: #111111 !important;
}

.lh-pricing *,
.lh-pricing *::before,
.lh-pricing *::after {
    box-sizing: border-box !important;
}

/* ── Two-column layout ───────────────────────────────────────────────────── */
.lh-pricing__layout {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 3rem !important;
    align-items: start !important;
}

@media (max-width: 800px) {
    .lh-pricing__layout {
        grid-template-columns: 1fr !important;
    }
}

/* ── Section eyebrow label ───────────────────────────────────────────────── */
.lh-pricing__section-label {
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #888883 !important;
    margin: 0 0 1.25rem !important;
    line-height: 1.4 !important;
}

/* ── Site type cards ─────────────────────────────────────────────────────── */
.lh-pricing__types {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem !important;
    margin-bottom: 2.5rem !important;
}

@media (max-width: 520px) {
    .lh-pricing__types {
        grid-template-columns: 1fr !important;
    }
}

.lh-pricing__type-card {
    text-align: left !important;
    padding: 1.5rem !important;
    border: 1px solid var(--lh-border-card) !important;
    background: var(--lh-off) !important;
    cursor: pointer !important;
    transition: border-color 0.2s, background 0.2s !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    outline: none !important;
}

.lh-pricing__type-card:hover {
    background: var(--lh-white) !important;
}

.lh-pricing__type-card.is-active {
    border-color: var(--lh-ink) !important;
    background: var(--lh-white) !important;
}

/* Icon */
.lh-pricing__type-icon {
    display: block !important;
    color: #888883 !important;
    margin-bottom: 1.25rem !important;
    transition: color 0.2s !important;
    line-height: 1 !important;
}

.lh-pricing__type-card.is-active .lh-pricing__type-icon {
    color: var(--lh-gold) !important;
}

/* Label — Cormorant Garamond */
.lh-pricing__type-name {
    display: block !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    font-style: normal !important;
    color: #111111 !important;
    margin: 0 0 0.3rem !important;
    line-height: 1.15 !important;
}

.lh-pricing__type-card.is-active .lh-pricing__type-name {
    color: var(--lh-gold) !important;
}

/* Sub — Jost */
.lh-pricing__type-sub {
    display: block !important;
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #777772 !important;
    margin: 0 0 1.25rem !important;
    line-height: 1.4 !important;
}

/* Price row */
.lh-pricing__type-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.4rem !important;
}

/* Amount — Cormorant Garamond */
.lh-pricing__type-amount {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 36px !important;
    font-weight: 300 !important;
    font-style: normal !important;
    color: #111111 !important;
    line-height: 1 !important;
}

/* TTC — Jost */
.lh-pricing__type-ttc {
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #888883 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    line-height: 1 !important;
}

/* ── Options ─────────────────────────────────────────────────────────────── */
.lh-pricing__options {
    border: 1px solid var(--lh-border) !important;
    background: var(--lh-white) !important;
    overflow: hidden !important;
}

.lh-pricing__option {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1.125rem 1.5rem !important;
    border-bottom: 1px solid var(--lh-border) !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
}

.lh-pricing__option:last-child {
    border-bottom: none !important;
}

.lh-pricing__option:hover {
    background: #f5f3ef !important;
}

.lh-pricing__option.is-checked {
    background: var(--lh-white) !important;
}

/* Checkbox */
.lh-pricing__option-check {
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0 !important;
    border: 1px solid #bbb !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s, border-color 0.15s !important;
    cursor: pointer !important;
    min-width: 1rem !important;
    min-height: 1rem !important;
}

.lh-pricing__option-check svg {
    width: 0.6rem !important;
    height: 0.6rem !important;
    display: none !important;
}

.lh-pricing__option.is-checked .lh-pricing__option-check {
    background: var(--lh-ink) !important;
    border-color: var(--lh-ink) !important;
}

.lh-pricing__option.is-checked .lh-pricing__option-check svg {
    display: block !important;
}

/* Option icon */
.lh-pricing__option-icon {
    flex-shrink: 0 !important;
    color: #aaa9a4 !important;
    display: flex !important;
    transition: color 0.15s !important;
    line-height: 1 !important;
}

.lh-pricing__option.is-checked .lh-pricing__option-icon {
    color: var(--lh-gold) !important;
}

/* Option text */
.lh-pricing__option-body {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Label — Jost */
.lh-pricing__option-label {
    display: block !important;
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #111111 !important;
    line-height: 1.3 !important;
    transition: color 0.15s !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lh-pricing__option.is-checked .lh-pricing__option-label {
    color: var(--lh-gold) !important;
}

/* Sub — Jost */
.lh-pricing__option-sub {
    display: block !important;
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #777772 !important;
    margin: 0.2rem 0 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* Info button */
.lh-pricing__info-btn {
    position: relative !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    color: #bbb9b4 !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    transition: color 0.15s !important;
    line-height: 1 !important;
    font-size: inherit !important;
}

.lh-pricing__info-btn:hover {
    color: #666 !important;
}

.lh-pricing__tooltip {
    display: none !important;
    position: absolute !important;
    right: calc(100% + 10px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 260px !important;
    background: #111111 !important;
    color: #e8e8e5 !important;
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    padding: 0.875rem 1.125rem !important;
    line-height: 1.6 !important;
    z-index: 99 !important;
    pointer-events: none !important;
    letter-spacing: 0.02em !important;
    white-space: normal !important;
}

.lh-pricing__info-btn:hover .lh-pricing__tooltip {
    display: block !important;
}

/* Tag — Jost */
.lh-pricing__option-tag {
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #777772 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: color 0.15s !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lh-pricing__option.is-checked .lh-pricing__option-tag {
    color: #111111 !important;
}

/* ── Quote card ──────────────────────────────────────────────────────────── */
.lh-pricing__quote {
    border: 1px solid #ccc9c4 !important;
    background: var(--lh-white) !important;
    padding: 2rem !important;
    position: sticky !important;
    top: 80px !important;
}

/* "Votre devis" — Jost */
.lh-pricing__quote-title {
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #888883 !important;
    margin: 0 0 1.5rem !important;
    line-height: 1.4 !important;
}

/* Lines */
.lh-pricing__quote-lines {
    margin-bottom: 0 !important;
}

.lh-pricing__quote-line {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 0.875rem 0 !important;
    border-bottom: 1px solid #e8e5e0 !important;
    margin: 0 !important;
}

/* Line label — Jost */
.lh-pricing__quote-line-text {
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #111111 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Line sub — Jost */
.lh-pricing__quote-line-sub {
    display: block !important;
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #c8a882 !important;
    margin: 0.15rem 0 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* Line price — Jost */
.lh-pricing__quote-line-price {
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #111111 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Total row */
.lh-pricing__quote-total {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    padding: 1.25rem 0 1.75rem !important;
    border-top: 1px solid #e0ddd8 !important;
    margin-top: 0.25rem !important;
}

/* "Total TTC" — Jost */
.lh-pricing__quote-total-label {
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #888883 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Amount — Cormorant Garamond */
.lh-pricing__quote-total-amount {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 56px !important;
    font-weight: 300 !important;
    font-style: normal !important;
    color: #111111 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* CTA button — Jost, fond noir */
.lh-pricing__cta-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    background: #111111 !important;
    color: #ffffff !important;
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    padding: var(--lh-btn-py) var(--lh-btn-px) !important;
    border-radius: var(--lh-btn-radius) !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: opacity 0.2s !important;
    text-align: center !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.lh-pricing__cta-btn:hover {
    opacity: 0.85 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Note sous bouton — Jost */
.lh-pricing__cta-note {
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    color: #999994 !important;
    text-align: center !important;
    margin: 0.75rem 0 0 !important;
    padding: 0 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
}