@font-face {
  font-family: "AutoradiographicItalic";
  src: local("Autoradiographic Italic"),
       local("AutoradiographicRg-Italic"),
       local("Autoradiographic Rg"),
       url('/assets/fonts/autoradiographic-rg-it.ttf');
	font-weight: normal;
  font-display: swap;
}

*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body, html{
	overflow: hidden;
	overflow-y: auto;
}

.sidebar-brand {
	font-family: "AutoradiographicItalic";
	font-weight: normal;
}

#body-pres {
	padding-top: 1.15rem;
}

.btn-group-sm>.btn, .btn-sm {
	border-radius: 0;
}

/******* Compte à rebours *******/

#clockdiv, #clockdiv-small {
	/*font-size: 31px;
	font-size: 1.95rem;*/
	font-size: 28.8px;
	font-size: 1.8rem;
	font-variant-numeric: tabular-nums;
}

@media (min-width: 1439px) and (max-width: 1774px) {
	#clockdiv, #clockdiv-small {
		font-size: 19.2px;
		font-size: 1.2rem;
	}
}

@media (min-width: 1200px) and (max-width: 1295px) {
	#clockdiv, #clockdiv-small {
		font-size: 24.8px;
		font-size: 1.55rem;
	}
}

@media (max-width: 386px) {
	#clockdiv, #clockdiv-small {
		font-size: 27.52px;
		font-size: 1.72rem;
	}
}

#clockdiv.clockdiv-xl {
	font-size: 40px;
	font-size: 2.5rem;
/*	font-size: 51.2px;
	font-size: 3.2rem;*/
}


#clockdiv .seconds, #clockdiv-small .seconds {
	display: inline-block;
	width: 41px;
	text-align: center;
}

#clockdiv.clockdiv-xl .seconds {
	display: inline-block;
	width: 52px;
}

#countdown-status {
	display: inline-block;
}

#programme-tv {
	vertical-align: middle;
	/*height: 100%;*/
}

#programme-tv img {
	vertical-align: middle;
}

.programme-tv-date, .programme-tv-cont {
	display: inline-block;
}

.programme-tv-date {
	width: 42px;
	margin-right: 5px;
}

.meteo-icon-xl {
	/*font-size: 56px;*/
	font-size: 50px;
	text-align: right;
}

.meteo-temp-xl {
	font-size: 33px;
}

/*.programme-tv-calendar .programme-tv-line:not(:last-child) {
	margin-bottom: 6px;
}*/

h4.prog-tv-date {
	padding-top: 4px;
}

#pneus-title-prog {
	min-width: 58px;
}

@media (max-width: 415px) {
	.programme-tv-cont small {
		display: none;
	}
}

.world-map-responsive {
	width: 100%;
	height: 500px; /* valeur par défaut */
}

@media (max-width: 768px) {
	.world-map-responsive {
		height: 300px;
	}
}

@media (max-width: 576px) {
	.world-map-responsive {
		height: 240px;
	}
}

/******* Calendrier *******/

.btn-scroll-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex; /* Utiliser flex pour centrer le contenu */
    align-items: center;
    justify-content: center;
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-decoration: none;
    z-index: 1000;
    transition: opacity 0.3s;
}

.btn-scroll-top:hover {
    background-color: #444;
}

/******* Fiches pilotes *******/

.big-number {
	font-size: 63px;
}

.big-name {
	font-size: 28px;
}

.pilot-div {
	padding-bottom: 20px;
}

.bkg-div-pilot {
	/*background-image: url('https://aurupteur.com/wp-content/uploads/2020/03/grid-bkg.jpg');
	background-position: center;
	background-repeat: none;*/
	overflow: hidden;
	position: relative;
}

.pilot-cup {
	/*color: #ffcf40;*/
	position: absolute;
	top: 15px;
	right: 30px;
	color: #d8ac28;
	font-size: 36px;
	cursor: default;
	padding: 0px 10px;
	background-color: rgba(255,255,255,0.2);
	border-radius: 5px;
}

.pilot-tcam {
	/*color: #ffcf40;*/
	position: absolute;
	top: 15px;
	left: 30px;
	font-size: 36px;
	font-weight: 700;
	cursor: default;
	padding: 0px 10px;
	background-color: rgba(255,255,255,0.2);
	border-radius: 5px;
}

.pilot-text-div, .helmet-div {
	padding-top: 10px;
}

.helmet-div img {
	/*max-height: 83px;*/
}

.pilot-season-pic {
	/*max-height: 585px;*/
	transition: transform 1s;
}
.pilot-season-pic:hover {
	//transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
	z-index: 0;
}

/* Plus Portrait */
@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) {
	/*.helmet-div img {
		max-height: 107px;
	}*/

	/*.pilot-season-pic {
		max-height: 350px;
	}*/
}

/* Regular Portrait */
@media only screen 
    and (min-device-width : 375px)
    and (max-device-width : 667px) {
	/*.helmet-div img {
		max-height: 94px;
	}*/

	/*.pilot-season-pic {
		max-height: 311px;
	}*/
}

.pilot-body {
	margin-top: 10px;
}

/******* Ecuries F1 *******/

.f1team {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 600;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
cursor: default;
}

#teams .f1team {
font-size: 100%;
}

