:root {
  --vert:        #1a5c3e;
  --vert-vif:    #20754e;
  --vert-clair:  #e4f0ea;
  --vert-pale:   #f0f7f3;
  --or:          #c49a28;
  --or-vif:      #e0b030;
  --or-clair:    #fdf6e3;
  --noir:        #0c100e;
  --gris-fonce:  #161e1a;
  --gris-mid:    #2e3d35;
  --gris-text:   #5a6b62;
  --gris-border: #d0dbd4;
  --gris-bg:     #f4f6f4;
  --blanc:       #fafcfa;
  --radius:      4px;
  --radius-lg:   10px;
  --shadow:      0 2px 8px rgba(12,16,14,.07), 0 8px 24px rgba(12,16,14,.09);
  --shadow-lg:   0 12px 40px rgba(12,16,14,.15);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Outfit', sans-serif;
  --font-mono:    'DM Mono', monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--noir);
  background: var(--blanc);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: .018;
  pointer-events: none;
  z-index: 9999;
}


/* ── Listes Joomla — alignement gauche + fond transparent ── */
.site-shell .items-row,
.site-shell .items-leading,
.site-shell .blog-items,
.site-shell .item-list,
.site-shell ul.category,
.site-shell .com-content-category {
  text-align: left !important;
  background: transparent !important;
}

.site-shell .item-title,
.site-shell .blog-featured,
.site-shell .list-title {
  text-align: left !important;
}

/* Fond blanc parasite sur les listes */
.site-shell .items-more,
.site-shell .cat-list-row {
  background: transparent !important;
  text-align: left !important;
}

/* ── UTILS ── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.section { padding: 44px 0; }
.section-alt { background: var(--gris-bg); }
.section-dark { background: var(--gris-fonce); color: var(--blanc); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--or); }
.eyebrow-light { color: #c8a84a; }
.eyebrow-light::before { background: #c8a84a; }
.eyebrow-center { justify-content: center; }
.eyebrow-center::before { display: none; }

h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--noir);
  margin-bottom: 14px;
  letter-spacing: -.01em;
}
h2.light { color: var(--blanc); }
h2 em { color: var(--vert); font-style: italic; }

.intro {
  font-size: 16px;
  color: var(--gris-text);
  max-width: 520px;
  margin-bottom: 20px;
  line-height: 1.75;
  font-weight: 300;
}
.intro.light { color: rgba(255,255,255,.5); }
.intro.center { margin-left: auto; margin-right: auto; text-align: center; }
.intro.wide { max-width: 680px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all .25s; border: none; letter-spacing: .01em;
}
.btn-primary { background: var(--vert); color: var(--blanc); }
.btn-primary:hover { background: var(--vert-vif); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,92,62,.3); }
.btn-or { background: var(--or); color: var(--noir); }
.btn-or:hover { background: var(--or-vif); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--noir); border: 1px solid var(--gris-border); }
.btn-outline:hover { border-color: var(--vert); color: var(--vert); }
.btn-outline-light { background: transparent; color: var(--blanc); border: 1px solid rgba(255,255,255,.2); }
.btn-outline-light:hover { border-color: rgba(255,255,255,.5); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── TOPBAR ── */
.topbar {
  background: var(--vert);
  color: rgba(255,255,255,.7);
  font-size: 12px; font-weight: 300;
  text-align: center; padding: 9px 32px; letter-spacing: .02em;
}
.topbar strong { color: #a8e6c4; font-weight: 600; }

/* ── NAV ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,252,250,.97); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gris-border);
  padding: 0 40px; height: 68px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  color: var(--noir); letter-spacing: -.03em;
  display: flex; align-items: baseline; gap: 0;
}
.nav-logo-ze { color: var(--vert); font-style: italic; }
.nav-logo-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--or); margin: 0 2px 4px; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links li { display: flex; align-items: center; }
.nav-links a {
  font-size: 13.5px; font-weight: 400; color: var(--gris-mid);
  transition: color .2s; position: relative; padding-bottom: 2px;
}
.nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1.5px; background: var(--vert); transition: width .25s; }
.nav-links a:hover { color: var(--vert); }
.nav-links a:hover::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-login { font-size: 13px; color: var(--gris-text); transition: color .2s; }
.nav-login:hover { color: var(--vert); }
.nav-dropdown-trigger { padding-bottom: 0 !important; }
.nav-dropdown-trigger::after { display: none !important; }


/* ── HERO ── */
.hero {
  background: var(--blanc); min-height: 90vh;
  display: flex; align-items: center;
  position: relative; overflow: hidden; padding: 0px 40px 0px 40px ;
}
.hero-track {
  position: absolute; right: -120px; top: 50%; transform: translateY(-50%);
  width: 580px; height: 580px;
  border: 1.5px solid rgba(26,92,62,.07); border-radius: 50%; pointer-events: none;
}
.hero-track::before { content: ''; position: absolute; inset: 40px; border: 1px solid rgba(26,92,62,.05); border-radius: 50%; }
.hero-track::after  { content: ''; position: absolute; inset: 80px; border: 1px solid rgba(26,92,62,.04); border-radius: 50%; }
.hero-diagonal { position: absolute; bottom: 0; right: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--vert-clair) 40%, var(--or-clair) 100%); }

.hero-inner {
  max-width: 1100px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px;
  align-items: center; position: relative; z-index: 1;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--or-clair); border: 1px solid rgba(196,154,40,.2);
  border-radius: 2px; padding: 6px 12px; margin-bottom: 24px;
}
.hero-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--or); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.hero-tag-text { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--or); }

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 700; line-height: 1.1;
  color: var(--noir); margin-bottom: 24px; letter-spacing: -.02em;
}
.hero h1 em { color: var(--vert); font-style: italic; }

.hero-desc {
  font-size: 16px; color: var(--gris-text);
  line-height: 1.75; max-width: 460px;
  margin-bottom: 32px; font-weight: 300;
}

.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }

.hero-social {
  display: flex; align-items: center; gap: 14px;
  padding-top: 32px; border-top: 1px solid var(--gris-border);
}
.hero-social-avatars { display: flex; }
.hero-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--vert-clair); border: 2px solid var(--blanc);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--vert);
  margin-left: -8px;
}
.hero-avatar:first-child { margin-left: 0; }
.hero-social-text { font-size: 12.5px; color: var(--gris-text); }
.hero-social-text strong { color: var(--noir); font-weight: 500; }

/* ── HERO CARD ── */
.hero-card {
  background: var(--blanc); border: 1px solid var(--gris-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; position: relative;
}
.hero-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--vert), var(--or)); }
.hero-card-header {
  background: var(--gris-fonce); padding: 16px 22px;
  display: flex; align-items: center; justify-content: space-between;
}
.card-header-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 2px; }
.card-header-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--blanc); }
.card-header-date { font-family: var(--font-mono); font-size: 11px; color: #6edfaa; }
.hero-card-body { padding: 8px 0; }
.hero-race {
  padding: 14px 22px; border-bottom: 1px solid var(--gris-bg);
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  transition: background .2s;
}
.hero-race:hover { background: var(--gris-bg); }
.hero-race:last-child { border-bottom: none; }
.race-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.race-hippo { font-size: 14px; font-weight: 500; }
.race-code { font-family: var(--font-mono); font-size: 11px; color: var(--gris-text); background: var(--gris-bg); padding: 2px 7px; border-radius: 2px; letter-spacing: .05em; }
.race-horse { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.horse-num { width: 22px; height: 22px; border-radius: 3px; background: var(--vert); color: var(--blanc); font-family: var(--font-mono); font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.horse-stars { font-size: 13px; color: var(--or); letter-spacing: 1px; }
.race-result { text-align: right; }
.race-gain { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--vert); line-height: 1; }
.race-gain.neg { color: #c0392b; }
.race-rapport { font-size: 11px; color: var(--gris-text); margin-top: 2px; }
.hero-card-footer {
  background: linear-gradient(135deg, var(--vert) 0%, var(--vert-vif) 100%);
  padding: 14px 22px; display: flex; justify-content: space-between; align-items: center;
}
.footer-card-label { font-size: 14px; color: rgba(255,255,255,.65); font-weight: 300; }
.footer-card-val { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--blanc); }

.race-badge {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--or); background: var(--or-clair);
  padding: 2px 7px; border-radius: 2px;
}

.race-couple {
  font-size: 11px; color: var(--gris-text);
  background: var(--gris-bg); padding: 2px 7px;
  border-radius: 2px; font-family: var(--font-mono);
}

.race-source {
    font-size: 0.7rem;
    color: #888;
    text-align: right;
}

/* ── KPI ── */
.kpi-band { background: var(--or); }
.kpi-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); }
.kpi { padding: 32px 40px; text-align: center; border-right: 1px solid rgba(0,0,0,.08); }
.kpi:last-child { border-right: none; }
.kpi-val { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: var(--noir); line-height: 1; margin-bottom: 6px; }
.kpi-label { font-size: 12px; color: rgba(0,0,0,.55); font-weight: 400; }

/* ── PROGRAMME DU JOUR ── */
.section-programme { padding: 44px 0; background: var(--gris-bg); }

.programme-header {
  max-width: 1100px; margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 32px; align-items: end; margin-bottom: 32px;
}

.prog-tab { flex-shrink: 0; }

.prog-tabs-wrap {
  max-width: 1100px; margin: 0 auto; padding: 0 40px;
  box-sizing: border-box;
}

.prog-tabs-inner {
  border: 1px solid var(--gris-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--blanc);
}

.prog-tabs {
  display: flex; gap: 4px; margin-bottom: 0;
  border-bottom: 0px solid var(--gris-border);
  overflow-x: auto; scrollbar-width: none;
  padding: 0 16px; background: var(--blanc);
  margin:10px 0px 10px 0px;
}
.prog-tabs::-webkit-scrollbar { display: none; }

.prog-tab {
  font-family: var(--font-display); font-size: 18px; font-weight: 500;
  padding: 10px 20px; cursor: pointer; white-space: nowrap;
  border: none; background: transparent; color: var(--gris-text);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: all .2s;
}
.prog-tab:hover { color: var(--vert); }
.prog-tab.active { color: var(--vert); border-bottom-color: var(--vert); font-weight: 600; }

.prog-panel { display: none; padding: 0 16px; }
.prog-panel.active { display: block; }

.prog-panel-meta {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 8px;
  background: var(--gris-fonce); border-radius: var(--radius);
}
.prog-panel-type {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 2px;
}
.prog-panel-type.galop { background: rgba(32,117,78,.15); color: #6edfaa; font-size: 14px; }
.prog-panel-type.trot { background: rgba(41,128,185,.15); color: #7ec8f0; font-size: 14px;}

.prog-panel-count { font-size: 13px; color: rgba(255,255,255,.4); }

.prog-panel-perles {
  font-family: var(--font-mono); font-size: 14px;
  color: var(--or); background: rgba(196,154,40,.15);
  padding: 3px 8px; border-radius: 2px;
}

.prog-panel-meta-zecheval {
  font-family: var(--font-mono); font-size: 14px;
  color: var(--vert); background: var(--vert-clair);
  padding: 3px 8px; border-radius: 2px;
}

.prog-badge-quinte {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: #c0392b; color: #fff;
  padding: 3px 8px; border-radius: 2px;
  vertical-align: middle;
}

.prog-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 16px; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--gris-bg);
  border-radius: var(--radius); transition: background .15s;
}
.prog-row:last-child { border-bottom: none; }
.prog-row:nth-child(even) { background: var(--gris-bg); }
.prog-row:hover,
.prog-row:nth-child(even):hover { background: var(--vert-pale); }

