/* ======================= models_for_brand / SC_Show_generations_from_current_model_SQL() / Used by page "Car series" ======================= */
.models_for_brand_container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	background-color: #035aa2;
	padding: 10px;
	justify-content: space-around;
	border-radius: 30px;
}

.models_for_brand_header {
	width: 100%;
	/* background-color: #035aa2; */
	color: white;
	padding: 4px;
	font-size: 30px;
	/* font-size: 2vw; */
	text-align: center;
}

.models_for_brand_item {
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.8);
	text-align: center;
	padding: 8px 18px;
	font-size: 11px;
	font-weight: bold;
	border-radius: 30px;
	transition: transform 0.2s ease-in-out;
	/*font-size: 0.2dvw;	/* Dynamic Viewport Width */
}

@media (max-width: 768px) {		/* largeur maximale 768px (tablettes et mobiles) */
	.models_for_brand_item {
		font-size: 3.5vw;
	}
	
	.models_for_brand_header {
		font-size: 3.5vw;
	}
}

.models_for_brand_item:hover {
	background-color: #0288d1;
	color: white;
	transform: scale(1.25);
}

/*
@media (max-width: 768px) {		// Media Query (Styles pour petits écrans, largeur maximale de 768 pixels) 
	.models_for_brand_container > div {
		font-size: 20px;
		padding: 10px;
	}
}
*/

/* ======================= END  models_for_brand / SC_Show_generations_from_current_model_SQL() / Used by page "Car series" ======================= */

.hidden {
	display: none !important;
}

/* ======================= generation-list / generation-item / Template "Template Car Brand" / Show_models_and_generations_from_current_brand_SQL ======================= */
.generation-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.generation-item {
	display: inline-block;
	/* display: grid; */
	/* grid-gap: 10px; */
	padding: 5px 10px;
	margin: 5px;
	font-size: 12px;
	border-radius: 5px;
	background-color: #035aa2; /* Rouge clair */
}

.generation-item a {
	color: #ffffff; /* Couleur du texte par défaut */
	text-decoration: none; /* Supprime la décoration de texte par défaut */
}

.generation-item a:hover {
	color: #9bcdff; /* Couleur du texte au survol */
	text-decoration: underline; /* Décoration de texte au survol */
}
/* ======================= END generation-list / generation-item / Template "Template Car Brand" / Show_models_and_generations_from_current_brand_SQL ======================= */

/* ======================= filter_* / Generations_from_current_model_manage_options_v2 / SC_Show_generations_from_current_model_SQL ======================= */
.filter_container {
	/* max-width: 600px; */
	margin: auto  auto;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.filter_options {
	display: flex;
	flex-wrap: wrap;
}

.filter_option {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 4px;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: #fff;
	cursor: pointer;
	position: relative;
	transition: background-color 0.3s ease;
}

.filter_option:hover {
	background-color: #f0f0f0;
}

.filter_option.selected {
	background-color: #0073e6;
	border-color: #0073e6;
	color: #fff;
}

.filter_option .icon {
	display: none; /* Cachée par défaut */
	font-size: 20px;
	margin-right: 5px;
}

.filter_option.selected .icon {
	display: inline-block; /* Affichée uniquement si l'option est sélectionnée */
	color: #fff;
}

.filter_option .name {
	font-size: 11px;
	text-align: center;
}

@media (max-width: 768px) {		/* largeur maximale 768px (tablettes et mobiles) */
	.filter_option .name {
		font-size: 3vw;
	}
}

.filter_button {
	display: block;
	width: 100%;
	padding: 10px;
	background-color: #0073e6;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	font-size: 13px !important;
}

@media (max-width: 768px) {		/* largeur maximale 768px (tablettes et mobiles) */
	.filter_button {
		font-size: 3vw !important;
	}
}

.filter_button:hover {
	background-color: #005bb5;
}
/* ======================= END filter_* / Generations_from_current_model_manage_options_v2 / SC_Show_generations_from_current_model_SQL ======================= */

/* ======================= car-make* / car-logo / JS List_all_makes_logos_addEventListener_DOMContentLoaded / PHP list_all_makes_logos =======================*/
.car-make-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px; /* Espace entre les éléments */
	justify-content: center; /* Centrer les éléments */
}

