/* ------------------------------------------------------------------
   Bretagne VTC — accueil (étape 7).
   Feuille chargée UNIQUEMENT sur la page d'accueil (is_front_page()),
   parce qu'aucune de ces classes n'existe ailleurs : la charger partout
   ferait payer 16 ko à 67 pages qui ne s'en servent pas.

   Les valeurs viennent de la maquette. Elles passent par les tokens
   quand un token existe ; les tailles de texte propres à l'accueil
   (clamp des titres, 14,5 px des cartes) sont écrites ici, car elles
   ne sont utilisées nulle part ailleurs et n'ont pas à devenir des
   variables globales.

   Rappel de spécificité : Virtue Premium imprime après nos feuilles un
   bloc Redux qui fixe « h1..h5 ». Tout titre est donc atteint ici par un
   sélecteur d'au moins une classe (0,1,x), jamais par un sélecteur nu.
   ------------------------------------------------------------------ */

/* --- Ancres ------------------------------------------------------
   L'en-tête est `position: sticky` et haut de 74 px. Sans marge de
   défilement, « /#prix » depuis une autre page dépose le titre SOUS
   l'en-tête. --bv-ancre vaut 74 px + une respiration. */

#top, #services, #prix, #devis, #bord, #zones, #faq {
	scroll-margin-top: var(--bv-ancre);
}

/* Le défilement doux est un confort, pas une fonction : il reste
   désactivé pour qui a demandé moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* --- Trame commune ------------------------------------------------ */

.bvtc-ac-section { padding: 72px 0; }
.bvtc-ac-deux {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 48px;
	align-items: center;
}

/* --- Hero --------------------------------------------------------- */

.bvtc-ac-hero {
	background: var(--bv-fond-hero);
	border-bottom: 1px solid var(--bv-filet);
}
.bvtc-ac-hero__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 48px;
	align-items: center;
	padding-top: 64px;
	padding-bottom: 56px;
}

.bvtc-ac-badge {
	display: inline-block;
	background: var(--bv-fond-carte);
	border: 1px solid var(--bv-bordure-badge);
	color: var(--bv-rouge-lien);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 7px 13px;
	border-radius: var(--bv-rayon-bouton);
}

.bvtc-ac-h1 {
	font-size: clamp(36px, 5.4vw, 60px);
	line-height: 1.06;
	letter-spacing: -0.02em;
	margin: 20px 0 0;
}
/* <em> sans italique : c'est une mise en valeur de couleur, la maquette
   ne penche pas le texte. */
.bvtc-ac-h1 em {
	font-style: normal;
	color: var(--bv-rouge);
}

.bvtc-ac-chapo {
	font-size: 17px;
	line-height: var(--bv-corps-interligne);
	color: var(--bv-corps);
	max-width: 46ch;
	margin: 20px 0 0;
	text-wrap: pretty;
}

.bvtc-ac-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 30px;
}
.bvtc-ac-actions--centre { justify-content: center; }

/* Boutons propres à l'accueil : plus hauts que le .bvtc-bouton du socle,
   qui reste la base (rayon, transition, focus). */
