/* =========================================================
   Tennis Club de Menucourt — Design System 2026
   "Club Prestige" theme — racing green, antique gold,
   clay terracotta, ivory. Fraunces + Inter.
   ========================================================= */

:root{
  /* --- Colors --- */
  --green-950:#0d1f18;
  --green-900:#122e23;
  --green-800:#173b2c;
  --green-700:#204e3a;
  --green-600:#2c6448;
  --green-500:#3c7d5b;

  --gold-600:#a8842f;
  --gold-500:#c9a24b;
  --gold-400:#dab96a;
  --gold-100:#f3e6c4;

  --clay-600:#9c4a34;
  --clay-500:#b5573c;
  --clay-100:#f1ded4;

  --court-600:#20516f;
  --court-500:#2c6f95;

  --cream-50:#fbf9f4;
  --cream-100:#f5f1e6;
  --cream-200:#ece4d1;

  --ink-900:#171b19;
  --ink-700:#333a35;
  --ink-500:#5b655e;
  --ink-300:#8b968d;

  --white:#ffffff;

  --font-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shadow-sm:0 1px 3px rgba(13,31,24,0.08);
  --shadow-md:0 8px 24px rgba(13,31,24,0.12);
  --shadow-lg:0 20px 60px rgba(13,31,24,0.18);

  --radius-sm:6px;
  --radius-md:14px;
  --radius-lg:26px;

  --container:1220px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--cream-50);
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
  overflow-x:hidden;
  width:100%;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--green-900);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;}
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}
section{position:relative;}

/* ---------- Utility ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-600);
  margin-bottom:1em;
}
.eyebrow::before{
  content:"";
  width:26px;height:2px;
  background:var(--gold-500);
  display:inline-block;
}
.section-head{
  max-width:640px;
  margin:0 auto 3rem;
  text-align:center;
}
.section-head p{color:var(--ink-500);font-size:1.05rem;}
.section-pad{padding:6rem 0;}
@media (max-width:768px){.section-pad{padding:3.5rem 0;}}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.9em 1.9em;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .25s ease;
  white-space:nowrap;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-500),var(--gold-600));
  color:var(--green-950);
  box-shadow:var(--shadow-sm);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-outline{
  background:transparent;
  border-color:rgba(255,255,255,.5);
  color:var(--white);
}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-outline-dark{
  background:transparent;
  border-color:var(--green-700);
  color:var(--green-800);
}
.btn-outline-dark:hover{background:var(--green-800);color:var(--white);}
.btn-block{width:100%;}

.tag{
  display:inline-block;
  padding:.3em .9em;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.tag-gold{background:var(--gold-100);color:var(--gold-600);}
.tag-clay{background:var(--clay-100);color:var(--clay-600);}
.tag-green{background:rgba(32,78,58,.1);color:var(--green-700);}

.card{
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--cream-200);
}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.is-visible{opacity:1;transform:none;}

/* ---------- Top info bar ---------- */
.topbar{
  background:var(--green-950);
  color:var(--cream-100);
  font-size:.82rem;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:.55em;
  padding-bottom:.55em;
  gap:1rem;
  flex-wrap:wrap;
}
.topbar a{color:var(--gold-400);}
.topbar-left{display:flex;gap:1.6em;flex-wrap:wrap;color:rgba(251,249,244,.8);}
.topbar-left span{display:inline-flex;align-items:center;gap:.45em;}
.topbar-social{display:flex;gap:.9em;}
.topbar-social a{
  width:26px;height:26px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);
  color:var(--cream-100);
  transition:background .2s;
}
.topbar-social a:hover{background:var(--gold-500);color:var(--green-950);}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;
  top:0;
  /* Higher than .nav-scrim (110): .site-header's position+z-index makes it
     a stacking context, so .nav-links (z-index:120) living inside it only
     competes with its own siblings — from outside, the whole header is
     only worth its own z-index. If that were lower than .nav-scrim's, the
     scrim would paint (and receive taps) above the open menu despite the
     panel's higher local z-index. */
  z-index:150;
  background:rgba(19,46,35,.92);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .3s ease;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:.9em;
  padding-bottom:.9em;
  flex-wrap:nowrap;
  gap:.8em;
}
.brand{
  display:flex;
  align-items:center;
  gap:.7em;
  color:var(--white);
  min-width:0;
}
.brand-mark{
  width:44px;height:44px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:var(--shadow-sm);
  flex:none;
  background:var(--white);
}
.site-footer .brand-mark{box-shadow:0 0 0 2px rgba(255,255,255,.08);}
.brand-text{line-height:1.15;min-width:0;}
.brand-text .name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.08rem;
  letter-spacing:.01em;
  display:block;
  /* Always show the full club name — wrap onto a second line rather than
     truncating with an ellipsis, however narrow the header gets. */
  white-space:normal;
}
.brand-text .sub{
  display:block;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-400);
  margin-top:.15em;
}
/* On very narrow screens, shrink the name slightly so a two-line wrap
   (e.g. "Tennis Club" / "de Menucourt") sits comfortably next to the logo
   and hamburger button instead of looking oversized. Still the full name,
   never truncated. */
