/* ============ ÇA PASSE OÙ ? — thème ============ */
:root{--fond:#F4F6F9;--carte:#FFFFFF;--encre:#17233B;--texte:#4A5568;--gris:#7A8598;--filet:#E2E6EC;--bleu:#2E5BFF;--bleu-doux:#EAF0FF;--direct:#E0432E;--vert:#178A5E;--vert-doux:#E4F4EC;--serif:'Newsreader',Georgia,serif;--sans:'Manrope',system-ui,sans-serif;--r:12px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--fond);color:var(--encre);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1000px;margin:0 auto;padding-left:22px;padding-right:22px}
:focus-visible{outline:2px solid var(--bleu);outline-offset:3px;border-radius:6px}
.mt{margin-top:40px}

/* en-tête */
header{background:var(--carte);border-bottom:1px solid var(--filet);position:sticky;top:0;z-index:20}
.top{height:64px;display:flex;align-items:center;gap:8px}
.logo{display:flex;align-items:center;gap:10px;margin-right:22px;flex-shrink:0}
.marque{width:32px;height:32px;border-radius:9px;background:var(--encre);position:relative;flex-shrink:0;display:inline-block}
.marque::before{content:"";position:absolute;left:12px;top:9px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.marque::after{content:"";position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--bleu)}
.logo b{font-weight:800;font-size:18px;letter-spacing:-.02em;white-space:nowrap;line-height:1}
.logo b span{color:var(--bleu)}
nav{display:flex;align-items:center;gap:2px}
nav a{font-size:14px;font-weight:600;color:var(--gris);padding:8px 13px;border-radius:8px;line-height:1}
nav a:hover{background:var(--fond);color:var(--encre)}
nav a.on{background:var(--bleu-doux);color:var(--bleu)}
.badge-fr{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--gris);white-space:nowrap}
.badge-fr i{width:8px;height:8px;border-radius:50%;background:var(--vert)}
@media(max-width:720px){nav{display:none}.badge-fr span{display:none}}

