:root {
    /* Brand palette */
    --serena-navy: #243F8B;
    --serena-navy-deep: #1B3076;
    --serena-navy-ink: #15234F;
    --serena-orange: #F47B26;
    --serena-orange-soft: #FBA86A;
    --serena-yellow: #F0E024;
    --serena-yellow-soft: #FFEF6B;
    --serena-coral: #F5A57E;
    --serena-coral-line: #EFB89A;

    /* Surfaces */
    --bg-lavender: #E9EAF7;
    --bg-lavender-2: #EFF0FA;
    --bg-cream: #FBF8F2;
    --surface: #FFFFFF;
    --surface-elev: #FFFFFF;

    /* Text */
    --ink-900: #15234F;
    --ink-700: #2B3766;
    --ink-500: #5A648D;
    --ink-400: #7C85A8;
    --ink-300: #B6BCD3;
    --ink-200: #DDE0EE;
    --line: #E1E4F2;
    --line-soft: #ECEEF7;

    /* Radii / shadow */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(21, 35, 79, .04), 0 2px 6px rgba(21, 35, 79, .04);
    --shadow-md: 0 4px 12px rgba(21, 35, 79, .06), 0 12px 32px rgba(21, 35, 79, .06);
    --shadow-lg: 0 14px 40px rgba(21, 35, 79, .10), 0 4px 12px rgba(21, 35, 79, .06);
}

body {
  overflow-x: hidden;
}

header .navbar {
    background-color: #284D9A !important;
}

.list-tarifs {
    padding: 0vw var(--content-margin) 0vw var(--content-margin);
    width: 100%;
    overflow: visible !important;
    z-index: 9;
    position: relative;
}

.hero-stat {
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line-soft);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5vw;
    max-width: 38vw;
}

/* ZONE DE RECHERCHE */

.filter-bar {
    background: #eaf1ff;
    position: sticky;
    top: 5.20vw;
    border-bottom: 1px solid rgba(21, 35, 79, .06);
    z-index: 3;
}
.field-search {
    margin-bottom: 2.375vw;
}

/* CATEGORY CHIPS */
.chip-row {
    margin: 0 auto;
    gap: 1vw;
}

.chip {
    font-size: .81vw;
    border-radius: var(--r-pill);
    padding: 9px 16px 9px 12px;
    gap: .51vw;
    border: 1.5px solid var(--line);
    color: var(--ink-700);
    transition: all .15s; 
}

.chip:hover {
    border-color: var(--serena-orange);
    color: var(--serena-orange);
}

.chip.active {
    background: var(--serena-navy);
    border-color: var(--serena-navy);
    color: #fff;
}

.chip .chip-ic {
    width: 1.5vw;
    height: 1.5vw;
    border-radius: 50%;
    background: var(--bg-lavender);
    display: grid;
    place-items: center;
}

.chip.active .chip-ic {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.chip .badge {
    background: var(--bg-lavender);
    color: var(--ink-500);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    margin-left: 4px;
}

.chip.active .badge {
    background: var(--serena-yellow);
    color: var(--serena-navy-ink);
}

/* SECTION CONSULTATIONS ET AUTRES ====== HEADER */
.section {
    margin-bottom: 56px;
    scroll-margin-top: 200px;
}

.section-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2vw;
    align-items: end;
}

.section-head .label {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
    gap: 1vw;
    color: var(--serena-orange);
}
.section-head .label img {
    filter: brightness(0) saturate(100%) invert(66%) sepia(51%) saturate(4677%) hue-rotate(345deg) brightness(100%) contrast(92%);
}

.section-head .label::before {
    content: "";
    width: 2.3vw;
    height: .121vw;
    background: var(--serena-orange);
    border-radius: 1vw;
}

.section-head h2 {
    font-size: clamp(21px, 3.4vw, 46px);
    line-height: 1.05;
    margin: 0;
    letter-spacing: -.01em;
}

.section-head .caption {
    color: var(--ink-500);
}

.section-head .count-pill {
    background: #fff;
    border: 1px solid var(--line);
    padding: 8px 16px;
    border-radius: var(--r-pill);
    font-size: .8vw;
    color: var(--ink-500);
    font-weight: 700;
    white-space: nowrap;
}