.bvtc-ac-bouton--rouge,
.bvtc-ac-bouton--saumon,
.bvtc-ac-bouton--contour {
	padding: 17px 30px;
	font-size: 15.5px;
	font-weight: 600;
	white-space: nowrap;
}
.bvtc-ac-bouton--rouge {
	background: var(--bv-rouge);
	color: #FFFFFF;
}
.bvtc-ac-bouton--rouge:hover { background: var(--bv-encre); color: #FFFFFF; }

.bvtc-ac-bouton--saumon {
	background: var(--bv-saumon);
	color: var(--bv-encre);
}
.bvtc-ac-bouton--saumon:hover { background: #FFFFFF; color: var(--bv-encre); }

.bvtc-ac-bouton--contour {
	background: transparent;
	border-color: var(--bv-filet-sombre-3);
	color: var(--bv-sur-sombre);
}
.bvtc-ac-bouton--contour:hover { background: var(--bv-carte-sombre); color: #FFFFFF; }

/* Le bouton « Appeler » du hero : sur fond clair, contour encre. */
.bvtc-ac-hero .bvtc-bouton--ligne {
	background: var(--bv-fond-carte);
	border: 1.5px solid var(--bv-encre);
	padding: 16px 29px;
	font-size: 15.5px;
	font-weight: 600;
	white-space: nowrap;
}
.bvtc-ac-hero .bvtc-bouton--ligne:hover {
	background: var(--bv-encre);
	color: var(--bv-fond-page);
	border-color: var(--bv-encre);
}

.bvtc-ac-chiffres {
	list-style: none;
	margin: 36px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid var(--bv-filet);
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}
.bvtc-ac-chiffre {
	display: block;
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	color: var(--bv-encre);
}
.bvtc-ac-chiffre__libelle {
	display: block;
	font-size: 12.5px;
	color: var(--bv-secondaire);
	margin-top: 4px;
}

/* min-width sur les deux cellules : une grille CSS donne à ses colonnes
   un minimum « auto » qui vaut la largeur du contenu le plus large. Un
   long numéro de téléphone ou une image suffit à faire déborder la
   colonne au lieu de la faire rétrécir. */
.bvtc-ac-hero__texte { min-width: 0; }
.bvtc-ac-hero__visuel { position: relative; min-width: 0; }
.bvtc-ac-cadre {
	margin: 0;
	border-radius: var(--bv-rayon-hero);
	border: 1px solid var(--bv-filet);
	background: var(--bv-fond-carte);
	padding: 20px;
	box-shadow: var(--bv-ombre);
}
.bvtc-ac-image { display: block; width: 100%; height: auto; }

.bvtc-ac-encart {
	position: absolute;
	bottom: -18px;
	left: -14px;
	background: var(--bv-fond-sombre);
	color: var(--bv-sur-sombre);
	border-radius: var(--bv-rayon-carte);
	padding: 14px 18px;
	max-width: 250px;
}
.bvtc-ac-encart__sur {
	display: block;
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--bv-saumon);
	text-transform: uppercase;
}
.bvtc-ac-encart__txt {
	display: block;
	font-size: 14px;
	margin-top: 7px;
	line-height: 1.5;
}

/* Sous 420 px, l'encart débordait à gauche et poussait une barre de
   défilement horizontale : il repasse dans le flux. */
@media (max-width: 480px) {
	.bvtc-ac-encart {
		position: static;
		max-width: none;
		margin-top: 16px;
	}
}

/* --- Hero : la place offerte, sur petit écran ----------------------
   Relevé au pixel à 390 px de large (colonne utile : 324 px) :

     bouton « Réserver ma course »   218 px
     bouton « Appeler … »            235 px
     chiffre 1                       187 px
     chiffre 2                       187 px
     chiffre 3                       207 px

   contre 324 px pour le titre, le chapô et l'image. Les blocs étaient
   bien empilés, mais chacun à la largeur de son texte : un escalier, et
   une bande vide sur toute la hauteur du hero.

   Ce n'était PAS un débordement ni une largeur de conteneur fautive —
   mesuré, `scrollWidth` égale `clientWidth`, il n'y a rien qui dépasse.
   C'est l'inverse : des éléments qui ne prenaient pas la place offerte.
   ------------------------------------------------------------------ */

@media (max-width: 560px) {

	/* Les boutons occupent toute la largeur et s'alignent à droite comme
	   à gauche. Vaut pour les trois groupes d'actions de la page : le
	   hero, la section tarifs, et l'appel final. */
	.bvtc-ac-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.bvtc-ac-actions .bvtc-bouton {
		display: block;
		width: 100%;
		text-align: center;
	}

	/* Les trois chiffres passent en rangées pleine largeur, valeur à
	   gauche et libellé à droite — le motif de la liste des zones, plus
	   bas dans la même page. Empilés à leur largeur de texte, ils
	   laissaient le tiers droit vide sur trois lignes. */
	.bvtc-ac-chiffres { display: block; }
	.bvtc-ac-chiffres > li {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
		padding: 12px 0;
		border-bottom: 1px solid var(--bv-filet);
	}
	.bvtc-ac-chiffres > li:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}
	.bvtc-ac-chiffre { font-size: 22px; }
	.bvtc-ac-chiffre__libelle {
		margin-top: 0;
		text-align: right;
		max-width: 62%;
	}

	/* Le badge reste une pastille : elle épouse son texte, ici comme dans
	   la maquette. La rendre pleine largeur en ferait un bandeau, ce qui
	   n'est pas le même objet. Une seule chose à corriger : sous 340 px
	   son texte se coupait en deux lignes ragées. */
	.bvtc-ac-badge {
		max-width: 100%;
		letter-spacing: 0.10em;
	}
}

/* --- Nos services -------------------------------------------------- */

.bvtc-ac-entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--bv-filet);
	padding-bottom: 20px;
}
.bvtc-ac-entete h2 {
	font-size: clamp(28px, 3.4vw, 38px);
	margin: 0;
	letter-spacing: -0.015em;
}
.bvtc-ac-entete p {
	margin: 0;
	color: var(--bv-secondaire);
	font-size: 15px;
	max-width: 40ch;
}

