/*
 * Site www.ericzemmour.fr — version Minitel (3615 ZEMMOUR, adresses /3615 et /3615/{écran}).
 * Chargé seulement par minitel.twig, avec assets/js/minitel.js et assets/js/minitel-service.js.
 *
 * Un Minitel des années 80 repeint aux couleurs de la charte : boîtier violet, écran bombé, clavier encre
 * rabattable (vraie 3D CSS : il tombe sur sa charnière à l'arrivée), touches de fonction corail et blanches
 * qui s'enfoncent, étiquettes Dymo turquoise collées dessus. Toutes les mesures du Minitel sont en cqw
 * (largeur de .mt-poste) : il se dessine pareil à 375 px et à 1920 px, et sa largeur se calcule sur la hauteur de
 * l'écran pour qu'il y tienne en entier. Deux claviers selon sa largeur : étroit (téléphone : touches de fonction sur
 * deux rangées au-dessus d'un AZERTY de 5 rangées, assez grand pour le doigt), large (bloc 2 × 4 à droite, comme le
 * Minitel 1).
 * Mouvement : transform et opacity seulement, jamais d'opacité sur un parent d'éléments en 3D (le couvercle
 * deviendrait translucide) ; sans .ez-js (mouvements réduits), tout est posé, immobile.
 * Couleurs : les 6 de la charte, ombres et reflets en transparences de ces couleurs.
 */

