/*
Theme Name: Arcade Payments
Template: twentytwentythree
Description: Thème du site vitrine arcadepayments.ma (enfant de Twenty Twenty-Three), aux couleurs du logo.
Version: 1.0
Text Domain: arcadepayments
*/

/* Titres en style arcade : lettres pleines, contour prune */
.ap-titre-arcade {
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-wrap: balance;
}

/* Cartes des sections (étapes, avantages, modes de jeu) */
.ap-carte {
	border: 3px solid var(--wp--preset--color--prune);
	border-radius: 14px;
	box-shadow: 6px 6px 0 var(--wp--preset--color--prune);
	height: 100%;
}

/* Pastille numérotée des étapes « Comment ça marche » */
.ap-pastille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--jaune);
	border: 3px solid var(--wp--preset--color--prune);
	font-family: var(--wp--preset--font-family--arcade);
	color: var(--wp--preset--color--prune);
}

/* Boutons : effet touche de borne d'arcade */
.wp-block-button__link {
	border: 3px solid var(--wp--preset--color--prune) !important;
	box-shadow: 4px 4px 0 var(--wp--preset--color--prune);
	transition: transform .12s ease, box-shadow .12s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--wp--preset--color--prune);
}
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--jaune);
	outline-offset: 3px;
}

/* Questions fréquentes */
.ap-faq h3 {
	margin-bottom: .3rem;
}
.ap-faq p {
	margin-top: 0;
}

/* Formulaire de contact (Contact Form 7) */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: .7rem .9rem;
	border: 2px solid var(--wp--preset--color--prune);
	border-radius: 10px;
	background: var(--wp--preset--color--blanc);
	font: inherit;
	box-sizing: border-box;
}
.wpcf7 input[type="submit"] {
	background: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--prune);
	border: 3px solid var(--wp--preset--color--prune);
	border-radius: 999px;
	padding: .8rem 2rem;
	font-family: var(--wp--preset--font-family--arcade);
	box-shadow: 4px 4px 0 var(--wp--preset--color--prune);
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link {
		transition: none;
	}
}

/* Pas de marge autour de l'en-tête et du pied de page : les bandes de couleur vont d'un bord à l'autre */
.wp-site-blocks {
	padding-top: 0;
	padding-bottom: 0;
}
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Bandeau du numéro de téléphone, en haut de toutes les pages (comme lecashless.ma) */
.ap-barre-contact__liens {
	display: flex;
	align-items: stretch;
}
.ap-barre-contact__lien {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1rem;
	border-left: 1px solid rgba(249, 191, 227, .25);
	border-right: 1px solid rgba(249, 191, 227, .25);
	color: var(--wp--preset--color--rose);
	text-decoration: none;
	font-size: .95rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.ap-barre-contact__lien:hover,
.ap-barre-contact__lien:focus-visible {
	color: var(--wp--preset--color--jaune);
}
.ap-barre-contact__icone {
	width: 14px;
	height: 14px;
}

/* Illustrations pixel art : jamais lissées */
.ap-pixel img {
	image-rendering: pixelated;
}
.wp-block-media-text.ap-pixel .wp-block-media-text__media img {
	max-width: 420px;
	margin: 0 auto;
	display: block;
}
.ap-icone img {
	width: 120px;
	height: auto;
}

/* Surtitre du bandeau d'accueil */
.ap-surtitre {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .85rem;
	font-weight: 700;
	color: var(--wp--preset--color--violet);
	margin-bottom: .4rem;
}

/* Listes à puces carrées façon pixel */
.ap-liste {
	list-style: none;
	padding-left: 0;
}
.ap-liste li {
	position: relative;
	padding-left: 1.6rem;
	margin: .45rem 0;
}
.ap-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: .6rem;
	height: .6rem;
	background: var(--wp--preset--color--jaune);
	box-shadow: 2px 2px 0 var(--wp--preset--color--prune);
}

/* Pastilles (arguments, types de lieux) */
.ap-pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	justify-content: center;
}
.ap-pastille-texte {
	display: inline-block;
	padding: .45rem 1rem;
	border: 2px solid var(--wp--preset--color--jaune);
	border-radius: 999px;
	font-weight: 500;
	font-size: .95rem;
}
.has-rose-pale-background-color .ap-pastille-texte,
.has-rose-background-color .ap-pastille-texte {
	background: var(--wp--preset--color--blanc);
	border-color: var(--wp--preset--color--prune);
}

.ap-note {
	margin-top: 2rem;
	font-weight: 500;
}
.has-prune-background-color .ap-pastille-texte {
	color: var(--wp--preset--color--jaune);
}