:root {
    --navy: #092c55;
    --blue: #0d4f91;
    --blue2: #1768ac;
    --clay: #cf5e35;
    --orange: #ed7b35;
    --cream: #f6f2e9;
    --ink: #17202c;
    --muted: #627080;
    --white: #fff;
    --line: #dfe5ea;
    --shadow: 0 18px 50px rgba(9,44,85,.13);
    --radius: 18px;
    --container: min(1180px,calc(100% - 40px))
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Montserrat,Arial,sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.6
}

img {
    max-width: 100%;
    display: block
}

a {
    color: inherit;
    text-decoration: none
}

.container {
    width: var(--container);
    margin: auto
}

.skip-link {
    position: absolute;
    left: -9999px
}

    .skip-link:focus {
        left: 12px;
        top: 12px;
        z-index: 999;
        background: #fff;
        padding: 10px
    }

.topbar {
    background: var(--navy);
    color: #fff;
    font-size: .78rem
}

.topbar-inner {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.topbar-links {
    display: flex;
    gap: 22px
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(9,44,85,.08)
}

.nav-wrap {
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

    .brand img {
        width: 62px;
        height: 62px
    }

    .brand span {
        display: flex;
        flex-direction: column;
        line-height: 1.05;
        text-transform: uppercase;
        color: var(--navy)
    }

    .brand strong {
        font-size: 1.05rem;
        letter-spacing: .04em
    }

    .brand small {
        font-weight: 700;
        letter-spacing: .12em;
        margin-top: 5px
    }

.main-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: .84rem;
    font-weight: 700
}

    .main-nav > a:not(.nav-cta) {
        position: relative
    }

        .main-nav > a:not(.nav-cta)::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -8px;
            width: 0;
            height: 2px;
            background: var(--clay);
            transition: .25s
        }

    .main-nav > a:hover::after {
        width: 100%
    }

.nav-cta, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 800;
    border: 0;
    cursor: pointer;
    transition: .25s
}

.nav-cta {
    padding: 12px 18px;
    background: var(--clay);
    color: #fff
}

.menu-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 8px
}

    .menu-toggle span {
        display: block;
        width: 26px;
        height: 2px;
        background: var(--navy);
        margin: 5px
    }

.hero {
    min-height: 680px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: #fff;
    background: linear-gradient(115deg,#102c4d 0%,#0e4e78 48%,#cf5e35 130%)
}

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 82% 35%,rgba(255,255,255,.23),transparent 28%),linear-gradient(125deg,transparent 55%,rgba(207,94,53,.9));
        opacity: .8
    }

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(4,25,49,.82),rgba(4,25,49,.3) 62%,rgba(4,25,49,.08))
}

.court-lines {
    position: absolute;
    right: -100px;
    bottom: -180px;
    width: 700px;
    height: 700px;
    border: 7px solid rgba(255,255,255,.38);
    transform: rotate(-13deg)
}

    .court-lines::before, .court-lines::after {
        content: "";
        position: absolute;
        background: rgba(255,255,255,.38)
    }

    .court-lines::before {
        width: 7px;
        height: 100%;
        left: 50%
    }

    .court-lines::after {
        height: 7px;
        width: 100%;
        top: 50%
    }

.hero-content {
    position: relative;
    z-index: 2;
    padding: 90px 0 130px
}

.eyebrow, .section-kicker {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .76rem;
    font-weight: 800
}

.eyebrow {
    color: #ffd8c7
}

.hero h1 {
    font-size: clamp(3.3rem,7vw,6.8rem);
    line-height: .93;
    margin: 18px 0 28px;
    max-width: 960px;
    letter-spacing: -.055em
}

    .hero h1 em {
        font-family: "Playfair Display",serif;
        color: #fff;
        font-weight: 700
    }

.hero-text {
    max-width: 650px;
    font-size: 1.14rem;
    color: rgba(255,255,255,.88)
}

.hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 34px
}

.btn {
    padding: 15px 24px;
    font-size: .88rem
}

.btn-primary {
    background: var(--clay);
    color: #fff;
    box-shadow: 0 12px 28px rgba(207,94,53,.3)
}

    .btn-primary:hover {
        transform: translateY(-2px);
        background: #b94f2b
    }

.btn-ghost {
    border: 1px solid rgba(255,255,255,.7);
    color: #fff
}

.btn-light {
    background: #fff;
    color: var(--navy)
}

