:root{
  --jsssc-red:#c8102e;
  --jsssc-red-dark:#a10d24;
  --jsssc-dark:#151515;
  --jsssc-text:#252525;
  --jsssc-grey:#666;
  --jsssc-light:#f7f7f7;
  --jsssc-white:#fff;
  --jsssc-border:#e9e9e9;
}

*{box-sizing:border-box;}
body{margin:0;}

.jsssc-page{
  font-family:Arial, Helvetica, sans-serif;
  color:var(--jsssc-text);
  line-height:1.6;
  background:#fff;
}

.jsssc-container{
  width:min(1180px,92%);
  margin:auto;
}

.jsssc-section{padding:80px 0;}
.jsssc-section-alt{background:var(--jsssc-light);}

.jsssc-hero{
  min-height:78vh;
  display:flex;
  align-items:center;
  color:white;
  background:
    linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.30)),
    url("https://jssscathle.fr/wp-content/uploads/2026/05/16052026-sans-titre-760.jpg") center/cover no-repeat;
  border-radius:0 0 36px 36px;
}

.jsssc-hero h1{
  font-size:clamp(2.8rem,6vw,5.5rem);
  line-height:1;
  margin:0 0 20px;
  font-weight:800;
  letter-spacing:-.04em;
}

.jsssc-hero p{
  max-width:720px;
  font-size:1.15rem;
  margin:0 0 30px;
}

.jsssc-badges,.jsssc-btns{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.jsssc-badges{margin-bottom:24px;}

.jsssc-badge{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  color:white;
  padding:8px 14px;
  border-radius:999px;
  font-size:.9rem;
  backdrop-filter:blur(8px);
}

.jsssc-btn,.jsssc-link-btn{
  display:inline-block;
  padding:14px 24px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none!important;
  transition:.25s ease;
}

.jsssc-btn:hover,.jsssc-card:hover{
  transform:translateY(-4px);
}

.jsssc-btn-primary,.jsssc-link-btn{
  background:var(--jsssc-red);
  color:white!important;
}

.jsssc-btn-primary:hover,.jsssc-link-btn:hover{
  background:var(--jsssc-red-dark);
}

.jsssc-btn-light{
  background:white;
  color:var(--jsssc-dark)!important;
}

.jsssc-link{
  color:var(--jsssc-red);
  font-weight:700;
  text-decoration:none;
}

.jsssc-title{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:42px;
}

.jsssc-title h2{
  margin:0;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
  letter-spacing:-.03em;
  color:var(--jsssc-dark);
}

.jsssc-title p{
  margin:0;
  color:var(--jsssc-grey);
  max-width:560px;
}

.jsssc-grid,
.jsssc-values,
.jsssc-staff-grid,
.jsssc-archive-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.jsssc-card,
.jsssc-value,
.jsssc-archive-card,
.jsssc-staff-card,
.jsssc-training-card{
  background:white;
  border:1px solid var(--jsssc-border);
  border-radius:24px;
  padding:28px;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  transition:.25s ease;
}

.jsssc-card h3,
.jsssc-value h3,
.jsssc-archive-card h3,
.jsssc-training-card h3{
  margin:0 0 12px;
  font-size:1.35rem;
  color:var(--jsssc-dark);
}

.jsssc-card p,
.jsssc-card li,
.jsssc-value p,
.jsssc-archive-card p,
.jsssc-training-card p{
  color:var(--jsssc-grey);
}

.jsssc-focus,
.jsssc-feature,
.jsssc-info-box,
.jsssc-quote{
  background:var(--jsssc-dark);
  color:white;
  border-radius:28px;
  padding:42px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:34px;
  align-items:center;
}

.jsssc-focus h2,
.jsssc-feature h2,
.jsssc-info-box h2,
.jsssc-quote h2{
  margin:0;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
  letter-spacing:-.03em;
}

.jsssc-focus p,
.jsssc-feature p,
.jsssc-info-box p,
.jsssc-quote p{
  margin:0;
  color:#ddd;
}

.jsssc-feature-image,
.jsssc-photo-box{
  min-height:360px;
  border-radius:24px;
  background:
    linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.28)),
    url("https://jssscathle.fr/wp-content/uploads/2026/05/32-sans-titre-677.jpg") center/cover no-repeat;
}

.jsssc-info-list{
  display:grid;
  gap:16px;
}

.jsssc-info-item,
.jsssc-contact-item{
  border-left:5px solid var(--jsssc-red);
  background:white;
  padding:20px;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.04);
}

