/**
 * « Moselle TV c'est vous » — feuille de style publique.
 *
 * Conforme à la Charte Graphique Moselle TV V1.0 :
 *   — typographie Helvetica LT Pro (Bold titres, Roman sous-titres, Light textes) ;
 *   — bleu #1f00a3 et blanc en couleurs principales ;
 *   — magenta #fc286f et orange #fe891b en secondaires ;
 *   — dégradé magenta→orange aux emplacements 0/15/43/100 %.
 *
 * Les valeurs réelles arrivent en variables CSS injectées par le plugin ;
 * celles écrites ici ne servent que de repli si l'injection échoue.
 *
 * Mobile-first : le visiteur type arrive du QR code affiché en fin de journal,
 * sur un téléphone, souvent en 4G.
 *
 * Compatibilité visée : téléphones de 320 px de large (iPhone SE, vieux
 * Android) jusqu'aux écrans de bureau, en portrait comme en paysage, y
 * compris sur les Safari anciens qui ignorent « gap » en flexbox et
 * « aspect-ratio ». Les replis sont écrits explicitement plus bas.
 *
 * Même logique pour le raccourci « inset », arrivé avec Safari 14.1 : les
 * quatre décalages sont toujours écrits en toutes lettres juste avant, si
 * bien qu'un iPad resté en iOS 13 place correctement les éléments qui en
 * dépendent (le filet du bandeau, la zone de dépôt de fichiers). Les
 * navigateurs récents lisent les deux et gardent la dernière déclaration.
 */

