/* Page d'accueil */
.hero { padding-top: 28px; padding-bottom: 60px; }
.hero-titre { display: flex; justify-content: space-between; align-items: end; margin-bottom: 10px; }
.hero-titre h1 { font-size: clamp(68px, 10vw, 145px); line-height: .84; letter-spacing: -4px; }
.hero-meta { text-align: right; font: 10px/1.6 var(--technique); padding-bottom: 12px; }
.hero-image { position: relative; height: 470px; background: var(--noir); border-radius: 4px; overflow: hidden; }
.hero-image > img { height: 100%; width: 100%; object-fit: cover; object-position: center 45%; filter: contrast(1.08); }
.hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 48%, #0002 100%); pointer-events: none; }
.live { position: absolute; top: 18px; right: 18px; z-index: 1; background: #242423df; border-radius: 3px; padding: 8px 14px; color: white; font: 10px var(--technique); letter-spacing: .5px; }
.hero-texte { position: absolute; bottom: 0; left: 0; z-index: 1; width: min(430px, 75%); padding: 32px 34px; background: var(--fond); border-radius: 0 42px 0 0; }
.hero-texte h2 { font-size: 42px; line-height: .94; }
.hero-texte p { margin: 13px 0 20px; color: var(--gris); font-size: 13px; }
.hero-texte .lien-texte { display: table; margin-top: 16px; }
.compte-rebours { margin-top: 16px; background: var(--fond-gris); border-radius: 4px; padding: 13px 17px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.chrono-titre { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; }
.chrono-titre strong { background: var(--rouge); color: white; padding: 6px 12px; font: 28px var(--titre); }
.chrono-chiffres { display: flex; align-items: center; gap: 9px; }
.chrono-chiffres div { min-width: 63px; padding: 5px 12px; text-align: center; background: white; }
.chrono-chiffres b { display: block; font: 27px/1.2 var(--titre); }
.chrono-chiffres small { display: block; font: 8px var(--technique); }
.chrono-chiffres div:last-child b { color: var(--rouge); }
.section-centree { text-align: center; max-width: 650px; margin: 0 auto 34px; }
.section-centree p { color: var(--gris); margin-top: 12px; }
.offres { border: 1px solid var(--ligne); border-radius: 6px; overflow: hidden; }
.offre { background: var(--carte); padding: 25px; display: grid; grid-template-columns: 1fr 1.5fr auto; align-items: center; gap: 25px; }
.offre + .offre { border-top: 1px solid var(--ligne); }
.offre:nth-child(even) { background: #fbfaf7; }
.offre h3 { margin: 6px 0; font-size: 25px; }
.offre small { font: 11px var(--technique); color: var(--gris); }
.offre > p { color: var(--gris); font-size: 13px; }
.mentions { margin-top: 12px; padding: 8px; font: 10px var(--technique); text-align: center; background: var(--charbon); color: white; }
.apercu-evenements .carte { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.apercu-evenements .carte h3 { font-size: 24px; }
.apercu-evenements .carte p { color: var(--gris); font-size: 13px; }
.apercu-evenements .carte a { margin-top: auto; }
.voir-tout { text-align: center; margin-top: 30px; }
.bloc-circuit { background: var(--charbon); color: white; }
.circuit-grille { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 44px; }
.circuit-grille h2 { margin: 13px 0; }
.circuit-grille p { color: #cfcac0; font-size: 14px; }
.chiffres-circuit { margin-top: 24px; display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.carte-circuit { border-radius: 4px; background: #343432; padding: 23px; }
.carte-circuit > span, .carte-circuit > small { font: 10px var(--technique); }
.carte-circuit > small { color: #b2afa8; }
.carte-circuit svg { width: 100%; margin-top: 10px; }
.carte-circuit svg text { fill: white; font: 11px var(--technique); }
@media (max-width: 780px) { .offre { grid-template-columns: 1fr; gap: 14px; } .circuit-grille { grid-template-columns: 1fr; } .hero-image { height: 430px; } }
@media (max-width: 560px) { .hero-titre h1 { font-size: 63px; letter-spacing: -2px; } .hero-meta { display: none; } .hero-image { height: 480px; } .hero-texte { width: 93%; } .compte-rebours { display: block; } .chrono-chiffres { margin-top: 12px; gap: 3px; justify-content: space-between; } .chrono-chiffres div { min-width: 0; flex: 1; padding: 6px 2px; } .chrono-chiffres b { font-size: 23px; } }