#mobile-teams h4.sub-team {
	padding: 0;
	font-size: 0.95rem;
}
.mobile-team-social {
	margin-top: 10px;
}
.mobile-team-plus {
	margin-top: 10px;
	margin-bottom: 15px;
}
.mobile-plus-team-div {
	margin-top: 15px;
	margin-bottom: 15px;
}
#mobile-teams .mobile-logo-team {
	margin-bottom: 10px;
}

.mercedes {background-color: #00CFBA; border: 1px solid #A9A9A9;}
.redbullracing {background-color: #00007D; border: 1px solid #ed1b2f;}
.ferrari {background-color: #C30000; border: 1px solid #000;}
.forceindia {background-color: #FF80C7; border: 1px solid #3558a6;}
.williams {background-color: #FFFFFF; color: #000; border: 1px solid #52B6D6;}
.mclaren {background-color: #FF7B08; border: 1px solid #000;}
.honda {background-color: #000; border: 1px solid #e71837;}
.tororosso {background-color: #0000FF; border: 1px solid #FF0033;}
.haas {background-color: #6C0000; border: 1px solid #696969;}
.renault {background-color: #FFD800; color: #000; border: 1px solid #000000;}
.sauber {background-color: #006EFF; border: 1px solid #ffd700;}

div.card-header span.badge.badge-pill.fw-normal {
	margin-top: -1px;
	padding-bottom: 0px;
	vertical-align: top;
}

li.list-group-item span.badge.badge-pill.fw-normal {
	margin-top: -4px;
	padding-bottom: 3px;
	vertical-align: middle;
}

.f1-name {font-size: 12px; font-size: 0.75rem; text-align: center; color: #696969;}

td.event-done, td.event-done a {
	color: #c1c1c1;
	filter: gray;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
}

/*******/

#html-info-addon {
	/*padding: 0 0 24px 0;*/
}

.tw-align-center-container .twitter-tweet {
	display: flex !important;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
	margin-left: auto !important;
    margin-right: auto !important;
}

#tweetinsta-row {
}

#tweet-row .tw-align-center-container {
	margin-bottom: 24px;
}

#insta-row .insta-container, #tweetinsta-row .insta-container {
	margin-bottom: 24px;
}

#youtube-row .youtube-container {
	margin-bottom: 24px;
}

/********/
/* ApexCharts Custom CSS */

.apexcharts-tooltip-series-group.apexcharts-active, .apexcharts-tooltip-series-group:last-child {
	padding-bottom: 0 !important;
}

/*************/
div.actus div.card div.card-body {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
div.actus div.card:hover div.card-body {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
	/*background-color: #ececec;*/
}
div.actus div.card:hover img.card-img-top {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
	filter: saturate(130%);
	transform: scale(1.1);
}
div.actus div.card img.card-img-top {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
.card-img-wrap {
  overflow: hidden;
  position: relative;
}
.actus .card-img-top, .photos .card-img-top {
	position: absolute;
/*	top: 0;
	bottom: 0;
	margin: auto 0;*/
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-img-wrap .card-img-top {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

@media (max-width: 1399.98px) {
	.title-actu {
		font-size: 2rem;
	}
}

@media (max-width: 991.98px) {
	.title-actu {
		font-size: 1.5rem;
	}
}

/*------------------------------------*\
    Photo Gallery
\*------------------------------------*/

.lightbox-gallery{/*background-image: linear-gradient(#4A148C, #E53935);background-repeat: no-repeat;*/color: #000;overflow-x: hidden}.lightbox-gallery p{color:#fff}.lightbox-gallery h2{font-weight:bold;margin-bottom:40px;padding-top:40px;color:#fff}@media (max-width:767px){.lightbox-gallery h2{margin-bottom:25px;padding-top:25px;font-size:24px}}.lightbox-gallery .intro{font-size:16px;max-width:500px;margin:0 auto 40px}.lightbox-gallery .intro p{margin-bottom:0}.lightbox-gallery .photos{padding-bottom:20px}.lightbox-gallery .item{padding-bottom:24px}

/* BTN WhatsApp */
.btn-whatsapp, .btn-twitter, .btn-telegram, .btn-bref {
	height: 28px;
    border-radius: 9999px;
    padding: 2px 12px 2px 12px;
	border: none;
	/*background-color: #25D366;*/
	font: normal normal normal 12px/18px 'Helvetica Neue',Arial,sans-serif;
	font-size: 13px;
	display: inline-block;
    vertical-align: top;
    zoom: 1;
}
.btn-whatsapp .fab.fa-whatsapp, .btn-twitter .fab.fa-twitter, .btn-telegram .fab.fa-telegram, .btn-bref .fad.fa-link {
	font-size: 17px;
    padding-top: 2px;
    vertical-align: text-bottom;
    display: inline-block;
}

.btn-whatsapp.btn-check:focus+.btn, .btn-twitter.btn-check:focus+.btn, .btn-telegram.btn-check:focus+.btn, .btn-bref.btn-check:focus+.btn {
    box-shadow: none;
    outline: 0;
}
/* BTN Twitter */
.btn-twitter {
    padding: 5px 12px 5px 12px;
	/*background-color: #1DA1F2;*/
	background-color: #000;
}
/* BTN Telegram */
.btn-telegram {
    padding: 5px 12px 5px 12px;
	background-color: #229ED9;
}
/* BTN Bref */
.btn-bref {
    padding: 5px 12px 5px 12px;
}
/* Small Brefs */
.btn-whatsapp.small-share, .btn-twitter.small-share, .btn-telegram.small-share, .btn-bref.small-share {
	height: 19px;
	font-size: 13px;
    padding: 0px 6px 0px 6px;
}
.btn-whatsapp.small-share .fab.fa-whatsapp, .btn-twitter.small-share .fab.fa-twitter, .btn-telegram.small-share .fab.fa-telegram-plane, .btn-bref.small-share .fad.fa-link {
	font-size: 13px;
    padding-top: 2px;
    vertical-align: text-bottom;
    display: inline-block;
}

/* Dernières actus */
.pointy-tr {
	cursor: pointer;
}
/* Fin dernières actus */

/* Stories */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
}
#storyContainer {
	touch-action: manipulation;
}
#storyContainer .story {
    display: none; /* À supprimer si le conteneur doit être visible */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%; /* Prend toute la largeur de l'écran */
    height: 100%; /* Prend toute la hauteur de l'écran */
    background-color: #000;
    display: flex; /* Active le Flexbox */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    flex-direction: column;  /* Organise les éléments verticalement */
}
.story p,
.story img {
    position: absolute;
    width: 100%;
    text-align: center;
	user-select: none; /* Standard syntax */
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE/Edge */
}
.story p {
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 40px); /* Réduire la largeur pour éviter les flèches */
	text-align: center;
	font-size: 2em;
	padding: 10px;
	box-sizing: border-box;
	margin: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
	white-space: normal;
	z-index: 2;  /* Met le texte au-dessus de l'image */
	color: #fff;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
.story.text-only p {
    top: 50%;  /* Centre lorsque c'est seulement du texte */
}
.story-title + p {
	top: 35%; /* légèrement plus bas si un titre est présent */
}

.story .story-font-large {
    font-size: 4em;
}
.story .story-font-medium {
    font-size: 3em;
}
.story .story-font-normal {
    font-size: 2.2em;
}
.story .story-font-small {
    font-size: 1.8em;
}
.story .story-font-xsmall {
    font-size: 1.25em;
}

.story img {
    object-fit: contain;
    bottom: 5%;
    z-index: 1;  /* Met l'image en dessous du texte */
    max-width: 100%;  /* Assure que l'image ne déborde pas */
    max-height: 50%;
    align-self: center;  /* Centre l'image horizontalement */
	transform: rotate(0deg);  /* La rotation sera définie dynamiquement via JavaScript */
}

.elapsed-time {
    position: absolute;
    bottom: 12px;
    left: 2px;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    z-index: 1;
}

.bref-story-link {
    position: absolute;
    bottom: 12px;
    right: 2px;
    font-size: 12px;
    z-index: 1;
}

#progressBar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10px;
    width: 0;
    background: #007bff;
}
.nav-button {
    position: absolute;
    top: 50%;
    font-size: 24px;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10000;
}
.nav-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
#prevStory {
    left: 0px;
}
#nextStory {
    right: 0px;
}
.pause-play-button {
    position: absolute;
    top: 10px;
    left: 10px;
    background: none;
    border: 2px solid #fff;
    color: #fff;
    font-size: 18px;
    padding: 5px 10px;
    z-index: 10002; /* pour qu'il soit au-dessus des autres éléments */
    cursor: pointer;
}
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    z-index: 10001;
}

@media (max-width: 768px) {
    .story p {
        font-size: 1.2em; /* Taille de police plus petite pour mobile */
        width: calc(100% - 30px); /* Réduire encore plus la largeur pour mobile */
        margin: 0;
    }

	.story .story-font-large {
		font-size: 2.3em;
	}
	.story .story-font-medium {
		font-size: 1.8em;
	}
	.story .story-font-normal {
		font-size: 1.3em;
	}
	.story .story-font-small {
		font-size: 1.1em;
	}
	.story .story-font-xsmall {
		font-size: 0.8em;
	}

	.story .story-font-large.story-photo {
		font-size: 2.0em;
	}
	.story .story-font-medium.story-photo {
		font-size: 1.6em;
	}
	.story .story-font-normal.story-photo {
		font-size: 1.2em;
	}
	.story .story-font-small.story-photo {
		font-size: 0.9em;
	}
	.story .story-font-xsmall.story-photo {
		font-size: 0.7em;
	}
}

.story-title {
	position: absolute;
	top: 7%;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	color: #ffffff;
	font-weight: 600;
	font-size: 1.6em;
	text-align: center;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
	z-index: 3;
	opacity: 0.95;
}
@media (max-width: 768px) {
	.story-title {
		font-size: 1.3em;
		top: 7%;
	}
}

/* Fin Stories */

.image-container {
    height: 200px; /* ou toute autre hauteur que vous souhaitez */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.helmet-image {
    max-height: 100%;
    object-fit: contain;
}

.progress-bar {
    position: relative;
}

.progress-label {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #fff;
    top: 51%;
    transform: translateY(-50%);
}

.permanent-number {
    font-size: 3em;
    line-height: 1;
    text-align: center;
}

.gsc-control-cse.gsc-control-cse-fr {
	box-shadow: 0 0 0.875rem 0 rgba(33,37,41,.05);
}

.card-avec-fond {
  background-repeat: no-repeat;
  background-size: cover;
}

.card-blanc-transp {
	background-color: rgba(255,255,255,0.85);
}

/* Brefs */
.img-bref-thumb {
	object-fit: cover; width: 100%; height: 100%;
}

/* Versus */
.invisible {
    visibility: hidden;
}

.pilote-versus-photo-container-container {
	background-color: #ffffff;
	max-width: 100%;
	border-radius: 8px;
}

.pilote-versus-photo-container {
	background: linear-gradient(135deg, #e0e0e0, #ffffff);
	height: 250px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.pilote-versus-photo {
	max-height: 100%;
	max-width: auto;
}

.goat-card {
    background-color: #ffffff;
    border-radius: 8px;
}

/* Conteneur de la photo avec fond dégradé doré */
.goat-photo-container {
    background: linear-gradient(135deg, #fff6c3, #af7711); /* Dégradé or */
    height: 250px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: relative;
    overflow: hidden;
}

/* Style de l'image du GOAT */
.goat-photo {
    max-height: 100%;
    max-width: auto;
	z-index: 10;
}

/* Effet festif de cotillons */
@keyframes confetti {
    0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti {
    position: absolute;
    top: -10vh;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: confetti 8s linear infinite;
    opacity: 0.9;
}

/* Confettis en couche arrière */
.confetti-back {
    z-index: 5; /* Derrière la photo */
}

/* Confettis en couche avant */
.confetti-front {
    z-index: 15; /* Devant la photo */
}

/* Variations de couleurs */
/*.confetti:nth-child(2n) { background-color: #FFA500; }
.confetti:nth-child(3n) { background-color: #FF4500; }
.confetti:nth-child(4n) { background-color: #FFD700; }
.confetti:nth-child(5n) { background-color: #FFC107; }
.confetti:nth-child(6n) { background-color: #00BFFF; }
.confetti:nth-child(7n) { background-color: #32CD32; }
.confetti:nth-child(8n) { background-color: #FF69B4; }*/

/* Confettis en arrière-plan */
.confetti-back:nth-child(2n) { background-color: #FFD700; } /* Or */
.confetti-back:nth-child(3n) { background-color: #87CEFA; } /* Bleu clair */
.confetti-back:nth-child(4n) { background-color: #9370DB; } /* Violet clair */
.confetti-back:nth-child(5n) { background-color: #6A5ACD; } /* Bleu foncé */
.confetti-back:nth-child(6n) { background-color: #8A2BE2; } /* Bleu royal */
.confetti-back:nth-child(7n) { background-color: #FFB6C1; } /* Rose clair */

/* Confettis en avant-plan */
.confetti-front:nth-child(2n) { background-color: #FFA500; } /* Orange */
.confetti-front:nth-child(3n) { background-color: #FF4500; } /* Rouge vif */
.confetti-front:nth-child(4n) { background-color: #FFD700; } /* Or */
.confetti-front:nth-child(5n) { background-color: #FFC107; } /* Jaune foncé */
.confetti-front:nth-child(6n) { background-color: #00BFFF; } /* Bleu clair */
.confetti-front:nth-child(7n) { background-color: #32CD32; } /* Vert clair */
.confetti-front:nth-child(8n) { background-color: #FF69B4; } /* Rose vif */

/* Fin versus */

/* Footer */
.footer-icon-svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: middle;
	margin-top: -2px;
}

.footer .footer-icons {
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

@media (max-width: 767.98px) {
	.footer .list-inline-item a {
		padding-right: 0.75rem;
		padding-left: 0.75rem;
		font-size: 1.4rem;
	}
	.footer .ar-moto {
		font-size: 1rem;
	}
	.footer-icon-svg {
		margin-top: -5px;
	}
}

@media (min-width: 768px) {
	.footer .footer-icons {
		justify-content: flex-end;
	}
}
/* Fin footer */

/* Podium */
.podium-1 {
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	padding-top: 25px; padding-bottom: 25px;
}
.podium-2 {
	border-bottom-right-radius: 0 !important;
}
.podium-3 {
	border-bottom-left-radius: 0 !important;
}
.podium-2-cont, .podium-3-cont {
	padding-top: 18px !important;
}
.podium-numb {
    position: absolute;
    z-index: 0;
    font-size: 64px;
    opacity: 44%;
    width: 64px;
}
.podium-1-numb {
    color: #d4af37;
}
.podium-2-numb {
	color: #c0c0c0;
}
.podium-3-numb {
	color: #614e1a;
}
/* Fin podium */

.arlogo {
	font-family: "AutoradiographicItalic";
	font-weight: normal;
}

/* Tuiles accueil — Stories (Bootstrap 5.1.1) */
.stories-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  overflow-y:visible;          /* ombres visibles */
  padding:4px 2px 16px;        /* espace bas pour l'ombre */
  margin-bottom:1rem;          /* marge avant “Au micro” */
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.stories-track::-webkit-scrollbar{ height:8px }

/* Drag UX */
.story-card{ cursor:grab; }
.stories-track.dragging{ cursor:grabbing; user-select:none; }
.stories-track.dragging .story-card{ pointer-events:none; }

.story-card{
  position:relative;
  flex:0 0 260px;
  height:360px;
  border-radius:.75rem;
  overflow:hidden;
  scroll-snap-align:start;
  background:#111;
  background-image:var(--story-bg);
  background-size:cover;
  background-position:center;
  box-shadow:0 3px 8px rgba(0,0,0,.35);
  text-decoration:none;
}
@media (max-width:576px){
  .story-card{ flex-basis:70vw; height:64vw; }
}

.story-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.75) 100%);
  z-index:1;
}

/* Overlay bas contenant le titre */
.story-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:12px;
  min-height:72px;
  display:flex;
  align-items:flex-end;        /* colle la dernière ligne en bas */
  z-index:2;                   /* au-dessus du ::after */
}

/* Titre — padding latéral via .story-footer */
.story-title{
  margin:0;
  color:#fff;
  font-weight:700;
  line-height:1.15;
  font-size:1.05rem;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:left;
}

/* Badge */
.story-badge{
  position:absolute;
  top:10px; left:12px;
  z-index:3;
  padding:.25rem .5rem;
  border-radius:999px;
  font-size:.75rem;
  font-weight:800;
  color:#fff;
  background:#e6007a;
}

/* Tuile “Voir plus” */
.story-more{
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  background-image:linear-gradient(135deg,#2b2b2b,#0f0f0f);
}
.story-more-icon{
  position:absolute;
  right:14px; bottom:16px;
  font-size:1.4rem; color:#fff; opacity:.9;
}

/* Fallback sans image */
.story-fallback{ background-image:linear-gradient(135deg,#2b2b2b,#0f0f0f); }

/* States */
.story-card:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.story-card:hover{ box-shadow:0 5px 12px rgba(0,0,0,.45); transform:translateY(-1px); transition:.15s ease-in-out; }

/* autorise le swipe horizontal natif sur mobile */
.stories-track{ touch-action: pan-x; }

/*************/

/* Grille actus */
/* Grille actus : 1 → 2 → 3 → 6 colonnes */
.news-grid{
  display:grid;
  gap:16px;
  margin-bottom:2rem;
  grid-template-columns:1fr;                      /* < ~700px : 1 */
}
@media (min-width:700px){
  .news-grid{ grid-template-columns:repeat(2,minmax(280px,1fr)); }   /* 2 */
}
@media (min-width:1232px){
  .news-grid{ grid-template-columns:repeat(3,minmax(280px,1fr)); }   /* 3 dès ~1230px */
}
@media (min-width:2120px){
  .news-grid{ grid-template-columns:repeat(6,minmax(280px,1fr)); }   /* 6 en ultra-large */
}

/* Tuile actus */
.news-card{
  position:relative; display:block; height:420px; border-radius:.75rem; overflow:hidden;
  background:#111; background-image:var(--news-bg); background-size:cover; background-position:center;
  box-shadow:0 3px 8px rgba(0,0,0,.35); text-decoration:none;
}
@media (max-width:576px){ .news-card{ height:68vw; } }

.news-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.8) 100%);
  z-index:1;
}

/* Badges */
.news-type{ position:absolute; top:10px; left:12px; z-index:2; }
.news-new { position:absolute; top:10px; left:12px; transform:translateY(32px);
  z-index:2; padding:.25rem .5rem; border-radius:999px; font-size:.75rem; font-weight:800; color:#fff; background:#e6007a; }
.news-date{ position:absolute; top:10px; right:12px; z-index:2; }

/* Footer */
.news-footer{ position:absolute; left:0; right:0; bottom:0; padding:12px; z-index:2; }
.news-title{
  margin:0 0 .25rem 0; color:#fff; font-weight:700; line-height:1.15; font-size:1.05rem;
  overflow-wrap:anywhere;
}
.news-excerpt{
  margin:0; color:#fff; opacity:.9; line-height:1.25; font-size:.95rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Fallback */
.news-fallback{ background-image:linear-gradient(135deg,#2b2b2b,#0f0f0f); }

/* Tuile “voir plus” */
.news-more{ background-image:linear-gradient(135deg,#2b2b2b,#0f0f0f); }
.news-more-icon{ position:absolute; right:14px; bottom:16px; font-size:1.4rem; color:#fff; opacity:.9; }

/* States */
.news-card:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.news-card:hover{ box-shadow:0 5px 12px rgba(0,0,0,.45); transform:translateY(-1px); transition:.15s ease-in-out; }

/*****************/

/* Track horizontal (type “stories”) */
.htrack{
  display:flex; gap:16px; overflow-x:auto; overflow-y:visible;
  padding:4px 2px 16px; margin-bottom:1rem;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  /* touch-action défini par media queries */
}
.htrack::-webkit-scrollbar{ height:8px }

/* Cartes */
.hcard{
  position:relative; flex:0 0 260px; height:360px; border-radius:.75rem;
  overflow:hidden; scroll-snap-align:start; background:#111;
  background-image:var(--hcard-bg); background-size:cover; background-position:center;
  box-shadow:0 3px 8px rgba(0,0,0,.35); text-decoration:none;
}
@media (max-width:576px){ .hcard{ flex-basis:70vw; height:64vw; } }

.hcard::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.8) 100%);
}

/* Badges */
.hbadge-type{ position:absolute; top:10px; left:12px; z-index:2; }
.hbadge-date{ position:absolute; top:10px; right:12px; z-index:2; }

/* Titre bas */
.hcard-footer{ position:absolute; left:0; right:0; bottom:0; padding:12px; min-height:72px; display:flex; align-items:flex-end; z-index:2; }
.hcard-title{ margin:0; color:#fff; font-weight:700; line-height:1.15; font-size:1.05rem; overflow-wrap:anywhere; }

/* Fallback + états */
.hcard-fallback{ background-image:linear-gradient(135deg,#2b2b2b,#0f0f0f); }
.hcard:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.hcard:hover{ box-shadow:0 5px 12px rgba(0,0,0,.45); transform:translateY(-1px); transition:.15s ease-in-out; }

/* Desktop (souris) : pas de swipe */
@media (pointer: fine){
  .htrack{ touch-action:auto; }
}

/* Mobile/tablette : swipe natif horizontal */
@media (pointer: coarse){
  .htrack{
    touch-action:pan-x;
    -webkit-overflow-scrolling:touch;
  }
}

/* Drag souris comme les brefs */
.hcard{ cursor:grab; }
.htrack.dragging{ cursor:grabbing; user-select:none; }
.htrack.dragging .hcard{ pointer-events:none; }

/* Parité drag avec .htrack */
.stories-track .story-card{ cursor:grab; }
.stories-track.dragging{ cursor:grabbing; user-select:none; }
.stories-track.dragging .story-card{ pointer-events:none; }

/* Parité touch-action avec .htrack */
@media (pointer: fine){
  .stories-track{ touch-action:auto; }
}
@media (pointer: coarse){
  .stories-track{
    touch-action:pan-x;
    -webkit-overflow-scrolling:touch;
  }
}

/* Anti-rebond */
.htrack, .stories-track{ overscroll-behavior-x: contain; }

/* (optionnel) éviter le flash sur iOS au tap */
.story-card, .hcard{ -webkit-tap-highlight-color: transparent; }

/* empêche le drag natif “ghost image” */
.story-card, .hcard { -webkit-user-drag: none; }
.story-card img, .hcard img { -webkit-user-drag: none; pointer-events:none; }

/* Fin tuiles accueil */

/* Tuiles Au Micro */
.qgrid{
  display:grid;
  grid-template-columns:1fr;          /* < 1026px : 1 par ligne */
  gap:16px;
  margin-bottom:2rem;
}

/* 1026px → 1707px : 2 par ligne */
@media (min-width:1026px){
  .qgrid{ grid-template-columns:repeat(2,1fr); }
}

/* ≥1708px : 4 par ligne */
@media (min-width:1708px){
  .qgrid{ grid-template-columns:repeat(4,1fr); }
}

.qcard{
  position:relative; display:block; height:280px; border-radius:.75rem; overflow:hidden;
  background:#111; background-image:var(--qcard-bg); background-size:cover; background-position:center;
  box-shadow:0 3px 8px rgba(0,0,0,.25); text-decoration:none;
}
@media (max-width:576px){ .qcard{ height:220px; } }

.qcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.25) 0,rgba(0,0,0,.55) 55%,rgba(0,0,0,.85) 100%); z-index:1; }
.qcard:hover{ box-shadow:0 5px 12px rgba(0,0,0,.35); transform:translateY(-1px); transition:.15s; }
.qcard:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.qcard-fallback{ background-image:linear-gradient(135deg,#2b2b2b,#0f0f0f); }

.qmeta{ position:absolute; z-index:2; top:10px; left:12px; right:12px; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; }
.qavatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(255,255,255,.8); }
.qavatar-fallback{ display:grid; place-items:center; font-weight:800; color:#222; background:#e9ecef; }
.qwho strong{ display:block; color:#fff; line-height:1.1; }
.qwho .badge{ margin-top:2px; }

.qdate{ color:#fff; opacity:.9; white-space:nowrap; }

.qtext{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2; margin:0; padding:10px 12px;
  background:rgba(255,255,255,.06); border-left:4px solid #0d6efd; border-radius:.5rem;
  color:#fff; font-style:italic; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden;
}
/* Fin tuiles Au Micro */

/*********************************************/

/* Refonte Index */

/* ===== Grid ≥1920px : 1/3 ===== */
@media (min-width:1920px){
  .uhd-4{flex:0 0 33.333333%;max-width:33.333333%;min-width:0;}
}

/* ===== Next GP ===== */
.home-nextgp-card{
  position:relative;overflow:hidden;max-width:100%;
  min-height:clamp(260px,22vw,360px);
}
.home-nextgp-card.has-bkg::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;
  background-image:var(--gp-bkg);background-size:cover;background-position:center;
  opacity:.25;filter:grayscale(20%);pointer-events:none;
}
.home-nextgp-card>.card-header,
.home-nextgp-card>.home-nextgp-body2{position:relative;z-index:1;}
.home-nextgp-card .card-body{min-width:0;}

.home-nextgp-body2{
  display:flex;flex-direction:column;gap:14px;min-height:0;background:transparent;
}
.home-nextgp-hero{
  display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center;
  background:rgba(255,255,255,.72);border-radius:.75rem;padding:10px 12px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);min-width:0;overflow:hidden;
}
@media (max-width:575.98px){.home-nextgp-hero{grid-template-columns:1fr;align-items:start;}}
.home-track{display:flex;flex-direction:column;align-items:center;gap:8px;}
.home-track-img{width:120px;height:auto;max-height:110px;object-fit:contain;}
.home-meteo2{font-size:.95rem;opacity:.9;margin-top:2px;}

/* ---- Compteur (scopé) ---- */
.home-nextgp-card #clockdiv-home{
  font-size:clamp(1.2rem,2.2vw,2rem);font-variant-numeric:tabular-nums;
  white-space:nowrap;line-height:1;
}
.home-nextgp-card #countdown-status{
  display:flex;align-items:baseline;gap:.4ch;flex-wrap:nowrap;max-width:100%;
}
.home-nextgp-card #countdown-status .flag-icon{flex:0 0 auto;}
.home-nextgp-card #clockdiv-home .days,
.home-nextgp-card #clockdiv-home .hours,
.home-nextgp-card #clockdiv-home .minutes,
.home-nextgp-card #clockdiv-home .seconds{
  display:inline-block;min-width:2ch;text-align:center;
}
.home-nextgp-card #clockdiv-home .seconds{
  font-size:.95rem;
}
.home-nextgp-card #clockdiv-home .smalltext{font-size:.5em;opacity:.7;margin:0;}

/* ---- Pneus (SVG) ---- */
.home-tyresbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.tyre-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  font-size:.95rem;}
.tyre-dot{width:12px;height:12px;display:block;}
.tyre-chip--hard  .tyre-dot circle{fill:#fff;stroke:#000;stroke-width:1;}
.tyre-chip--medium .tyre-dot circle{fill:#ffd200;stroke:#000;stroke-width:1;}
.tyre-chip--soft .tyre-dot circle{fill:#e10600;stroke:#000;stroke-width:1;}

/* ---- Jours / sessions ---- */
.home-daysgrid{display:grid;grid-auto-flow:row dense;gap:12px;grid-template-columns:1fr;min-width:0;}
@media (min-width:576px){.home-daysgrid{grid-template-columns:repeat(2,1fr);}}
.day-col{background:rgba(255,255,255,.78);border-radius:.75rem;padding:10px 12px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:0 1px 3px rgba(0,0,0,.06);min-width:0;}
.day-col.span-all{grid-column:1 / -1;}
.day-head{display:flex;align-items:center;justify-content:center;margin-bottom:6px;}
.day-date{font-weight:700;letter-spacing:.2px;}
.day-sessions{display:flex;flex-direction:column;gap:6px;}
.day-sessions .sess{
  display:grid;grid-template-columns:auto 1fr 4.2ch auto;align-items:center;column-gap:8px;white-space:nowrap;
}
.sess-label{font-weight:600;}
.sess-time{font-variant-numeric:tabular-nums;justify-self:end;text-align:right;}
.sess-w{opacity:.95;}

/* ===== Podium ===== */
.home-podium-card{ min-height:clamp(260px,22vw,360px); }
.home-podium-grid{ display:grid; gap:12px; grid-template-columns:1fr; align-items:stretch; }
@media (min-width:768px){ .home-podium-grid{ grid-template-columns:repeat(3,1fr); } }
.home-podium-item{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  min-height:clamp(140px,18vw,200px); border-radius:.75rem; padding:12px; text-decoration:none; color:#fff; overflow:hidden;
  background:linear-gradient(135deg,#2b2b2b,#0f0f0f); box-shadow:0 3px 8px rgba(0,0,0,.35);
}
.home-podium-item:hover{ transform:translateY(-1px); box-shadow:0 5px 12px rgba(0,0,0,.45); transition:.15s; }
.home-rank{ position:absolute; top:8px; left:10px; z-index:2; font-size:1.4rem; font-weight:800; opacity:.9; }
.pos-1 .home-rank{ color:#d4af37; } .pos-2 .home-rank{ color:#c0c0c0; } .pos-3 .home-rank{ color:#b08d57; }
.home-driver-img{ position:absolute; left:50%; bottom:-12px; transform:translateX(-50%); height:78%; width:auto; object-fit:contain; opacity:.95; pointer-events:none; }
.home-driver-first{ position:relative; z-index:2; font-size:1rem; line-height:1.1; text-align:center; }
.home-driver-last{ position:relative; z-index:2; font-size:1.05rem; line-height:1.1; text-align:center; font-weight:800; letter-spacing:.5px; }
.home-flag{ position:relative; z-index:2; display:block; text-align:center; margin-top:2px; }
.home-team{ position:relative; z-index:2; display:block; text-align:center; opacity:.95; font-size:.95rem; }
.home-driver-points{ position:relative; z-index:2; display:block; text-align:center; margin-top:2px; font-size:1.4rem; font-weight:800; line-height:1; }
.home-podium-item::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,0,0,0) 25%, rgba(0,0,0,.75) 100%); }
/* Tuer le lien bleu sur les titres podium */
.home-podium-card .home-podium-item,
.home-podium-card .home-podium-item:link,
.home-podium-card .home-podium-item:visited,
.home-podium-card .home-podium-item:hover,
.home-podium-card .home-podium-item:focus,
.home-podium-card .home-podium-item:active{
  color:#fff !important;
  text-decoration:none !important;
}
/* Au cas où le texte veuille être souligné quand même */
.home-podium-card .home-podium-item *{
  text-decoration:none !important;
  color:inherit;
}
/* garder le contour de focus sans changer la couleur */
.home-podium-card .home-podium-item:focus-visible{
  outline:2px solid #fff6;
  outline-offset:2px;
}

@media (max-width:767.98px){
  .home-podium-item{
    display:grid;
    grid-template-columns:minmax(0,45%) minmax(0,55%); /* image | texte */
    grid-template-rows:repeat(5, auto);
    align-items:end;            /* on colle l’image en bas */
    row-gap:2px;
    min-height:auto;
    padding:12px;
  }

  .home-driver-img{
    position:static !important; left:auto; bottom:auto; transform:none;
    grid-column:1; grid-row:1 / 6;      /* l’image occupe toute la colonne gauche */
    justify-self:center; align-self:end;/* “collée” en bas */
    width:100%; max-height:140px; height:auto; object-fit:contain;
    z-index:1;
	margin-bottom: -12px;
  }

  /* Texte à droite, serré comme un simple retour à la ligne */
  .home-driver-first{ grid-column:2; grid-row:1; text-align:center; margin:0; line-height:1.05; }
  .home-driver-last { grid-column:2; grid-row:2; text-align:center; margin:0; line-height:1.05; }
  .home-flag        { grid-column:2; grid-row:3; text-align:center; margin:2px 0 0; }
  .home-team        { grid-column:2; grid-row:4; text-align:center; margin:0; font-size:.9rem; }
  .home-driver-points{grid-column:2; grid-row:5; text-align:center; margin-top:2px; font-size:1.2rem; }

  .home-rank{ top:6px; left:8px; }
}

/* ===== Dernières actus ===== */
.home-newslist{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.home-newsitem{}
.home-newslink{ display:flex; gap:10px; align-items:flex-start; text-decoration:none; color:inherit; }
.home-newslink:hover{ text-decoration:none; }
.home-avatar{ width:64px; height:64px; border-radius:50%; object-fit:cover; background:#e9ecef; flex:0 0 64px; }
.home-avatar.ph{
  display:block; background:linear-gradient(100deg,#e9ecef 40%,#f5f7f9 50%,#e9ecef 60%) 0 0 / 200% 100% no-repeat;
  animation:home-skel 1.2s infinite; border-radius:50%; width:64px; height:64px;
}
@keyframes home-skel{ to { background-position:-200% 0; } }
.home-newstext{ min-width:0; flex:1; }
.home-newshead{ display:flex; align-items:center; gap:8px; }
.home-newstitle{ display:block; line-height:1.2; }
.home-newslist-card{ min-height:clamp(260px,22vw,360px); }

/* padding homogène (côtés = bas) + scroll si trop d’items */
.home-newslist-card .card-body{
  flex:1 1 auto; min-height:0; overflow:auto;
  padding:1rem !important;      /* mêmes valeurs qu’aux côtés */
  padding-top:.5rem; /* compact en haut */
}

/* OPTI VITESSE */

/* Palette skeleton */
:root{ --skel1:#e9ecef; --skel2:#f6f8fa; }

/* Shimmer générique (sert partout) */
.skel,
.home-avatar.ph{
  background:linear-gradient(100deg,var(--skel1) 40%,var(--skel2) 50%,var(--skel1) 60%) 0 0 / 200% 100% no-repeat;
  animation:skel 1.1s infinite;
}
@keyframes skel{ to{ background-position:-200% 0; } }

/* Placeholder direct sur <img> (fond neutre) */
img.img-skel{ display:block; background:var(--skel1); }

/* Fade-in universel des images lazy */
img.lazy-fade{ opacity:0; transition:opacity .25s ease; will-change:opacity; }
img.lazy-fade.is-loaded{ opacity:1; }

/* Quand l'image est peinte, on coupe shimmer/fond éventuels */
img.is-loaded{ background:none !important; animation:none !important; }

/* Compteur: valeurs par défaut (évite le “vide”) */
.home-nextgp-card #clockdiv-home .days:empty::before,
.home-nextgp-card #clockdiv-home .hours:empty::before,
.home-nextgp-card #clockdiv-home .minutes:empty::before,
.home-nextgp-card #clockdiv-home .seconds:empty::before{
  content:"00"; opacity:.35;
}
/* petites unités */
.home-nextgp-card #clockdiv-home .smalltext{ font-size:.5em; opacity:.7; margin:0; }

/* CLS guard pour la liste actus (activé seulement si supporté) */
@supports (content-visibility:auto){
  .home-newslist-card .card-body{
    content-visibility:auto;
    contain-intrinsic-size:360px;
  }
}

/* Respect des préférences d’animation */
@media (prefers-reduced-motion:reduce){
  .skel, .home-avatar.ph{ animation:none; }
  img.lazy-fade{ transition:none; }
}