/* ---------- Polices et jetons de la charte (repris de ez.css : cette page ne charge pas le reste du site) ---------- */
@font-face { font-family: "Digitalt"; src: url("../fonts/digitalt.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Futura EZ"; src: url("../fonts/futura-light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Futura EZ"; src: url("../fonts/futura-book.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Futura EZ"; src: url("../fonts/futura-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
:root {
	--ez-violet: #5B3E90; --ez-corail: #EE7C6F; --ez-blanc: #FFFFFF; --ez-encre: #2B2D6D; --ez-nuit: #1E1E3E; --ez-turquoise: #45D5DE;
	--ez-f-titre: "Digitalt", "Arial Black", "Helvetica Neue", sans-serif;
	--ez-f-texte: "Futura EZ", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
	--ez-courbe: cubic-bezier(0.22, 1, 0.36, 1);
	--mt-barre: 48px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; background: var(--ez-nuit); color: var(--ez-blanc); overflow-x: hidden;
	font-family: var(--ez-f-texte); font-weight: 400; font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--ez-turquoise); outline-offset: 3px; }
.mt-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-evitement:focus { z-index: 100; left: 16px; top: 8px; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--ez-blanc); color: var(--ez-violet); }

/* ---------- Barre du haut : la sortie vers le site normal est toujours là ---------- */
.mt-barre {
	position: fixed; z-index: 50; left: 0; right: 0; top: 0; height: var(--mt-barre); padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
	display: flex; align-items: center; gap: 14px; background: var(--ez-nuit); border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.mt-barre__logo { display: block; flex: none; }
.mt-barre__logo img { width: auto; height: 34px; }
.mt-barre__service { flex: 1 1 auto; min-width: 0; font-size: 0.75rem; font-weight: 300; text-transform: uppercase; letter-spacing: 0.2em; white-space: nowrap; overflow: hidden; }
.mt-barre__code { display: inline-block; padding: 4px 7px 2px; margin-right: 6px; background: var(--ez-corail); color: var(--ez-encre); font-weight: 700; letter-spacing: 0.12em; }
.mt-quitter {
	flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 2px solid var(--ez-corail); border-radius: 2px;
	color: var(--ez-blanc); text-decoration: none; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.mt-quitter:hover { background: var(--ez-corail); color: var(--ez-encre); }
@media (max-width: 560px) { .mt-barre__service { letter-spacing: 0.12em; } }
@media (max-width: 479px) { .mt-barre__service { display: none; } .mt-barre { justify-content: space-between; } }

/* ---------- Scène : ciel vidéotex (canevas), rideau de chargement ligne à ligne ---------- */
.mt-page { background: var(--ez-nuit); }
.mt-scene {
	position: relative; isolation: isolate; overflow: hidden; overflow: clip; display: grid; place-items: center;
	min-height: 100vh; min-height: 100svh; padding: calc(var(--mt-barre) + 10px) 0 calc(14px + env(safe-area-inset-bottom, 0px));
	background: var(--ez-nuit) linear-gradient(180deg, var(--ez-nuit) 0%, var(--ez-encre) 62%, var(--ez-violet) 100%);
	color: var(--ez-blanc);
}
.mt-ciel { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
/* Rideau : la page, Minitel compris, « arrive » rangée par rangée, comme une page vidéotex à 1 200 bauds */
.mt-rideau { display: none; }
.ez-js .mt-rideau {
	display: block; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 100%; background: var(--ez-nuit);
	pointer-events: none; animation: mt-rideau 900ms steps(16, end) both;
}
@keyframes mt-rideau { from { transform: translateY(0); } to { transform: translateY(101%); visibility: hidden; } }

/* ---------- Poste : conteneur du Minitel (toutes les mesures internes en cqw) ---------- */
/* Largeur calée sur la hauteur disponible pour que tout le Minitel, clavier compris, tienne dans l'écran. Hauteur
   visible mesurée / largeur : 1,745 en disposition étroite (< 440 px : téléphone), 1,348 en disposition large (diviseurs
   arrondis par sécurité). La disposition large demande 440 px au moins, donc 712 px de hauteur d'écran ; un ordinateur dont
   la fenêtre est plus basse garde 440 px (l'écran reste lisible, le bas du clavier passe sous le pli), un téléphone à plat
   reprend la disposition étroite. Jamais moins de 280 px de large. */
.mt-poste {
	--mt-dispo: calc(100svh - var(--mt-barre) - 24px - env(safe-area-inset-bottom, 0px));
	position: relative; z-index: 2; container-type: inline-size; justify-self: center;
	width: max(min(100%, 280px), min(100%, 439px, calc(var(--mt-dispo) / 1.78)));
}
@media (min-width: 480px) and (min-height: 712px) {
	.mt-poste { width: min(100%, 900px, max(440px, calc(var(--mt-dispo) / 1.4))); }
}
@media (min-width: 900px) and (max-height: 711px) {
	.mt-poste { width: 440px; }
}

.mt-minitel {
	--mt-face-h: 81cqw;        /* hauteur de la face du boîtier = dessous du clavier rabattu */
	--mt-pente: 26deg;         /* inclinaison du clavier ouvert vers le visiteur */
	--mt-jupe: 0.9cqw;         /* course des touches */
	position: relative;
	-webkit-user-select: none; user-select: none;
}
@container (min-width: 440px) {
	.mt-minitel { --mt-pente: 28deg; --mt-jupe: 0.7cqw; }
	.mt-clavier { margin-bottom: -3.5cqw; }
}

/* Arrivée : le Minitel est là, clavier rabattu sur l'écran ; puis le clavier tombe sur sa charnière (minitel-service.js
   pose les classes est-ferme, est-ouvert, est-pose). Sans script, le clavier tombe tout seul au bout de 2,5 s. */

/* ---------- Boîtier ---------- */
/* Contexte d'empilement propre : le trait d'allumage de l'écran ne passe jamais devant le clavier rabattu */
.mt-boitier { position: relative; z-index: 0; }
/* Dessus, vu en fuite : un rectangle couché en perspective (arrondis gardés), ouïes d'aération */
.mt-boitier__dessus {
	position: relative; height: 9cqw; margin: -4cqw 1.5cqw 0; border-radius: 3cqw 3cqw 0 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.24)), var(--ez-violet);
	transform: perspective(60cqw) rotateX(58deg); transform-origin: 50% 100%;
}
.mt-ouies {
	position: absolute; left: 22%; right: 22%; top: 30%; height: 34%; border-radius: 1cqw;
	background: repeating-linear-gradient(90deg, rgba(30, 30, 62, 0.75) 0 0.7cqw, transparent 0.7cqw 2.1cqw);
}
.mt-boitier__face {
	position: relative; height: var(--mt-face-h); padding: 4.6cqw 8cqw 0;
	border-radius: 1.6cqw 1.6cqw 2.2cqw 2.2cqw;
	background:
		radial-gradient(140% 60% at 50% 0%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 60%),
		linear-gradient(180deg, rgba(30, 30, 62, 0) 55%, rgba(30, 30, 62, 0.22)),
		var(--ez-violet);
	box-shadow:
		inset 0 0.5cqw 0 rgba(255, 255, 255, 0.22),
		inset 0.5cqw 0 0 rgba(255, 255, 255, 0.07),
		inset -0.5cqw 0 0 rgba(30, 30, 62, 0.22),
		inset 0 -0.9cqw 0 rgba(30, 30, 62, 0.3),
		0 4cqw 7cqw -3cqw rgba(30, 30, 62, 0.85);
}

/* ---------- Écran : cuvette sombre, tube bombé, image vidéotex ---------- */
.mt-ecran {
	position: relative; padding: 2.6cqw; border-radius: 5cqw / 5.6cqw;
	background: linear-gradient(180deg, rgba(30, 30, 62, 1) 0%, rgba(43, 45, 109, 1) 100%);
	box-shadow:
		0 -0.45cqw 0 rgba(30, 30, 62, 0.45),
		0 0.5cqw 0 rgba(255, 255, 255, 0.16),
		inset 0 1.2cqw 1.6cqw rgba(30, 30, 62, 0.9);
}
.mt-ecran__tube {
	position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4.4cqw / 5cqw;
	background: var(--ez-nuit);
	box-shadow: 0 0 0 0.35cqw rgba(30, 30, 62, 1);
}
.mt-ecran__image {
	position: absolute; left: 4.6%; top: 50%; width: 90.8%; height: auto; aspect-ratio: 320 / 250;
	transform: translateY(-50%); transform-origin: 50% 0;
	opacity: 0;
}
.a-ecran .mt-ecran__image { opacity: 1; }
/* Allumage du tube : un trait blanc s'ouvre en image */
.mt-ecran__tube::before {
	content: ""; position: absolute; z-index: 2; left: 4%; right: 4%; top: 50%; height: 0.8cqw; margin-top: -0.4cqw;
	background: var(--ez-blanc); opacity: 0; pointer-events: none;
}
.ez-js .est-allumage .mt-ecran__tube::before { animation: mt-trait 520ms ease-out both; }
.ez-js .est-allumage .mt-ecran__image { animation: mt-allumage 520ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@keyframes mt-trait {
	0% { opacity: 0; transform: scaleX(0.05); }
	18% { opacity: 1; transform: scaleX(1); }
	55% { opacity: 0.9; transform: scaleX(1) scaleY(1); }
	100% { opacity: 0; transform: scaleX(1) scaleY(30); }
}
@keyframes mt-allumage {
	0%, 30% { transform: translateY(-50%) scaleY(0.01); }
	100% { transform: translateY(-50%) scaleY(1); }
}
.ez-js .est-allumage .mt-ecran__image { transform-origin: 50% 50%; }
/* Verre bombé : vignetage des bords, reflet de fenêtre en biais, point de lumière */
.mt-ecran__reflet {
	position: absolute; z-index: 3; inset: 0; border-radius: inherit; pointer-events: none;
	background:
		linear-gradient(162deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 26%, rgba(255, 255, 255, 0) 26.5%),
		radial-gradient(42% 26% at 24% 14%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 100%),
		radial-gradient(120% 105% at 50% 46%, rgba(30, 30, 62, 0) 58%, rgba(30, 30, 62, 0.55) 86%, rgba(30, 30, 62, 0.9) 100%);
	box-shadow: inset 0 0 2cqw rgba(30, 30, 62, 0.65);
}
/* Texte de l'écran : affiché sans script (repli, liens compris), puis réservé aux lecteurs d'écran quand le canevas dessine */
.mt-ecran__texte {
	position: absolute; inset: 8% 8%; overflow: auto; font-size: 3.2cqw; line-height: 1.35; color: var(--ez-blanc);
}
.mt-ecran__texte p, .mt-ecran__texte ul, .mt-ecran__texte h2 { margin: 0 0 0.6em; }
.mt-ecran__texte ul { list-style: none; padding-left: 0; }
.mt-ecran__texte h2 { font-size: 1em; color: var(--ez-turquoise); }
.mt-ecran__texte a, .mt-ecran__texte button { color: var(--ez-turquoise); font: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.mt-ecran__service { margin: 0 0 0.5em; font-family: var(--ez-f-titre); font-weight: 400; font-size: 5cqw; color: var(--ez-corail); }
.a-ecran .mt-ecran__texte, .mt-minitel.est-ferme .mt-ecran__texte {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Bandeau du bas : marque, plaque, voyant, interrupteur du son ---------- */
.mt-boitier__bas {
	position: absolute; left: 8cqw; right: 8cqw; bottom: 0; height: 12.4cqw;
	display: flex; align-items: center; gap: 3cqw;
}
.mt-marque { width: auto; height: 7.4cqw; flex: none; }
.mt-plaque {
	flex: 1 1 auto; min-width: 0; padding-top: 0.3cqw;
	font-weight: 300; font-size: 1.85cqw; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; overflow: hidden;
	color: rgba(255, 255, 255, 0.62);
}
.mt-voyant {
	flex: none; width: 2.2cqw; height: 2.2cqw; border-radius: 50%;
	background: var(--ez-nuit); box-shadow: inset 0 0.3cqw 0 rgba(255, 255, 255, 0.12), 0 0.25cqw 0 rgba(255, 255, 255, 0.14);
}
/* Voyant allumé : un calque en opacité (pas de nouvelle peinture du boîtier) */
.mt-voyant { position: relative; }
.mt-voyant::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity 200ms;
	background: var(--ez-turquoise) radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85) 0 18%, rgba(255, 255, 255, 0) 32%);
}
.est-sous-tension .mt-voyant::after { opacity: 1; }
.mt-son {
	flex: none; display: flex; align-items: center; gap: 1.6cqw; min-height: 44px; height: 11cqw; margin-right: -1.5cqw; padding: 0 1.5cqw;
	border: 0; border-radius: 1.2cqw; background: transparent; color: rgba(255, 255, 255, 0.85); cursor: pointer;
	font: 700 2cqw/1 var(--ez-f-texte); letter-spacing: 0.18em; text-transform: uppercase;
}
.mt-son:hover { color: var(--ez-blanc); }
/* Interrupteur à bascule : la palette appuyée côté « coupé » ou côté « son » */
.mt-son__bascule {
	position: relative; width: 6.4cqw; height: 4.2cqw; border-radius: 0.9cqw; background: var(--ez-nuit);
	box-shadow: inset 0 0.4cqw 0.6cqw rgba(30, 30, 62, 0.9), 0 0.3cqw 0 rgba(255, 255, 255, 0.15);
}
.mt-son__bascule::before {
	content: ""; position: absolute; top: 0.5cqw; bottom: 0.5cqw; left: 0.5cqw; width: 2.8cqw; border-radius: 0.6cqw;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 70%), var(--ez-violet);
	transition: transform 160ms var(--ez-courbe), background-color 160ms;
}
.mt-son[aria-pressed="true"] .mt-son__bascule::before { transform: translateX(2.6cqw); background-color: var(--ez-turquoise); }

/* ---------- Clavier rabattable ---------- */
/* Marge basse négative : le clavier couché est plus court que sa boîte, on rend la place (pas de vide sous le Minitel) */
.mt-clavier {
	position: relative; z-index: 1; margin: 0 2.4cqw -9cqw;
	transform-origin: 50% 0; transform: perspective(620cqw) rotateX(var(--mt-pente)); transform-style: preserve-3d;
	will-change: transform; /* peint une fois, à l'échelle 1 : pas de nouvelle peinture coûteuse à la fin de la chute */
}
.ez-js .mt-minitel:not(.est-ferme):not(.est-ouvert) .mt-clavier { animation: mt-tombe 1150ms 2.5s both; }
.ez-js .mt-minitel.est-ferme .mt-clavier { transform: perspective(240cqw) rotateX(180deg); }
.ez-js .mt-minitel.est-ouvert .mt-clavier { animation: mt-tombe 1150ms both; }
.ez-js .mt-minitel.est-pose .mt-clavier { animation: none; transform: perspective(620cqw) rotateX(var(--mt-pente)); }
/* Chute sur la charnière : accélère (pesanteur) en venant vers le visiteur (perspective forte), touche la table,
   rebondit un peu, se pose (perspective douce, celle du clavier au repos) */
@keyframes mt-tombe {
	0% { transform: perspective(240cqw) rotateX(180deg); animation-timing-function: cubic-bezier(0.5, 0, 0.92, 0.45); }
	64% { transform: perspective(430cqw) rotateX(var(--mt-pente)); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
	80% { transform: perspective(540cqw) rotateX(calc(var(--mt-pente) + 10deg)); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.6); }
	92% { transform: perspective(610cqw) rotateX(var(--mt-pente)); animation-timing-function: ease-out; }
	96% { transform: perspective(620cqw) rotateX(calc(var(--mt-pente) + 2deg)); }
	100% { transform: perspective(620cqw) rotateX(var(--mt-pente)); }
}
.mt-clavier__face, .mt-clavier__dos { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* Plateau encre au grain fin ; l'épaisseur du clavier en dessous (bord avant). Étroit : 10 colonnes (celles de l'AZERTY),
   deux rangées de touches de fonction au-dessus des 5 rangées de lettres. */
.mt-clavier__face {
	--mt-ecart: 1.3cqw;
	position: relative; height: 92cqw; padding: 2.4cqw 2.4cqw 2.8cqw;
	display: grid; gap: var(--mt-ecart);
	grid-template-columns: repeat(10, minmax(0, 1fr));
	grid-template-rows: 10.6cqw 10.6cqw minmax(0, 1fr);
	grid-template-areas:
		"somm somm guid guid repe repe annu annu corr corr"
		"cnx  cnx  cnx  reto reto suite suite envoi envoi envoi"
		"lettres lettres lettres lettres lettres lettres lettres lettres lettres lettres";
	border-radius: 0.8cqw 0.8cqw 2.6cqw 2.6cqw;
	/* Grain du plastique : une petite texture répétée (bien moins coûteuse à peindre que des milliers de dégradés) */
	background:
		url("../img/minitel/grain.png") 0 0 / 48px 48px,
		linear-gradient(180deg, rgba(30, 30, 62, 0.4), rgba(30, 30, 62, 0) 14%, rgba(255, 255, 255, 0.05)),
		var(--ez-encre);
	box-shadow: inset 0 0.35cqw 0 rgba(255, 255, 255, 0.12), inset 0 -0.3cqw 0 rgba(30, 30, 62, 0.4), 0 2.4cqw 0 var(--ez-nuit);
}
.mt-clavier__dos {
	position: absolute; left: 0; right: 0; top: 0; height: var(--mt-face-h);
	display: grid; place-items: center; align-content: center; gap: 4cqw;
	border-radius: 0.8cqw 0.8cqw 2.6cqw 2.6cqw; transform: rotateX(180deg);
	background:
		radial-gradient(130% 70% at 50% 100%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 60%),
		linear-gradient(0deg, rgba(30, 30, 62, 0) 50%, rgba(30, 30, 62, 0.25)),
		var(--ez-violet);
	box-shadow: inset 0 -0.5cqw 0 rgba(255, 255, 255, 0.2), inset 0 0.6cqw 0 rgba(30, 30, 62, 0.3);
}
.mt-clavier__dos img { width: 30cqw; height: auto; }
/* Dessous du clavier : encoche pour l'ouvrir, patins en caoutchouc */
.mt-clavier__dos::before {
	content: ""; position: absolute; left: 50%; top: 0; width: 18cqw; height: 3.4cqw; margin-left: -9cqw; border-radius: 0 0 2cqw 2cqw;
	background: rgba(30, 30, 62, 0.55); box-shadow: inset 0 -0.4cqw 0 rgba(255, 255, 255, 0.12);
}
.mt-clavier__dos::after {
	content: ""; position: absolute; left: 4cqw; right: 4cqw; top: 4.4cqw; height: 2.4cqw;
	background: radial-gradient(closest-side, var(--ez-nuit) 92%, rgba(30, 30, 62, 0) 100%) left / 6cqw 100% no-repeat, radial-gradient(closest-side, var(--ez-nuit) 92%, rgba(30, 30, 62, 0) 100%) right / 6cqw 100% no-repeat;
}
.mt-ouies--dos { left: 30%; right: 30%; top: 8%; height: 7%; }
.mt-dos__etiquette {
	padding: 0.9cqw 2cqw 0.6cqw; border-radius: 0.6cqw; background: var(--ez-turquoise); color: var(--ez-nuit);
	font: 700 2.6cqw/1 var(--ez-f-texte); letter-spacing: 0.16em; transform: rotate(-2deg);
}

/* Disposition large : lettres à gauche, bloc de fonction 2 × 4 à droite (comme le Minitel 1) */
@container (min-width: 440px) {
	.mt-clavier__face {
		--mt-ecart: 1.2cqw;
		height: 53cqw; padding: 2.2cqw 2.4cqw 2.6cqw;
		grid-template-columns: minmax(0, 52fr) minmax(0, 19fr) minmax(0, 19fr);
		grid-template-rows: 7cqw repeat(4, minmax(0, 1fr));
		grid-template-areas:
			"lettres cnx  cnx"
			"lettres somm annu"
			"lettres reto repe"
			"lettres guid corr"
			"lettres suite envoi";
	}
}

/* ---------- Touches ---------- */
[data-mt-touche="envoi"] { grid-area: envoi; }
[data-mt-touche="suite"] { grid-area: suite; }
[data-mt-touche="connexion"] { grid-area: cnx; }
[data-mt-touche="sommaire"] { grid-area: somm; }
[data-mt-touche="repetition"] { grid-area: repe; }
[data-mt-touche="guide"] { grid-area: guid; }
[data-mt-touche="annulation"] { grid-area: annu; }
[data-mt-touche="correction"] { grid-area: corr; }
[data-mt-touche="retour"] { grid-area: reto; }

/* Une touche = sa jupe (socle sombre) + son capuchon, qui descend de la course de la touche à l'appui */
.mt-touche {
	--mt-cap: var(--ez-violet); --mt-encre: var(--ez-blanc);
	position: relative; display: block; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0.9cqw;
	background: rgba(30, 30, 62, 0.85); color: var(--mt-encre); font: inherit; text-decoration: none; cursor: pointer;
	-webkit-tap-highlight-color: transparent; touch-action: manipulation;
	box-shadow: 0 0.3cqw 0 rgba(30, 30, 62, 0.55);
}
.mt-touche__cap {
	position: absolute; left: 0; right: 0; top: 0; bottom: var(--mt-jupe);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25em; overflow: hidden;
	border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%, rgba(30, 30, 62, 0.1)), var(--mt-cap);
	box-shadow: inset 0 0.3cqw 0 rgba(255, 255, 255, 0.3), inset 0 -0.25cqw 0 rgba(30, 30, 62, 0.18);
	font-weight: 700; text-transform: uppercase; line-height: 1;
	transition: transform 90ms ease-out;
}
/* Survol (éclaircit) et appui (assombrit), en calques d'opacité */
.mt-touche__cap::before, .mt-touche__cap::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity 120ms; }
.mt-touche__cap::before { background: rgba(255, 255, 255, 0.16); }
.mt-touche__cap::after { background: rgba(30, 30, 62, 0.16); }
button.mt-touche:hover .mt-touche__cap::before { opacity: 1; }
.mt-touche:active .mt-touche__cap, .mt-touche.est-enfoncee .mt-touche__cap { transform: translateY(var(--mt-jupe)); transition-duration: 30ms; }
.mt-touche:active .mt-touche__cap::after, .mt-touche.est-enfoncee .mt-touche__cap::after { opacity: 1; transition-duration: 30ms; }
.mt-touche:focus-visible { outline: 3px solid var(--ez-blanc); outline-offset: 2px; }

.mt-touche--fn .mt-touche__cap { padding: 0 0.3em; }
.mt-touche__nom { position: relative; z-index: 1; font-size: 2.3cqw; letter-spacing: 0; white-space: nowrap; }
.mt-touche__fin { opacity: 0.7; }
.mt-touche--partage { --mt-cap: var(--ez-corail); --mt-encre: var(--ez-encre); }
.mt-touche--outil { --mt-cap: var(--ez-blanc); --mt-encre: var(--ez-encre); }
/* ENVOI : la touche qu'on cherche, un cran plus grande en étroit */
[data-mt-touche="envoi"] .mt-touche__nom { font-size: 3.1cqw; letter-spacing: 0.06em; }

/* Étiquettes Dymo : ruban turquoise collé de travers sur la touche (disposition large seulement : en étroit, pas la place) */
.mt-dymo {
	position: relative; z-index: 1; display: none; max-width: 100%; padding: 0.42em 0.6em 0.3em; border-radius: 0.3em;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 45%, rgba(30, 30, 62, 0.1)), var(--ez-turquoise);
	color: var(--ez-nuit); font-size: 2.85cqw; letter-spacing: 0.1em; white-space: nowrap; overflow: hidden; text-overflow: clip;
	transform: rotate(-2deg); box-shadow: 0 0.2cqw 0 rgba(30, 30, 62, 0.25);
	transition: opacity 250ms, transform 250ms var(--ez-courbe);
}
.mt-touche:nth-of-type(even) .mt-dymo { transform: rotate(1.6deg); }
.mt-dymo[hidden] { display: none !important; }
.mt-dymo.est-longue { letter-spacing: 0.04em; padding-left: 0.4em; padding-right: 0.4em; }
.mt-dymo.est-changee { animation: mt-dymo 420ms var(--ez-courbe); }
@keyframes mt-dymo { from { transform: rotate(-2deg) scale(1.35); opacity: 0; } }

