/* ------------------------------------------------------------------
   Bretagne VTC — socle : réglages généraux, en-tête, pied de page, hub.
   Étape 4 de la refonte. Les gabarits de contenu viendront aux étapes 5 à 7.
   ------------------------------------------------------------------ */

/* --- Bases ------------------------------------------------------- */

body.bvtc {
	margin: 0;
	background: var(--bv-fond-page);
	color: var(--bv-corps);
	font-family: var(--bv-police);
	font-size: var(--bv-corps-taille);
	line-height: var(--bv-corps-interligne);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

/* Titres — préfixés par « body » à dessein.
   Virtue Premium imprime, APRÈS nos feuilles, un bloc <style> issu de Redux
   qui fixe « h1..h5 { font-family: Lato; font-size: ... } ». Un sélecteur nu
   perdrait l'arbitrage à égalité de spécificité, et les titres tomberaient en
   Lato — police que le thème enfant ne charge plus, donc en repli sérif.
   « body h2 » (0,0,2) l'emporte sur « h2 » (0,0,1) tout en restant en dessous
   de la moindre règle de composant (0,1,0). Vérifié sur le site réel. */
body h1, body h2, body h3, body h4, body h5, body h6 {
	font-family: var(--bv-police);
	color: var(--bv-encre);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 0.6em;
}

body h1 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -0.02em; }
body h2 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.015em; }
body h3 { font-size: 19px; }
body h4, body h5, body h6 { font-size: 17px; }

a { color: var(--bv-rouge-lien); }
img { max-width: 100%; height: auto; }
body.bvtc.bvtc-nav-ouverte { overflow: hidden; }

.bvtc-conteneur {
	width: 100%;
	max-width: var(--bv-largeur);
	margin: 0 auto;
	padding: 0 var(--bv-gouttiere);
	box-sizing: border-box;
}

.bvtc-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--bv-encre);
	color: var(--bv-sur-sombre);
	padding: 12px 18px;
	z-index: 200;
}
.bvtc-skip:focus { left: 8px; top: 8px; }

/* --- Focus clavier ------------------------------------------------
   Le contour par défaut du navigateur est un fin liseré bleu, illisible
   sur le crème du site. On le remplace partout par un contour net, tracé
   à distance de l'élément pour rester lisible sur les cartes et les
   boutons pleins. `:focus-visible` n'apparaît qu'au clavier : la souris
   ne déclenche rien.
   Pas de `border-radius` ici : les navigateurs font suivre au contour le
   rayon réel de l'élément. En imposer un carrerait les angles des boutons
   en pilule au moment du focus. */

:focus-visible {
	outline: 2px solid var(--bv-rouge);
	outline-offset: 3px;
}

/* Sur les fonds sombres, le rouge n'a pas assez de contraste : on passe
   au saumon de la palette. */
.bvtc-bandeau :focus-visible,
.bvtc-pied :focus-visible,
.bvtc-bouton--encre:focus-visible {
	outline-color: var(--bv-saumon);
}

/* --- Boutons ----------------------------------------------------- */

.bvtc-bouton {
	display: inline-block;
	padding: 12px 22px;
	border-radius: var(--bv-rayon-bouton);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
	/* Déclaré ici plutôt que laissé à la réinitialisation de Virtue : dès
	   qu'une largeur est imposée — les boutons pleine largeur sur mobile —
	   la rembourrure et la bordure s'ajouteraient à 100 %, et le bouton
	   déborderait. Un composant du thème enfant ne doit pas dépendre d'une
	   règle du thème parent pour tenir dans sa colonne. Défaut vu au rendu. */
	box-sizing: border-box;
}
.bvtc-bouton--encre {
	background: var(--bv-encre);
	color: var(--bv-fond-page);
}
.bvtc-bouton--encre:hover { background: var(--bv-rouge); color: #fff; }
.bvtc-bouton--ligne {
	border-color: var(--bv-filet);
	color: var(--bv-encre);
	background: transparent;
}
.bvtc-bouton--ligne:hover { border-color: var(--bv-bordure-badge); background: var(--bv-rose-pale); }

/* --- Bandeau ----------------------------------------------------- */

.bvtc-bandeau {
	background: var(--bv-fond-sombre);
	color: var(--bv-sur-sombre-3);
	font-size: 13px;
}
.bvtc-bandeau__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	justify-content: center;
	align-items: center;
	padding-top: 9px;
	padding-bottom: 9px;
	text-align: center;
}
.bvtc-bandeau__fort { color: var(--bv-saumon); }

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

