:root {
    --violet-950: #251238;
    --violet-900: #2f174e;
    --violet-800: #3d2464;
    --violet-700: #51337e;
    --violet-600: #6846a0;
    --violet-500: #7b58b3;
    --violet-200: #e9e1f5;
    --violet-100: #f4f0fa;
    --violet-050: #faf8fd;
    --fond: #f8f8fb;
    --carte: #ffffff;
    --texte: #282538;
    --texte-doux: #666176;
    --bordure: #e4deed;
    --succes: #277a4a;
    --alerte: #9a5a00;
    --danger: #a13030;
    --ombre: 0 10px 28px rgba(42, 24, 67, .12);
    --rayon: 14px;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
    margin: 0;
    background: #ece9f2;
    color: var(--texte);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }

.site-shell {
    width: min(1440px, 100%);
    margin: 0 auto;
    background: var(--fond);
    min-height: 100vh;
    box-shadow: 0 0 36px rgba(35, 21, 54, .12);
}

/* ===== Bandeau ===== */
.site-header {
    position: relative;
    display: grid;
    grid-template-columns: 210px minmax(360px, 1fr) 300px;
    align-items: center;
    gap: 24px;
    min-height: 220px;
    padding: 22px 38px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.91) 52%, rgba(248,246,252,.91) 100%),
        linear-gradient(180deg, #fff, #f2edf8);
    border-bottom: 1px solid var(--bordure);
}
.site-header::after {
    content: "";
    position: absolute;
    left: 28%; right: -5%; bottom: -40px;
    height: 120px;
    opacity: .13;
    background: linear-gradient(145deg, transparent 32%, var(--violet-600) 33%, transparent 34% 47%, var(--violet-600) 48%, transparent 49%);
    transform: skewX(-12deg);
    pointer-events: none;
}
.club-mark, .header-title, .agglo-mark { position: relative; z-index: 1; }
.club-mark { text-align: center; }
.club-mark img { max-height: 185px; width: auto; object-fit: contain; }
.header-title h1 {
    margin: 0;
    font-size: clamp(34px, 4.3vw, 62px);
    line-height: 1;
    letter-spacing: -1.5px;
    color: var(--violet-800);
}
.header-title .subtitle {
    margin-top: 10px;
    font-size: clamp(18px, 1.7vw, 27px);
    color: var(--violet-700);
}
.header-title .baseline {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 3px solid var(--violet-200);
    color: var(--texte-doux);
    font-size: 16px;
    word-spacing: 4px;
}
.agglo-mark { text-align: center; padding: 10px 0; }
.agglo-mark img { max-width: 275px; max-height: 145px; object-fit: contain; }

/* ===== Navigation haute ===== */
.topnav {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(90deg, var(--violet-800), var(--violet-900));
    box-shadow: 0 4px 12px rgba(37, 22, 60, .16);
}
.topnav > a,
.topnav > .nav-more > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 8px 12px;
    border-radius: 9px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    line-height: 1.18;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.topnav > .nav-more > summary::-webkit-details-marker { display: none; }
.topnav > a:hover,
.topnav > a.active,
.topnav > .nav-more > summary:hover,
.topnav > .nav-more.active > summary,
.topnav > .nav-more[open] > summary {
    background: rgba(164, 111, 232, .42);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
    transform: translateY(-1px);
}
.topnav .nav-icon { margin-right: 7px; font-size: 18px; line-height: 1; flex: 0 0 auto; }
.topnav .nav-label { display: inline-block; }
.nav-more { position: relative; }
.nav-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(360px, 82vw);
    padding: 8px;
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(36, 20, 58, .22);
    z-index: 50;
}
.nav-more-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--violet-800);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
}
.nav-more-menu a:hover,
.nav-more-menu a.active { background: var(--violet-100); color: var(--violet-900); }
.nav-more-menu .nav-icon { width: 25px; text-align: center; }