.jsssc-gazette-info{
  background:var(--jsssc-light);
  border-radius:28px;
  padding:34px;
  border:1px solid var(--jsssc-border);
}

.jsssc-training-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

.jsssc-coach{
  color:var(--jsssc-red);
  font-weight:800;
  margin-bottom:18px;
}

.jsssc-slot{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-top:1px solid var(--jsssc-border);
}

.jsssc-day{font-weight:800;color:var(--jsssc-dark);}
.jsssc-hour{color:var(--jsssc-grey);text-align:right;}

.jsssc-steps,.jsssc-timeline,.jsssc-gallery-list,.jsssc-year-list{
  display:grid;
  gap:18px;
}

.jsssc-step,
.jsssc-timeline-item{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:22px;
  align-items:start;
  background:white;
  border:1px solid var(--jsssc-border);
  border-radius:22px;
  padding:22px;
  box-shadow:0 8px 24px rgba(0,0,0,.04);
}

.jsssc-number,
.jsssc-year{
  background:var(--jsssc-red);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  border-radius:18px;
  padding:14px;
}

.jsssc-table-wrap{
  overflow-x:auto;
  background:white;
  border-radius:24px;
  border:1px solid var(--jsssc-border);
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.jsssc-table,
.jsssc-record-table{
  width:100%;
  border-collapse:collapse;
  min-width:650px;
}

.jsssc-record-table{min-width:820px;}

.jsssc-table th,
.jsssc-record-table th{
  background:var(--jsssc-dark);
  color:white;
  text-align:left;
  padding:16px 18px;
}

.jsssc-table td,
.jsssc-record-table td{
  padding:15px 18px;
  border-top:1px solid var(--jsssc-border);
  vertical-align:top;
}

.jsssc-table tr:nth-child(even) td,
.jsssc-record-table tr:nth-child(even) td{
  background:#fafafa;
}

.jsssc-price,
.jsssc-record-table td:first-child{
  font-weight:800;
  color:var(--jsssc-red);
}

.jsssc-note{
  margin-top:18px;
  color:var(--jsssc-grey);
  font-size:.95rem;
}

.jsssc-story,
.jsssc-contact-box{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:42px;
  align-items:center;
}

.jsssc-contact-panel{
  background:var(--jsssc-dark);
  color:white;
  border-radius:28px;
  padding:42px;
}

.jsssc-contact-card{
  background:white;
  border-radius:28px;
  padding:34px;
  border:1px solid var(--jsssc-border);
  box-shadow:0 14px 34px rgba(0,0,0,.06);
  max-width:520px;
}

.jsssc-contact-badge,
.jsssc-coach-tag,
.jsssc-dirigeant-role,
.jsssc-gallery-tag{
  display:inline-block;
  background:rgba(200,16,46,.1);
  color:var(--jsssc-red);
  font-weight:800;
  font-size:.82rem;
  padding:7px 12px;
  border-radius:999px;
  margin-bottom:14px;
}

.jsssc-contact-link,
.jsssc-staff-contacts a,
.jsssc-coach-contact a,
.jsssc-year-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  background:var(--jsssc-light);
  color:var(--jsssc-dark)!important;
  text-decoration:none!important;
  font-weight:700;
  transition:.25s ease;
}

.jsssc-contact-link:hover,
.jsssc-staff-contacts a:hover,
.jsssc-coach-contact a:hover,
.jsssc-year-link:hover{
  background:var(--jsssc-red);
  color:white!important;
  transform:translateX(4px);
}

.jsssc-map{
  min-height:360px;
  border-radius:28px;
  background:
    linear-gradient(rgba(200,16,46,.14),rgba(0,0,0,.28)),
    url("https://jssscathle.fr/wp-content/uploads/2026/05/16052026-sans-titre-760.jpg") center/cover no-repeat;
  box-shadow:0 20px 40px rgba(0,0,0,.12);
  display:flex;
  align-items:flex-end;
  padding:28px;
  color:white;
}

.jsssc-map div{
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(8px);
  padding:20px;
  border-radius:20px;
}

.jsssc-coach-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.jsssc-dirigeants-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.jsssc-coach-card,
.jsssc-dirigeant-card{
  background:white;
  border:1px solid var(--jsssc-border);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  transition:.25s ease;
}

.jsssc-coach-card:hover,
.jsssc-dirigeant-card:hover{
  transform:translateY(-5px);
}

