/**
 * Habillage des blocs du thème parent sur la page d'accueil Listen-In.
 *
 * Sections « How it works », « Good news », formulaire de contact : ces blocs
 * viennent du thème parent ; on ne fait ici qu'en reprendre les tailles et
 * les couleurs de la maquette. Tout est préfixé par .ww-li pour ne toucher
 * que ce site.
 *
 * Deux classes utilitaires, à poser via le champ « Classes CSS » d'un bloc :
 *   .ww-li-cta        - bouton bleu clair du site (340 × 92 px)
 *   .ww-li-split-head - en-tête sur deux colonnes (titre à gauche, texte à droite)
 */

/* Bouton d'appel à l'action ------------------------------------------------ */

/*
 * Réservé à la classe .ww-li-cta (posée par le générateur sur « Get in
 * touch! » et par le bloc actualités sur « See all news ») : un bouton « lg »
 * ordinaire du parent, dans un article ou une colonne étroite, garde sa taille.
 *
 * Tous les boutons bleus du site partagent ce format : 340 × 92 px, 30 px de
 * texte, angles de 12 px. C'est l'entre-deux demandé par le client, à
 * mi-chemin entre le grand bouton de la maquette (508 × 127 px) et le bouton
 * « lg » ordinaire du parent (≈ 163 × 55 px).
 *
 * Le troisième sélecteur vise le bouton qui suit les trois étapes de « How it
 * works » : les pages composées avant l'ajout de la classe reçoivent ainsi ce
 * format sans avoir à être régénérées.
 */
.ww-li-cta.ww-btn,
.ww-li-cta .ww-btn,
.ww-li .ww-cards + .ww-button .ww-btn {
	min-width: min(340px, 100%);
	min-height: 92px;
	padding: 0.5em 1.2em;
	border-radius: 12px;
	background: var(--ww-btn-bg, var(--ww-color-accent));
	color: var(--ww-btn-color, var(--ww-color-dark));
	font-family: var(--ww-font-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
}

.ww-li-cta.ww-btn:hover,
.ww-li-cta .ww-btn:hover,
.ww-li .ww-cards + .ww-button .ww-btn:hover {
	color: var(--ww-btn-color, var(--ww-color-dark));
}

.ww-li-cta.ww-buttons {
	justify-content: center;
}

/*
 * La rangée de pictogrammes respire sous l'appel à l'action : l'écart vient du
 * rembourrage, jamais de la marge du bloc, que l'éditeur écrit en ligne et
 * reste donc libre de régler.
 */
.ww-li .ww-button + .ww-li-pictos {
	padding-top: clamp(56px, 6.5vw, 94px);
}

/* « How it works » et « Good news » : cartes sans cadre ------------------- */

/*
 * La section « How it works » porte un titre H2 pour la structure de la page
 * (h1 → h2 → h3), que la maquette n'affiche pas : il est masqué visuellement
 * mais reste lu par les lecteurs d'écran (même recette que .ww-sr-only).
 */
.ww-li .ww-li-how > .ww-container > .ww-section-head {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ww-li .ww-cards--plain .ww-card {
	overflow: visible;
}

.ww-li .ww-cards--plain .ww-card__body {
	gap: 16px;
	padding-top: 12px;
}

/*
 * Sur ordinateur, l'étincelle respire 5 px de plus que le reste de la carte :
 * la marge s'ajoute à l'écart de la colonne, le titre et le texte gardent 16 px.
 */
@media (min-width: 769px) {
	.ww-li .ww-cards--plain .ww-icon-badge + .ww-card__title {
		margin-top: 5px;
	}
}

/* Titres d'étape : Jost Bold 38 px ; texte : Jost Regular 24 px, noir. */
.ww-li .ww-cards--plain .ww-card__title {
	font-family: var(--ww-font-display);
	font-size: 38px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ww-color-dark);
}

.ww-li .ww-cards--plain .ww-card__text {
	max-width: 340px;
	margin-inline: auto;
	font-size: 24px;
	line-height: 1.4;
	color: var(--ww-color-dark);
	opacity: 1;
}

.ww-li .ww-align-left .ww-cards--plain .ww-card__text {
	margin-inline: 0;
}

/* « À propos » : pages encore composées avec le bloc texte + image ---------- */

.ww-li .ww-text-image__text {
	font-size: 28px;
	line-height: 1.45;
	color: var(--ww-color-dark);
	text-align: justify;
}

/* « Good news » : titre à gauche, paragraphe à droite ----------------------- */

.ww-li-split-head .ww-section-head,
.ww-li #help .ww-heading .ww-section-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 47%);
	gap: 24px clamp(32px, 3.2vw, 46px);
	align-items: start;
	max-width: none;
	margin-bottom: 0;
}