.prog-course { font-family: var(--font-mono); font-size: 14px; color: var(--gris-text); }
.prog-course::first-letter { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--noir); }

.prog-stars { font-size: 16px; color: var(--or); letter-spacing: 1px; }

.prog-lock {
  font-size: 14px; color: var(--gris-text);  
}

.prog-footer {
  margin: 16px 16px; padding: 14px 20px;
  background: linear-gradient(90deg, var(--vert-pale), var(--or-clair));
  border-radius: var(--radius); font-size: 13px;
  font-weight: 500; color: var(--vert); text-align: center;
}

/* ── COMMENT ÇA MARCHE ── */
.steps-wrap {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--gris-border);
  border: 1px solid var(--gris-border); border-radius: var(--radius-lg); overflow: hidden;
}
.step { background: var(--blanc); padding: 40px 36px; position: relative; }
.step-num { font-family: var(--font-display); font-size: 72px; font-weight: 700; color: var(--vert-clair); line-height: .9; margin-bottom: 20px; }
.step-title { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.step-desc { font-size: 14.5px; color: var(--gris-text); line-height: 1.7; font-weight: 300; }
.step-accent { position: absolute; bottom: 0; right: 0; width: 40px; height: 40px; border-top-left-radius: 40px; background: var(--vert-pale); }

/* ── PRODUITS ── */
.produits-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.produit-card {
  background: var(--blanc); border: 1px solid var(--gris-border);
  border-radius: var(--radius-lg); padding: 32px;
  display: grid; grid-template-columns: auto 1fr; gap: 24px;
  align-items: start; transition: all .25s; position: relative; overflow: hidden;
}
.produit-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.produit-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.produit-card.ze-cheval::before  { background: var(--vert); }
.produit-card.ze-perles::before  { background: #2980b9; }
.produit-card.ze-reunions::before { background: var(--or) }
.produit-card.ze-quinte::before  { background: #8e44ad; }

.produit-icon {
  width: 56px; height: 56px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; flex-shrink: 0;
}
.ze-cheval  .produit-icon { background: var(--vert-clair); }
.ze-perles  .produit-icon { background: #ebf3fb; }
.ze-reunions .produit-icon { background: var(--or-clair); }
.ze-quinte  .produit-icon { background: #f5eefb; }

.produit-tag {
  display: inline-block; font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px; margin-bottom: 8px;
}
.ze-cheval  .produit-tag { background: var(--vert-clair); color: var(--vert); }
.ze-perles  .produit-tag { background: #ebf3fb; color: #2980b9; }
.ze-reunions .produit-tag {  background: var(--or-clair);   color: var(--or);   }
.ze-quinte  .produit-tag { background: #f5eefb; color: #8e44ad; }

.produit-name { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin-bottom: 6px; line-height: 1; }
.produit-desc { font-size: 14px; color: var(--gris-text); line-height: 1.65; margin-bottom: 14px; font-weight: 300; }
.produit-detail {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--gris-mid);
  background: var(--gris-bg); border-radius: var(--radius);
  padding: 8px 14px; width: fit-content;
}
.produit-detail-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ze-cheval  .produit-detail-dot { background: var(--vert); }
.ze-perles  .produit-detail-dot { background: var(--or); }
.ze-reunions .produit-detail-dot { background: #2980b9; }
.ze-quinte  .produit-detail-dot { background: #8e44ad; }

.produit-formule {
  margin-top: 12px; font-size: 11px; color: var(--gris-text);
  display: flex; align-items: center; gap: 6px;
}
.produit-formule-tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 2px; background: var(--gris-bg); color: var(--gris-text);
}

.ze-cheval  .btn-outline { border-color: var(--vert) !important; color: var(--vert) !important; }
.ze-perles  .btn-outline { border-color: #2980b9 !important; color: #2980b9 !important; }
.ze-reunions .btn-outline { border-color: var(--or) !important; color: var(--or) !important; }
.ze-quinte  .btn-outline { border-color: #8e44ad !important; color: #8e44ad !important; }

.ze-cheval  .btn-outline:hover { background: var(--vert-clair) !important; }
.ze-perles  .btn-outline:hover { background: #ebf3fb !important; }
.ze-reunions .btn-outline:hover { background: var(--or-clair) !important; }
.ze-quinte  .btn-outline:hover { background: #f5eefb !important; }



/* ── RÉSULTATS ── */
.results-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; }
.result-card {
  background: var(--blanc); border: 1px solid var(--gris-border);
  border-radius: var(--radius-lg); padding: 20px;
  transition: all .25s; position: relative; overflow: hidden;
}
.result-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; }
.result-card.win::before  { background: var(--vert); }
.result-card.loss::before { background: #ddd; }
.result-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.result-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.result-hippo { font-size: 14px; font-weight: 500; }
.result-course { font-family: var(--font-mono); font-size: 11px; color: var(--gris-text); background: var(--gris-bg); padding: 2px 6px; border-radius: 2px; }
.result-horse { font-size: 14px; color: var(--gris-text); margin-bottom: 14px; font-weight: 300; }
.result-gain { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--vert); line-height: 1; margin-bottom: 4px; }
.result-gain.neg { color: #c0392b; }
.result-tag { font-size: 12px; color: var(--gris-text); }

.results-slider { position: relative; overflow: hidden; }
.results-slide { display: none; }
.results-slide.active { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; animation: fadeIn .5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.results-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.results-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gris-border); border: none; cursor: pointer;
  padding: 0; transition: background .3s;
}
.results-dot.active { background: var(--vert); }

.bilan-bar {
  position: relative;
  background: var(--gris-fonce); border-radius: var(--radius-lg);
  padding: 20px 28px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.bilan-bar::before {
  content: '';
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
}
.bilan-bar.ze-cheval::before  { background: var(--vert); }
.bilan-bar.ze-perles::before  { background: #2980b9; }
.bilan-bar.ze-quinte::before  { background: #8e44ad; }
.bilan-bar.ze-reunions::before { background: var(--or); }

.bilan-left { display: flex; flex-direction: column; gap: 2px; }
.bilan-label { font-size: 14px; color: rgba(255,255,255,.6); }
.bilan-sub   { font-size: 13px; color: rgba(255,255,255,.25); }
.bilan-val   { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: #6edfaa; }

.results-cta { text-align: center; margin-top: 12px; }
.link-vert {
  font-size: 13px; font-weight: 500; color: var(--vert);
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid transparent; padding-bottom: 2px; transition: all .2s;
}
.link-vert:hover { gap: 14px; border-color: var(--vert); }


/* ── OFFRES ── */
.offers-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.offer-card {
  background: var(--blanc); border: 1px solid var(--gris-border);
  border-radius: var(--radius-lg); padding: 32px;
  position: relative; transition: all .25s;
}
.offer-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.offer-card.featured { background: var(--gris-fonce); border-color: var(--gris-fonce); transform: scale(1.02); box-shadow: var(--shadow-lg);}
.offer-card.featured .offer-name   { color: var(--blanc); }
.offer-card.featured .offer-desc   { color: rgba(255,255,255,.4); }
.offer-card.featured .offer-price  { color: var(--blanc); }
.offer-card.featured .offer-pu     { color: rgba(255,255,255,.4); }
.offer-card.featured .offer-dur    { color: rgba(255,255,255,.25); }
.offer-card.featured .offer-div    { background: rgba(255,255,255,.08); }
.offer-card.featured .offer-it     { color: rgba(255,255,255,.8); }
.offer-card.featured .offer-it.m   { color: rgba(255,255,255,.25); }
.offer-card.featured .offer-cross  { background: rgba(255,255,255,.05); color: rgba(255,255,255,.15); }
.offer-featured-badge {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--or); color: var(--noir);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 16px; border-radius: 0 0 var(--radius) var(--radius); font-weight: 600;
}
.offer-card.featured .btn-outline {
  color: var(--blanc);
  border-color: rgba(255,255,255,.4);
}
.offer-card.featured .btn-outline:hover {
  border-color: var(--blanc);
  background: rgba(255,255,255,.08);
}

.offer-name { font-family: var(--font-display); font-size: 24px; font-weight: 600; margin-bottom: 4px; }
.offer-desc { font-size: 13px; color: var(--gris-text); margin-bottom: 22px; }
.offer-price-row { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.offer-price { font-family: var(--font-display); font-size: 42px; font-weight: 700; line-height: 1; }
.offer-pu { font-size: 14px; color: var(--gris-text); }
.offer-dur { font-family: var(--font-mono); font-size: 11px; color: var(--gris-text); margin-bottom: 24px; letter-spacing: .02em; }
.offer-div { height: 1px; background: var(--gris-border); margin-bottom: 22px; }
.offer-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.offer-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.offer-check { width: 20px; height: 20px; border-radius: 50%; background: var(--vert-clair); color: var(--vert); display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; margin-top: 1px; font-weight: 600; }
.offer-check.or { background: var(--or-clair); color: var(--or); }
.offer-cross { width: 20px; height: 20px; border-radius: 50%; background: var(--gris-bg); color: #ccc; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; margin-top: 1px; }
.offer-it { color: var(--gris-mid); line-height: 1.4; }
.offer-it.m { color: var(--gris-text); opacity: .5; }
.offer-btn { width: 100%; justify-content: center; }

/* ── Fix boutons outline sur cards abonnement ── */
.offers-grid .offer-card:not(.featured) .offer-btn.btn-outline,
.zp-tunnel .offer-card:not(.featured) .offer-btn.btn-outline {
  border: 1px solid var(--gris-border) !important;
  color: var(--noir) !important;
}

.offers-grid .offer-card:not(.featured) .offer-btn.btn-outline:hover,
.zp-tunnel .offer-card:not(.featured) .offer-btn.btn-outline:hover {
  border-color: var(--vert) !important;
  color: var(--vert) !important;
}

/* ── Alignement boutons offer-cards ── */
.offers-grid {align-items: stretch;}
.offer-card {display: flex; flex-direction: column;}
.offer-btn {margin-top: auto;}


/* ── Tunnel largeur max ── */
.zp-tunnel {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

/* ── Fix boutons outline cards durée ── */
.zp-duree-card:not(.zp-duree-featured) .btn-outline {
  border: 1px solid var(--gris-border) !important;
  color: var(--noir) !important;
  background: transparent !important;
}

.zp-duree-card:not(.zp-duree-featured) .btn-outline:hover {
  border-color: var(--vert) !important;
  color: var(--vert) !important;
}

@media (max-width: 680px) {
  .zp-tunnel { padding: 0 16px; }
}





/* ── BONUS PREMIUM ── */
.bonus-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
}
.bonus-card {
  display: grid; grid-template-columns: auto 1fr; gap: 24px;
  align-items: start;
  background: var(--blanc); border: 1px solid var(--gris-border);
  border-radius: var(--radius-lg); padding: 32px;
  position: relative; overflow: hidden;
  transition: all .25s;
}
.bonus-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.bonus-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--vert), var(--or));
}
.bonus-icon {
  width: 56px; height: 56px; border-radius: var(--radius-lg);
  background: var(--vert-clair);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; flex-shrink: 0;
}
.bonus-tag {
  display: inline-block; font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px; margin-bottom: 8px;
  background: var(--vert-clair); color: var(--vert);
}
.bonus-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  margin-bottom: 10px; line-height: 1.2;
}
.bonus-desc {
  font-size: 14px; color: var(--gris-text); line-height: 1.7;
  margin-bottom: 16px; font-weight: 300;
}
.bonus-chiffre {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--vert); background: var(--vert-clair);
  padding: 6px 14px; border-radius: var(--radius);
}

@media (max-width: 960px) {
  .bonus-grid { grid-template-columns: 1fr; }
  .bonus-card { grid-template-columns: 1fr; }
}

/* ── MÉTHODE ── */
.methode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; }
.methode-card {
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg);
  padding: 32px; background: rgba(255,255,255,.03); position: relative; overflow: hidden;
}
.methode-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--vert-vif), transparent); }
.methode-icon { font-size: 28px; margin-bottom: 14px; display: block; }
.methode-title { font-size: 17px; font-weight: 500; color: var(--blanc); margin-bottom: 8px; }
.methode-desc { font-size: 13.5px; color: rgba(255,255,255,.45); line-height: 1.7; margin-bottom: 20px; }
.methode-scale { display: flex; gap: 8px; }
.scale-item { flex: 1; background: rgba(255,255,255,.05); border-radius: var(--radius); padding: 10px 8px; text-align: center; border: 1px solid rgba(255,255,255,.06); }
.scale-num { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--blanc); margin-bottom: 4px; }
.scale-label { font-size: 10px; color: rgba(255,255,255,.3); letter-spacing: .04em; }
.scale-item.active { background: rgba(26,92,62,.3); border-color: var(--vert-vif); }
.scale-item.active .scale-num  { color: #6edfaa; }
.scale-item.active .scale-label { color: rgba(110,223,170,.6); }

/* ── TESTI ── */
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.testi { background: var(--blanc); border: 1px solid var(--gris-border); border-radius: var(--radius-lg); padding: 28px; }
.testi-or { font-family: var(--font-display); font-size: 56px; font-weight: 700; color: #6edfaa; line-height: .8; margin-bottom: 12px; user-select: none; }
.testi-text { font-size: 15px; color: var(--gris-mid); line-height: 1.75; margin-bottom: 22px; font-style: italic; font-family: var(--font-display); font-weight: 400; }
.testi-author { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--gris-bg); }
.testi-av { width: 38px; height: 38px; border-radius: 50%; background: var(--vert-clair); color: var(--vert); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.testi-name { font-size: 13px; font-weight: 500; }
.testi-sub  { font-size: 11px; color: var(--gris-text); }
.testi-stars { font-size: 12px; color: var(--or); }
.testi-slider { position: relative; overflow: hidden; }
.testi-slide { display: none; }
.testi-slide.active { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; animation: fadeIn .5s ease; }

.testi-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.testi-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gris-border); border: none; cursor: pointer;
  padding: 0; transition: background .3s;
}
.testi-dot.active { background: var(--vert); }

/* ── FAQ ── */
.faq { max-width: 740px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--gris-border); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0; font-family: var(--font-display); font-size: 18px; font-weight: 500;
  cursor: pointer; gap: 20px; transition: color .2s;
}
.faq-q:hover { color: var(--vert); }
.faq-icon { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--gris-border); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--gris-text); flex-shrink: 0; transition: all .25s; font-weight: 300; }
.faq-item.open .faq-q { color: var(--vert); }
.faq-item.open .faq-icon { background: var(--vert); border-color: var(--vert); color: var(--blanc); transform: rotate(45deg); }
.faq-a { font-size: 15px; color: var(--gris-text); line-height: 1.75; padding-bottom: 22px; display: none; font-weight: 300; }
.faq-item.open .faq-a { display: block; }