.mtv-cv {
	--mtv-font: "Helvetica LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--mtv-brand: #1f00a3;
	--mtv-brand-rgb: 31, 0, 163;
	--mtv-accent: #fc286f;
	--mtv-accent-rgb: 252, 40, 111;
	--mtv-accent-2: #fe891b;
	--mtv-gradient: linear-gradient(180deg, #fc286f 0%, #fc286f 15%, #fe891b 43%, #fe891b 100%);
	--mtv-page: #ffffff;
	--mtv-bg: #f4f3fb;
	--mtv-surface: #ffffff;
	--mtv-border: #d5cfec;
	--mtv-text: #14132b;
	--mtv-muted: #5c5a75;
	--mtv-input-text: #14132b;
	--mtv-radius: 14px;

	box-sizing: border-box;
	max-width: 680px;
	margin: 0 auto;
	/* Marges latérales : 16 px, sauf sur les téléphones à encoche tenus à
	   l'horizontale, où l'encoche mange le bord de l'écran. env() vaut 0 sur
	   tous les autres appareils, la valeur reste donc 16 px partout ailleurs. */
	padding: 8px max(16px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
	background: var(--mtv-page);
	color: var(--mtv-text);
	/* Empêche le mode sombre automatique d'Android et de Chrome d'inverser
	   les champs du formulaire : la page a ses propres couleurs de charte,
	   une inversion automatique casserait les contrastes vérifiés. */
	color-scheme: light;
	/* Un nom de commune ou une adresse électronique très longue ne doit pas
	   élargir la page au point de déclencher un défilement latéral. */
	overflow-wrap: break-word;
	font-family: var(--mtv-font);
	/* Roman pour le corps : la charte prévoit Light, mais à cette taille sur
	   un téléphone en extérieur, les fûts fins deviennent illisibles pour une
	   partie du public. Light est réservé aux grands textes ci-dessous. */
	font-weight: 400;
	font-size: 17px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

.mtv-cv *,
.mtv-cv *::before,
.mtv-cv *::after {
	box-sizing: inherit;
	font-family: inherit;
}

/* ==================================================================
   Fonds — section 2.2 « Motifs » de la charte
   ==================================================================
   Quatre styles au choix dans les réglages. Les motifs circulaires sont
   ancrés dans les coins, à l'écart des zones de texte courant : le cœur
   du motif est le plus opaque, on ne le laisse jamais passer derrière un
   paragraphe.
   ------------------------------------------------------------------ */

/* 1. Uni — le fond blanc de la charte, sans habillage. */
.mtv-cv[data-bg="uni"] {
	background: var(--mtv-page);
}

/* 2. Halos — deux voiles diffus, présence discrète. */
.mtv-cv[data-bg="halos"] {
	background:
		radial-gradient(70% 55% at 95% -8%, rgba(var(--mtv-accent-rgb), 0.20), transparent 68%),
		radial-gradient(65% 50% at -12% 104%, rgba(var(--mtv-accent2-rgb), 0.18), transparent 68%),
		var(--mtv-page);
}

/* 3. Cercles — les motifs circulaires de la charte, en grand format. */
.mtv-cv[data-bg="cercles"] {
	background:
		var(--mtv-motif) no-repeat right -170px top -150px / 460px 460px,
		var(--mtv-motif) no-repeat left -150px bottom -190px / 400px 400px,
		var(--mtv-page);
}

/* 4. Bleu — la mise en situation de la charte : aplat bleu, motif en bord,
      contenu posé sur des surfaces blanches. Tous les rôles s'inversent. */
.mtv-cv[data-bg="bleu"] {
	--mtv-text: #ffffff;
	--mtv-muted: #cfc9ef;
	--mtv-bg: rgba(255, 255, 255, 0.10);
	--mtv-surface: #ffffff;
	--mtv-border: rgba(255, 255, 255, 0.34);
	--mtv-input-text: #14132b;

	background:
		var(--mtv-motif) no-repeat right -190px top -170px / 520px 520px,
		var(--mtv-motif) no-repeat left -170px bottom -210px / 430px 430px,
		var(--mtv-brand);
	border-radius: var(--mtv-radius);
}

.mtv-cv[data-bg="bleu"] .mtv-cv__title,
.mtv-cv[data-bg="bleu"] .mtv-cv__subtitle,
.mtv-cv[data-bg="bleu"] .mtv-cv__done h3,
.mtv-cv[data-bg="bleu"] .mtv-cv__fieldset legend,
.mtv-cv[data-bg="bleu"] .mtv-cv__drop-label,
.mtv-cv[data-bg="bleu"] .mtv-cv__drop .mtv-cv__icon,
.mtv-cv[data-bg="bleu"] .mtv-cv__done .mtv-cv__icon,
.mtv-cv[data-bg="bleu"] .mtv-cv__back {
	color: #ffffff;
}

/* Sur fond bleu, les boutons s'inversent : blanc rempli, texte bleu. */
.mtv-cv[data-bg="bleu"] .mtv-cv__cta,
.mtv-cv[data-bg="bleu"] .mtv-cv__submit {
	background: #ffffff;
	color: var(--mtv-brand);
}

.mtv-cv[data-bg="bleu"] .mtv-cv__cta:hover,
.mtv-cv[data-bg="bleu"] .mtv-cv__submit:hover {
	filter: none;
	background: #ede9ff;
}

/* Les surfaces blanches gardent un texte foncé, sinon blanc sur blanc. */
.mtv-cv[data-bg="bleu"] .mtv-cv__field input,
.mtv-cv[data-bg="bleu"] .mtv-cv__field textarea,
.mtv-cv[data-bg="bleu"] .mtv-cv__filelist li,
.mtv-cv[data-bg="bleu"] .mtv-cv__error {
	color: var(--mtv-input-text);
}

.mtv-cv[data-bg="bleu"] .mtv-cv__error {
	background: #ffffff;
}

.mtv-cv[data-bg="bleu"] .mtv-cv__filelist .mtv-cv__fremove,
.mtv-cv[data-bg="bleu"] .mtv-cv__check a {
	color: var(--mtv-brand);
}

.mtv-cv[data-bg="bleu"] .mtv-cv__filelist .mtv-cv__fsize {
	color: #5c5a75;
}

.mtv-cv[data-bg="bleu"] .mtv-cv__check input {
	accent-color: #ffffff;
}

/* Le bandeau par défaut deviendrait invisible sur l'aplat bleu. */
.mtv-cv[data-bg="bleu"] .mtv-cv__hero--placeholder {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

@media (min-width: 700px) {
	.mtv-cv[data-bg="cercles"],
	.mtv-cv[data-bg="halos"],
	.mtv-cv[data-bg="bleu"] {
		border-radius: var(--mtv-radius);
	}
}

/* ---------- Écrans ---------- */

.mtv-cv__screen[hidden] {
	display: none;
}

.mtv-cv__screen {
	animation: mtv-cv-in 0.18s ease-out;
}

@keyframes mtv-cv-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mtv-cv__screen {
		animation: none;
	}
}

/* ---------- Accueil ---------- */

.mtv-cv__logo {
	display: block;
	max-width: 190px;
	height: auto;
	margin: 8px 0 4px;
}

.mtv-cv__title {
	margin: 12px 0 16px;
	/* text-wrap: balance répartit le titre sur des lignes de longueur
	   proche : sur un écran de 320 px, « Moselle TV c'est vous ! » ne se
	   coupe plus en laissant le point d'exclamation seul sur sa ligne. Les
	   navigateurs qui ne connaissent pas la propriété l'ignorent. */
	text-wrap: balance;
	font-size: clamp(28px, 7vw, 40px);
	/* Titres : Bold, conformément à la charte. */
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.08;
	color: var(--mtv-brand);
}

.mtv-cv__hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--mtv-radius);
	aspect-ratio: 16 / 9;
	background: var(--mtv-brand);
}

.mtv-cv__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/**
 * Repli pour les Safari antérieurs à la version 15 (iOS 14 et avant, encore
 * présents sur de vieux iPad). Sans aspect-ratio, le bandeau s'effondrerait
 * à zéro pixel de haut et la page s'ouvrirait sur un titre suivi de rien.
 * Le bourrage à 56,25 % reproduit le 16/9 avec une technique universelle.
 */
@supports not (aspect-ratio: 16 / 9) {
	.mtv-cv__hero::before {
		content: "";
		display: block;
		padding-top: 56.25%;
	}

	.mtv-cv__hero img,
	.mtv-cv__hero--placeholder span {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		inset: 0;
	}

	.mtv-cv__hero--placeholder span {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* Téléphone tenu à l'horizontale : l'écran ne fait que quelques centaines de
   pixels de haut, un bandeau 16/9 occuperait tout le premier écran et les
   boutons passeraient sous la ligne de flottaison. */
@media (orientation: landscape) and (max-height: 520px) {
	/* On abandonne le 16/9 plutôt que de plafonner la hauteur : avec
	   aspect-ratio, un max-height rétrécit aussi la largeur et le bandeau
	   se retrouve décentré au milieu d'un vide. Une hauteur fixe et un
	   recadrage par object-fit gardent le bandeau pleine largeur. */
	.mtv-cv__hero {
		aspect-ratio: auto;
		height: 46vh;
	}

	.mtv-cv__logo {
		max-width: 150px;
	}

	.mtv-cv__title {
		margin: 8px 0 12px;
	}

	.mtv-cv__baseline {
		margin: 14px 2px 16px;
	}
}

/**
 * À défaut de visuel : fond bleu de charte, et le dégradé en filet bas.
 *
 * Le dégradé plein ferait plus impact, mais du texte blanc sur sa partie
 * orange plafonne à 2,4:1 de contraste, très en dessous des 3:1 exigés même
 * pour du grand texte. Le bleu monte à 13:1 : c'est le seul choix tenable
 * pour une page que des gens liront dehors, sur un téléphone, en plein jour.
 */
.mtv-cv__hero--placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mtv-brand);
}

.mtv-cv__hero--placeholder::after {
	content: "";
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	inset: auto 0 0 0;
	height: 8px;
	background: linear-gradient(90deg, var(--mtv-accent) 0%, var(--mtv-accent) 15%, var(--mtv-accent-2) 43%, var(--mtv-accent-2) 100%);
}

.mtv-cv__hero--placeholder span {
	color: #fff;
	font-size: clamp(24px, 6vw, 40px);
	font-weight: 700;
	text-align: center;
	line-height: 1.1;
	padding: 0 16px;
}

.mtv-cv__baseline {
	margin: 18px 2px 22px;
	font-size: 19px;
	/* Grand texte : Light, comme la charte le prévoit. */
	font-weight: 300;
	color: var(--mtv-text);
}

/* ---------- Boutons d'appel ---------- */

/**
 * Empilement par marges plutôt que par « gap ».
 *
 * gap n'est arrivé en flexbox qu'avec Safari 14.5 ; sur un iPad resté en
 * iOS 13 la propriété est ignorée sans erreur et les trois gros boutons se
 * retrouvent collés les uns aux autres, donc quasi impossibles à viser au
 * doigt. La marge, elle, fonctionne depuis toujours.
 */
.mtv-cv__menu {
	display: block;
	padding: 14px;
	background: var(--mtv-bg);
	border-radius: var(--mtv-radius);
}

.mtv-cv__cta + .mtv-cv__cta {
	margin-top: 12px;
}

.mtv-cv__cta {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 68px;
	padding: 14px 16px;
	background: var(--mtv-brand);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font: inherit;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: transform 0.12s ease, filter 0.12s ease;
}

.mtv-cv__cta:hover {
	filter: brightness(1.35);
}

.mtv-cv__cta:active {
	transform: scale(0.99);
}

.mtv-cv__cta:focus-visible {
	outline: 3px solid var(--mtv-accent);
	outline-offset: 2px;
}

.mtv-cv__cta-label {
	flex: 1;
}

.mtv-cv__chevron {
	font-size: 26px;
	line-height: 1;
	opacity: 0.85;
}

.mtv-cv__icon {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	fill: currentColor;
}

/* Filet en dégradé de charte plutôt qu'un aplat. */
.mtv-cv__notice {
	position: relative;
	margin-top: 22px;
	padding: 14px 16px 14px 20px;
	background: var(--mtv-bg);
	border-radius: 0 10px 10px 0;
	font-size: 15px;
	color: var(--mtv-muted);
	overflow: hidden;
}

.mtv-cv__notice::before {
	content: "";
	position: absolute;
	top: 0;
	right: auto;
	bottom: 0;
	left: 0;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--mtv-gradient);
}