.hero-card {
    position: absolute;
    right: 7vw;
    bottom: 0;
    z-index: 3;
    width: 330px;
    padding: 24px 28px 24px 80px;
    background: #fff;
    color: var(--navy);
    box-shadow: var(--shadow)
}

    .hero-card strong, .hero-card span {
        display: block
    }

        .hero-card span:last-child {
            font-size: .82rem;
            color: var(--muted)
        }

.ball, .big-ball {
    border-radius: 50%;
    background: #ddeb52;
    position: absolute
}

.ball {
    width: 50px;
    height: 50px;
    left: 18px;
    top: 24px;
    box-shadow: inset -7px -5px 0 rgba(0,0,0,.06)
}

    .ball::before, .big-ball::before {
        content: "";
        position: absolute;
        inset: 6% 38%;
        border-left: 2px solid #fff;
        border-right: 2px solid #fff;
        border-radius: 50%
    }

.quick-links {
    position: relative;
    z-index: 5;
    margin-top: -1px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(9,44,85,.07)
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr)
}

    .quick-grid a {
        padding: 25px 26px;
        border-right: 1px solid var(--line);
        display: grid;
        grid-template-columns: 46px 1fr;
        column-gap: 14px;
        align-items: center
    }

        .quick-grid a:last-child {
            border-right: 0
        }

.quick-icon {
    grid-row: 1/3;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cream);
    color: var(--clay);
    font-weight: 900;
    font-size: 1.15rem
}

.quick-grid strong {
    font-size: .92rem;
    color: var(--navy)
}

.quick-grid small {
    color: var(--muted)
}

.section {
    padding: 105px 0
}

.section-kicker {
    color: var(--clay);
    margin: 0 0 12px
}

.section h2 {
    font-size: clamp(2.3rem,4vw,4.2rem);
    line-height: 1.05;
    letter-spacing: -.045em;
    color: var(--navy);
    margin: 0 0 28px
}

.lead {
    font-size: 1.16rem;
    color: #374454
}

.intro-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 90px;
    align-items: center
}

    .intro-grid > div:first-child {
        max-width: 510px
    }

.text-link {
    display: inline-flex;
    gap: 12px;
    margin-top: 20px;
    font-weight: 800;
    color: var(--blue)
}

    .text-link span {
        color: var(--clay)
    }

.intro-visual {
    position: relative;
    min-height: 520px
}

.photo {
    background-size: cover;
    background-position: center
}

.photo-main {
    height: 470px;
    border-radius: 4px 80px 4px 4px;
    background: linear-gradient(145deg,rgba(9,44,85,.05),rgba(9,44,85,.1)),linear-gradient(15deg,#cf5e35 0 40%,#dfe8d4 40% 48%,#446b43 48% 100%);
    position: relative;
    overflow: hidden
}

    .photo-main::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 48%;
        height: 3px;
        background: #fff;
        box-shadow: 0 75px 0 #fff
    }

    .photo-main::after {
        content: "";
        position: absolute;
        width: 3px;
        height: 52%;
        top: 48%;
        left: 50%;
        background: #fff
    }

.stat-card {
    position: absolute;
    left: -45px;
    bottom: 0;
    background: var(--clay);
    color: #fff;
    padding: 28px 38px;
    box-shadow: var(--shadow)
}

    .stat-card strong {
        font-size: 2.7rem;
        display: block;
        line-height: 1
    }

    .stat-card span {
        font-size: .78rem
    }

.quote-card {
    position: absolute;
    right: -30px;
    top: 50px;
    background: #fff;
    color: var(--navy);
    font-family: "Playfair Display",serif;
    font-size: 1.45rem;
    padding: 25px 28px;
    box-shadow: var(--shadow);
    border-left: 5px solid var(--clay)
}

.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.form-note-succes {
    color: #1a7a3c;
    font-weight: 600
}

.form-note-erreur {
    color: #c0392b;
    font-weight: 600
}

.photo-main.slideshow {
    overflow: hidden
}

    .photo-main.slideshow::before, .photo-main.slideshow::after {
        content: none
    }

.slideshow-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.1s ease
}

    .slideshow-slide.active {
        opacity: 1
    }

.slideshow-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 9px
}

.slideshow-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    cursor: pointer;
    transition: .2s
}

    .slideshow-dot.active {
        background: #fff;
        transform: scale(1.3)
    }

.programs {
    background: var(--cream)
}

.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    align-items: flex-end;
    margin-bottom: 48px
}

    .section-heading > p {
        max-width: 480px;
        color: var(--muted)
    }

    .section-heading h2 {
        margin-bottom: 0
    }

.program-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px
}

