/*
 * Site www.ericzemmour.fr — section « J'affiche mon soutien » de la page « Je partage » (je-partage.twig) : formulaire du
 * prénom à gauche, l'affiche dans un téléphone en mode story à droite (dessin : assets/js/affiche.js).
 * Jetons et polices : ceux de ez.css (chargé avant).
 */

/* ---------- Lien d'annonce dans l'en-tête ---------- */
.ez-affiche-annonce { margin: var(--ez-e6) 0 0; }
.ez-affiche-annonce a {
	display: inline-flex; align-items: center; gap: var(--ez-e3); padding: 8px 16px 8px 8px; border-radius: 999px;
	background: rgba(30, 30, 62, 0.45); color: var(--ez-blanc); font-weight: 700; text-decoration: none;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); transition: background-color var(--ez-duree);
}
.ez-affiche-annonce a:hover { background: rgba(30, 30, 62, 0.7); }
.ez-affiche-annonce span {
	padding: 3px 10px; border-radius: 999px; background: var(--ez-corail); color: var(--ez-encre);
	font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- Section ---------- */
.ez-affiche { position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: 60px; }
.ez-affiche__halo {
	position: absolute; z-index: -1; right: -12%; top: 50%; width: min(80vw, 820px); aspect-ratio: 1; transform: translateY(-50%);
	border-radius: 50%; background: radial-gradient(circle, rgba(238, 124, 111, 0.42), rgba(69, 213, 222, 0.12) 45%, rgba(91, 62, 144, 0) 68%);
	pointer-events: none;
}
.ez-affiche__grille { display: grid; gap: var(--ez-e8); align-items: center; }
@media (min-width: 900px) { .ez-affiche__grille { grid-template-columns: 1.15fr minmax(280px, 380px); } }
.ez-affiche__texte .ez-chapo { max-width: 560px; margin-top: calc(var(--ez-e6) + 1vw); }
.ez-affiche__etapes { display: flex; flex-wrap: wrap; gap: var(--ez-e3) var(--ez-e5); margin: var(--ez-e5) 0 0; padding: 0; list-style: none; font-weight: 700; }
.ez-affiche__etapes li { display: inline-flex; align-items: center; gap: var(--ez-e2); }
.ez-affiche__etapes span {
	display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	background: var(--ez-corail); color: var(--ez-encre); font-family: var(--ez-f-titre); font-size: 0.95rem;
}
.ez-affiche__form { max-width: 540px; margin-top: var(--ez-e6); }
.ez-affiche__label { display: block; margin-bottom: var(--ez-e2); font-weight: 700; }
.ez-affiche__ligne { display: flex; flex-wrap: wrap; gap: var(--ez-e3); }
.ez-affiche__ligne .ez-saisie { flex: 1 1 220px; }
.ez-affiche__refus { margin: var(--ez-e3) 0 0; padding: 10px 14px; border-left: 3px solid var(--ez-corail); background: rgba(255, 255, 255, 0.1); font-size: 0.9375rem; }
.ez-affiche__boutons { display: flex; flex-wrap: wrap; gap: var(--ez-e3); margin-top: var(--ez-e5); }
.ez-affiche__note { max-width: 540px; margin: var(--ez-e5) 0 0; font-size: 0.8125rem; font-weight: 300; opacity: 0.8; }

/* ---------- Le téléphone en mode story ---------- */
.ez-affiche__telephone { justify-self: center; width: min(72vw, 340px); perspective: 1400px; }
.ez-affiche__appareil {
	position: relative; padding: 11px; border-radius: 44px;
	background: linear-gradient(160deg, #34315a, #17152d 60%);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 46px 90px -34px rgba(0, 0, 0, 0.8), 0 0 70px rgba(238, 124, 111, 0.35);
	transform: rotateY(-14deg) rotateZ(2deg); transition: transform 700ms var(--ez-courbe);
	animation: ez-affiche-flotte 7s ease-in-out infinite;
}
.ez-affiche__telephone:hover .ez-affiche__appareil, .a-affiche .ez-affiche__appareil:focus-within { transform: none; }
@keyframes ez-affiche-flotte { 50% { translate: 0 -12px; } }
/* Encoche */
.ez-affiche__appareil::before {
	content: ""; position: absolute; z-index: 2; top: 19px; left: 50%; width: 76px; height: 20px; margin-left: -38px;
	border-radius: 12px; background: #0c0b1a;
}
.ez-affiche__canvas { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 34px; background: var(--ez-nuit); }
/* Barres de progression d'une story, par-dessus l'affiche (elles ne sont pas dans le fichier téléchargé) */
.ez-affiche__story { position: absolute; z-index: 1; left: 30px; right: 30px; top: 48px; display: flex; gap: 4px; pointer-events: none; }
.ez-affiche__story span { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.38); }
.ez-affiche__story span:first-child::after {
	content: ""; display: block; height: 100%; background: var(--ez-blanc); transform-origin: left;
	animation: ez-affiche-story 5s linear infinite;
}
@keyframes ez-affiche-story { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 899px) {
	.ez-affiche__halo { right: auto; left: 50%; top: auto; bottom: -10%; transform: translateX(-50%); }
	.ez-affiche__appareil { transform: rotateZ(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
	.ez-affiche__appareil { animation: none; transform: none; transition: none; }
	.ez-affiche__story span:first-child::after { animation: none; transform: scaleX(0.4); }
}