/* ── NEWSLETTER ── */
.newsletter-box {
  background: var(--vert); border-radius: var(--radius-lg); padding: 52px;
  display: grid; grid-template-columns: 1fr auto; gap: 52px; align-items: center;
  position: relative; overflow: hidden;
}
.newsletter-box::before { content: ''; position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 280px; height: 280px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); }
.newsletter-box::after  { content: ''; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(255,255,255,.06); }
.newsletter-title { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--blanc); margin-bottom: 8px; position: relative; z-index: 1; }
.newsletter-desc  { font-size: 14px; color: rgba(255,255,255,.55); position: relative; z-index: 1; }
.newsletter-form  { display: flex; gap: 10px; position: relative; z-index: 1; }
.newsletter-input { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius); padding: 14px 18px; font-family: var(--font-body); font-size: 14px; color: var(--blanc); width: 260px; outline: none; transition: border-color .2s; }
.newsletter-input::placeholder { color: rgba(255,255,255,.35); }
.newsletter-input:focus { border-color: rgba(255,255,255,.5); }

/* ── FOOTER ── */
.footer { background: var(--noir); padding: 48px 40px 32px; }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 24px; }
.footer-logo { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.footer-logo-ze { color: var(--vert-vif); font-style: italic; }
.footer-logo-papier { color: rgba(255,255,255,.7); }
.footer-tagline { font-size: 12px; color: rgba(255,255,255,.3); margin-top: 6px; }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-links a { font-size: 13.5px; color: rgba(255,255,255,.35); transition: color .2s; }
.footer-links a:hover { color: rgba(255,255,255,.7); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: rgba(255,255,255,.2); }

/* ── Footer collé en bas ── */
html, body {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

#wrapper,
.tck-wrapper,
.tck-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#maincontent {
  flex: 1;
}

.footer {
  margin-top: auto;
}



/* ══════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE
══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .hero-inner, .produits-grid { grid-template-columns: 1fr; }
  .hero-card { display: block; }
  .kpi-grid { grid-template-columns: repeat(2,1fr); }
  .results-grid { grid-template-columns: repeat(2,1fr); }
  .steps-wrap, .offers-grid, .testi-grid, .methode-grid { grid-template-columns: 1fr; }
  .newsletter-box { grid-template-columns: 1fr; }
  .newsletter-form { flex-direction: column; }
  .newsletter-input { width: 100%; }
  .programme-header { grid-template-columns: 1fr; padding: 0 16px; }
  .footer-top { flex-direction: column; gap: 24px; }
  .hero-track { display: none; }
  .produit-card { grid-template-columns: 1fr; }
  .nav-burger { display: flex !important; }
  .prog-tabs { padding: 0 8px; gap: 0; }
  .prog-tab { font-size: 14px; padding: 10px 12px; }
  .prog-tabs-wrap { padding: 0 16px; }
  .prog-panel-meta { justify-content: center; flex-wrap: nowrap; gap: 8px;}
  .results-slide.active { grid-template-columns: repeat(2,1fr); }
  .bilan-bar { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 20px 16px 28px; }
  .bilan-val { font-size: 20px; }  
  .prog-panel-type { font-size: 12px !important; }
  .prog-panel-count { font-size: 12px; }
  .prog-panel-meta-zecheval { font-size: 12px; }
  .prog-panel-perles { font-size: 12px; }
  .moduletable {width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; }
  .zp-tunnel { padding: 0 16px; }
  .tck-wrapper,
  .tck-container,
  .tck-container.inner { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
  .offers-grid {grid-template-columns: 1fr !important;  width: 100% !important; max-width: 100% !important;}
  .offer-card {width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;}
  .footer { padding: 32px 16px 24px; }
 .hero-card { display: block; width: 100%; box-sizing: border-box; }
 .hero-race { grid-template-columns: 1fr auto; gap: 8px; padding: 12px 16px; }
 .race-meta { flex-wrap: wrap; gap: 4px; }
 .race-hippo { font-size: 13px; }
 .card-header-name { font-size: 15px; }
 .race-gain { font-size: 18px; }
 .hero { padding: 24px 16px 40px; min-height: auto; }
 .hero-social { padding-top: 24px; margin-bottom: 0; }
 .hero-inner { gap: 32px; }
 .bilan-bar::before { top: 20px; transform: none; }
 .abo-pricing {margin-left: -16px; margin-right: -16px; border-radius: 0;}
 .testi-slide.active { grid-template-columns: 1fr; }
 .tableau-comparatif-wrap,
 .faq ~ div table, div[style*="border-collapse"] {overflow-x: auto; display: block; width: 100%; }
 .prono-bloc-header .prono-bloc-badge { display: none; }
 .prono-bloc-badge { display: inline-block; }
 .prono-bloc-right { gap: 0; }
 .res-cheval-card { flex-wrap: wrap; gap: 12px; }
 .res-cheval-info { flex: 1 1 100%; }
 .res-cheval-result { width: 100%; text-align: left; }
 .res-table td, .res-table th { padding: 6px 8px; font-size: 12px; }
 .res-table td { white-space: nowrap; }
 .res-table span[style*="padding:4px 10px"] { padding: 3px 6px !important; font-size: 9px !important; }
 .res-quinte-bilan { flex-direction: column; gap: 8px; }
 .res-quinte-bilan-val { font-size: 32px; }
 .prono-bloc-header { flex-wrap: nowrap; align-items: center; }
 .prono-bloc-left { flex: 1; min-width: 0; }
 .prono-bloc-left .prono-bloc-icon { font-size: 13px !important; min-width: 36px; flex-shrink: 0; }
 .prono-bloc-name { min-width: 0; word-break: keep-all; }
 .prono-bloc-desc { font-size: 12px; white-space: normal; }
 .prono-bloc-right { width: auto; border-top: none; padding-top: 0; margin-top: 0; }
 .indices-grid { grid-template-columns: 1fr !important; }
 .indices-echelle { grid-template-columns: repeat(2,1fr) !important; }
 .indices-combi { grid-template-columns: repeat(2,1fr) !important; }
 .indices-combi { grid-template-columns: repeat(2,1fr) !important; }
 .kpi { padding: 20px 16px; }
 .kpi-val { font-size: 24px; }
 .course-header-left {flex-wrap: wrap; gap: 4px;  }
 .course-num {width: 100%;font-size: 10px; }
 .course-name {font-size: 15px; width: 100%;}
 .course-header-left .pronos-tag {font-size: 9px !important;}
    
#maincontent > .inner { width: 100% !important; max-width: 100% !important; padding: 24px 16px !important; margin: 0 !important; }
#maincontent > .inner:has(.hero) { padding: 0 !important; }
  
section.zp-tunnel,
#zp-tunnel {max-width: 100% !important; width: 100% !important; box-sizing: border-box !important;}
  
  
  #offres { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; }
  #maincontent { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
  #maincontent > .inner { width: 100% !important; max-width: 100% !important; padding: 24px 16px !important; margin: 0 !important; }
  #offres > .moduletable,
  #offres > .moduletable > div { 
    width: 100% !important; 
    max-width: 100% !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    box-sizing: border-box !important; 
  }
  #nav-links {
    display: none !important;
    position: fixed;
    top: 68px; left: 0; right: 0;
    height: calc(100vh - 68px);
    background: var(--blanc) !important;
    flex-direction: column;
    padding: 16px 24px;
    overflow-y: auto;
    z-index: 99;
    border-top: 1px solid var(--gris-border);
    list-style: none;
    margin: 0;
  }
  #nav-links.open { display: flex !important; }
  #nav-actions { display: none !important; }
  #nav-links li { width: 100%; list-style: none; }
  #nav-links a { display: block; padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--gris-bg); color: var(--gris-mid); }
  #nav-links a::after { display: none !important; }
  .nav-dropdown { display: block !important; position: static !important; box-shadow: none !important; border: none !important; padding: 0 0 0 16px !important; background: transparent !important; min-width: 0 !important; }
  
}

@media (max-width: 480px) {
  .prog-tab { font-size: 13px; padding: 10px 10px; }
}



/* ── PAGE PRONOS ── */
.pronos-intro {
  background: var(--gris-fonce);
  border: none;
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.pronos-intro::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--vert), var(--or));
}
.pronos-intro-date {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--or);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.pronos-intro-date::before {
  content: ''; display: inline-block;
  width: 20px; height: 1px; background: var(--or);
}
.pronos-intro-body { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.75; margin-bottom: 16px; }
.pronos-intro-body strong { color: var(--blanc); font-weight: 600; }
.pronos-intro-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pronos-tag {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em;
  background: var(--gris-bg); color: var(--gris-text);
  padding: 4px 10px; border-radius: 2px;
}
.pronos-tag-perles {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em;
  background: var(--or-clair); color: var(--or);
  padding: 4px 10px; border-radius: 2px; font-weight: 600;
}

