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

html{
scroll-behavior:smooth;
}

body{
background:#050505;
color:#fff;
font-family:Arial,Helvetica,sans-serif;
line-height:1.65;
}

img{
display:block;
max-width:100%;
}

a{
color:inherit;
text-decoration:none;
}

.site-header{
background:#000;
}

.site-header img{
width:100%;
height:auto;
}

.main-menu{
display:flex;justify-content:center;flex-wrap:wrap;gap:14px;padding:14px;
background:#070707;border-top:1px solid rgba(212,175,55,.4);border-bottom:1px solid rgba(212,175,55,.4);
}
.main-menu a{
display:inline-flex;align-items:center;justify-content:center;
height:34px;padding:0 18px;
font-size:14px;font-weight:700;color:#fff;
background:linear-gradient(180deg,#1fd4c9 0%,#1097a7 45%,#0b5d74 100%);
border:1px solid #73f1e8;border-radius:8px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 8px rgba(0,0,0,.45);
transition:.2s;
}
.main-menu a:hover{filter:brightness(1.08);transform:translateY(-1px);}
.main-menu .active{
color:#111;
background:linear-gradient(180deg,#fff5b5 0%,#ffd84d 40%,#f4b000 75%,#c88400 100%);
border:1px solid #ffe08a;
}

main{
padding:1px 0 60px;
background:
linear-gradient(rgba(0,0,0,.74),rgba(0,0,0,.9)),
url("images-hippiques/fond.png") center top/cover repeat-y;
}

.panel{
width:90%;
max-width:1160px;
margin:46px auto;
padding:34px;
background:rgba(5,5,5,.95);
border:1px solid rgba(212,175,55,.42);
border-radius:20px;
box-shadow:0 16px 35px rgba(0,0,0,.55);
}

.hero{
margin-top:28px;
text-align:center;
}

.label{
display:inline-block;
margin-bottom:13px;
padding:7px 15px;
background:#ffd700;
color:#000;
border-radius:25px;
font-size:12px;
font-weight:700;
text-transform:uppercase;
}

h1{
margin-bottom:14px;
color:#ffd700;
font-size:36px;
line-height:1.2;
}

h2{
color:#ffd700;
}

.hero p{
max-width:740px;
margin:auto;
}

.hero-actions{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:14px;
margin-top:22px;
}

.btn{
display:inline-block;
padding:11px 24px;
border:2px solid #d4af37;
border-radius:26px;
font-size:15px;
font-weight:700;
transition:.25s;
}

.btn-main{
background:#ffd700;
color:#000;
}

.btn-outline{
color:#ffd700;
}

.btn:hover{
transform:translateY(-3px);
background:#fff;
color:#000;
border-color:#fff;
}

.btn-large{
padding:13px 30px;
font-size:16px;
}

.quinte-panel{
display:grid;
grid-template-columns:1.55fr .75fr;
gap:28px;
align-items:stretch;
border:2px solid #d4af37;
}

.quinte-copy{
padding:8px;
}

.quinte-copy h2{
margin-bottom:9px;
font-size:30px;
}

.quinte-intro{
max-width:700px;
margin-bottom:20px;
}

.quinte-details{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
margin-bottom:24px;
}

.quinte-details div{
padding:16px;
background:rgba(255,215,0,.07);
border:1px solid rgba(255,215,0,.28);
border-radius:13px;
}

.quinte-details span{
display:block;
margin-bottom:4px;
color:#d4af37;
font-size:12px;
font-weight:700;
text-transform:uppercase;
}

.quinte-details strong{
font-size:14px;
}

.quinte-side{
display:flex;
flex-direction:column;
justify-content:center;
padding:24px;
background:linear-gradient(145deg,rgba(255,215,0,.14),rgba(0,0,0,.8));
border:1px solid rgba(255,215,0,.35);
border-radius:16px;
}

.horse-icon{
margin-bottom:8px;
font-size:52px;
}

.quinte-side h3{
margin-bottom:10px;
color:#ffd700;
}

.quinte-side ul{
padding-left:19px;
color:#ddd;
}

.section-heading{
margin-bottom:25px;
}

.section-heading span{
color:#d4af37;
font-size:13px;
font-weight:700;
text-transform:uppercase;
}

.section-heading h2{
margin:6px 0 10px;
font-size:28px;
}

.section-heading p{
max-width:760px;
margin:auto;
}

.center{
text-align:center;
}

.table-responsive{
width:100%;
overflow-x:auto;
border-radius:14px;
}

.calendrier-table{
width:100%;
min-width:790px;
border-collapse:collapse;
background:rgba(0,0,0,.86);
border:1px solid rgba(212,175,55,.4);
}

.calendrier-table thead{
background:linear-gradient(135deg,#d4af37,#ffd700);
}

.calendrier-table th{
padding:15px 12px;
color:#000;
font-size:15px;
text-align:center;
}

.calendrier-table td{
padding:15px 12px;
color:#eee;
font-size:14px;
text-align:center;
border-bottom:1px solid rgba(212,175,55,.22);
}

.calendrier-table tbody tr:nth-child(even){
background:rgba(212,175,55,.06);
}

.calendrier-table tbody tr:hover{
background:rgba(212,175,55,.14);
}

.calendrier-table time{
font-weight:700;
}

.jour{
display:inline-block;
min-width:88px;
padding:5px 12px;
background:rgba(255,215,0,.13);
color:#ffd700;
border:1px solid rgba(255,215,0,.4);
border-radius:20px;
font-weight:700;
}

.table-btn{
display:inline-block;
padding:7px 14px;
background:#ffd700;
color:#000;
border-radius:20px;
font-size:13px;
font-weight:700;
white-space:nowrap;
transition:.2s;
}

.table-btn:hover{
background:#fff;
transform:translateY(-2px);
}

.calendar-note{
margin-top:20px;
padding:14px 16px;
color:#ccc;
font-size:13px;
text-align:center;
background:rgba(212,175,55,.07);
border-left:4px solid #ffd700;
border-radius:7px;
}

.bet-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:16px;
}

.bet-card{
padding:20px 16px;
background:rgba(212,175,55,.07);
border:1px solid rgba(212,175,55,.3);
border-radius:14px;
transition:.25s;
}

.bet-card:hover{
transform:translateY(-5px);
border-color:#ffd700;
}

.bet-card h3{
margin-bottom:8px;
color:#ffd700;
}

.bet-card p{
font-size:14px;
color:#ddd;
}

.bet-card.featured{
background:linear-gradient(145deg,rgba(255,215,0,.2),rgba(0,0,0,.8));
border-color:#ffd700;
}

.action-bottom{
margin-top:24px;
}

.banner-panel{
text-align:center;
}

.pmu-banner{
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}

.pmu-banner iframe{
display:block;
max-width:100%;
border:0;
}

.faq details{
margin:11px 0;
background:rgba(212,175,55,.07);
border:1px solid rgba(212,175,55,.35);
border-radius:11px;
}

.faq summary{
padding:14px 16px;
cursor:pointer;
color:#ffd700;
font-weight:700;
}

.faq details p{
padding:0 16px 15px;
font-size:14px;
}

.site-footer{
padding:32px 20px;
text-align:center;
background:#070707;
border-top:2px solid rgba(212,175,55,.35);
}

.footer-logos{
display:flex;
justify-content:center;
align-items:center;
gap:22px;
margin-bottom:14px;
}

.footer-logos img{
width:auto;
height:30px;
}

.footer-logos a:first-of-type img{
padding:3px 6px;
background:#fff;
border-radius:4px;
}

.site-footer p{
margin:9px 0;
color:#ccc;
font-size:14px;
}

.footer-links{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:17px;
margin-top:16px;
}

.footer-links a{
color:#ffd700;
font-size:14px;
font-weight:700;
}

.footer-links a:hover{
color:#fff;
}

.copyright{
color:#888!important;
}

@media(max-width:1000px){

.quinte-panel{
grid-template-columns:1fr;
}

.bet-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:650px){

.main-menu{
gap:10px;
padding:12px 8px;
}

.main-menu a{
font-size:13px;
}

main{
background-position:left top;
background-size:auto 100%;
}

.panel{
width:95%;
margin:34px auto;
padding:23px 16px;
}

h1{
font-size:28px;
}

.section-heading h2,
.quinte-copy h2{
font-size:23px;
}

.btn{
width:100%;
max-width:310px;
text-align:center;
}

.quinte-details{
grid-template-columns:1fr;
}

.bet-grid{
grid-template-columns:1fr;
}

.calendrier-table{
min-width:720px;
}

.calendrier-table th,
.calendrier-table td{
padding:12px 9px;
font-size:13px;
}

.pmu-banner iframe{
width:100%;
height:60px;
}

.footer-links{
gap:8px;
}

.footer-links a{
font-size:11px;
}

.footer-logos{
gap:12px;
}

.footer-logos img{
height:22px;
}

}

/* Optimisations SEO technique, accessibilité et conversion */
.skip-link{
position:fixed;top:10px;left:10px;z-index:9999;padding:10px 14px;
background:#fff;color:#111;border-radius:6px;font-weight:700;
transform:translateY(-160%);transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0)}

.main-menu{width:min(1260px,96%);margin:12px auto 18px;padding:5px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;background:rgba(10,10,10,.82);border:1px solid rgba(182,106,50,.45);border-radius:9px;box-shadow:0 7px 18px rgba(0,0,0,.34)}
.main-menu a{height:auto;min-height:34px;padding:5px 9px;text-align:center;font-size:12.5px;line-height:1.15;color:#f2d39d;background:linear-gradient(180deg,#292929,#171717);border-color:rgba(182,106,50,.68)}
.main-menu a:hover,.main-menu a:focus-visible{filter:none;color:#fff;background:linear-gradient(180deg,#5b3422,#342019);border-color:#dc9a62}
.main-menu .active,.main-menu a[aria-current="page"]{color:#25140b;background:linear-gradient(180deg,#fff2cf,#e2b36f);border-color:#ffe7b9}

.pmu-banner{min-height:76px;margin:20px auto 0;flex-direction:column;gap:10px}
.pmu-banner p{margin:0;color:#ccc;font-size:14px}
.partner-note{margin-top:12px;color:#bbb;font-size:12px}

.calendrier-table caption{padding:12px;background:#121212;color:#f2d39d;font-weight:700;border:1px solid rgba(212,175,55,.4);border-bottom:0}
.today-row{background:rgba(255,215,0,.16)!important;box-shadow:inset 4px 0 0 #ffd700}
.table-responsive:focus-visible{outline:3px solid #fff;outline-offset:4px}

.action-bottom{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.info-grid article{padding:20px 17px;background:rgba(212,175,55,.07);border:1px solid rgba(212,175,55,.3);border-radius:14px}
.info-grid h3{margin-bottom:8px;color:#ffd700;font-size:18px}
.info-grid p{color:#ddd;font-size:14px}
.guide-panel{text-align:center}
.guide-panel h2{margin-bottom:18px;font-size:28px}
.guide-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.guide-links a{padding:10px 17px;color:#ffd700;border:1px solid rgba(212,175,55,.45);border-radius:22px;font-weight:700}
.guide-links a:hover,.guide-links a:focus-visible{background:#ffd700;color:#000}

.panel:not(.hero){content-visibility:auto;contain-intrinsic-size:500px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media(max-width:1050px){
.main-menu{grid-template-columns:repeat(3,minmax(0,1fr))}
.info-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
.main-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.main-menu a{font-size:11.5px;padding:5px 6px}
.info-grid{grid-template-columns:1fr}
.guide-links{flex-direction:column;align-items:center}
.guide-links a{width:100%;max-width:310px}
main{background-attachment:scroll}
}
@media(max-width:360px){.main-menu{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}