.bvtc-entete {
	position: sticky;
	top: 0;
	z-index: 120;
	background: var(--bv-entete-fond);
	-webkit-backdrop-filter: var(--bv-entete-flou);
	backdrop-filter: var(--bv-entete-flou);
	border-bottom: 1px solid var(--bv-filet);
}
.bvtc-entete__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 74px;
}

.bvtc-marque {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--bv-encre);
}
.bvtc-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: 999px;
	background: var(--bv-encre);
	color: var(--bv-fond-page);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.bvtc-marque__texte { display: flex; flex-direction: column; line-height: 1.2; }
.bvtc-marque__nom { font-size: 17px; font-weight: 600; color: var(--bv-encre); }
.bvtc-marque__lieu {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bv-secondaire);
}

.bvtc-nav { display: flex; align-items: center; gap: 28px; }
.bvtc-nav__liste {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bvtc-nav__liste a {
	color: var(--bv-corps-fonce);
	text-decoration: none;
	font-size: 15px;
}
.bvtc-nav__liste a:hover { color: var(--bv-rouge-lien); }
.bvtc-nav__actions { display: flex; align-items: center; gap: 16px; }
.bvtc-tel {
	color: var(--bv-encre);
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
	white-space: nowrap;
}

.bvtc-burger {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--bv-filet);
	border-radius: var(--bv-rayon-carte);
	background: transparent;
	cursor: pointer;
	padding: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.bvtc-burger span {
	display: block;
	width: 18px;
	height: 1.5px;
	background: var(--bv-encre);
}

/* Le menu mobile est un panneau ANCRÉ SOUS L'EN-TÊTE, et non un panneau
   fixe : `backdrop-filter` sur .bvtc-entete crée un bloc conteneur pour ses
   descendants en position fixed, qui ne se placeraient donc pas par rapport
   à la fenêtre. Piège vérifié en capture avant correction. */
@media (max-width: 960px) {
	.bvtc-burger { display: flex; }
	.bvtc-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px var(--bv-gouttiere) 24px;
		background: var(--bv-fond-page);
		border-bottom: 1px solid var(--bv-filet);
		box-shadow: var(--bv-ombre);
		box-sizing: border-box;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
	}
	.bvtc-nav.est-ouvert { display: flex; }
	.bvtc-nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
	.bvtc-nav__liste a {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid var(--bv-filet);
		font-size: 17px;
	}
	.bvtc-nav__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-top: 20px;
	}
	.bvtc-nav__actions .bvtc-tel { text-align: center; font-size: 17px; }
	.bvtc-nav__actions .bvtc-bouton { text-align: center; }
}

@media (max-width: 420px) {
	.bvtc-marque__lieu { display: none; }
}

/* --- Méga-menu des destinations -----------------------------------
   Les 59 liens sont écrits par PHP dans header.php (voir bvtc_mega_menu()).
   Cette feuille ne fait que les montrer ou les cacher : rien ici n'est
   nécessaire pour qu'ils existent dans le HTML.

   Ouverture, par ordre de préférence et SANS JavaScript :
     grand écran, souris   -> :hover sur l'entrée
     grand écran, clavier  -> :focus-within
     mobile                -> les <details> du burger, repliés
   La classe .est-deploye n'est là que pour le tactile sur grand écran, où ni
   le survol ni le focus ne se produisent. Elle est posée par les quelques
   lignes de script du pied de page.
   ------------------------------------------------------------------ */

/* Texte réservé aux lecteurs d'écran : hors de l'image, mais lu, et — à la
   différence de display:none — toujours annoncé. */
.bvtc-invisible {
	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;
}

.bvtc-nav__item--mega { display: flex; align-items: center; gap: 4px; }

.bvtc-mega__bascule {
	display: none;             /* révélé par .bvtc-mega--js, voir header.php */
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	color: var(--bv-corps-fonce);
	border-radius: 999px;
}
.bvtc-mega--js .bvtc-mega__bascule { display: inline-flex; }
.bvtc-mega__bascule:hover { color: var(--bv-rouge-lien); }