.ww-li-split-head .ww-title,
.ww-li #help .ww-heading .ww-title {
	margin: 0;
	font-family: var(--ww-font-display);
	font-size: clamp(2.75rem, 5vw, 72px);
	font-weight: 700;
	line-height: 0.91;
	letter-spacing: -0.01em;
	color: var(--ww-color-dark);
}

/* Paragraphe : Jost Regular 30 px sur ordinateur, justifié, noir. */
.ww-li-split-head .ww-subtitle,
.ww-li #help .ww-heading .ww-subtitle {
	margin: 0;
	padding-top: 0.15em;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.43;
	color: var(--ww-color-dark);
	text-align: justify;
}

.ww-li #help .ww-heading + .ww-cards {
	margin-top: 92px;
}

.ww-li #help .ww-cards--plain .ww-card__title,
.ww-li #help .ww-cards--plain .ww-card__text {
	color: var(--ww-color-dark);
}

/* Formulaire de contact (modèle épuré) ------------------------------------ */

.ww-li .ww-contact-form--compact {
	max-width: 700px;
}

.ww-li .ww-contact-form--compact .ww-form__icon {
	margin-bottom: 40px;
	color: var(--ww-color-primary);
}

/* L'étincelle spark-3 fait 106 × 117 px sur la maquette : boîte de 117 px. */
.ww-li .ww-contact-form--compact .ww-form__icon .ww-icon {
	width: 117px;
	height: 117px;
}

/*
 * Le logo complet n'est pas une étincelle : il est large (1016 × 474) et porte
 * ses deux couleurs sur ses tracés. On lui donne une largeur, la hauteur suit.
 */
.ww-li .ww-contact-form--compact .ww-form__icon .ww-icon--listen-in-lockup {
	width: 300px;
	height: auto;
}

.ww-li .ww-contact-form--compact .ww-section-head {
	margin-bottom: 38px;
}

/* Titre : deux lignes en SemiBold, la troisième en Regular, 48 px sur ordinateur. */
.ww-li .ww-contact-form--compact .ww-title {
	font-family: var(--ww-font-display);
	font-size: 48px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--ww-color-dark);
}

.ww-li .ww-contact-form--compact .ww-title strong,
.ww-li .ww-contact-form--compact .ww-title b {
	font-weight: 600;
}

.ww-li .ww-contact-form--compact .ww-form__grid {
	gap: 12px;
}

/* Zone de texte : 694 × 225 px, fond gris clair, angles arrondis. */
.ww-li .ww-contact-form--compact textarea {
	min-height: 225px;
	padding: 18px 22px;
	background: var(--ww-color-border);
	border: 0;
	border-radius: 8px;
	font-size: 24px;
	line-height: 1.4;
}

/*
 * E-mail : une simple ligne soulignée. La règle générique des champs du
 * thème parent (input:not(...)) est plus spécifique que celle du bloc :
 * on la surpasse ici pour retirer le cadre et le fond.
 */
.ww-li .ww-contact-form--compact .ww-form__field--underline input[type="email"] {
	width: 100%;
	padding: 10px 4px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ww-color-muted);
	border-radius: 0;
	box-shadow: none;
	font-size: 30px;
	line-height: 1.3;
	color: var(--ww-color-dark);
	text-align: center;
}

.ww-li .ww-contact-form--compact .ww-form__field--underline input[type="email"]:focus {
	border-bottom-color: var(--ww-color-dark);
	box-shadow: none;
}

.ww-li .ww-contact-form--compact .ww-form__consent label {
	font-size: 16px;
	line-height: 1.4;
	color: var(--ww-color-dark);
	text-align: left;
}

.ww-li .ww-contact-form--compact .ww-form__consent input {
	width: 18px;
	height: 18px;
	margin-top: 0.15em;
	accent-color: var(--ww-color-ink, var(--ww-color-dark));
}

.ww-li .ww-contact-form--compact .ww-form__actions {
	margin-top: 32px;
}

.ww-li .ww-contact-form--compact .ww-form__privacy-toggle {
	font-size: 16px;
}

.ww-li .ww-contact-form--compact .ww-form__info {
	width: 20px;
	height: 20px;
	font-size: 12px;
}

.ww-li .ww-contact-form--compact .ww-form__submit {
	min-width: 137px;
	padding: 11px 34px;
	border-radius: 6px;
	background: var(--ww-color-border);
	color: var(--ww-color-dark);
	font-size: 20px;
	letter-spacing: 0.08em;
}

.ww-li .ww-contact-form--compact .ww-form__privacy {
	font-size: 16px;
}

.ww-li .ww-form__phone {
	gap: 6px;
	margin-top: 110px;
}

.ww-li .ww-form__phone-label {
	font-size: 28px;
}

.ww-li .ww-form__phone-number {
	font-size: 38px;
	font-weight: 700;
}

/* Tablette ----------------------------------------------------------------- */

/*
 * Sous 1025 px, les tailles fixes de la maquette se réduisent progressivement ;
 * les trois étapes (et les trois cartes « Good news ») restent sur une ligne au
 * lieu de la grille automatique du parent, qui isolait la troisième carte.
 */