.car-make-item {
	display: flex;
	flex: 1 1 52px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	/* width: 100px; */
	/* height: 100px; */
	text-align: center;
	border: 1px solid #ddd;
	border-radius: 30px;
	box-shadow: -7px -7px 4px 5px rgb(65 0 255 / 10%);
	background: #ffffff;
	transition: transform 0.5s ease-in-out;
}

.car-make-item:hover {
	transform: scale(1.75);
}

.car-logo {
	width: 5vw;
	/* max-width: 90px; */
	max-height: 3vw;
}

.car-make-name {
	/* font-size: 14px; */
	font-size: 1vw;
	font-weight: bold;
	padding: 10px;
	color: #333;
}

@media (max-width: 768px) {		/* largeur maximale 768px (tablettes et mobiles) */
	.car-make-name {
		font-size: 3vw;
	}
}

/* ======================= END car-make* / car-logo / JS List_all_makes_logos_addEventListener_DOMContentLoaded / PHP list_all_makes_logos =======================*/


.car-photo {		/* Show_Car_Make_Photo / */
	/*align-items: center;*/
	/*align-items: stretch;*/
	/* display: flex; */
	display: grid;
	grid-area: car-photo;
	flex-direction: column;
	align-items: center;		/* Centrage vertical */
	justify-content: center;	/* Centrage horizontal */
	padding: 10px;
	color:white;
	max-width: 50vw;
}

@media (max-width: 768px) {		/* Sur mobile, la photo peux prendre tout l'espace */
	.car-photo {
		/* → suppression du max-width sur mobile */
		max-width: none !important;
		/* (optionnel) tu peux aussi forcer une largeur à 100% : */
		width: 100%;
	}
}

.car-photo-credit{
	justify-self: center;
	font-size: 0.8em;
	text-align: center;
}

.car-photo-credit .photo-credit-text {
	font-size: 0.6em; /* This will make "Photo credit:" and the actual credit smaller relative to its parent (0.6em * 0.8em = 0.48em of the base font size) */
}

.car-photo-compare {
	/*align-items: center;*/
	/*align-items: stretch;*/
	display: flex;
	/* display: grid; */
	flex-direction: column;
	align-items: center;		/* Centrage vertical */
	justify-content: center;	/* Centrage horizontal */
	/* padding: 10px; */
	color:white;
}

.car-specs {		/* SC_Show_Car / Page "Car Page"	/	/cars/ID_123 --> SC_Show_Car */
	/*align-items: center;*/
	/*align-items: stretch;*/
	/* display: flex; */
	/* display: grid; */
	grid-area: car-specs;
	/* flex-direction: column; */
	align-items: center;		/* Centrage vertical */
	align-content: center;
	justify-content: center;	/* Centrage horizontal */
	padding: 10px;
	color:white;
}

.car-title {
	grid-area: car-title;
	color:white;
	text-align: center;
}

.car-title h2 {
	color: white;
}

@media (max-width: 768px) {		/* largeur maximale 768px (tablettes et mobiles) */
	.car-title h2 {
		color: white;
		font-size: 2.5vw;
	}
}

/*
.car-specs ul {
	padding-left: 20px; /* Ajuste le retrait pour une meilleure lisibilité */
/*}
.car-specs li {
	align-items: center;
	margin-bottom: 10px; /* Espacement entre les éléments de la liste */
/*}*/

.car-spec-item {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
	padding: 5px 10px;
	border-bottom: 1px solid #444;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.car-spec-item:hover {
	background-color: #333;
}