/* SECTION CONSULTATIONS ET AUTRES ====== DETAILS DES CONSULTATIONS */

.panel {
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line-soft);
    overflow: hidden;
}

/* Item rows =================================== */
.item-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 18px 28px;
    border-bottom: 1px solid var(--line-soft);
    transition: background .15s;
}

.item-row:last-child {
    border-bottom: 0;
}

.item-row:hover {
    background: var(--bg-lavender-2);
}

.item-row .num {
    font-size: 11.5px;
    color: var(--ink-300);
    font-weight: 600;
}

.item-row .name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-900);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    line-height: 1.4;
}

.item-row .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    background: #FFF1E1;
    color: var(--serena-orange);
}

.item-row .tag.nuit {
    background: #1E2A53;
    color: #C8D2F7;
}

.item-row .tag.urgence {
    background: #FFE2D6;
    color: #C7521A;
}

.item-row .tag.garde {
    background: #1E2A53;
    color: #C8D2F7;
}

.item-row .tag.domicile {
    background: #E0EAFB;
    color: #244F9E;
}

.item-row .price {
    font-weight: 800;
    font-size: 18px;
    color: var(--serena-navy-ink);
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.item-row .price .currency {
    font-size: 11px;
    color: var(--ink-400);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.item-row .price.muted {
    color: var(--ink-400);
    font-size: 14px;
    font-weight: 600;
}

.item-row .price .suffix {
    font-size: 12.5px;
    color: var(--ink-500);
    font-weight: 600;
}

/* LABEL INFO EN BAS DU CARD DE CONSULTATION */
/* Info note */
.info-note {
    background: linear-gradient(135deg, #FFF7E9 0%, #FFEFD1 100%);
    border: 1px solid #F7DCA9;
    border-radius: var(--r-md);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #6E4A18;
    line-height: 1.55;
    font-weight: 500;
}
.info-note .ic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--serena-orange);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}


/* Group sub-headers inside panel */
.group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px 12px;
    border-bottom: 1px solid var(--line-soft);
}

.group-head:not(:first-child) {
    padding-top: 32px;
}

.group-head h3 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--serena-navy);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.group-head h3::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--serena-yellow);
    box-shadow: 0 0 0 4px rgba(240, 224, 36, .25);
}

.group-head .count {
    font-size: 12px;
    color: var(--ink-400);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

/* Pansement+Soins layout (two columns) */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.two-col>div+div {
    border-left: 1px solid var(--line-soft);
}


/* Hospitalisation tiers */
.tiers-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    padding: 24px;
}

.tier-card {
    background: linear-gradient(180deg, #FBFBFF 0%, #F4F5FC 100%);
    border: 1.5px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.tier-card:hover {
    transform: translateY(-3px);
    border-color: var(--serena-orange);
    box-shadow: var(--shadow-md);
}

.tier-card .badge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-500);
}

.tier-card.featured {
    background: linear-gradient(180deg, #243F8B 0%, #182B68 100%);
    border-color: var(--serena-navy);
    color: #fff;
}

.tier-card.featured .badge {
    color: var(--serena-yellow);
}

.tier-card.featured .tier-name {
    color: #fff;
}

.tier-card.featured .tier-price {
    color: #fff;
}

.tier-card.featured .tier-blurb {
    color: rgba(255, 255, 255, .78);
}

.tier-card.featured .star {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--serena-yellow);
    color: var(--serena-navy-ink);
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    letter-spacing: .06em;
}

.tier-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--serena-navy-ink);
    letter-spacing: -.01em;
}