.program-card {
    position: relative;
    min-height: 390px;
    padding: 36px 28px;
    color: #fff;
    overflow: hidden;
    transition: .3s
}

    .program-card:hover {
        transform: translateY(-7px)
    }

    .program-card.blue {
        background: #1768ac
    }

    .program-card.orange {
        background: #ed7b35
    }

    .program-card.navy {
        background: #092c55
    }

    .program-card.clay {
        background: #b94f2b
    }

    .program-card::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        border: 2px solid rgba(255,255,255,.18);
        border-radius: 50%;
        right: -65px;
        bottom: -55px
    }

.program-number {
    font-size: .72rem;
    letter-spacing: .2em;
    opacity: .75
}

.program-card h3 {
    font-size: 1.75rem;
    line-height: 1.1;
    margin: 72px 0 18px
}

.program-card p {
    font-size: .9rem;
    color: rgba(255,255,255,.85)
}

.program-card ul {
    list-style: none;
    padding: 0;
    margin: 25px 0 0;
    font-size: .82rem;
    font-weight: 600
}

.program-card li {
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,.18)
}

.align-end {
    align-items: end
}

.news-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 22px
}

.news-card {
    border: 1px solid var(--line);
    background: #fff;
    transition: .25s
}

    .news-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow)
    }

.news-image {
    height: 220px;
    position: relative;
    background-size: cover
}

.featured .news-image {
    height: 280px
}

