/*********************************
*     **   ** ***  * *** **      *
*    *  * *    *  *  *   * *     *
*    *  * *    *     **  * *     *
*    *  * *    *     *   * *     *
*     **   **  *     *** *       *
**********************************
* Copyright (c) Eddy MARIANNE    *
* Oct'Ed Ingénierie - 2013       *
* http://www.octed-ingenierie.fr *
*********************************/

:root {
  --sp2026-bg: #061a2d;
  --sp2026-surface: #0c2a44;
  --sp2026-surface-soft: rgba(255, 255, 255, 0.08);
  --sp2026-primary: #f6d15f;
  --sp2026-primary-strong: #d9a93d;
  --sp2026-accent: #00c2ff;
  --sp2026-text: #e9f0f7;
  --sp2026-text-sub: #c3cfdd;
  --sp2026-pill: #f6d15f;
  --sp2026-font: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --sp2026-radius: 18px;
  --sp2026-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);
  /*couleurs du logo (chronomètre)*/
  --sp2026-rouge:#a81c23;
  --sp2026-jaune:#e2e91d;
  --sp2026-jaune-fonce:#c9b000;
  --sp2026-bleu-clair:#3e5aa9;
  --sp2026-bleu-fonce:#2a3d75;
  --sp2026-bleu-sombre:#1b2a4d;
}

@keyframes sp2026-slide-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sp2026-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sp2026-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* commun */

html {
    min-height: 100vh;
    background-color: #283b73;
    /*
    background-position: center top;
    background-image: url('../imgs/arriere-plan-min.png');
    background-repeat: repeat-x;
    background-attachment: fixed;
    */
}

body {
    margin: 0;
    text-align: center;
    /*font-family: Arial;*/
    font-size: 16px;
    background: #eef2f6;
    color: #0f1c2d;
    font-family: var(--sp2026-font);
    min-height: 100vh;
}

a img {
    border: none;
}

.nopadding {
    padding: 0;
}

.nomargin {
    margin: 0 !important;
}

.overflow {
    overflow: auto;
}

#page {
    /*width: 900px;*/
    margin: auto;
    /*background-color: white;*/
    text-align: center;
    width: 100%;
    max-width: none;
    padding: 0;
    background: #eef2f6;
}

.sp2026 {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-bottom: 80px;
}

.sp2026-hero {
  position: relative;
  overflow: hidden;
  padding: 120px 5% 110px;
  color: var(--sp2026-text);
  background: linear-gradient(160deg, rgba(6, 26, 45, 0.92), rgba(16, 73, 109, 0.85));
  isolation: isolate;
}

.sp2026-hero__bg {
  position: absolute;
  inset: 0;
  transform: scale(1.02);
  filter: brightness(0.8);
  z-index: -2;
}

.sp2026-hero__layer {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp2026-hero__topline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--sp2026-text-sub);
  animation: sp2026-slide-in-right 0.7s ease-out both;
}
.sp2026-hero__topline a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--sp2026-text-sub) !important;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sp2026-pill {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.sp2026-pill-titre {
  text-transform: uppercase;
  display: block;
  font-weight: 700;
  font-size: 10px;
  line-height: 1.3;
}
.sp2026-pill-accroche {
  display: block;
  font-weight: 200;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.9;
}

.sp2026-toptext {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.sp2026-toptext-titre {
  display: block;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
}

.sp2026-toptext-accroche {
  display: block;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
    .sp2026-hero__topline {
        animation: none;
    }
}

.sp2026-pill {
  background: var(--sp2026-jaune);
  color: #1f1500;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.sp2026-hero__title {
  margin: 0;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.15;
  color: #fff;
}

.sp2026-hero__subtitle {
  margin: 0 0 4px 0;
  color: var(--sp2026-text-sub);
  font-size: 16px;
}

.sp2026-hero h2,
.sp2026-content h2 {
    
}
.sp2026-hero h2{
    text-transform: uppercase;
    color:var(--sp2026-text-sub);
}
.sp2026-content h2{
    color:var(--sp2026-surface);
}

h2.text-sub{
    text-transform: uppercase;
    color:var(--sp2026-text-sub);
}

/* Sections avec dégradé bleu-fonce */
.sp2026-content.bleu-fonce {
    background: linear-gradient(135deg, var(--sp2026-bleu-clair) 0%, var(--sp2026-bleu-fonce-sombre) 100%);
    padding-top: 32px;
    padding-bottom: 32px;
}

.sp2026-content.bleu-fonce .sp2026-section-head {
    color: var(--sp2026-text-sub);
}

.sp2026-content.bleu-fonce .sp2026-section-head p,
.sp2026-content.bleu-fonce .sp2026-section-head h2 {
    color: var(--sp2026-text-sub);
}

p.sp2026-jaune {
    color: var(--sp2026-jaune);
    /*font-weight: 600;
    font-size: 16px;*/
}

.sp2026-btn {
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sp2026-btn-primary {
  background: linear-gradient(135deg, var(--sp2026-jaune), var(--sp2026-jaune-fonce));
  color: var(--sp2026-rouge);
  box-shadow: 0 10px 25px rgba(246, 209, 95, 0.3);
  text-decoration: none;
}

.sp2026-btn-interne {
    background: linear-gradient(135deg, #a7b4c5, #8fa1b8);
    color: #f8fafc;
    box-shadow: 0 8px 20px rgba(108, 128, 153, 0.28);
  text-decoration: none;
    border: 1px solid #8fb9d8;
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sp2026-btn-interne:hover {
    background: linear-gradient(135deg, #7faed3, #5f96c4);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(95, 150, 196, 0.34);
}

.sp2026-btn-retour .sp2026-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 12px;
    line-height: 1;
}

.sp2026-status-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 10px 40px;
}

.sp2026-status-shell {
    position: relative;
    overflow: hidden;
    padding: 32px;
    border-radius: 28px;
    background: linear-gradient(145deg, #08233c 0%, #12395e 55%, #0b2036 100%);
    box-shadow: 0 24px 60px rgba(5, 18, 33, 0.22);
    color: var(--sp2026-text);
}

.sp2026-status-shell::before,
.sp2026-status-shell::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.sp2026-status-shell::before {
    top: -120px;
    right: -80px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(246, 209, 95, 0.28) 0%, rgba(246, 209, 95, 0) 72%);
}

.sp2026-status-shell::after {
    bottom: -130px;
    left: -90px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(0, 194, 255, 0.2) 0%, rgba(0, 194, 255, 0) 72%);
}

.sp2026-status-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.95fr);
    gap: 28px;
    align-items: stretch;
}

.sp2026-status-copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: left;
}

.sp2026-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--sp2026-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sp2026-status-badge__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 6px rgba(246, 209, 95, 0.12);
}

.sp2026-status-title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.08;
    text-align: left;
}

.sp2026-status-lead,
.sp2026-status-note {
    margin: 0;
    color: #d8e4f1;
    font-size: 17px;
    line-height: 1.65;
}

.sp2026-status-note {
    font-size: 15px;
    color: #b8cade;
}

.sp2026-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sp2026-status-actions .sp2026-btn,
.sp2026-status-actions .sp2026-btn-primary,
.sp2026-status-actions .sp2026-btn-interne {
    min-height: 46px;
}

.sp2026-status-panel {
    display: grid;
    gap: 14px;
    align-content: start;
}

.sp2026-status-metric,
.sp2026-status-tip {
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-align: left;
}

.sp2026-status-metric__label,
.sp2026-status-tip__label {
    display: block;
    margin-bottom: 8px;
    color: #9bb6d0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sp2026-status-metric__value,
.sp2026-status-tip__value {
    display: block;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
}

.sp2026-status-tip__value {
    font-size: 16px;
    font-weight: 500;
    color: #dbe8f5;
}

.sp2026-status-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.sp2026-status-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 150px;
    padding: 18px 18px 20px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 28, 45, 0.1);
    text-align: left;
}

.sp2026-status-link__eyebrow {
    color: #53759a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sp2026-status-link h2,
.sp2026-status-link h3 {
    margin: 0;
    color: #102038;
    font-size: 20px;
    line-height: 1.2;
}

.sp2026-status-link p {
    margin: 0;
    color: #56657a;
    line-height: 1.55;
}

.sp2026-status-link a {
    margin-top: auto;
    color: var(--sp2026-rouge) !important;
    font-weight: 700;
    text-decoration: none;
}

@media screen and (max-width: 940px) {
    .sp2026-status-card {
        grid-template-columns: 1fr;
    }

    .sp2026-status-links {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 640px) {
    .sp2026-status-page {
        padding: 18px 0 28px;
    }

    .sp2026-status-shell {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .sp2026-status-title {
        font-size: 28px;
    }

    .sp2026-status-lead {
        font-size: 16px;
    }
}

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

header .sp2026-btn-ghost {
  width: min-content;
}

.sp2026-btn:hover { transform: translateY(-2px); }

.sp2026-content .fullwidth{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

.sp2026-categories,
.sp2026-steps {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}

.sp2026-section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
  color: #0f1c2d;
}

.sp2026-kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  margin: 0;
  color: #2a7fb8;
  font-weight: 700;
}
h1.sp2026-kicker{
    /*text-align: left;*/
}

.sp2026-section-head h2 {
  margin: 0;
  font-size: clamp(26px, 4vw, 34px);
  color: #0f1c2d;
}

.sp2026-section-head h1.sp2026-section-sub {
    margin: 0 auto;
    font-size: clamp(26px, 4vw, 34px);
    color: #0f1c2d;
    text-align: center;
}

.sp2026-section-sub {
  margin: 0;
  color: #506078;
  max-width: 680px;
}

.sp2026-course-title {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.sp2026-course-title-main {
    color: #0f1c2d;
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.1;
    font-weight: 800;
    text-transform: none;
    letter-spacing: .01em;
}

.sp2026-course-title-date {
    color: #4f657e;
    font-size: clamp(0.95rem, 1.6vw, 1.12rem);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sp2026-course-title-date::before {
    content: "";
    width: 26px;
    height: 26px;
    display: inline-block;
    background-color: #0f8bd8;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='17' rx='2' fill='black'/%3E%3Crect x='3' y='8' width='18' height='2' fill='white'/%3E%3Crect x='7' y='2' width='2' height='5' fill='black'/%3E%3Crect x='15' y='2' width='2' height='5' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='17' rx='2' fill='black'/%3E%3Crect x='3' y='8' width='18' height='2' fill='white'/%3E%3Crect x='7' y='2' width='2' height='5' fill='black'/%3E%3Crect x='15' y='2' width='2' height='5' fill='black'/%3E%3C/svg%3E");
}

.sp2026-course-content .fullwidth {
    max-width: 1360px;
    padding: 0 1.5%;
}

/* Page course : pas de gap entre sections (évite les barres de fond du main) */
.sp2026.sp2026-course-page {
    gap: 0;
}

/* Espacement interne dans la première section */
.sp2026.sp2026-course-page > .sp2026-content.sp2026-course-content:first-of-type {
    /*background: #ffffff;*/
    padding-bottom: 24px;
}

/* La section suivante colle visuellement à la première */
.sp2026.sp2026-course-page > .section-fiche {
    padding-top: 0 !important;
}

.sp2026-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.sp2026-card {
  background: #fff;
  border-radius: var(--sp2026-radius);
  padding: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #e4ebf3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp2026-card__icon { font-size: 26px; }
.sp2026-card__title { margin: 0; font-size: 18px; color: #102038; }
.sp2026-card__text { margin: 0; color: #56657a; line-height: 1.4; }

.sp2026-steps { margin-top: -10px; }

.sp2026-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.sp2026-step {
  background: linear-gradient(145deg, #0f2c46, #134066);
  color: #e8f3ff;
  border-radius: var(--sp2026-radius);
  padding: 20px;
  box-shadow: var(--sp2026-shadow);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sp2026-step__badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: grid;
  place-items: center;
  font-weight: 800;
  margin-bottom: 10px;
}

.sp2026-step__title {
    margin: 0 0 6px 0;
    color: #ffffff;
}
.sp2026-step__text { margin: 0; color: #c9dbf0; line-height: 1.45; }

.sp2026-services-page {
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
}

.sp2026-services-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.9fr);
    gap: 24px;
    align-items: stretch;
    position: relative;
}

    .sp2026-about-hero,
    .sp2026-about-team {
        grid-template-columns: 1fr;
    }

    .sp2026-about-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

.sp2026-services-hero::before {
    content: "";
    position: absolute;
    inset: -18px -12px auto -12px;
    height: 78%;
    border-radius: 32px;
    background: radial-gradient(circle at top left, rgba(62, 90, 169, 0.12), transparent 46%), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(235, 241, 248, 0.92));
    z-index: -1;
}

.sp2026-services-hero__copy,
.sp2026-services-hero__panel {
    border-radius: 24px;
}

.sp2026-services-hero__copy {
    padding: 28px 30px;
    background: linear-gradient(160deg, #ffffff 0%, #f2f6fb 100%);
    border: 1px solid #dce6f1;
    box-shadow: 0 18px 44px rgba(15, 28, 45, 0.08);
    position: relative;
    overflow: hidden;
}

.sp2026-services-hero__copy::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    right: -40px;
    top: -50px;
    background: radial-gradient(circle, rgba(246, 209, 95, 0.22), rgba(246, 209, 95, 0));
    pointer-events: none;
}

.sp2026-services-lead {
    margin: 0 0 14px 0;
    font-size: 20px;
    line-height: 1.65;
    color: #102038;
}

.sp2026-services-hero__copy p:last-child,
.sp2026-services-offline p:last-child,
.sp2026-services-card p:last-child {
    margin-bottom: 0;
}

.sp2026-services-hero__panel {
    padding: 28px;
    background: linear-gradient(145deg, #0e2b47 0%, #1f4b8f 100%);
    color: #edf6ff;
    box-shadow: var(--sp2026-shadow);
    position: relative;
    overflow: hidden;
}

.sp2026-services-hero__panel::before,
.sp2026-services-hero__panel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.sp2026-services-hero__panel::before {
    width: 180px;
    height: 180px;
    right: -60px;
    top: -50px;
}

.sp2026-services-hero__panel::after {
    width: 120px;
    height: 120px;
    right: 24px;
    bottom: -48px;
}

.sp2026-services-panel__kicker {
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 700;
}

.sp2026-services-hero__panel h2 {
    margin: 0 0 18px 0;
    color: #ffffff;
    font-size: clamp(24px, 3.5vw, 32px);
}

.sp2026-services-panel__items {
    display: grid;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.sp2026-services-ribbon {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.sp2026-services-ribbon__item {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(62, 90, 169, 0.08);
    border: 1px solid rgba(62, 90, 169, 0.14);
    color: #26467f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sp2026-services-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.sp2026-services-metric {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(11, 31, 51, 0.03);
    border: 1px solid #dce6f1;
}

.sp2026-services-metric strong {
    font-size: 24px;
    line-height: 1;
    color: #112746;
}

.sp2026-services-metric span {
    color: #5a6a7f;
    line-height: 1.4;
}

.sp2026-services-mini-card {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sp2026-services-mini-card__icon,
.sp2026-services-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--sp2026-jaune), var(--sp2026-jaune-fonce));
    color: var(--sp2026-rouge);
    font-size: 22px;
    box-shadow: 0 10px 22px rgba(226, 233, 29, 0.22);
}

.sp2026-services-mini-card__icon {
    width: 42px;
    height: 42px;
    font-size: 20px;
}

.sp2026-services-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    padding: 28px;
    border-radius: 26px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(242, 246, 251, 0.9));
    border: 1px solid #dce6f1;
    box-shadow: 0 16px 42px rgba(15, 28, 45, 0.06);
}

.sp2026-services-section::before {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sp2026-jaune), #7faed3 55%, transparent);
}

.sp2026-services-section-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sp2026-services-section-head h2 {
    margin: 2px 0 0 0;
}

.sp2026-services-section-mark {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: 0.18em;
    font-weight: 800;
    color: #6a7a8d;
}

.sp2026-services-card {
    gap: 14px;
}

.sp2026-services-card .sp2026-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(62, 90, 169, 0.1);
    color: #20427a;
}

.sp2026-services-list {
    margin: 0;
    padding-left: 20px;
    color: #405166;
    line-height: 1.7;
}

.sp2026-services-list li + li {
    margin-top: 8px;
}

.sp2026-services-list--iconized {
    list-style: none;
    padding-left: 0;
}

.sp2026-services-list--iconized li {
    position: relative;
    padding-left: 34px;
}

.sp2026-services-li-icon {
    position: absolute;
    left: 0;
    top: 3px;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(62, 90, 169, 0.12);
    color: #1f3f74;
    font-size: 13px;
}

.sp2026-services-note {
    margin: 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: #fff8e1;
    border: 1px solid #f0d88a;
    color: #5b4608;
    font-weight: 600;
}

.sp2026-services-intro {
    margin: -4px 0 0 0;
    color: #506078;
    font-size: 17px;
    line-height: 1.6;
}

.sp2026-services-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 58px;
}

.sp2026-services-card--tall {
    height: 100%;
}

.sp2026-services-emphasis {
    margin: auto 0 0 0;
    padding-top: 10px;
    color: #17345f;
    font-weight: 700;
    line-height: 1.6;
}

.sp2026-services-offline {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 18px;
    padding: 24px 26px;
    border-radius: 24px;
    background: linear-gradient(160deg, #f6f8fb 0%, #edf3f9 100%);
    border: 1px solid #d5e0ee;
    box-shadow: 0 16px 38px rgba(15, 28, 45, 0.06);
}

.sp2026-services-offline h2 {
    margin: 2px 0 10px 0;
}

.sp2026-services-section--cta {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.sp2026-services-section--cta::before {
    display: none;
}

.sp2026-services-cta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 26px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0f2f4b 0%, #1f4b8f 100%);
    color: #eaf4ff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--sp2026-shadow);
}

.sp2026-services-cta .sp2026-services-icon {
    box-shadow: none;
}

.sp2026-services-cta__content h2 {
    margin: 2px 0 8px 0;
    color: #ffffff;
}

.sp2026-services-cta__content p {
    margin: 0;
    color: #d7e8fa;
}

.sp2026-services-cta .sp2026-btn {
    white-space: nowrap;
}

.sp2026-about-page {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.sp2026-about-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr);
    gap: 20px;
}

.sp2026-about-hero__copy,
.sp2026-about-hero__panel {
    border-radius: 22px;
    border: 1px solid #dce6f1;
}

.sp2026-about-hero__copy {
    padding: 26px;
    background: linear-gradient(160deg, #ffffff 0%, #f2f6fb 100%);
    box-shadow: 0 16px 38px rgba(15, 28, 45, 0.07);
}

.sp2026-about-lead {
    margin: 0 0 12px 0;
    font-size: 20px;
    line-height: 1.6;
    color: #102038;
}

.sp2026-about-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.sp2026-about-metric {
    background: rgba(62, 90, 169, 0.06);
    border: 1px solid #d6e2f0;
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp2026-about-metric strong {
    color: #16335c;
    font-size: 17px;
}

.sp2026-about-metric span {
    color: #5a6a7f;
    font-size: 13px;
    line-height: 1.35;
}

.sp2026-about-hero__panel {
    padding: 26px;
    background: linear-gradient(145deg, #0f2f4b 0%, #1f4b8f 100%);
    color: #e7f3ff;
    box-shadow: var(--sp2026-shadow);
}

.sp2026-about-panel__kicker {
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 700;
}

.sp2026-about-hero__panel h2 {
    margin: 0 0 14px 0;
    color: #ffffff;
}

.sp2026-about-trust-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.sp2026-about-trust-list li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 8px;
    align-items: start;
    color: #d9eaff;
}

.sp2026-about-section {
    padding: 24px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(242, 246, 251, 0.92));
    border: 1px solid #dce6f1;
    box-shadow: 0 16px 38px rgba(15, 28, 45, 0.06);
}

.sp2026-about-section + .sp2026-about-section {
    margin-top: 0;
}

.sp2026-about-section-head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
}

.sp2026-about-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--sp2026-jaune), var(--sp2026-jaune-fonce));
    color: var(--sp2026-rouge);
    font-size: 22px;
    box-shadow: 0 10px 22px rgba(226, 233, 29, 0.22);
}

.sp2026-about-section-mark {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: 0.18em;
    font-weight: 800;
    color: #6a7a8d;
}

.sp2026-about-section-head h2 {
    margin: 0;
}

.sp2026-about-labels {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
}

.sp2026-about-history {
    margin: 18px 0 6px 0;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(160deg, #f6f9fd 0%, #edf3fa 100%);
    border: 1px solid #d4e1ef;
    color: #2e425a;
    line-height: 1.65;
}

.sp2026-about-history__title {
    margin: 0 0 8px 0;
    color: #183760;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sp2026-about-history p {
    margin: 0;
}

.sp2026-about-labels img {
    width: 100%;
    max-width: 150px;
    height: auto;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #dbe6f3;
    padding: 8px;
    justify-self: center;
}

.sp2026-about-card {
    gap: 12px;
}

.sp2026-about-card .sp2026-card__icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(62, 90, 169, 0.1);
    color: #20427a;
}

.sp2026-about-linkline {
    margin: 16px 0 0 0;
}

.sp2026-about-team {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    align-items: start;
}

.sp2026-about-team__photo {
    width: 100%;
    max-width: 220px;
    border-radius: 16px;
    border: 1px solid #d6e2f0;
    box-shadow: 0 12px 30px rgba(15, 28, 45, 0.12);
}

.sp2026-about-section-head--team {
    margin-bottom: 18px;
}

.sp2026-about-focus-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sp2026-about-focus-card {
    gap: 10px;
}

.sp2026-about-focus-card .sp2026-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(62, 90, 169, 0.1);
    color: #20427a;
}

.sp2026-about-focus-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}

.sp2026-about-focus-list li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 8px;
    align-items: start;
    color: #405166;
    line-height: 1.55;
}

.sp2026-about-focus-list li span {
    color: #2e5a99;
    font-size: 12px;
    margin-top: 3px;
}

.sp2026-about-section--cta {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.sp2026-about-cta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 24px;
    border-radius: 22px;
    background: linear-gradient(135deg, #0f2f4b 0%, #1f4b8f 100%);
    color: #eaf4ff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--sp2026-shadow);
}

.sp2026-about-cta__content h2 {
    margin: 2px 0 8px 0;
    color: #ffffff;
}

.sp2026-about-cta__content p {
    margin: 0;
    color: #d7e8fa;
}

.sp2026-about-cta .sp2026-btn {
    white-space: nowrap;
}

.sp2026-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(6, 26, 45, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--sp2026-text) 0px 1px 20px 0px;
}

.sp2026-header__bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 5%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  overflow:clip;
}

.sp2026-logo {
  position: relative;
  overflow: visible;
}
.sp2026-logo img { 
  height: 140px; 
  display: block; 
  position: absolute;
  top: -45px;
  left:30px;
}
.sp2026-logo:hover img {
  transform: rotate(-5deg);
  transition: transform 0.3s ease;
}
.sp2026-logo span{
    color: white;
    position: absolute;
    z-index: 100;
    display: block;
    width: max-content;
    font-size: xx-large;
    text-transform: uppercase;
    line-height: 0px;
    text-shadow: 2px 2px black;
}

.sp2026-nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-left: 200px;
  justify-content: center;
}

.sp2026-nav__link {
  color: #dbe8f7;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background 0.2s ease, color 0.2s ease;
}