/* ── NAV DATE ─────────────────────────────────────────────── */
.pronos-nav-date {
  text-align: center;
  margin-bottom: 24px;
}

.pronos-nav-date-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-text);
  background: var(--blanc);
  border: 1px solid var(--gris-border);
  border-radius: var(--radius);
  padding: 10px 20px;
  transition: all .2s;
  text-decoration: none;
}

.pronos-nav-date-btn:hover {
  border-color: var(--vert);
  color: var(--vert);
  background: var(--vert-pale);
}

.pronos-nav-date-icon { font-size: 15px; }

.pronos-nav-date-arrow {
  color: var(--gris-border);
  transition: color .2s, transform .2s;
  display: inline-block;
}

.pronos-nav-date-btn:hover .pronos-nav-date-arrow {
  color: var(--vert);
  transform: translateX(4px);
}


/* ACCORDÉON */
.pronos-accordeon { display: flex; flex-direction: column; gap: 8px; padding-bottom: 48px;}
.prono-bloc {border: 1px solid var(--gris-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--blanc);}
.prono-bloc-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px; cursor: pointer;
  transition: background .2s;
}

#bloc-zecheval  { border-left: 3px solid var(--vert); }
#bloc-zequinte  { border-left: 3px solid #8e44ad; }
#bloc-zeperles  { border-left: 3px solid #2980b9; }
#bloc-zereunions { border-left: 3px solid var(--or); }

.prono-bloc-header:hover { background: var(--gris-bg); }
.prono-bloc-left { display: flex; align-items: center; gap: 16px; }
.prono-bloc-icon { font-size: 32px; }
.prono-bloc-name {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  color: var(--noir); line-height: 1;
}
.prono-bloc-desc { font-size: 13px; color: var(--gris-text); margin-top: 3px; }
.prono-bloc-right { display: flex; align-items: center; gap: 12px; }
.prono-bloc-badge {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 2px;
}
.prono-bloc-badge.ze-cheval  { background: var(--vert-clair); color: var(--vert); }
.prono-bloc-badge.ze-perles  { background: #ebf3fb; color: #2980b9; }
.prono-bloc-badge.ze-reunions { background: var(--or-clair); color: var(--or); }
.prono-bloc-badge.ze-quinte  { background: #f5eefb; color: #8e44ad; }

.prono-bloc-chevron {
  font-size: 16px; color: var(--gris-text);
  transition: transform .3s;
  width: 28px; height: 28px;
  border: 1.5px solid var(--gris-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.prono-bloc.open .prono-bloc-chevron { 
  transform: rotate(180deg);
  background: var(--vert);
  border-color: var(--vert);
  color: var(--blanc);
}
.prono-bloc-body { display: none; border-top: 1px solid var(--gris-border); padding: 24px; }
.prono-bloc.open .prono-bloc-body { display: block; }


/* INFOS VISIBLES */
.prono-bloc-info {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.prono-info-row {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--gris-bg); border-radius: var(--radius);
  padding: 10px 16px; font-size: 13px;
  border: 1px solid var(--gris-border);
}
.prono-info-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris-text);
}
.prono-info-val {
  font-size: 14px; font-weight: 500; color: var(--noir);
}
.prono-stars { color: var(--or); }

/* ZONE PRONO */
.prono-zone { }
.prono-locked {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 32px;
  background: var(--gris-bg); border-radius: var(--radius-lg);
  text-align: center;
}
.prono-locked-icon { font-size: 28px; }
.prono-locked-text { font-size: 14px; color: var(--gris-text); }

/* ZECHEVAL */
.prono-cheval {
  display: flex; align-items: center; gap: 16px;
  background: var(--gris-bg); border-radius: var(--radius-lg);
  padding: 20px 24px;
}
.prono-cheval-num {
  width: 48px; height: 48px; border-radius: var(--radius-lg);
  background: var(--vert); color: var(--blanc);
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.prono-cheval-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.prono-cheval-indice { font-size: 14px; color: var(--gris-text); margin-top: 2px; }


/* ZEQUINTE */
.prono-quinte-grid {display: flex; flex-direction: column; gap: 12px;}
.prono-quinte-ligne {display: flex; gap: 12px;}
.prono-quinte-item {flex: 1; border-radius: var(--radius); padding: 12px 16px; text-align: center; border: 1px solid var(--gris-border); display: flex; flex-direction: column; align-items: center; gap: 4px;}
.prono-quinte-item.base { background: var(--vert-clair); border-color: var(--vert); }
.prono-quinte-item.belle-chance { background: var(--or-clair); border-color: var(--or); }
.prono-quinte-item.speculatif  { background: var(--gris-bg); }
.prono-quinte-role {font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-text);}
.prono-quinte-num {font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--noir); line-height: 1;}
.prono-quinte-name {font-size: 12px; color: var(--gris-mid); }
.prono-quinte-indice {display: flex; align-items: center; gap: 6px;}
.prono-quinte-indice-label {font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-text);}

/* ZEPERLES */
.zeperles-grid { display: flex; flex-direction: column; gap: 8px; }
.zeperle-row { display: flex; justify-content: space-between; align-items: center; background: var(--gris-bg); border-radius: var(--radius-lg); padding: 14px 20px; gap: 16px;}
.zeperle-meta { display: flex; align-items: center; gap: 10px; flex: 1; }
.zeperle-hippo { font-weight: 500; font-size: 14px; }
.zeperle-course { font-family: var(--font-mono); font-size: 14px; color: var(--gris-text); }
.zeperle-cheval { display: flex; align-items: center; gap: 14px; }
.zeperle-info { }
.zeperle-row {display: flex; justify-content: space-between; align-items: center; background: var(--gris-bg); border-radius: var(--radius-lg); padding: 14px 20px; gap: 16px;}
.zeperle-left { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.zeperle-l1 { display: flex; align-items: center; gap: 10px; }
.zeperle-hippo { font-size: 15px; font-weight: 600; color: var(--noir); }
.zeperle-discipline { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px;}
.zeperle-discipline.galop { background: var(--vert-clair); color: var(--vert); }
.zeperle-discipline.trot { background: rgba(41,128,185,.12); color: #2980b9; }

.zeperle-l2 { display: flex; align-items: center; gap: 8px; }
.zeperle-course { font-family: var(--font-mono); font-size: 14px; color: var(--gris-text); }
.zeperle-nom { font-size: 14px; color: var(--gris-mid); }
.zeperle-heure { font-family: var(--font-mono); font-size: 14px; color: var(--gris-text); }

.zeperle-l3 { display: flex; align-items: center; gap: 6px; }
.zeperle-indice-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gris-text);
}

/* ZEREUNIONS */
.zereunions-reunions { display: flex; flex-direction: column; gap: 8px; }
.zereunions-reunion { display: flex; justify-content: space-between; align-items: center; background: var(--gris-bg); border-radius: var(--radius-lg); padding: 16px 20px; text-decoration: none; color: inherit; transition: all .2s; border: 1px solid transparent;}
.zereunions-reunion:hover { background: var(--vert-pale); border-color: var(--vert-clair); }
.zereunions-reunion-left { display: flex; align-items: center; gap: 12px; }
.zereunions-hippo { font-weight: 500; font-size: 15px; }
.zereunions-type { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px;}
.zereunions-type.galop  { background: var(--vert-clair); color: var(--vert); }
.zereunions-type.trot  { background: rgba(192,57,43,.1); color: #c0392b; }
.zereunions-reunion-right { display: flex; align-items: center; gap: 16px; }
.zereunions-count { font-size: 13px; color: var(--gris-text); }
.zereunions-perles { font-family: var(--font-mono); font-size: 11px; color: var(--or); }
.zereunions-arrow { color: var(--vert); font-weight: 600; }

.course-close {text-align: center; margin-top: 20px; padding: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-text); cursor: pointer; border-top: 1px solid var(--gris-border); transition: color .2s;}
.course-close:hover { color: var(--noir); }

@media (max-width: 960px) {
  .prono-quinte-grid { grid-template-columns: repeat(2,1fr); }
  .prono-bloc-right { flex-direction: column; align-items: flex-end; gap: 6px; }
}


/* ══════════════════════════════════════════════════════════════
   PAGE ZEREUNIONS - REUNIONs
══════════════════════════════════════════════════════════════ */

.reunion-header {
  background: var(--gris-fonce); border-radius: var(--radius-lg);
  padding: 24px 28px; margin-bottom: 24px;
  display: flex; justify-content: space-between; align-items: center;
  position: relative; overflow: hidden;
}
.reunion-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #2980b9, var(--vert));
}
.reunion-header-left { display: flex; flex-direction: column; gap: 8px; }
.reunion-header-title {
  font-family: var(--font-display); font-size: 28px; font-weight: 700;
  color: var(--blanc); line-height: 1;
}
.reunion-header-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reunion-header-right { text-align: right; }
.reunion-header-date {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: rgba(255,255,255,.4); text-transform: uppercase; margin-bottom: 6px;
}
.reunion-header-counts { display: flex; gap: 12px; justify-content: flex-end; }
.reunion-count-item {
  font-family: var(--font-mono); font-size: 12px;
  color: rgba(255,255,255,.5); display: flex; flex-direction: column;
  align-items: flex-end; gap: 2px;
}
.reunion-count-val {
  font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--blanc);
}

/* ACCORDÉON COURSES */
.courses-list { display: flex; flex-direction: column; gap: 8px; }

.course-bloc {
  border: 1px solid var(--gris-border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--blanc);
}
.course-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; cursor: pointer; transition: background .2s;
  gap: 16px;
}
.course-header:hover { background: var(--gris-bg); }
.course-header-left { display: flex; align-items: center; gap: 16px; flex: 1; }
.course-num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--gris-text); background: var(--gris-bg);
  padding: 4px 10px; border-radius: var(--radius); white-space: nowrap;
}
.course-name {
  font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--noir);
}
.course-header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.course-indice { font-size: 14px; color: var(--or); letter-spacing: 1px; }
.course-heure {
  font-family: var(--font-mono); font-size: 11px; color: var(--gris-text);
}
.course-chevron {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--gris-border); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--gris-text); transition: all .3s; flex-shrink: 0;
}
.course-bloc.open .course-chevron {
  transform: rotate(180deg); background: #2980b9;
  border-color: #2980b9; color: var(--blanc);
}
.course-body { display: none; border-top: 1px solid var(--gris-border); padding: 20px; }
.course-bloc.open .course-body { display: block; }

