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

html{
scroll-behavior:smooth;
}

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

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

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

.site-header{
background:#000000;
}

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

.main-menu{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:28px;
padding:16px;
background:#070707;
border-top:1px solid rgba(212,175,55,.4);
border-bottom:1px solid rgba(212,175,55,.4);
}

.main-menu a{
color:#d4af37;
font-size:16px;
font-weight:bold;
}

.main-menu a:hover,
.main-menu .active{
color:#ffffff;
text-shadow:0 0 10px rgba(255,215,0,.7);
}

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

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

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

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

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

h2{
color:#ffd700;
}

.hero p{
max-width:680px;
margin:auto;
font-size:16px;
}

.pmu-banner{
max-width:800px;
margin:0 auto 15px;
overflow:hidden;
}

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

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

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

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

.btn-outline{
color:#ffd700;
}

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

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

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

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

.section-heading p{
font-size:16px;
}

.center{
text-align:center;
}

.intro-row,
.partner,
.card-row,
.step-row{
display:flex;
flex-wrap:wrap;
gap:20px;
}

.intro-copy{
flex:1 1 600px;
}

.intro-copy p{
margin-bottom:12px;
}

.warning{
flex:1 1 280px;
padding:20px;
background:rgba(212,175,55,.12);
border-left:4px solid #ffd700;
border-radius:12px;
}

.warning strong{
display:block;
margin-bottom:7px;
color:#ffd700;
}

.partner{
align-items:center;
border:2px solid #d4af37;
}

.partner-copy{
flex:1 1 420px;
}

.partner-copy h2{
margin-bottom:12px;
font-size:28px;
}

.partner-copy ul{
margin:15px 0;
list-style:none;
}

.partner-copy li{
margin:7px 0;
font-weight:bold;
}

.partner-copy li:before{
content:"✔ ";
color:#ffd700;
}

.small-note{
color:#cccccc;
font-size:12px;
}

.card-row .bet-card{
flex:1 1 calc(25% - 20px);
position:relative;
min-height:225px;
padding:22px 18px 56px;
text-align:center;
background:rgba(0,0,0,.85);
border:1px solid rgba(212,175,55,.4);
border-radius:17px;
transition:.25s;
}

.bet-card:hover{
transform:translateY(-5px);
border-color:#ffd700;
box-shadow:0 15px 25px rgba(255,215,0,.12);
}

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

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

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

.level{
position:absolute;
left:50%;
bottom:16px;
transform:translateX(-50%);
padding:5px 10px;
border-radius:18px;
font-size:12px;
font-weight:bold;
white-space:nowrap;
}

.beginner{
color:#8ef0bd;
background:rgba(30,160,95,.18);
}

.medium{
color:#ffd76a;
background:rgba(212,175,55,.16);
}

.advanced{
color:#ffb07a;
background:rgba(230,115,45,.18);
}

.step-card{
flex:1 1 calc(25% - 20px);
padding:22px 17px;
text-align:center;
background:rgba(212,175,55,.08);
border:1px solid rgba(212,175,55,.35);
border-radius:15px;
}

.step-card strong{
display:flex;
width:40px;
height:40px;
margin:0 auto 12px;
align-items:center;
justify-content:center;
background:#ffd700;
color:#000000;
border-radius:50%;
}

.step-card h3{
margin-bottom:7px;
color:#ffd700;
font-size:18px;
}

.step-card p{
font-size:14px;
}

.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:bold;
}

.faq details p{
padding:0 16px 15px;
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:bold;
}

.guide-links a:hover{
background:#ffd700;
color:#000000;
}

.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:20px;
margin-bottom:14px;
}

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

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

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

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

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

.copyright{
color:#888888!important;
}

@media(max-width:1000px){

.card-row .bet-card,
.step-card{
flex:1 1 calc(50% - 20px);
}

}

@media(max-width:600px){

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

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

.breadcrumb div{
width:95%;
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,
.partner-copy h2,
.guide-panel h2{
font-size:23px;
}

.card-row .bet-card,
.step-card{
flex:1 1 100%;
}

.btn{
width:100%;
max-width:300px;
}

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

.guide-links{
flex-direction:column;
align-items:center;
}

.guide-links a{
width:100%;
max-width:300px;
}

.footer-links{
gap:8px;
}

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

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

}


/* =========================================================
   MENU HIPPIQUE COMPACT — GRAPHITE, CUIVRE ET CHAMPAGNE
   ========================================================= */

:root{
    --menu-graphite:#171717;
    --menu-graphite-clair:#292929;
    --menu-cuivre:#b66a32;
    --menu-cuivre-clair:#dc9a62;
    --menu-champagne:#f2d39d;
    --menu-ivoire:#fff8e9;
}

/* Barre plus fine, sans grand cadre marron */
.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);
}