/* ===== Corps du site ===== */
.site-main {
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr);
    gap: 22px;
    padding: 22px 26px 28px;
}
.sidebar { min-width: 0; }
.sidebar-card {
    overflow: hidden;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: 13px;
    box-shadow: 0 5px 16px rgba(49, 27, 79, .06);
}
.sidebar-title {
    margin: 0;
    padding: 11px 14px;
    background: linear-gradient(90deg, #eee7f9, #f8f5fc);
    color: var(--violet-800);
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid var(--bordure);
}
.sidebar-title .side-icon { margin-right: 7px; }
.sidebar-content { padding: 10px; }
.sidebar-table { width: 100%; border-collapse: separate; border-spacing: 0 7px; }
.sidebar-table td { padding: 0; text-align: center; }
.sidebar-table a { display: block; }
.sidebar-table img {
    max-width: 180px;
    width: 100%;
    border-radius: 7px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.sidebar-table a:hover img { transform: translateX(2px); box-shadow: 0 4px 12px rgba(49, 27, 79, .13); }
.sidebar-text-link {
    display: block;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--violet-800);
    text-decoration: none;
    text-align: left;
    font-weight: 600;
}
.sidebar-text-link:hover { background: var(--violet-100); }

.content-card {
    min-width: 0;
    padding: 24px 28px 34px;
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: 0 6px 20px rgba(49, 27, 79, .07);
    font-size: 16px;
    overflow-wrap: anywhere;
}

/* ===== Charte commune aux pages intérieures ===== */
.content-card h1,
.content-card h2,
.content-card h3,
.content-card h4 {
    color: var(--violet-800);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2;
}
.content-card h1 {
    margin: 0 0 22px;
    padding-bottom: 10px;
    font-size: clamp(28px, 3vw, 38px);
    border-bottom: 3px solid var(--violet-200);
}
.content-card h2 { margin: 28px 0 12px; font-size: 25px; }
.content-card h3 { margin: 22px 0 10px; font-size: 21px; }
.content-card h4 { margin: 18px 0 8px; font-size: 18px; }
.content-card p { margin: 0 0 1em; }
.content-card ul,
.content-card ol { margin: 0 0 1.2em; padding-left: 1.6em; }
.content-card li { margin-bottom: .35em; }
.content-card a:not(.btn) {
    color: var(--violet-700);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.content-card a:not(.btn):hover { color: var(--violet-900); }
.content-card hr {
    border: 0;
    border-top: 1px solid var(--bordure);
    margin: 26px 0;
}
.content-card blockquote {
    margin: 20px 0;
    padding: 14px 18px;
    background: var(--violet-050);
    border-left: 5px solid var(--violet-500);
    border-radius: 8px;
}
.content-card img {
    border-radius: 9px;
}

/* tableaux de contenu */
.content-card table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 18px 0 24px;
    background: #fff;
}
.content-card th,
.content-card td {
    padding: 10px 12px;
    border: 1px solid var(--bordure);
    vertical-align: middle;
}
.content-card th {
    background: var(--violet-100);
    color: var(--violet-900);
    font-weight: 700;
}
.content-card tr:nth-child(even) td { background: #fcfbfe; }

/* formulaires */
.content-card label { font-weight: 700; color: var(--violet-900); }
.content-card input,
.content-card select,
.content-card textarea,
.content-card button {
    font: inherit;
    font-size: 16px;
}
.content-card input[type="text"],
.content-card input[type="email"],
.content-card input[type="tel"],
.content-card input[type="number"],
.content-card input[type="date"],
.content-card input[type="password"],
.content-card select,
.content-card textarea {
    width: 100%;
    max-width: 760px;
    padding: 10px 12px;
    border: 1px solid #cfc6dc;
    border-radius: 8px;
    background: #fff;
    color: var(--texte);
}
.content-card input:focus,
.content-card select:focus,
.content-card textarea:focus {
    outline: 3px solid rgba(104, 70, 160, .16);
    border-color: var(--violet-600);
}
.content-card button,
.content-card input[type="submit"],
.content-card input[type="button"],
.btn {
    display: inline-block;
    padding: 10px 16px;
    border: 0;
    border-radius: 9px;
    background: var(--violet-700);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
}
.content-card button:hover,
.content-card input[type="submit"]:hover,
.content-card input[type="button"]:hover,
.btn:hover { background: var(--violet-900); }

/* classes réutilisables */
.page-title {
    margin: 0 0 22px;
    padding-bottom: 10px;
    color: var(--violet-800);
    font-size: clamp(28px, 3vw, 38px);
    border-bottom: 3px solid var(--violet-200);
}
.card {
    margin: 18px 0;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(49, 27, 79, .06);
}
.card-title { margin-top: 0 !important; }
.info-box,
.warning-box,
.success-box {
    margin: 18px 0;
    padding: 14px 17px;
    border-radius: 10px;
    border-left: 5px solid;
}
.info-box { background: #f3eff9; border-color: var(--violet-600); }
.warning-box { background: #fff7e8; border-color: var(--alerte); }
.success-box { background: #edf8f1; border-color: var(--succes); }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.photo { display: block; max-width: 100%; margin: 18px auto; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.muted { color: var(--texte-doux); }

/* Compatibilité avec quelques anciennes balises/classes */
silver { color: var(--violet-700); font-weight: 700; }
center { max-width: 100%; }

/* ===== Communes ===== */
.support-strip {
    margin: 0 26px 30px;
    padding: 14px 20px 18px;
    background: linear-gradient(180deg, #f6f2fb, #eee8f7);
    border: 1px solid var(--bordure);
    border-radius: 14px;
}
.support-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 13px;
    color: var(--violet-800);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}
.support-title::before,
.support-title::after { content: ""; height: 1px; flex: 1; background: #c9b9de; }
.support-logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.support-logo {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #fff;
    border: 1px solid #eee8f4;
    border-radius: 11px;
}
.support-logo img { max-height: 82px; max-width: 92%; object-fit: contain; }
.support-logo.versonnex img { max-height: 88px; }

.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 28px;
    background: var(--violet-900);
    color: #eee8f6;
    font-size: 14px;
}
.site-footer a { color: #fff; }

.blink { animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.55} }

@media (max-width: 1180px) {
    .site-header { grid-template-columns: 170px 1fr 235px; padding: 18px 24px; }
    .topnav > a,
    .topnav > .nav-more > summary { font-size: 15px; padding-left: 7px; padding-right: 7px; }
}

@media (max-width: 850px) {
    .site-header { grid-template-columns: 120px 1fr; min-height: auto; }
    .agglo-mark { grid-column: 1 / -1; border-top: 1px solid var(--bordure); padding-top: 14px; }
    .agglo-mark img { max-width: 220px; }
    .club-mark img { max-height: 125px; }
    .topnav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nav-more-menu { right: 0; }
    .site-main { grid-template-columns: 1fr; }
    .sidebar { order: 2; }
    .support-logos { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 620px) {
    html { font-size: 16px; }
    .site-header { grid-template-columns: 90px 1fr; gap: 12px; padding: 14px; }
    .header-title h1 { font-size: 31px; }
    .header-title .subtitle { font-size: 18px; }
    .header-title .baseline { display: none; }
    .topnav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 8px; }
    .topnav > a,
    .topnav > .nav-more > summary { min-height: 50px; padding: 7px 8px; font-size: 15px; }
    .nav-more-menu { position: fixed; left: 12px; right: 12px; top: auto; width: auto; margin-top: 6px; }
    .site-main { padding: 14px; gap: 14px; }
    .content-card { padding: 18px 15px 25px; }
    .content-card table { display: block; overflow-x: auto; white-space: normal; }
    .support-strip { margin: 0 14px 18px; padding: 12px; }
    .support-logos { grid-template-columns: repeat(2, 1fr); }
    .support-title { font-size: 16px; }
    .site-footer { display: block; }
}