/* INFOS COURSE */
.course-infos {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.course-info-item {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--gris-bg); border-radius: var(--radius);
  padding: 8px 14px; border: 1px solid var(--gris-border);
}
.course-info-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris-text);
}
.course-info-val { font-size: 14px; font-weight: 500; color: var(--noir); }
.course-info-val .prono-stars { font-size: 14px; }

/* CHEVAUX */
.cheval-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 24px; }

.cheval-card {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--gris-border);
}
.cheval-card.base       { border-top: 3px solid var(--vert); }
.cheval-card.belle-chance { border-top: 3px solid var(--or); }
.cheval-card.speculatif { border-top: 3px solid var(--gris-border); }

.cheval-card-header {
  padding: 12px 14px 10px;
  display: flex; align-items: center; gap: 12px;
}
.cheval-card.base       .cheval-card-header { background: var(--vert-clair); }
.cheval-card.belle-chance .cheval-card-header { background: var(--or-clair); }
.cheval-card.speculatif   .cheval-card-header { background: var(--gris-bg); }

.cheval-role {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase;
}
.cheval-card.base         .cheval-role { color: var(--vert); }
.cheval-card.belle-chance .cheval-role { color: var(--or); }
.cheval-card.speculatif   .cheval-role { color: var(--gris-text); }

.cheval-num {
  width: 36px; height: 36px; border-radius: var(--radius);
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--blanc);
}
.cheval-card.base         .cheval-num { background: var(--vert); }
.cheval-card.belle-chance .cheval-num { background: var(--or); color: var(--noir); }
.cheval-card.speculatif   .cheval-num { background: var(--gris-mid); }

.cheval-info { flex: 1; }
.cheval-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--noir); line-height: 1.2; }
.cheval-indice-row { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.cheval-indice-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-text); }

/* STATS CHEVAL */
.cheval-stats { padding: 10px 14px; }
.cheval-stats-context {
  font-size: 12px; color: var(--gris-text); line-height: 1.5;
  margin-bottom: 10px; font-style: italic;
}
.cheval-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--gris-border); border: 1px solid var(--gris-border);
  border-radius: var(--radius); overflow: hidden;
}
.cheval-stat-row {
  display: contents;
}
.cheval-stat-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gris-text);
  background: var(--blanc); padding: 6px 10px;
  grid-column: 1; border-bottom: 1px solid var(--gris-border);
}
.cheval-stat-vals {
  display: flex; gap: 0;
  grid-column: 2; background: var(--blanc);
  border-bottom: 1px solid var(--gris-border);
}
.cheval-stat-val {
  flex: 1; padding: 6px 8px; font-size: 13px; font-weight: 500;
  text-align: center; color: var(--noir);
}
.cheval-stat-val:first-child { border-right: 1px solid var(--gris-border); }
.cheval-stat-row:nth-child(even) .cheval-stat-label,
.cheval-stat-row:nth-child(even) .cheval-stat-vals { background: var(--gris-bg); }
.cheval-stats-header {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--gris-fonce);
}
.cheval-stats-header-label { padding: 5px 10px; font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.4); letter-spacing: .06em; text-transform: uppercase; }
.cheval-stats-header-cols { display: flex; }
.cheval-stats-header-col { flex: 1; padding: 5px 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: rgba(255,255,255,.7); text-align: center; letter-spacing: .06em; text-transform: uppercase; }
.cheval-stats-header-col:first-child { border-right: 1px solid rgba(255,255,255,.1); }
.cheval-stat-echantillon {
  font-family: var(--font-mono); font-size: 11px; color: var(--gris-text);
  text-align: right; padding: 6px 14px; background: var(--gris-bg);
  border-top: 1px solid var(--gris-border);
}

/* STATS SECTION */
.stats-section { margin-bottom: 20px; }
.stats-section-title {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vert); background: var(--vert-clair);
  border-left: 4px solid var(--vert);
  padding: 10px 14px; border-radius: var(--radius);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.stats-section-title::after { display: none; }

/* STATS COUPLÉ */
.couple-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.couple-card {
  background: var(--gris-bg); border-radius: var(--radius);
  border: 1px solid var(--gris-border); overflow: hidden;
}
.couple-card-header {
  background: var(--gris-fonce); padding: 8px 12px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.7); letter-spacing: .04em; text-align: center;
}
.couple-card-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--gris-fonce); border-bottom: 1px solid var(--gris-border);
}
.couple-card-col {
  padding: 4px 8px; font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,.5); text-align: center; letter-spacing: .06em; text-transform: uppercase;
}
.couple-card-col:first-child { border-right: 1px solid rgba(255,255,255,.1); }
.couple-stat { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.couple-stat-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gris-text);
  padding: 5px 10px; background: var(--blanc);
  border-bottom: 1px solid var(--gris-border);
}
.couple-stat-val {
  font-size: 11px; font-weight: 500; color: var(--noir);
  padding: 5px 8px; text-align: center; background: var(--blanc);
  border-bottom: 1px solid var(--gris-border); border-left: 1px solid var(--gris-border);
}
.couple-stat:nth-child(even) .couple-stat-label,
.couple-stat:nth-child(even) .couple-stat-val { background: var(--gris-bg); }
.couple-echantillon {
  font-family: var(--font-mono); font-size: 11px; color: var(--gris-text);
  text-align: right; padding: 5px 10px; background: var(--gris-bg);
}

/* STATS TRIO */
.trio-card {
  background: var(--gris-bg); border: 1px solid var(--gris-border);
  border-radius: var(--radius); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
}
.trio-card-header {
  grid-column: 1 / 3; background: var(--gris-fonce);
  padding: 8px 14px; font-family: var(--font-mono); font-size: 14px;
  color: rgba(255,255,255,.5); letter-spacing: .06em; text-transform: uppercase;
}
.trio-card-col-headers {
  grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: var(--gris-fonce); border-bottom: 1px solid rgba(255,255,255,.08);
}
.trio-col-header {
  padding: 4px 10px; font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,.5); text-align: center; letter-spacing: .06em; text-transform: uppercase;
}
.trio-col-header:not(:first-child) { border-left: 1px solid rgba(255,255,255,.08); }
.trio-stat { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column: 1/3; }
.trio-stat-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gris-text);
  padding: 5px 10px; background: var(--blanc);
  border-bottom: 1px solid var(--gris-border);
}
.trio-stat-val {
  font-size: 11px; font-weight: 500; color: var(--noir);
  padding: 5px 10px; text-align: center; background: var(--blanc);
  border-bottom: 1px solid var(--gris-border); border-left: 1px solid var(--gris-border);
}
.trio-stat:nth-child(even) .trio-stat-label,
.trio-stat:nth-child(even) .trio-stat-val { background: var(--gris-bg); }
.trio-echantillon {
  grid-column: 1/3; font-family: var(--font-mono); font-size: 11px;
  color: var(--gris-text); text-align: right;
  padding: 5px 10px; background: var(--gris-bg);
}

/* LIENS FIN DE PAGE */
.reunion-footer { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--gris-border); }
.reunion-footer a { font-size: 13px; color: var(--vert); font-weight: 500; }
.reunion-footer a:hover { text-decoration: underline; }

@media (max-width: 960px) {
  .cheval-cards { grid-template-columns: 1fr; }
  .couple-grid  { grid-template-columns: 1fr; }
  .reunion-header { flex-direction: column; gap: 16px; }
  .reunion-header-right { text-align: left; }
  .reunion-header-counts { justify-content: flex-start; }
}


/* ══════════════════════════════════════════════════════════════
   PAGE RÉSULTATS
══════════════════════════════════════════════════════════════ */
.resultats-header {
  background: var(--gris-fonce); border-radius: var(--radius-lg);
  padding: 24px 28px; margin-bottom: 24px;
  position: relative; overflow: hidden;
}
.resultats-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--vert), var(--or));
}
.resultats-header-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 16px;
}
.resultats-header-title {
  font-family: var(--font-display); font-size: 28px; font-weight: 700;
  color: var(--blanc); line-height: 1;
}
.resultats-header-date {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--or);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.resultats-header-date::before {
  content: ''; display: inline-block;
  width: 20px; height: 1px; background: var(--or);
}
.resultats-header-bilan {
  background: rgba(110,223,170,.1); border: 1px solid rgba(110,223,170,.2);
  border-radius: var(--radius); padding: 10px 20px; text-align: right;
}
.resultats-bilan-label { font-size: 13px; color: rgba(255,255,255,.4); margin-bottom: 4px; }
.resultats-bilan-val {
  font-family: var(--font-display); font-size: 28px; font-weight: 700; color: #6edfaa;
}
.resultats-header-meta { display: flex; gap: 10px; flex-wrap: wrap; }

/* RÉSULTAT CHEVAL CARD */
.res-cheval-card {
  display: flex; align-items: center; gap: 20px;
  background: var(--gris-bg); border-radius: var(--radius-lg);
  padding: 20px 24px; margin-bottom: 12px;
}
.res-cheval-num {
  width: 52px; height: 52px; border-radius: var(--radius-lg);
  background: var(--vert); color: var(--blanc);
  font-family: var(--font-display); font-size: 28px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.res-cheval-num.loss { background: var(--gris-mid); }
.res-cheval-info { flex: 1; }
.res-cheval-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--noir); }
.res-cheval-meta { font-size: 13px; color: var(--gris-text); margin-top: 3px; }
.res-cheval-result { text-align: right; }
.res-cheval-gain {
  font-family: var(--font-display); font-size: 32px; font-weight: 700;
  color: var(--vert); line-height: 1;
}
.res-cheval-gain.neg { color: #c0392b; }
.res-cheval-rapport { font-size: 12px; color: var(--gris-text); margin-top: 4px; }

/* RÉSULTAT QUINTÉ */
.res-quinte-grid {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px;
}
.res-quinte-ligne { display: flex; gap: 10px; }
.res-quinte-item {
  flex: 1; border-radius: var(--radius); padding: 12px 14px;
  text-align: center; border: 1px solid var(--gris-border);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.res-quinte-item.base { background: var(--vert-clair); border-color: var(--vert); }
.res-quinte-item.belle-chance { background: var(--or-clair); border-color: var(--or); }
.res-quinte-item.speculatif { background: var(--gris-bg); }
.res-quinte-item.touche { border-width: 2px; }
.res-quinte-item.base.touche { border-color: var(--vert); }
.res-quinte-item.belle-chance.touche { border-color: var(--or); }
.res-quinte-item.speculatif.touche { border-color: var(--gris-mid); }
.res-quinte-role {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gris-text);
}
.res-quinte-num {
  font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--noir);
}
.res-quinte-name { font-size: 11px; color: var(--gris-mid); }
.res-quinte-check { font-size: 14px; color: var(--vert); }