.sp2026-nav__link:hover { background: rgba(255,255,255,0.08); }
.sp2026-nav__link.is-active { 
    background: rgba(233, 225, 29, 0.85);
    color: var(--sp2026-bg); 
}

.sp2026-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.sp2026-link {
  color: #dbe8f7;
  text-decoration: none;
  font-weight: 600;
}

.sp2026-burger {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
}
.sp2026-burger span { display: block; width: 22px; height: 2px; background: #fff; margin: 4px 0; transition: transform 0.2s ease; }
.sp2026-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sp2026-burger.is-open span:nth-child(2) { opacity: 0; }
.sp2026-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sp2026-nav-mobile {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px 5%;
  background: rgba(6,26,45,0.95);
  border-top: 1px solid rgba(255,255,255,0.06);
  animation: sp2026-fade-in 0.3s ease-out;
  height: calc(100vh - 70px);
}

.sp2026-nav-mobile__actions { display: flex; gap: 10px; align-self:center;}

.sp2026-footer {
  background: #0b1c2f;
  color: #dbe8f7;
  padding: 48px 5% 36px;
  /*margin-top: 60px;*/
}
.sp2026-footer h2{
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
    margin: 0 0 10px 0; 
    color: #fff;
}

.sp2026-footer__top {
  max-width: 1200px;
  margin: 0 auto 32px auto;
  display: grid;
  grid-template-columns: 1.2fr 1.6fr 1fr;
    grid-template-areas:
        "brand cols cta"
        "partenaires partenaires partenaires";
  gap: 0 28px;
}

.sp2026-footer__brand { grid-area: brand; }
.sp2026-footer__cols { grid-area: cols; }
.sp2026-footer__cta { grid-area: cta; }

.sp2026-footer__partenaires-labels {
        grid-area: partenaires;
        display: flex;
    flex-direction: row;
    justify-self: flex-end;
    justify-content: flex-start;
    gap: 32px;
    align-items: flex-start;
}

.sp2026-footer__brand img { 
  /*height: 44px;*/ 
  margin-bottom: 12px; 
  /*filter: brightness(0) saturate(100%) invert(95%) sepia(8%) saturate(168%) hue-rotate(169deg) brightness(99%) contrast(96%);*/
}
.sp2026-footer__brand img::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--sp2026-text);
    opacity: 0.5;
}
.sp2026-footer__brand p { margin: 0; color: #b8c8db; line-height: 1.5; }

.sp2026-footer__partenaires, .sp2026-footer__labels {
    margin-top: 16px;
    /*display: grid;*/
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.sp2026-footer__partenaires .partenaires_libelle, 
.sp2026-footer__labels .labels_libelle
{
    color:white;
    font-style: italic;
    font-weight: normal;
    font-size:12px;
    margin-bottom:14px;
}

.sp2026-footer_partenaire {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 82px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
}

.sp2026-footer_partenaire .partenaire_nom {
    font-size: 14px;
    color: #dbe8f7;
    line-height: 1.2;
}

.sp2026-footer_partenaire .partenaire_logo, 
.sp2026-footer_label .label_logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.sp2026-footer_partenaire .partenaire_logo img{
    max-height: 96px;
    width: auto;
    margin: 0;
}
.sp2026-footer_label .label_logo img {
    max-height: 64px;
    width: auto;
    margin: 0;
}
.sp2026-footer__labels .labels_liste{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-evenly;
    gap: 8px;
    min-height: 82px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
}

.sp2026-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 18px; }
/*.sp2026-footer__cols h4 { margin: 0 0 10px 0; color: #fff; }*/
.sp2026-footer__cols a { display: block; color: #c6d7ec; text-decoration: none; padding: 4px 0; }
.sp2026-footer__cols a:hover { color: var(--sp2026-pill); }

/*.sp2026-footer__cta h4 { margin: 0 0 8px 0; color: #fff; }*/
.sp2026-footer__cta p { margin: 0 0 12px 0; color: #c6d7ec; }

.sp2026-footer__bottom {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #a9bdd6;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 16px;
}

.sp2026-footer__social { display: flex; gap: 12px; }
.sp2026-footer__social a { color: #c6d7ec; text-decoration: none; }
.sp2026-footer__social a:hover { /*color: #3b5998;*/ }
.sp2026-footer__social a span.reseauSocial {
    margin-left: 8px;
    /*font-weight: bold;*/
    font-family: Arial, sans-serif;
    display: inline-block;
    border-bottom: 2px solid transparent;
    padding-bottom: 4px;
    vertical-align: text-top;
}
.sp2026-footer__social a:hover span.reseauSocial {
    border-bottom: 2px solid #3b5998;
}
#facebook-icon {
  color:white !important;
    background-color: #3b5998;
    border-radius: 20%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

/* entête */

#header {
    /*background-image: url("../imgs/banniere-min.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    */
    background-color: #283b73;
    background-image: url("../imgs/bg-logo.png");
    background-repeat: repeat-x;
    text-align: left;
    overflow: hidden;
    width: 100%;
    height: 180px;
}

#logo {
    float: left;
    width: 170px;
    height: 180px;
    text-align: center;
    position: relative;
}

#logo img {
    vertical-align: bottom;
    position: absolute;
    bottom: 5px;
    left: 40px;
    width: 98px;
}


/* menu */

#menu {
    margin-top: 149px;
    /*float: left;*/
    height: 32px;
    background-color: #ffdd55;
    font-size: 12px;
    line-height: 32px;
    /*width: 730px;*/
    background-image: url("../imgs/petitCoureur-min.jpg");
    background-position: right+8px center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.fleche-menu {
    display: none;
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#menu ul li {
    display: inline;
}

#menu a {
    display: block;
    float: left;
    font-weight: bold;
    color: #4d4d4d;
    text-decoration: none;
    padding-left: 8px;
    padding-right: 8px;
}

#menu a:hover {
    color: #ffdd55;
    background-color: #4d4d4d;
}

#menu a.focus {
    color: #ffdd55;
    background-color: #4d4d4d;
}


/*#liLive {
    background-image: url("../imgs/new.16.png");
    background-position: left top;
    background-repeat: no-repeat;
}*/

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

#liLive img {
    /*float: left;*/
    vertical-align: top;
    margin-right: -5px;
    text-decoration: blink;
    animation: blinker 1s linear infinite;
}

#liMembre a {
    float: right;
    /*margin-right: 17px;*/
    padding-right: 30px;
}

#liMembre a:hover {
    background-image: url("../imgs/petitCoureurJaune-min.jpg");
    background-position: right+8px center;
    background-repeat: no-repeat;
}


/* contenu */

#content {
    clear: both;
    overflow: auto;
    /*
    background-image: url("../imgs/chrono-min.50.jpg");
    background-position: center 200px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    */
}


/* index */
/*
#index {
    text-align: left;
    padding-top: 8px;
    padding-left: 10px;
    font-size: 8pt;
}
*/

/* Breadcrumb (#index) - modernisation 2026 */
    #index {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin: 12px auto 18px;
      padding: 10px 14px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      /*background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));*/
      background-color: var(--sp2026-bg);
      color: rgba(255, 255, 255, 0.85);
      font-size: 13px;
      line-height: 1.4;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      box-shadow: 0 8px 26px -12px rgba(0, 0, 0, 0.45);
      max-width:1200px;
    }

        #index ol {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #index li {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #index li::marker {
            content: "";
        }

        #index li > span[itemprop="name"] {
            color: rgba(255, 255, 255, 0.85);
            font-weight: 600;
        }

        #index .breadcrumb-separator {
            color: rgba(255, 255, 255, 0.6);
            font-weight: 700;
            -webkit-user-select: none;
            user-select: none;
        }

    #index a {
      color: #ffffff;
      text-decoration: none;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.08);
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

    #index a:hover {
      background: rgba(255, 255, 255, 0.16);
      border-color: rgba(255, 255, 255, 0.3);
      transform: translateY(-1px);
    }


/* annonces latérales */
/*
#cadres {
    padding-left: 7px;
    padding-top: 10px;
    width: 156px;
    float: left;
}

.cadre {
    background-color: white;
    color: black;
    border: none;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 12px;
    text-align: right;
    background-image: url("../imgs/coinCadreJaunePale-min.jpg");
    background-position: left bottom;
    background-repeat: no-repeat;
}

.cadre a {
    color: black;
    text-decoration: none;
}

.cadre a:hover {
    color: #ad361e;
}

.cadre_titre {
    background-image: url("../imgs/fondTitreCadre156-min.jpg");
    background-position: left top;
    background-repeat: repeat-y;
    background-size: contain;
    color: #4d4d4d;
    margin-top: 0px;
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: left;
    padding-left: 5px;
    height: 15px;
}

.cadre_contenu {
    font-size: 11px;
    padding-top: 10px;
}

.date {
    font-weight: normal;
    font-size: 10px;
    text-align: left;
    padding-left: 5px;
}

.info {
    padding-left: 5px;
    padding-right: 5px;
}

.infoPlus {
    padding-left: 5px;
    padding-right: 5px;
    font-weight: normal;
    font-style: italic;
}

.cadre_lien {
    text-align: left;
    font-style: italic;
    padding-top: 10px;
    font-size: 11px;
    padding-bottom: 10px;
    padding-left: 5px;
}

.cadre_lien a {
    color: #4d4d4d;
}

.cadreCourse,
.cadreResultat,
.cadreActu {
    margin-bottom: 10px;
}

.cadreCourse a,
.cadreResultat a,
.cadreActu a {
    display: block;
}

.cadreCourse:hover,
.cadreResultat:hover,
.cadreActu:hover {
    background-color: #ffffdd;
}*/

/* Cadres - Design 2026 Modernisation */
#cadres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    margin-top: 24px;
    animation: fadeInUp 0.6s ease-out;
    align-items: stretch;
}

/* Cadres pour pages publiques - Responsive Modern Design */
#cadres.sp2026-public {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 60px 5%;
    background: linear-gradient(135deg, #0f2947, #122f47);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    align-items: stretch;
}

@keyframes fadeInUp {
    from {
    opacity: 0;
    transform: translateY(20px);
    }
    to {
    opacity: 1;
    transform: translateY(0);
    }
}

#cadres .cadre {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--sp2026-radius);
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

#cadres .cadre:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 48px -8px rgba(0, 0, 0, 0.4);
    transform: translateY(-4px);
}

/* Amélioration pour sp2026-public */
#cadres.sp2026-public .cadre {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

#cadres.sp2026-public .cadre:hover {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-6px);
}

#cadres .cadre_titre {
    padding: 16px 18px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

#cadres .cadre_titre::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

/* Style amélioré pour sp2026-public */
#cadres.sp2026-public .cadre_titre {
    padding: 18px 20px;
    font-size: 14px;
    background: linear-gradient(90deg, #f8f9fa, #ffffff);
    border-bottom: 2px solid rgba(4, 17, 30, 0.1);
    color: #102038;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
}

#cadres.sp2026-public .cadre_titre::before {
    background: var(--sp2026-bg);
    opacity: 1;
}
#cadres.sp2026-public #c_evenements .cadre_titre::before
{
    background: var(--sp2026-rouge) !important;
}
#cadres.sp2026-public #c_resultats .cadre_titre::before
{
    background: var(--sp2026-jaune) !important;
}

#cadres .cadre_contenu {
    padding: 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#cadres .cadre_contenu::-webkit-scrollbar {
    width: 6px;
}

#cadres .cadre_contenu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

#cadres .cadre_contenu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    transition: background 0.2s ease;
}

#cadres .cadre_contenu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Style optimisé pour sp2026-public */
#cadres.sp2026-public .cadre_contenu {
    padding: 16px 18px;
    gap: 14px;
}

#cadres.sp2026-public .cadre_contenu::-webkit-scrollbar {
    width: 5px;
}

#cadres.sp2026-public .cadre_contenu::-webkit-scrollbar-track {
    background: rgba(4, 17, 30, 0.04);
    border-radius: 10px;
}

#cadres.sp2026-public .cadre_contenu::-webkit-scrollbar-thumb {
    background: rgba(4, 17, 30, 0.15);
    border-radius: 10px;
}

#cadres.sp2026-public .cadre_contenu::-webkit-scrollbar-thumb:hover {
    background: rgba(4, 17, 30, 0.25);
}

/* Cartes individuelles : Courses, Résultats, Actualités */
#cadres .cadreCourse,
#cadres .cadreResultat,
#cadres .cadreActu {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.25s ease;
    cursor: pointer;
}

#cadres .cadreCourse:hover,
#cadres .cadreResultat:hover,
#cadres .cadreActu:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

/* Style amélioré pour sp2026-public */
#cadres.sp2026-public .cadreCourse,
#cadres.sp2026-public .cadreResultat,
#cadres.sp2026-public .cadreActu {
    background: #f8f9fa;
    border: 1px solid rgba(4, 17, 30, 0.08);
    border-radius: 10px;
    overflow: visible;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

#cadres.sp2026-public .cadreCourse a {
    display: grid;
    grid-template-columns: 65px 1fr;
    gap: 15px;
    /*padding: 15px;*/
    text-align:left;
}

#cadres.sp2026-public .cadreResultat a {
    display: grid;
    grid-template-columns: 75px 1fr;
    gap: 15px;
    /*padding: 15px;*/
    text-align:left;
}

#cadres.sp2026-public .cadreCourse:hover,
#cadres.sp2026-public .cadreResultat:hover,
#cadres.sp2026-public .cadreActu:hover {
    background: #ffffff;
    border-color: rgba(4, 17, 30, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

#cadres .cadreCourse a,
#cadres .cadreResultat a,
#cadres .cadreActu a {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

#cadres .cadreCourse .date-calendrier,
#cadres .cadreResultat .date,
#cadres .cadreActu .date {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.01em;
    line-height: 1.4;
    margin-bottom: 8px;
}

#cadres .cadreCourse .info,
#cadres .cadreResultat .info,
#cadres .cadreActu .info {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 6px;
}

#cadres .cadreCourse .infoPlus,
#cadres .cadreResultat .infoPlus,
#cadres .cadreActu .infoPlus {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.3;
}

/* Style amélioré pour sp2026-public */
#cadres.sp2026-public .cadreCourse a,
#cadres.sp2026-public .cadreResultat a,
#cadres.sp2026-public .cadreActu a {
    text-decoration: none;
    color: inherit;
}

#cadres.sp2026-public .cadreCourse .date-calendrier,
#cadres.sp2026-public .cadreResultat .date,
#cadres.sp2026-public .cadreActu .date {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    letter-spacing: 0.02em;
    line-height: 1.5;
    margin-bottom: 6px;
    text-transform: uppercase;
}

#cadres.sp2026-public .cadreCourse .info,
#cadres.sp2026-public .cadreResultat .info,
#cadres.sp2026-public .cadreActu .info {
    font-size: 14px;
    font-weight: 700;
    color: #102038;
    line-height: 1.35;
    margin-bottom: 4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#cadres.sp2026-public .cadreCourse .infoPlus,
#cadres.sp2026-public .cadreResultat .infoPlus,
#cadres.sp2026-public .cadreActu .infoPlus {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* Conteneur spécifique pour contenu cadre actualité */
#cadres .cadreActu .cadre_contenu {
    padding: 12px;
}

#cadres .cadreActu .cadre_contenu .date {
    margin-bottom: 6px;
}

/* Style optimisé pour sp2026-public actualités */
#cadres.sp2026-public .cadreActu {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#cadres.sp2026-public .cadreActu .cadre_contenu {
    padding: 0;
    flex: 1;
}

#cadres.sp2026-public .cadreActu .date {
    margin-bottom: 6px;
}

/* Lien "Voir plus" des cadres */
#cadres .cadre_lien {
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    text-align: center;
}

#cadres .cadre_lien a {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    transition: all 0.25s ease;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

#cadres .cadre_lien a:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px -4px rgba(255, 255, 255, 0.1);
}

/* Style amélioré pour sp2026-public */
#cadres.sp2026-public .cadre_lien {
    padding: 14px 18px;
    border-top: 1px solid rgba(4, 17, 30, 0.08);
    background: #f8f9fa;
    text-align: center;
}

#cadres.sp2026-public .cadre_lien a {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #102038;
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 6px;
    border: 1px solid rgba(4, 17, 30, 0.12);
    background: rgba(4, 17, 30, 0.04);
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

#cadres.sp2026-public .cadre_lien a:hover {
    background: #102038;
    color: #ffffff;
    border-color: #102038;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 32, 56, 0.15);
}

#c_evenements .cadre_lien a:hover{
    background-color:var(--sp2026-rouge) !important;
    border-color: var(--sp2026-rouge) !important;
}
#c_resultats .cadre_lien a:hover{
    background-color:var(--sp2026-jaune-fonce) !important;
    border-color: var(--sp2026-jaune-fonce) !important;
}

/* Disposition en grille pour les cartes */
#cadres .cadreCourse,
#cadres .cadreResultat {
    padding: 14px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: flex-start;
}

#cadres .cadreCourse .date,
#cadres .cadreResultat .date {
    grid-column: 1;
    grid-row: 1 / 4;
    padding: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    min-width: 70px;
    text-align: center;
}

#cadres .cadreCourse .info,
#cadres .cadreResultat .info {
    grid-column: 2;
    grid-row: 1;
}

#cadres .cadreCourse .infoPlus,
#cadres .cadreResultat .infoPlus {
    grid-column: 2;
    grid-row: 2;
}

/* Disposition optimisée pour sp2026-public */
#cadres.sp2026-public .cadreCourse,
#cadres.sp2026-public .cadreResultat {
    padding: 12px 14px;
    display: grid;
    /*grid-template-columns: 65px 1fr;*/
    gap: 12px;
    align-items: flex-start;
}

#cadres.sp2026-public .cadreCourse .date-calendrier,
#cadres.sp2026-public .cadreResultat .date-calendrier {
    grid-column: 1;
    grid-row: 1 / 3;
    padding: 0;
    background: linear-gradient(135deg, rgba(4, 17, 30, 0.04), rgba(4, 17, 30, 0.02));
    border: 2px solid rgba(4, 17, 30, 0.12);
    border-radius: 8px;
    min-width: 65px;
    text-align: center;
    font-size: 11px;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Mini calendrier générique pour affichage d'une date */
.date-calendrier{
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.15), rgba(255, 215, 0, 0.05));
    border: 2px solid var(--sp2026-rouge);
    /*min-height: 80px;*/
    width:auto;
    height:fit-content;
}
.date-calendrier-mois{
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    background: var(--sp2026-rouge);
    width: 100%;
    padding: 3px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.date-calendrier-jour {
    font-size: 22px;
    font-weight: 700;
    color: var(--sp2026-rouge);
    padding: 4px 0 2px 0;
    line-height: 1;
}
.date-calendrier-chaine {
    font-size: 8px;
    color: #666;
    padding: 3px 4px;
    border-top: 1px solid rgba(4, 17, 30, 0.1);
    width: auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

/* Mini calendrier spécifique pour courses */
#cadres.sp2026-public .cadreCourse .date-calendrier {   
}

#cadres.sp2026-public .cadreCourse .date-calendrier-mois {    
}

#cadres.sp2026-public .cadreCourse .date-calendrier-jour {
}

#cadres.sp2026-public .cadreCourse .date-calendrier-chaine {
}

/* Résultats: format avec date/icône/ville à gauche */
#cadres.sp2026-public .cadreResultat .resultat-gauche {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.08), rgba(255, 215, 0, 0.03));
    border: 1px solid rgba(218, 165, 32, 0.2);
    border-radius: 8px;
    width: 75px;
    text-align: center;
}

#cadres.sp2026-public .cadreResultat .resultat-date {
    font-size: 11px;
    font-weight: 600;
    color: #102038;
    line-height: 1.3;
    padding: 4px 6px 2px 6px;
}

#cadres.sp2026-public .cadreResultat .resultat-icone {
    font-size: 0;
    line-height: 1;
    padding: 2px 0 1px 0;
}

/* Icône podium en CSS */
#cadres.sp2026-public .cadreResultat .resultat-icone .podium-icon {
    display: inline-block;
    width: 30px;
    height: 24px;
    background:
        linear-gradient(135deg, #f0c200 0%, #c88e00 100%) 0 100% / 10px 12px no-repeat,
        linear-gradient(135deg, #ffd84d 0%, #d39a00 100%) 10px 100% / 10px 16px no-repeat,
        linear-gradient(135deg, #e2b500 0%, #b98300 100%) 20px 100% / 10px 8px no-repeat;
    border-radius: 2px;
}

#cadres.sp2026-public .cadreResultat .resultat-ville {
    font-size: 10px;
    color: #666;
    line-height: 1.2;
    padding: 2px 6px 4px 6px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

#cadres.sp2026-public .cadreResultat .resultat-droite {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#cadres.sp2026-public .cadreCourse .info,
#cadres.sp2026-public .cadreResultat .resultat-droite .info {
    grid-column: 2;
    grid-row: 1;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: #102038;
    line-height: 1.4;
}

#cadres.sp2026-public .cadreCourse .infoPlus,
#cadres.sp2026-public .cadreResultat .resultat-droite .infoPlus {
    grid-column: 2;
    grid-row: 2;
    padding: 0;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* Partenaire officiel */
#cadres .cadre .center {
    text-align: center;
    padding: 12px 0;
}

#cadres .cadre .lienExterne {
    max-width: 100%;
    height: auto;
    opacity: 0.85;
    transition: opacity 0.25s ease;
    border-radius: 8px;
}

#cadres .cadre .lienExterne:hover {
    opacity: 1;
}


/* texte - commun */

#text {
    text-align: justify;
    /*position: relative;*/
}

#text .text {
    padding: 10px;
    /*font-size: 13px;*/
    max-width: 1200px;
    margin: 0 auto;
}

.fullwidth {
    width:auto;
    /*margin-left: 10px;
    margin-right: 10px;*/
    /*width: 98%;*/
    /*margin-left: 160px;*/
}

h1,
h2,
h3,
h4 {
    color: #4d4d4d;
}

h1 {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    padding-top: 0px;
}

span.live {
    background: red;
    color: white;
    padding: 5px;
}

h2 {
    /*font-size: 14px;*/
    font-weight: bold;
    padding-left: 0;
    margin: 0;
    padding-top: 10px;
}

h3 {
    font-size: 12px;
    font-weight: bold;
}

h4 {
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
    overflow: auto;
}

#text a {
    /*color: #ad361e;*/
    color: var(--sp2026-rouge);
    text-decoration:none;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.clear {
    clear: both;
}

.clearright {
    clear: right;
}

.clearleft {
    clear: left;
}

.relative {
    position: relative;
}

.sub {
    vertical-align: sub;
}

.sup {
    vertical-align: super;
    font-size: 7px;
}

input[type="text"] {
    border: #4d4d4d solid 1px;
}

textarea {
    border: #4d4d4d solid 1px;
}

.hidden,
.hiddenFirst {
    display: none;
}

.disabled {
    color: lightgrey;
}

.red {
    color: red;
}

.barre {
    text-decoration: line-through;
}

.souligne {
    text-decoration: underline;
}

.noBorder {
    border: none;
}

.floatright {
    float: right;
}

.floatleft {
    float: left;
}

img.gauche {
    vertical-align: top;
    float: left;
    margin-right: 10px;
    padding-top: 5px;
}

img.droite {
    vertical-align: top;
    float: right;
    margin-right: 10px;
    padding-top: 5px;
}

.note {
    font-style: italic;
    font-size: 11px;
}