.car-spec-item img {
	width: 20px;
	margin-right: 10px;		/* Ajoute un espace entre l'icône et le texte */
	filter: invert(100%);
	/*fill: currentColor;			/* Adapte la couleur de l'icône à la couleur du texte */
}

.car-spec-item span {
	color: white;
}

@media (max-width: 768px) {		/* largeur maximale 768px (tablettes et mobiles) */
	.car-spec-item span {
		color: white;
		font-size: 2.5vw;
	}
}

.car-spec-item span strong {
	font-weight: bold;
	color: #ffcc00;
}



/*
.comparison-section {
	flex-direction: column;		/* De haut en bas */
/*    margin-top: 20px;
	border-top: 1px solid #ccc;
	padding-top: 10px;
	width: 100%;
}

.comparison-header {
	display: flex;
	justify-content: space-around;
	color:white;
	font-size: 1.2em;
	margin-bottom: 10px;
}

/* Pour masquer les contenus par défaut */
/* .comparison-content {
	display: flex;
	justify-content: space-around;
	flex-direction: row;	/* De gauche à droite */
/*} */
/*
.comparison-content-column {
	display: flex;
	justify-content: space-around;
	flex-direction: column;	/* De haut en bas */
/*}

.comparison-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}*/

/*
.car-column {
	display: flex;
	flex-direction: column;		/* De haut en bas */
/*	align-items: stretch;
	color:white;
	padding: 10px;
	text-align: left;
	border: 1px solid #ddd;
	margin-bottom: 5px;
}

.car-column-item {
	align-items: center;
}

.car-column-item strong {
	font-weight: bold;
	color: #ffcc00;
}
*/

/* Les classes .Compare-X-vehicules ne sont plus utilisés. Géré en live par la fonction Generate_Comparison_Section_Start avec section.style.gridTemplateColumns = `1fr repeat(${aCarsToCompare_DBInfo.length}, 1fr)`; */

/*.Compare-2-vehicules {
	grid-template-columns: 1fr repeat(2, 1fr);		/* fr=fraction / 1fr + 2 * 1fr = 3fr --> Pour 2 voitures. */
/*}

.Compare-3-vehicules {
	grid-template-columns: 1fr repeat(3, 1fr);		/* fr=fraction / 1fr + 3 * 1fr = 4fr --> Pour 3 voitures. */
/*}

/*.Compare-4-vehicules {
	grid-template-columns: 1fr repeat(4, 1fr);		/* fr=fraction / 1fr + 3 * 1fr = 4fr --> Pour 2 voitures. */
/*}

/*.Compare-5-vehicules {
	grid-template-columns: 1fr repeat(5, 1fr);		/* fr=fraction / 1fr + 3 * 1fr = 4fr --> Pour 2 voitures. */
/*} */

.Compare-grid-container {							/* Quadrillage */
	display: grid;
	/* grid-template-columns: 1fr repeat(3, 1fr);		/* fr=fraction / 1fr + 3 * 1fr = 4fr --> Pour 3 voitures. Changé en live dans le code */
	grid-template-rows: auto auto 1fr;					/* La première ligne est sticky-header, la deuxième est Compare-grid-header, et le reste est le contenu */
	/* grid-gap: 5px; */
	background-color: #36494E;
	/* padding: 5px; */
	padding-top: 80px;
	position: relative;
}

.Compare-grid-container>div {
	background-color: #000000;
	text-align: center;
	padding: 20px 0;
	font-size: 20px;
}

/* En-tête sticky (noms des véhicules) */
.sticky-header {
	position: sticky;
	/*top: 5vw;						/* Cette ligne fixe la première ligne en haut du conteneur */
	top: 80px;						/* Cette ligne fixe la première ligne en haut du conteneur. Du coup les titres affichant les noms de voitures restent en haut de l'écran pour être vus pendant qu'on regarde les specs. Décallage de 80px pour header page */
	background-color: #333;		/* Couleur de fond pour garantir que le texte est bien lisible */
	z-index: 20;					/* Évite que la ligne sticky soit cachée par d'autres éléments */
	/* padding-bottom: 1rem; */
	/* padding-bottom: 10px; */
	padding: 10px;
}