@media (max-width: 1024px) {
	.ww-li-split-head .ww-subtitle,
	.ww-li #help .ww-heading .ww-subtitle {
		font-size: clamp(1.25rem, 2.6vw, 27px);
	}

	.ww-li .ww-contact-form--compact .ww-title {
		font-size: clamp(1.75rem, 4.7vw, 48px);
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.ww-li .ww-cards--plain .ww-grid {
		grid-template-columns: repeat(var(--ww-cols, 3), minmax(0, 1fr));
	}

	.ww-li .ww-cards--plain .ww-card__title {
		font-size: 30px;
	}

	.ww-li .ww-cards--plain .ww-card__text {
		font-size: 20px;
	}
}

/* Mobile ------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* Bouton pleine largeur. */
	.ww-li-cta.ww-btn,
	.ww-li-cta .ww-btn,
	.ww-li .ww-cards + .ww-button .ww-btn {
		width: 100%;
		min-width: 0;
		min-height: 78px;
		font-size: 26px;
	}

	/*
	 * Sur téléphone, l'écart de la maquette d'ordinateur (156 px, écrit en
	 * ligne par le bloc) laisse un trou : on le ramène à une respiration.
	 */
	.ww-li .ww-button + .ww-li-pictos {
		margin-top: 72px !important;
		padding-top: 44px;
	}

	.ww-li .ww-cards--plain .ww-card__title {
		font-size: 30px;
	}

	.ww-li .ww-cards--plain .ww-card__text {
		font-size: 20px;
	}

	.ww-li .ww-text-image__text {
		font-size: 20px;
	}

	/* « Good news » : titre puis paragraphe. */
	.ww-li-split-head .ww-section-head,
	.ww-li #help .ww-heading .ww-section-head {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.ww-li-split-head .ww-title,
	.ww-li #help .ww-heading .ww-title {
		font-size: clamp(2.25rem, 10vw, 3rem);
	}

	.ww-li-split-head .ww-subtitle,
	.ww-li #help .ww-heading .ww-subtitle {
		padding-top: 0;
		font-size: 20px;
	}

	.ww-li #help .ww-heading + .ww-cards {
		margin-top: 40px;
	}

	/* Formulaire : icône à gauche du titre, sur la même ligne. */
	.ww-li .ww-contact-form--compact {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 16px;
		text-align: left;
	}

	.ww-li .ww-contact-form--compact .ww-form__icon {
		flex: none;
		margin: 0 0 28px;
	}

	.ww-li .ww-contact-form--compact .ww-form__icon .ww-icon {
		width: 48px;
		height: 48px;
	}

	/*
	 * Le logo complet est trop large pour côtoyer le titre : il prend sa
	 * propre ligne, le titre reprend toute la largeur en dessous.
	 */
	.ww-li .ww-contact-form--compact .ww-form__icon:has(.ww-icon--listen-in-lockup) {
		flex-basis: 100%;
	}

	.ww-li .ww-contact-form--compact .ww-form__icon .ww-icon--listen-in-lockup {
		width: min(220px, 60%);
		height: auto;
	}

	.ww-li .ww-contact-form--compact textarea {
		min-height: 150px;
	}

	.ww-li .ww-contact-form--compact .ww-section-head {
		flex: 1 1 0;
		min-width: 0;
		margin: 0 0 28px;
		text-align: left;
	}

	.ww-li .ww-contact-form--compact .ww-title {
		font-size: 26px;
		line-height: 1.2;
	}

	/*
	 * Les retours forcés du titre sont retirés du flux : le titre se réenroule
	 * dans la colonne (display: none est compris par tous les navigateurs,
	 * Firefox ignorant « content » sur <br>). L'espace placé avant chaque <br>
	 * par le générateur sépare les mots.
	 */
	.ww-li .ww-contact-form--compact .ww-title br {
		display: none;
		content: "";
	}

	/* Cible tactile : au moins 44 px de haut. */
	.ww-li .ww-contact-form--compact .ww-form__privacy-toggle {
		min-height: 44px;
		padding-block: 9px;
	}

	.ww-li .ww-contact-form--compact .ww-form,
	.ww-li .ww-contact-form--compact .ww-form__notice,
	.ww-li .ww-contact-form--compact .ww-form__phone {
		flex: 0 0 100%;
		width: 100%;
	}

	.ww-li .ww-contact-form--compact .ww-form__phone {
		align-items: center;
		margin-top: 32px;
	}

	.ww-li .ww-contact-form--compact textarea {
		font-size: 20px;
	}

	.ww-li .ww-contact-form--compact .ww-form__field--underline input[type="email"] {
		font-size: 20px;
	}

	.ww-li .ww-form__phone-label {
		font-size: 20px;
	}

	.ww-li .ww-form__phone-number {
		font-size: 28px;
	}
}