@media (max-width:480px){
  .brand-text .name{font-size:.92rem;}
}

.nav-links{
  display:flex;
  align-items:center;
  gap:2rem;
}
.nav-links a{
  font-size:.88rem;
  font-weight:500;
  color:rgba(251,249,244,.85);
  position:relative;
  padding:.3em 0;
  transition:color .2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--white);}
.nav-links a:not(.btn)::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:0;height:2px;
  background:var(--gold-500);
  transition:width .25s ease;
}
.nav-links a:not(.btn):hover::after,.nav-links a.active::after{width:100%;}

.nav-toggle{
  display:none;
  width:42px;height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:none;
  color:var(--white);
  align-items:center;justify-content:center;
  cursor:pointer;
  flex:none;
}

@media (max-width:960px){
  .nav-links{
    position:fixed;
    top:0;right:0;left:auto;
    width:min(320px,85vw);
    /* height (not top+bottom) so mobile Safari sizes this to the real
       visible viewport — with only vh, the panel can extend below the
       collapsing address/toolbar and hide the last items. 100vh is the
       fallback for browsers that don't understand dvh; the dvh line
       overrides it where supported. */
    height:100vh;
    height:100dvh;
    box-sizing:border-box;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    padding:4rem 1.6rem 1.6rem;
    background:linear-gradient(160deg,var(--green-950),var(--green-800));
    transform:translateX(100%);
    transition:transform .35s ease;
    gap:.9rem;
    z-index:120;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:1.05rem;}
  .nav-links a.btn{
    width:100%;
    margin-top:.6rem;
    padding-top:.9rem;
    border-top:1px solid rgba(255,255,255,.15);
  }
  .nav-toggle{display:inline-flex;flex:none;}
  .nav-scrim{
    display:none;
    position:fixed;inset:0;
    background:rgba(13,31,24,.5);
    z-index:110;
  }
  .nav-scrim.open{display:block;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:center;
  color:var(--white);
  overflow:hidden;
  background:var(--green-950);
}
.hero-media{position:absolute;inset:0;}
.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero-media::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(13,31,24,.55) 0%,rgba(13,31,24,.55) 40%,rgba(13,31,24,.92) 100%),
    linear-gradient(100deg,rgba(13,31,24,.75) 0%,rgba(13,31,24,.25) 55%);
}
.hero-content{position:relative;z-index:2;padding:8rem 0 5rem;}
.hero-content .eyebrow{color:var(--gold-400);}
.hero-content h1{
  color:var(--white);
  font-size:clamp(2.4rem,5vw,4.1rem);
  max-width:780px;
  margin-bottom:.4em;
}
.hero-content .lede{
  max-width:560px;
  font-size:1.15rem;
  color:rgba(251,249,244,.88);
  margin-bottom:2.1em;
}
.hero-actions{display:flex;gap:1em;flex-wrap:wrap;margin-bottom:3.2rem;}
.hero-stats{
  display:flex;
  gap:2.6rem;
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:1.8rem;
  max-width:760px;
}
.hero-stats div strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.9rem;
  color:var(--gold-400);
}
.hero-stats div span{font-size:.82rem;color:rgba(251,249,244,.75);}