.sticky-header h2 {
	font-size: 1.3vw;
}

/* Pour les cellules qui contiennent les titres */
/*.Compare-grid-titles {
	height: 100%;
	display: flex;
	align-items: center; /* Centre verticalement */
/*}*/

.Compare-grid-titles h2 {
	justify-content: center;
	background-color: black;
	font-size: 0.9em;
	height: 4em;				/* Hauteur fixe pour contenir les titres sur plusieurs lignes */
	/* min-height: 3em; */
	/* max-height: 4em; */
	overflow: visible;			/* Pour qu'on voit quand-même les titres plus longs. TODO: A vérifier plus tard sur plusieurs périphériques et adapter ca avec height si besoin */
	/*overflow: hidden;*/			/* Masque le débordement */
	line-height: 1.2em;			/* Ajuste la hauteur de ligne pour centrer le texte */
	display: flex;				/* Optionnel, pour aligner verticalement */
	align-items: center;		/* Centrage vertical */
	padding: 0 0.5em;			/* Optionnel, pour un peu d'espace intérieur */
	margin: 0;					/* Pour que le titre soit collé au bouton au dessus lors du scroll en sticky */
}

.Compare-grid-header {								/* Header d'une catégorie de specs*/
	grid-column: 1 / -1;							/* Prend toute la largueur */
	position: sticky;
	/* top: 10vw; */
	/* top: 220px; */					/* Fixe les titres de catégories en haut de l'écran, pendant qu'on regarde les specs. Décallage de 220 pour header page + titres (sticky-header) */
	top: 110px;					/* Fixe les titres de catégories en haut de l'écran, pendant qu'on regarde les specs. Décallage de 220 pour header page + titres (sticky-header) */
	z-index: 10;
	cursor: pointer;								/* Ajoute un curseur pour indiquer que l'élément est cliquable */
	/* padding-top: 1rem; */
	/* padding-top: 40px; */
	color: white;
	text-align: center;
	background-color: black;
	width: 100%;
}

.Compare-grid-header h3 {
	font-size: 1.1vw;
}

.Compare-grid-category {
	display: grid;
	grid-column: 1 / -1;							/* Prend toute la largueur */
	color: white;
	background-color: black;
}

.Compare-grid-category>div {
	text-align: center;
	border-right: 1px solid #ddd;
	/* font-size: 1.0vw; */
	font-size: 0.8rem;
}

.Compare-grid-Spec-Title {
	font-weight: bold;
	font-size: 1.0vw;
}


.car-details-container {
	display: grid;
	grid-template-areas:
		"car-title car-title"
		"car-photo car-specs";
	grid-template-columns: auto 1fr;	/* Keeps the left column for the image and right for the specs */
	justify-content: center;
}

/* Pour la page d'accueil seulement (WordPress ajoute .home au body) */
.home .car-details-container {
	grid-template-areas:
	"car-title"
	"car-photo"
	"car-specs";
	grid-template-columns: 1fr;
}

@media (max-width: 768px) {		/* Pour mobile uniquement */
	.car-details-container {
		grid-template-areas:
			"car-title"
			"car-photo"
			"car-specs";
		grid-template-columns: 1fr;
	}
}

/*
.car-details-container h2 {
	grid-area: title;
	text-align: center;
}
*/


/* ============================ En-tête ============================ */

/* Animation de pulsation et de secousse */
.pulse-shake {
	animation: pulse-animation 1s ease infinite, shake-animation 1s ease infinite;
	/* pulse-animation prend 2 secondes pour un cycle complet, tandis que shake-animation se répète tous les 0.5 secondes. */
}

/* Animation de pulsation */
.pulse {
	animation: pulse-animation 1s ease infinite;
}

