/* RadioInternet Super Bouton — design « Affiche ».
   Toutes les règles sont portées par .rint-sb : aucune
   fuite vers le thème, aucun sélecteur global. */

.rint-sb, .rint-sb *, .rint-sb *::before, .rint-sb *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.rint-sb {
	position: relative; max-width: 520px; margin: 0 auto; padding: 18px 16px 40px;
	text-align: center; color: #fff; border-radius: 18px; overflow: hidden;
	font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
	background:
		radial-gradient(ellipse 90% 45% at 50% -5%, rgba(229,9,20,.28), transparent 60%),
		radial-gradient(ellipse 70% 40% at 50% 110%, rgba(0,180,255,.16), transparent 60%),
		#000;
}
.rint-sb button { font-family: inherit; }

/* ---------- enseigne ON AIR ---------- */
.rint-sb-onair {
	display: inline-block; padding: 8px 26px 10px; border: 3px solid #ff2038; border-radius: 12px;
	color: #ff2038; font-size: 30px; letter-spacing: 6px;
	text-shadow: 0 0 6px #ff2038, 0 0 18px #ff0033, 0 0 34px #ff0033;
	box-shadow: 0 0 18px rgba(255,0,51,.75), inset 0 0 14px rgba(255,0,51,.45);
	animation: rintSbNeon 3.2s infinite;
}
@keyframes rintSbNeon { 0%,100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } 97% { opacity: 1; } }
.rint-sb-marque {
	margin-top: 14px; font-size: 34px; letter-spacing: 1px; transform: rotate(-2deg);
	color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 0 22px rgba(229,9,20,.45);
}
.rint-sb-pointca { color: #ffd23e; text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 0 16px rgba(255,210,62,.5); }
.rint-sb-slogan { margin-top: 8px; font-family: Arial, sans-serif; font-weight: bold; font-size: 15px; color: #9fdcff; letter-spacing: 1px; }

/* ---------- LE SUPER BOUTON ---------- */
.rint-sb-zone-bouton { position: relative; margin-top: 30px; height: 330px; }
.rint-sb-super-bouton {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
	width: 262px; height: 262px; border-radius: 50%; border: 5px solid #ffccd2;
	background: radial-gradient(circle at 34% 30%, #ff5b6a, #d8001c 55%, #7a0010 100%);
	color: #fff; cursor: pointer; padding: 0;
	box-shadow: 0 14px 0 #4d000a, 0 22px 44px rgba(0,0,0,.85), 0 0 55px rgba(229,9,20,.55);
	transition: transform .08s, box-shadow .08s; z-index: 3;
}
.rint-sb-super-bouton:active { transform: translate(-50%,-46%); box-shadow: 0 5px 0 #4d000a, 0 10px 24px rgba(0,0,0,.85), 0 0 70px rgba(255,32,56,.9); }
.rint-sb-cle { display: block; font-size: 100px; line-height: .95; text-shadow: 0 3px 0 rgba(0,0,0,.4), 0 0 16px rgba(255,255,255,.65); }
.rint-sb-go { display: block; margin-top: 6px; font-size: 25px; letter-spacing: 1px; line-height: 1.12; text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 12px rgba(255,255,255,.5); }
.rint-sb-anneau {
	position: absolute; left: 50%; top: 50%; width: 262px; height: 262px; border-radius: 50%;
	transform: translate(-50%,-50%); border: 3px solid rgba(255,32,56,.85);
	box-shadow: 0 0 24px rgba(255,0,51,.65), inset 0 0 24px rgba(255,0,51,.35);
	animation: rintSbPulse 1.5s ease-out infinite; pointer-events: none; z-index: 2;
}
@keyframes rintSbPulse { 0% { transform: translate(-50%,-50%) scale(1); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1.38); opacity: 0; } }
.rint-sb-super-bouton.flash { animation: rintSbFlash .9s ease-out; }
@keyframes rintSbFlash { 0% { filter: brightness(1); } 30% { filter: brightness(2.1); } 100% { filter: brightness(1); } }

/* ---------- baguette magique + étincelles ---------- */
.rint-sb-baguette {
	position: absolute; left: 8%; top: -6px; font-size: 96px; z-index: 6; opacity: 0; pointer-events: none;
	transform-origin: 80% 90%; filter: drop-shadow(0 0 14px rgba(255,210,62,.95));
}
.rint-sb-baguette.go { animation: rintSbGeste 1.25s ease-in-out forwards; }
@keyframes rintSbGeste {
	0% { opacity: 0; transform: translate(0,30px) rotate(28deg) scale(.8); }
	18% { opacity: 1; transform: translate(52px,64px) rotate(-14deg) scale(1.05); }
	45% { transform: translate(128px,26px) rotate(24deg) scale(1.1); }
	70% { opacity: 1; transform: translate(196px,74px) rotate(-18deg) scale(1.05); }
	100% { opacity: 0; transform: translate(250px,20px) rotate(16deg) scale(.9); }
}
.rint-sb-etincelle { position: absolute; z-index: 5; border-radius: 50%; pointer-events: none; animation: rintSbExplose 1.15s cubic-bezier(.12,.72,.32,1) forwards; }
@keyframes rintSbExplose { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx),var(--dy)) scale(.15); opacity: 0; } }