.left-padded {
    padding-left: 10px;
}

.right-padded {
    padding-right: 10px;
}

.bottom-padded {
    padding-bottom: 10px;
}

.top-padded {
    padding-top: 10px;
}

.lien {
    /*color: #ad361e;*/
    color: var(--sp2026-rouge);
    text-decoration: underline;
}

.sp2026-content.bleu-clair{
    background-color: var(--sp2026-bleu-clair);
}
.sp2026-content.bleu-fonce{
    background-color: var(--sp2026-bleu-fonce);
}
/*
.sp2026-content .fullwidth{
    width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;    
}
*/

p a.sp2026-btn-primary,
p a span.sp2026-btn-primary {
    width:auto;
}

/*pastilles*/
.sp2026-features-circles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin: 40px 0;
    justify-items: center;
}

.sp2026-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 200px;
}
.sp2026-feature-text em{
    font-weight: 500;
}

.sp2026-feature-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.sp2026-feature-circle::before {
    content: attr(data-icon);
    font-size: 48px;
    line-height: 1;
}

.sp2026-feature-circle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.sp2026-feature-text {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    margin: 0;
}

.sp2026-search{
    display: flex;
    gap: 8px;
    margin-top: 20px;
}


/* tips */

.tip {
    width: 300px;
    font-family: arial;
    font-size: 10px;
    background-color: #fffcc7;
    /*border: dotted 1px #ad361e;*/
    border: dotted 1px var(--sp2026-rouge);
}

.tip-title {
    color: #4d4d4d;
    font-weight: bold;
    padding-top: 5px;
}

.overTxtLabel {
    color: black;
}


/* accueil.php */
/*
#fonctCoureur ul {
    margin: 0;
    margin-left: 50px;
    margin-right: 50px;
    padding: 0;
    list-style-type: none;
    height: 260px;
}

#fonctCoureur ul li {
    float: left;
    width: 298px;
    text-align: left;
}

.fonctLiDiv {
    height: 80px;
}

.fonctTitre {
    padding-top: 15px;
    font-weight: bold;
}

.fonctDesc {
    font-size: 11px;
}

#fonctCoureur img {
    margin: 3px;
    vertical-align: middle;
    float: left;
}

#lienNewCompte {
    margin-left: -30px;
    margin-bottom: 20px;
}

#lienNewCompte a {
    color: #4d4d4d;
    text-decoration: none;
}

#lienNewCompte a:hover {
    text-decoration: underline;
}

#newCompte {
    background-color: #ffdd55;
    color: #4d4d4d;
    font-weight: bold;
    padding: 10px 30px 10px 30px;
    border: solid 1px #4d4d4d;
}
*/

/* courses.php */

#courseList {
    --course-accent: #0f8bd8;
    --course-accent-dark: #0669ad;
    --course-accent-soft: #e8f5ff;
    --course-title: #114b7a;
    width: min(1100px, 100%);
    margin: 20px auto 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.course-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 310px) 1fr;
    grid-template-areas:
        "date date"
        "affiche contenu"
        "inscription inscription";
    column-gap: 16px;
    border: solid 1px #d7dbe0;
    border-left: solid 8px #b5d8ef;
    border-radius: 14px;
    background-color: #fff;
    padding: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transition: box-shadow 160ms ease, border-color 160ms ease, border-left-color 160ms ease;
}

.course-card:hover {
    border-color: #b5d8ef;
    border-left-color: #ffe8a0;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.11);
}

h3.noBottomMargin {
    margin-bottom: 0 !important;
}

#courseList form {
    display: inline;
    float: right;
    /*margin:10px 0px 10px 0px;*/
    margin: 0;
    padding: 0;
}

#courseList input {
    display: inline;
    margin-right: 10px;
}

.afficheCtnr {
    grid-area: affiche;
    width: 100%;
    margin-right: 0;
}

.afficheCtnr img {
    border: solid 1px #99cbe9;
    border-radius: 10px;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 1 / 1.414;
    height: auto;
    max-height: 481px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.dateCourseCtnr {
    grid-area: date;
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.45;
    color: white;
    background: var(--course-title);
    margin: -12px 0 10px -12px;
    padding: 9px 14px;
    border-radius: 12px 0 8px 0;
}

.dateCourseCtnr::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: -3px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='17' rx='2' fill='black'/%3E%3Crect x='3' y='8' width='18' height='2' fill='white'/%3E%3Crect x='7' y='2' width='2' height='5' fill='black'/%3E%3Crect x='15' y='2' width='2' height='5' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='17' rx='2' fill='black'/%3E%3Crect x='3' y='8' width='18' height='2' fill='white'/%3E%3Crect x='7' y='2' width='2' height='5' fill='black'/%3E%3Crect x='15' y='2' width='2' height='5' fill='black'/%3E%3C/svg%3E");
}

img.etoile-favori {
    vertical-align: middle;
    margin: 0 0 0 4px;
    padding: 0;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

img.etoile-favori:not(.actionBtn) {
    filter: drop-shadow(0 1px 1px rgba(190, 32, 32, .20));
}

img.etoile-favori.actionBtn {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
    cursor: pointer;
}

img.etoile-favori.actionBtn:hover {
    transform: translateY(-1px) scale(1.05);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .24)) saturate(1.08);
}

img.etoile-favori:not(.actionBtn):hover {
    transform: translateY(-1px);
    filter: drop-shadow(0 2px 3px rgba(190, 32, 32, .30));
}

.courseCtnr h3 {
    display: inline-block;
    margin-top: 2px;
    margin-bottom: 8px;
    font-size: clamp(1.2rem, 1.9vw, 1.55rem);
    line-height: 1.25;
}

.courseCtnr h3 a {
    color: var(--course-title);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .01em;
}

.courseCtnr h3 a:hover {
    color: var(--course-accent-dark);
    text-decoration: underline;
}

.courseCtnr {
    grid-area: contenu;
    overflow: hidden;
}

.courseCtnr>div {
    margin: 5px 0;
}

.courseLink::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: -2px;
    background-color: var(--course-accent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5l8 7-8 7-1.4-1.4 6.4-5.6-6.4-5.6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5l8 7-8 7-1.4-1.4 6.4-5.6-6.4-5.6z'/%3E%3C/svg%3E");
}

a.evenementLbl {
    text-decoration: none;
    color: var(--course-accent-dark) !important;
    font-style: italic;
}

a.evenementLbl:hover {
    text-decoration: underline;
}

.lblCourse {
    font-weight: bold;
}

.courseCtnr .lblCourse,
.inscriptionCtrn .lblCourse {
    --sp-label: "Info";
    position: relative;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    margin-right: 4px;
    font-size: 0;
    color: transparent;
}

.courseCtnr .lblCourse::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='black'/%3E%3C/svg%3E");
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: -4px;
    background-color: var(--course-accent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: var(--sp-icon);
    mask-image: var(--sp-icon);
}

.courseCtnr .lblCourse.lbl-type::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h2v18H4zM8 5h10l-2.2 3L18 11H8z'/%3E%3C/svg%3E");
}

.courseCtnr .lblCourse.lbl-type {
    --sp-label: "Type d'épreuve";
}

.courseCtnr .lblCourse.lbl-distance::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 7h18v10H3zM6 9h2v2H6zm4 0h2v2h-2zm4 0h2v2h-2z'/%3E%3C/svg%3E");
}

.courseCtnr .lblCourse.lbl-distance {
    --sp-label: "Distance";
}

.courseCtnr .lblCourse.lbl-denivele::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 19l6-10 4 6 3-4 5 8z'/%3E%3C/svg%3E");
}

.courseCtnr .lblCourse.lbl-denivele {
    --sp-label: "Dénivelé";
}

.courseCtnr .lblCourse.lbl-kmeffort::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2L5 14h6l-1 8 9-13h-6z'/%3E%3C/svg%3E");
}

.courseCtnr .lblCourse.lbl-kmeffort {
    --sp-label: "Km effort";
}

.courseCtnr .lblCourse.lbl-ville::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22s-7-5-7-12a7 7 0 0 1 14 0c0 7-7 12-7 12zm0-9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3C/svg%3E");
}

.courseCtnr .lblCourse.lbl-ville {
    --sp-label: "Ville";
}

.courseCtnr .lblCourse.lbl-organisateur::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11a3 3 0 1 0-2.9-3.9A3 3 0 0 0 16 11zM8 12a3 3 0 1 0-2.9-3.9A3 3 0 0 0 8 12zm0 2c-2.8 0-5 1.3-5 3v2h10v-2c0-1.7-2.2-3-5-3zm8 0c-1 0-1.9.2-2.7.6 1 .8 1.7 1.9 1.7 3.4v1H21v-1c0-2.2-2.2-4-5-4z'/%3E%3C/svg%3E");
}

.courseCtnr .lblCourse.lbl-organisateur {
    --sp-label: "Organisateur";
}

.courseCtnr .lblCourse.lbl-epreuve::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 4l2 2h6l2-2 4 3-2 5-2-1v9H7v-9l-2 1-2-5z'/%3E%3C/svg%3E");
}

.courseCtnr .lblCourse.lbl-epreuve {
    --sp-label: "Épreuve";
}

.courseCtnr .lblCourse.lbl-depart::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 2h2v3h-2zM8 4h8v2H8zM12 6a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm1 8.4l3.2 1.8-1 1.7-4.2-2.5V9h2z'/%3E%3C/svg%3E");
}

.courseCtnr .lblCourse.lbl-depart {
    --sp-label: "Départ";
}

.courseCtnr .lblCourse.lbl-nbepreuves::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 3h6v4h4v6h-4v4H9v-4H5V7h4z'/%3E%3C/svg%3E");
}

.courseCtnr .lblCourse.lbl-nbepreuves {
    --sp-label: "Nombre d'épreuves";
}

.valCourse img {
    vertical-align: middle;
}

.inscriptionCtrn {
    grid-area: inscription;
    clear: both;
    background-color: var(--course-accent-soft);
    margin: 10px -12px -12px -12px;
    padding: 8px 10px;
    border-radius: 0 0 12px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    position: relative;
}

.inscriptionLine {
    line-height: 30px;
    flex: 1 1 auto;
    order: 1;
}

/* Cas où inscriptionCtrn et inscriptionLine sont sur le même élément */
.inscriptionCtrn.inscriptionLine {
    flex: 1 1 auto;
    order: unset;
    line-height: 30px;
    flex-wrap: nowrap;
    position: relative;
}

.inscriptionCtrn.inscriptionLine > span {
    order: 1;
}

.inscriptionCtrn input[type="button"],
.inscriptionCtrn input[type="submit"],
.inscriptionCtrn form {
    order: 2;
    display: inline-block;
    flex-shrink: 0;
    margin-left: auto;
}

.inscriptionCtrn > a.sp2026-btn-insc,
.inscriptionCtrn a.sp2026-btn-insc {
    position: absolute;
    top: -12px;
    right: 20px;
    width: auto;
}

#courseList .inscriptionCtrn.inscriptionLine > a.sp2026-btn.sp2026-btn-insc.sp2026-btn-primary {
    position: absolute !important;
    top: -12px !important;
    right: 20px !important;
    left: auto !important;
    width: auto !important;
    margin: 0 !important;
    order: 2 !important;
}

.inscriptionCtrn .inscriptionJump {
    order: 2;
}

/* Badges de statut d'inscription */
.inscription-statut {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 12px;
    order: 1;
}

.inscription-statut.statut-ouvert {
    background: #22c55e;
    color: #ffffff;
}

.inscription-statut.statut-termine {
    background: #1f2937;
    color: #ffffff;
}

.inscription-statut.statut-annule {
    background: #dc2626;
    color: #ffffff;
}

.inscription-statut.statut-cloture {
    background: #f59e0b;
    color: #ffffff;
}

.inscription-statut.statut-reporte {
    background: #9333ea;
    color: #ffffff;
}

.inscriptionCtrn .lblCourse::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: -4px;
    background-color: var(--course-accent-dark);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h10l4 4v14H5zM14 3v5h5M8 13h8v2H8zm0 4h8v2H8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h10l4 4v14H5zM14 3v5h5M8 13h8v2H8zm0 4h8v2H8z'/%3E%3C/svg%3E");
}

.inscriptionCtrn .lblCourse.lbl-inscriptions {
    --sp-label: "Inscriptions";
}

.courseCtnr .lblCourse:hover::after,
.inscriptionCtrn .lblCourse:hover::after {
    content: var(--sp-label);
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    padding: 3px 8px;
    border-radius: 999px;
    background: #0f8bd8;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    pointer-events: none;
}

#courseList input[type="submit"].sp2026-btn-primary,
#courseList input[type="button"].sp2026-btn-primary {
    border: none;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--sp2026-jaune), var(--sp2026-jaune-fonce));
    color: var(--sp2026-rouge);
    box-shadow: 0 10px 25px rgba(246, 209, 95, 0.3);
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.2s ease;
    position: absolute;
    top: -12px;
    width: auto;
    right: 10px;
}

#courseList input[type="submit"].sp2026-btn-primary:hover,
#courseList input[type="button"].sp2026-btn-primary:hover {
    transform: translateY(-2px);
}

#courseList input[type="submit"].sp2026-btn-disabled,
#courseList input[type="button"].sp2026-btn-disabled {
    border: 1px solid #bfc3c8;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 15px;
    cursor: not-allowed;
    background: #d9dde2;
    color: #111;
    box-shadow: none;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.2s ease;
    position: absolute;
    top: -12px;
    width: auto;
    right: 10px;
}

#courseList input[type="submit"]:not(.sp2026-btn-primary):not(.sp2026-btn-disabled),
#courseList input[type="button"]:not(.sp2026-btn-primary):not(.sp2026-btn-disabled) {
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffdd55 0%, #ffd237 100%);
    color: #1f2d3d;
    font-weight: bold;
    line-height: 1;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

#courseList input[type="submit"]:not(.sp2026-btn-primary):not(.sp2026-btn-disabled):hover,
#courseList input[type="button"]:not(.sp2026-btn-primary):not(.sp2026-btn-disabled):hover {
    filter: brightness(0.98);
}

.rightEltInCtrn {
    margin-right: 5px;
    margin-left: auto;
}

@media screen and (min-width: 651px) {
    .rightEltInCtrn {
        flex: 0 0 auto;
    }
}

.epreuvesHeader {
    margin: 8px 0 12px;
    color: var(--course-accent-dark);
    font-weight: 700;
    font-size: .92rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.epreuvesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 10px;
}

.epreuveFiche {
    background: #f8fbff;
    border: 1px solid #cae6f8;
    border-radius: 10px;
    padding: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.epreuveFiche--mini {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.epreuveFiche--mini > a.sp2026-btn-insc {
    align-self: flex-end;
    width: auto !important;
}

.epreuveFiche .valCourse {
    color: #244863;
}

.epreuveFiche .valCourse a {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--course-accent-dark);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.epreuveFiche .valCourse a:hover,
.epreuveFiche .valCourse a:focus-visible {
    background-color: var(--sp2026-rouge);
    border-color: var(--sp2026-rouge);
    color: #fff !important;
    text-decoration: none;
}

.epreuveFiche .heureInline {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    color: inherit;
    font-weight: 400;
    position: relative;
}

.epreuveFiche .heureInline::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    background-color: var(--course-accent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 6a1 1 0 0 1 1 1v5.3l3.4 2a1 1 0 1 1-1 1.8l-4-2.3a1 1 0 0 1-.4-.8V7a1 1 0 0 1 1-1zm0-4a10 10 0 1 1 0 20 10 10 0 0 1 0-20z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 6a1 1 0 0 1 1 1v5.3l3.4 2a1 1 0 1 1-1 1.8l-4-2.3a1 1 0 0 1-.4-.8V7a1 1 0 0 1 1-1zm0-4a10 10 0 1 1 0 20 10 10 0 0 1 0-20z'/%3E%3C/svg%3E");
}

.epreuveFiche .heureInline:hover::after {
    content: "Heure de départ";
    position: absolute;
    left: 0;
    top: 115%;
    z-index: 3;
    padding: 3px 8px;
    border-radius: 999px;
    background: #0f8bd8;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
}

.epreuveFiche .epreuveDateLine {
    color: #244863;
    font-size: .92rem;
    margin: 2px 0 6px 0;
}

.epreuveFiche .epreuveDateLine::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: -4px;
    background-color: var(--course-accent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='17' rx='2' fill='black'/%3E%3Crect x='3' y='8' width='18' height='2' fill='white'/%3E%3Crect x='7' y='2' width='2' height='5' fill='black'/%3E%3Crect x='15' y='2' width='2' height='5' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='17' rx='2' fill='black'/%3E%3Crect x='3' y='8' width='18' height='2' fill='white'/%3E%3Crect x='7' y='2' width='2' height='5' fill='black'/%3E%3Crect x='15' y='2' width='2' height='5' fill='black'/%3E%3C/svg%3E");
}

.epreuveFiche .formalitesLine {
    margin-top: 16px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #edf7ff;
    border: 1px solid #cde8fb;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    padding-top: 16px;
}

.epreuveFiche .formalitesTitle {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #4d7ca0;
    margin-bottom: 3px;
    order: 0;
}

.epreuveFiche .formalitesBody {
    line-height: 1.5;
    order: 1;
}

.epreuveFiche .formalitesLine > input[type="button"],
.epreuveFiche .formalitesLine > input[type="submit"],
.epreuveFiche .formalitesLine > form,
.epreuveFiche .formalitesLine > a.sp2026-btn-insc,
.epreuveFiche .formalitesBody > a.sp2026-btn-insc,
.epreuveFiche .formalitesBody a.sp2026-btn.sp2026-btn-insc {
    order: 2;
    position: absolute;
    top: -12px;
    right: 10px;
    margin: 0;
    width: auto;
}

.epreuveFiche .formalitesLine > form input[type="submit"] {
    width: auto;
}

.epreuveFiche .formalitesValue {
    color: #1f4f73;
}

.epreuveFiche .inscriptionLine {
    line-height: 1.7;
}

.epreuvesList {
    list-style: none;
    padding: 0;
    margin: 8px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}


/* Course */

#titreBtnContainer {
    float: left;
}

#titreBtnContainer input {
    margin: 10px 0px 0px 10px;
    height: 40px;
    width: 100px;
    vertical-align: bottom;
}

h1.titreEpreuve {
    padding-top: 10px;
    /*display:inline-block;*/
    padding-left: 10px;
    /*text-align:left;*/
}

#thumbAfficheCtnr div.zoom {
    background-color: black;
    color: white;
    font-size: 11px;
    position: absolute;
    width: 120px;
    line-height: 16px;
    height: 16px;
    opacity: 0.5;
    top: 153px;
}

#thumbAfficheCtnr:hover>a>div.zoom {
    opacity: 1;
}

.divFavEp {
    font-size: 12px;
    float: right;
}

.divFavEp img {
    vertical-align: middle;
}

#courseLogos {
    float: right;
    margin-left: 20px;
    width: 100px;
}

#courseLogos div {
    border: solid 3px #4d4d4d;
    margin-bottom: 10px;
    padding: 0;
    width: 100px;
    float: right;
}

#courseLogos div img {
    margin: 0;
    padding: 0;
    width: 100px;
    height: 100px;
    border: 0;
    display: block;
}

.titrePart {
    border: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 5px 0 5px !important;
    background-color: #4d4d4d;
    color: white;
    width: auto !important;
}

.titrePart.colDroite h2 {
    color: white;
    font-weight: normal;
    padding: 0 !important;
    font-size: 12px;
}

.titrePart.colGauche {
    clear: both;
}

.titrePart.colGauche h2 {
    color: white;
    font-size: 13px;
    padding: 0 0 5px 0 !important;
}

#courseInfos {
    border: solid 3px #4d4d4d;
    overflow: auto;
}

.courseInfosPart {
    clear: both;
    padding: 10px 20px 10px 20px;
}

img.imgAffiche {
    margin: 0 20px 0 0;
    /*width:142px;
    height:200px;*/
    width: 120px;
    height: 169px;
    float: left;
}

img.logoFederation {
    width: 100px;
    height: 100px;
    /*float:right;*/
}


/*#courseInfos*/

table.tabTarifs {
    text-align: center;
    border: solid 1px #4d4d4d;
    /*float: right;
    margin: 10px 20px 10px 20px;*/
}


/*#courseInfos*/

table.tabTarifs td h3 {
    background-color: #4d4d4d;
    font-weight: bold;
    color: white;
    margin: 0;
    padding: 0;
}

.nowrap {
    white-space: nowrap;
}

.courseInfosPart h2 {
    background-color: #4d4d4d;
    font-weight: bold;
    color: white;
    margin: 0;
    padding: 0;
    text-align: center;
}

.plansContainer {
    text-align: center;
}

.plansContainer img {
    width: 100px;
    height: 100px;
}

.cent {
    width: 100%;
}

.courseMetaDesc {
    padding-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.courseDesc {
    font-style: italic;
}

#courseInfos.ouvert {
    background-position: 142px 50px;
    background-image: url('../imgs/ouvert100-min.png');
    background-repeat: no-repeat;
}

#courseInfos.annule {
    background-position: 142px 50px;
    background-image: url('../imgs/annule100-min.png');
    background-repeat: no-repeat;
}

#courseInfos.cloture {
    background-position: 142px 50px;
    background-image: url('../imgs/cloture100-min.png');
    background-repeat: no-repeat;
}

#courseInfos.termine {
    background-position: 142px 50px;
    background-image: url('../imgs/termine100-min.png');
    background-repeat: no-repeat;
}

#courseInfos.complet {
    background-position: 125px 50px;
    background-image: url('../imgs/complet100-min.png');
    background-repeat: no-repeat;
}

.tabList {
    margin-top: 20px;
    width: 100%;
    border: solid 1px #4d4d4d;
    border-collapse: collapse;
}

.tabList .fond {
    background-color: darkgrey;
}


/*.tabList tr.pair{background-color:??????;}*/

.tabList tr:hover {
    background-color: lightgrey;
}

.tabList tr.header {
    background-color: #4d4d4d;
    padding: 10px;
    color: white;
}

.tabList th {
    text-align: center;
}

.tabList td {
    /*border:dashed 1px #4d4d4d;*/
    padding: 5px;
    white-space: nowrap;
}

.tabList img.imgEtatInscription {
    width: 16px;
    height: 16px;
}


/* inscription */

.petiteImage {
    width: 16px;
    height: 16px;
}

.recapInscription {
    padding: 10px;
}

.validationBtn {
    background-color: #ffdd55;
    color: #4d4d4d;
    font-weight: bold;
    border: 0;
}


/* résultats*/

#fichiersWebRes {
    padding-left: 10px;
    padding-right: 20px;
    margin-top: 15px;
    margin-bottom: 10px;
}

#fichiersWebRes div {
    line-height: 20px;
}

/* ====== RÉULTATS - DESIGN 2026 MODERNE ====== */

/* Conteneur de tableau avec wrapper */
.sp2026-table-wrap {
    margin-top: 10px;
    overflow-x: auto;
    border: 1px solid #dde5ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(22, 48, 78, 0.08);
}

#resList,
#tabPodium,
.tabPodiumSexe {
    margin-top: 20px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-size: 16px;
}

#resList .fond {
    background-color: var(--sp2026-surface-soft, rgba(255, 255, 255, 0.05));
}

/* Survol par défaut pour les hommes (bleu clair) */
#resList tbody tr:hover,
#tabPodium tbody tr:hover,
.tabPodiumSexe tbody tr:hover {
    background-color: rgba(173, 216, 230, 0.4) !important;
}