@keyframes pulse-animation {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 rgba(3, 90, 162, 0.4);
	}
	25% {
		transform: scale(0.5);
		box-shadow: 0 0 20px rgba(3, 90, 162, 0.9);
	}
	75% {
		transform: scale(1.5);
		box-shadow: 0 0 20px rgba(3, 90, 162, 0.9);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 rgba(3, 90, 162, 0.4);
	}
}

/* Animation de secousse */
.shake {
	animation: shake-animation 1.5s ease;
}

@keyframes shake-animation {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-10px); }
	40%, 80% { transform: translateX(10px); }
}

.vehicle-count-button {
	background-color: #6166CE;			/* Couleur de fond du bouton */
	color: white;
	padding: 5px 25px;
	border: none;
	border-radius: 19px;
	/* font-size: 1.2vw; */
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
}

.vehicle-count-button:hover{
	background-color: #6166CF;
}

.vehicle-count-button:active{
	background-color: #6166D0 !important;	/* TODO: Voir pourquoi cela ne fonctionne pas */
}

.vehicle-count-button #vehicle-count {
	color: #FFD700;
	font-weight: bold;
	font-size: 14px;
}

/* Sur mobile seulement (768px max) */
@media only screen and (max-width: 768px) {
	#comparedrives_header {
		position: sticky;
		top: 0;
		width: 100%;
		z-index: 999;      /* pour rester au-dessus du contenu */
		transition: all 0.3s ease;	/* Transition du header pour un effet visuel fluide */
	}

	/* Décaler tout le contenu sous le header */
	#comparedrives_header + * {
		margin-top: 80px !important;		/* ajuster la valeur à la hauteur du header */
	}

	/* Lorsque le header a la classe "shrink", on masque les éléments marqués .hide-on-scroll */
	#comparedrives_header.shrink .hide-on-scroll {
		display: none !important;
	}
}

/* ============================ END En-tête ============================ */

#load-more-button {
	display: block;            /* Occupe toute la largeur disponible dans son conteneur */
	margin: 20px auto;         /* Centre le bouton horizontalement et ajoute un espacement vertical */
	padding: 10px 20px;        /* Espacement intérieur */
	color: white;
	background-color: black;
	border-color: white;
}

.compare-button-add,
.compare-button-remove {
	display: flex;
	width: 75%;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	/* margin-top: 10px; */
	margin-top: 0px;
	color: white;
	/* font-size: 18px; */
	font-size: 0.8rem;
	font-weight: bold;
	padding: 10px 15px;
	border: none;
	border-radius: 30px;
	text-decoration: none;
	cursor: pointer;
	transition: 0.3s;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.compare-button-add {
	background: linear-gradient(135deg, #171b9e, #7c6beb);
}

.compare-button-remove {
	background: linear-gradient(135deg, #f43302, #ffffff);
}

/* .compare-button-popup { */
	/* display: flex; */
	/* align-items: center; */
	/* justify-content: center; */
	/* color: white; */
	/* font-size: 18px; */
	/* font-weight: bold; */
	/* padding: 12px 20px; */
	/* border-radius: 30px; */
	/* text-decoration: none; */
	/* transition: 0.3s; */
	/* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); */
/* } */


.search_bar {
	font-size: 14px;
	border: 1px solid #000; /* Noir */
	border-radius: 10px;
	padding: 5px; /* Ajout d'un padding pour un meilleur rendu */
}

#search-suggestions_save {			/* On ajoute ca pour être sûr qu'on soit au-dessus des éléments en sticky */
	position: relative; /* ou absolute/fixed selon ton layout */
	z-index: 9999;
}


#search-suggestions_useless {
	position: fixed;
	/*top: 45px;*/ /* Ajuste cette valeur pour le positionnement désiré */
	left: 0;
	width: 100%;
	z-index: 10000; /* Un z-index élevé pour surpasser le sticky de la page */
}


#search-suggestions {
	display: flex;            /* Permet d'afficher les catégories côte à côte */
	flex-direction: row;
	justify-content: space-around; /* Espacement entre les colonnes */
	align-items: flex-start;  /* Alignement en haut */
	overflow: hidden;         /* Évite les débordements horizontaux */
	padding: 10px;
	max-height: 50vh;   /* Ne dépasse pas la moitié de l'écran */
	overflow-y: auto;   /* Ajoute un défilement vertical si nécessaire */
	background: white;  /* Fond blanc sur toute la zone */
	border-bottom: 2px solid #ccc; /* Ajoute une bordure en bas pour éviter l'effet "coupé" */
}

