@font-face {
  font-family: 'Ubuntu';
  src: url('fonts/Ubuntu-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal; }
  
h1.animated { animation: appear 0.6s ease forwards; }
@keyframes appear {
  0% { opacity: 0;
	   transform: scale(0.8); }
  100% { opacity: 1;
		 transform: scale(1); } }
@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; } }

h2 { margin:0.2em;
	 margin-bottom: 40px;
	 font-weight:300;
	 font-style:italic; }

.flag {
  position: relative;
  display: inline-block; }

	.flag .tooltip {
	  visibility: hidden;
	  opacity: 0;
	  background: rgba(0, 0, 0, 0.8);
	  color: #fff;
	  text-align: center;
	  border-radius: 4px;
	  padding: 4px 8px;
	  position: absolute;
	  bottom: 100%;
	  left: 50%;
	  transform: translateX(-50%);
	  white-space: nowrap;
	  font-size: 0.8em;
	  transition: opacity 0.2s;
	  pointer-events: none; }

		  .flag:hover .tooltip {
		  visibility: visible;
		  opacity: 1; }

		  .flag img {
		  display: block;
		  transition: transform 0.2s ease-in-out;
		  transform-origin: left center; }

		  .flag:hover img {
		  animation: flagWave 1s infinite ease-in-out; }

			@keyframes flagWave {
			  0%   { transform: rotateZ(0deg) translateY(0); }
			  20%  { transform: rotateZ(2deg) translateY(-1px); }
			  40%  { transform: rotateZ(-2deg) translateY(1px); }
			  60%  { transform: rotateZ(2deg) translateY(-1px); }
			  80%  { transform: rotateZ(-2deg) translateY(1px); }
			  100% { transform: rotateZ(0deg) translateY(0); } }

#wrapper.fadeout { animation: disappear 1s forwards; }
@keyframes disappear {
	  0% { clip-path: circle(100% at 50% 50%); opacity:1; }
	  100% { clip-path: circle(0% at 50% 50%); opacity:0; } }

input[type=submit] {
  padding: 0.6em 1em;
  border: none;
  border-radius: 50px;
  font-size: 1em;
  font-weight: bold;
  background: linear-gradient(135deg, #ffffff, #e0e0e0);
  color: #000;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
  transition: 0.3s; }
input[type=submit]:hover {
  transform: scale(1.05);
  background:linear-gradient(135deg,#f8f8f8,#d0d0d0); }

#stars {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none; }
body { position: relative; z-index: 1; }

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px; }

	.cube {
	  width: 40px;
	  height: 40px;
	  border: none;
	  border-radius: 10px; /* coins arrondis */
	  cursor: pointer;
	  box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* ombre pour le relief */
	  transition: transform 0.1s, box-shadow 0.1s; }
		.cube:hover {
		  transform: translateY(-2px); /* effet bouton */
		  box-shadow: 0 6px 12px rgba(0,0,0,0.4); }
		.cube.active {
		  border: 3px solid #fff; }

	#validateButton:disabled {
	  opacity: 0.5;
	  cursor: not-allowed;
	  filter: grayscale(60%);
	  box-shadow: none;
	  transform: none; }

.cube-multi {
  position: absolute;
  align: left;
  left: 15px;
  top: 15px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: conic-gradient(
	red 0deg 45deg,
	orange 45deg 90deg,
	yellow 90deg 135deg,
	green 135deg 180deg,
	cyan 180deg 225deg,
	red 225deg 270deg,
	orange 270deg 315deg,
	cyan 315deg 360deg );
  z-index: 10;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease; }
		.cube-multi:hover {
		  transform: scale(1.3) rotate(20deg);
		  box-shadow: 0 0 10px rgba(255,255,255,0.7); }

.carte-visite-interieur {
  display: flex;
  align-items: center;
  justify-content: center; }
.nomlogomob { display: none; }
.carte-visite-logo {
  flex-shrink: 0;
  margin-right: 20px; }
.carte-visite-logo img {
  height: 180px; }
.carte-visite-texte img {
  width: 250px; }
@keyframes ouvertureRideau {
  0% { transform: scaleX(0);
	   opacity: 0; }
  100% { transform: scaleX(1);
		 opacity: 1; } }

	.flicker { animation: flicker 2s infinite alternate; }
		#text1 {
		  font-family: 'Ubuntu';
		  font-size: 1.3em;
		  font-style: bold;
		  color: white;
		  display: inline-block;
		  transition: transform 0.3s ease, opacity 0.3s ease; }
		@keyframes flicker {
		  0%, 100% { opacity: 1; text-shadow: 0 0 1px #fff, 0 0 5px #fff; }
		  50%     { opacity: 0.6; text-shadow: 0 0 4px #aaa, 0 0 8px #aaa; } }

	#qrcode { display: block; }

.addcontactmobile { display: none; }