.hero-scroll{
  position:absolute;
  bottom:2rem;left:50%;
  transform:translateX(-50%);
  z-index:2;
  color:rgba(251,249,244,.7);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6em;
}
.hero-scroll .line{width:1px;height:34px;background:linear-gradient(var(--gold-400),transparent);animation:scrolldown 1.8s ease-in-out infinite;}
@keyframes scrolldown{0%{opacity:0;}30%{opacity:1;}100%{opacity:0;transform:translateY(10px);}}

/* Compact hero for inner pages */
.page-hero{
  position:relative;
  color:var(--white);
  background:var(--green-950);
  overflow:hidden;
}
.page-hero .container{padding:6.5rem 0 3.6rem;position:relative;z-index:2;}
.page-hero-media{position:absolute;inset:0;}
.page-hero-media img{width:100%;height:100%;object-fit:cover;opacity:.35;}
.page-hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,var(--green-950) 20%,rgba(19,46,35,.55) 100%);
}
.page-hero .crumb{
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-400);
  margin-bottom:.8em;
}
.page-hero h1{color:var(--white);font-size:clamp(2rem,4vw,3rem);margin-bottom:.35em;}
.page-hero .lede{color:rgba(251,249,244,.85);max-width:620px;font-size:1.05rem;}
.page-hero .address{
  margin-top:1.6rem;
  display:flex;
  gap:2rem;
  flex-wrap:wrap;
  font-size:.88rem;
  color:rgba(251,249,244,.8);
}
.page-hero .address span{display:inline-flex;align-items:center;gap:.5em;}

/* ---------- Feature / news cards on home ---------- */
.news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.7rem;
}
@media (max-width:960px){.news-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.news-grid{grid-template-columns:1fr;}}

.news-card{
  background:var(--white);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--cream-200);
  transition:transform .3s ease,box-shadow .3s ease;
  display:flex;flex-direction:column;
}
.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.news-card .thumb{
  aspect-ratio:4/3;
  background:var(--green-800);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-400);
  font-size:2rem;
  overflow:hidden;
}
.news-card .thumb img{width:100%;height:100%;object-fit:cover;}
.news-card .body{padding:1.5rem;flex:1;display:flex;flex-direction:column;}
.news-card .date{font-size:.75rem;color:var(--ink-300);font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.6em;}
.news-card h3{font-size:1.12rem;margin-bottom:.5em;}
.news-card p{color:var(--ink-500);font-size:.92rem;flex:1;}
.news-card .read-more{
  margin-top:1em;
  font-weight:700;
  font-size:.82rem;
  color:var(--green-700);
  display:inline-flex;align-items:center;gap:.4em;
}

/* ---------- Facilities / spotlight ---------- */
.spotlight-row{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:0;
  align-items:stretch;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  margin-bottom:2rem;
  background:var(--white);
}
.spotlight-row.rev{grid-template-columns:.9fr 1.1fr;}
.spotlight-row .img{min-height:340px;overflow:hidden;}
.spotlight-row .img img{width:100%;height:100%;object-fit:cover;min-height:340px;}
.spotlight-row.rev .img{order:2;}
.spotlight-row .text{padding:3rem;display:flex;flex-direction:column;justify-content:center;}
@media (max-width:860px){
  .spotlight-row,.spotlight-row.rev{grid-template-columns:1fr;}
  .spotlight-row.rev .img{order:0;}
  .spotlight-row .text{padding:2rem;}
}