#search-suggestions-makes,
#search-suggestions-models,
#search-suggestions-cars {
	flex: 1;                 /* Les deux blocs prennent une part égale de l'espace */
	min-width: 30%;          /* Évite que les colonnes soient trop petites */
	padding: 10px;
	background: white;
	border-right: 1px solid #ccc; /* Séparation entre les catégories */
	font-size: x-small;
}

#search-suggestions-cars {
	border-right: none; /* Supprime la bordure du dernier élément */
}



/* ============================ Compare Your Drives V3 ============================ */
.compare-v3-wrapper {
	overflow-x: auto;       /* scroll horizontal */
	overflow-y: visible;    /* page verticale gérée par le body */
	position: relative;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 1rem;
	/* empêcher la propagation du scroll horizontal au reste de la page */
	overscroll-behavior-x: contain;
}

.compare-v3-grid {
	display: inline-block;
	min-width: 100%;
	/* min-width: max-content; */
}

/* Sticky header : reste collé en haut de la fenêtre */
.compare-v3-header {
	position: sticky;
	align-items: center;
	gap: 0.5rem;
	top: 0;
	left: 0;					/* reste aligné à gauche au scroll horizontal */
	z-index: 10;				/* au‑dessus des autres sections */
	/* background: white; */
}

.compare-v3-header,
.compare-v3-section-content {
	display: grid;
	/* grid-template-columns: 200px repeat(auto-fit, minmax(150px, 1fr)); */
	/* grid-template-columns: var(--compare‑v3-col‑sizes); */
	align-items: center;
	gap: 0.5rem;
	/* white-space: nowrap; */
}

.compare-cell-v3 {
	padding: 0.5rem;
	border: 1px solid #ddd;
	background: #fafafa;
}

.compare-v3-spec-name {
	font-size: 0.8rem;
	font-weight: bold;
	/* line-height: 0.5vw; */
	line-height: 1.2em;
	white-space: normal;
	word-break: break-word;
}

.compare-v3-spec-value {
	font-size: 0.8rem;
	/* line-height: 0.5vw; */
	line-height: 1.2em;
	background: #000f1e;
	color: white;
	white-space: normal;
	word-break: break-word;
}

.compare-cell-v3--title {
	background: transparent;
	border: none;
}

.vehicle-cell-v3 {
	position: relative;
	text-align: center;
}
.vehicle-cell-v3 img {
	max-width: 40vw;
	height: auto;
	display: block;
	margin: 0 auto 0.5rem;
}

.compare-v3-vehicle-title{
	justify-content: center;
	/* background-color: black; */
	font-size: 0.9em;
	/* height: 4em;				/* Hauteur fixe pour contenir les titres sur plusieurs lignes */
	/* min-height: 3em; */
	/* max-height: 4em; */
	/* overflow: visible;			/* Pour qu'on voit quand-même les titres plus longs. TODO: A vérifier plus tard sur plusieurs périphériques et adapter ca avec height si besoin */
	/*overflow: hidden;*/			/* Masque le débordement */
	line-height: 1.2em;			/* Ajuste la hauteur de ligne pour centrer le texte */
	/* display: flex;				/* Optionnel, pour aligner verticalement */
	align-items: center;		/* Centrage vertical */
	/*padding: 0 0.5em;			/* Optionnel, pour un peu d'espace intérieur */
	/* margin: 0;					/* Pour que le titre soit collé au bouton au dessus lors du scroll en sticky */
	white-space: break-spaces;
}