/* Boutons plus petits */
.main-menu a{
    min-height:30px;
    padding:4px 9px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--menu-champagne);
    background:linear-gradient(180deg,var(--menu-graphite-clair),var(--menu-graphite));
    border:1px solid rgba(182,106,50,.68);
    border-radius:6px;
    font-size:12.5px;
    font-weight:800;
    line-height:1.1;
    white-space:normal;
    text-shadow:0 1px 2px rgba(0,0,0,.8);
    box-shadow:


        inset 0 1px 0 rgba(255,255,255,.08),
        0 2px 5px rgba(0,0,0,.28);
    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        color .18s ease;
}

.main-menu a:hover,
.main-menu a:focus-visible{
    color:#fff;
    background:linear-gradient(180deg,#5b3422,#342019);
    border-color:var(--menu-cuivre-clair);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 10px rgba(220,154,98,.25);
    transform:translateY(-1px);
    outline:none;
}

/* Page active : champagne clair */
.main-menu a.active,
.main-menu a[aria-current="page"]{
    color:#25140b;
    background:linear-gradient(180deg,#fff2cf,#e2b36f);
    border-color:#ffe7b9;
    text-shadow:none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 0 10px rgba(226,179,111,.42);
}

/* Harmonisation légère avec le nouveau menu */
.panel{
    border-color:rgba(182,106,50,.42);
}

h1,
h2,
.section-heading span,
.bet-card h3,
.step-card h3,
.faq summary,
.guide-links a,
.footer-links a{
    color:var(--menu-champagne);
}

.label,
.btn-main,
.step-card strong{
    background:linear-gradient(180deg,#f7dba8,#c9824b);
    color:#28140a;
}

.btn,
.guide-links a{
    border-color:var(--menu-cuivre);
}

.btn-outline{
    color:var(--menu-champagne);
}

.btn:hover,
.guide-links a:hover{
    background:var(--menu-ivoire);
    color:#28140a;
    border-color:var(--menu-ivoire);
}

.warning{
    background:rgba(182,106,50,.11);
    border-left-color:var(--menu-cuivre-clair);
}

.warning strong,
.partner-copy li:before{
    color:var(--menu-cuivre-clair);
}

.partner{
    border-color:var(--menu-cuivre);
}

.card-row .bet-card,
.step-card,
.faq details{
    border-color:rgba(182,106,50,.38);
}

.bet-card:hover{
    border-color:var(--menu-cuivre-clair);
    box-shadow:0 15px 25px rgba(182,106,50,.16);
}

.site-footer{
    border-top-color:rgba(182,106,50,.42);
}

@media(max-width:1050px){
    .main-menu{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:600px){
    .main-menu{
        width:96%;
        margin:9px auto 14px;
        padding:5px;
        gap:5px;
        grid-template-columns:repeat(2,minmax(0,1fr));
        border-radius:8px;
    }

    .main-menu a{
        min-height:34px;
        padding:5px 6px;
        font-size:11.5px;
        border-radius:5px;
    }
}

@media(max-width:360px){
    .main-menu{
        grid-template-columns:1fr;
    }
}

/* Optimisations accessibilité, performances 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(-150%);
transition:transform .2s ease;
}

.skip-link:focus{
transform:translateY(0);
}

.lien-affilie-texte{
color:#39bfff;
font-size:16px;
font-weight:600;
text-decoration:underline;
text-underline-offset:3px;
}

.bouton-affilie-pmu{
display:inline-block;
margin:12px 0;
padding:13px 24px;
color:#fff;
background:#075fa8;
border-radius:9px;
font-weight:700;
text-decoration:none;
transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}

.bouton-affilie-pmu:hover,
.bouton-affilie-pmu:focus-visible{
color:#fff;
background:#03497f;
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,.25);
outline:2px solid #fff;
outline-offset:3px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible{
outline:3px solid #fff;
outline-offset:3px;
}

.panel:not(.hero){
content-visibility:auto;
contain-intrinsic-size:500px;
}

@media(max-width:600px){
main{
background-attachment:scroll;
}
}

@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;
}
}

/* =========================================================
   CORRECTIFS FINAUX — DATE, ACCESSIBILITÉ ET MOBILE
   ========================================================= */

.hero{
position:relative;
}

.update-badge{
display:inline-flex;
align-items:center;
justify-content:center;
margin:0 auto 16px;
padding:5px 11px;
color:#fff8e9;
background:rgba(76,132,91,.92);
border:1px solid rgba(132,191,147,.85);
border-radius:999px;
font-size:11px;
font-weight:700;
line-height:1.2;
box-shadow:0 3px 9px rgba(0,0,0,.22);
}

.pmu-cookie-btn{
min-height:40px;
padding:9px 14px;
color:#fff;
background:#075fa8;
border:1px solid #4da7ec;
border-radius:8px;
font:inherit;
font-size:13px;
font-weight:700;
cursor:pointer;
}

.pmu-cookie-btn:hover{
background:#03497f;
}

.main-menu a,
.btn,
.guide-links a,
.bouton-affilie-pmu,
.pmu-cookie-btn{
-webkit-tap-highlight-color:transparent;
}

@media(max-width:600px){
.update-badge{
margin-bottom:14px;
white-space:normal;
text-align:center;
}

.hero{
padding-top:24px;
}
}