/* Survol pour les femmes (rose clair) */
#resList tbody tr.rose:hover {
    background-color: rgba(163, 28, 35, 0.08) !important;
}

/* Survol pour les autres genres (violet clair) */
#resList tbody tr[data-sexe="X"]:hover,
#resList tbody tr:not([data-sexe="M"]):not([data-sexe="F"]):hover {
    background-color: rgba(128, 0, 128, 0.08) !important;
}

#resList tr.header,
#tabPodium .header,
.tabPodiumSexe .header {
    background: linear-gradient(135deg, var(--sp2026-surface, #0c2a44), var(--sp2026-bleu-fonce, #2a3d75)) !important;
    padding: 18px 10px;
    color: var(--sp2026-text, #e9f0f7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
}

/* Empêcher le changement de couleur au survol des en-têtes */
#resList tr.header:hover,
#tabPodium tr.header:hover,
.tabPodiumSexe tr.header:hover {
    background: linear-gradient(135deg, var(--sp2026-surface, #0c2a44), var(--sp2026-bleu-fonce, #2a3d75)) !important;
}

#resList th {
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid var(--sp2026-surface-soft, rgba(0, 0, 0, 0.1));
    padding: 18px 10px;
}

#resList th:last-child {
    border-right: none;
}

#resList td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: middle;
    font-size: 16px;
}

#resList tbody tr:last-child td {
    border-bottom: none;
}

#resList img.imgEtatInscription {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Alternance de couleurs désactivée pour meilleure visibilité des survols */
#resList .pair {
    background-color: #ffffff;
}

#resList tbody tr:not(.pair) {
    background-color: #ffffff;
}

/* ====== BADGES ET INDICATEURS VISUELS ====== */

/* BADGE RANG (Scratch) */
#resList td.rank-badge {
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--sp2026-surface, #0c2a44);
    background-color: rgba(12, 42, 68, 0.05);
}

#resList td.rank-badge .rank {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: white;
    border: 2px solid var(--sp2026-primary, #f6d15f);
}

/* Badges de rang colorés - Or, Argent, Bronze pour les 3 premiers */
#resList tr[data-scratch="1"] td.rank-badge .rank {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    border-color: #d4af37;
    color: #333;
    font-weight: 700;
}

#resList tr[data-scratch="2"] td.rank-badge .rank {
    background: linear-gradient(135deg, #e8e8e8, #f5f5f5);
    border-color: #c0c0c0;
    color: #333;
    font-weight: 700;
}

#resList tr[data-scratch="3"] td.rank-badge .rank {
    background: linear-gradient(135deg, #d4914b, #e6b373);
    border-color: #cd7f32;
    color: #fff;
    font-weight: 700;
}

/* Badges scratch au-delà du podium (> 3) */
#resList tr[data-scratch]:not([data-scratch="1"]):not([data-scratch="2"]):not([data-scratch="3"]) td.rank-badge .rank {
    border-color: white;
}

/* AFFICHAGE TEMPS */
#resList td.time-display {
    font-family: 'Courier New', 'Monaco', monospace;
    font-weight: 700;
    color: var(--sp2026-bleu-fonce, #2a3d75);
    letter-spacing: 0.5px;
    text-align: center;
}

/* BADGE SEXE */
#resList td.gender-badge {
    font-size: 24px;
    font-weight: 700;
    -webkit-text-stroke: 0.6px currentColor;
}

/* Masquer le rang dans la cellule icône en vue tableau (colonne dédiée) */
#resList td.gender-badge .rank-value {
    display: none;
    -webkit-text-stroke: 0;
}

/* Masquer le rang catégorie dans la cellule cat en vue tableau (colonne dédiée) */
#resList td.cat-badge .rank-value {
    display: none;
}

/* Colorer les femmes en rose */
#resList tr.rose td.gender-badge {
    color: hotpink;
}

/* Colorer les hommes en bleu */
#resList tr td.gender-badge {
    color: var(--sp2026-surface, #0c2a44);
}

/* Marquer clairement les prénom/nom des femmes */
#resList tr.rose td:nth-child(4),
#resList tr.rose td:nth-child(5) {
    color: hotpink;
    /*font-weight: 500;*/
}

/* BADGE CATÉGORIE */
#resList td.cat-badge {
    background: linear-gradient(135deg, rgba(12, 42, 68, 0.12), rgba(12, 42, 68, 0.08));
    font-weight: 600;
    color: var(--sp2026-surface, #0c2a44);
    border-radius: 6px;
    padding: 8px 6px;
}

/* BADGE DOSSARD */
#resList td.dossard-badge {
    background-color: rgba(12, 42, 68, 0.06);
    font-weight: 600;
    border-radius: 4px;
}

/* RANG CLASSEMENT (Sexe et Catégorie) */
#resList td.rank-cat {
    text-align: center;
    font-weight: 600;
    color: var(--sp2026-surface, #0c2a44);
}

#resList td.rank-cat .rank-value {
    display: inline-block;
    padding: 4px 8px;
    /*background-color: rgba(12, 42, 68, 0.05);*/
    background-color:white;
    border-radius: 4px;
    font-size: 13px;
}

/* Appliquer le style des badges au classement catégorie SEULEMENT pour les top 3 */
#resList tr.cat-1 td.rank-cat-category .rank-value {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    border: 2px solid #d4af37;
    color: #333;
    font-weight: 700;
    padding: 2px 6px;
}

#resList tr.cat-2 td.rank-cat-category .rank-value {
    background: linear-gradient(135deg, #e8e8e8, #f5f5f5);
    border: 2px solid #c0c0c0;
    color: #333;
    font-weight: 700;
    padding: 2px 6px;
}

#resList tr.cat-3 td.rank-cat-category .rank-value {
    background: linear-gradient(135deg, #d4914b, #e6b373);
    border: 2px solid #cd7f32;
    color: #fff;
    font-weight: 700;
    padding: 2px 6px;
}

/* CLASSE/PODIUM - Top 3 mise en avant */
#resList tr.classe {
    /*background: linear-gradient(to right, #fffbe6, #fff9e6) !important;*/
    border-left: 5px solid var(--sp2026-primary, #f6d15f) !important;
}

/* Survol pour classé 1er catégorie (or) */
#resList tr.cat-1:hover {
    background: linear-gradient(to right, rgba(255, 215, 0, 0.15), rgba(255, 237, 78, 0.15)) !important;
}

/* Survol pour classé 2e catégorie (argent) */
#resList tr.cat-2:hover {
    background: linear-gradient(to right, rgba(232, 232, 232, 0.3), rgba(245, 245, 245, 0.3)) !important;
}

/* Survol pour classé 3e catégorie (bronze) */
#resList tr.cat-3:hover {
    background: linear-gradient(to right, rgba(212, 145, 75, 0.15), rgba(230, 179, 115, 0.15)) !important;
}

#resList tr.classe td {
    padding-left: 8px;
}

/* STATUTS - Abandon, Disqualification, Non partant */
#resList td.status-badge {
    padding: 8px 10px;
    font-weight: 600;
    text-align: center;
}

#resList .status {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#resList .status.abandon {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

#resList .status.disqualification {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

#resList .status.non-partant {
    background-color: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
}

/* ====== TABLE PODIUMS ====== */

.podiumTab {
    margin-top: 30px;
}

.tabPodiumWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: 18px;
    row-gap: 30px;
    max-width: 100%;
}

#tabPodium,
.tabPodiumSexe {
    font-size: 13px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.tabPodiumSexe {
    flex: 1 1 360px;
    width: 100%;
    max-width: 520px;
    min-width: 0;
    table-layout: fixed;
}

.tabPodiumSexe th,
.tabPodiumSexe td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Colonne catégorie plus étroite que les colonnes noms (pilotée par colgroup) */
.tabPodiumSexe col.pod-col-cat { width: 14% !important; }
.tabPodiumSexe col.pod-col-r1,
.tabPodiumSexe col.pod-col-r2,
.tabPodiumSexe col.pod-col-r3 { width: 28.66% !important; }

.tabPodiumSexe th:nth-child(1),
.tabPodiumSexe td:nth-child(1) {
    padding-left: 6px;
    padding-right: 6px;
}

#tabPodium tr.header,
.tabPodiumSexe tr.header {
    background: linear-gradient(135deg, var(--sp2026-primary-strong, #d9a93d), var(--sp2026-primary, #f6d15f));
    color: var(--sp2026-bg, #061a2d);
}

#tabPodium td,
.tabPodiumSexe td {
    padding: 10px;
    text-align: center;
    font-weight: 500;
}

#tabPodium td.podium-sexe-label,
.tabPodiumSexe td.podium-sexe-label {
    border: solid 1px #4d4d4d;
    font-weight: 700;
}

.tabPodiumSexe tr.podium-sexe-row:hover td {
    background-color: inherit !important;
}

.tabPodiumSexe tr.podium-sexe-row:hover {
    background-color: transparent !important;
}

.tabPodiumSexe tr.podium-sexe-h:hover td {
    background-color: rgba(173, 216, 230, 0.4) !important;
    color: #0c2a44 !important;
}

.tabPodiumSexe tr.podium-sexe-f:hover td {
    background-color: rgba(163, 28, 35, 0.16) !important;
    color: #7d1b22 !important;
}

.tabPodiumSexe tr.podium-sexe-x:hover td {
    background-color: rgba(128, 0, 128, 0.14) !important;
    color: #4f1a5e !important;
}

#tabPodium tr.header td,
.tabPodiumSexe tr.header td {
    color: var(--sp2026-bg, #061a2d);
    font-weight: 600;
}

.tabPodiumSexe .podium-rank {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: #ffffff;
    border: 2px solid #8fa5bd;
    line-height: 1;
    margin-right: 4px;
    font-weight: 700;
}

.tabPodiumSexe .podium-rank.rank-1 {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    border-color: #d4af37;
    color: #333;
}

.tabPodiumSexe .podium-rank.rank-2 {
    background: linear-gradient(135deg, #e8e8e8, #f5f5f5);
    border-color: #c0c0c0;
    color: #333;
}

.tabPodiumSexe .podium-rank.rank-3 {
    background: linear-gradient(135deg, #d4914b, #e6b373);
    border-color: #cd7f32;
    color: #fff;
}

/* Ligne de section par sexe */
#tabPodium tr.podium-sexe-h td,
.tabPodiumSexe tr.podium-sexe-h td {
    background-color: rgba(173, 216, 230, 0.4);
    color: #0c2a44;
}

#tabPodium tr.podium-sexe-f td,
.tabPodiumSexe tr.podium-sexe-f td {
    background-color: rgba(163, 28, 35, 0.16);
    color: #7d1b22;
}

#tabPodium tr.podium-sexe-x td,
.tabPodiumSexe tr.podium-sexe-x td {
    background-color: rgba(128, 0, 128, 0.14);
    color: #4f1a5e;
}

.tabPodiumSexe tr.podium-sexe-h td.podium-sexe-label::before,
.tabPodiumSexe tr.podium-sexe-f td.podium-sexe-label::before,
.tabPodiumSexe tr.podium-sexe-x td.podium-sexe-label::before {
    display: inline-block;
    margin-right: 6px;
    font-size: 20px;
    font-weight: 700;
    vertical-align: middle;
    -webkit-text-stroke: 0.6px currentColor;
}

.tabPodiumSexe tr.podium-sexe-h td.podium-sexe-label::before { content: "♂"; }
.tabPodiumSexe tr.podium-sexe-f td.podium-sexe-label::before { content: "♀"; }
.tabPodiumSexe tr.podium-sexe-x td.podium-sexe-label::before { content: "⚥"; }

/* Colonnes noms : Or / Argent / Cuivre */
#tabPodium tr:not(.header):not(.podium-sexe-row) td:nth-child(2),
.tabPodiumSexe tr:not(.header):not(.podium-sexe-row) td:nth-child(2) {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #4a3b00;
    font-weight: 600;
    font-size: 15px;
}

#tabPodium tr:not(.header):not(.podium-sexe-row) td:nth-child(3),
.tabPodiumSexe tr:not(.header):not(.podium-sexe-row) td:nth-child(3) {
    background: linear-gradient(135deg, #e8e8e8, #f5f5f5);
    color: #3b3b3b;
    font-weight: 600;
    font-size: 15px;
}

#tabPodium tr:not(.header):not(.podium-sexe-row) td:nth-child(4),
.tabPodiumSexe tr:not(.header):not(.podium-sexe-row) td:nth-child(4) {
    background: linear-gradient(135deg, #d4914b, #e6b373);
    color: #4a2d12;
    font-weight: 600;
    font-size: 15px;
}

/* En-têtes 1/2/3 : texte accordé aux couleurs Or/Argent/Bronze */
.tabPodiumSexe tr.header th:nth-child(2) {
    color: #7a6200;
}

.tabPodiumSexe tr.header th:nth-child(3) {
    color: #4f4f4f;
}

.tabPodiumSexe tr.header th:nth-child(4) {
    color: #6c3f1c;
}

/* ====== VERSION MOBILE ====== */
@media (max-width: 1024px) {
    #resList,
    #tabPodium,
    .tabPodiumSexe {
        font-size: 12px;
    }

    #resList td,
    #resList th {
        padding: 8px 6px;
    }

    #resList td.rank-badge .rank {
        padding: 3px 6px;
        font-size: 14px;
    }

    #resList td.time-display {
        font-size: 13px;
    }
}

@media (max-width: 640px) {
    .tabPodiumSexe tr:not(.header):not(.podium-sexe-row) td:nth-child(2),
    .tabPodiumSexe tr:not(.header):not(.podium-sexe-row) td:nth-child(3),
    .tabPodiumSexe tr:not(.header):not(.podium-sexe-row) td:nth-child(4) {
        font-size: 13px;
    }
}

@media (max-width: 420px) {
    .tabPodiumSexe {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .tabPodiumSexe tr:not(.header):not(.podium-sexe-row) td:nth-child(2),
    .tabPodiumSexe tr:not(.header):not(.podium-sexe-row) td:nth-child(3),
    .tabPodiumSexe tr:not(.header):not(.podium-sexe-row) td:nth-child(4) {
        font-size: 12px;
    }

    .tabPodiumSexe tr.header th:nth-child(2),
    .tabPodiumSexe tr.header th:nth-child(3),
    .tabPodiumSexe tr.header th:nth-child(4) {
        font-size: 10px;
        line-height: 1.2;
        white-space: nowrap;
    }
}

/* Smoothbox: éviter le débordement des tableaux podium */
#TB_ajaxContent #podiumTab,
#TB_ajaxContent #tabPodiumWrap {
    max-width: 100%;
    box-sizing: border-box;
}

#TB_ajaxContent #tabPodiumWrap {
    overflow: visible !important;
    padding-bottom: 8px;
}

#TB_ajaxContent .sp2026-table-wrap {
    overflow: visible !important;
}

/* ====== TRANSFORMATION EN FICHES (CARDS) SUR PETIT/MOYEN ÉCRAN ====== */
@media (max-width: 1100px) {
    #resList,
    #tabPodium {
        display: contents;
    }

    #resList tbody {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #resList thead {
        display: none;
    }

    #resList tr {
        border: 1px solid #d0d9e8;
        border-radius: 12px;
        margin: 0;
        padding: 0;
        background: #ffffff;
        box-shadow: 0 4px 12px rgba(12, 42, 68, 0.08);
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: dense;
        gap: 0;
        overflow: hidden;
    }

    #resList tr:hover {
        box-shadow: 0 4px 12px rgba(12, 42, 68, 0.08) !important;
        background-color: #ffffff !important;
    }

    #resList tr.classe {
        border: 1px solid #d0d9e8 !important;
        background: #ffffff !important;
    }

    #resList tr.rose tr:hover,
    #resList tr.classe tr:hover {
        background-color: inherit !important;
    }

    /* LIGNE 1 : Scratch + Temps */
    #resList td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        padding: 14px 12px;
        border-right: 1px solid #e8ecf4;
        border-bottom: 1px solid #e8ecf4;
        background-color: rgba(12, 42, 68, 0.04);
        text-align: center;
    }

    #resList td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        padding: 14px 12px;
        border-bottom: 1px solid #e8ecf4;
        text-align: center;
        font-size: 18px;
        font-weight: 700;
    }

    /* LIGNE 2 : Identité complète (hiddenFirst) */
    #resList td:nth-child(3) {
        display: block !important;
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 12px;
        border-bottom: 1px solid #e8ecf4;
        background-color: rgba(12, 42, 68, 0.02);
        text-align: center;
    }

    #resList td:nth-child(3) p {
        margin: 0;
        font-size: 15px;
        line-height: 1.6;
        color: #2c3e50;
        font-weight: 400;
        text-align: center;
    }

    #resList td:nth-child(3) p strong {
        font-size: 17px;
        font-weight: 700;
    }

    /* Masquer les cellules individuelles nom/prénom/naissance (TD 4, 5, 7) et classements redondants (TD 11, 12) */
    #resList td:nth-child(4),
    #resList td:nth-child(5),
    #resList td:nth-child(7),
    #resList td:nth-child(11),
    #resList td:nth-child(12) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* LIGNE 3 : Licence (TD9) + Team (TD10) */
    #resList td:nth-child(9) {
        grid-column: 1;
        grid-row: 3;
        padding: 10px 12px;
        border-bottom: 1px solid #e8ecf4;
        border-right: 1px solid #e8ecf4;
        font-size: 13px;
        text-align: center;
    }

    #resList td:nth-child(9):not(.empty-value)::before {
        content: "Lic. ";
        font-weight: 700;
        font-size: 11px;
        color: #1e3a5f;
        margin-right: 4px;
    }

    #resList td:nth-child(10) {
        grid-column: 2;
        grid-row: 3;
        padding: 10px 12px;
        border-bottom: 1px solid #e8ecf4;
        font-size: 13px;
        text-align: center;
    }

    #resList td:nth-child(10):not(.empty-value)::before {
        content: "Team : ";
        font-weight: 700;
        font-size: 11px;
        color: #1e3a5f;
        margin-right: 4px;
    }

    /* LIGNE 4 : Sexe+Clst (TD6) + Catégorie+Clst (TD8) */
    #resList td:nth-child(6) {
        display: block !important;
        grid-column: 1;
        grid-row: 4;
        padding: 10px 12px;
        border-bottom: 1px solid #e8ecf4;
        border-right: 1px solid #e8ecf4;
        text-align: center;
        background-color: rgba(12, 42, 68, 0.04);
        font-size: 20px;
        line-height: 1.3;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    #resList td:nth-child(6) .rank-value {
        display: inline-block;
        font-size: 12px;
        margin-top: 0;
        font-weight: 600;
    }

    #resList td:nth-child(8) {
        grid-column: 2;
        grid-row: 4;
        padding: 10px 12px;
        border-bottom: 1px solid #e8ecf4;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    #resList td:nth-child(8) .rank-value {
        display: inline-block;
        font-size: 12px;
        margin-top: 0;
        font-weight: 600;
    }

    /* Si licence + team vides : masquer la ligne 3 et remonter les lignes suivantes */
    #resList tr.no-lic-team td:nth-child(9),
    #resList tr.no-lic-team td:nth-child(10) {
        display: none !important;
    }

    #resList tr.no-lic-team td:nth-child(6),
    #resList tr.no-lic-team td:nth-child(8) {
        grid-row: 3;
    }

    #resList tr.no-lic-team td:nth-child(13) {
        grid-row: 4;
    }

    /* LIGNE 5 : Dossard (TD13) - pleine largeur */
    #resList td:nth-child(13) {
        grid-column: 1 / -1;
        grid-row: 5;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        background-color: rgba(12, 42, 68, 0.05);
        border: none;
    }

    #resList td:nth-child(13) .dossard-value {
        font-size: 18px;
        font-weight: 700;
    }

    #resList td:nth-child(13)::before {
        content: "Dossard : ";
        font-weight: 700;
        font-size: 12px;
        color: #1e3a5f;
        margin-right: 6px;
    }

    /* Mobile : pas d'effet de survol */
    #resList tbody tr:hover {
        background: inherit !important;
        box-shadow: 0 4px 12px rgba(12, 42, 68, 0.08) !important;
    }

    /* Fond de fiche global selon le sexe (toutes les cellules) */
    #resList tr[data-sexe="M"] td {
        background-color: rgba(173, 216, 230, 0.22) !important;
    }

    #resList tr.rose td,
    #resList tr[data-sexe="F"] td {
        background-color: rgba(163, 28, 35, 0.12) !important;
    }

    #resList tr[data-sexe="X"] td,
    #resList tr:not([data-sexe="M"]):not([data-sexe="F"]) td {
        background-color: rgba(128, 0, 128, 0.12) !important;
    }

    /* 1ère ligne : style entête (entête tableau masquée en mobile) */
    #resList tr:not(.hc-row):not(.header) td:nth-child(1),
    #resList tr:not(.hc-row):not(.header) td:nth-child(2) {
        background: #143a5a !important;
        color: #ffffff !important;
    }

    #resList tr:not(.hc-row):not(.header) td:nth-child(2),
    #resList tr:not(.hc-row):not(.header) td:nth-child(2) * {
        color: #ffffff !important;
    }

    /* Cellule catégorie + classement (td 8) : or/argent/bronze pour top 3 */
    #resList tr.cat-1 td:nth-child(8) {
        background: linear-gradient(to right, rgba(255, 215, 0, 0.15), rgba(255, 237, 78, 0.15)) !important;
    }

    #resList tr.cat-2 td:nth-child(8) {
        background: linear-gradient(to right, rgba(232, 232, 232, 0.3), rgba(245, 245, 245, 0.3)) !important;
    }

    #resList tr.cat-3 td:nth-child(8) {
        background: linear-gradient(to right, rgba(212, 145, 75, 0.15), rgba(230, 179, 115, 0.15)) !important;
    }

    /* Section hors classement */
    #resList tr.header {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        background: transparent !important;
        color: white;
        padding: 0;
        text-align: center;
        gap: 4px;
        margin-top: 20px;
        border: none;
        box-shadow: none;
        overflow: visible;
    }

    #resList tr.header th {
        border: none;
        font-size: 12px;
        padding: 20px;
        height: auto;
        background: linear-gradient(135deg, var(--sp2026-surface, #0c2a44), var(--sp2026-bleu-fonce, #2a3d75)) !important;
    }
    #resList tr.header th:hover{
        background:inherit;
    }

    /* Statuts - Badge en évidence */
    #resList td.status-badge {
        grid-column: 1 / -1;
        padding: 10px 12px;
        border-bottom: 1px solid #e8ecf4;
        text-align: center;
    }

    #resList .status {
        display: inline-block;
    }

    /* Affichage optimal des infos sur mobile */
    #resList td:nth-child(3)::before {
        display: none;
    }

    /* Podium table */
    #tabPodium tbody {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #tabPodium tr {
        display: grid;
        grid-template-columns: 1fr;
        border: 1px solid #d0d9e8;
        border-radius: 8px;
        overflow: hidden;
    }

    #tabPodium tr.header {
        grid-template-columns: 1fr;
        background: linear-gradient(135deg, var(--sp2026-primary-strong, #d9a93d), var(--sp2026-primary, #f6d15f)) !important;
        padding: 12px;
        text-align: center;
    }

    #tabPodium td {
        padding: 8px 12px;
        border-bottom: 1px solid #e8ecf4;
        text-align: left;
    }

    #tabPodium td:last-child {
        border-bottom: none;
    }
}