/* Chevron dessiné au trait : pas de fichier, pas de police d'icônes. */
.bvtc-mega__chevron {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .15s ease;
}
.bvtc-mega__bascule[aria-expanded="true"] .bvtc-mega__chevron {
	transform: translateY(1px) rotate(225deg);
}

.bvtc-mega__titre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-weight: 600;
	color: var(--bv-encre);
	cursor: pointer;
}
.bvtc-mega__titre::-webkit-details-marker { display: none; }
.bvtc-mega__compte {
	font-size: 11px;
	font-weight: 500;
	color: var(--bv-secondaire);
}

.bvtc-mega__liens { list-style: none; margin: 0; padding: 0; }
.bvtc-mega__liens a { color: var(--bv-corps-fonce); text-decoration: none; }
.bvtc-mega__liens a:hover,
.bvtc-mega__liens a:focus-visible { color: var(--bv-rouge); }

.bvtc-mega__pied { margin: 0; }
.bvtc-mega__pied a { color: var(--bv-rouge-lien); font-weight: 500; text-decoration: none; }
.bvtc-mega__pied a:hover { text-decoration: underline; }

/* --- Méga-menu : grand écran -------------------------------------- */

@media (min-width: 961px) {

	/* Le panneau se place par rapport à .bvtc-entete, qui est en position
	   sticky et fait donc bloc conteneur — le même mécanisme que le menu
	   mobile, noté plus haut. L'entrée reste en position static exprès. */
	.bvtc-mega {
		display: none;
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		width: min( var(--bv-largeur), calc(100vw - 2 * var(--bv-gouttiere)) );
		box-sizing: border-box;
		padding: 26px 28px 22px;
		background: var(--bv-fond-page);
		border: 1px solid var(--bv-filet);
		border-top: 0;
		border-radius: 0 0 var(--bv-rayon-service) var(--bv-rayon-service);
		box-shadow: var(--bv-ombre);
		/* La colonne « Pays vannetais » fait 16 lignes, soit ~520 px de
		   panneau : sur un portable de 768 px de haut, sans ce garde-fou le
		   bas du panneau sort de l'écran sans moyen d'y accéder. */
		max-height: min(70vh, 560px);
		overflow-y: auto;
		z-index: 130;
	}

	.bvtc-nav__item--mega:hover > .bvtc-mega,
	.bvtc-nav__item--mega:focus-within > .bvtc-mega,
	.bvtc-nav__item--mega.est-deploye > .bvtc-mega { display: block; }

	/* Passerelle de survol : sans elle, la souris quitte la boîte de l'entrée
	   en descendant vers le panneau — il y a ~26 px de vide entre les deux —
	   et le panneau se referme avant d'être atteint. La marge négative annule
	   l'effet visuel de la rembourrure. */
	.bvtc-nav__item--mega { padding: 26px 0; margin: -26px 0; }

	.bvtc-mega__grille {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
		gap: 22px 24px;
	}

	/* Sur grand écran les six zones sont des colonnes, pas des accordéons :
	   on force le contenu visible quel que soit l'état de <details>, et le
	   titre cesse de réagir à la souris pour qu'un clic ne replie rien. */
	.bvtc-mega__zone > .bvtc-mega__liens { display: block !important; }
	.bvtc-mega__titre {
		pointer-events: none;
		list-style: none;
		font-size: 13px;
		letter-spacing: 0.04em;
		padding-bottom: 10px;
		margin-bottom: 10px;
		border-bottom: 1px solid var(--bv-filet);
	}
	.bvtc-mega__liens li + li { margin-top: 7px; }
	.bvtc-mega__liens a { font-size: 14px; line-height: 1.35; }

	.bvtc-mega__pied {
		margin-top: 20px;
		padding-top: 16px;
		border-top: 1px solid var(--bv-filet);
		font-size: 14px;
	}
}

/* --- Méga-menu : mobile, à l'intérieur du burger ------------------- */

