/* Tarifs — accent teal */
:root { --accent: #1a9a72; --accent-light: #e8f7f2; --accent-dark: #0f6e52; }

/* ── Hero tarifs (centré) ── */
.tarifs-hero { text-align: center; padding: 52px 0 40px;
    background: linear-gradient(135deg, #f0faf6 0%, #e8f4fd 100%); }
.tarifs-hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 700; margin-bottom: 14px; }
.tarifs-hero h1 span { color: var(--accent); }
.tarifs-hero .lead-sub { font-size: 1rem; color: var(--d360-gray-600);
    max-width: 640px; margin: 0 auto 26px; line-height: 1.7; }

/* ── Toggle mensuel / annuel ── */
.billing-toggle { display: inline-flex; background: #fff; border: 1px solid var(--d360-gray-200);
    border-radius: 30px; padding: 5px; gap: 4px; box-shadow: var(--d360-shadow); }
.billing-toggle button { border: 0; background: transparent; font-family: inherit;
    font-size: .88rem; font-weight: 600; color: var(--d360-gray-600);
    padding: 9px 22px; border-radius: 24px; cursor: pointer; transition: all .15s; }
.billing-toggle button.on { background: var(--accent); color: #fff; }
.billing-toggle .bonus { font-size: .72rem; font-weight: 700; margin-left: 6px;
    background: rgba(255,255,255,.25); border-radius: 12px; padding: 2px 8px; }
.billing-toggle button:not(.on) .bonus { background: var(--accent-light); color: var(--accent-dark); }

/* ── Grille 3 cartes ── */
.price-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
@media (max-width: 991px) { .price-trio { grid-template-columns: 1fr; } }
.price-card { position: relative; }
.mode-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mode-ico { width: 38px; height: 38px; border-radius: var(--d360-radius-sm);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.mode-teal  { background: var(--d360-teal-light); }
.mode-blue  { background: var(--d360-blue-light); }
.mode-coral { background: var(--d360-coral-light); }
.price-note { min-height: 34px; }
.combo-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: .76rem; font-weight: 700; margin-bottom: 12px; }
.combo-chip { background: var(--d360-gray-100); border-radius: 6px; padding: 4px 10px; }
.combo-plus { color: var(--d360-gray-400); }

/* ── Structures ── */
.struct-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
@media (max-width: 850px) { .struct-cards { grid-template-columns: 1fr; } }
.struct-card { background: #fff; border: 1.5px solid var(--d360-gray-200);
    border-radius: var(--d360-radius); padding: 26px; display: flex; flex-direction: column; }
.struct-card:hover { box-shadow: var(--d360-shadow-md); }
.struct-icon { width: 44px; height: 44px; border-radius: var(--d360-radius-sm);
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 14px; }
.struct-teal  { background: var(--d360-teal-light); }
.struct-blue  { background: var(--d360-blue-light); }
.struct-coral { background: var(--d360-coral-light); }
.struct-card h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 4px; }
.struct-card .who { font-size: .78rem; font-weight: 600; color: var(--d360-gray-600);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.struct-card p { font-size: .85rem; color: var(--d360-gray-600); line-height: 1.65; margin-bottom: 14px; }
.struct-feats { list-style: none; padding: 0; margin: 0 0 20px; flex-grow: 1; }
.struct-feats li { font-size: .83rem; padding: 5px 0 5px 24px; position: relative; color: var(--d360-gray-800); }
.struct-feats li::before { content: '✓'; position: absolute; left: 0; top: 5px;
    color: var(--accent); font-weight: 800; }
.struct-price { font-size: 1.15rem; font-weight: 800; margin-bottom: 16px; }