.res-quinte-bilan {
  background: var(--gris-fonce); border-radius: var(--radius-lg);
  padding: 16px 20px; display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.res-quinte-bilan-label { font-size: 15px; color: rgba(255,255,255,.5); }
.res-quinte-bilan-val {
  font-family: var(--font-display); font-size: 24px; font-weight: 700; color: #6edfaa;
}

/* RÉSULTAT TABLE */
.res-table {
  width: 100%; border-collapse: collapse;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--gris-border); margin-bottom: 12px;
  font-size: 13px;
}
.res-table thead tr { background: var(--gris-bg); }
.res-table thead th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris-text);
  padding: 8px 12px; text-align: center; font-weight: 500;
  border-right: 1px solid var(--gris-border);
  border-bottom: 2px solid var(--gris-border);
}
.res-table thead th:last-child { border-right: none; }
.res-table tbody tr { border-bottom: 1px solid var(--gris-border); }
.res-table tbody tr:last-child { border-bottom: none; }
.res-table tbody tr:nth-child(even) { background: var(--gris-bg); }
.res-table tbody td {
  padding: 8px 12px; text-align: center;
  border-right: 1px solid var(--gris-border); color: var(--noir);
}
.res-table tbody td:last-child { border-right: none; }
.res-table .td-gain { font-weight: 600; color: var(--vert); }
.res-table .td-gain.neg { color: #c0392b; }
.res-table .td-hippo { font-weight: 500; text-align: left; }
.res-table .td-best {
  font-weight: 700; color: var(--vert);
  background: var(--vert-clair);
  position: relative;
}

/* SECTION TITRE RÉSULTATS */
.res-section-title {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vert);
  background: var(--vert-clair); border-left: 4px solid var(--vert);
  padding: 8px 14px; border-radius: var(--radius);
  margin: 20px 0 12px; display: block;
}

/* BANDEAUX RAPPORTS */
.res-bandeau {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; padding: 8px 14px;
  border-radius: var(--radius); margin: 16px 0 10px;
  display: block; width: 100%; box-sizing: border-box;
  border-left: 4px solid transparent;
}
.res-bandeau.simple { background: var(--vert-clair); color: var(--vert); border-left-color: var(--vert); }
.res-bandeau.couple { background: #ebf3fb; color: #2980b9; border-left-color: #2980b9; }
.res-bandeau.trio   { background: var(--or-clair); color: var(--or); border-left-color: var(--or); }

/* LOGO PMU dans tableaux */
.res-logo {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gris-text);
}





/* ══════════════════════════════════════════════════════════════
   PAGE ESSAI GRATUIT
══════════════════════════════════════════════════════════════ */
.essai-hero {
  background: #161e1a;
  border-radius: 10px;
  padding: 48px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
}
.essai-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1a5c3e, #c49a28);
}
.essai-hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(196,154,40,.15); border: 1px solid rgba(196,154,40,.2);
  border-radius: 4px; padding: 6px 14px; margin-bottom: 24px;
  font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: #c49a28;
}
.essai-hero-tag-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #c49a28; animation: pulse 2s infinite;
}
.essai-hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 42px; font-weight: 700; color: #fafcfa;
  line-height: 1.15; margin-bottom: 16px; letter-spacing: -.02em;
}
.essai-hero h1 em { color: #6edfaa; font-style: italic; }
.essai-hero-desc {
  font-size: 16px; color: rgba(255,255,255,.5);
  line-height: 1.75; max-width: 480px;
  margin: 0 auto 32px; font-weight: 300;
}
.essai-produits {
  display: flex; justify-content: center; gap: 12px;
  margin-bottom: 40px; flex-wrap: wrap;
}
.essai-produit {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px; padding: 8px 16px;
  font-size: 13px; color: rgba(255,255,255,.7);
}
.essai-produit-icon { font-size: 18px; }
.essai-produit-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px; font-weight: 600; color: #fafcfa;
}
.essai-produit-desc {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

/* FORMULAIRE */
.essai-form-wrap {
  background: #fafcfa; border: 1px solid #d0dbd4;
  border-radius: 10px; padding: 40px;
  max-width: 520px; margin: 0 auto 32px;
  position: relative; overflow: hidden;
}
.essai-form-wrap::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #1a5c3e, #c49a28);
}
.essai-form-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px; font-weight: 700; color: #0c100e;
  margin-bottom: 6px; text-align: center;
}
.essai-form-sub {
  font-size: 13px; color: #5a6b62;
  text-align: center; margin-bottom: 28px;
}
.essai-field { margin-bottom: 16px; }
.essai-field label {
  display: block;
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: #5a6b62; margin-bottom: 6px;
}
.essai-field input {
  width: 100%; padding: 12px 16px;
  border: 1px solid #d0dbd4; border-radius: 4px;
  font-family: 'Outfit', sans-serif; font-size: 14px;
  color: #0c100e; background: #fafcfa;
  outline: none; transition: border-color .2s;
  box-sizing: border-box;
}
.essai-field input:focus { border-color: #1a5c3e; }
.essai-field input::placeholder { color: #d0dbd4; }
.essai-submit {
  width: 100%; padding: 15px;
  background: #1a5c3e; color: #fafcfa;
  border: none; border-radius: 4px;
  font-family: 'Outfit', sans-serif; font-size: 15px;
  font-weight: 500; cursor: pointer;
  transition: background .2s; margin-top: 8px;
}
.essai-submit:hover { background: #20754e; }
.essai-mentions {
  font-size: 11px; color: #5a6b62;
  text-align: center; margin-top: 14px; line-height: 1.6;
}
.essai-mentions a { color: #1a5c3e; text-decoration: underline; }

/* GARANTIES */
.essai-garanties {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 12px; max-width: 520px; margin: 0 auto 40px;
}
.essai-garantie {
  background: #f4f6f4; border-radius: 4px;
  padding: 14px 12px; text-align: center;
  border: 1px solid #d0dbd4;
}
.essai-garantie-icon { font-size: 22px; margin-bottom: 6px; }
.essai-garantie-label {
  font-size: 12px; color: #5a6b62; line-height: 1.4;
}
.essai-garantie-label strong { color: #0c100e; display: block; font-size: 13px; font-weight: 500; }

/* CE QUE VOUS RECEVEZ */
.essai-receive {
  max-width: 520px; margin: 0 auto 40px;
}
.essai-receive-title {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: #1a5c3e; background: #e4f0ea;
  border-left: 4px solid #1a5c3e;
  padding: 8px 14px; border-radius: 4px;
  margin-bottom: 12px; display: block;
}
.essai-receive-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid #d0dbd4;
}
.essai-receive-item:last-child { border-bottom: none; }
.essai-receive-emoji { font-size: 22px; flex-shrink: 0; }
.essai-receive-text { flex: 1; }
.essai-receive-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px; font-weight: 600; color: #0c100e;
  line-height: 1; margin-bottom: 4px;
}
.essai-receive-desc { font-size: 13px; color: #5a6b62; line-height: 1.5; }
.essai-receive-badge {
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px; flex-shrink: 0;
  align-self: center;
}
.essai-receive-badge.cheval { background: #e4f0ea; color: #1a5c3e; }
.essai-receive-badge.perles { background: #ebf3fb; color: #2980b9; }


/* ══════════════════════════════════════════════════════════════
   FORMULAIRE CONVERTFORM
══════════════════════════════════════════════════════════════ */
.cta-block .convertforms,.cta-block form{  max-width:820px;  margin:8px auto 0;}
.cta-block .cf-form-group,
.cta-block .cf-control-group,
.cta-block .cf-fields,
.cta-block .cf-row{  width:100%;}
.cta-block input[type="email"],
.cta-block input[type="text"]{  display:block;  width:100%;  max-width:520px;  margin:0 auto 4px !important;  height:48px;  padding:0 18px;  border-radius:14px;  border:1px solid rgba(15,23,42,.14);  background:#fff;  
  font-size:16px;  color:var(--text);  box-sizing:border-box;}

.cta-block input[type="email"]::placeholder,
.cta-block input[type="text"]::placeholder{  color:#8b96a8;}
.cta-block .cf-captcha,
.cta-block .cf-recaptcha,
.cta-block .cf-hcaptcha,
.cta-block .h-captcha,
.cta-block .g-recaptcha{  display:flex;  justify-content:center;  margin:4px auto !important;}
.cta-block .cf-consent,
.cta-block .cf-checkbox-group,
.cta-block .cf-field-type-checkbox{  display:flex;  justify-content:center;  margin:2px auto 4px !important;  text-align:center;}
.cta-block .cf-consent label,
.cta-block .cf-checkbox-group label,
.cta-block .cf-field-type-checkbox label{  display:inline-flex;  align-items:center;  gap:10px;  font-size:14px;  color:#314152;}
.cta-block .cf-field{  margin-bottom:4px !important;}
.cta-block button,
.cta-block input[type="submit"],
.cta-block .cf-btn{  display:block;  width:auto;  min-width:280px;  max-width:420px;  margin:6px auto 0 !important;  padding:15px 28px;  border:none;  border-radius:999px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));  color:#111;  font-size:16px;  font-weight:700;  box-shadow:0 10px 22px rgba(200,155,67,.22);  text-align:center;  cursor:pointer;}

.cta-block .cf-btn-full,
.cta-block .cf-btn-block{  width:auto !important;  max-width:420px;  margin-left:auto !important;  margin-right:auto !important;}
.cta-block .cf-response,
.cta-block .cf-help,
.cta-block .cf-note{  text-align:center;}
.cta-block .cf-control-group{  margin-bottom:4px !important;}
.cta-block .cf-input{  margin-bottom:4px !important;  height:48px !important;}

body .cta-block .cf-control-group,
body .cta-block .cf-control-input,
body .cta-block .cf-fields .cf-control-group{  margin-bottom:4px !important;  padding-bottom:0 !important;}
body .cta-block .cf-input{  margin-bottom:0 !important;  height:48px !important;}
body .cta-block .cf-captcha-fix,
body .cta-block .cf-captcha-fix .cf-control-input{  margin-bottom:4px !important;  margin-top:0 !important;  padding-bottom:0 !important;  padding-top:0 !important;}
body .cta-block .cf-checkbox-group{  margin-bottom:4px !important;  margin-top:0 !important;  padding-bottom:0 !important;  padding-top:0 !important;}
body .cta-block fieldset.cf-control-group,
body .cta-block .cf-list,
body .cta-block .cf-checkbox-group{  margin-bottom:4px !important;  margin-top:0 !important;  padding-bottom:0 !important;  padding-top:0 !important;}
body .cta-block .cf-list{  row-gap:0 !important;  column-gap:0 !important;  gap:0 !important;}
body .cta-block .cf-control-input .cf-list,
body .cta-block .cf-control-input{  row-gap:0 !important;  gap:0 !important;  margin:0 !important;  padding:0 !important;}
body .cta-block .cf-text-center{  margin-top:0 !important;  padding-top:0 !important;}
body .cta-block .cf-control-group[data-type="submit"]{margin-top:0 !important;  padding-top:0 !important;}
body .cta-block .cf-input{  border-radius:0 !important;}

@media(max-width:680px){
  .cta-block input[type="email"],
  .cta-block input[type="text"]{max-width:100%;}
  .cta-block button,
  .cta-block input[type="submit"],
  .cta-block .cf-btn{ width:100%; max-width:100%; min-width:0;}
}


/* LIMITE LARGEUR CONVERTFORM */
.convertforms,
.convertforms-form,
.cf-form-wrap {  max-width: 600px;  margin-left: auto;  margin-right: auto;}


/* Masque label Captcha obligatoire */
#jform_captcha-lbl {display: none !important;}

.zp-btn-essai {
  background: #1a5c3e !important;
  color: #fafcfa !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: Outfit, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  transition: background .2s !important;
}
.zp-btn-essai:hover { background: #20754e !important; }

.zp-confirmation {
  background: #fafcfa !important;
  color: #0c100e !important;
}

.cf-response:not(:has(strong[style*="1a5c3e"])) {
  background: #fdf0ee !important;
  color: #c0392b !important;
  border-left: 4px solid #c0392b !important;
  border-radius: 4px !important;
  padding: 14px 18px !important;
}

.cf-response:has(strong[style*="1a5c3e"]) {
  background: #fafcfa !important;
  border: 1px solid #d0dbd4 !important;
  border-radius: 4px !important;
  padding: 14px 18px !important;
}





/* ══════════════════════════════════════════════════════════════
   BDD
══════════════════════════════════════════════════════════════ */
/* ── Base indices viewer ── */
.zp-select {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--noir);
  background: var(--blanc);
  border: 1px solid var(--gris-border);
  border-radius: var(--radius);
  padding: 7px 10px;
  outline: none;
  transition: border-color .2s;
  min-width: 160px;
}
.zp-select:focus { border-color: var(--vert); }

.zp-reset {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-text);
  background: var(--blanc);
  border: 1px solid var(--gris-border);
  border-radius: var(--radius);
  padding: 7px 14px;
  cursor: pointer;
  transition: all .2s;
}
.zp-reset:hover { border-color: var(--vert); color: var(--vert); }

/* DataTables surcharge ZePapier */
#tblIndices.dataTable thead tr { background: var(--gris-fonce); }
#tblIndices thead th,
#tblIndices thead td,
table#tblIndices > thead > tr > th {
  font-family: 'DM Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.6) !important;
  padding: 7px 8px !important;
  white-space: nowrap !important;
  font-weight: 400 !important;
  background: #161e1a !important;
}
#tblIndices.dataTable thead th:last-child { border-right: none !important; }
#tblIndices.dataTable thead th.dt-orderable-asc,
#tblIndices.dataTable thead th.dt-orderable-desc { cursor: pointer; }

#tblIndices thead th .dt-column-title {
  font-size: 9px !important;
  font-family: 'DM Mono', monospace !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}

#tblIndices.dataTable tbody tr { border-bottom: 1px solid var(--gris-border); }
#tblIndices.dataTable tbody tr:nth-child(even) { background: var(--gris-bg); }
#tblIndices.dataTable tbody tr:hover { background: var(--vert-pale) !important; }
#tblIndices.dataTable tbody td {
  font-size: 13px !important;
  padding: 8px 12px !important;
  color: var(--noir) !important;
  border-right: 1px solid var(--gris-border) !important;
}
#tblIndices.dataTable tbody td:last-child { border-right: none !important; }

/* Couleurs réussite */
#tblIndices tbody tr.r-success td { background-color: #d4edda !important; }
#tblIndices tbody tr.r-warn td    { background-color: #fff3cd !important; }

/* Pagination et contrôles DataTables */
.dt-container .dt-search input {
  font-family: var(--font-body);
  font-size: 13px;
  border: 1px solid var(--gris-border);
  border-radius: var(--radius);
  padding: 6px 10px;
  outline: none;
  transition: border-color .2s;
}
.dt-container .dt-search input:focus { border-color: var(--vert); }

.dt-container .dt-paging button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  border: 1px solid var(--gris-border);
  border-radius: var(--radius);
  padding: 4px 10px;
  cursor: pointer;
  background: var(--blanc);
  color: var(--gris-text);
  transition: all .2s;
  margin: 0 2px;
}
.dt-container .dt-paging button:hover { border-color: var(--vert); color: var(--vert); }
.dt-container .dt-paging button.current {
  background: var(--vert);
  color: var(--blanc);
  border-color: var(--vert);
}

.dt-container .dt-info {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--gris-text);
}

.dt-container .dt-length select {
  font-family: var(--font-body);
  font-size: 13px;
  border: 1px solid var(--gris-border);
  border-radius: var(--radius);
  padding: 4px 8px;
  outline: none;
}

#tblIndices thead th span.dt-column-title,
#tblIndices > thead > tr > th > span.dt-column-title {
  font-size: 9px !important;
  font-family: 'DM Mono', monospace !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

#tblIndices > thead > tr > th {
  font-size: 9px !important;
  padding: 6px 8px !important;
  background: #161e1a !important;
  color: rgba(255,255,255,.6) !important;
  white-space: nowrap !important;
}