@media (max-width: 960px) {

	/* Le bouton n'a pas d'objet ici : le panneau n'est jamais replié en bloc,
	   ce sont les six zones qui le sont. */
	.bvtc-mega--js .bvtc-mega__bascule,
	.bvtc-mega__bascule { display: none; }

	.bvtc-nav__item--mega { display: block; }

	.bvtc-mega {
		display: block;
		position: static;
		width: auto;
		transform: none;
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		max-height: none;
		overflow: visible;
	}

	.bvtc-mega__titre {
		padding: 13px 0 13px 16px;
		border-bottom: 1px solid var(--bv-filet);
		font-size: 15px;
	}
	.bvtc-mega__titre::after {
		content: "";
		width: 7px;
		height: 7px;
		flex: 0 0 auto;
		border-right: 1.5px solid var(--bv-secondaire);
		border-bottom: 1.5px solid var(--bv-secondaire);
		transform: translateY(-2px) rotate(45deg);
	}
	.bvtc-mega__zone[open] > .bvtc-mega__titre::after {
		transform: translateY(1px) rotate(225deg);
	}

	/* Les liens des communes héritent sinon de .bvtc-nav__liste a — 17 px et
	   un filet sous chacun, ce qui donnerait 59 rangées pleine hauteur. */
	.bvtc-mega .bvtc-mega__liens a {
		display: block;
		padding: 11px 0 11px 32px;
		border-bottom: 1px solid var(--bv-filet);
		font-size: 15px;
		color: var(--bv-corps);
	}
	.bvtc-mega__pied a {
		display: block;
		padding: 13px 0 13px 16px;
		border-bottom: 1px solid var(--bv-filet);
		font-size: 15px;
	}
}

/* --- Contenu ----------------------------------------------------- */

.bvtc-main { display: block; }

/* --- Hero des pages intérieures -----------------------------------
   Un bloc unique : la photo occupe toute la largeur et toute la hauteur du
   bandeau, le titre et les boutons sont posés dessus, dans le même bloc.

   LA PHOTO VIENT DE LA ZONE, pas du contenu de la page — relevé fait, ces
   pages n'ont pas d'image qui leur soit propre : la même sur 58 des 64.
   Six photos pour 59 destinations, par bvtc_zones().

   Le voile est en dégradé horizontal, dense à gauche où se pose le texte,
   léger à droite où la photo reste lisible. Contrastes calculés sur le pire
   des cas, un ciel blanc sous le voile : blanc sur le point le plus dense
   ≈ 9,7:1, sur le point médian ≈ 6:1. Le texte est borné en largeur pour ne
   jamais atteindre la zone claire.

   Les titres sont atteints par une classe (0,1,0), jamais par un sélecteur
   nu : « body h1 » du socle vaut (0,0,2) et imposerait l'encre sur la photo.
   ------------------------------------------------------------------ */

.bvtc-hero {
	position: relative;
	isolation: isolate;
	background: var(--bv-fond-sombre);
	overflow: hidden;
}

.bvtc-hero__fond {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.bvtc-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Le voile. En pseudo-élément plutôt qu'en div : rien à ajouter au balisage,
   et il ne peut pas se retrouver dans l'ordre de lecture. */
.bvtc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		90deg,
		rgba(30, 25, 24, 0.88) 0%,
		rgba(30, 25, 24, 0.74) 45%,
		rgba(30, 25, 24, 0.30) 100%
	);
}

.bvtc-hero__inner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(320px, 40vw, 460px);
	padding-top: 48px;
	padding-bottom: 48px;
}
.bvtc-hero__texte { max-width: 640px; }