.image-party {
    background: linear-gradient(150deg,rgba(9,44,85,.15),transparent),linear-gradient(30deg,#cf5e35 0 48%,#607c55 48%)
}

.image-kids {
    background: linear-gradient(135deg,#e7f1fb 0 40%,#1768ac 40% 70%,#ed7b35 70%)
}

.image-open {
    background: linear-gradient(160deg,#264f3d 0 35%,#cf5e35 35% 85%,#fff 85%)
}

.tag {
    position: absolute;
    left: 18px;
    top: 18px;
    background: #fff;
    color: var(--navy);
    font-weight: 800;
    font-size: .68rem;
    padding: 8px 11px;
    text-transform: uppercase
}

.news-body {
    padding: 25px
}

    .news-body time {
        font-size: .72rem;
        color: var(--clay);
        font-weight: 800;
        text-transform: uppercase
    }

    .news-body h3 {
        font-size: 1.35rem;
        line-height: 1.25;
        color: var(--navy);
        margin: 10px 0
    }

    .news-body p {
        font-size: .87rem;
        color: var(--muted)
    }

    .news-body a {
        font-size: .8rem;
        font-weight: 800;
        color: var(--blue)
    }

.competition {
    background: var(--navy);
    color: #fff;
    overflow: hidden
}

.competition-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center
}

.competition-content {
    max-width: 560px
}

.section-kicker.light {
    color: #ffb592
}

.competition h2 {
    color: #fff
}

.competition-content > p:not(.section-kicker) {
    color: rgba(255,255,255,.75)
}

.competition-stats {
    display: flex;
    gap: 36px;
    margin: 35px 0
}

    .competition-stats div {
        border-left: 2px solid var(--clay);
        padding-left: 13px
    }

    .competition-stats strong, .competition-stats span {
        display: block
    }

    .competition-stats span {
        font-size: .72rem;
        color: rgba(255,255,255,.58)
    }

.competition-art {
    position: relative;
    height: 470px
}

.racket {
    position: absolute;
    width: 260px;
    height: 360px;
    border: 18px solid #fff;
    border-radius: 50%;
    transform: rotate(32deg);
    right: 100px;
    top: 20px;
    opacity: .9
}

    .racket::before {
        content: "";
        position: absolute;
        width: 35px;
        height: 220px;
        background: #fff;
        bottom: -190px;
        left: 94px;
        border-radius: 0 0 15px 15px
    }

    .racket::after {
        content: "";
        position: absolute;
        inset: 15px;
        background: repeating-linear-gradient(0deg,transparent 0 16px,rgba(255,255,255,.45) 17px 18px),repeating-linear-gradient(90deg,transparent 0 16px,rgba(255,255,255,.45) 17px 18px);
        border-radius: 50%
    }

.big-ball {
    width: 105px;
    height: 105px;
    left: 45px;
    bottom: 65px;
    box-shadow: 0 15px 35px rgba(0,0,0,.2)
}

.pricing {
    background: #fff
}

.price-table-wrap {
    display: grid;
    grid-template-columns: 1.45fr .55fr;
    box-shadow: var(--shadow)
}

table {
    border-collapse: collapse;
    width: 100%
}

th, td {
    text-align: left;
    padding: 14px 24px;
    border-bottom: 1px solid var(--line)
}

th {
    background: var(--cream);
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .08em;
    color: var(--navy)
}

td:last-child {
    font-weight: 900;
    color: var(--clay);
    font-size: 1.05rem
}

td strong, td small {
    display: block
}

td small {
    color: var(--muted);
    font-size: .72rem
}

.price-cta {
    background: var(--navy);
    color: #fff;
    padding: 42px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

    .price-cta > span {
        text-transform: uppercase;
        letter-spacing: .18em;
        color: #ffb592;
        font-size: .7rem;
        font-weight: 800
    }

    .price-cta strong {
        font-size: 1.75rem;
        line-height: 1.15;
        margin: 15px 0
    }

    .price-cta p {
        font-size: .85rem;
        color: rgba(255,255,255,.7);
        margin-bottom: 25px
    }

.price-block {
    background: #fff;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-top: 40px
}

.price-block-banner {
    background: var(--navy);
    color: #fff;
    font-weight: 800;
    letter-spacing: .03em;
    padding: 20px 26px;
    font-size: 1.05rem
}

    .price-block-banner em {
        display: block;
        font-style: normal;
        font-weight: 600;
        font-size: .76rem;
        letter-spacing: .02em;
        opacity: .85;
        margin-top: 5px
    }

.price-note {
    font-size: .78rem;
    color: var(--muted);
    padding: 16px 26px 26px;
    margin: 0
}

.price-reductions .reduction-list {
    list-style: none;
    margin: 0;
    padding: 0
}

.reduction-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,.15);
    font-size: .85rem
}

    .reduction-list li:first-child {
        border-top: 0
    }

.reduction-list strong {
    color: #ffb592
}

.price-note-light {
    font-size: .7rem;
    color: rgba(255,255,255,.55);
    margin-top: 16px
}

.price-cta.price-reductions {
    padding: 26px 30px
}

    .price-cta.price-reductions strong {
        margin: 6px 0
    }

.reduction-list li {
    padding: 7px 0
}

.price-cta-band {
    background: linear-gradient(145deg,#082747,#0d4f80);
    color: #fff;
    border-radius: 26px;
    padding: 42px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 40px
}

    .price-cta-band span {
        text-transform: uppercase;
        letter-spacing: .18em;
        color: #ffb592;
        font-size: .7rem;
        font-weight: 800;
        display: block
    }

    .price-cta-band strong {
        font-size: 1.75rem;
        display: block;
        margin: 8px 0 0
    }

    .price-cta-band p {
        font-size: .9rem;
        color: rgba(255,255,255,.75);
        margin: 6px 0 0;
        max-width: 480px
    }

.contact {
    background: var(--cream)
}

.contact-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 90px
}

.contact-list {
    margin-top: 35px
}

    .contact-list > a, .contact-list > div {
        display: flex;
        gap: 17px;
        align-items: center;
        padding: 18px 0;
        border-bottom: 1px solid #d9ddd9
    }

    .contact-list > * > span {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #fff;
        color: var(--clay);
        display: grid;
        place-items: center;
        font-weight: 900
    }

    .contact-list small, .contact-list strong {
        display: block
    }

    .contact-list small {
        color: var(--muted)
    }

.contact-form {
    background: #fff;
    padding: 38px;
    box-shadow: var(--shadow)
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

label {
    display: block;
    font-size: .76rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 17px
}

input, select, textarea {
    width: 100%;
    margin-top: 7px;
    padding: 13px;
    border: 1px solid var(--line);
    font: inherit;
    background: #fff
}

textarea {
    resize: vertical
}

.form-note {
    font-size: .7rem;
    color: var(--muted);
    margin: 15px 0 0
}

.site-footer {
    background: #061f3b;
    color: #fff;
    padding: 65px 0 22px
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 70px
}

.footer-brand {
    display: flex;
    gap: 18px
}

    .footer-brand img {
        width: 80px
    }

    .footer-brand strong, .footer-brand span {
        display: block
    }

    .footer-brand span {
        font-size: .8rem;
        color: rgba(255,255,255,.58);
        max-width: 310px;
        margin-top: 8px
    }

.footer-grid h3 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em
}

.footer-grid > div:not(:first-child) a {
    display: block;
    font-size: .8rem;
    color: rgba(255,255,255,.68);
    padding: 4px 0
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.13);
    margin-top: 45px;
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    font-size: .7rem;
    color: rgba(255,255,255,.48)
}