.mtv-cv__notice strong {
	color: var(--mtv-text);
	font-weight: 700;
}

/* ---------- Écrans de formulaire ---------- */

.mtv-cv__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: 8px 0 12px;
	padding: 8px 14px 8px 10px;
	background: none;
	border: 1px solid var(--mtv-border);
	border-radius: 999px;
	color: var(--mtv-brand);
	font: inherit;
	font-size: 15px;
	font-weight: 400;
	cursor: pointer;
}

.mtv-cv__back .mtv-cv__icon {
	width: 18px;
	height: 18px;
}

.mtv-cv__subtitle {
	margin: 4px 0 8px;
	text-wrap: balance;
	font-size: clamp(22px, 5.5vw, 30px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--mtv-brand);
}

.mtv-cv__intro {
	margin: 0 0 22px;
	font-weight: 300;
	font-size: 18px;
	color: var(--mtv-text);
}

/* ---------- Champs ---------- */

.mtv-cv__field {
	margin-bottom: 16px;
	flex: 1 1 200px;
}

.mtv-cv__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 14px;
}

.mtv-cv__field label {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--mtv-text);
}

.mtv-cv__field input,
.mtv-cv__field textarea {
	/* -webkit-appearance : sans cette remise à zéro, iOS impose sa propre
	   décoration aux champs date et téléphone, qui n'ont alors ni la même
	   hauteur ni les mêmes coins que les autres — une ligne « Commune /
	   Date » visiblement de travers sur iPhone. */
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	background: var(--mtv-surface);
	border: 1px solid var(--mtv-border);
	border-radius: 10px;
	color: var(--mtv-text);
	font: inherit;
	font-weight: 400;
	/* 16px minimum : évite le zoom automatique sur iOS. */
	font-size: 16px;
}