.bvtc-ac-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 18px;
	margin-top: 32px;
}
.bvtc-ac-carte {
	background: var(--bv-fond-carte);
	border: 1px solid var(--bv-filet);
	border-radius: var(--bv-rayon-service);
	padding: 26px;
	transition: border-color .15s ease;
}
.bvtc-ac-carte:hover { border-color: var(--bv-rouge); }
.bvtc-ac-num {
	display: block;
	font-size: 11px;
	color: var(--bv-rouge);
	letter-spacing: 0.14em;
	font-weight: 600;
}
.bvtc-ac-carte h3 {
	font-size: 21px;
	margin: 12px 0 10px;
	letter-spacing: -0.01em;
}
.bvtc-ac-carte p {
	margin: 0;
	color: var(--bv-corps);
	font-size: 14.5px;
	line-height: 1.6;
}

/* --- Tarification (fond sombre) ------------------------------------ */

.bvtc-ac-sombre {
	background: var(--bv-fond-sombre);
	color: var(--bv-sur-sombre);
	padding: 76px 0;
}
.bvtc-ac-sombre .bvtc-ac-deux { align-items: start; }

.bvtc-ac-surtitre,
.bvtc-ac-surtitre--rouge {
	display: block;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
}
.bvtc-ac-surtitre { color: var(--bv-saumon); }
.bvtc-ac-surtitre--rouge { color: var(--bv-rouge-lien); }

.bvtc-ac-h2--clair {
	color: var(--bv-sur-sombre);
	font-size: clamp(28px, 3.8vw, 42px);
	line-height: 1.12;
	margin: 18px 0 0;
	letter-spacing: -0.02em;
}
.bvtc-ac-h2--clair em { font-style: normal; color: var(--bv-saumon); }

.bvtc-ac-chapo--clair {
	color: var(--bv-sur-sombre-2);
	font-size: 16px;
	line-height: var(--bv-corps-interligne);
	max-width: 44ch;
	margin: 20px 0 0;
}

.bvtc-ac-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	align-content: start;
}
.bvtc-ac-points > li {
	display: flex;
	gap: 16px;
	padding: 20px;
	border: 1px solid var(--bv-filet-sombre);
	border-radius: var(--bv-rayon-carte);
	background: var(--bv-carte-sombre);
	color: var(--bv-sur-sombre-3);
	font-size: 14px;
	line-height: 1.55;
}
.bvtc-ac-num--saumon {
	color: var(--bv-saumon);
	font-size: 12px;
	padding-top: 4px;
	font-weight: 600;
}
.bvtc-ac-points strong {
	display: block;
	font-weight: 600;
	font-size: 15.5px;
	color: var(--bv-sur-sombre);
	margin-bottom: 5px;
}

/* --- Devis --------------------------------------------------------- */

.bvtc-ac-devis {
	background: var(--bv-fond-carte);
	border: 1px solid var(--bv-filet);
	border-radius: var(--bv-rayon-devis);
	padding: clamp(24px, 4vw, 48px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 44px;
	box-shadow: 0 30px 60px -50px rgba(30, 25, 24, 0.5);
}
.bvtc-ac-devis h2 {
	font-size: clamp(26px, 3.2vw, 36px);
	margin: 0;
	line-height: 1.15;
	letter-spacing: -0.015em;
}
.bvtc-ac-devis .bvtc-ac-chapo { max-width: 40ch; font-size: 15.5px; margin-top: 16px; }

.bvtc-ac-puces {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
	font-size: 14.5px;
	color: var(--bv-corps-fonce);
}
.bvtc-ac-puces > li {
	display: flex;
	gap: 10px;
	align-items: center;
}
.bvtc-ac-puces > li::before {
	content: "";
	flex: 0 0 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bv-rouge);
}