@media(max-width:1000px) {
    .menu-toggle {
        display: block
    }

    .main-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 84px;
        background: #fff;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 22px 30px;
        box-shadow: var(--shadow)
    }

        .main-nav.open {
            display: flex
        }

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

    .news-grid {
        grid-template-columns: 1fr 1fr
    }

    .featured {
        grid-column: 1/-1
    }

    .intro-grid, .competition-grid, .contact-grid {
        grid-template-columns: 1fr
    }

    .competition-art {
        display: none
    }

    .price-table-wrap {
        grid-template-columns: 1fr
    }

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

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px
    }

    .intro-grid {
        gap: 55px
    }

    .contact-grid {
        gap: 40px
    }
}

@media(max-width:700px) {
    :root {
        --container: min(100% - 28px,1180px)
    }

    .topbar-inner > span {
        display: none
    }

    .topbar-inner {
        justify-content: center
    }

    .topbar-links {
        gap: 12px;
        font-size: .68rem
    }

    .brand img {
        width: 52px;
        height: 52px
    }

    .brand strong {
        font-size: .88rem
    }

    .nav-wrap {
        height: 72px
    }

    .main-nav {
        top: 72px
    }

    .hero {
        min-height: 650px
    }

    .hero-content {
        padding: 70px 0 150px
    }

    .hero h1 {
        font-size: 3.25rem
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start
    }

    .hero-card {
        right: 0;
        width: calc(100% - 28px)
    }

    .quick-grid {
        grid-template-columns: 1fr 1fr
    }

        .quick-grid a {
            padding: 18px 12px;
            grid-template-columns: 38px 1fr
        }

    .quick-icon {
        width: 38px;
        height: 38px
    }

    .section {
        padding: 75px 0
    }

        .section h2 {
            font-size: 2.55rem
        }

    .intro-visual {
        min-height: 410px
    }

    .photo-main {
        height: 380px
    }

    .stat-card {
        left: 0
    }

    .quote-card {
        right: 0;
        top: 20px;
        font-size: 1.15rem
    }

    .program-grid, .news-grid {
        grid-template-columns: 1fr
    }

    .featured {
        grid-column: auto
    }

    .program-card {
        min-height: 330px
    }

    .price-table-wrap {
        overflow: auto
    }

    th, td {
        padding: 15px 13px;
        min-width: 105px
    }

    .form-row {
        grid-template-columns: 1fr
    }

    .contact-form {
        padding: 25px
    }

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

    .footer-bottom {
        gap: 14px;
        flex-direction: column
    }

    .competition-stats {
        flex-direction: column;
        gap: 15px
    }
}

/* Navigation déroulante et pages intérieures */
.nav-item {
    position: relative
}

.dropdown-toggle {
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
    padding: 10px 0
}

    .dropdown-toggle span {
        font-size: .7rem;
        margin-left: 4px
    }

.dropdown-menu {
    position: absolute;
    left: -18px;
    top: calc(100% + 15px);
    min-width: 235px;
    padding: 10px;
    background: #fff;
    border-top: 3px solid var(--clay);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .2s
}

    .dropdown-menu a {
        display: block;
        padding: 11px 13px;
        font-size: .8rem;
        color: var(--navy);
        border-radius: 6px
    }

        .dropdown-menu a:hover {
            background: var(--cream);
            color: var(--clay)
        }

.has-dropdown:hover .dropdown-menu, .has-dropdown:focus-within .dropdown-menu, .has-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none
}

.page-hero {
    position: relative;
    padding: 100px 0 90px;
    color: #fff;
    background: linear-gradient(120deg,var(--navy),var(--blue) 65%,var(--clay) 150%);
    overflow: hidden
}

    .page-hero:after {
        content: "";
        position: absolute;
        width: 430px;
        height: 430px;
        border: 5px solid rgba(255,255,255,.14);
        right: -80px;
        top: -160px;
        transform: rotate(20deg)
    }

    .page-hero .container {
        position: relative;
        z-index: 1
    }

    .page-hero h1 {
        font-size: clamp(3rem,6vw,5.5rem);
        line-height: 1;
        margin: 12px 0 22px;
        letter-spacing: -.05em
    }

    .page-hero p:last-child {
        max-width: 720px;
        font-size: 1.08rem;
        color: rgba(255,255,255,.8)
    }

.prose-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: start
}

.content-cards {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px
}

    .content-cards article {
        padding: 28px;
        background: var(--cream);
        border-left: 4px solid var(--clay)
    }

    .content-cards h3 {
        color: var(--navy);
        margin-top: 0
    }

.facility-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 55px;
    align-items: center
}

.facility-visual {
    min-height: 430px
}