/* ---------- Info / quicklinks strip ---------- */
.quicklinks{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.4rem;
}
@media (max-width:860px){.quicklinks{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.quicklinks{grid-template-columns:1fr;}}
.quicklink{
  padding:2rem 1.6rem;
  border-radius:var(--radius-md);
  background:var(--white);
  border:1px solid var(--cream-200);
  text-align:center;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s;
}
.quicklink:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--gold-400);}
.quicklink .ic{
  width:52px;height:52px;
  margin:0 auto 1em;
  border-radius:50%;
  background:linear-gradient(135deg,var(--green-800),var(--green-700));
  color:var(--gold-400);
  display:flex;align-items:center;justify-content:center;
}
.quicklink h4{font-size:1rem;margin-bottom:.35em;}
.quicklink p{font-size:.85rem;color:var(--ink-500);margin:0;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--green-950);
  color:rgba(251,249,244,.75);
  padding-top:4.5rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:2.5rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.site-footer h5{
  color:var(--white);
  font-family:var(--font-body);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:1.2em;
}
.site-footer .brand{margin-bottom:1em;}
.site-footer p{font-size:.9rem;color:rgba(251,249,244,.65);}
.footer-links li{margin-bottom:.7em;}
.footer-links a{font-size:.9rem;color:rgba(251,249,244,.75);transition:color .2s;}
.footer-links a:hover{color:var(--gold-400);}
.footer-contact li{margin-bottom:.9em;font-size:.9rem;display:flex;gap:.7em;align-items:flex-start;}
.footer-contact svg{flex:none;margin-top:.2em;color:var(--gold-400);}
.footer-social{display:flex;gap:.8em;margin-top:1.2em;}
.footer-social a{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.footer-social a:hover{background:var(--gold-500);color:var(--green-950);}

.partners-strip{padding:2.2rem 0;border-bottom:1px solid rgba(255,255,255,.08);}
.partners-strip h5{text-align:center;margin-bottom:1.4em;}
.partners-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.4rem;
}
.partners-row a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--white);
  padding:.6em 1.2em;
  border-radius:10px;
  box-shadow:var(--shadow-sm);
}
.partners-row img{
  height:32px;
  width:auto;
}

.footer-bottom{
  padding:1.6rem 0;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1em;
  font-size:.8rem;
  color:rgba(251,249,244,.5);
}
.footer-bottom a{color:rgba(251,249,244,.5);}

/* ---------- Generic content page (article-style) ---------- */
.content-block{padding:5rem 0;}
.content-block .lead{font-size:1.15rem;color:var(--ink-700);max-width:760px;}
.content-block h2{font-size:1.9rem;margin-top:0;}
.content-block h3{font-size:1.3rem;color:var(--green-800);margin-top:2.2em;}
.divider{
  height:1px;
  background:linear-gradient(90deg,var(--gold-400),transparent 60%);
  margin:2.6rem 0;
}

.table-card{
  overflow-x:auto;
  border-radius:var(--radius-md);
  border:1px solid var(--cream-200);
  box-shadow:var(--shadow-sm);
  margin:1.6rem 0 2rem;
}
table.roster{
  width:100%;
  border-collapse:collapse;
  background:var(--white);
  font-size:.95rem;
}
table.roster th{
  background:var(--green-900);
  color:var(--gold-400);
  text-align:left;
  padding:.9em 1.2em;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
}
table.roster td{
  padding:.85em 1.2em;
  border-top:1px solid var(--cream-200);
  color:var(--ink-700);
}
table.roster tr:nth-child(even) td{background:var(--cream-50);}

.people-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}
@media (max-width:760px){.people-grid{grid-template-columns:repeat(2,1fr);}}
.people-grid .pill{
  background:var(--white);
  border:1px solid var(--cream-200);
  border-radius:999px;
  padding:.75em 1.2em;
  font-size:.88rem;
  font-weight:600;
  color:var(--green-800);
  text-align:center;
}