/* Formulaire Contact Form 7.
   Les sélecteurs visent les types de champs, pas les classes de CF7 :
   le balisage exact du formulaire 955 dépend de sa configuration, et une
   feuille qui n'attraperait que « .wpcf7-text » laisserait un <select>
   ou un <textarea> au style du navigateur. */

.bvtc-ac-formulaire .wpcf7 form > p,
.bvtc-ac-formulaire form > p { margin: 0 0 14px; }

.bvtc-ac-formulaire label {
	display: block;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bv-secondaire);
	font-weight: 600;
}

.bvtc-ac-formulaire input[type="text"],
.bvtc-ac-formulaire input[type="email"],
.bvtc-ac-formulaire input[type="tel"],
.bvtc-ac-formulaire input[type="url"],
.bvtc-ac-formulaire input[type="number"],
.bvtc-ac-formulaire input[type="date"],
.bvtc-ac-formulaire input[type="time"],
.bvtc-ac-formulaire input[type="datetime-local"],
.bvtc-ac-formulaire select,
.bvtc-ac-formulaire textarea {
	display: block;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 6px;
	border: 1px solid var(--bv-filet-champ);
	background: var(--bv-fond-page);
	border-radius: var(--bv-rayon-champ);
	padding: 13px 14px;
	font-family: var(--bv-police);
	font-size: 15px;
	line-height: 1.4;
	color: var(--bv-encre);
	text-transform: none;
	letter-spacing: normal;
}
.bvtc-ac-formulaire textarea { min-height: 120px; resize: vertical; }

.bvtc-ac-formulaire input:focus,
.bvtc-ac-formulaire select:focus,
.bvtc-ac-formulaire textarea:focus {
	border-color: var(--bv-rouge);
	outline: none;
}
/* Le contour clavier reste, lui : :focus-visible du socle s'applique. */

.bvtc-ac-formulaire input[type="submit"],
.bvtc-ac-formulaire button[type="submit"] {
	display: block;
	width: 100%;
	margin-top: 4px;
	background: var(--bv-encre);
	color: var(--bv-fond-page);
	border: none;
	border-radius: var(--bv-rayon-bouton);
	padding: 16px;
	font-family: var(--bv-police);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: background-color .15s ease;
}
.bvtc-ac-formulaire input[type="submit"]:hover,
.bvtc-ac-formulaire button[type="submit"]:hover { background: var(--bv-rouge); }

/* Le champ pot de miel est masqué par .bvtc-pot-de-miel (theme.css) :
   aucune règle ici ne doit le ramener dans le flux. */

.bvtc-ac-manque {
	margin: 0;
	padding: 16px 18px;
	border: 1px dashed var(--bv-bordure-badge);
	border-radius: var(--bv-rayon-champ);
	background: var(--bv-rose-pale);
	color: var(--bv-rouge-lien);
	font-size: 14.5px;
}

/* --- À bord -------------------------------------------------------- */

.bvtc-ac-bord { padding-top: 20px; padding-bottom: 76px; }
.bvtc-ac-bord h2 {
	font-size: clamp(26px, 3.4vw, 38px);
	margin: 16px 0 0;
	line-height: 1.15;
	letter-spacing: -0.015em;
}
.bvtc-ac-bord .bvtc-ac-cadre { border-radius: 20px; box-shadow: none; }

.bvtc-ac-bord__liste {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px 24px;
	font-size: 15px;
	color: var(--bv-corps-fonce);
}
.bvtc-ac-bord__liste > li {
	border-top: 1px solid var(--bv-filet);
	padding-top: 12px;
}

.bvtc-ac-note {
	color: var(--bv-secondaire);
	font-size: 14.5px;
	line-height: 1.6;
	margin: 24px 0 0;
	max-width: 46ch;
}

