/*
 * Page d'accueil : mise en forme des sections (page-templates/template-landing.php).
 *
 * Tout est limité à .vtc-landing ou à la classe du gabarit sur <body>,
 * donc rien ici ne peut toucher au reste du site.
 *
 * Sommaire :
 *   - Couleurs et taille de base
 *   - Corrections du thème Shapely
 *   - Éléments communs (sections, titres, boutons)
 *   1. Bannière principale
 *   2. Bande de statistiques
 *   3. Vitrine qui défile
 *   4. Trois cartes en vedette
 *   5. Tarifs
 *   6. Appel à l'action final
 *   - Petits écrans
 *   - Animations réduites
 */


/* ========== Couleurs et taille de base ========== */

.vtc-landing {
	--vtc-pink: #D37ABB;        /* rose de la marque */
	--vtc-plum: #665964;        /* prune de la marque */
	--vtc-plum-deep: #2e272d;   /* prune foncé, pour les bandes sombres */
	--vtc-pink-tint: #fbf1f8;   /* rose très pâle, pour les bandes claires */
	--vtc-ink: #2b242a;         /* texte sur fond clair */
	--vtc-line: rgba(102, 89, 100, 0.22); /* lignes de séparation */

	/* Shapely utilise une petite taille de police de base. Les tailles de ce
	   fichier sont donc en « em » à partir de 16px, et non en « rem ». */
	font-size: 16px;
	color: var(--vtc-ink);
}


/* ========== Corrections du thème Shapely ========== */

/* L'en-tête de Shapely reste fixé en haut de l'écran. Sans cette marge, les
   boutons qui mènent aux tarifs cacheraient le titre de la section dessous. */
#vtc-pricing {
	scroll-margin-top: 80px;
}

/* Shapely enveloppe chaque gabarit qu'il ne connaît pas dans un conteneur
   de largeur fixe, avec une bande de titre au-dessus. On ne peut pas les
   désactiver depuis un gabarit enfant, alors on les annule ici : la bande
   est cachée et chaque section va d'un bord de l'écran à l'autre. */
.page-template-template-landing .header-callout {
	display: none;
}

.page-template-template-landing .content-area {
	padding: 0;
}

.page-template-template-landing #main.container {
	width: auto;
	max-width: none;
	padding: 0;
}

.page-template-template-landing {
	overflow-x: hidden;
}


/* ========== Éléments communs ========== */

.vtc-section {
	padding: 88px 24px;
}

/* Largeur maximale du contenu à l'intérieur d'une section. */
.vtc-inner {
	max-width: 1120px;
	margin: 0 auto;
}

.vtc-center {
	text-align: center;
}

/* Grand titre de section. clamp() : la taille s'adapte à la largeur de
   l'écran, entre un minimum et un maximum. */
.vtc-title {
	font-size: clamp(1.7em, 3.2vw, 2.6em);
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-align: center;
	max-width: 20em;
	margin: 0 auto 18px;
	color: inherit;
}

/* Paragraphe d'introduction sous un titre. */
.vtc-lead {
	font-size: 1.1em;
	line-height: 1.6;
	text-align: center;
	max-width: 38em;
	margin: 0 auto 48px;
	color: var(--vtc-plum);
}

/* Petite note sous un bouton. */
.vtc-note {
	font-size: 0.9em;
	opacity: 0.8;
	margin: 0;
}


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