/* ---------- Teacher cards ---------- */
.staff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem;}
@media (max-width:760px){.staff-grid{grid-template-columns:1fr;}}
.staff-card{
  display:flex;
  gap:1.4rem;
  padding:1.6rem;
  border-radius:var(--radius-md);
  background:var(--white);
  border:1px solid var(--cream-200);
  box-shadow:var(--shadow-sm);
}
.staff-card .photo{
  width:96px;height:96px;
  border-radius:50%;
  overflow:hidden;
  flex:none;
  background:var(--green-800);
  border:3px solid var(--gold-400);
}
.staff-card .photo img{width:100%;height:100%;object-fit:cover;}
.staff-card h4{margin-bottom:.2em;font-size:1.1rem;}
.staff-card .role{color:var(--gold-600);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.6em;display:block;}
.staff-card ul li{font-size:.88rem;color:var(--ink-500);padding-left:1em;position:relative;margin-bottom:.3em;}
.staff-card ul li::before{content:"•";color:var(--gold-500);position:absolute;left:0;}

/* ---------- Schedule cards (enseignement) ---------- */
.schedule-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1rem;
}
@media (max-width:900px){.schedule-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.schedule-grid{grid-template-columns:repeat(2,1fr);}}
.schedule-card{
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--green-900);
  color:var(--white);
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease,box-shadow .25s ease;
  position:relative;
}
.schedule-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.schedule-card img{aspect-ratio:3/4;object-fit:cover;opacity:.9;}
.schedule-card .view{
  padding:.7em 0;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(0,0,0,.25);
}

/* ---------- Pricing table ---------- */
.pricing-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.8rem;
  margin-bottom:2rem;
}
@media (max-width:820px){.pricing-wrap{grid-template-columns:1fr;}}
.price-card{
  background:var(--white);
  border-radius:var(--radius-md);
  border:1px solid var(--cream-200);
  box-shadow:var(--shadow-sm);
  padding:2rem;
}
.price-card h4{font-size:1.05rem;margin-bottom:1em;color:var(--green-800);}
.price-line{
  display:flex;
  justify-content:space-between;
  padding:.7em 0;
  border-top:1px dashed var(--cream-200);
  font-size:.95rem;
}
.price-line:first-of-type{border-top:none;}
.price-line strong{color:var(--green-900);font-family:var(--font-display);font-size:1.05rem;}

.price-table-card{
  border-radius:var(--radius-md);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--cream-200);
  box-shadow:var(--shadow-sm);
  margin-bottom:2rem;
}
table.pricing{width:100%;border-collapse:collapse;background:var(--white);font-size:.92rem;}
table.pricing caption{
  text-align:left;
  padding:1.1em 1.4em;
  background:var(--green-900);
  color:var(--white);
  font-family:var(--font-display);
  font-size:1.05rem;
  caption-side:top;
}
table.pricing th,table.pricing td{
  padding:.75em 1.2em;
  border-top:1px solid var(--cream-200);
  text-align:center;
}
table.pricing thead th{
  background:var(--cream-100);
  color:var(--green-800);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-top:none;
}
table.pricing td:first-child,table.pricing th:first-child{text-align:left;font-weight:600;color:var(--ink-700);}
table.pricing tbody tr:hover td{background:var(--cream-50);}

.callout{
  border-radius:var(--radius-md);
  padding:1.6rem 1.8rem;
  background:var(--clay-100);
  border:1px solid rgba(181,87,60,.25);
  margin-bottom:1.6rem;
}
.callout h5{color:var(--clay-600);font-family:var(--font-body);font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5em;}
.callout p{margin:0;font-size:.92rem;color:var(--ink-700);}
.callout.gold{background:var(--gold-100);border-color:rgba(201,162,75,.35);}
.callout.gold h5{color:var(--gold-600);}