.mtv-cv__field textarea {
	min-height: 120px;
	resize: vertical;
}

.mtv-cv__field input:focus,
.mtv-cv__field textarea:focus {
	outline: 2px solid var(--mtv-accent);
	outline-offset: 1px;
	border-color: transparent;
}

.mtv-cv__field input[aria-invalid="true"],
.mtv-cv__field textarea[aria-invalid="true"] {
	border-color: var(--mtv-accent);
}

.mtv-cv__fieldset {
	margin: 26px 0 20px;
	padding: 16px 16px 4px;
	border: 1px solid var(--mtv-border);
	border-radius: var(--mtv-radius);
}

.mtv-cv__fieldset legend {
	padding: 0 8px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mtv-brand);
}

.mtv-cv__hint {
	margin: -6px 0 12px;
	font-size: 14px;
	font-weight: 300;
	color: var(--mtv-muted);
}

/* ---------- Dépôt de fichiers ---------- */

.mtv-cv__drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 30px 18px;
	margin-bottom: 14px;
	border: 2px dashed var(--mtv-border);
	border-radius: var(--mtv-radius);
	background: var(--mtv-bg);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.mtv-cv__drop.is-over {
	border-color: var(--mtv-accent);
	background: var(--mtv-surface);
}

.mtv-cv__drop .mtv-cv__icon {
	width: 34px;
	height: 34px;
	color: var(--mtv-brand);
}