/* hero */
.hero{padding-top:44px;padding-bottom:22px}
.date{font-size:13px;font-weight:700;color:var(--gris);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.date em{font-style:normal;color:var(--vert);display:flex;align-items:center;gap:6px}
.date em i{width:7px;height:7px;border-radius:50%;background:var(--vert);animation:bat 2s infinite}
.hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(34px,5vw,50px);line-height:1.1;letter-spacing:-.015em;margin-top:12px;max-width:14em}
.hero h1 span{color:var(--bleu)}
.hero p{color:var(--texte);margin-top:10px;max-width:38em;font-size:16px}
.filtres{display:flex;gap:8px;margin-top:22px}
.filtre{font-family:var(--sans);font-size:13px;font-weight:700;border:1px solid var(--filet);background:var(--carte);border-radius:99px;padding:9px 16px;cursor:pointer;color:var(--gris)}
.filtre:hover{border-color:var(--encre);color:var(--encre)}
.filtre.on{background:var(--encre);color:#fff;border-color:var(--encre)}

/* matchs */
.matchs{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.match{display:grid;grid-template-columns:72px minmax(0,1fr) 210px;gap:18px;align-items:center;background:var(--carte);border:1px solid var(--filet);border-radius:var(--r);padding:15px 18px;transition:border-color .15s,box-shadow .15s}
a.match:hover{border-color:var(--bleu);box-shadow:0 8px 24px rgba(23,35,59,.07)}
.heure{font-weight:800;font-size:20px;line-height:1.1}
.heure small{display:block;font-size:11px;font-weight:600;color:var(--gris);margin-top:2px}
.direct{color:var(--direct);display:flex;align-items:center;gap:7px;font-size:17px}
.direct i{width:7px;height:7px;border-radius:50%;background:var(--direct);animation:bat 1.5s infinite}
.equipes{display:flex;align-items:center;gap:12px;min-width:0}
.eq-txt{min-width:0;display:block}
.ecussons{display:flex;flex-shrink:0}
.ec{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;color:#fff;border:2px solid #fff;letter-spacing:.02em;font-style:normal;object-fit:contain;flex-shrink:0}
img.ec{background:#fff;border:1px solid var(--filet);padding:3px}
.ecussons .ec+.ec{margin-left:-9px}
.compet{font-size:12px;font-weight:700;color:var(--gris);display:block;margin-bottom:1px}
.noms{font-weight:800;font-size:18px;letter-spacing:-.01em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noms span{color:var(--gris);font-weight:600;padding:0 5px}
.noms b{color:var(--direct);font-weight:800;padding:0 6px}
.diffusion{border-left:1px solid var(--filet);padding-left:18px;display:flex;flex-direction:column;gap:6px;min-height:42px;justify-content:center}
.diffusion small{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#A7AFBE}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12.5px;font-weight:700;border-radius:99px;padding:5px 12px;white-space:nowrap;background:var(--encre);color:#fff}
.chip.plus{background:var(--fond);color:var(--encre);border:1px solid var(--filet)}
.chip.clair{background:var(--vert-doux);color:var(--vert)}
.chip.aconf{background:transparent;border:1px dashed var(--filet);color:var(--gris)}
.vide{display:none;background:var(--carte);border:1px dashed var(--filet);border-radius:var(--r);padding:22px;color:var(--gris);font-size:14px}
@media(max-width:700px){.match{grid-template-columns:56px minmax(0,1fr);gap:12px;padding:14px}.diffusion{grid-column:2;border-left:0;padding-left:0;min-height:0}.heure{font-size:17px}.noms{white-space:normal;font-size:16.5px}.ec{width:28px;height:28px;font-size:8.5px}}

/* sections */
.section{padding-top:48px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.section-head h2{font-family:var(--serif);font-weight:700;font-size:28px;letter-spacing:-.01em}
.section-head span{font-size:13px;color:var(--gris);font-weight:600}
.section-head a{font-size:13.5px;font-weight:700;color:var(--bleu)}
.une{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}
.une.seul{grid-template-columns:1fr}
@media(max-width:720px){.une{grid-template-columns:1fr}}
.carte{display:flex;flex-direction:column;justify-content:center;background:var(--carte);border:1px solid var(--filet);border-radius:var(--r);padding:22px 24px;transition:border-color .15s,box-shadow .15s}
.carte:hover{border-color:var(--bleu);box-shadow:0 8px 24px rgba(23,35,59,.07)}
.carte .compet{color:var(--bleu)}
.carte h3{font-family:var(--serif);font-weight:700;font-size:25px;line-height:1.2;margin:4px 0 8px;letter-spacing:-.01em}
.carte p{color:var(--texte);font-size:14.5px}
.carte .maj{margin-top:12px;font-size:12px;color:var(--gris);font-weight:700}
.une-col{display:flex;flex-direction:column;gap:12px}
.une-col .carte{flex:1;padding:18px 20px}
.une-col .carte h3{font-size:18px;margin-bottom:0}
.guide{background:var(--carte);border:1px solid var(--filet);border-radius:var(--r);overflow:hidden}
.guide table{width:100%;border-collapse:collapse;font-size:14.5px}
.guide th{text-align:left;font-size:11px;font-weight:800;color:var(--gris);letter-spacing:.06em;text-transform:uppercase;padding:12px 18px;border-bottom:1px solid var(--filet)}
.guide td{padding:12px 18px;border-bottom:1px solid var(--filet)}
.guide tr:last-child td{border-bottom:0}
.guide td:first-child{font-weight:800;width:40%}
.guide .chip{margin:2px 4px 2px 0;font-size:12px}
.guide-note{font-size:13px;color:var(--gris);margin-top:10px}
.actus{background:var(--carte);border:1px solid var(--filet);border-radius:var(--r);overflow:hidden}
.actu{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:14px 18px;border-bottom:1px solid var(--filet);align-items:baseline}
.actu:last-child{border-bottom:0}
.actu .quand{font-size:12.5px;font-weight:700;color:var(--gris);line-height:1.3}
.actu .quand em{display:block;font-style:normal;font-size:11px;color:#A7AFBE}
.actu b{font-weight:700;font-size:15.5px;line-height:1.4;transition:color .15s}
.actu:hover b{color:var(--bleu)}
.actus.compact .actu b{font-size:14px}

/* page match */
.fil{padding:20px 0 0;font-size:13px;color:var(--gris);font-weight:600}
.fil a:hover{color:var(--bleu)}
.fil b{color:var(--encre)}
.entete{padding:14px 0 24px;border-bottom:1px solid var(--filet)}
.entete .compet{color:var(--bleu)}
.entete h1{font-family:var(--serif);font-weight:700;font-size:clamp(28px,4.4vw,42px);line-height:1.15;letter-spacing:-.015em;margin-top:8px;max-width:22em}
.entete .chapeau{color:var(--texte);font-size:16.5px;margin-top:10px;max-width:36em}
.entete .signature{margin-top:14px;font-size:13px;color:var(--gris);font-weight:600;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.entete .maj{color:var(--vert);background:var(--vert-doux);padding:3px 10px;border-radius:6px;font-size:12px;font-weight:800}
.grille{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;padding-top:24px;padding-bottom:60px}
@media(max-width:860px){.grille{grid-template-columns:1fr;gap:0}}
.colonne{max-width:740px;padding-top:24px;padding-bottom:60px}
.reponse{background:var(--encre);color:#fff;border-radius:var(--r);padding:22px 24px;margin-bottom:20px}
.reponse .quest{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9AA6BF}
.reponse .quest .jour{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;padding:4px 10px;border-radius:6px;letter-spacing:.04em}
.reponse .quest .jour.auj{background:var(--direct);border-color:var(--direct)}
.reponse .quest .direct-b{background:var(--direct);border-color:var(--direct);display:flex;align-items:center;gap:6px}
.reponse .quest .direct-b i{width:6px;height:6px;border-radius:50%;background:#fff;animation:bat 1.5s infinite}
.reponse .canal{font-family:var(--serif);font-weight:700;font-size:clamp(28px,4vw,38px);line-height:1.15;margin-top:12px;letter-spacing:-.01em}
.reponse .chips{margin-top:12px}
.reponse .chip{white-space:normal;line-height:1.35}
.reponse .detail{margin-top:8px;color:#C9D2E3;font-size:14.5px;line-height:1.55;max-width:44em}
.reponse .detail b{color:#fff}
.reponse .chip{background:#fff;color:var(--encre)}
.reponse .chip.plus{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.reponse .chip.clair{background:var(--vert);color:#fff}
.reponse .horaire{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;color:#9AA6BF;font-weight:600}
.reponse .horaire b{color:#fff;font-weight:800;font-size:15px}
.infos{display:grid;grid-template-columns:repeat(4,1fr);background:var(--carte);border:1px solid var(--filet);border-radius:var(--r);overflow:hidden;margin-bottom:20px}
.infos div{padding:13px 16px;border-right:1px solid var(--filet)}
.infos div:last-child{border-right:0}
.infos dt{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-bottom:3px}
.infos dd{font-weight:700;font-size:14.5px}
@media(max-width:640px){.infos{grid-template-columns:1fr 1fr}.infos div:nth-child(2){border-right:0}.infos div:nth-child(-n+2){border-bottom:1px solid var(--filet)}}
.fav{background:var(--carte);border:1px solid var(--filet);border-radius:var(--r);padding:18px 22px;margin-bottom:20px}
.fav-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.fav-head h3{font-weight:800;font-size:16px}
.fav-head span{font-size:12px;color:var(--gris);font-weight:700}
.barre{display:flex;height:30px;border-radius:8px;overflow:hidden;font-size:12.5px;font-weight:800;color:#fff}
.barre i{display:flex;align-items:center;justify-content:center;font-style:normal;min-width:0}
.legende{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;color:var(--texte)}
.legende b{color:var(--encre)}
.fav p{font-size:12.5px;color:var(--gris);margin-top:10px}
.corps h2{font-family:var(--serif);font-weight:700;font-size:25px;margin:30px 0 12px;letter-spacing:-.01em;display:flex;align-items:center;gap:12px}
.corps h2::before{content:"";width:4px;height:22px;border-radius:2px;background:var(--bleu);flex-shrink:0}
.corps p{color:var(--texte);margin-bottom:14px;font-size:16px}
.corps ul{margin:0 0 16px 20px}
.corps li{margin-bottom:8px;color:var(--texte);font-size:15.5px}
.corps a{color:var(--bleu);font-weight:600}
.corps h1.np{font-family:var(--serif);font-weight:700;font-size:32px;margin:30px 0 10px}
.np-txt{color:var(--texte)}
.compos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 6px}
@media(max-width:640px){.compos{grid-template-columns:1fr}}
.compo{background:var(--carte);border:1px solid var(--filet);border-radius:var(--r);overflow:hidden}
.compo .club{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--filet);font-weight:800;font-size:15px}
.compo .club span{margin-left:auto;font-size:12px;color:var(--gris);font-weight:700}
.compo .liste{padding:12px 16px;font-size:14px;color:var(--texte);line-height:1.55}
.compo .liste em{display:block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-bottom:2px}
.compo .ent{margin-top:8px;font-size:13.5px}
.compo .abs{color:var(--direct);font-size:13px;font-weight:700;margin-top:6px}
.faq details{background:var(--carte);border:1px solid var(--filet);border-radius:10px;margin-bottom:8px}
.faq summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:700;font-size:15px;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--bleu);font-weight:800;font-size:18px}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 18px 14px;margin:0;font-size:14.5px;color:var(--texte)}
.lat h4{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);border-top:2px solid var(--encre);padding-top:12px;margin-bottom:12px}
.prochain{display:flex;flex-direction:column;gap:8px;margin-bottom:30px}
.prochain a{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;background:var(--carte);border:1px solid var(--filet);border-radius:10px;padding:11px 14px;transition:border-color .15s}
.prochain a:hover{border-color:var(--bleu)}
.prochain .h{font-weight:800;font-size:15px}
.prochain .h small{display:block;font-size:10.5px;color:var(--gris);font-weight:700}
.prochain .j b{display:block;font-weight:800;font-size:14.5px;letter-spacing:-.01em}
.prochain .j span{font-size:12px;color:var(--gris);font-weight:600}
.box-match{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--carte);border:1px solid var(--filet);border-radius:var(--r);padding:14px 18px;margin:22px 0;transition:border-color .15s}
.box-match:hover{border-color:var(--bleu)}
.bm-txt b{display:block;font-weight:800;font-size:15.5px}
.bm-txt span{font-size:12px;color:var(--gris);font-weight:600}
.bm-cta{font-size:12.5px;font-weight:800;color:var(--bleu);white-space:nowrap}
.source{font-size:12.5px;color:var(--gris);border-top:1px solid var(--filet);padding-top:12px;margin-top:24px}
.pagination{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:24px}
.pg{font-size:13px;font-weight:700;border:1px solid var(--filet);border-radius:9px;padding:10px 14px;background:var(--carte)}
.pg:hover{border-color:var(--bleu);color:var(--bleu)}
.pg-info{font-size:12.5px;color:var(--gris);font-weight:600}

/* publicité */
.pub{margin:26px auto;text-align:center}
.pub>span{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#A7AFBE;margin-bottom:6px}
.pub-slot{display:flex;justify-content:center}
.lat .pub{margin:0 0 30px}

/* pied + cookies */
footer{background:var(--encre);color:#9AA6BF;margin-top:50px;padding:40px 0 28px;font-size:13.5px}
.pied{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;margin-bottom:28px}
@media(max-width:720px){.pied{grid-template-columns:1fr}}
footer .logo b{color:#fff}
footer .logo b span{color:#7FA0FF}
footer .marque{background:#fff}footer .marque::before{border-left-color:var(--encre)}
footer .apropos{margin-top:12px;max-width:30em;line-height:1.7}
footer h5{color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:8px}
footer ul a:hover{color:#fff}
.pied-base{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;font-size:12.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;display:flex;justify-content:center}
.cookies[hidden]{display:none}
.cookies-in{max-width:760px;width:100%;background:var(--carte);border:1px solid var(--filet);border-radius:14px;box-shadow:0 14px 40px rgba(23,35,59,.18);padding:16px 18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cookies-in p{flex:1;font-size:13.5px;color:var(--texte);min-width:240px}
.cookies-in a{color:var(--bleu);font-weight:700}
.cookies-btn{display:flex;gap:8px}
.cookies-btn button{font-family:var(--sans);font-size:13px;font-weight:700;border-radius:9px;padding:10px 16px;cursor:pointer;border:1px solid var(--filet);background:var(--carte);color:var(--encre)}
.cookies-btn button.ok{background:var(--encre);color:#fff;border-color:var(--encre)}

@keyframes bat{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}