.court-clay {
    background: linear-gradient(15deg,#c75b35 0 45%,#fff 45% 46%,#c75b35 46% 70%,#567a4e 70%)
}

.facility-copy h3 {
    font-size: 2rem;
    color: var(--navy)
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 25px 0
}

    .check-list li {
        padding: 10px 0;
        border-bottom: 1px solid var(--line)
    }

        .check-list li:before {
            content: "✓";
            color: var(--clay);
            font-weight: 900;
            margin-right: 10px
        }

.team-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px
}

.team-card {
    padding: 25px;
    text-align: center;
    border: 1px solid var(--line)
}

.avatar {
    width: 110px;
    height: 110px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cream);
    color: var(--clay);
    font-size: 2rem;
    font-weight: 900
}

.team-card h3 {
    color: var(--navy)
}

.center-action {
    text-align: center;
    margin-top: 45px
}

.timeline {
    max-width: 820px;
    margin: auto
}

    .timeline article {
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: 25px;
        padding: 30px 0;
        border-bottom: 1px solid var(--line)
    }

        .timeline article > span {
            width: 62px;
            height: 62px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: var(--clay);
            color: #fff;
            font-weight: 900
        }

    .timeline h3 {
        color: var(--navy);
        font-size: 1.5rem;
        margin: 0 0 8px
    }

.legal-copy {
    max-width: 850px
}

    .legal-copy h2 {
        font-size: 1.8rem;
        margin-top: 35px
    }

@media(max-width:1000px) {
    .nav-item {
        width: 100%
    }

    .dropdown-toggle {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10px 0
    }

    .dropdown-menu {
        position: static;
        display: none;
        min-width: 0;
        box-shadow: none;
        border-top: 0;
        border-left: 3px solid var(--clay);
        padding: 4px 0 4px 12px;
        opacity: 1;
        visibility: visible;
        transform: none
    }

    .has-dropdown.open .dropdown-menu {
        display: block
    }

    .has-dropdown:hover .dropdown-menu:not(:focus-within) {
    }

    .prose-grid, .facility-grid {
        grid-template-columns: 1fr
    }

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

@media(max-width:700px) {
    .page-hero {
        padding: 75px 0 65px
    }

        .page-hero h1 {
            font-size: 3rem
        }

    .content-cards, .team-grid {
        grid-template-columns: 1fr
    }

    .facility-visual {
        min-height: 300px
    }

    .timeline article {
        grid-template-columns: 55px 1fr
    }

        .timeline article > span {
            width: 48px;
            height: 48px
        }
}

/* ===== Refonte moderne 2026 ===== */
:root {
    --navy: #082747;
    --blue: #1263a4;
    --blue2: #2583c5;
    --clay: #d2643f;
    --orange: #ef8a43;
    --cream: #f7f4ee;
    --soft: #f3f7fa;
    --ink: #14202c;
    --muted: #677483;
    --line: #e4e9ed;
    --shadow: 0 24px 70px rgba(8,39,71,.12);
    --shadow-soft: 0 12px 35px rgba(8,39,71,.08);
    --radius: 24px;
    --radius-sm: 16px
}

body {
    background: linear-gradient(180deg,#fff 0%,#fbfcfd 100%);
    overflow-x: hidden
}

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: -1;
        background: radial-gradient(circle at 10% 10%,rgba(37,131,197,.06),transparent 28%),radial-gradient(circle at 90% 38%,rgba(210,100,63,.055),transparent 24%)
    }

.site-header {
    box-shadow: 0 6px 24px rgba(8,39,71,.04);
    transition: box-shadow .3s,background .3s
}

    .site-header.scrolled {
        background: rgba(255,255,255,.92);
        box-shadow: 0 12px 32px rgba(8,39,71,.10)
    }

.nav-wrap {
    transition: height .3s
}

.site-header.scrolled .nav-wrap {
    height: 72px
}

.brand img {
    filter: drop-shadow(0 8px 18px rgba(8,39,71,.12));
    transition: transform .3s
}

.brand:hover img {
    transform: rotate(-4deg) scale(1.04)
}

.main-nav {
    gap: 10px
}

    .main-nav > a, .dropdown-toggle {
        border-radius: 999px;
        padding: 10px 12px !important;
        transition: background .2s,color .2s,transform .2s
    }

        .main-nav > a:not(.nav-cta):hover, .dropdown-toggle:hover {
            background: var(--soft);
            color: var(--blue);
            transform: translateY(-1px)
        }

        .main-nav > a:not(.nav-cta)::after {
            display: none
        }

.nav-cta {
    padding: 12px 19px !important;
    box-shadow: 0 10px 22px rgba(210,100,63,.23)
}

    .nav-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(210,100,63,.3)
    }