.mtv-cv__drop-label {
	margin: 0;
	font-weight: 700;
	color: var(--mtv-brand);
}

.mtv-cv__drop-hint {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	color: var(--mtv-muted);
}

.mtv-cv__file-input {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.mtv-cv__filelist {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.mtv-cv__filelist li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	margin-bottom: 8px;
	background: var(--mtv-surface);
	border: 1px solid var(--mtv-border);
	border-radius: 10px;
	font-size: 15px;
}

/* Aperçu du fichier choisi, produit dans le navigateur. */
.mtv-cv__filelist .mtv-cv__fthumb {
	width: 56px;
	height: 40px;
	object-fit: cover;
	border-radius: 6px;
	flex: 0 0 auto;
	background: var(--mtv-bg);
}

/**
 * Nom et poids empilés dans une colonne qui accepte de rétrécir.
 *
 * min-width: 0 est indispensable : la largeur minimale par défaut d'un
 * élément flexible est celle de son contenu, donc un nom de fichier de
 * caméscope refusait de se réduire et poussait la croix de suppression
 * hors de l'écran — sur un écran de 320 px, la ligne réclamait 378 px et
 * toute la page se mettait à défiler latéralement.
 */
.mtv-cv__filelist .mtv-cv__fmeta {
	flex: 1 1 auto;
	min-width: 0;
}

.mtv-cv__filelist .mtv-cv__fname {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Le poids tient sur une ligne, mais un refus (« Fichier trop volumineux
   (612 Mo) ») est une phrase : elle doit pouvoir passer à la ligne. */
.mtv-cv__filelist .mtv-cv__fsize {
	display: block;
	color: var(--mtv-muted);
	font-size: 14px;
	line-height: 1.3;
}

.mtv-cv__filelist .mtv-cv__fremove {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	/* Retirer un fichier par erreur est agaçant, ne pas réussir à le retirer
	   l'est davantage : cible pleine, pas seulement la croix. */
	width: 44px;
	height: 44px;
	margin: -6px -8px -6px 0;
	background: none;
	border: 0;
	color: var(--mtv-brand);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.mtv-cv__filelist li.is-bad {
	border-color: var(--mtv-accent);
}

.mtv-cv__filelist li.is-bad .mtv-cv__fsize {
	color: var(--mtv-accent);
	font-weight: 700;
}

/* ---------- Consentements ---------- */

.mtv-cv__consents {
	/* Même raison que le menu : pas de gap flexbox. */
	display: block;
	margin: 6px 0 22px;
}

.mtv-cv__check {
	display: flex;
	align-items: flex-start;
	/* 44 px : la hauteur minimale d'une cible tactile confortable, y compris
	   quand la phrase tient sur une seule ligne sur grand écran. */
	min-height: 44px;
	padding: 4px 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--mtv-muted);
	cursor: pointer;
}

.mtv-cv__check + .mtv-cv__check {
	margin-top: 10px;
}

.mtv-cv__check input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 1px 12px 0 0;
	accent-color: var(--mtv-brand);
}

/* Lien de confidentialité : sorti des étiquettes de case à cocher, où un clic
   dessus cochait la case en plus d'ouvrir le lien. Il a sa propre cible. */
.mtv-cv__consents a,
.mtv-cv__privacy a {
	color: var(--mtv-brand);
	text-decoration: underline;
}

.mtv-cv__privacy {
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: 400;
	color: var(--mtv-muted);
}

/* La cible, c'est le lien lui-même : une ligne de texte de 23 px de haut se
   rate une fois sur trois au pouce, sur un écran tenu d'une main. */
.mtv-cv__privacy a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-right: 4px;
}

.mtv-cv__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Progression & envoi ---------- */

.mtv-cv__progress[hidden] {
	display: none;
}

.mtv-cv__progress {
	margin-bottom: 16px;
}

.mtv-cv__progress-bar {
	height: 10px;
	border-radius: 999px;
	background: var(--mtv-bg);
	border: 1px solid var(--mtv-border);
	overflow: hidden;
}

/* Le dégradé de charte est vertical : on le tourne pour la barre. */
.mtv-cv__progress-bar span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--mtv-accent) 0%, var(--mtv-accent) 15%, var(--mtv-accent-2) 43%, var(--mtv-accent-2) 100%);
	transition: width 0.2s ease;
}