.bvtc-hero__titre {
	margin: 0;
	color: #FFFFFF;
	font-size: clamp(32px, 4.6vw, 50px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.bvtc-hero__chapo {
	margin: 14px 0 0;
	color: var(--bv-sur-sombre-4);
	font-size: 16px;
	line-height: var(--bv-corps-interligne);
	max-width: 46ch;
}
.bvtc-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 28px;
}

.bvtc-hero__cta,
.bvtc-hero__tel {
	font-size: 15.5px;
	font-weight: 600;
	white-space: nowrap;
}
.bvtc-hero__cta {
	background: var(--bv-rouge);
	color: #FFFFFF;
	padding: 15px 28px;
}
.bvtc-hero__cta:hover { background: #FFFFFF; color: var(--bv-encre); }

.bvtc-hero__tel {
	background: rgba(255, 255, 255, 0.12);
	border: 1.5px solid #FFFFFF;
	color: #FFFFFF;
	padding: 14px 27px;   /* 1,5 px de bordure : même hauteur que le plein */
}
.bvtc-hero__tel:hover { background: #FFFFFF; color: var(--bv-encre); }

/* Sur fond photo, le contour rouge du focus clavier se perd : on prend le
   blanc, comme sur les autres fonds sombres du site. */
.bvtc-hero :focus-visible { outline-color: #FFFFFF; }

/* Le hero remplace le titre de page : le contenu peut remonter. */
.bvtc-hero + .bvtc-interieur { padding-top: 40px; }

@media (max-width: 700px) {
	/* La colonne devient étroite : le dégradé horizontal n'a plus de sens,
	   le texte occuperait aussi la partie claire. Voile vertical, plus dense
	   en bas où se posent les boutons. */
	.bvtc-hero::after {
		background: linear-gradient(
			180deg,
			rgba(30, 25, 24, 0.62) 0%,
			rgba(30, 25, 24, 0.86) 100%
		);
	}
	.bvtc-hero__texte { max-width: none; }
}

@media (max-width: 560px) {
	.bvtc-hero__inner {
		min-height: 300px;
		padding-top: 36px;
		padding-bottom: 36px;
	}
	/* Même règle que le hero de l'accueil, et pour la même raison : empilés à
	   leur largeur de texte, les deux boutons dessinaient un escalier. */
	.bvtc-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.bvtc-hero__actions .bvtc-bouton {
		display: block;
		width: 100%;
		text-align: center;
		white-space: normal;
	}
}

.bvtc-interieur { padding-top: 48px; padding-bottom: 72px; }
.bvtc-titre-page { margin-bottom: 20px; }
.bvtc-chapo {
	font-size: 17px;
	color: var(--bv-corps);
	max-width: 760px;
	margin: 0 0 8px;
}
.bvtc-contenu > *:first-child { margin-top: 0; }

/* --- Hub Destinations -------------------------------------------- */

.bvtc-hub__entete { margin-bottom: 8px; }
.bvtc-hub__zone {
	margin-top: 36px;
	padding-top: 26px;
	border-top: 1px solid var(--bv-filet);
}
.bvtc-hub__zone h2 { margin-bottom: 4px; }
.bvtc-hub__note { margin: 0 0 18px; font-size: 14px; color: var(--bv-secondaire); }
.bvtc-hub__grille {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 10px;
}
.bvtc-hub__grille a {
	display: block;
	padding: 12px 14px;
	border: 1px solid var(--bv-filet);
	border-radius: var(--bv-rayon-carte);
	background: var(--bv-fond-carte);
	color: var(--bv-encre);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.35;
}
.bvtc-hub__grille a:hover {
	border-color: var(--bv-bordure-badge);
	background: var(--bv-rose-pale);
	color: var(--bv-rouge-lien);
}
.bvtc-hub__plus { margin: 16px 0 0; font-size: 15px; }
.bvtc-hub__pied {
	margin-top: 36px;
	padding-top: 26px;
	border-top: 1px solid var(--bv-filet);
	font-size: 14px;
	color: var(--bv-secondaire);
}

/* --- Pied de page ------------------------------------------------ */

.bvtc-pied {
	background: var(--bv-fond-pied);
	color: var(--bv-sur-sombre-3);
	font-size: 15px;
	padding: 56px 0 28px;
	margin-top: 64px;
}
.bvtc-pied a { color: var(--bv-sur-sombre-4); text-decoration: none; }
.bvtc-pied a:hover { color: var(--bv-saumon); }
.bvtc-pied p { margin: 0 0 10px; }

.bvtc-pied__colonnes {
	display: grid;
	/* Cinq colonnes depuis la 0.3.1 : la colonne « Destinations » s'ajoute
	   aux quatre d'origine. Elle reçoit un peu plus de largeur que les
	   colonnes de coordonnées — « Golfe du Morbihan et presqu'île de Rhuys »
	   ne tient pas en une ligne de 195 px. */
	grid-template-columns: 1.3fr 1fr 1fr 1.2fr 1fr;
	gap: 32px;
}
@media (max-width: 860px) {
	.bvtc-pied__colonnes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.bvtc-pied__colonnes { grid-template-columns: 1fr; }
}

.bvtc-pied__titre {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bv-libelle-sombre);
	margin: 0 0 14px;
	font-weight: 500;
}
.bvtc-marque--pied { margin-bottom: 14px; gap: 10px; }
.bvtc-marque--pied .bvtc-marque__nom { color: var(--bv-sur-sombre); }
.bvtc-logo--pied {
	background: var(--bv-carte-sombre);
	color: var(--bv-sur-sombre);
	border: 1px solid var(--bv-filet-sombre-3);
}

/* Colonne « Destinations » — dix liens, jamais cinquante-neuf. Le
   raisonnement est dans bvtc_pied_destinations(). Les deux groupes sont
   séparés par un filet sombre : les quatre gares et aéroports d'abord, les
   cinq zones ensuite. */
.bvtc-pied__liens {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bvtc-pied__liens li + li { margin-top: 8px; }
.bvtc-pied__liens a { line-height: 1.4; display: inline-block; }
.bvtc-pied__liens--zones {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--bv-filet-sombre);
}
.bvtc-pied__toutes {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--bv-filet-sombre);
	font-size: 14px;
}
.bvtc-pied__toutes a { color: var(--bv-saumon); }
.bvtc-pied__toutes a:hover { color: var(--bv-sur-sombre); }

.bvtc-pied__plan {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--bv-filet-sombre);
	font-size: 14px;
}

.bvtc-pied__bas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	justify-content: space-between;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--bv-filet-sombre-2);
	font-size: 13px;
	color: var(--bv-libelle-sombre);
}
.bvtc-pied__bas p { margin: 0; }

