/* constructeur.css — complément des pages /constructeur et /<marque>.
 *
 * Additif : styles.css est minifié et généré depuis less/, on n'y touche pas.
 * Ce fichier n'est chargé que par les squelettes de la section constructeurs ;
 * tant que la production ne les sert pas, il est inerte.
 *
 * Teintes reprises de l'existant : #61CD81 (accent), #F6F7FC (fond du sommaire).
 */

/* --------------------------------------------------------------------------
 * 1. Le décalage d'ancre — la correction la plus rentable du fichier.
 *
 * styles.css pose déjà html{scroll-behavior:smooth} mais aucun scroll-margin.
 * Résultat : un visiteur qui arrive de Google sur /peugeot#207 atterrit avec le
 * titre de la section collé au bord haut, voire au-dessus. Ces ancres sont
 * précisément celles qui rapportent des impressions.
 * -------------------------------------------------------------------------- */
.modele,
.marque-carte {
	scroll-margin-top: 2rem;
}

/* --------------------------------------------------------------------------
 * 2. Fil d'Ariane
 * -------------------------------------------------------------------------- */
/* styles.css met .section-cta-titre .container en flex ligne, avec un h1 en
   width:100%. Le fil d'Ariane se retrouvait donc à gauche du titre, sur la même
   ligne. On empile, le titre d'abord, comme dans le HTML. */
.section-cta-titre .container {
	flex-direction: column;
	gap: .5rem;
}

.fil-ariane ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35em;
	margin: 0;
	padding: 0;
	font-size: .85rem;
}

.fil-ariane li + li::before {
	content: "›";
	margin-right: .35em;
	opacity: .55;
}

.fil-ariane [aria-current="page"] {
	opacity: .7;
}

/* --------------------------------------------------------------------------
 * 3. Recherche et filtres du sommaire
 *
 * Le conteneur est [hidden] dans le HTML et révélé par JavaScript : sans JS,
 * aucun contrôle inopérant n'est affiché et tous les modèles restent visibles.
 * -------------------------------------------------------------------------- */
.filtres-modeles {
	margin-bottom: 1rem;
}

.filtre-recherche input[type="search"] {
	width: 100%;
	box-sizing: border-box;
	padding: .55em .7em;
	border: 1px solid #D5D7DB;
	border-radius: 4px;
	font: inherit;
	background: #fff;
}

.filtre-recherche input[type="search"]:focus-visible {
	outline: 2px solid #61CD81;
	outline-offset: 1px;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-top: .5rem;
}

.chip {
	border: 1px solid #D5D7DB;
	background: #fff;
	border-radius: 999px;
	padding: .3em .75em;
	font: inherit;
	font-size: .82rem;
	line-height: 1.3;
	cursor: pointer;
	color: inherit;
}

.chip:hover {
	border-color: #61CD81;
}

.chip[aria-pressed="true"] {
	background: #61CD81;
	border-color: #61CD81;
	color: #fff;
}

.cpt-modeles {
	margin: .6rem 0 0;
	font-size: .8rem;
	opacity: .7;
}

.filtres-vide button {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: #2F7D4B;
	text-decoration: underline;
	cursor: pointer;
}

/* Élément masqué du sommaire par la recherche ou un filtre. */
#liste-modeles li[hidden],
.modele[hidden] {
	display: none;
}

/* Le pendant pour l'index des marques. Sans lui, la recherche annonçait
 * « 1 marque sur 31 » et les 31 cartes restaient à l'écran : .marque-carte pose
 * display:flex, et à spécificité égale c'est la feuille chargée en dernier qui
 * l'emporte sur le [hidden]{display:none} de styles.css. */
.marque-carte[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
 * 4. Scrollspy : signale la section en cours de lecture.
 * -------------------------------------------------------------------------- */
#liste-modeles a[aria-current="true"] {
	font-weight: 700;
	color: #2F7D4B;
}

/* --------------------------------------------------------------------------
 * 5. Bloc de synthèse technique
 * -------------------------------------------------------------------------- */
.fiche-modele {
	background: #F6F7FC;
	border-radius: 6px;
	padding: 1rem 1.1rem .8rem;
	margin: 0 0 1.2rem;
}

.fiche-modele dl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: .6rem 1.4rem;
	margin: 0;
}

.fiche-modele dt {
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: .65;
	margin: 0;
}