.tier-price {
    font-size: 28px;
    font-weight: 800;
    color: var(--serena-orange);
    letter-spacing: -.01em;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.tier-price .currency {
    font-size: 12px;
    color: var(--ink-400);
    font-weight: 700;
    letter-spacing: .06em;
}

.tier-card.featured .tier-price {
    color: var(--serena-yellow);
}

.tier-card.featured .tier-price .currency {
    color: rgba(255, 255, 255, .6);
}

.tier-blurb {
    font-size: 13px;
    color: var(--ink-500);
    line-height: 1.5;
}

.tier-extra {
    margin: 0 24px 24px;
    background: var(--bg-lavender-2);
    border-radius: var(--r-md);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px dashed var(--line);
}

.tier-extra .tx {
    font-size: 14px;
    font-weight: 700;
    color: var(--serena-navy-ink);
    display: flex;
    align-items: center;
    gap: 12px;
}

.tier-extra .tx .ic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: var(--serena-orange);
    display: grid;
    place-items: center;
}

.tier-extra .price {
    font-weight: 800;
    color: var(--serena-navy-ink);
    font-size: 16px;
}


/* Surgical formulas */
.formula-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 24px;
}

.formula-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFBFF 100%);
    border: 1.5px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px;
    position: relative;
    overflow: hidden;
}

.formula-card .lbl {
    font-size: 12px;
    font-weight: 800;
    /* letter-spacing: .12em; */
    text-transform: uppercase;
    color: var(--ink-500);
    margin-bottom: 12px;
}

.formula-card .expr {
    font-size: 18px;
    font-weight: 600;
    color: var(--serena-navy-ink);
    line-height: 1.4;
}

.formula-card .expr .k {
    color: var(--serena-orange);
    font-weight: 700;
}

.formula-card.simple .expr {
    font-size: 28px;
    font-weight: 800;
    color: var(--serena-orange);
}

.formula-card::after {
    content: "";
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--bg-lavender);
    z-index: 0;
}

/* Empty results */
.empty {
    background: #fff;
    border-radius: var(--r-xl);
    padding: 64px 32px;
    text-align: center;
    color: var(--ink-500);
    border: 1px dashed var(--line);
}

.empty .ic {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-lavender);
    color: var(--serena-navy);
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
}

.empty h4 {
    color: var(--serena-navy-ink);
    font-size: 20px;
    margin: 0 0 8px;
    font-weight: 800;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
    .hero-stats {
        max-width: none;
    }

    .tiers-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tier-card:nth-child(4),
    .tier-card:nth-child(5) {
        grid-column: span 1;
    }

    .formula-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .bio-grid,
    .two-col {
        grid-template-columns: 1fr;
    }

    .bio-grid>.bio-col,
    .two-col>div+div {
        border-right: 0;
        border-left: 0;
    }
}


@media screen and (max-width: 768px) {
    .mobile-header.scrolled {
        background-color: #284D9A !important;
        /* background-color: #284D9A;  */
        box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    }
    .specialities {
        padding: 83px 20px 0;
    }
    
    .filter-bar {
        top: 16.2vw;
    }

    .chip {
        font-size: 13px;
        gap: 1.51vw;
    }

    .chip-row {
        margin: 0 auto;
        gap: 3vw 1vw;
    }

    .chip .chip-ic {
        width: 8.5vw;
        height: 8.5vw;
    }

    .socials .ic:not(.search):not(.wa) {
        display: none;
    }

    .brand-text .small {
        font-size: 11px;
    }

    .brand-text .big {
        font-size: 17px;
    }

    .hero {
        padding: 40px 0 56px;
    }

    .hero-stats {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }

    .hero-stat {
        padding: 12px 14px;
    }

    .hero-stat .num {
        font-size: 20px;
    }

    .section-head {
        grid-template-columns: repeat(1, 1fr);
    }

    .section-head .count-pill {
        justify-self: start;
        font-size: 13px;
        display: none;
    }

    .tiers-grid {
        grid-template-columns: repeat(1, 1fr);
        padding: 16px;
    }

    .formula-grid {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .filter-inner {
        grid-template-columns: 1fr;
    }

    .filter-meta {
        justify-content: space-between;
    }

    .item-row {
        grid-template-columns: 1fr auto;
        padding: 16px 18px;
        gap: 12px;
    }

    .item-row .num {
        display: none;
    }

    .item-row .price {
        font-size: 16px;
    }

    .cta-band {
        grid-template-columns: 1fr;
        padding: 32px 24px;
    }

    .cta-band h3 {
        font-size: 26px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    
}