.doc-links{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.4rem 0;}
.doc-chip{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.7em 1.2em;
  border-radius:999px;
  background:var(--white);
  border:1px solid var(--cream-200);
  font-size:.85rem;
  font-weight:600;
  color:var(--green-800);
  transition:all .2s;
}
.doc-chip:hover{border-color:var(--gold-500);background:var(--gold-100);}
.doc-chip svg{color:var(--clay-500);}

/* ---------- Tournament cards ---------- */
.tourney-card{
  padding:2rem;
  border-radius:var(--radius-md);
  background:var(--white);
  border:1px solid var(--cream-200);
  box-shadow:var(--shadow-sm);
  margin-bottom:1.6rem;
}
.tourney-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1em;}
.tourney-card h3{margin-bottom:0;font-size:1.3rem;}
.tourney-meta{display:flex;gap:1.6rem;flex-wrap:wrap;font-size:.86rem;color:var(--ink-500);margin:1em 0;}
.tourney-meta span{display:inline-flex;align-items:center;gap:.5em;}
.tourney-meta strong{color:var(--green-800);}

/* ---------- Contact page ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:3rem;
}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{
  background:var(--white);
  border:1px solid var(--cream-200);
  border-radius:var(--radius-md);
  padding:1.3rem 1.5rem;
  display:flex;
  gap:1rem;
  align-items:flex-start;
  margin-bottom:1rem;
  box-shadow:var(--shadow-sm);
}
.contact-card .ic{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--green-900);color:var(--gold-400);
  display:flex;align-items:center;justify-content:center;
}
.contact-card h4{font-size:.95rem;margin-bottom:.15em;}
.contact-card a,.contact-card p{font-size:.88rem;color:var(--ink-500);margin:0;}
.contact-card a:hover{color:var(--green-700);}

.form-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  border:1px solid var(--cream-200);
  box-shadow:var(--shadow-md);
  padding:2.4rem;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
@media (max-width:520px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:1.2rem;}
.field label{
  display:block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--green-800);
  margin-bottom:.5em;
}
.field input,.field textarea{
  width:100%;
  padding:.85em 1em;
  border:1px solid var(--cream-200);
  border-radius:var(--radius-sm);
  background:var(--cream-50);
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--ink-900);
  transition:border-color .2s,background .2s;
}
.field input:focus,.field textarea:focus{
  outline:none;
  border-color:var(--gold-500);
  background:var(--white);
}

/* ---------- News (actualites) page ---------- */
.news-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:2.4rem;
  padding-bottom:1.6rem;
  border-bottom:1px solid var(--cream-200);
}
.news-toolbar label{font-weight:700;font-size:.85rem;color:var(--green-800);}
.news-toolbar select{
  padding:.7em 1.1em;
  border-radius:999px;
  border:1px solid var(--cream-200);
  background:var(--white);
  font-family:var(--font-body);
  font-size:.88rem;
  min-width:220px;
}
.article-item{
  border:1px solid var(--cream-200);
  border-radius:var(--radius-lg);
  background:var(--white);
  padding:2.2rem;
  margin-bottom:2rem;
  box-shadow:var(--shadow-sm);
  scroll-margin-top:110px;
  transition:box-shadow .5s ease,border-color .5s ease;
}
.article-item.article-highlight{
  border-color:var(--gold-500);
  box-shadow:0 0 0 4px rgba(201,162,75,.25),var(--shadow-md);
}
.article-item h4{font-size:1.4rem;margin-bottom:.3em;}
.article-item .meta{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.78rem;color:var(--ink-300);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:1.4em;
}
.article-item p{color:var(--ink-700);}
.article-item h2{font-size:1.25rem;color:var(--green-800);margin-top:1.4em;}
.article-item ul{margin:0 0 1em;padding-left:1.2em;list-style:disc;color:var(--ink-700);}
.article-item li{margin-bottom:.3em;}