/* Résultats en fiches : les cellules utiles sont réaffichées explicitement dans la grille */


/* actualités */

#listeActualites.sp2026-news-timeline {
    text-align: left;
    padding: 4px 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 34px;
    position: relative;
}

#listeActualites.sp2026-news-timeline::before {
    content: "";
    position: absolute;
    left: 60px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, #d7e0ec 0%, #aac0db 100%);
}

.sp2026-news-year-group {
    position: relative;
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px 22px;
}

.sp2026-news-year {
    margin: 0;
    align-self: start;
    justify-self: center;
    min-width: 74px;
    text-align: center;
    padding: 9px 12px;
    border-radius: 999px;
    color: #f4fbff;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.02em;
    font-weight: 700;
    background: linear-gradient(120deg, #1b2a4d 0%, #3e5aa9 100%);
    box-shadow: 0 10px 24px rgba(27, 42, 77, 0.2);
    position: relative;
    z-index: 2;
}

.sp2026-news-year-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sp2026-news-item {
    position: relative;
    margin: 0;
    border-radius: 16px;
    border: 1px solid #d7e2f0;
    background: linear-gradient(160deg, #ffffff 0%, #f4f7fb 100%);
    box-shadow: 0 8px 24px rgba(11, 31, 51, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sp2026-news-item::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 28px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1f4b8f;
    border: 3px solid #eef2f6;
    box-shadow: 0 0 0 3px rgba(62, 90, 169, 0.2);
}

.sp2026-news-link {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 16px 18px 14px;
}

.sp2026-news-item--static {
    padding: 16px 18px 14px;
}

.sp2026-news-item h4 {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    color: #112746;
}

.dateActuCtnr {
    display: inline-block;
    margin: 0 0 10px 0;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #f4fbff;
    background: linear-gradient(135deg, #1e447a 0%, #31589a 100%);
}

.actuAccroche {
    margin-top: 9px;
    color: #33455b;
    font-size: 15px;
    line-height: 1.5;
}

.lireActu {
    display: inline-flex;
    margin-top: 14px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(62, 90, 169, 0.11);
    color: #1f3f74;
    font-weight: 700;
    font-size: 13px;
    transition: background 0.2s ease, color 0.2s ease;
}

.sp2026-news-item:hover {
    border-color: #b4c8e1;
    box-shadow: 0 12px 28px rgba(11, 31, 51, 0.14);
    transform: translateY(-2px);
}

.sp2026-news-item:hover .lireActu {
    background: rgba(62, 90, 169, 0.2);
    color: #142f57;
}


/* Contact */

.sp2026-contact-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 10px 30px;
}

.sp2026-contact-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
    gap: 22px;
    margin-bottom: 18px;
}

.sp2026-contact-hero__copy,
.sp2026-contact-hero__panel,
.sp2026-contact-form-shell,
.sp2026-contact-side__card {
    border-radius: 28px;
    box-shadow: 0 22px 52px rgba(15, 28, 45, 0.12);
}

.sp2026-contact-hero__copy {
    padding: 30px 32px;
    background: linear-gradient(145deg, #08233c 0%, #12395e 55%, #0b2036 100%);
    color: var(--sp2026-text);
}

.sp2026-contact-hero__panel {
    padding: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #eef5fb 100%);
    display: grid;
    gap: 14px;
    align-content: start;
}

.sp2026-contact-hero__panel .sp2026-status-metric,
.sp2026-contact-hero__panel .sp2026-status-tip {
    background: #ffffff;
    border: 1px solid rgba(13, 51, 84, 0.08);
}

.sp2026-contact-hero__panel .sp2026-status-metric__label,
.sp2026-contact-hero__panel .sp2026-status-tip__label {
    color: #4d6782;
}

.sp2026-contact-hero__panel .sp2026-status-metric__value,
.sp2026-contact-hero__panel .sp2026-status-tip__value {
    color: #1f3a55;
}

.sp2026-contact-hero__panel .sp2026-status-tip__value {
    font-weight: 600;
}

.sp2026-contact-hero__panel a {
    color: var(--sp2026-rouge);
    text-decoration: none;
}

.sp2026-contact-links,
.sp2026-status-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.sp2026-contact-links {
    margin-bottom: 18px;
}

.sp2026-contact-links__note {
    margin-top: auto;
    color: #6b8099;
    font-size: 14px;
    line-height: 1.5;
}

.sp2026-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.8fr);
    gap: 18px;
    align-items: start;
}

.sp2026-contact-main,
.sp2026-contact-side {
    min-width: 0;
}

.sp2026-contact-form-shell {
    padding: 26px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
}

.sp2026-contact-form-head {
    margin-bottom: 18px;
}

.sp2026-contact-form-head h2 {
    margin: 0 0 8px 0;
    color: #102038;
    font-size: 28px;
}

.sp2026-contact-form-head p {
    margin: 0;
    color: #5c6d81;
    line-height: 1.6;
}

.cadreInfo.sp2026-contact-note {
    margin: 0 0 22px 0;
    border: 1px solid rgba(18, 57, 94, 0.12);
    background: linear-gradient(135deg, #fff7d6 0%, #fff2b9 100%);
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    color: #5b4600;
}

#contactformulaire form,
.sp2026-contact-form {
    text-align: left;
    padding-top: 0;
}

.sp2026-contact-meta {
    margin-bottom: 18px;
    color: #5c6d81;
    font-size: 14px;
}

.sp2026-contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.sp2026-contact-form__section {
    padding: 22px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(18, 57, 94, 0.08);
    box-shadow: 0 12px 28px rgba(11, 31, 51, 0.06);
}

.sp2026-contact-form__section--wide {
    grid-column: span 2;
}

.sp2026-contact-form__section h3 {
    margin: 0 0 16px 0;
    color: #102038;
    font-size: 20px;
}

.row.sp2026-contact-row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding-top: 0;
    margin-top: 16px;
    clear: none;
}

.row.sp2026-contact-row.hidden {
    display: none;
}

.row.sp2026-contact-row:first-of-type {
    margin-top: 0;
}

.row.sp2026-contact-row--stacked {
    align-items: center;
}

.label,
.input {
    float: none;
    width: auto;
}

.label {
    text-align: left;
}

.label label,
.label {
    color: #243a53;
    font-weight: 600;
}

.aide,
.sp2026-contact-upload-note {
    margin-top: 6px;
    color: #617893;
    font-size: 13px;
    line-height: 1.5;
}

.input input.std,
.input input.ico,
.sp2026-contact-form input[type="text"],
.sp2026-contact-form select,
.sp2026-contact-form textarea {
    width: 100%;
    min-height: 50px;
    border: 1px solid #c6d5e3;
    border-radius: 14px;
    background: #f9fbfd;
    color: #102038;
    font-size: 15px;
    padding: 12px 14px;
    box-sizing: border-box;
}

.sp2026-contact-form input[type="text"]:focus,
.sp2026-contact-form select:focus,
.sp2026-contact-form textarea:focus {
    outline: none;
    border-color: #5b96c7;
    box-shadow: 0 0 0 4px rgba(91, 150, 199, 0.16);
    background: #ffffff;
}

.sp2026-contact-form textarea,
#message {
    width: 100%;
    min-height: 180px;
    resize: vertical;
}

.sp2026-contact-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.sp2026-contact-choice {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #cdd9e5;
    border-radius: 999px;
    background: #f8fbfd;
    color: #1c3550;
    cursor: pointer;
    font-weight: 500;
}

.sp2026-contact-choice input[type="radio"] {
    margin: 0;
}

.sp2026-contact-row--upload .input {
    display: grid;
    gap: 12px;
}

.row.sp2026-contact-row--upload:not(.hidden) + .row.sp2026-contact-row {
    margin-top: 0;
}

.sp2026-contact-upload-frame {
    display: block;
}

#fichierFrame {
    display: block;
    width: 100%;
    min-height: 34px;
    border: none;
    overflow: hidden;
    color: white;
}

#valeurFichier,
#tailleFichier {
    display: none !important;
}

.sp2026-contact-captcha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

img#captcha {
    vertical-align: middle;
    border-radius: 12px;
    border: 1px solid #d3dee8;
    background: #ffffff;
}

#captchaRefresh {
    text-decoration: none;
    cursor: pointer;
    color: var(--sp2026-rouge);
    font-weight: 700;
}

.rowConsent {
    width: auto;
    margin: 0;
}

.sp2026-contact-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #f5f9fc;
    border: 1px solid #d5e1ea;
    line-height: 1.6;
    color: #334c67;
    width: 100%;
    box-sizing: border-box;
}

.row.sp2026-contact-row--consent {
    grid-template-columns: 1fr;
}

.row.sp2026-contact-row--consent .left {
    width: 100%;
}

.sp2026-contact-consent input[type="checkbox"] {
    margin-top: 3px;
}

.sp2026-contact-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
}

#contactsubmit {
    width: auto;
    min-width: 220px;
    min-height: 52px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--sp2026-jaune), var(--sp2026-jaune-fonce));
    color: var(--sp2026-rouge);
    font-size: 16px;
    font-weight: 700;
    padding: 12px 22px;
    box-shadow: 0 10px 25px rgba(246, 209, 95, 0.3);
    cursor: pointer;
}

#contactsubmit:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
}

.sp2026-contact-disclaimer {
    margin-top: 18px;
    color: #617893;
    line-height: 1.6;
}

.sp2026-contact-disclaimer a {
    font-weight: 700;
    text-decoration: none;
}

.sp2026-contact-side {
    display: grid;
    gap: 16px;
}

.sp2026-contact-side__card {
    padding: 24px;
    background: #ffffff;
}

.sp2026-contact-side__card h2 {
    margin: 0 0 12px 0;
    color: #102038;
    font-size: 22px;
}

.sp2026-contact-side__card p,
.sp2026-contact-side__card li {
    margin: 0;
    color: #56657a;
    line-height: 1.65;
}

.sp2026-contact-side__card ul {
    margin: 0;
    padding-left: 18px;
}

.sp2026-contact-side__card a {
    color: var(--sp2026-rouge);
    text-decoration: none;
    font-weight: 700;
}

.sp2026-contact-feedback {
    margin-bottom: 22px;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid transparent;
}

.sp2026-contact-feedback h3 {
    margin: 0 0 8px 0;
    font-size: 22px;
}

.sp2026-contact-feedback p {
    margin: 0;
    line-height: 1.6;
}

.sp2026-contact-feedback--warning {
    background: #fff5d8;
    border-color: #ecd48e;
    color: #694f00;
}

.sp2026-contact-feedback--error {
    background: #fdebea;
    border-color: #f2b4ae;
    color: #8d2d22;
}

.sp2026-contact-feedback--success {
    background: linear-gradient(145deg, #08233c 0%, #12395e 55%, #0b2036 100%);
    color: #eaf2f8;
}

.sp2026-contact-feedback--success h3 {
    color: #ffffff;
}

.sp2026-contact-feedback__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

@media screen and (max-width: 1080px) {
    .sp2026-contact-hero,
    .sp2026-contact-layout {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 860px) {
    .sp2026-contact-links,
    .sp2026-status-links,
    .sp2026-contact-form__grid {
        grid-template-columns: 1fr;
    }

    .sp2026-contact-form__section--wide {
        grid-column: span 1;
    }

    .row.sp2026-contact-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media screen and (max-width: 640px) {
    .sp2026-contact-page {
        padding: 18px 0 26px;
    }

    .sp2026-contact-hero__copy,
    .sp2026-contact-hero__panel,
    .sp2026-contact-form-shell,
    .sp2026-contact-side__card,
    .sp2026-contact-form__section {
        padding: 20px 18px;
        border-radius: 22px;
    }

    .sp2026-contact-form-head h2 {
        font-size: 24px;
    }

    .sp2026-contact-choices {
        flex-direction: column;
    }

    .sp2026-contact-choice {
        width: 100%;
        box-sizing: border-box;
    }

    .sp2026-contact-submit,
    .sp2026-contact-feedback__actions {
        flex-direction: column;
        align-items: stretch;
    }

    #contactsubmit,
    .sp2026-contact-feedback__actions .sp2026-btn {
        width: 100%;
    }
}

.validation-advice {
    opacity: 1;
    margin-top: 8px;
    border-radius: 12px;
    background: #102038;
    color: white;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
}

input.errorInInput,
textarea.errorInInput,
select.errorInInput {
    border-color: var(--sp2026-rouge);
    background-color: #fff1eb;
}


/* livre d'or */


/*.avis{
    background-color: #CFEDB6;
    margin: 20px;
    padding: 20px;
    }
    .commentInfo{
    font-style: italic;
    color: #a02c2c;
    font-size:10px;
    font-weight:bold;
    }
    .commentAuthor{
    text-decoration: underline;
    }
    #livredorformulaire img{vertical-align:middle;}
    */


/* Connexion */

.connexionDiv {
    margin-top: 50px;
    padding-right: 50px;
    padding-left: 50px;
    text-align: center;
    float: left;
    margin-bottom: 90px;
}

#connexion {
    border-right: solid 1px var(--sp2026-rouge);
}

#connexionForm {
    text-align: right;
}

#connexionForm input {
    margin-top: 10px;
}

#connexion a {
    font-size: 10px;
    text-align: right;
    color: #4d4d4d;
}

#connexionForm .validation-advice {
    width: 158px;
}

.sp2026-login-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 10px 34px;
}

.sp2026-login-page .connexionDiv {
    float: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.sp2026-login-page #connexion,
.sp2026-login-page #creation {
    border: none;
    margin: 0;
    padding:26px 28px;
}

.sp2026-login-page-title {
    margin-bottom: 0;
}

.sp2026-login-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.9fr);
    gap: 16px;
    margin-top: 18px;
    margin-bottom: 18px;
}

.sp2026-login-hero__copy,
.sp2026-login-hero__hint,
.sp2026-login-panel {
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(15, 28, 45, 0.12);
}

.sp2026-login-hero__copy {
    padding: 26px 28px;
    background: linear-gradient(145deg, #08233c 0%, #12395e 55%, #0b2036 100%);
    color: #e8f1f8;
}

.sp2026-login-hero__copy h2 {
    margin: 10px 0 10px 0;
    color: #ffffff;
    font-size: 30px;
    line-height: 1.2;
}

.sp2026-login-hero__copy p {
    margin: 0;
    color: #d4e3f2;
    line-height: 1.6;
}

.sp2026-login-hero__hint {
    padding: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #eef5fb 100%);
    display: grid;
    gap: 8px;
    align-content: start;
}

.sp2026-login-hero__hint .sp2026-status-metric__label {
    color: #4d6782;
}

.sp2026-login-hero__hint .sp2026-status-tip__value {
    color: #1f3a55;
    font-weight: 600;
}

.sp2026-login-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
    gap: 16px;
}

.sp2026-login-panel {
    padding: 24px;
    background: #ffffff;
    border: 1px solid rgba(18, 57, 94, 0.08);
}

.sp2026-login-panel h3 {
    margin: 0 0 12px 0;
    color: #102038;
    font-size: 24px;
}

.sp2026-login-form {
    text-align: left;
    display: grid;
    gap: 12px;
}

.sp2026-login-page #connexionForm {
    text-align: left;
}

.sp2026-login-form label {
    color: #243a53;
    font-weight: 600;
}

.sp2026-login-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.sp2026-login-page #connexionForm input[type="text"],
.sp2026-login-page #connexionForm input[type="password"] {
    width: 100%;
    min-height: 46px;
    border: 1px solid #c6d5e3;
    border-radius: 12px;
    background: #f9fbfd;
    color: #102038;
    font-size: 15px;
    padding: 10px 12px;
    box-sizing: border-box;
}

.sp2026-login-page #connexionForm input[type="text"]:focus,
.sp2026-login-page #connexionForm input[type="password"]:focus {
    outline: none;
    border-color: #5b96c7;
    box-shadow: 0 0 0 4px rgba(91, 150, 199, 0.16);
    background: #ffffff;
}

.sp2026-login-page .infoInput {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.sp2026-login-page #connect {
    margin-top: 6px;
    min-height: 48px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--sp2026-jaune), var(--sp2026-jaune-fonce));
    color: var(--sp2026-rouge);
    font-size: 16px;
    font-weight: 700;
    padding: 10px 18px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(246, 209, 95, 0.3);
}

.sp2026-login-help,
.sp2026-login-page #connexion a {
    display: inline-flex;
    color: #355f86;
    font-size: 14px;
    text-decoration: none;
    font-weight: 600;
}

.sp2026-login-panel--signup {
    display: grid;
    gap: 12px;
    align-content: start;
}

.sp2026-login-panel--signup p {
    margin: 0;
    color: #56657a;
    line-height: 1.6;
}

.sp2026-login-panel--signup a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #102038;
    font-weight: 700;
}

.sp2026-login-panel--signup a img {
    max-width: 120px;
    height: auto;
}

.sp2026-login-feedback {
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid transparent;
}

.sp2026-login-feedback h3 {
    margin: 0 0 8px 0;
    font-size: 21px;
}

.sp2026-login-feedback p {
    margin: 0;
    line-height: 1.55;
}

.sp2026-login-feedback .note {
    margin-top: 8px;
    color: inherit;
    font-size: 13px;
}

.sp2026-login-feedback--warning {
    background: #fff5d8;
    border-color: #ecd48e;
    color: #694f00;
}

.sp2026-login-feedback--error {
    background: #fdebea;
    border-color: #f2b4ae;
    color: #8d2d22;
}

@media screen and (max-width: 980px) {
    .sp2026-login-hero,
    .sp2026-login-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 640px) {
    .sp2026-login-page {
        padding: 14px 0 24px;
    }

    .sp2026-login-hero__copy,
    .sp2026-login-hero__hint,
    .sp2026-login-panel {
        padding: 18px;
        border-radius: 18px;
    }

    .sp2026-login-hero__copy h2 {
        font-size: 24px;
    }

    .sp2026-login-field {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp2026-login-page .infoInput {
        justify-self: end;
    }

    .sp2026-login-page #connect {
        width: 100%;
    }
}


/* Créer mon compte */

#creerCompteForm .label {
    width: 300px !important;
}

#creerCompteForm .input {
    width: 372px !important;
}

.obligatoire {
    /*color: #ad361e;*/
    color: var(--sp2026-rouge);
    font-weight: bold;
}

.validation-advice {
    opacity: 0.7;
    background-color: black;
    color: white;
    padding: 10px 40px 10px 40px;
}

input.errorInInput {
    /*border-color: #ad361e;*/
    border-color: var(--sp2026-rouge);
    background-color: #FFE6D8;
}

input.date {
    width: 80px;
    font-size: 12px;
    text-align: center;
    padding: 0;
}

#creerCompteForm textarea {
    width: 220px;
    height: 50px;
}

.spaceBottom {
    margin-bottom: 20px;
}

#confirmDiv {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: grey;
    opacity: 0.5;
    margin: 0;
    text-align: center;
}

#confirmData {
    position: fixed;
    background-color: white;
    border: solid black 3px;
    margin: auto;
    width: 400px;
    left: 50%;
    margin-left: -200px;
    top: 50%;
    margin-top: -154px;
    z-index: 1024;
}

#confirmData div.confTitre {
    background-color: #ffdd55;
    padding: 5px;
}

#confirmData div.confContenu {
    padding: 10px;
}

#confirmControls {
    padding: 5px;
    background-color: #4d4d4d;
    overflow: auto;
    font-size: 12px;
}

#confirmControls div.confirmBtn {
    /*margin-left: 10px;*/
    margin:auto;
    width: 80px;
    height:30px;
    padding: 5px 20px;
    /*background-color: #eeeeee;*/
    font-size:larger;
}

#confirmControls #modifBtn {
    /*margin-left: 100px;*/
}

#confirmControls img.confirmImage {
    margin: 0;
    vertical-align: middle;
}


/* Identifiants perdus */

#mdpperdu {
    margin: auto;
    width: 65%;
}

#helpForm {
    text-align: right;
    /*padding-right: 300px;*/
}

.noticeMDP {
    float: left;
    color: #9d9d9d;
    font-size: 15px;
    font-weight: bold;
}

.sp2026-help-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 10px 30px;
}

.sp2026-help-page-title {
    margin-bottom: 0;
}

.sp2026-help-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.9fr);
    gap: 14px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.sp2026-help-hero__copy,
.sp2026-help-hero__hint,
.sp2026-help-shell {
    border-radius: 22px;
    box-shadow: 0 16px 38px rgba(15, 28, 45, 0.12);
}

.sp2026-help-hero__copy {
    padding: 24px;
    background: linear-gradient(145deg, #08233c 0%, #12395e 55%, #0b2036 100%);
    color: #e8f1f8;
}

.sp2026-help-hero__copy h2 {
    margin: 10px 0 8px 0;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.22;
}

.sp2026-help-hero__copy p {
    margin: 0;
    color: #d5e2f0;
    line-height: 1.6;
}

.sp2026-help-hero__hint {
    padding: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #eef5fb 100%);
    display: grid;
    gap: 8px;
    align-content: start;
}

.sp2026-help-hero__hint .sp2026-status-metric__label {
    color: #4d6782;
}

.sp2026-help-hero__hint .sp2026-status-tip__value {
    color: #1f3a55;
    font-weight: 600;
}

.sp2026-help-shell {
    background: #ffffff;
    border: 1px solid rgba(18, 57, 94, 0.08);
    padding: 22px;
}

.sp2026-help-page #mdpperdu {
    width: 100%;
    max-width:700px;
    margin: 0;
}

.sp2026-help-form {
    text-align: left;
    display: grid;
    gap: 16px;
}

.sp2026-help-block {
    margin: 0;
    padding: 16px 18px 18px;
    border: 1px solid #d5e1ea;
    border-radius: 16px;
    background: #f9fbfd;
}

.sp2026-help-page .noticeMDP {
    float: none;
    margin: 0;
    color: #102038;
    font-size: 20px;
}

.sp2026-help-block__text {
    margin: 8px 0 14px 0;
    color: #56657a;
    line-height: 1.6;
}

.sp2026-help-form label {
    display: block;
    color: #243a53;
    font-weight: 600;
    margin-top: 8px;
    margin-bottom: 6px;
}

.sp2026-help-page #helpForm input[type="text"] {
    width: 100%;
    min-height: 46px;
    border: 1px solid #c6d5e3;
    border-radius: 12px;
    background: #ffffff;
    color: #102038;
    font-size: 15px;
    padding: 10px 12px;
    box-sizing: border-box;
}

.sp2026-help-page #helpForm input[type="text"]:focus {
    outline: none;
    border-color: #5b96c7;
    box-shadow: 0 0 0 4px rgba(91, 150, 199, 0.16);
}

.sp2026-help-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5b7087;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.sp2026-help-separator::before,
.sp2026-help-separator::after {
    content: "";
    flex: 1;
    border-top: 1px solid #d3deea;
}

.sp2026-help-separator::before {
    margin-right: 12px;
}

.sp2026-help-separator::after {
    margin-left: 12px;
}

.sp2026-help-submit {
    display: flex;
    justify-content: center;
}

.sp2026-help-page #demande {
    min-height: 48px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--sp2026-jaune), var(--sp2026-jaune-fonce));
    color: var(--sp2026-rouge);
    font-size: 16px;
    font-weight: 700;
    padding: 10px 22px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(246, 209, 95, 0.3);
}