.vtc-landing .vtc-btn {
	display: inline-block;
	padding: 15px 30px;
	border: 2px solid transparent;
	border-radius: 0;
	font-size: 0.95em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Bouton rose. Le texte est foncé : du blanc sur ce rose serait trop pâle pour être lu. */
.vtc-landing .vtc-btn-pink {
	background: var(--vtc-pink);
	color: var(--vtc-plum-deep);
}

.vtc-landing .vtc-btn-pink:hover,
.vtc-landing .vtc-btn-pink:focus {
	background: #fff;
	color: var(--vtc-plum-deep);
}

/* Bouton prune. */
.vtc-landing .vtc-btn-plum {
	background: var(--vtc-plum);
	color: #fff;
}

.vtc-landing .vtc-btn-plum:hover,
.vtc-landing .vtc-btn-plum:focus {
	background: var(--vtc-plum-deep);
	color: #fff;
}

/* Bouton contour (fond transparent, bordure prune). */
.vtc-landing .vtc-btn-outline {
	border-color: var(--vtc-plum);
	color: var(--vtc-plum);
	background: transparent;
}

.vtc-landing .vtc-btn-outline:hover,
.vtc-landing .vtc-btn-outline:focus {
	background: var(--vtc-plum);
	color: #fff;
}

/* Lien texte souligné. */
.vtc-landing .vtc-link {
	color: var(--vtc-plum);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.vtc-landing .vtc-link:hover {
	color: var(--vtc-pink);
}


/* ========== 1. Bannière principale ========== */

/* La bannière et l'appel à l'action final partagent le même fond :
   prune foncé avec deux halos roses. */
.vtc-hero,
.vtc-cta {
	text-align: center;
	color: #fff;
	background:
		radial-gradient(60% 80% at 80% 0%, rgba(211, 122, 187, 0.45), transparent 70%),
		radial-gradient(50% 70% at 10% 100%, rgba(211, 122, 187, 0.25), transparent 70%),
		var(--vtc-plum-deep);
}

.vtc-hero {
	padding-top: 150px;
	padding-bottom: 150px;
}

.vtc-hero-title {
	font-size: clamp(2.3em, 6vw, 4.6em);
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -0.02em;
	max-width: 14em;
	margin: 0 auto 36px;
	color: #fff;
}

.vtc-hero-actions {
	margin: 0 0 18px;
}

/* Lien « Pourquoi m'abonner? » sous le bouton : blanc et souligné sur le
   fond foncé, rose au survol. */
.vtc-landing .vtc-hero .vtc-note a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vtc-landing .vtc-hero .vtc-note a:hover,
.vtc-landing .vtc-hero .vtc-note a:focus {
	color: var(--vtc-pink);
}


/* ========== 2. Bande de statistiques ========== */

.vtc-stats {
	padding-top: 44px;
	padding-bottom: 44px;
	border-bottom: 1px solid var(--vtc-line);
}

/* Une colonne plus large pour le badge, puis une colonne par chiffre (4). */
.vtc-stats-row {
	display: grid;
	grid-template-columns: 1.4fr repeat(4, 1fr);
	gap: 32px;
	align-items: center;
}

/* Badge : l'étoile dans un cercle, avec son texte. */
.vtc-badge {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 0.9em;
	line-height: 1.4;
	color: var(--vtc-plum);
}

.vtc-badge-mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 2px solid var(--vtc-pink);
	border-radius: 50%;
	color: var(--vtc-pink);
	font-size: 1.3em;
}

/* Un chiffre et son libellé, séparés du précédent par une ligne verticale. */
.vtc-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-left: 24px;
	border-left: 1px solid var(--vtc-line);
}

.vtc-stat-number {
	font-size: clamp(1.8em, 3.4vw, 2.8em);
	font-weight: 600;
	line-height: 1;
	color: var(--vtc-plum);
}

.vtc-stat-label {
	font-size: 0.85em;
	color: var(--vtc-plum);
}


/* ========== 3. Vitrine qui défile ========== */

.vtc-showcase {
	padding-left: 0;
	padding-right: 0;
	background: var(--vtc-pink-tint);
	overflow: hidden;
}

/* Le défilement : la bande glisse vers la gauche de la moitié de sa largeur
   (une série de cartes sur deux), en 70 secondes, puis recommence.
   Il s'arrête quand la souris ou le clavier est sur une carte. */
.vtc-marquee {
	display: flex;
	width: max-content;
	animation: vtc-marquee 70s linear infinite;
}

.vtc-marquee:hover,
.vtc-marquee:focus-within {
	animation-play-state: paused;
}

@keyframes vtc-marquee {
	to {
		transform: translateX(-50%);
	}
}

.vtc-marquee-track {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0 10px;
	list-style: none;
}

.vtc-card {
	width: 280px;
	flex: none;
}

.vtc-landing .vtc-card a {
	display: block;
	color: var(--vtc-ink);
	text-decoration: none;
}

.vtc-card-name {
	display: block;
	margin-top: 10px;
	font-size: 0.9em;
	font-weight: 700;
}

.vtc-landing .vtc-card a:hover .vtc-card-name {
	color: var(--vtc-plum);
	text-decoration: underline;
}

/* Blocs de couleur qui remplacent les images en attendant les vraies. */
.vtc-shot {
	display: block;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--vtc-line);
}

.vtc-shot-tall {
	aspect-ratio: 3 / 4;
}

