/* Voyage Moto Québec : composants (cartes, filtres, fiches, formulaires). Couleurs de la maquette A. */
:root {
	--vmq-encre: #14181C;
	--vmq-encre-2: #222A31;
	--vmq-gris: #44494F;
	--vmq-gris-clair: #767B82;
	--vmq-bord: #D9DCDF;
	--vmq-fond: #F3F4F2;
	--vmq-accent: #C23B12;
	--vmq-accent-fonce: #A0300E;
	--vmq-accent-doux: #F0B49E;
	--vmq-titre: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--vmq-rayon: 10px;
}

/* Grilles */
.vmq-grille { display: grid; gap: 20px; margin: 0; }
.vmq-grille--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.vmq-grille--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

/* Cartes */
.vmq-carte { background: #fff; border: 1px solid var(--vmq-bord); border-radius: var(--vmq-rayon); overflow: hidden; display: flex; flex-direction: column; }
.vmq-carte[hidden] { display: none; }
.vmq-carte__corps { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vmq-carte__titre { margin: 0; font-family: var(--vmq-titre); font-weight: 700; font-size: 26px; line-height: 1.1; text-transform: uppercase; color: var(--vmq-encre); }
.vmq-carte__titre--petit { font-size: 23px; }
.vmq-carte__titre a, .vmq-carte__nom a { color: inherit; text-decoration: none; }
.vmq-carte__titre a:hover, .vmq-carte__nom a:hover { text-decoration: underline; }
.vmq-carte__nom { margin: 0; font-size: 18px; font-weight: 700; color: var(--vmq-encre); }
.vmq-carte__meta { margin: 0; color: var(--vmq-gris); font-size: 15px; }
.vmq-carte__petit { margin: 0; color: var(--vmq-gris); font-size: 14px; }
.vmq-carte__texte { margin: 0; color: #2C3237; font-size: 15px; line-height: 1.5; }
.vmq-carte__sur { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vmq-gris); }
.vmq-carte__sur--accent { color: var(--vmq-accent); }
.vmq-carte__action { margin-top: auto; }

.vmq-media { position: relative; background: linear-gradient(135deg, #56626D 0%, #2B343C 100%); display: flex; align-items: flex-end; padding: 12px; color: #E8ECEF; font-size: 13px; overflow: hidden; }
.vmq-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vmq-media--court { height: 150px; align-items: flex-start; }
.vmq-media--moyen { height: 170px; }
.vmq-media__legende { position: relative; }
.vmq-media--court .vmq-media__legende { display: none; }

.vmq-badge { position: relative; z-index: 1; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--vmq-encre); color: #fff; }
.vmq-badge--phil { background: var(--vmq-accent); }
.vmq-badge--libre { background: #E4E7EA; color: var(--vmq-encre); }

/* Boutons */
.vmq-bouton { display: inline-block; text-align: center; padding: 12px 22px; min-height: 48px; border: 2px solid var(--vmq-accent); border-radius: 6px; background: var(--vmq-accent); color: #fff !important; font-weight: 600; font-size: 16px; line-height: 1.4; text-decoration: none !important; cursor: pointer; font-family: inherit; }
.vmq-bouton:hover { background: var(--vmq-accent-fonce); border-color: var(--vmq-accent-fonce); }
.vmq-bouton--contour { background: transparent; border-color: var(--vmq-encre); color: var(--vmq-encre) !important; }
.vmq-bouton--contour:hover { background: var(--vmq-encre); border-color: var(--vmq-encre); color: #fff !important; }
.vmq-lien { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; font: inherit; cursor: pointer; }

/* Recherche / comparateur */
.vmq-recherche { background: #fff; color: var(--vmq-encre); border-radius: var(--vmq-rayon); padding: 20px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.vmq-recherche--clair { border: 1px solid var(--vmq-bord); margin-bottom: 8px; }
.vmq-champ { flex: 1 1 180px; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.vmq-champ label { font-size: 13px; font-weight: 600; color: var(--vmq-gris); }
.vmq-champ select, .vmq-champ input, .vmq-champ textarea { min-height: 48px; border: 1px solid var(--vmq-gris-clair); border-radius: 6px; padding: 8px 12px; font-size: 16px; background: #fff; color: var(--vmq-encre); width: 100%; box-sizing: border-box; font-family: inherit; }
.vmq-recherche .vmq-bouton { flex: 0 0 auto; }
.vmq-compte { margin: 12px 0; font-weight: 600; color: var(--vmq-gris); }
.vmq-vide, .vmq-vide-fixe { padding: 24px; background: #fff; border: 1px dashed var(--vmq-bord); border-radius: var(--vmq-rayon); color: var(--vmq-gris); }
.vmq-vide[hidden] { display: none; }

/* Pastilles */
.vmq-filtres { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 20px; }
.vmq-filtres__groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vmq-filtres__titre { font-size: 14px; font-weight: 600; color: var(--vmq-gris); margin-right: 4px; }
.vmq-pastille { min-height: 44px; padding: 0 18px; border: 1px solid var(--vmq-encre); border-radius: 999px; background: #fff; color: var(--vmq-encre); font-size: 15px; cursor: pointer; font-family: inherit; }
.vmq-pastille:hover { background: var(--vmq-fond); }
.vmq-pastille.is-active { background: var(--vmq-encre); color: #fff; }

.vmq-mention { font-size: 14px; color: var(--vmq-gris); margin: 0 0 16px; }
.vmq-mention--ia { padding: 10px 14px; background: #FFF6E5; border-left: 4px solid #D99A00; color: #4A3A10; }

/* Fiches */
.vmq-fiche { display: flex; flex-wrap: wrap; margin: 0 0 16px; background: #fff; border: 1px solid var(--vmq-bord); border-radius: var(--vmq-rayon); overflow: hidden; }
.vmq-fiche > div { flex: 1 1 180px; padding: 12px 16px; border-right: 1px solid var(--vmq-bord); border-bottom: 1px solid var(--vmq-bord); margin: 0 -1px -1px 0; }
.vmq-fiche dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vmq-gris); margin: 0; }
.vmq-fiche dd { margin: 4px 0 0; font-size: 17px; color: var(--vmq-encre); }
.vmq-chapeau { font-size: 19px; line-height: 1.5; }

.vmq-carte-gpx { height: 440px; border-radius: var(--vmq-rayon); border: 1px solid var(--vmq-bord); margin: 24px 0 16px; background: #E8ECEF; z-index: 0; }

/* Demande d'information */
.vmq-demande { margin-top: 40px; padding: 28px; background: var(--vmq-fond); border-radius: var(--vmq-rayon); border: 1px solid var(--vmq-bord); }
.vmq-demande h2 { margin-top: 0; font-family: var(--vmq-titre); text-transform: uppercase; }
.vmq-etapes { margin: 0 0 20px 20px; line-height: 1.6; }
.vmq-form { display: flex; flex-direction: column; gap: 14px; }
.vmq-form__rangee { display: flex; flex-wrap: wrap; gap: 14px; }
.vmq-case { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; margin: 0; }
.vmq-case input { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 1px; accent-color: var(--vmq-accent); }
.vmq-piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vmq-encadre { padding: 14px 18px; border-radius: 8px; background: #fff; border: 1px solid var(--vmq-bord); }
.vmq-encadre p { margin: 0; }
.vmq-encadre--ok { border-color: #2E7D4F; background: #EAF6EF; color: #1B4D30; }
.vmq-encadre--erreur { border-color: #B3261E; background: #FDECEA; color: #7A1A14; }

/* Infolettre (fond sombre) */
.vmq-infolettre { display: flex; flex-direction: column; gap: 10px; }
.vmq-infolettre__label { font-size: 14px; font-weight: 600; }
.vmq-infolettre__ligne { display: flex; flex-wrap: wrap; gap: 10px; }
.vmq-infolettre__ligne input { flex: 1 1 220px; min-height: 48px; border: 1px solid #fff; border-radius: 6px; padding: 0 14px; font-size: 16px; color: var(--vmq-encre); background: #fff; }
.vmq-infolettre .vmq-case { color: inherit; opacity: .85; font-size: 13px; }

/* Bandeau d'alerte rappel */
.vmq-alerte { background: var(--vmq-accent); color: #fff; font-size: 15px; }
.vmq-alerte__inner { max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.vmq-alerte__etiquette { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.vmq-alerte a { color: #fff; font-weight: 600; text-decoration: underline; }

/* Sélecteur de langue FR | EN : bandeau mince en haut à gauche, au-dessus de l'en-tête */
.vmq-langues { background: var(--vmq-encre); color: #fff; font-size: 13px; line-height: 1; }
.vmq-langues__inner { max-width: 1290px; margin: 0 auto; padding: 7px 16px; display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
.vmq-langues a, .vmq-langues__actif { font-weight: 700; letter-spacing: .06em; padding: 3px 4px; border-radius: 3px; }
.vmq-langues a { color: #C9CDD1; text-decoration: none; }
.vmq-langues a:hover, .vmq-langues a:focus-visible { color: #fff; text-decoration: underline; }
.vmq-langues__actif { color: #fff; background: var(--vmq-accent); }
.vmq-langues__sep { color: var(--vmq-gris-clair); }