@media screen and (max-width: 900px) {
    .sp2026-help-hero {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 640px) {
    .sp2026-help-page {
        padding: 12px 0 24px;
    }

    .sp2026-help-hero__copy,
    .sp2026-help-hero__hint,
    .sp2026-help-shell {
        padding: 18px;
        border-radius: 18px;
    }

    .sp2026-help-hero__copy h2 {
        font-size: 24px;
    }

    .sp2026-help-page #demande {
        width: 100%;
    }
}


/*Changement de mot de passe*/

#mdpDivForm {
    padding-top: 20px;
}


/* menu membre*/

.menuMembre {
    font-size: 10px;
    text-align: center;
    height: 64px;
}

#menuMembre {
    /*
    background-image: url('../imgs/fondMenuMembre-min.png');
    background-position: center;
    background-repeat: no-repeat;
    */
    background:var(--sp2026-surface);
    color:var(--sp2026-text);
}

#menuOrganisateur {
    background-image: url('../imgs/fondMenuOrganisateur-min.png');
    background-position: center;
    background-repeat: no-repeat;
}

#menuClub {
    background-image: url('../imgs/fondMenuClub-min.png');
    background-position: center;
    background-repeat: no-repeat;
}

#connectInfo {
    float: left;
    text-align: left;
    padding: 10px 0 10px 20px;
}

#deconnectForm {
    display: inline;
}

#deconnectForm input[type="image"] {
    vertical-align: bottom;
    margin: 0;
    padding: 0;
}

#deconnectForm input[type="submit"] {
    border: none;
    background: 0;
    font-size: 10px;
    height: 16px;
    padding: 2px 0 0 0;
    width: 64px;
    line-height: 16px;
}

.menuMembre a {
    /*
    display: block;
    float: left;
    */
    text-decoration: none;
    /*
    color: black;
    margin-right: 16px;
    padding-top: 8px;
    */
    display:flex;
    flex-direction:column;
    text-align:center;
    color:white;
}

.menuMembre a:hover,
.menuMembre a.focus {
    /*color: #ad361e !important;*/
    color: var(--sp2026-rouge) !important;
}

.menuMembre ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#menuMembre ul {
    /*margin-left: 230px;*/
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#menuOrganisateur ul {
    margin-left: 450px;
}

#menuClub ul {
    margin-left: 360px;
}

.menuMembre ul li {
    display: inline;
}

.menuMembre ul li img {
    height: 32px;
    border: 2px lightgrey solid;
}

.menuMembre ul li img:hover,
.menuMembre ul li img.focus {
    border: 2px #4d4d4d solid;
}

.actionBtn {
    /*cursor: hand;*/
    cursor: pointer;
}

.hoverColor:hover {
    /*color: #ad361e !important;*/
    color: var(--sp2026-rouge) !important;
}

#fbBoxDiv {
    float: right;
    margin-right: 20px;
}

#fbLikeDiv {
    clear: both;
}

/**************/
/* MENU MEMBRE */
/**************/
@media (max-width: 700px) {
    .menuMembre-list::after {
        content: '';
        display: block;
        flex: 0 0 16px;
        width: 16px;
        height: 1px;
    }
    .menuMembre-list > li.overflow-menu-trigger {
        margin-right: 16px;
    }
    .menuMembre-list {
        display: flex;
        width: 100vw;
    }
    .menuMembre-list > li:not(.overflow-menu-trigger):not(.overflow-item) {
        flex: 1 1 0;
        min-width: 0;
    }
    .menuMembre-list > li.overflow-menu-trigger {
        flex: 0 0 56px;
        max-width: 56px;
    }
    .menuMembre-list {
        align-items: stretch;
        height: 56px;
        min-height: 56px;
    }
    .menuMembre-list > li,
    .menuMembre-list > li.overflow-menu-trigger {
        height: 100%;
        min-height: 56px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .menuMembre-list > li.overflow-menu-trigger .overflow-btn {
        height: 100%;
        width: 100%;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .menuMembre-list > li.overflow-menu-trigger .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .menuMembre-list > li.overflow-menu-trigger svg {
        display: block;
        margin: 0 auto;
        height: 28px;
        width: 28px;
    }
    .menuMembre-list {
        align-items: stretch;
        height: 56px;
    }
    .menuMembre-list > li {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .menuMembre-list > li.overflow-menu-trigger {
        height: 100%;
        align-items: center;
        justify-content: center;
    }
    .menuMembre-list > li.overflow-menu-trigger .overflow-btn {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
    }
}
.menuMembre-list > li.overflow-menu-trigger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    height: 100%; /* Correction alignement vertical */
}
.menuMembre-list > li.overflow-menu-trigger .overflow-btn {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}
/* Overflow menu mobile */
@media (max-width: 700px) {
    .menuMembre-list > li.overflow-item {
        display: none !important;
    }
    .menuMembre-list > li.overflow-menu-trigger {
        /*display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1 1 0;*/
        min-width: 0;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        display: inline-block;
        height: 100%;
        line-height: 70px;
        padding: 14px 16px;
        vertical-align:middle;
    }
    .menuMembre-list > li:nth-child(n+6):not(.overflow-menu-trigger) {
        display: none !important;
    }
    .menuMembre-list .overflow-btn {
        display: inline-block;
        line-height: 70px;
        height:100%;
        vertical-align:middle;
    }
    .overflow-vertical-menu {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 70px;
        background: var(--sp2026-surface);
        box-shadow: 0 -2px 16px rgba(0,0,0,0.18);
        z-index: 2000;
        border-radius: 12px 12px 0 0;
        padding: 12px 0 8px 0;
        animation: slideUp .2s;
    }
    .overflow-vertical-menu.active {
        display: block !important;
    }
    .overflow-vertical-menu.active li{
    border-bottom: solid 1px grey;
    }
    .overflow-vertical-menu.active  .menuMembre-link{
        background: var(--sp2026-surface);
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        color:white;
        gap:16px;
    }
    .overflow-vertical-menu.active  .menuMembre-link .icon svg, 
    .overflow-vertical-menu.active  .menuMembre-link .icon img {
        width:32px;
        height:32px;
    }
    .overflow-vertical-menu.active  .menuMembre-link .label{
        font-size:13px;
        display:inline-block !important;
    }
    .overflow-vertical-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
    .overflow-vertical-menu .menuMembre-link {
        width: 90vw;
        max-width: 400px;
        justify-content: flex-start;
        font-size: 1.1em;
        background: #f7fafd;
        border-radius: 8px;
        margin: 0 auto;
    }
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* --- Menu membre moderne & responsive (v2) --- */
.menuMembre {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 18px 16px 12px 16px;
    margin-bottom: 24px;
    max-width: 320px;
    margin-left: 0;
    margin-right: 32px;
    position: relative;
    float: left;
    min-height: 400px;
}
.menuMembre .connectInfo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.menuMembre .userAvatar svg {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sp2026-bg);
    /*border: 2px solid #e0e0e0;*/
}
.menuMembre .userInfo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.menuMembre .login {
    font-weight: bold;
    color: white;
    font-size: 1.1em;
}
.menuMembre .prenomNom {
    font-size: 0.98em;
    color: #333;
}
.menuMembre .btnLogout {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 8px;
}
.menuMembre-list {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
}
.menuMembre-list li{
    height:100%;
}
.menuMembre-list .menuMembre-link {
    display: inline-block;
    height: 100%;
    line-height: 70px;
    padding: 14px 16px;
}
.menuMembre-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #222;
    font-weight: 500;
    background: #f7fafd;
    transition: background 0.2s, color 0.2s;
}
.menuMembre-link .icon svg {
    width: 42px;
    height: 42px;
}
.menuMembre-link.focus, .menuMembre-link:hover {
    background: white;
    color: #fff;
}
.menuMembre-link.focus .icon svg, .menuMembre-link:hover .icon svg {
    filter: brightness(0) invert(1);
}
.menuMembre .creditDiv {
    margin-top: 10px;
    text-align: right;
    font-size: 1em;
    color: white;
}
.menuMembre .note {
    font-size: 0.9em;
    color: #888;
    margin-right: 6px;
}

/* Pour éviter le chevauchement du contenu principal */
.contenu, .main-content {
    margin-left: 340px;
    min-width: 0;
}

@media (max-width: 900px) {
    .menuMembre {
        float: none;
        margin-left: auto;
        margin-right: auto;
        /*max-width: 100vw;*/
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin-bottom: 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: #fff;
        border-top: 1px solid #e0e0e0;
        min-height: unset;
    }
    .menuMembre .connectInfo, .menuMembre .creditDiv {
        display: none;
    }
    .menuMembre-list {
        flex-direction: row;
        justify-content: space-between;
        /*gap: 30px;*/
        margin: 0;
        /*width: 100vw;*/
    }
    .menuMembre-link {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 0.95em;
        padding: 8px 0 6px 0;
        border-radius: 0;
        width: 100%;
        background: none;
        border: none;
        min-width: 0;
        transition: background 0.2s, color 0.2s;
        flex: 1 1 0;
        box-sizing: border-box;
        /*max-width: 100vw;*/
        overflow: hidden;
    }
    
    .menuMembre-link.focus, .menuMembre-link:hover {
        background: #ffffff;
        color: #fff;
    }
    .contenu, .main-content {
        margin-left: 0;
    }
}
/* --- Menu membre moderne & responsive --- */
.menuMembre {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 18px 16px 12px 16px;
    margin-bottom: 24px;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.menuMembre .connectInfo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.menuMembre .userAvatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f0f0;
    border: 2px solid #e0e0e0;
}
.menuMembre .userInfo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.menuMembre .login {
    font-weight: bold;
    color: white;
    font-size: 1.1em;
}
.menuMembre .prenomNom {
    font-size: 0.98em;
    color: #333;
}
.menuMembre .btnLogout {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 8px;
}
.menuMembre-list {
    height:100%;
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.menuMembre-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #222;
    font-weight: 500;
    background: #f7fafd;
    transition: background 0.2s, color 0.2s;
}
.menuMembre-link .icon img {
    width: 28px;
    height: 28px;
}
.menuMembre-link.focus, .menuMembre-link:hover {
    background: #0f1C2D;
    color: #fff;
}
.menuMembre-link.focus .icon img, .menuMembre-link:hover .icon img {
    filter: brightness(0) invert(1);
}
.menuMembre .creditDiv {
    margin-top: 10px;
    text-align: right;
    font-size: 1em;
    color: white;
}
.menuMembre .note {
    font-size: 0.9em;
    color: #888;
    margin-right: 6px;
}
.menuMembre .label,
.menuMembre .icone{
    color:white;
}

@media (max-width: 700px) {
    .menuMembre {
        max-width: 100vw;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: #fff;
        border-top: 1px solid #e0e0e0;
        height:70px;
    }
    .menuMembre .connectInfo, .menuMembre .creditDiv {
        display: none;
    }
    .menuMembre-list {
        flex-direction: row;
        justify-content: space-between;
        /*gap: 30px;*/
        margin: 0;
    }
    .menuMembre-link {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 0.95em;
        padding: 8px 0 6px 0;
        border-radius: 0;
        width: 100%;
        background: none;
        border: none;
        min-width: 0;
        transition: background 0.2s, color 0.2s;
        gap:0;
    }
    .menuMembre-link .icon img {
        width: 42px;
        height: 42px;
    }
    .menuMembre-link.focus, .menuMembre-link:hover {
        /*background: white;*/
        color: #fff;
    }
    .menuMembre-link .label{
        display:none;
        /*
        font-size:12px;
        font-weight:normal;
        text-align:center;
        display:inline-block;
        padding:0 5px 2px 5px;
        */
    }
    .menuMembre-link.focus .label, .menuMembre-link:hover .label{
        font-weight:bold;
        /*display:inline-block;*/
    }
}
@media (min-width:701px){
    #menuMembre{
        /*width: 100%;*/
        height:90px;
        max-width:none;
        overflow:auto;
        display: flex;
        flex-direction: row;
        float:none;
        border-radius:0;        
        justify-content: space-evenly;
        margin-bottom: auto;
    }
    #menuMembre ul{
        gap: 0;
        flex-wrap: wrap;
    }
    .menuMembre{
        min-height:0;
        padding:0;
    }
    .menuMembre .connectInfo{
        gap:0;
        flex-direction:column;
        margin-bottom:0;
        justify-content: center;
    }
    .connectInfo .usrZone{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap:8px;
    }
    .menuMembre .userInfo{
        text-align: left;
    }
    .menuMembre .prenomNom{
        color:yellow;
    }
    .menuMembre .btnLogout{
        padding:0;
        margin:0;
        display:flex;
    }
    .menuMembre .btnLogout label{
        cursor:pointer;
    }
    .menuMembre label.note{
        display:inline-block;
        height:24px;
        line-height:24px;
    }
    .menuMembre .creditDiv{
        color: white;
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        margin: 0;
    }
    #creditSpan{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }
    .menuMembre-list{
        display:flex;
        justify-content:space-evenly;
        align-items:center;
        flex-direction:row;
        height:auto;
    }
    .menuMembre-list li.overflow-menu-trigger{
        display:none !important;
    }
    .menuMembre-list li:not(.overflow-menu-trigger){
        display:inline-block !important;
    }
    .menuMembre-list li{
        background-color: var(--sp2026-surface);
        color: var(--sp2026-text);
        width:auto;
        height:auto;
        line-height:5px;
    }
    .menuMembre-list .menuMembre-link{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        line-height:5px;
        height:auto;
        padding:10px;
    }
    .menuMembre-link{
        color:white;
        line-height:45px;
        background:var(--sp2026-surface);
    }
    
    .menuMembre-list .menuMembre-link .icon{
        padding:0;
        margin:0;
    }
    .menuMembre-list .menuMembre-link .icon img,
    .menuMembre-list .menuMembre-link .icon svg
    {
        height:24px;
        width:24px;
    }
    .menuMembre-list .menuMembre-link .label{
        height:auto;
        padding:0;
        margin:0;
    }
    #creditSpan img{
    width:24px;
    height:24px;
    }
}
@media (min-width:900px)
{
    #menuMembre ul{
        gap: 16px;
    }
    .menuMembre-list .menuMembre-link .icon img,
    .menuMembre-list .menuMembre-link .icon svg {
        width: 32px;
        height: 32px;
    }
    #creditSpan img{
    width:32px;
    height:32px;
    }
}
/* Espace membre : accueil */

div.annonceExclu {
    border: solid 2px black;
    background-color: lightgray;
    padding: 20px;
}

div.annonceExclu img {
    vertical-align: bottom;
    border: none;
}

input.btnGo {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 10px;
    background-color: #ffdd55;
    color: black;
    font-weight: bold;
    border: solid 1px black;
}

table.listePdtAV{
    font-size:normal;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom:10px;
}
table.listePdtAV td{
    border:solid darkgrey 1px;
    margin:0;
}

/* Espace membre : profil */

.fsh2legend {
    margin-bottom: 10px;
    padding: 10px;
}

.fsh2legend legend {
    color: #4d4d4d;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
}

#rappelProfilMembre {
    float: right;
    margin-right: 10px;
    background-color: lightyellow;
    padding: 20px;
}

#imgSexe {
    float: left;
    margin-right: 10px;
}

#typeClassementInfo {
    float: right;
    text-align: center;
    margin-right: 60px;
}

#listeLicences {
    list-style-type: none;
    margin-left: 10px;
    padding: 0px;
}

#listeLicences>li {
    color: white;
    border: 1px solid #4d4d4d;
    margin: 0 10px 10px 0;
    padding: 0;
    height: auto;
    overflow: auto;
}

.presFederation {
    background-color: #4d4d4d;
    padding: 10px;
    font-weight: bold;
}

.typeClassement {
    font-style: italic;
    font-size: 18px;
    float: right;
    background-color: white;
    color: #4d4d4d;
    padding: 5px;
    border: dotted 1px #4d4d4d;
}

.actionLicence a {
    text-decoration: none !important;
    color: #4d4d4d !important;
}

.actionLicence img {
    vertical-align: middle;
    margin-right: 2px;
}

.etatGeneral {
    color: black;
    padding: 5px;
    overflow: auto;
}

.etatGeneral img.imgEtatGeneral {
    width: 32px;
    height: 32px;
    float: left;
    margin-right: 5px;
}

.detailsLicence {
    color: black;
}

.detailsLicence ul {
    list-style-type: none;
}

.detailsLicence img.imgEtatEtape {
    width: 16px;
    height: 16px;
}

.contenu {
    overflow: auto;
    background-color: white;
    font-size: 12px;
    padding: 15px;
}

.contenu a {
    color: #ad361e;
}

.inlineFormBtn .bottomImg {
    vertical-align: bottom;
}

span.form form {
    display: inline;
}

input.adresseLength {
    width: 400px;
}


/*Mes inscriptions*/

#tabList {
    margin-top: 20px;
    width: 100%;
    border: solid 1px #4d4d4d;
    border-collapse: collapse;
}

#tabList .fond {
    background-color: darkgrey;
}

#tabList tr:hover {
    background-color: lightgrey;
}

#tabList tr.header {
    background-color: #4d4d4d;
    padding: 10px;
    color: white;
}

#tabList th {
    text-align: center;
}

#tabList td {
    /*border:dashed 1px #4d4d4d;*/
    padding: 5px;
    white-space: nowrap;
}

#tabList img.imgEtatInscription {
    width: 16px;
    height: 16px;
}

/*************/


/* pied de page */

#footer {
    clear: both;
    margin: auto;
    min-height: 30px;
    background-color: transparent;
    width: 900px;
    font-size: 14px;
}

#megafooter {
    background-color: black;
    overflow: auto;
}

#menuPied ul {
    color: white;
    list-style-type: none;
    margin: 0;
}

#menuPied ul li {
    display: inline;
    padding-bottom: 10px;
}

#menuPied ul li a {
    display: block;
    float: left;
    color: white;
    text-decoration: none;
    padding: 8px 20px;
    /*border: 1px solid red;*/
}

#copyright {
    clear: both;
    padding: 10px 0px;
    text-align: center;
    font-size: 11px;
    color: white;
}

#copyright a {
    color: white;
}


/* Responsive Design */


/*
- 83 % des largeurs utilisées
2560 1920 1680 1600 1440 1366 1280 1024 360 320
- 90 % des largeurs utilisées
1536 1360 800 768 375
- 95 % des largeurs utilisées
1152 1093 1080 853 720 640 600 540 480 414 412 384 300
SOIT :
A - 900 (largeur de la page)
  c - 853
 B - 800
 B - 768
  c - 720
  c - 640
  c - 600
  c - 540
  c - 480
  c - 414
  c - 412
  c - 384
 B - 375
A - 360
A - 320
  c - 300
*/

@media (max-width: 1024px) {
  .sp2026-header__bar { grid-template-columns: auto 1fr auto; }
  /*.sp2026-actions { display: none; }*/
  .sp2026-nav { justify-content: flex-end; margin-left:160px; gap:10px;}
  /*.sp2026-nav-mobile { display: flex; }*/
    .sp2026-footer__top {
        grid-template-columns: 1fr;
        grid-template-areas:
            "brand"
            "partenaires"
            "cols"
            "cta";
    }
  .sp2026-footer__cols { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .sp2026-hero { padding: 110px 6% 90px; }
  .sp2026-search { grid-template-columns: 1fr; }
  .sp2026-btn-primary { width: 80%; }
  .sp2026-features-circles {
        grid-template-columns: repeat(3, 1fr);
    }
    .sp2026-footer__top{
        gap: 28px;
    }
    .sp2026-footer__partenaires-labels{
        /*display:flow;*/
        justify-self: center;
        /*align-items: flex-start;*/
    }
}

@media screen and (max-height:1000px) {}

@media screen and (max-width:2560px) {}

@media screen and (max-width:1920px) {}

@media screen and (max-width:1680px) {}

@media screen and (max-width:1600px) {}
  
    .sp2026-services-hero,
    .sp2026-services-columns {
        grid-template-columns: 1fr;
    }
@media screen and (max-width:1536px) {}

@media screen and (max-width:1440px) {}

@media screen and (max-width:1366px) {}

@media screen and (max-width:1360px) {}

@media screen and (max-width:1280px) {}

@media screen and (max-width:1024px) {}

@media screen and (max-width:915px) {
    #page,
    .page {
        width: 100% !important;
    }
    /*
    .fullwidth {
        width: auto;
    }*/
    #header {
        width: 100% !important;
    }
    #footer {
        width: 100% !important;
    }
    form div.row div.label {
        width: 35%;
    }
    form div.row div.input {
        width: 62%;
    }
    #creerCompteForm div.label {
        width: 43% !important;
    }
    #creerCompteForm div.input {
        width: 53% !important;
    }
}

@media screen and (max-width:875px) {
    /*Accueil*/
    #fonctCoureur {
        overflow: auto;
        height: auto;
    }
    #fonctCoureur ul {
        height: auto;
        overflow: auto;
    }
    #fonctCoureur ul li {
        width: 100%;
        display: block;
        clear: both;
    }
    #lienNewCompte {
        margin: auto;
        margin-bottom: 30px;
        margin-top: 20px;
        width: auto;
    }
    /*Courses*/
    #courseList {
        width: 100%;
        margin-left: 0;
    }
    .course-card {
        grid-template-columns: minmax(200px, 270px) 1fr;
        padding: 8px;
    }
    .afficheCtnr {
        width: 100%;
    }
    .afficheCtnr img {
        max-width: 270px;
        max-height: 382px;
    }
}

@media screen and (max-width:650px) {
    .course-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "date"
            "affiche"
            "contenu"
            "inscription";
    }
    .afficheCtnr {
        width: min(80vw, 280px);
        margin: 6px auto 10px;
    }
    .dateCourseCtnr {
        font-size: 14px;
    }
    .courseCtnr .lblCourse,
    .inscriptionCtrn .lblCourse {
        font-size: 12px;
        color: #55718a;
        font-weight: 600;
        margin-right: 2px;
    }
    .courseCtnr .lblCourse:hover::after,
    .inscriptionCtrn .lblCourse:hover::after {
        content: none;
    }
    .epreuvesGrid,
    .epreuvesList {
        grid-template-columns: 1fr;
    }
    #courseList .inscriptionCtrn {
        flex-direction: column;
        align-items: stretch;
    }
    #courseList .inscriptionLine {
        width: 100%;
        order: 1;
    }
    #courseList .rightEltInCtrn {
        margin: 0;
        order: 2;
    }
    #courseList form {
        width: 100%;
        margin: 0;
        order: 2;
    }
    #courseList input[type="submit"],
    #courseList input[type="button"] {
        width: 100%;
        display: block;
    }
    .epreuveFiche .formalitesLine {
        /*padding-top: 32px;*/
    }
    .epreuveFiche .formalitesLine > input[type="button"],
    .epreuveFiche .formalitesLine > input[type="submit"],
    .epreuveFiche .formalitesLine > form {
        position: absolute;
        top: -12px;
        right: 10px;
        left: 10px;
    }
    
    .epreuveFiche .formalitesLine > a.sp2026-btn-insc,
    .epreuveFiche .formalitesBody > a.sp2026-btn-insc,
    .epreuveFiche .formalitesBody a.sp2026-btn.sp2026-btn-insc {
        position: absolute !important;
        top: -12px !important;
        right: 10px !important;
        left: auto !important;
        width: auto !important;
    }
    .epreuveFiche .formalitesLine > form input[type="submit"] {
        width: 100%;
    }

    #courseList .inscriptionCtrn.inscriptionLine > a.sp2026-btn.sp2026-btn-insc.sp2026-btn-primary {
        position: absolute !important;
        top: -12px !important;
        right: 20px !important;
        left: auto !important;
        width: auto !important;
        margin: 0 !important;
    }
}