.dropdown-menu {
    border: 1px solid rgba(8,39,71,.08);
    border-top: 0;
    border-radius: 18px;
    padding: 9px;
    box-shadow: 0 24px 60px rgba(8,39,71,.16);
    transform: translateY(12px) scale(.98);
    transform-origin: top left
}

    .dropdown-menu::before {
        content: "";
        position: absolute;
        left: 22px;
        top: -6px;
        width: 12px;
        height: 12px;
        background: #fff;
        transform: rotate(45deg);
        border-left: 1px solid rgba(8,39,71,.08);
        border-top: 1px solid rgba(8,39,71,.08)
    }

    .dropdown-menu a {
        border-radius: 11px;
        padding: 12px 14px;
        transition: .2s
    }

        .dropdown-menu a:hover {
            transform: translateX(3px)
        }

@media(min-width:1001px) {
    .has-dropdown {
        position: relative
    }

        .has-dropdown::after {
            content: "";
            position: absolute;
            left: -18px;
            width: 235px;
            top: 100%;
            height: 18px
        }
}

.hero {
    min-height: 720px;
    border-radius: 0 0 42px 42px;
    box-shadow: 0 30px 80px rgba(8,39,71,.18)
}

    .hero::after {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        right: 9%;
        top: 11%;
        background: rgba(255,255,255,.08);
        filter: blur(2px)
    }

.hero-content {
    animation: heroIn .8s ease both
}

.hero h1 {
    text-wrap: balance;
    text-shadow: 0 10px 35px rgba(0,0,0,.18)
}

.hero-card {
    right: 6vw;
    bottom: 30px;
    border-radius: 20px;
    box-shadow: 0 26px 60px rgba(8,39,71,.22);
    animation: float 5s ease-in-out infinite
}

.court-lines {
    opacity: .65
}

.quick-links {
    width: min(1120px,calc(100% - 40px));
    margin: -38px auto 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(8,39,71,.12)
}

.quick-grid a {
    background: #fff;
    transition: background .25s,transform .25s
}

    .quick-grid a:hover {
        background: var(--soft);
        transform: translateY(-3px)
    }

.quick-icon {
    transition: transform .25s,background .25s
}

.quick-grid a:hover .quick-icon {
    transform: rotate(-7deg) scale(1.08);
    background: #fff
}

.section {
    padding: 115px 0
}

    .section h2, .page-hero h1 {
        text-wrap: balance
    }

.section-heading {
    margin-bottom: 55px
}

.page-hero {
    padding: 125px 0 105px;
    border-radius: 0 0 42px 42px;
    box-shadow: 0 26px 75px rgba(8,39,71,.18);
    background: radial-gradient(circle at 80% 20%,rgba(255,255,255,.16),transparent 25%),linear-gradient(120deg,#061f3b,#0d568e 62%,#d2643f 145%)
}

    .page-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,rgba(6,31,59,.25),transparent 65%)
    }

    .page-hero .container {
        animation: heroIn .65s ease both
    }

.btn {
    position: relative;
    overflow: hidden;
    box-shadow: none;
    transition: transform .25s,box-shadow .25s,background .25s
}

    .btn::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg,transparent 25%,rgba(255,255,255,.22) 50%,transparent 75%);
        transform: translateX(-120%);
        transition: transform .55s
    }

    .btn:hover::after {
        transform: translateX(120%)
    }

    .btn:hover {
        transform: translateY(-3px)
    }

.btn-primary:hover {
    box-shadow: 0 16px 32px rgba(210,100,63,.28)
}

.btn-light:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,.16)
}

.photo-main, .facility-visual {
    border-radius: 32px;
    box-shadow: var(--shadow);
    overflow: hidden
}

.stat-card, .quote-card {
    border-radius: 18px
}

.stat-card {
    box-shadow: 0 18px 42px rgba(210,100,63,.28)
}

.programs, .contact {
    background: linear-gradient(135deg,#f8f4ed,#f1f6f9)
}

.program-grid {
    gap: 24px
}

.program-card {
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
    isolation: isolate
}

    .program-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,rgba(255,255,255,.12),transparent 40%);
        z-index: -1
    }

    .program-card:hover {
        transform: translateY(-10px) scale(1.01);
        box-shadow: 0 26px 55px rgba(8,39,71,.18)
    }

.news-grid {
    gap: 26px
}

.news-card {
    border: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-soft)
}

    .news-card:hover {
        transform: translateY(-9px);
        box-shadow: var(--shadow)
    }