/* ---------- les deux voies, d'un coup d'œil ---------- */
.rint-sb-badge-prix {
	margin: 6px auto 0; display: inline-block; padding: 11px 18px; border-radius: 999px;
	background: linear-gradient(180deg,#ffe066,#f5b800); color: #1a1000; font-size: 17px; letter-spacing: .4px;
	box-shadow: 0 0 22px rgba(255,210,62,.55); border: 2px solid #fff2b0;
}
.rint-sb-sous-badge { font-family: Arial, sans-serif; font-size: 13.5px; color: #ffe9a8; margin-top: 8px; }
.rint-sb-ou { margin: 20px 0 10px; font-family: Arial, sans-serif; font-size: 13px; font-weight: bold; color: #8a8a8a; letter-spacing: 3px; }
.rint-sb-voie-gratuite {
	display: block; width: 100%; min-height: 60px; padding: 14px 16px; border-radius: 14px; cursor: pointer;
	background: rgba(255,255,255,.05); border: 2px solid rgba(0,210,255,.75); color: #bdf0ff;
	font-size: 16px; line-height: 1.3; box-shadow: inset 0 0 14px rgba(0,180,255,.14);
}
.rint-sb-voie-gratuite small { display: block; font-family: Arial, sans-serif; font-weight: bold; font-size: 12.5px; color: #7dd7ff; margin-top: 3px; }
.rint-sb-comparatif {
	margin-top: 16px; font-family: Arial, sans-serif; font-size: 13.5px; line-height: 1.65; color: #cfcfcf;
	border: 1px dashed rgba(255,255,255,.28); border-radius: 12px; padding: 12px 14px;
}
.rint-sb-comparatif b.or { color: #ffd23e; }
.rint-sb-comparatif b.cyan { color: #54dcff; }
/* Le résumé d'une ligne du mode arrivée NET (1.2.0) :
   les deux voies en une phrase, sans encadré. */
.rint-sb-resume { margin: 16px auto 0; font-family: Arial, sans-serif; font-size: 13.5px; line-height: 1.5; color: #cfcfcf; }
.rint-sb-resume b.or { color: #ffd23e; }
.rint-sb-resume b.cyan { color: #54dcff; }

/* ---------- écrans et panneaux ---------- */
.rint-sb-ecran { display: none; }
.rint-sb-ecran.actif { display: block; animation: rintSbEntree .45s ease-out; }
@keyframes rintSbEntree { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
.rint-sb-pifpaf { font-size: 44px; transform: rotate(-2deg); color: #fff; text-shadow: 3px 3px 0 #e50914, 0 0 26px rgba(255,210,62,.75); letter-spacing: 1px; }
.rint-sb-pifpaf.petit { font-size: 34px; }
.rint-sb-part { margin-top: 6px; font-size: 31px; color: #ff2038; text-shadow: 0 0 16px rgba(255,0,51,.85); letter-spacing: 1px; }
.rint-sb-part.petit { font-size: 26px; }
.rint-sb-dents { margin-top: 8px; font-family: Arial, sans-serif; font-weight: bold; font-size: 15px; color: #ffd23e; }
.rint-sb-panneau {
	margin-top: 20px; text-align: left; border: 2px solid rgba(255,255,255,.22); border-radius: 18px;
	background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
	padding: 18px 16px 16px;
}
.rint-sb-panneau.paye { border-color: rgba(255,210,62,.8); box-shadow: 0 0 24px rgba(255,210,62,.25); }
.rint-sb-panneau h2 { font-size: 20px; letter-spacing: .4px; line-height: 1.25; margin: 0; color: #fff; }
.rint-sb-panneau h2 .prix { color: #ffd23e; }
.rint-sb-panneau h2 .grat { color: #54dcff; }
.rint-sb-kit { list-style: none; margin: 14px 0 0; padding: 0; font-family: Arial, sans-serif; font-size: 15.5px; line-height: 1.45; }
.rint-sb-kit li { padding: 9px 10px; border-radius: 10px; background: rgba(0,0,0,.45); margin-bottom: 8px; border-left: 4px solid #e50914; color: #fff; }
.rint-sb-kit li em { display: block; font-style: normal; font-size: 12.5px; color: #9fdcff; margin-top: 2px; }
.rint-sb-numero {
	display: inline-block; min-width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%;
	background: #00c8ff; color: #00121c; font-family: "Arial Black", Arial, sans-serif; font-size: 13px; margin-right: 8px;
}
.rint-sb-aller { display: inline-block; margin-top: 6px; font-weight: bold; font-size: 13.5px; color: #ffd23e; text-decoration: underline; }

/* ---------- nom de la radio + adresse ---------- */
.rint-sb-label-nom { display: block; margin-top: 16px; font-family: Arial, sans-serif; font-weight: bold; font-size: 14px; color: #ffd23e; letter-spacing: .4px; text-align: left; }
.rint-sb-nom {
	width: 100%; margin-top: 7px; min-height: 58px; border-radius: 12px; border: 2px solid rgba(255,255,255,.4);
	background: #0a0a12; color: #fff; font-size: 19px; padding: 12px 14px; font-family: Arial, sans-serif;
}
.rint-sb-nom:focus { outline: 2px solid #ffd23e; }
.rint-sb-adresse {
	margin-top: 10px; font-family: "Courier New", monospace; font-weight: bold; font-size: 16.5px; color: #54dcff;
	background: rgba(0,180,255,.08); border: 1px solid rgba(0,180,255,.4); border-radius: 10px; padding: 11px 12px;
	word-break: break-all; text-align: center;
}

/* ---------- paiement (non branché) + code ---------- */
.rint-sb-btn-payer {
	display: block; width: 100%; min-height: 66px; margin-top: 18px; border: none; border-radius: 14px; cursor: pointer;
	background: linear-gradient(180deg,#ffe066,#f5a800); color: #1a1000; font-size: 20px; letter-spacing: .5px;
	box-shadow: 0 8px 0 #8a5c00, 0 0 26px rgba(255,210,62,.4);
}
.rint-sb-btn-payer:active { transform: translateY(5px); box-shadow: 0 3px 0 #8a5c00; }
.rint-sb-note-paiement {
	margin-top: 12px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #ffe9a8;
	border: 1px solid rgba(255,210,62,.6); border-radius: 10px; padding: 11px 12px; background: rgba(255,210,62,.07); text-align: left;
}
.rint-sb-code { margin-top: 18px; border-top: 1px dashed rgba(255,255,255,.25); padding-top: 14px; }
.rint-sb-label-code { display: block; font-family: Arial, sans-serif; font-weight: bold; font-size: 13px; color: #cfcfcf; letter-spacing: 1px; text-align: left; }
.rint-sb-code-ligne { display: flex; gap: 8px; margin-top: 7px; }
.rint-sb-code-champ {
	flex: 1; min-height: 52px; border-radius: 12px; border: 2px solid rgba(255,255,255,.35);
	background: #0a0a12; color: #fff; font-size: 17px; padding: 10px 12px; font-family: Arial, sans-serif; min-width: 0;
}
.rint-sb-code-champ:focus { outline: 2px solid #54dcff; }
.rint-sb-btn-code {
	min-height: 52px; padding: 10px 16px; border: none; border-radius: 12px; cursor: pointer;
	background: #00c8ff; color: #00121c; font-size: 15px; letter-spacing: .5px;
}
.rint-sb-code-msg { margin-top: 9px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #ffb3ba; min-height: 1em; text-align: left; }
.rint-sb-code-msg.ok { color: #8dffa8; }
.rint-sb-debloque { margin-top: 12px; border: 2px solid rgba(80,255,140,.7); border-radius: 12px; padding: 13px 12px; background: rgba(30,180,90,.08); }
.rint-sb-debloque-titre { font-size: 16px; color: #8dffa8; line-height: 1.35; margin: 0 0 10px; }
.rint-sb-btn-go, .rint-sb-btn-go2 {
	display: block; width: 100%; min-height: 54px; line-height: 54px; text-align: center; border-radius: 12px;
	text-decoration: none; font-size: 16px; letter-spacing: .4px; margin-top: 8px;
}
.rint-sb-btn-go { background: linear-gradient(180deg,#ffe066,#f5a800); color: #1a1000; box-shadow: 0 5px 0 #8a5c00; }
.rint-sb-btn-go2 { background: rgba(0,201,255,.14); color: #bdf0ff; border: 2px solid rgba(0,210,255,.75); line-height: 50px; }
.rint-sb-alterner {
	display: inline-block; margin-top: 18px; font-family: Arial, sans-serif; font-size: 14.5px; font-weight: bold;
	color: #7dd7ff; background: none; border: none; cursor: pointer; text-decoration: underline; padding: 10px 4px;
}
.rint-sb-retour {
	display: inline-block; margin-top: 14px; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold;
	color: #aaa; background: none; border: none; cursor: pointer; text-decoration: underline; padding: 10px 4px;
}
.rint-sb-son { display: none; }

/* ---------- les trois portes (mode arrivée, 1.1.0) ---------- */
.rint-sb-portes { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.rint-sb-porte-bloc { margin: 0; }
.rint-sb-porte {
	display: block; width: 100%; min-height: 64px; padding: 14px 16px; border-radius: 14px; cursor: pointer;
	font-family: inherit; font-size: 18px; letter-spacing: .4px; line-height: 1.25;
	text-align: center; text-decoration: none;
}
.rint-sb-porte small {
	display: block; font-family: Arial, sans-serif; font-weight: bold; font-size: 12.5px; margin-top: 3px;
}
summary.rint-sb-porte { list-style: none; }
summary.rint-sb-porte::-webkit-details-marker { display: none; }
.rint-sb-porte-code {
	background: rgba(255,210,62,.08); border: 2px solid rgba(255,210,62,.85); color: #ffe9a8;
	box-shadow: inset 0 0 14px rgba(255,210,62,.12);
}
.rint-sb-porte-code small { color: #c9a437; }
.rint-sb-porte-panneau { text-align: left; padding: 2px 2px 4px; }
.rint-sb-porte-panneau .rint-sb-code { margin-top: 10px; }
.rint-sb-porte-payer {
	border: none; background: linear-gradient(180deg,#ffe066,#f5a800); color: #1a1000;
	box-shadow: 0 8px 0 #8a5c00, 0 0 26px rgba(255,210,62,.4);
}
.rint-sb-porte-payer:active { transform: translateY(5px); box-shadow: 0 3px 0 #8a5c00; }
.rint-sb-porte-payer small { color: #5c3d00; }
.rint-sb-porte-site {
	background: rgba(255,255,255,.05); border: 2px solid rgba(0,210,255,.75); color: #bdf0ff;
	box-shadow: inset 0 0 14px rgba(0,180,255,.14);
}
.rint-sb-porte-site small { color: #7dd7ff; }

@media (max-width: 360px) {
	.rint-sb-marque { font-size: 28px; }
	.rint-sb-pifpaf { font-size: 36px; }
	.rint-sb-super-bouton { width: 236px; height: 236px; }
	.rint-sb-anneau { width: 236px; height: 236px; }
	.rint-sb-zone-bouton { height: 300px; }
}