#tblIndices { width: 100% !important; }
#tblIndices td, #tblIndices th { white-space: nowrap; }
.dt-container { overflow-x: auto; }


/* ══════════════════════════════════════════════════════════════
   				REDUIRE LARGEUR FORMULAIRE CONNEXION
══════════════════════════════════════════════════════════════ */

.com-users-login{max-width:640px; margin:56px auto; padding:36px 34px 28px; background:#fafcfa; border-radius:22px; border:1px solid rgba(15,23,42,.08); box-shadow:0 16px 40px rgba(15,23,42,.08);}
.com-users-login form{ max-width:480px; margin:0 auto;}

/* groupes */
.com-users-login .control-group,
.com-users-login .form-group,
.com-users-login .mb-3{margin-bottom:18px;}

/* labels */
.com-users-login label{display:block; margin-bottom:8px; font-size:14px; font-weight:700; color:var(--text);}

/* champs texte/password */
.com-users-login input[type="text"],
.com-users-login input[type="email"],
.com-users-login input[type="password"]{width:100%;height:52px;padding:0 16px;border-radius:14px;border:1px solid rgba(15,23,42,.12);background:#f7f9fc;color:var(--text);font-size:16px; box-sizing:border-box; box-shadow:none;}
.com-users-login input[type="text"]:focus,
.com-users-login input[type="email"]:focus,
.com-users-login input[type="password"]:focus{ outline:none; border-color:rgba(200,155,67,.55); background:#fff; box-shadow:0 0 0 4px rgba(200,155,67,.10);}

/* bloc mot de passe + icône */
.com-users-login .input-group,
.com-users-login .controls,
.com-users-login .password-group{display:flex; align-items:center; gap:0;}
.com-users-login .input-group input[type="password"],
.com-users-login .controls input[type="password"]{border-top-right-radius:0; border-bottom-right-radius:0;}
.com-users-login .input-group-text,
.com-users-login .btn-password,
.com-users-login .input-group button,
.com-users-login .controls button{height:52px; min-width:52px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(15,23,42,.12); 
  border-left:none; border-top-right-radius:14px; border-bottom-right-radius:14px; background:#f7f9fc; color:#314152; cursor:pointer; box-shadow:none; padding:0 14px;}

/* remember me */
.com-users-login .remember,
.com-users-login .form-check,
.com-users-login .checkbox{  display:flex;  align-items:center;  gap:10px;  margin:6px 0 20px;}
.com-users-login input[type="checkbox"]{  width:16px;  height:16px;  margin:0;  accent-color:#c89b43;}
.com-users-login .remember label,
.com-users-login .form-check label,
.com-users-login .checkbox label{  margin:0;  font-size:14px;  font-weight:500;  color:#314152;}

/* bouton connexion ICI */
.com-users-login .btn,
.com-users-login button[type="submit"],
.com-users-login input[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:170px;height:50px;padding:0 24px;border:none;border-radius:999px;
  background:var(--vert);color:#fff;font-size:16px;font-weight:800;
  cursor:pointer;box-shadow:0 10px 22px rgba(240,146,26,.22);
  transition:transform .2s ease,box-shadow .2s ease;
}


.com-users-login .btn:hover,
.com-users-login button[type="submit"]:hover,
.com-users-login input[type="submit"]:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 26px rgba(240,146,26,.30);
}

/* liens du bas */
.com-users-login ul,
.com-users-login .nav,
.com-users-login .list-group{list-style:none;margin:28px 0 0;padding:0;border:1px solid rgba(15,23,42,.08);border-radius:14px;overflow:hidden;}
.com-users-login ul li,
.com-users-login .nav li,
.com-users-login .list-group-item{margin:0;border-top:1px solid rgba(15,23,42,.08);}
.com-users-login ul li:first-child,
.com-users-login .nav li:first-child,
.com-users-login .list-group-item:first-child{border-top:none;}
.com-users-login ul a,
.com-users-login .nav a,
.com-users-login .list-group-item a{display:block;padding:14px 16px;text-decoration:none;color:#314152;font-size:15px;transition:background .2s ease, color .2s ease;}
.com-users-login ul a:hover,
.com-users-login .nav a:hover,
.com-users-login .list-group-item a:hover{background:#f9fbfd;color:#9b6d18;}

.com-users-login__reset:hover,
.com-users-login__remind:hover,
.com-users-login__register:hover{
  color:var(--vert) !important;
}


/* responsive */
@media (max-width:680px){
  .com-users-login{margin:28px auto;padding:24px 18px 20px;border-radius:18px;}
  .com-users-login form{max-width:100%;}
  .com-users-login .btn,
  .com-users-login button[type="submit"],
  .com-users-login input[type="submit"]{width:100%;}
}

/* ===== Fix champ mot de passe + oeil ===== */
.com-users-login .input-group{ display:grid !important; grid-template-columns:minmax(0,1fr) 56px !important; align-items:stretch !important; width:100% !important;}
.com-users-login .input-group > input[type="password"],
.com-users-login .input-group > input[type="text"],
.com-users-login .input-group > .form-control{ width:100% !important; min-width:0 !important; margin:0 !important; border-top-right-radius:0 !important; border-bottom-right-radius:0 !important;}
.com-users-login .input-group > .input-group-text,
.com-users-login .input-group > button,
.com-users-login .input-group > .btn{ width:56px !important; min-width:56px !important;
  height:52px !important; margin:0 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important;
  border:1px solid rgba(15,23,42,.12) !important; border-left:none !important; border-top-left-radius:0 !important; border-bottom-left-radius:0 !important; border-top-right-radius:14px !important; 
  border-bottom-right-radius:14px !important; background:#f7f9fc !important; box-shadow:none !important; overflow:hidden !important;}
.com-users-login form,
.com-users-login .control-group,
.com-users-login .form-group,
.com-users-login .mb-3,
.com-users-login .input-group{ min-width:0;}

/* cohérence au focus */
.com-users-login .input-group:focus-within > input[type="password"],
.com-users-login .input-group:focus-within > input[type="text"],
.com-users-login .input-group:focus-within > .form-control{ border-color:rgba(200,155,67,.55) !important; background:#fff !important;}
.com-users-login .input-group:focus-within > .input-group-text,
.com-users-login .input-group:focus-within > button,
.com-users-login .input-group:focus-within > .btn{
  border-color:rgba(200,155,67,.55) !important;
  background:#fff !important;
}
/* au focus, l'ensemble reste visuellement cohérent */
.com-users-login .input-group:focus-within > input[type="password"],
.com-users-login .input-group:focus-within > input[type="text"]{border-color:rgba(200,155,67,.55) !important;background:#fff !important;}

.com-users-login .input-group:focus-within > .input-group-text,
.com-users-login .input-group:focus-within > button,
.com-users-login .input-group:focus-within > .btn{border-color:rgba(200,155,67,.55) !important;background:#fff !important;}



/* ══════════════════════════════════════════════════════════════
   TABLEAUX DE PRONOS — ZePapier
══════════════════════════════════════════════════════════════ */

/* ── TABLEAU PARTANTS ─────────────────────────────────────── */
.tableau_chevaux {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: center;
}

.tableau_hippodrome {
  background: var(--vert);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  padding: 10px 16px;
  letter-spacing: .04em;
}

.tableau_nom_colonne {
  background: var(--gris-fonce);
  color: var(--gris-mid);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 8px 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gris-border);
}

.tableau_indice_course {
  background: rgba(253, 253, 163, 0.12);
  color: var(--or);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gris-border);
}

.tableau_indice_cheval {
  background: rgba(110, 223, 170, 0.10);
  color: var(--vert);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gris-border);
}

/* ── RÉUNIONS ─────────────────────────────────────────────── */
.bandeau_reunion {
  background: var(--vert);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  padding: 10px 16px;
  letter-spacing: .04em;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* ── BANDEAUX PARIS ───────────────────────────────────────── */
.bandeau_simple {
  background: #0598c1;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 6px 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bandeau_couple {
  background: #ea690c;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 6px 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bandeau_trio {
  background: var(--or);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 6px 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── BLOCS COURSE ─────────────────────────────────────────── */
.tableau_course {
  width: 100%;
  border: 1px solid var(--gris-border);
  border-radius: var(--radius);
  padding: 12px 16px 16px;
  margin-bottom: 16px;
  background: var(--gris-fonce);
}

.tableau_course_conditions,
.tableau_course_ic {
  width: 100%;
  padding-bottom: 8px;
  line-height: 1.5;
}


/* ══════════════════════════════════════════════════════════════
   FOND COULEUR SUR LISTES + COULEUR PAGINATION
══════════════════════════════════════════════════════════════ */
/* ── Fix fond blanc #adminForm Joomla ── */
#adminForm,
body.contentpane #adminForm {
  background: transparent !important;
}
.com-content-category,
.com-content-category.category-list,
.content-category,
.com-content-category__items,
.com-content-category__item {
  background: transparent !important;
}
form#adminForm.com-content-category_articles,
.com-content-category.category-list form,
.content-category form {
  background: transparent !important;
}
table.com-content-category_table,
.com-content-category_table.table,
.site-shell table.table {
  background: transparent !important;
}

/* ── Style liste catégorie ── */
form#adminForm table.com-content-category_table {
  width: 100%;
  border-collapse: collapse;
}
form#adminForm th.list-title {
  padding: 12px 0 !important;
  font-weight: 400 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--gris-border) !important;
}
form#adminForm tr.cat-list-row0,
form#adminForm tr.cat-list-row1 {
  border-bottom: 1px solid var(--gris-border) !important;
  transition: background .15s !important;
}
form#adminForm tr.cat-list-row0:hover,
form#adminForm tr.cat-list-row1:hover {
  background: var(--vert-pale) !important;
}
form#adminForm .list-title a {
  color: var(--noir) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: color .2s !important;
}
form#adminForm .list-title a:hover { color: var(--vert) !important; }
form#adminForm .list-title a::after {
  content: ' →';
  color: var(--vert);
  opacity: 0;
  transition: opacity .2s;
}
form#adminForm .list-title a:hover::after { opacity: 1; }

/* ── Pagination listes Joomla ── */
.tck-pagination .page-item .page-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gris-text);
  border: 1px solid var(--gris-border);
  border-radius: var(--radius);
  background: var(--blanc);
  transition: all .2s;
}
.tck-pagination .page-item .page-link:hover {
  border-color: var(--vert);
  color: var(--vert);
  background: var(--vert-pale);
}
.tck-pagination .page-item.active .page-link {
  background: var(--vert) !important;
  border-color: var(--vert) !important;
  color: var(--blanc) !important;
}
.tck-pagination .page-item.disabled .page-link {
  color: var(--gris-border);
  border-color: var(--gris-border);
  background: transparent;
}
.tck-pagination .page-item .page-link {
  color: var(--gris-mid) !important;
}