.mtv-cv__progress-text {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--mtv-muted);
}

.mtv-cv__error[hidden] {
	display: none;
}

.mtv-cv__error {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 10px;
	background: rgba(var(--mtv-accent-rgb), 0.08);
	border: 1px solid var(--mtv-accent);
	color: var(--mtv-text);
	font-size: 15px;
	font-weight: 400;
}

.mtv-cv__submit {
	display: block;
	width: 100%;
	min-height: 56px;
	padding: 16px;
	background: var(--mtv-brand);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
}

.mtv-cv__submit:hover {
	filter: brightness(1.35);
}

.mtv-cv__submit:disabled {
	opacity: 0.55;
	cursor: progress;
}

.mtv-cv__submit:focus-visible {
	outline: 3px solid var(--mtv-accent);
	outline-offset: 2px;
}

/* ---------- Confirmation ---------- */

.mtv-cv__done[hidden] {
	display: none;
}

.mtv-cv__done {
	text-align: center;
	padding: 36px 20px;
	background: var(--mtv-bg);
	border-radius: var(--mtv-radius);
}

.mtv-cv__done .mtv-cv__icon {
	width: 52px;
	height: 52px;
	color: var(--mtv-brand);
}

.mtv-cv__done h3 {
	margin: 12px 0 8px;
	font-size: 24px;
	font-weight: 700;
	color: var(--mtv-brand);
}

.mtv-cv__done p {
	margin: 0 0 20px;
	font-weight: 300;
	font-size: 18px;
	color: var(--mtv-text);
}

/* ---------- Écrans larges ---------- */

/* Tablette en portrait et au-delà : la colonne reste unique, seulement plus
   aérée. Une largeur de lecture de 680 px est déjà la bonne pour un
   formulaire — l'élargir ferait des lignes trop longues à suivre. */
@media (min-width: 700px) {
	.mtv-cv {
		padding: 24px max(24px, env(safe-area-inset-right)) 64px max(24px, env(safe-area-inset-left));
	}

	.mtv-cv__menu {
		padding: 20px;
	}
}

/**
 * Ordinateur et tablette en paysage : deux colonnes sur l'accueil.
 *
 * En une seule colonne sur un écran de bureau, le bandeau 16/9 occupe la
 * moitié de la hauteur et les trois boutons tombent sous la ligne de
 * flottaison : le visiteur voit une image et doit deviner qu'il faut faire
 * défiler. Côte à côte, l'image et les trois actions tiennent ensemble dans
 * le premier écran. Les écrans de formulaire, eux, gardent la colonne
 * unique, centrée : un formulaire en deux colonnes se remplit moins bien.
 */
@media (min-width: 1000px) {
	.mtv-cv {
		max-width: 1000px;
	}

	.mtv-cv__screen {
		max-width: 680px;
		margin: 0 auto;
	}

	/* Placement par zones nommées, et non par numéros de ligne : le logo est
	   facultatif dans les réglages, une numérotation se décalerait d'un cran
	   dès qu'il est absent. */
	.mtv-cv__screen--home {
		max-width: none;
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		grid-template-areas:
			"logo   logo"
			"titre  titre"
			"visuel accroche"
			"visuel menu"
			"avert  avert";
		column-gap: 40px;
		align-items: start;
	}

	.mtv-cv__screen--home > .mtv-cv__logo {
		grid-area: logo;
	}

	.mtv-cv__screen--home > .mtv-cv__title {
		grid-area: titre;
	}

	.mtv-cv__screen--home > .mtv-cv__hero {
		grid-area: visuel;
	}

	.mtv-cv__screen--home > .mtv-cv__baseline {
		grid-area: accroche;
		margin-top: 0;
	}

	.mtv-cv__screen--home > .mtv-cv__menu {
		grid-area: menu;
	}

	.mtv-cv__screen--home > .mtv-cv__notice {
		grid-area: avert;
	}

	.mtv-cv__title {
		font-size: 44px;
	}
}

/* Repli pour les navigateurs sans grille CSS : tout retombe en pile, comme
   sur téléphone. Rien ne casse, la page est simplement plus haute. */
@supports not (display: grid) {
	.mtv-cv__screen--home {
		display: block;
	}
}

/* ---------- Impression ---------- */

@media print {
	.mtv-cv__menu,
	.mtv-cv__drop,
	.mtv-cv__submit {
		display: none;
	}
}