/* ---------- Calendar (animations page) ---------- */
.legend{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center;margin-top:1.6rem;font-size:.85rem;}
.legend-item{display:flex;align-items:center;gap:.6em;color:var(--ink-500);font-weight:600;}
.legend-color{width:14px;height:14px;border-radius:4px;}
.legend-competition{background:var(--clay-500);}
.legend-entrainement{background:var(--court-500);}
.legend-animation{background:var(--green-600);}
.legend-evenement{background:var(--gold-500);}

.calendar-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  border:1px solid var(--cream-200);
  box-shadow:var(--shadow-md);
  padding:2rem;
}
.calendar-header{
  display:flex;justify-content:center;align-items:center;gap:1.6rem;margin-bottom:1.6rem;
}
.calendar-header h2{margin:0;font-size:1.3rem;min-width:200px;text-align:center;}
.calendar-header button{
  background:var(--green-900);
  color:var(--gold-400);
  border:none;border-radius:50%;
  width:40px;height:40px;font-size:1rem;
  cursor:pointer;transition:transform .2s,background .2s;
  display:flex;align-items:center;justify-content:center;
}
.calendar-header button:hover{background:var(--gold-500);color:var(--green-950);transform:scale(1.08);}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.day-name{text-align:center;font-weight:700;padding:.6em 0;color:var(--green-800);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;}
.day{background:var(--cream-50);min-height:96px;padding:.4em;border-radius:8px;min-width:0;overflow:hidden;border:1px solid var(--cream-200);}
.day.today{background:var(--gold-100);border-color:var(--gold-500);}
.date{font-weight:700;font-size:.82rem;color:var(--ink-700);}
.date.today-date::after{content:" 🎾";}
.event{margin-top:.3em;font-size:.68rem;padding:.25em .4em;border-radius:4px;color:#fff;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;box-sizing:border-box;font-weight:600;}
.competition{background:var(--clay-500);}
.entrainement{background:var(--court-500);}
.animation{background:var(--green-600);}
.evenement{background:var(--gold-500);color:#3a2e0a;}
.popup{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--white);padding:1.8rem;box-shadow:var(--shadow-lg);
  display:none;border-radius:var(--radius-md);width:90%;max-width:440px;box-sizing:border-box;z-index:200;
}
.popup h3{margin-top:0;}
.popup .popup-close{margin-top:1em;}
/* Agenda list injected into the popup on mobile when a day has more than
   one event (see openDayAgenda() in animation.html). */
.agenda-item{padding:.65em 0;border-top:1px solid var(--cream-200);}
.agenda-item:first-child{border-top:none;padding-top:0;}
.agenda-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.5em;vertical-align:middle;}
.overlay{position:fixed;inset:0;background:rgba(13,31,24,.55);display:none;z-index:190;}