/* ══════════════════════════════════════════════════════════════
  TUNNEL DE PAIEMENT
══════════════════════════════════════════════════════════════ */

/* ── TUNNEL STEPS ── */
.zp-tunnel { padding: 0; }
.zp-step { animation: zpFadeIn .35s ease; }
.zp-hidden { display: none !important; }

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

/* ── HEADER ÉTAPE ── */
.zp-step-header { margin-bottom: 36px; }

.zp-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gris-text); background: transparent;
  border: none; cursor: pointer; padding: 0;
  margin-bottom: 20px; transition: color .2s;
}
.zp-back-btn:hover { color: var(--vert); }

/* ── CARDS DURÉE ── */
.zp-durees-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 100%;
}

.zp-duree-card {
  background: var(--blanc);
  border: 1px solid var(--gris-border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  position: relative;
  transition: all .25s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.zp-duree-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.zp-duree-card.zp-duree-featured {
  background: var(--gris-fonce);
  border-color: var(--gris-fonce);
  transform: scale(1.03);
  box-shadow: var(--shadow-lg);
}
.zp-duree-card.zp-duree-featured:hover {
  transform: scale(1.03) translateY(-3px);
}

.zp-duree-badge {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--or); color: var(--noir);
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
}

.zp-duree-label {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600;
  color: var(--noir);
  margin-top: 8px;
}
.zp-duree-featured .zp-duree-label { color: var(--blanc); }

.zp-duree-price {
  font-family: var(--font-display);
  font-size: 38px; font-weight: 700;
  color: var(--noir); line-height: 1;
}
.zp-duree-featured .zp-duree-price { color: var(--blanc); }

.zp-duree-detail {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--gris-text);
  letter-spacing: .04em; min-height: 16px;
}
.zp-duree-featured .zp-duree-detail { color: rgba(255,255,255,.4); }

/* ── PAIEMENT ── */
.zp-paiement-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  max-width: 100%;
}

/* ── RÉCAP ── */
.zp-recap {
  background: var(--gris-fonce);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.zp-recap::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--vert), var(--or));
}
.zp-recap-header {
  padding: 20px 24px 0;
}
.zp-recap-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.zp-recap-body { padding: 16px 24px; }
.zp-recap-row {
  display: flex; justify-content: space-between;
  align-items: center; padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.zp-recap-row:last-child { border-bottom: none; }
.zp-recap-key { font-size: 13px; color: rgba(255,255,255,.45); }
.zp-recap-val { font-size: 14px; font-weight: 500; color: var(--blanc); }
.zp-recap-total .zp-recap-key { color: rgba(255,255,255,.6); font-weight: 500; }
.zp-recap-total .zp-recap-val {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; color: #6edfaa;
}
.zp-recap-secure {
  background: rgba(110,223,170,.08);
  border-top: 1px solid rgba(110,223,170,.15);
  padding: 12px 24px;
  font-size: 12px; color: rgba(255,255,255,.4);
  display: flex; align-items: center; gap: 8px;
}

/* ── BOUTONS PAIEMENT ── */
.zp-boutons-paiement {
  display: flex; flex-direction: column; gap: 12px;
}

#paypal-button-container,
#applepay-button-container,
#googlepay-button-container {
  min-height: 44px;
}

/* ── AUTRES MOYENS ── */
.zp-autres-wrap {
  border: 1px solid var(--gris-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 4px;
}

.zp-autres-toggle {
  width: 100%; display: flex;
  justify-content: space-between; align-items: center;
  padding: 12px 16px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gris-text); background: transparent;
  border: none; cursor: pointer; transition: all .2s;
}
.zp-autres-toggle:hover { color: var(--noir); background: var(--gris-bg); }
.zp-autres-toggle.open .zp-autres-chevron { transform: rotate(180deg); }
.zp-autres-chevron { transition: transform .25s; font-size: 10px; }

.zp-autres-body {
  border-top: 1px solid var(--gris-border);
  padding: 16px;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--gris-bg);
}

.zp-autre-item { }
.zp-autre-title {
  font-size: 13px; font-weight: 600;
  color: var(--noir); margin-bottom: 4px;
}
.zp-autre-text {
  font-size: 12px; color: var(--gris-text);
  line-height: 1.6;
}
.zp-autre-text a { color: var(--vert); text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .zp-durees-grid { grid-template-columns: 1fr; }
  .zp-duree-card.zp-duree-featured { transform: none; }
  .zp-paiement-wrap { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   BURGER
══════════════════════════════════════════════════════════════ */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-burger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--noir);
  border-radius: 2px;
  transition: all .3s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Zone membre + S'abonner — masqués sur desktop */
#nav-links li.mobile-only { display: none; }
.nav-dropdown { display: none; }
.nav-dropdown.open { display: block; }

@media (max-width: 960px) {
  .nav { padding: 0 16px; }
  .nav-burger { display: flex; }
  .nav-actions { display: none !important; }
  #nav-actions { display: none !important; }

  #nav-links {
    display: none !important;
    position: fixed;
    top: 68px; left: 0; right: 0;
    height: calc(100vh - 68px);
    background: var(--blanc) !important;
    flex-direction: column;
    padding: 16px 24px;
    overflow-y: auto;
    z-index: 99;
    border-top: 1px solid var(--gris-border);
    list-style: none;
    margin: 0;
    gap: 0;
  }

  #nav-links.open { display: flex !important; }

  #nav-links li {
    width: 100%;
    list-style: none;
    background: transparent !important;
    padding: 0;
    margin: 0;
  }

  #nav-links li.mobile-only {
    display: flex !important;
    flex-direction: column;
  }

  #nav-links > li > a {
    display: block !important;
    padding: 16px 0;
    font-size: 15px;
    font-weight: 400;
    border-bottom: 1px solid var(--gris-border);
    color: var(--noir) !important;
    background: transparent !important;
  }

  #nav-links a::after { display: none !important; }

  /* Icône maison */
  #nav-links li:first-child a {
    border: none !important;
    display: inline-flex !important;
    width: 36px;
    height: 36px;
    margin: 12px 0;
  }

  /* Li position:relative — layout colonne */
  #nav-links li[style*="position:relative"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    height: auto !important;
  }

  /* Dropdown — fermé par défaut sur mobile */
  #nav-links .nav-dropdown {
    display: none !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid var(--gris-border) !important;
    padding: 0 0 8px 16px !important;
    background: transparent !important;
    min-width: 0 !important;
    width: 100%;
  }

  #nav-links .nav-dropdown.open { display: block !important; }

  #nav-links .nav-dropdown a {
    display: block !important;
    padding: 8px 0 !important;
    font-size: 14px !important;
    border-bottom: none !important;
    color: var(--gris-text) !important;
    background: transparent !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   LIMITER LARGEUR DES PAGES NON MAQUETTES
══════════════════════════════════════════════════════════════ */
.site-shell:not(:has(.page-hero, .dark-zone, .results-hero, .reunions-section, .abo-pricing, .filtre-hero, .faq-hero)){
  max-width:1100px;
  margin:0 auto;
  padding:24px 16px;
  box-sizing:border-box;
  width:100%;
  min-width:0;
}


@media (max-width:680px){
  .site-shell{padding:12px;}
}

.site-shell .blog-featured a,
.site-shell .item-title a,
.site-shell .page-header a,
.site-shell h1 a,
.site-shell h2 a,
.site-shell h3 a{overflow-wrap:anywhere; word-break:break-word;}

.inner.clearfix.site-shell .item-title a{display:block; font-size:15px; line-height:1.4;}
.inner.clearfix.site-shell{min-width:0;}
.inner.clearfix.site-shell *{min-width:0;}

.list-title a{color:var(--ink) !important;}
.list-title a:hover{color:var(--vert) !important;}

.com-content-category__counter{ float:none !important; text-align:center; padding:12px 0 0 !important; font-family:Arial,sans-serif; font-size:13px;color:var(--muted);}
.pagination__wrapper{margin-top:8px !important;}

/* ── TITRE AUTO JOOMLA (masqué) ── */
h2.tck-article-title{display:none}