/* --- Comment ça marche --------------------------------------------- */

.bvtc-ac-etapes {
	background: var(--bv-fond-alt);
	border-top: 1px solid var(--bv-filet);
	border-bottom: 1px solid var(--bv-filet);
	padding: 64px 0;
}
.bvtc-ac-etapes h2 {
	font-size: clamp(26px, 3.2vw, 36px);
	margin: 0 0 32px;
	letter-spacing: -0.015em;
}
.bvtc-ac-etapes__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px;
	counter-reset: none;
}
.bvtc-ac-etape__num {
	display: block;
	font-size: 40px;
	font-weight: 600;
	color: var(--bv-rouge);
	line-height: 1;
}
.bvtc-ac-etapes__liste h3 {
	font-size: 17px;
	margin: 10px 0 8px;
}
.bvtc-ac-etapes__liste p {
	margin: 0;
	color: var(--bv-corps);
	font-size: 14.5px;
	line-height: 1.6;
}

/* --- Zones --------------------------------------------------------- */

.bvtc-ac-section#zones { padding: 76px 0; }
.bvtc-ac-section#zones .bvtc-ac-deux { align-items: start; }
.bvtc-ac-section#zones h2 {
	font-size: clamp(26px, 3.4vw, 38px);
	margin: 0;
	line-height: 1.15;
	letter-spacing: -0.015em;
}
.bvtc-ac-section#zones .bvtc-ac-chapo { max-width: 42ch; font-size: 15.5px; margin-top: 16px; }

.bvtc-ac-zones {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.bvtc-ac-zones > li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px solid var(--bv-filet);
	font-size: 15.5px;
	color: var(--bv-encre);
}
.bvtc-ac-zones > li:last-child { border-bottom: none; }
.bvtc-ac-zones__tag {
	font-size: 12.5px;
	color: var(--bv-secondaire);
	white-space: nowrap;
}

/* --- FAQ ----------------------------------------------------------- */

.bvtc-ac-faq {
	background: var(--bv-fond-alt);
	border-top: 1px solid var(--bv-filet);
}
.bvtc-ac-faq__inner {
	max-width: var(--bv-largeur-faq);
	margin: 0 auto;
	padding: 76px var(--bv-gouttiere);
	box-sizing: border-box;
}
.bvtc-ac-faq h2 {
	font-size: clamp(26px, 3.4vw, 38px);
	margin: 0 0 28px;
	line-height: 1.15;
	letter-spacing: -0.015em;
}
/* .bvtc-accordeon vient d'etape5.css : même composant que les 253
   accordéons des pages converties. On n'ajuste ici que l'écart. */
.bvtc-ac-faq .bvtc-accordeon + .bvtc-accordeon { margin-top: 10px; }

/* --- Bloc final ---------------------------------------------------- */

.bvtc-ac-final {
	background: var(--bv-fond-sombre);
	color: var(--bv-sur-sombre);
	padding: 72px 0;
	text-align: center;
}
.bvtc-ac-final h2 {
	color: var(--bv-sur-sombre);
	font-size: clamp(28px, 4.2vw, 46px);
	margin: 0;
	line-height: 1.12;
	letter-spacing: -0.02em;
}
.bvtc-ac-final p {
	color: var(--bv-sur-sombre-2);
	font-size: 17px;
	margin: 18px auto 0;
	max-width: 52ch;
	line-height: 1.6;
}

/* --- Impression ----------------------------------------------------
   Les deux blocs sombres coûtent une cartouche entière pour rien. */

@media print {
	.bvtc-ac-sombre,
	.bvtc-ac-final {
		background: #FFFFFF;
		color: #000000;
	}
	.bvtc-ac-sombre .bvtc-ac-h2--clair,
	.bvtc-ac-final h2,
	.bvtc-ac-sombre .bvtc-ac-chapo--clair,
	.bvtc-ac-final p { color: #000000; }
	.bvtc-ac-points > li { background: #FFFFFF; color: #000000; border-color: #CCCCCC; }
	.bvtc-ac-actions, .bvtc-ac-formulaire { display: none; }
	.bvtc-ac-encart { position: static; background: #FFFFFF; color: #000000; }
}