/* ---------- Inscription announcement pop-up (shown once per visit) ---------- */
.popup.wide{max-width:500px;padding:2.2rem;}
.popup-close-x{
  position:absolute;top:1rem;right:1rem;
  width:32px;height:32px;border-radius:50%;
  border:none;background:var(--cream-100);color:var(--ink-500);
  font-size:1rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.popup-close-x:hover{background:var(--cream-200);color:var(--ink-900);}
.inscription-list{margin:1.2em 0;}
.inscription-list li{
  display:flex;align-items:flex-start;gap:.7em;
  font-size:.92rem;color:var(--ink-700);
  padding:.5em 0;border-top:1px dashed var(--cream-200);
}
.inscription-list li:first-child{border-top:none;padding-top:0;}
.inscription-list .ic{flex:none;font-size:1.1rem;line-height:1.3;}

/* Below ~768px the 7-column grid is too narrow for full event labels to
   stay legible or tappable, so events collapse to small dots and the whole
   day becomes tappable, opening an agenda list in the existing popup
   (see openDayAgenda() in animation.html). Desktop/tablet keep the
   original full-label event bars untouched. */
@media (max-width:768px){
  .day{min-height:64px;}
  .day.has-events{cursor:pointer;}
  .event{
    display:inline-block;
    width:8px;height:8px;
    min-width:8px;
    padding:0;
    margin:.3em .25em 0 0;
    border-radius:50%;
    font-size:0;
    line-height:0;
    overflow:hidden;
    cursor:inherit;
  }
  .calendar-header{gap:.7rem;}
  .calendar-header h2{min-width:0;font-size:1.05rem;}
  .calendar-header button{width:34px;height:34px;font-size:.85rem;}
}

/* ---------- Misc ---------- */
.split-cta{
  background:linear-gradient(120deg,var(--green-950),var(--green-800));
  color:var(--white);
  border-radius:var(--radius-lg);
  padding:3.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}
.split-cta::after{
  content:"";
  position:absolute;
  width:420px;height:420px;
  border-radius:50%;
  border:1px solid rgba(201,162,75,.25);
  right:-140px;top:-160px;
  /* Purely decorative — without this, its full square hit-box (border-radius
     only changes how it's painted, not its clickable area) silently sits on
     top of and swallows clicks on whichever button lands in the top-right
     of the card. */
  pointer-events:none;
}
.split-cta h2{color:var(--white);margin-bottom:.3em;}
.split-cta p{color:rgba(251,249,244,.8);margin:0;max-width:440px;}

::selection{background:var(--gold-400);color:var(--green-950);}

.skip-link{
  position:absolute;left:-999px;top:auto;
  background:var(--gold-500);color:var(--green-950);
  padding:.8em 1.4em;z-index:1000;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;top:0;}

/* ---------- Partenaires page ---------- */
.price-card ul{margin:.6em 0 0;}
.price-card ul li{font-size:.88rem;color:var(--ink-500);padding-left:1.1em;position:relative;margin-bottom:.45em;}
.price-card ul li::before{content:"•";color:var(--gold-500);position:absolute;left:0;}
.price-card.featured{border-color:var(--gold-500);box-shadow:var(--shadow-md);}

.pricing-wrap.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.pricing-wrap.cols-3{grid-template-columns:1fr;}}

.quicklinks.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:860px){.quicklinks.cols-3{grid-template-columns:1fr;}}

.stat-strip{
  background:linear-gradient(120deg,var(--green-950),var(--green-800));
  border-radius:var(--radius-lg);
  padding:3rem 2.5rem;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  text-align:center;
}
@media (max-width:860px){.stat-strip{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.stat-strip{grid-template-columns:1fr;}}
.stat-strip div strong{
  display:block;
  font-family:var(--font-display);
  font-size:2.1rem;
  color:var(--gold-400);
  margin-bottom:.15em;
}
.stat-strip div span{font-size:.85rem;color:rgba(251,249,244,.78);}

.fiscal-highlight{
  display:flex;
  align-items:center;
  gap:2rem;
  flex-wrap:wrap;
  background:var(--gold-100);
  border:1px solid rgba(201,162,75,.35);
  border-radius:var(--radius-lg);
  padding:2.4rem 2.6rem;
  margin:2rem 0;
}
.fiscal-highlight .big-num{
  font-family:var(--font-display);
  font-size:4.2rem;
  font-weight:600;
  color:var(--clay-600);
  line-height:1;
  flex:none;
}
.fiscal-highlight .big-num span{display:block;font-size:1.1rem;font-family:var(--font-body);font-weight:700;color:var(--green-800);letter-spacing:.02em;margin-top:.2em;}
.fiscal-highlight p{margin:0;color:var(--ink-700);max-width:520px;}

.partner-logos-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2.4rem;
  padding:2rem 0;
}
.partner-logos-row img{height:52px;width:auto;object-fit:contain;filter:grayscale(15%);opacity:.9;}