@media (hover: none) {
    .courseCtnr .lblCourse,
    .inscriptionCtrn .lblCourse {
        font-size: 12px;
        color: #55718a;
        font-weight: 600;
    }
    .courseCtnr .lblCourse:hover::after,
    .inscriptionCtrn .lblCourse:hover::after {
        content: none;
    }
    .epreuveFiche .heureInline:hover::after {
        content: none;
    }
}

@media screen and (max-width:853px) {
    #SlideItMoo_outer {
        width: auto !important;
    }
    #SlideItMoo_inner {
        width: unset !important;
    }
    .connexionDiv {
        padding-right: 28px;
    }

    .sp2026-services-page {
        gap: 28px;
    }

    .sp2026-services-hero,
    .sp2026-services-columns {
        grid-template-columns: 1fr;
    }

    .sp2026-services-hero__copy,
    .sp2026-services-hero__panel,
    .sp2026-services-offline {
        padding: 20px;
        border-radius: 18px;
    }

    .sp2026-services-lead {
        font-size: 17px;
    }

    .sp2026-services-section-head {
        align-items: flex-start;
    }

    .sp2026-services-mini-card {
        grid-template-columns: 38px 1fr;
        gap: 10px;
    }

    .sp2026-services-mini-card__icon,
    .sp2026-services-icon,
    .sp2026-services-card .sp2026-card__icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 18px;
    }

    .sp2026-services-offline {
        grid-template-columns: 1fr;
    }
    .sp2026-services-cta {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .sp2026-services-cta .sp2026-btn {
        width: fit-content;
        justify-self: start;
    }
    .sp2026-services-metrics {
        grid-template-columns: 1fr;
    }

    .sp2026-about-page {
        gap: 24px;
    }

    .sp2026-about-hero {
        grid-template-columns: 1fr;
    }

    .sp2026-about-hero__copy,
    .sp2026-about-hero__panel,
    .sp2026-about-section,
    .sp2026-about-cta {
        padding: 18px;
        border-radius: 18px;
    }

    .sp2026-about-lead {
        font-size: 17px;
    }

    .sp2026-about-metrics {
        grid-template-columns: 1fr;
    }

    .sp2026-about-section-head {
        align-items: flex-start;
    }

    .sp2026-about-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 18px;
    }

    .sp2026-about-team {
        display: flow-root;
    }

    .sp2026-about-team__photo {
        float: left;
        max-width: 150px;
        margin: 0 14px 10px 0;
    }

    .sp2026-about-focus-grid {
        grid-template-columns: 1fr;
    }

    .sp2026-about-cta {
        grid-template-columns: 1fr;
    }

    .sp2026-about-cta .sp2026-btn {
        width: fit-content;
        justify-self: start;
    }
}

@media screen and (max-width:840px) {
    #logo {
        margin-top: -35px;
    }
    #menu {
        width: 100%;
    }
    #resList {
        width: 98%;
    }
    #resList tr {
        overflow: hidden !important;
    }
    th.hiddenFirst,
    td.hiddenFirst {
        display: revert !important;
    }
    th.toHideFirst,
    td.toHideFirst {
        display: none;
        visibility: hidden;
    }
    td.hiddenFirst p {
        margin: 0;
        padding: 0;
        text-align: left;
    }
}

@media screen and (max-width:800px) {
    form div.row div.label {
        width: 100%;
        text-align: left;
    }
    form div.row div.input {
        width: 100%;
        margin-bottom: 20px;
    }
    .rowConsent {
        width: 100%;
    }
    #creerCompteForm div.label {
        text-align: right !important;
    }
}

@media screen and (max-width:768px) {
    .sp2026 { gap: 60px; }
  .sp2026-hero { padding: 96px 18px 80px; }
  .sp2026-slider__dots { justify-content: center; }
  .sp2026-content.bleu-fonce .sp2026-section-head {
    margin-top: 24px;
    margin-bottom: 24px;
    }

    .sp2026-content.bleu-fonce .fullwidth > :last-child {
    margin-bottom: 24px;
    }
    .sp2026-features-circles {
        grid-template-columns: repeat(2, 1fr);
    }
  #index {
        margin-bottom: 14px;
        padding: 9px 11px;
        font-size: 12px;
      }

            #index ol,
            #index li {
                gap: 6px;
            }

      #index a {
        padding: 3px 8px;
      }

            #index li > span[itemprop="name"] {
                font-size: 12px;
            }
  #cadres {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      #cadres.sp2026-public {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 0;
        padding: 32px 4%;
    }

    #cadres.sp2026-public .cadre:hover {
        transform: translateY(-2px);
    }

      #cadres .cadre_contenu {
        max-height: 500px;
      }

      #cadres .cadreCourse,
      #cadres .cadreResultat {
        grid-template-columns: 1fr;
      }

      #cadres .cadreCourse .date,
      #cadres .cadreResultat .date {
        grid-column: 1;
        grid-row: auto;
      }

      #cadres .cadreCourse .info,
      #cadres .cadreResultat .info {
        grid-column: 1;
      }

      #cadres .cadreCourse .infoPlus,
      #cadres .cadreResultat .infoPlus {
        grid-column: 1;
      }

    #podiums {
        margin: 12px;
        padding: 5px;
        border: solid 1px black;
        background-color: #ffdd55;
        font-weight: bold;
    }
    .connexionDiv {
        width: 100%;
        padding-left: unset;
        padding-right: unset;
        float: unset;
        margin-bottom: unset;
        margin-top: 30px;
    }
    #connexion {
        border-right: none;
        padding-bottom: 30px;
        /*border-bottom: solid 1px #ad361e;*/
        border-bottom: solid 1px var(--sp2026-rouge);
    }
    #connexionForm {
        text-align: center;
    }
    .sp2026-footer__partenaires-labels{
        display:flow;
        justify-self: center;
        align-items: flex-start;
    }
}

@media screen and (max-width:720px) {
    table.resultat th.toHide,
    table.resultat td.toHide {
        display: none;
    }
    table.resultat th.hidden,
    table.resultat td.hidden {
        display: revert;
    }
}

@media screen and (max-width:675px) {
    #menu a {
        padding-left: 5px;
        padding-right: 5px;
    }
    #liMembre a {
        padding-right: 30px;
    }
    #listeActualites.sp2026-news-timeline {
        gap: 20px;
    }
    #listeActualites.sp2026-news-timeline::before {
        left: 14px;
    }
    .sp2026-news-year-group {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-left: 32px;
    }
    .sp2026-news-year {
        justify-self: start;
        font-size: 15px;
        padding: 7px 10px;
    }
    .sp2026-news-item::before {
        left: -24px;
        top: 22px;
    }
    .sp2026-news-link,
    .sp2026-news-item--static {
        padding: 13px 14px 12px;
    }
    .sp2026-news-item h4 {
        font-size: 17px;
    }
    .dateActuCtnr {
        font-size: 11px;
        margin-bottom: 8px;
    }
    .actuAccroche {
        font-size: 14px;
    }
    .lireActu {
        margin-top: 12px;
        padding: 7px 10px;
    }
}

@media screen and (max-width:640px) {
    .sp2026-header__bar { grid-template-columns: auto auto; }
    .sp2026-nav { display: none; }
    .sp2026-actions { display: none; }
    .sp2026-burger { 
        /*display: inline-flex;*/ 
        display: flow-root;
        align-self: center;
        justify-self: flex-end;
        width: fit-content;
    }
    .sp2026-nav-mobile:not([hidden]) {
        display: flex;
        /*position: absolute;
        width: 100%;
        left: 0;
        top: 70px;*/
        box-shadow: var(--sp2026-shadow);
        animation: sp2026-slide-down 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sp2026-footer__bottom { flex-direction: column; gap: 10px; text-align: center; }
    .sp2026-nav-mobile__actions { flex-direction: column; }

    #header {
        position: fixed;
        top: 0;
        height: auto;
        padding-bottom: 5px;
        box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
        background-position-y: -50px;
        z-index: 99;
    }
    /*body:not([data-scroll='0']) #header { }*/
    #pub-entete {
        display: none;
        visibility: hidden;
    }
    #logo {
        float: none;
        margin: auto;
        height: 134px;
    }
    #logo img {
        height: 100%;
        width: auto;
    }
    #menu {
        height: 50px;
        margin-top: 0;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        text-align: center;
        background-image: none;
        /*background-color: white;*/
        position: relative;
        margin-left: 25px;
        margin-right: 25px !important;
        width: auto;
        z-index: 10;
        font-size: medium;
    }
    div.fleche-menu {
        background-color: #ffdd55;
        position: absolute;
        top: 145px;
        border: solid grey;
        border-width: 0 5px 5px 0;
        padding: 10px;
        display: inline-block;
    }
    .fleche-menu.gauche {
        left: 10px;
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
    }
    .fleche-menu.droite {
        right: 10px;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
    #menu li {
        display: inline-block !important;
        height: 50px;
        line-height: 50px;
        margin-left: 5px;
        margin-right: 5px;
        /*background-color: #ffdd55;
        border: 1px solid black;*/
    }
    #menu li a {
        display: block;
        padding-left: 5px;
        padding-right: 5px;
    }
    #liLive img {
        margin-top: 5px;
    }
    #content {
        /*margin-top: 190px;*/
        display: flex;
        flex-direction: column;
    }
    .fullwidth {
        margin-left: 10px;
        margin-right: 10px;
    }
    
    #index {
        order: 1;
        font-size: small;
        height: auto;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
        align-self: stretch;
    }
    #text {
        order: 2;
    }
    #text .text {
        padding: 0;
        font-size: medium;
    }
    h1 {
        margin-top: 20px;
    }
    
    #cadres {
        /*width: 98%;*/
        order: 3;
    }
    /*
    .cadre_titre {
        font-size: large;
        height: auto;
    }
    .cadre_lien {
        font-size: small;
    }
    .cadreCourse a {
        background-color: #ffdd55;
        color: black;
    }
    .cadreResultat a {
        background-color: darkgreen;
        color: white;
    }
    .cadreActu a {
        background-color: var(--sp2026-rouge);
        color: white;
    }
    .cadreResultat a:hover,
    .cadreResultat a:hover,
    .cadreActu a:hover {
        background-color: black;
        color: white;
    }
    #cadres .date {
        font-size: small;
    }
    #cadres .info,
    #cadres .infoPlus {
        text-align: center;
        font-size: medium;
    }
        */
        .sp2026-services-hero::before {
            inset: -10px 0 auto 0;
            height: 62%;
            border-radius: 24px;
        }
    h1 {
        font-size: x-large;
    }
        .sp2026-services-offline,
        .sp2026-services-section {
        font-size: large;
    }
    #menuPied a {
        padding: 20px !important;
        font-size: medium;
    }
    #copyright {
        .sp2026-services-ribbon {
            gap: 8px;
            margin-bottom: 14px;
        }
        .sp2026-services-ribbon__item {
            font-size: 11px;
            padding: 6px 10px;
        }
        .sp2026-services-metrics {
            grid-template-columns: 1fr;
            margin-top: 16px;
        }
        font-size: xx-small;
    }
    /*Accueil*/
    .fonctDesc {
        .sp2026-services-section::before {
            left: 20px;
            right: 20px;
        }
        font-size: small;
    }
    /*Courses*/
    .courseCtnr h3 {
        font-size: large;
    }
    .inscriptionCtrn input:not(.sp2026-btn-primary),
    .courseCtnr input:not(.sp2026-btn-primary) {
        font-size: medium;
    }
    .inscriptionCtrn form input:not(.sp2026-btn-primary),
    .courseCtnr form input:not(.sp2026-btn-primary) {
        background-color: #ffdd55;
        color: black;
        font-weight: bold;
    }
    /*Course*/
    #titreBtnContainer input {
        font-size: medium;
        width: auto;
    }
    #titreBtnContainer form input {
        background-color: #ffdd55;
        color: black;
        font-weight: bold;
    }
    #courseLogos {
        float: none;
        margin-left: 0;
        width: auto;
    }
    #courseLogos div {
        float: left;
        margin-right: 10px;
    }
    div.titrePart {
        width: 98% !important;
    }
    div.titrePart h2 {
        font-size: medium !important;
    }
    #logoPartenaires {
        width: 98% !important;
    }
    #logoPartenaires img {
        float: left;
        margin-right: 10px !important;
    }
    #courseInfos {
        background-position-x: -120px !important;
        width: 98%;
    }
    img.imgAffiche {
        float: right;
        margin: 0 0 20px 0;
    }
    #thumbAfficheCtnr div.zoom {
        position: unset;
        float: right;
        margin-right: -120px;
        margin-top: 169px;
    }
    th.toHide,
    td.toHide {
        display: none;
        visibility: hidden;
    }
    th.hidden,
    td.hidden {
        display: revert !important;
    }
    td.hidden p {
        margin: 0;
        padding: 0;
        text-align: left;
    }
    /*Résultats*/
    #resList {
        white-space: normal;
    }
    /*Résultat*/
    #fichiersWebRes div {
        min-height: 50px;
    }
    /*Lives*/
    .liLive {
        font-size: large;
        border: solid 5px red !important;
    }
    .liLive div.nbArr {
        margin-right: 0;
        margin-left: 15px;
    }
    .liLive span.compet {
        font-size: large;
    }
    /*Live*/
    div.roar {
        min-height: 30px;
        font-size: large;
    }
    #resList tr th,
    #resList tr td {
        height: 30px;
        font-size: small;
    }
    /*Actu*/
    div.retourActus {
        margin-top: 10px;
        font-size: small;
    }
    /*Contact*/
    .cadreInfo {
        font-size: small;
    }
    form div.row div.input input,
    form div.row div.input select,
    form div.row div.input textarea {
        width: 90% !important;
        height: 30px;
        font-size: medium;
    }
    form div.row div.input input[type="radio"] {
        width: 30px !important;
    }
    form div.row div.input textarea {
        min-height: 100px;
    }
    #contactsubmit {
        height: 30px;
        font-size: medium;
        font-weight: bold;
    }
    /*Connexion*/
    #connexionForm input {
        height: 30px;
        font-size: medium;
    }
    #connexion a {
        font-size: small;
    }
    #creation {
        margin-bottom: 30px;
    }
    #creation a {
        font-weight: bold;
    }
    /*Mdp perdu*/
    #mdpperdu {
        width: 100%;
        margin-bottom: 30px;
    }
    .noticeMDP {
        font-size: large;
    }
    #helpForm input {
        height: 30px;
        font-size: medium;
    }
    /*Désinscription newsletter*/
    #desinscriptionForm {
        margin-bottom: 30px;
    }
    #desinscriptionForm label {
        display: block;
    }
    #desinscriptionForm input {
        height: 30px;
        font-size: medium;
    }
    /*Créer mon compte*/
    #creerCompteForm div.label,
    #creerCompteForm div.input {
        text-align: left !important;
        width: inherit !important;
        display: block !important;
        float: none;
    }
    #creer {
        height: 30px;
        font-size: medium;
    }
    #confirmData {
        width: 90%;
        left: 5%;
        top: 5%;
        max-height: 99%;
        margin-left: unset;
        margin-top: unset;
    }
    #confirmData div.confContenu {
        overflow-y: scroll;
    }
    #confirmControls div.confirmBtn {
        height: 30px;
        font-size: medium;
    }
}

@media screen and (max-width:600px) {
    :root { --sp2026-radius: 14px; }

    #liens.unfold {
        top: 95px;
    }
    /*
    #content {
        top: 80px;
    }
    footer {
        margin-top: 80px;
    }*/
}

@media screen and (max-width:540px) {
    #liens.unfold {
        top: 90px;
    }
    /*
    #content {
        top: 70px;
    }
    footer {
        margin-top: 70px;
    }*/
}

@media (max-width: 520px) {
  .sp2026-hero__topline { flex-wrap: wrap; }
  .sp2026-slides { gap: 8px; }
  .sp2026-slide__overlay { padding: 18px; }
  .sp2026-tag { padding: 8px 12px; }
}

@media screen and (max-width:480px) {
    .sp2026-features-circles {
        grid-template-columns: 1fr;
    }
    #cadres.sp2026-public {
        gap: 12px;
        padding: 24px 3%;
    }
    #cadres.sp2026-public .cadre{
        height:fit-content;
    }
    #cadres.sp2026-public .cadre_titre {
        padding: 14px 16px;
        font-size: 13px;
    }
    #cadres.sp2026-public .cadre_contenu {
        padding: 12px 14px;
        gap: 10px;
    }
    #cadres.sp2026-public .cadreCourse:hover,
    #cadres.sp2026-public .cadreResultat:hover,
    #cadres.sp2026-public .cadreActu:hover {
        transform: translateY(-1px);
    }
    #cadres.sp2026-public .cadreResultat .date,
    #cadres.sp2026-public .cadreActu .date {
        font-size: 10px;
    }

    #cadres.sp2026-public .cadreCourse .info,
    #cadres.sp2026-public .cadreResultat .info,
    #cadres.sp2026-public .cadreActu .info {
        font-size: 13px;
    }

    #cadres.sp2026-public .cadreCourse .infoPlus,
    #cadres.sp2026-public .cadreResultat .infoPlus,
    #cadres.sp2026-public .cadreActu .infoPlus {
        font-size: 11px;
    }
    #cadres.sp2026-public .cadreActu {
        padding: 12px;
    }
    #cadres.sp2026-public .cadre_lien {
        padding: 12px 16px;
    }

    #cadres.sp2026-public .cadre_lien a {
        padding: 8px 14px;
        font-size: 11px;
    }

    #cadres.sp2026-public .cadre_lien a:hover {
        transform: translateY(-1px);
    }
    #cadres.sp2026-public .cadreCourse a,
    #cadres.sp2026-public .cadreResultat a {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 12px;
        text-align: center;
    }

    #cadres.sp2026-public .cadreCourse,
    #cadres.sp2026-public .cadreResultat {
        padding: 10px 12px;
        gap: 10px;
    }

    #cadres.sp2026-public .cadreCourse .date-calendrier {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        align-self: start;
        width: 65px;
        min-width: 65px;
        max-width: 65px;
        margin-bottom:0;
    }

    #cadres.sp2026-public .cadreCourse .info {
        grid-column: 1;
        grid-row: 2;
        padding: 8px 0;
    }

    #cadres.sp2026-public .cadreCourse .infoPlus {
        grid-column: 1;
        grid-row: 3;
        padding: 0;
    }

    /* Résultats en mode mobile : bloc gauche puis bloc droite empilés */
    #cadres.sp2026-public .cadreResultat .resultat-gauche {
        grid-column: 1;
        grid-row: 1;
        min-width: auto;
        width: 100%;
    }

    #cadres.sp2026-public .cadreResultat .resultat-droite {
        grid-column: 1;
        grid-row: 2;
    }

    #cadres.sp2026-public .cadreResultat .resultat-droite .info {
        padding: 8px 0;
    }

    #cadres.sp2026-public .cadreResultat .resultat-droite .infoPlus {
        padding: 0;
    }

    #cadres.sp2026-public .cadreResultat .resultat-icone {
        font-size: 20px;
    }

    #cadres.sp2026-public .cadreResultat .resultat-date {
        /*font-size: 10px;*/
    }

    #cadres.sp2026-public .cadreResultat .resultat-ville {
        /*font-size: 8px;*/
    }
    #fonctCoureur ul {
        margin-left: 0;
        margin-right: 0;
    }
    #liens.unfold {
        top: 80px;
    }
    #formContact input[type="text"],
    #formContact input[type="email"],
    #formContact textarea {
        width: 100% !important;
    }
}

/* Styles pour la page de détail d'une course */
.courseFicheCtnr {
    --course-accent: #0f8bd8;
    --course-accent-dark: #0669ad;
    --course-accent-soft: #e8f5ff;
    --course-title: #114b7a;
    display: grid;
    grid-template-columns: 460px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 32px;
    row-gap: 14px;
    margin: 0 auto;
    max-width: 1320px;
    padding: 0;
}

.courseFicheCtnr .afficheCtnr {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.courseFicheCtnr .afficheCtnr img {
    border: solid 2px #99cbe9;
    border-radius: 14px;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1.414;
    height: auto;
    max-height: none !important;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.courseFicheCtnr .courseCtnr {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
}

/* h2 dans la colonne droite de la section fiche */
.courseFicheCtnr .h2-in-col {
    text-align: center;
    margin: 0;
    padding:0;
    color: var(--course-title);
    font-size: clamp(1.5rem, 2.5vw, 1.8rem);
    font-weight: 700;
}

.courseFicheCtnr .courseCtnr > div,
.courseFicheCtnr .detailInscriptions > div {
    margin: 0;
}

.courseFicheCtnr .inscriptionCtrn {
    grid-column: 2;
    grid-row: 2;
    position: static;
    align-items: stretch;
    flex-direction: column;
    margin: 0 !important;
    padding: 14px 16px;
    background: var(--course-accent-soft);
    border: 1px solid #cae6f8;
    border-radius: 12px;
}

.courseFicheCtnr .inscriptionCtrn input[type="submit"].sp2026-btn-primary,
.courseFicheCtnr .inscriptionCtrn input[type="button"].sp2026-btn-primary,
.courseFicheCtnr .inscriptionCtrn a.sp2026-btn-primary {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    margin-bottom: 12px;
}

.courseFicheCtnr .inscriptionCtrn input[type="button"].sp2026-btn-disabled {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    margin-bottom: 12px;
}

.courseFicheCtnr .detailInscriptions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    line-height: 1.5;
}

.courseFicheCtnr .detailLine {
    display: grid;
    grid-template-columns: minmax(160px, 260px) 1fr;
    align-items: start;
    column-gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(6, 105, 173, 0.16);
}

.courseFicheCtnr .detailLine:last-child {
    border-bottom: 0;
}

.courseFicheCtnr .courseCtnr .lblCourse,
.courseFicheCtnr .inscriptionCtrn .lblCourse {
    font-size: 0.92rem;
    color: #44607a;
    font-weight: 700;
    white-space: normal;
}

.courseFicheCtnr .courseCtnr .lblCourse::before,
.courseFicheCtnr .inscriptionCtrn .lblCourse::before {
    width: 22px;
    height: 22px;
    margin-right: 8px;
    vertical-align: -5px;
}

.courseFicheCtnr .lblCourse.lbl-lieudepart::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3Cpath fill='black' d='M3 18l4-1.2L11 18l4-1.2 6 1.9V21l-6-1.9L11 20.3 7 19.1 3 20.3z'/%3E%3C/svg%3E");
}

.courseFicheCtnr .lblCourse.lbl-arrivee::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 20h2V4H5v16zm3-12h8l-1.3 2L16 12l-1.3 2L16 16H8V8z'/%3E%3C/svg%3E");
}

.courseFicheCtnr .lblCourse.lbl-participants::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 11a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm10 0a3 3 0 1 0-3-3 3 3 0 0 0 3 3zM2 20v-1c0-2.2 2.7-4 5-4s5 1.8 5 4v1zm10 0v-1c0-1 .4-1.9 1.1-2.6.9-.9 2.4-1.4 3.9-1.4 2.3 0 5 1.8 5 4v1z'/%3E%3C/svg%3E");
}