/* ------------------------------------------------------------------
   Pot de miel du formulaire de contact — étape 6, remplace reCAPTCHA.

   Volontairement PAS display:none et PAS type="hidden" : les deux se
   détectent trivialement, et beaucoup de robots les ignorent justement
   pour cette raison. Le champ reste un <input type="text"> ordinaire,
   sorti de l'écran. Il est aussi retiré du parcours clavier et masqué
   aux lecteurs d'écran par des attributs posés en PHP (functions.php),
   de sorte qu'aucun visiteur humain ne puisse ni le voir ni l'atteindre.
   ------------------------------------------------------------------ */

.bvtc-pot-de-miel {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Le <p> que Contact Form 7 pose autour du champ garde sa marge basse
   alors qu'il n'a plus de hauteur : 16 px de blanc au-dessus du bouton
   d'envoi. On l'annule. La parade la plus sûre reste de placer le tag
   du pot de miel SUR LA MÊME LIGNE que [submit] dans le formulaire :
   les deux partagent alors un seul <p> et la question ne se pose pas. */
p:has(> .wpcf7-form-control-wrap[data-name="bvtc-noxalim"]) {
	margin: 0 !important;
}

/* ------------------------------------------------------------------
   Page de contact — bloc « joindre tout de suite ».

   Cette page reçoit plus de 9 000 redirections depuis /contact/ ; c'est
   la deuxième plus visitée du site, et les gens qui y arrivent veulent
   un moyen de joindre, pas une présentation. Le numéro doit donc tenir
   dans le premier écran d'un téléphone et se toucher sans viser.
   ------------------------------------------------------------------ */

.bvtc-contact-tete {
	text-align: center;
	background: var(--bv-fond-carte);
	border: 1px solid var(--bv-filet);
	border-radius: var(--bv-rayon-carte);
	padding: 36px 24px 32px;
	margin-bottom: var(--bv-gouttiere);
}

.bvtc-contact-accroche {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bv-secondaire);
}

.bvtc-contact-tel {
	margin: 0;
	line-height: 1.1;
}

.bvtc-contact-tel a {
	display: inline-block;
	padding: 6px 12px;            /* zone tactile, pas décoration */
	font-size: clamp(38px, 9vw, 62px);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--bv-encre);
	text-decoration: none;
	white-space: nowrap;          /* un numéro ne se coupe jamais en deux */
}

.bvtc-contact-tel a:hover,
.bvtc-contact-tel a:focus-visible { color: var(--bv-rouge); }

.bvtc-contact-dispo {
	margin: 6px 0 22px;
	font-size: 16px;
	color: var(--bv-corps);
}

.bvtc-contact-alt {
	margin: 18px 0 0;
	font-size: 15px;
	color: var(--bv-corps);
}

@media (max-width: 600px) {
	.bvtc-contact-tete { padding: 28px 16px 26px; }
	.bvtc-contact-dispo { margin-bottom: 18px; }
}