.fiche-modele dd {
	margin: .1em 0 0;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 * 6. Sections modèle
 *
 * PAS de content-visibility ici, et c'est délibéré. La propriété évitait de
 * calculer le rendu des sections hors écran, mais elle leur attribuait à toutes
 * la même hauteur estimée de 900px tant qu'elles n'avaient jamais été affichées.
 * Un clic sur la vingtième ancre du sommaire calculait donc sa position à partir
 * de dix-neuf estimations fausses : le défilement s'arrêtait avant la fiche. Le
 * défaut ne se voyait qu'au PREMIER clic, puisque après un passage complet de la
 * page les hauteurs réelles étaient mémorisées.
 *
 * Ces ancres sont l'actif du site, Google les classe mieux que la page marque.
 * Vingt sections ne justifient pas de risquer le seul geste qui compte.
 * -------------------------------------------------------------------------- */
.modele {
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #E9EAEE;
	margin-bottom: 1.5rem;
}

.modele:last-of-type {
	border-bottom: 0;
}

/* Boîte de taille fixe plutôt que des maxima : l'image est en chargement différé
   et sans hauteur réservée, son arrivée déplaçait le contenu situé sous elle.
   Cumulé sur les sections traversées pendant un saut d'ancre, le décalage
   suffisait à faire manquer la cible. object-fit conserve les proportions. */
.photo-modele {
	width: 250px;
	height: 250px;
	object-fit: contain;
}

.bandeau-marque {
	display: flex;
	gap: 1.2rem;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
	/* Le logo n'a ni width ni height en HTML, faute d'un ratio commun : la hauteur
	 * est réservée ici pour que le texte ne remonte pas pendant le chargement. */
	min-height: 100px;
}

.logo-marque {
	max-height: 100px;
	max-width: 100px;
	height: auto;
	flex-shrink: 0;
}

.bandeau-marque-texte {
	flex: 1 1 320px;
}

/* Les tarifs de 2018 sont conservés pour leur contenu, mais visuellement
 * rétrogradés : ils ne doivent pas se lire comme des prix actuels. */
.tableau-historique {
	opacity: .88;
}

.tableau-historique caption {
	caption-side: top;
	text-align: left;
	font-size: .78rem;
	opacity: .7;
	padding-bottom: .4rem;
}

/* Générations : la numérotation est déjà dans le texte (« 4ᵉ génération »), on
   neutralise donc le compteur illustré que styles.css applique aux listes
   ordonnées — il ferait doublon et pèse 46 px par ligne. */
.generations {
	list-style: none;
	margin: 0 0 1.2rem;
	padding: 0;
	counter-reset: none;
}

.generations li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4rem 1rem;
	padding: .5em 0;
	border-bottom: 1px dashed #E9EAEE;
	margin: 0;
}

.generations li::before {
	content: none;
}

.generations li:last-child {
	border-bottom: 0;
}

/* La période est un <b> et non un <span> : styles.css rend tout span:not(.bouton)
   vert, souligné et curseur main — le style des liens obfusqués du site. Un <b>
   n'a aucune règle globale ; on neutralise juste sa graisse par défaut. */