/*
.courseFicheCtnr .lblCourse.lbl-equipe::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M1.5 10l2.5-2.5L7 10l-2.5 2.5L1.5 10zm15 0L19 7.5l2.5 2.5-2.5 2.5L16.5 10zM7 9l2.1-2.1c.6-.6 1.6-.6 2.2 0L13 8.6l1.7-1.7c.6-.6 1.6-.6 2.2 0L19 9l-2.2 2.2-.8-.8-1.6 1.6c-.6.6-1.6.6-2.2 0l-1.6-1.6-1.6 1.6L7 10.1V9zm2.1 4.1l1.1-1.1 1.1 1.1a1 1 0 0 0 1.4 0l1.1-1.1 1.1 1.1a1 1 0 0 0 1.4 0l.8-.8 1.4 1.4-1.5 1.5a1 1 0 0 1-1.4 0l-1.1-1.1-1.1 1.1a1 1 0 0 1-1.4 0l-1.1-1.1-1.1 1.1a1 1 0 0 1-1.4 0L6 13.6l1.4-1.4.8.9a1 1 0 0 0 1.4 0z'/%3E%3C/svg%3E");
}
*/

.courseFicheCtnr .courseCtnr .valCourse,
.courseFicheCtnr .inscriptionCtrn .valCourse {
    color: #163f63;
    font-weight: 500;
}

.courseFicheCtnr .courseCtnr .lblCourse:hover::after,
.courseFicheCtnr .inscriptionCtrn .lblCourse:hover::after {
    content: none;
}

.courseFicheCtnr .detailIcons {
    margin-top: 8px;
}

/* Style spécial pour l'organisateur avec logo */
.courseFicheCtnr .detailLine-organisateur .valCourse {
    display: flex;
    align-items: center;
    gap: 15px;
}

.courseFicheCtnr .logo-organisateur {
    width: auto;
    max-height: 100px;
    object-fit: contain;
    flex-shrink: 0;
    border: 1px solid #e0e6ec;
    border-radius: 4px;
    /*background: #ffffff;*/
}

.courseFicheCtnr .nom-organisateur {
    flex: 1;
    min-width: 0;
}

.courseFicheCtnr .detailIcons img {
    margin-right: 8px;
    vertical-align: middle;
}

.courseFicheCtnr .detailFavori {
    margin-top: 8px;
    font-weight: 600;
}

.courseFicheCtnr .detailAlert {
    color: #a81c23;
    font-weight: 700;
}

.courseFicheCtnr .inscriptionCtrn form {
    display: block;
    margin: 0;
    padding: 0;
}

.courseFicheCtnr .inscriptionCtrn form input[type="hidden"] {
    display: none;
}

/* Adaptation progressive pour largeurs moyennes */
@media screen and (max-width: 1200px) {
    .courseFicheCtnr {
        column-gap: 24px;
    }
    
    .courseFicheCtnr .detailLine {
        grid-template-columns: minmax(140px, 220px) 1fr;
    }
    
    .courseFicheCtnr .courseCtnr .lblCourse,
    .courseFicheCtnr .inscriptionCtrn .lblCourse {
        font-size: 0.88rem;
    }
    
    .courseFicheCtnr .courseCtnr .lblCourse::before,
    .courseFicheCtnr .inscriptionCtrn .lblCourse::before {
        width: 20px;
        height: 20px;
        margin-right: 6px;
    }
}

@media screen and (max-width: 1024px) {
    .courseFicheCtnr {
        grid-template-columns: 380px minmax(0, 1fr);
        column-gap: 20px;
    }
    
    .courseFicheCtnr .afficheCtnr img {
        max-width: 380px;
    }
    
    .courseFicheCtnr .detailLine {
        grid-template-columns: minmax(120px, 200px) 1fr;
        column-gap: 8px;
    }
    
    .courseFicheCtnr .courseCtnr .lblCourse,
    .courseFicheCtnr .inscriptionCtrn .lblCourse {
        font-size: 0.85rem;
    }
    
    .courseFicheCtnr .courseCtnr .lblCourse::before,
    .courseFicheCtnr .inscriptionCtrn .lblCourse::before {
        width: 18px;
        height: 18px;
        margin-right: 5px;
    }
    
    .courseFicheCtnr .h2-in-col {
        font-size: 1.4rem;
    }
}

@media screen and (max-width:900px) {
    .courseFicheCtnr {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 16px;
    }

    .sp2026-course-content .fullwidth {
        padding: 0 4%;
    }

    .courseFicheCtnr .afficheCtnr,
    .courseFicheCtnr .courseCtnr,
    .courseFicheCtnr .inscriptionCtrn {
        grid-column: 1;
        grid-row: auto;
    }

    .courseFicheCtnr .afficheCtnr {
        justify-content: center;
    }

    .courseFicheCtnr .detailLine {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }
    
    .courseFicheCtnr .h2-in-col {
        font-size: 1.3rem;
        margin-top: 12px;
    }
}

@media screen and (max-width:414px) {}

@media screen and (max-width:412px) {}

/*spécifiquement pour la hauteur réduite */
@media (max-height: 400px) {
  .sp2026-slide {
    min-height: calc(100vh / 3);
  }
}

/* Styles pour les sections de la page détail de course */

/* Style de base pour tous les h2 des sections course */
.sp2026-content h2 {
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0 auto 24px auto;
    text-align: center;
}

/* Section fiche - fond blanc par défaut */
.section-fiche {
    /*background: #ffffff;*/
    padding: 32px 0;
}

/* Section présentation - fond bleu très clair */
.section-presentation {
    background: #f0f6fb;
    padding: 40px 0;
}

.section-presentation h2 {
    color: #114b7a;
}

.section-presentation .courseDescription {
    color: #2c3e50;
}

/* Galerie de plans */
.section-presentation h3 {
    color: #114b7a;
    font-size: 1.25rem;
    margin-top: 28px;
    margin-bottom: 16px;
}

.plansGallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.plansGallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #cae6f8;
    transition: transform .2s ease, box-shadow .2s ease;
}

.plansGallery img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(15, 139, 216, 0.2);
    cursor: pointer;
}

/* Modale fullscreen pour les plans */
.plansModal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plansModal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 0;
}

.plansModal-content {
    position: relative;
    z-index: 1;
    max-width: 95vw;
    max-height: 95vh;
    overflow: auto;
}

.plansModal-content img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.plansModal-close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    font-size: 32px;
    color: #333;
    cursor: pointer;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}

.plansModal-close:hover {
    background: #fff;
}

/* Parcours - iframe */
.coursParcours {
    margin-bottom: 24px;
}

/* Section partenaires - fond blanc */
.section-partenaires {
    background: #ffffff;
    padding: 40px 0;
}

.section-partenaires h2 {
    color: #114b7a;
}

/* Section dossards - fond bleu foncé avec dégradé */
.section-dossards {
    background: linear-gradient(135deg, #0669ad 0%, #114b7a 100%);
    padding: 40px 0;
}

.section-dossards h2 {
    color: #ffffff;
}

.section-dossards .courseInfosPart {
    color: #f0f6fb;
}

.section-dossards .courseInfosPart p,
.section-dossards .courseInfosPart div,
.section-dossards .courseInfosPart span {
    color: #f0f6fb;
}

.section-dossards .courseInfosPart a {
    color: #99cbe9;
    text-decoration: underline;
}

.section-dossards .courseInfosPart a:hover {
    color: #cae6f8;
}

.section-dossards .courseInfosPart strong,
.section-dossards .courseInfosPart b {
    color: #ffffff;
}

/* Section modalités - fond gris clair */
.section-modalites {
    background: #f9fafb;
    padding: 40px 0;
}

.section-modalites h2 {
    color: #114b7a;
}

.courseDescription {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

.partnersGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 100px);
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.partnersGrid img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border: 1px solid #e0e6ec;
    border-radius: 4px;
    background: #f9fafb;
    padding: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.partnersGrid img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.inscriptionSection {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.inscriptionCtnr {
    padding: 16px;
    background: #f0f6fb;
    border-radius: 8px;
    border: 1px solid #cae6f8;
}

/* Bouton inscription en bas de section - mise en valeur */
.inscriptionCtnr-bottom {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #e8f5ff 0%, #cae6f8 100%);
    border: 2px solid #0f8bd8;
    text-align: center;
}

.inscriptionCtnr form {
    display: inline;
}

.inscriptionCtnr input[type="submit"],
.inscriptionCtnr input[type="button"] {
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.inscriptionActionSimple {
    margin-top: 20px;
    text-align: center;
}

.inscriptionActionSimple form {
    display: inline-block;
}

.inscriptionActionSimple input[type="submit"].sp2026-btn-primary,
.inscriptionActionSimple input[type="button"].sp2026-btn-disabled {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    min-height: 46px;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
}

.inscriptionActionSimple input[type="submit"].sp2026-btn-primary {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.inscriptionActionSimple input[type="submit"].sp2026-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(246, 209, 95, .35);
    filter: brightness(1.02);
}

.inscriptionActionSimple input[type="button"].sp2026-btn-disabled {
    cursor: not-allowed;
}

.inscriptionInfos {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inscriptionInfos .lblCourse {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    color: #114b7a;
}

.inscriptionInfos .lblCourse::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='black'/%3E%3C/svg%3E");
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: -3px;
    background-color: #0f8bd8;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: var(--sp-icon);
    mask-image: var(--sp-icon);
}

.inscriptionInfos .lblCourse.lbl-participants::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11a3 3 0 1 0-2.9-3.9A3 3 0 0 0 16 11zM8 12a3 3 0 1 0-2.9-3.9A3 3 0 0 0 8 12zm0 2c-2.8 0-5 1.3-5 3v2h10v-2c0-1.7-2.2-3-5-3zm8 0c-1 0-1.9.2-2.7.6 1 .8 1.7 1.9 1.7 3.4v1H21v-1c0-2.2-2.2-4-5-4z'/%3E%3C/svg%3E");
}

.inscriptionInfos .lblCourse.lbl-inscriptions::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 2h2v3h-2zM8 4h8v2H8zM12 6a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm1 8.4l3.2 1.8-1 1.7-4.2-2.5V9h2z'/%3E%3C/svg%3E");
}

.inscriptionInfos .lblCourse.lbl-restrictions::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l10 18H2L12 2zm0 5.5a1.2 1.2 0 0 0-1.2 1.2v5.1a1.2 1.2 0 1 0 2.4 0V8.7A1.2 1.2 0 0 0 12 7.5zm0 10.2a1.4 1.4 0 1 0 0-2.8 1.4 1.4 0 0 0 0 2.8z'/%3E%3C/svg%3E");
}

.inscriptionInfos .lblCourse.lbl-accessibilite::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM11 7c-2.2 0-4 .9-4 2v1h3v3.5L7.5 21h2.2l1.8-5 1.8 5h2.2L13 13.5V10h3V9c0-1.1-1.8-2-4-2z'/%3E%3C/svg%3E");
}
.inscriptionInfos .lblCourse.lbl-equipe::before {
    --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 10l3-3 3 3-3 3-3-3zm14 0 3-3 3 3-3 3-3-3zM8 9l3-2 2 2 2-2 3 2-3.4 3.4a2 2 0 0 1-2.8 0L8 9zm1 4l2 2a1 1 0 0 0 1.4 0l.6-.6.6.6a1 1 0 0 0 1.4 0l2-2 2 2-2.2 2.2a1 1 0 0 1-1.4 0l-.4-.4-.4.4a1 1 0 0 1-1.4 0l-.6-.6-.6.6a1 1 0 0 1-1.4 0L7 15l2-2z'/%3E%3C/svg%3E");
}
.inscriptionInfos .valCourse{
    vertical-align: top;
    margin-left: 5px;
}

.epreuveFiche--mini .valCourse {
    vertical-align: top;
    margin-left: 5px;
}

.inscriptionInfos .detailLine {
    padding: 8px 0;
    border-bottom: 1px solid #e0e6ec;
}

.inscriptionInfos .detailLine:last-child {
    border-bottom: none;
}

.tariffSection {
    margin-top: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}

.tariffSection h3 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #114b7a;
    font-size: 1.1rem;
}

.tariffSection table.tabTarifs {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.tariffSection table.tabTarifs th,
.tariffSection table.tabTarifs td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #e0e6ec;
}

.tariffSection table.tabTarifs th {
    background: #e8f5ff;
    font-weight: 600;
    color: #114b7a;
}

.tariffSection table.tabTarifs tbody tr:hover {
    background: #f0f6fb;
}

.inscritsList {
    margin-top: 12px;
    padding: 0;
    text-align: center;
    background: transparent;
    border-radius: 10px;
    border: none;
}

.inscritsList .lien {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    color: #0b4a78;
    text-decoration: none;
    font-weight: 700;
    background: linear-gradient(135deg, #e8f5ff 0%, #d8ecfb 100%);
    border: 1px solid #b7d9f1;
    border-radius: 10px;
    cursor: pointer;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.inscritsList .lien:hover {
    color: #063f67;
    background: linear-gradient(135deg, #d7edff 0%, #c4e2f8 100%);
    box-shadow: 0 8px 22px rgba(15, 139, 216, 0.2);
    transform: translateY(-1px);
}

.inscritsList .lien::before {
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: #0f8bd8;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11a3 3 0 1 0-2.9-3.9A3 3 0 0 0 16 11zM8 12a3 3 0 1 0-2.9-3.9A3 3 0 0 0 8 12zm0 2c-2.8 0-5 1.3-5 3v2h10v-2c0-1.7-2.2-3-5-3zm8 0c-1 0-1.9.2-2.7.6 1 .8 1.7 1.9 1.7 3.4v1H21v-1c0-2.2-2.2-4-5-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11a3 3 0 1 0-2.9-3.9A3 3 0 0 0 16 11zM8 12a3 3 0 1 0-2.9-3.9A3 3 0 0 0 8 12zm0 2c-2.8 0-5 1.3-5 3v2h10v-2c0-1.7-2.2-3-5-3zm8 0c-1 0-1.9.2-2.7.6 1 .8 1.7 1.9 1.7 3.4v1H21v-1c0-2.2-2.2-4-5-4z'/%3E%3C/svg%3E");
}

.reglementSection {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #d7e4ef;
    border-radius: 10px;
    background: #ffffff;
}

.reglementSection h2,
.reglementSection h3 {
    margin: 0 0 10px 0;
    text-align: left;
    color: #114b7a;
    font-size: 1.25rem;
}

.reglementPreview {
    margin: 0 0 12px 0;
    color: #2f4358;
    line-height: 1.5;
}

.reglementOpen {
    display: inline-flex;
}

.reglementModal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 10000;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    overflow-x: hidden;
}

.reglementModal.is-open {
    display: flex;
}

.reglementModal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

.reglementModal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 920px;
    max-height: none;
    margin: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0,0,0,.3);
    padding: 18px 18px 20px;
}

.reglementModal-close {
    position: sticky;
    top: 0;
    float: right;
    font-size: 1.8rem;
    line-height: 1;
    text-decoration: none;
    color: #345;
    background: #fff;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    padding: 2px 10px;
}

.reglementModal-content h3 {
    margin: 4px 0 12px;
    color: #114b7a;
}

.reglementModal-body {
    color: #23384d;
}

/* Grille de fichiers - moderne avec cards */
.fichiersList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.fichierCard {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: #114b7a;
    transition: all .2s ease;
}

.fichierCard:hover {
    background: #f0f6fb;
    border-color: #0f8bd8;
    box-shadow: 0 8px 16px rgba(15, 139, 216, 0.15);
    transform: translateY(-2px);
}

.fichierIcon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8f5ff, #cae6f8);
    border-radius: 8px;
}

.fichierIcon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.fichierInfo {
    flex: 1;
}

.fichierLabel {
    font-weight: 700;
    font-size: 0.95rem;
    color: #114b7a;
    margin-bottom: 4px;
    word-break: break-word;
}

.fichierType {
    font-size: 0.85rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Modalités de remboursement */
.remboursementSection {
    margin-top: 24px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.remboursementSection h3 {
    margin-top: 0;
    margin-bottom: 16px;
    color: #114b7a;
    font-size: 1.25rem;
}

.remboursementContent {
    color: #374151;
    line-height: 1.6;
}

.remboursementContent p,
.remboursementContent div,
.remboursementContent ul,
.remboursementContent ol {
    margin-bottom: 12px;
}

.remboursementContent ul,
.remboursementContent ol {
    margin-left: 24px;
}

.remboursementContent li {
    margin-bottom: 8px;
}

/* Suppression du min-height du body dans les iframes (smoothbox) */
#TB_iframeContent body,
iframe body,
body.sp2026-iframe-body {
    min-height: auto !important;
    height: auto;
}

/* Correctif final fiches résultats : priorité sur anciens media queries (.toHide/.toHideFirst) */
@media (max-width: 1100px) {
    /* En mode fiches: masquer les libellés de colonnes, garder le titre hors classement */
    #resList.inscList.resultat tr.cols-head,
    #resList.inscList.resultat tr.hc-cols {
        display: none !important;
    }

    /* Aucun changement de fond au survol en mobile */
    #resList.inscList.resultat tbody tr:hover,
    #resList.inscList.resultat tr.cat-1:hover,
    #resList.inscList.resultat tr.cat-2:hover,
    #resList.inscList.resultat tr.cat-3:hover,
    #resList.inscList.resultat tr.rose:hover {
        background: transparent !important;
        box-shadow: 0 4px 12px rgba(12, 42, 68, 0.08) !important;
    }

    #resList.inscList.resultat td:nth-child(1),
    #resList.inscList.resultat td:nth-child(2),
    #resList.inscList.resultat td:nth-child(3),
    #resList.inscList.resultat td:nth-child(6),
    #resList.inscList.resultat td:nth-child(8),
    #resList.inscList.resultat td:nth-child(9),
    #resList.inscList.resultat td:nth-child(10),
    #resList.inscList.resultat td:nth-child(13) {
        display: block !important;
        visibility: visible !important;
    }

    #resList.inscList.resultat td:nth-child(4),
    #resList.inscList.resultat td:nth-child(5),
    #resList.inscList.resultat td:nth-child(7),
    #resList.inscList.resultat td:nth-child(11),
    #resList.inscList.resultat td:nth-child(12) {
        display: none !important;
        visibility: hidden !important;
    }

    #resList.inscList.resultat td:nth-child(6) {
        display: flex !important;
    }

    #resList.inscList.resultat td:nth-child(8) {
        display: flex !important;
    }

    #resList.inscList.resultat td:nth-child(3),
    #resList.inscList.resultat td:nth-child(3) p,
    #resList.inscList.resultat td:nth-child(9),
    #resList.inscList.resultat td:nth-child(10) {
        text-align: center !important;
    }

    #resList.inscList.resultat tr.no-lic-team td:nth-child(9),
    #resList.inscList.resultat tr.no-lic-team td:nth-child(10) {
        display: none !important;
    }

    /* Scratch lisible hors podium */
    #resList.inscList.resultat td:nth-child(1) .rank {
        color: #143a5a !important;
        background: #ffffff !important;
        border: 2px solid #8fa5bd !important;
    }

    /* Restaurer les couleurs scratch 1/2/3 */
    #resList.inscList.resultat tr[data-scratch="1"] td:nth-child(1) .rank {
        background: linear-gradient(135deg, #ffd700, #ffed4e) !important;
        border-color: #d4af37 !important;
        color: #333 !important;
    }

    #resList.inscList.resultat tr[data-scratch="2"] td:nth-child(1) .rank {
        background: linear-gradient(135deg, #e8e8e8, #f5f5f5) !important;
        border-color: #c0c0c0 !important;
        color: #333 !important;
    }

    #resList.inscList.resultat tr[data-scratch="3"] td:nth-child(1) .rank {
        background: linear-gradient(135deg, #d4914b, #e6b373) !important;
        border-color: #cd7f32 !important;
        color: #fff !important;
    }

    /* Ligne classements: numéro encadré */
    #resList.inscList.resultat td:nth-child(6) .rank-value,
    #resList.inscList.resultat td:nth-child(8) .rank-value {
        display: inline-block !important;
        padding: 2px 8px;
        border-radius: 6px;
        background: transparent;
        border: 2px solid #8fa5bd;
        color: #143a5a;
        font-weight: 700;
        line-height: 1.1;
        -webkit-text-stroke: 0 !important;
    }

    #resList.inscList.resultat td:nth-child(6)[data-rank="1"] .rank-value,
    #resList.inscList.resultat tr.cat-1 td:nth-child(8) .rank-value {
        background: linear-gradient(135deg, #ffd700, #ffed4e);
        border: 2px solid #d4af37;
        color: #333;
    }

    #resList.inscList.resultat td:nth-child(6)[data-rank="2"] .rank-value,
    #resList.inscList.resultat tr.cat-2 td:nth-child(8) .rank-value {
        background: linear-gradient(135deg, #e8e8e8, #f5f5f5);
        border: 2px solid #c0c0c0;
        color: #333;
    }

    #resList.inscList.resultat td:nth-child(6)[data-rank="3"] .rank-value,
    #resList.inscList.resultat tr.cat-3 td:nth-child(8) .rank-value {
        background: linear-gradient(135deg, #d4914b, #e6b373);
        border: 2px solid #cd7f32;
        color: #fff;
    }

    /* Hors classement (structure différente : 10 cellules DOM à cause des colspan) */
    #resList.inscList.resultat tr.hc-row td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        text-align: center;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #e8ecf4;
        border-bottom: none !important;
        height: auto !important;
        align-self: stretch;
        box-sizing: border-box;
    }

    #resList.inscList.resultat tr.hc-row td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        display: flex !important;
        visibility: visible !important;
        text-align: center !important;
        padding: 12px;
        border-bottom: 1px solid #e8ecf4;
        background-color: transparent;
        height: auto !important;
        min-height: 0;
        align-self: stretch;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    #resList.inscList.resultat tr.hc-row td:nth-child(2) p {
        text-align: center !important;
        margin: 0;
        line-height: 1.35;
        font-weight: 400;
    }

    #resList.inscList.resultat tr.hc-row td:nth-child(2) p strong {
        font-weight: 700;
    }

    #resList.inscList.resultat tr.hc-row td:nth-child(2) p .hc-meta {
        font-weight: 400;
    }

    #resList.inscList.resultat tr.hc-row td:nth-child(3),
    #resList.inscList.resultat tr.hc-row td:nth-child(4),
    #resList.inscList.resultat tr.hc-row td:nth-child(5),
    #resList.inscList.resultat tr.hc-row td:nth-child(6),
    #resList.inscList.resultat tr.hc-row td:nth-child(7),
    #resList.inscList.resultat tr.hc-row td:nth-child(8),
    #resList.inscList.resultat tr.hc-row td:nth-child(9) {
        display: none !important;
        visibility: hidden !important;
    }

    #resList.inscList.resultat tr.hc-row td:nth-child(10) {
        grid-column: 1 / -1;
        grid-row: 2;
        display: block !important;
        visibility: visible !important;
        text-align: center !important;
        background-color: rgba(12, 42, 68, 0.05);
    }

    #resList.inscList.resultat tr.hc-row td:nth-child(10)::before {
        content: "Dossard : ";
        font-weight: 700;
        font-size: 12px;
        color: #1e3a5f;
        margin-right: 6px;
    }

    #resList.inscList.resultat tr.hc-row.no-lic-team td:nth-child(10) {
        grid-row: 2;
    }
}

@media screen and (max-width:384px) {}

@media screen and (max-width:375px) {}

@media screen and (max-width:360px) {}

@media screen and (max-width:320px) {}

@media screen and (max-width:300px) {}