.compare-v3-remove-btn {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	background: #e74c3c;
	border: none;
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
}

.compare-v3-section {
	margin-top: 1rem;
	border-top: 2px solid #333;
}

.compare-v3-section-toggle {
	width: 100%;
	text-align: center;
	padding: 0.75rem;
	background: #333;
	color: #fff;
	border: none;
	font-size: 1rem;
	cursor: pointer;
}

.compare-v3-section-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	/* S’assurer que le contenu interne wrappe si besoin */
	white-space: normal;
	word-break: break-word;
}

.compare-v3-section.open .compare-v3-section-content {
	max-height: 2000px;
}

.car-photo-credit-v3{
	justify-self: center;
	font-size: 0.8em;
	text-align: center;
	/* ajout pour autoriser le wrap */
	white-space: normal;
	word-break: break-word;
}

/* ============================ END Compare Your Drives V3 ============================ */


/* ============================ FAQ ============================ */
.car-faq {
  max-width: 80vw;           /* ➕ fixe une largeur max pour réduire la taille globale */
  margin: 20px auto;          /* ↔ centre horizontalement et garde un margin-top de 40px */
  padding: 15px;              /* 🔽 réduit le padding pour alléger */
  background: #f9f9f9;
  border-radius: 12px;
  font-size: 0.8em;           /* ➕ réduit la taille de base du texte */
}

.car-faq h2 {
  font-size: 1.2em;           /* 🔽 réduit légèrement le titre */
  margin-bottom: 20px;
  text-align: center;         /* ↔ titre centré */
}

.faq-item {
  margin-bottom: 10px;
  text-align: left;           /* on garde le texte aligné à gauche */
}

.faq-question {
  background: none;
  border: none;
  font-weight: bold;
  font-size: 1em;
  text-align: left;
  cursor: pointer;
  padding: 8px 0;             /* 🔽 réduit le padding vertical */
  /* width: 100%; */
  display: block;
  white-space: normal;
  word-break: break-word;
}

.faq-answer {
  display: none;
  padding-left: 10px;
  border-left: 2px solid #ccc;
  margin-bottom: 10px;
}

.faq-question[aria-expanded="true"] + .faq-answer {
  display: block;
}
/* ============================ END FAQ ============================ */


/* ============================ ALSO KNOWN AS ============================ */
.also-known-as {
  font-size: 0.9rem;
  color: #555;               /* gris doux */
  margin-top: 1.5em;
  padding: 0.75em 1em;
  background: #f9f9f9;       /* fond très clair */
  border-left: 3px solid #ccc;
  border-radius: 4px;
}

.also-known-as strong {
  display: block;
  margin-bottom: 0.5em;
}

.also-known-as ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.also-known-as ul li {
  display: inline-block;
  margin-right: 0.75em;
}

.also-known-as a {
  text-decoration: none;
  color: #337ab7;            /* bleu un peu atténué */
}

.also-known-as a:hover {
  text-decoration: underline;
}

/* Bulle entre chaque élément sauf le dernier */
.also-known-as ul li + li::before {
  content: '•';
  margin: 0 0.5em;
  color: #999;
  font-size: 0.8em;
}

/* Commentaire sous la liste */
.also-known-as-comment {
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.75em;
  padding-left: 1.25em;
  border-left: 2px solid #ccc;
}

/* ============================ END ALSO KNOWN AS ============================ */

.model-description {
  color: #ffffff;               /* texte en blanc */
  background: rgba(0, 0, 0, 0.6);/* fond semi‑transparent pour contraste */
  padding: 1em;
  margin: 1em 0;
  border-radius: 4px;
  line-height: 1.5;
  font-size: 1rem;
}