@container (min-width: 440px) {
	.mt-touche { border-radius: 0.6cqw; }
	.mt-touche__nom { font-size: 1.62cqw; }
	[data-mt-touche="envoi"] .mt-touche__nom { font-size: 1.9cqw; }
	.mt-dymo { display: inline-block; font-size: 1.72cqw; }
	.mt-dymo.est-longue { font-size: 1.5cqw; }
	.mt-touche--large .mt-touche__cap { flex-direction: row; gap: 1.2em; }
}

/* Clavier AZERTY : de vrais boutons (au doigt comme à la souris), modificateurs, haut-parleur */
.mt-modificateurs { display: none; }
.mt-lettres { grid-area: lettres; display: flex; flex-direction: column; gap: 1.2cqw; min-height: 0; }
.mt-rangee { flex: 1 1 0; display: flex; gap: 1cqw; min-height: 0; }
.mt-touche--lettre, .mt-touche--mod { flex: 1 1 0; border-radius: 0.7cqw; }
.mt-touche--lettre .mt-touche__cap { font-size: 3.5cqw; font-weight: 700; }
.mt-touche--espace { flex: 4 1 0; }
.mt-touche--maj { flex: 1.5 1 0; --mt-cap: var(--ez-nuit); }
.mt-touche--maj .mt-touche__cap { font-size: 2.3cqw; }
.mt-touche--mod { --mt-cap: var(--ez-nuit); --mt-encre: rgba(255, 255, 255, 0.8); }
.mt-touche--mod .mt-touche__cap { font-size: 1.5cqw; letter-spacing: 0.08em; }
/* Maj et Fnct posés (une seule lettre) : la touche reste vive jusqu'à la lettre suivante */
.mt-touche.est-verrouillee { --mt-cap: var(--ez-corail); --mt-encre: var(--ez-encre); }
.mt-haut-parleur {
	flex: 2.4 1 0; align-self: stretch; margin-left: 1cqw; border-radius: 0.8cqw;
	background:
		repeating-linear-gradient(0deg, rgba(43, 45, 109, 1) 0 0.45cqw, rgba(43, 45, 109, 0) 0.45cqw 0.9cqw),
		repeating-linear-gradient(90deg, rgba(30, 30, 62, 0) 0 0.45cqw, rgba(30, 30, 62, 0.85) 0.45cqw 0.9cqw);
}
@container (min-width: 440px) {
	.mt-lettres { gap: 0.9cqw; }
	.mt-rangee { gap: 0.8cqw; }
	.mt-touche--lettre .mt-touche__cap { font-size: 1.7cqw; }
	.mt-touche--maj .mt-touche__cap { font-size: 1.3cqw; }
	.mt-modificateurs { grid-area: lettres; display: flex; gap: 0.8cqw; height: 7cqw; }
	.mt-lettres { padding-top: calc(7cqw + var(--mt-ecart)); }
	.mt-touche--mod { flex: 0 0 6.4cqw; }
	.mt-touche--mod .mt-touche__cap { font-size: 1.5cqw; }
}