.news-image {
    overflow: hidden
}

    .news-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,transparent 45%,rgba(8,39,71,.14));
        transition: opacity .3s
    }

.news-card:hover .news-image::after {
    opacity: .55
}

.tag {
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(8,39,71,.12)
}

.competition {
    border-radius: 42px;
    margin: 0 20px;
    box-shadow: 0 30px 80px rgba(8,39,71,.2);
    background: radial-gradient(circle at 85% 20%,rgba(37,131,197,.28),transparent 30%),linear-gradient(130deg,#061f3b,#08345c)
}

.price-table-wrap {
    border-radius: 26px;
    overflow: hidden;
    box-shadow: var(--shadow)
}

tbody tr {
    transition: background .2s,transform .2s
}

    tbody tr:hover {
        background: #f7fafc
    }

.price-cta {
    background: linear-gradient(145deg,#082747,#0d4f80)
}

.contact-form {
    border-radius: 26px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(8,39,71,.06)
}

input, select, textarea {
    border-radius: 12px;
    background: #fbfcfd;
    transition: border .2s,box-shadow .2s,background .2s
}

    input:focus, select:focus, textarea:focus {
        outline: 0;
        border-color: var(--blue2);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(37,131,197,.1)
    }

.content-cards {
    gap: 24px
}

    .content-cards article, .team-card {
        background: #fff;
        border: 1px solid rgba(8,39,71,.06);
        border-left: 0;
        border-radius: 22px;
        box-shadow: var(--shadow-soft);
        transition: transform .25s,box-shadow .25s
    }

    .content-cards article {
        padding: 32px
    }

        .content-cards article:hover, .team-card:hover {
            transform: translateY(-7px);
            box-shadow: var(--shadow)
        }

        .content-cards article::before {
            content: "";
            display: block;
            width: 42px;
            height: 5px;
            border-radius: 99px;
            background: linear-gradient(90deg,var(--clay),var(--orange));
            margin-bottom: 20px
        }

.team-card {
    padding: 30px
}

.avatar {
    box-shadow: inset 0 0 0 8px #fff,0 10px 28px rgba(8,39,71,.1);
    background: linear-gradient(135deg,#eef6fb,#f7eee8)
}

.timeline article {
    background: #fff;
    border: 1px solid rgba(8,39,71,.06);
    border-radius: 22px;
    padding: 28px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-soft);
    transition: .25s
}

    .timeline article:hover {
        transform: translateX(7px);
        box-shadow: var(--shadow)
    }

.site-footer {
    margin-top: 0;
    background: radial-gradient(circle at 15% 20%,rgba(37,131,197,.15),transparent 28%),#061f3b
}

.footer-grid a {
    transition: color .2s,transform .2s
}

    .footer-grid a:hover {
        color: #fff !important;
        transform: translateX(4px)
    }

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease,transform .7s ease
}

    .reveal.visible {
        opacity: 1;
        transform: none
    }

@keyframes heroIn {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

@media(max-width:1000px) {
    .main-nav {
        top: 84px;
        border-radius: 0 0 22px 22px;
        max-height: calc(100vh - 84px);
        overflow: auto
    }

    .site-header.scrolled .main-nav {
        top: 72px
    }

    .main-nav > a, .dropdown-toggle {
        padding: 12px 14px !important
    }

    .dropdown-menu {
        border-radius: 12px;
        background: var(--soft)
    }

        .dropdown-menu::before {
            display: none
        }

    .competition {
        margin: 0 12px
    }

    .quick-links {
        margin-top: -25px
    }

    .hero {
        border-radius: 0 0 30px 30px
    }

    .page-hero {
        border-radius: 0 0 30px 30px
    }
}

@media(max-width:700px) {
    .hero {
        min-height: 690px
    }

    .hero-card {
        bottom: 22px;
        border-radius: 18px
    }

    .quick-links {
        width: calc(100% - 24px);
        border-radius: 18px
    }

    .quick-grid a {
        min-height: 94px
    }

    .section {
        padding: 82px 0
    }

    .page-hero {
        padding: 88px 0 72px
    }

    .competition {
        margin: 0;
        border-radius: 30px
    }

    .program-card, .news-card, .content-cards article, .team-card, .contact-form, .price-table-wrap, .price-block, .price-cta-band {
        border-radius: 19px
    }

    .timeline article {
        padding: 22px
    }

    .site-header.scrolled .nav-wrap {
        height: 68px
    }

    .site-header.scrolled .main-nav {
        top: 68px
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}