.vtc-shot-0 { background: linear-gradient(135deg, var(--vtc-pink), var(--vtc-plum)); }
.vtc-shot-1 { background: linear-gradient(200deg, #f3d3ea, var(--vtc-pink)); }
.vtc-shot-2 { background: linear-gradient(160deg, var(--vtc-plum), var(--vtc-plum-deep)); }
.vtc-shot-3 { background: linear-gradient(20deg, #efe6ee, #cdbfca); }
.vtc-shot-4 { background: linear-gradient(315deg, var(--vtc-pink), #f3d3ea 60%, #fff); }


/* ========== 4. Trois cartes en vedette ========== */

.vtc-template-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	align-items: center;
	margin-bottom: 44px;
}

.vtc-template {
	text-align: center;
}

/* La carte du centre est un peu plus grande. */
.vtc-template.is-featured {
	transform: scale(1.06);
}

.vtc-template-name {
	font-size: 1.15em;
	font-weight: 600;
	margin: 16px 0 14px;
	color: var(--vtc-ink);
}


/* ========== 5. Tarifs ========== */

.vtc-pricing {
	background: var(--vtc-pink-tint);
}

/* Bascule annuel / mensuel (deux boutons dans une pilule). */
.vtc-toggle {
	display: flex;
	width: max-content;
	max-width: 100%;
	margin: 26px auto 44px;
	padding: 4px;
	border: 1px solid var(--vtc-plum);
	border-radius: 999px;
	background: #fff;
}

.vtc-landing .vtc-toggle-btn {
	padding: 10px 22px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--vtc-plum);
	font: inherit;
	font-size: 0.9em;
	font-weight: 700;
	cursor: pointer;
}

.vtc-landing .vtc-toggle-btn.is-active {
	background: var(--vtc-plum);
	color: #fff;
}

/* Quatre forfaits côte à côte, tous de la même hauteur. */
.vtc-plan-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: stretch;
}

.vtc-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px 24px 28px;
	border: 1px solid var(--vtc-line);
	background: #fff;
}

.vtc-plan.is-featured {
	border: 2px solid var(--vtc-pink);
}

/* Étiquette rose posée à cheval sur le haut du forfait mis en avant. */
.vtc-plan-flag {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 4px 12px;
	background: var(--vtc-pink);
	color: var(--vtc-plum-deep);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.vtc-plan-name {
	font-size: 1.2em;
	font-weight: 600;
	margin: 0 0 12px;
	color: var(--vtc-ink);
}

.vtc-plan-price {
	margin: 0 0 22px;
	color: var(--vtc-plum);
}

.vtc-plan-amount,
.vtc-plan-currency {
	font-size: 2.4em;
	font-weight: 600;
	line-height: 1;
	color: var(--vtc-ink);
}

.vtc-plan-period {
	font-size: 0.85em;
}

.vtc-plan .vtc-btn {
	text-align: center;
}

/* Liste des avantages, avec un crochet rose dessiné en CSS devant chacun. */
.vtc-plan-features {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9em;
	line-height: 1.45;
}

.vtc-plan-features li {
	position: relative;
	padding: 9px 0 9px 22px;
	border-top: 1px solid var(--vtc-line);
}

.vtc-plan-features li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 14px;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--vtc-pink);
	border-bottom: 2px solid var(--vtc-pink);
	transform: rotate(-45deg);
}


/* ========== 6. Appel à l'action final ========== */

.vtc-cta {
	padding-top: 120px;
	padding-bottom: 120px;
}

.vtc-cta .vtc-title {
	color: #fff;
	margin-bottom: 30px;
}


/* ========== Petits écrans ========== */

/* Tablettes : le badge passe sur sa propre ligne, les forfaits sur deux colonnes. */
@media (max-width: 991px) {
	.vtc-stats-row {
		grid-template-columns: repeat(4, 1fr);
	}

	.vtc-badge {
		grid-column: 1 / -1;
		justify-content: center;
	}

	.vtc-plan-grid {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 32px;
	}
}

/* Téléphones : marges réduites, chiffres deux par ligne, une carte et un forfait par ligne. */
@media (max-width: 640px) {
	.vtc-section {
		padding: 60px 16px;
	}

	.vtc-showcase {
		padding-left: 0;
		padding-right: 0;
	}

	.vtc-hero {
		padding-top: 96px;
		padding-bottom: 96px;
	}

	.vtc-cta {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.vtc-stats-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.vtc-stat {
		padding-left: 0;
		border-left: 0;
		align-items: center;
		text-align: center;
	}

	.vtc-template-grid {
		grid-template-columns: 1fr;
		gap: 36px;
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}

	.vtc-template.is-featured {
		transform: none;
	}

	.vtc-plan-grid {
		grid-template-columns: 1fr;
	}

	.vtc-card {
		width: 220px;
	}
}


/* ========== Animations réduites ========== */

/* Pour les visiteurs qui ont demandé moins d'animations à leur appareil :
   la vitrine ne défile plus seule. Elle devient une rangée qu'on fait
   glisser soi-même, et la copie en double est retirée. */
@media (prefers-reduced-motion: reduce) {
	.vtc-showcase {
		overflow-x: auto;
	}

	.vtc-marquee {
		animation: none;
	}

	.vtc-marquee-track[aria-hidden="true"] {
		display: none;
	}
}