.jsssc-coach-photo,
.jsssc-dirigeant-photo{
  height:320px;
  background:#ddd center/cover no-repeat;
  position:relative;
}

.jsssc-coach-content,
.jsssc-dirigeant-content{
  padding:28px;
}

.jsssc-coach-role{
  margin:0 0 18px;
  color:var(--jsssc-grey);
  font-weight:700;
}

.jsssc-gallery-item{
  display:grid;
  grid-template-columns:240px 1fr auto;
  gap:24px;
  align-items:center;
  background:white;
  border:1px solid var(--jsssc-border);
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  transition:.25s ease;
}

.jsssc-gallery-img{
  min-height:180px;
  height:100%;
  background:#ddd center/cover no-repeat;
}

.jsssc-gallery-content{padding:26px 0;}
.jsssc-gallery-action{padding-right:24px;}

.jsssc-calendar-wrap{
  overflow:hidden;
  border-radius:30px;
  box-shadow:0 18px 45px rgba(0,0,0,.12);
  background:white;
  border:1px solid var(--jsssc-border);
}

.jsssc-calendar-wrap iframe{
  display:block;
  width:100%;
  min-height:720px;
}

.jsssc-section .jsssc-nav{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.jsssc-section .jsssc-nav a{
  background:white;
  border:1px solid var(--jsssc-border);
  color:var(--jsssc-dark)!important;
  text-decoration:none!important;
  font-weight:700;
  padding:12px 18px;
  border-radius:999px;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
}

.jsssc-section .jsssc-nav a:hover{
  background:var(--jsssc-red);
  color:white!important;
}

.jsssc-record-block{margin-bottom:60px;}

@media(max-width:1100px){
  .jsssc-dirigeants-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:1024px){
  .jsssc-grid,
  .jsssc-training-grid,
  .jsssc-story,
  .jsssc-quote,
  .jsssc-focus,
  .jsssc-feature,
  .jsssc-info-box,
  .jsssc-contact-box,
  .jsssc-coach-grid,
  .jsssc-values,
  .jsssc-archive-grid,
  .jsssc-staff-grid{
    grid-template-columns:1fr;
  }

  .jsssc-title{
    flex-direction:column;
    align-items:flex-start;
  }

  .jsssc-gallery-item{
    grid-template-columns:1fr;
  }

  .jsssc-gallery-img{min-height:230px;}
  .jsssc-gallery-content{padding:0 24px;}
  .jsssc-gallery-action{padding:0 24px 24px;}

  .jsssc-hero{min-height:88vh;}
}

@media(max-width:700px){
  .jsssc-section{padding:60px 0;}

  .jsssc-hero h1{font-size:2.8rem;}

  .jsssc-step,
  .jsssc-timeline-item{
    grid-template-columns:1fr;
  }

  .jsssc-slot{
    flex-direction:column;
    gap:4px;
  }

  .jsssc-hour{text-align:left;}

  .jsssc-focus,
  .jsssc-feature,
  .jsssc-info-box,
  .jsssc-quote,
  .jsssc-contact-panel{
    padding:28px;
  }

  .jsssc-dirigeants-grid{grid-template-columns:1fr;}

  .jsssc-coach-photo,
  .jsssc-dirigeant-photo{
    height:280px;
  }

  .jsssc-calendar-wrap iframe{
    min-height:620px;
  }
}

/* MENU */

.jsssc-top-menu{
  position:sticky;
  top:0;
  z-index:9999;
  background:rgba(21,21,21,.96);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}

.jsssc-menu-inner{
  width:min(1120px,92%);
  margin:auto;
  padding:14px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.jsssc-logo{
  color:white!important;
  text-decoration:none!important;
  font-size:1.1rem;
  font-weight:900;
  white-space:nowrap;
}

.jsssc-logo span{color:#c8102e;}

.jsssc-top-menu .jsssc-nav{
  display:flex;
  align-items:center;
  gap:18px;
}

.jsssc-top-menu .jsssc-nav a,
.jsssc-top-menu .jsssc-dropbtn{
  color:white!important;
  text-decoration:none!important;
  font-weight:700;
  font-size:.92rem;
  background:none;
  border:0;
  cursor:pointer;
  padding:10px 0;
  font-family:inherit;
}

.jsssc-top-menu .jsssc-nav a:hover,
.jsssc-top-menu .jsssc-dropbtn:hover{
  color:#ff3b57!important;
}

.jsssc-top-menu .jsssc-dropdown{position:relative;}

.jsssc-top-menu .jsssc-dropdown-content{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  background:white;
  border-radius:18px;
  padding:10px;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}

.jsssc-top-menu .jsssc-dropdown-content a{
  display:block;
  color:#151515!important;
  padding:10px 12px!important;
  border-radius:12px;
  text-decoration:none!important;
}

.jsssc-top-menu .jsssc-dropdown-content a:hover{
  background:#f7f7f7;
  color:#c8102e!important;
}

.jsssc-top-menu .jsssc-dropdown:hover .jsssc-dropdown-content{
  display:block;
}

.jsssc-menu-btn{
  background:#c8102e!important;
  color:white!important;
  padding:10px 16px!important;
  border-radius:999px;
}

.jsssc-menu-btn:hover{
  background:white!important;
  color:#c8102e!important;
}

.jsssc-burger{
  display:none;
  background:#c8102e;
  color:white;
  border:0;
  border-radius:12px;
  padding:10px 14px;
  font-size:1.3rem;
  cursor:pointer;
}

@media(max-width:1024px){
  .jsssc-menu-inner{
    flex-wrap:wrap;
  }

  .jsssc-burger{
    display:block;
  }

  .jsssc-top-menu .jsssc-nav{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    padding:12px 0 22px;
    max-height:calc(100vh - 80px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .jsssc-top-menu .jsssc-nav.active{
    display:flex;
  }

  .jsssc-top-menu .jsssc-dropdown,
  .jsssc-top-menu .jsssc-dropbtn{
    width:100%;
  }

  .jsssc-top-menu .jsssc-dropbtn{
    text-align:left;
  }

  .jsssc-top-menu .jsssc-dropdown-content{
    position:static;
    display:block;
    width:100%;
    background:rgba(255,255,255,.08);
    box-shadow:none;
    border-radius:14px;
    margin-top:4px;
  }

  .jsssc-top-menu .jsssc-dropdown-content a{
    color:white!important;
  }
}
/* ===== RECORDS PERSO ===== */

.jsssc-records-nav{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:30px 0 45px;
}

.jsssc-records-nav a{
  display:inline-flex;
  padding:10px 18px;
  border-radius:999px;
  background:#c8102e;
  color:#fff !important;
  font-weight:800;
  text-decoration:none;
}

.jsssc-records-nav a:hover{
  background:#a10d24;
}

.jsssc-records-title h2{
  margin:55px 0 25px;
  font-size:clamp(1.8rem,4vw,3rem);
  color:#151515;
}

.jsssc-athletes-list{
  display:grid;
  gap:18px;
  margin-bottom:35px;
}

.jsssc-athlete-card{
  background:#fff;
  border-radius:22px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  border:1px solid #eee;
  overflow:hidden;
}

.jsssc-athlete-card summary{
  cursor:pointer;
  list-style:none;
  padding:22px 26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:1.1rem;
  color:#151515;
}

.jsssc-athlete-card summary::-webkit-details-marker{
  display:none;
}

.jsssc-athlete-card summary::after{
  content:"+";
  width:32px;
  height:32px;
  border-radius:50%;
  background:#c8102e;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  flex-shrink:0;
}

.jsssc-athlete-card[open] summary::after{
  content:"−";
}

.jsssc-athlete-card summary strong{
  font-weight:900;
}

.jsssc-athlete-card summary span{
  color:#c8102e;
  font-weight:900;
  white-space:nowrap;
}

.jsssc-athlete-records{
  padding:0 26px 26px;
  display:grid;
  gap:10px;
}

.jsssc-athlete-records div{
  display:grid;
  grid-template-columns:1.4fr 1fr auto;
  gap:14px;
  align-items:center;
  padding:12px 14px;
  border-radius:14px;
  background:#f7f7f7;
}

.jsssc-athlete-records strong{
  color:#151515;
}

.jsssc-athlete-records span{
  font-weight:700;
}

.jsssc-athlete-records em{
  justify-self:end;
  font-style:normal;
  font-weight:900;
  color:#c8102e;
}

@media(max-width:700px){
  .jsssc-records-nav a{
    width:100%;
    justify-content:center;
  }

  .jsssc-athlete-card summary{
    padding:18px;
    font-size:1rem;
    align-items:flex-start;
  }

  .jsssc-athlete-card summary span{
    white-space:normal;
  }

  .jsssc-athlete-records{
    padding:0 18px 20px;
  }

  .jsssc-athlete-records div{
    grid-template-columns:1fr;
    gap:4px;
  }

  .jsssc-athlete-records em{
    justify-self:start;
  }
}