/* Ombre au sol */
.mt-ombre {
	position: absolute; z-index: -1; left: -4cqw; right: -4cqw; bottom: -5cqw; height: 16cqw; pointer-events: none;
	background: radial-gradient(50% 50% at 50% 50%, rgba(30, 30, 62, 0.85), rgba(30, 30, 62, 0) 100%);
}

/* Cordon téléphonique et prise en T (sur les grands Minitel seulement : sur téléphone, pas la place) */
.mt-cordon { display: none; }
@container (min-width: 440px) {
	.mt-cordon { display: block; position: absolute; z-index: -1; left: calc(100% - 4cqw); top: 36cqw; width: 22cqw; height: auto; overflow: visible; pointer-events: none; }
}
.mt-cordon__fil { fill: none; stroke: var(--ez-encre); stroke-width: 14; stroke-linecap: round; }
.mt-cordon__reflet { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 3; stroke-linecap: round; transform: translate(-3px, -3px); }
.mt-prise__corps { fill: var(--ez-blanc); }
.mt-prise__ombre { fill: rgba(30, 30, 62, 0.16); }
.mt-prise__vis { fill: rgba(30, 30, 62, 0.55); }

@media (prefers-reduced-motion: reduce) {
	.mt-touche__cap, .mt-touche__cap::before, .mt-touche__cap::after, .mt-dymo, .mt-son__bascule::before { transition: none; }
	.mt-dymo.est-changee { animation: none; }
}
@media print {
	.mt-ciel, .mt-rideau, .mt-clavier, .mt-barre { display: none; }
}