.generations .periode {
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.generations .nb-versions {
	opacity: .55;
	margin-left: auto;
}

.retour-sommaire {
	margin-top: 1rem;
	font-size: .85rem;
}

.ajouter-prix {
	margin: .5rem 0 1rem;
	font-size: .88rem;
}

/* --------------------------------------------------------------------------
 * 7. Retour au sommaire, flottant.
 *
 * Indispensable en mobile : styles.css y repasse l'aside en position statique,
 * le sommaire se retrouve tout en haut et rien d'autre ne permet d'y revenir.
 * -------------------------------------------------------------------------- */
.retour-haut {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 900;
	border: 1px solid #D5D7DB;
	border-radius: 999px;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: .85rem;
	padding: .5em 1em;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
	cursor: pointer;
}

.retour-haut[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
 * 8. Index des marques (/constructeur)
 *
 * Les cartes portent le bloc éditorial « liconstructeur », de longueur très
 * variable d'une marque à l'autre. Sans hauteur commune ni liste compacte, la
 * grille part en escalier : d'où la colonne flex, les listes resserrées et le
 * pied de carte poussé en bas.
 * -------------------------------------------------------------------------- */
.grille-marques {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0 0;
}

.marque-carte {
	display: flex;
	flex-direction: column;
	border: 1px solid #E9EAEE;
	border-radius: 8px;
	padding: 1.1rem 1.1rem 1.25rem;
	background: #fff;
}

.marque-carte > a:first-child {
	display: block;
	text-align: center;
	min-height: 56px;
}

.marque-carte img {
	max-height: 56px;
	max-width: 130px;
	width: auto;
	height: auto;
	margin: 0 auto .6rem;
}

.marque-carte h2 {
	font-size: 1.1rem;
	margin: 0 0 .15rem;
	text-align: center;
}

.marque-carte .compte-modeles {
	display: block;
	text-align: center;
	font-size: .78rem;
	opacity: .6;
	margin-bottom: .8rem;
}

/* Le bloc éditorial de la marque : lisible, mais discret et sans les grosses
   puces illustrées du corps de page, qui écrasent une carte étroite. */
.marque-carte ul {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	font-size: .85rem;
	line-height: 1.45;
	text-align: left;
	flex-grow: 1;
}

.marque-carte ul li {
	position: relative;
	padding-left: 1em;
	margin-bottom: .35em;
}

/* styles.css donne aux puces éditoriales une pastille de 30 px avec image de
   fond, positionnée en absolu à left:0. Redéfinir « content » ne suffit pas :
   la taille, le fond et le rayon subsistent, et la pastille vient recouvrir les
   premières lettres du texte. On remet donc à plat toutes ces propriétés. */
.marque-carte ul li::before {
	content: "";
	position: absolute;
	top: .55em;
	left: 0;
	width: 5px;
	height: 5px;
	min-width: 0;
	margin: 0;
	background: #61CD81;
	background-image: none;
	border-radius: 50%;
	transform: none;
}

/* Pied de carte : aligné en bas quelle que soit la longueur du texte. */
.marque-carte .lead {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: auto 0 0;
	font-size: .9rem;
}

.marque-carte .lead > * {
	text-align: center;
}

/* --------------------------------------------------------------------------
 * 9. Colonne latérale
 *
 * styles.css donne à .bloc-sommaire un padding de 75px 15px 150px 95px et un
 * filet décoratif de 232px de haut, dimensionnés pour les sommaires d'articles.
 * Sur ces pages, la liste est tantôt beaucoup plus courte (10 marques), tantôt
 * beaucoup plus longue (20 modèles) : le filet ne tombe jamais juste et un vide
 * de 150px s'installe sous la liste.
 * -------------------------------------------------------------------------- */
#sommaire-modeles,
#sommaire-marques {
	padding: 1.75rem 1.25rem 1.75rem 1.5rem;
	border-radius: 8px;
}

/* Le cadre vert en L de styles.css (.bloc-sommaire:before) est dimensionné sur
   le padding d'origine — 75px en haut, 95px à gauche. Avec un padding réduit et
   un contenu de hauteur variable, il ne tombe plus juste et donne ce filet qui
   semble partir dans le vide. On le retire ici, comme les pastilles vertes des
   liens, positionnées à right: calc(100% + 36px) : hors du bloc dès que la marge
   gauche est réduite. */
#sommaire-modeles::before,
#sommaire-marques::before,
#sommaire-modeles nav ul li a::before,
#sommaire-marques nav ul li a::before {
	content: none;
}

#sommaire-modeles .sommaire-titre,
#sommaire-marques .sommaire-titre {
	margin: 0 0 1rem;
	font-size: 1.15rem;
}

#sommaire-modeles nav ul,
#sommaire-marques nav ul {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	gap: 0;
}

/* La liste défile pour elle-même, sans entraîner la page. Uniquement là où
   l'aside est collant : en dessous de 1200px styles.css le repasse en statique,
   et une zone défilante y piégerait le geste de défilement du pouce.
   La hauteur est calculée sur la fenêtre, moins la position collante et la place
   du titre, des filtres et du bloc d'appel. */
@media (min-width: 1200px) {
	#sommaire-modeles nav,
	#sommaire-marques nav {
		max-height: calc(100vh - 22rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	#sommaire-modeles nav ul,
	#sommaire-marques nav ul {
		margin-right: .4rem;
	}
}

/* Cible de la remontée. Le sommaire lui-même est collant : le viser ne
   déplaçait rien puisqu'il est déjà en haut de la fenêtre. */
#haut-modeles {
	scroll-margin-top: 1rem;
}

#sommaire-modeles nav li,
#sommaire-marques nav li {
	margin: 0;
	padding: 0;
}

#sommaire-modeles nav a,
#sommaire-marques nav a {
	display: block;
	padding: .32em .4em;
	left: 0;
	border-left: 2px solid transparent;
	border-radius: 0 3px 3px 0;
}

#sommaire-modeles nav a:hover,
#sommaire-marques nav a:hover {
	left: 0;
	border-left-color: #61CD81;
	background: rgba(97, 205, 129, .1);
}

#liste-modeles a[aria-current="true"] {
	border-left-color: #61CD81;
	background: rgba(97, 205, 129, .16);
}

/* --------------------------------------------------------------------------
 * 10. Utilitaire
 * -------------------------------------------------------------------------- */
.visuallyhidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}