@font-face {
  font-family: 'sofiaPro';
  src: url('../fonts/sofia_pro.otf');
  font-weight: normal;
}
@font-face {
  font-family: 'sofiaPro';
  src: url('../fonts/sofia_pro_bold.otf') format('opentype');
  font-weight: bold;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'sofiaPro';
  background-image: url(../images/backgound.png);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  padding-top: 50px;
  position: relative;
  overflow-x: hidden;
}
body.shown{ overflow: hidden; }

/* Lang switcher */
.lang-switcher{ top:14px; right:14px; z-index: 9999; }

/* Logo */
.logo {
  width: 100vw;
  text-align: center;
  margin-bottom: 50px;
}
.logo img{
  display: inline-block;
  width: 180px;
  height: 180px;
  animation: float 3s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* Titre principal */
.main-title{ max-width: 100%; }
.main-title img{ width: 75%; }
.subtitle {
  font-family: 'SofiaPro';
  color: #562d20;
  font-size: 20px;
  font-weight: 600;
  width: 100%;
  text-align: center;
}

/* Étapes */
.steps { margin-top: 40px; margin-bottom: 40px; text-align: left; }
.step { display:flex; align-items:center; margin-bottom:20px; color:#562d20; }
.step-number img{width: 100% !important;}
.step-number {
    width: 70px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    margin-right: 2px;
    color: #562d20;
}
.step-text { font-size:1rem; line-height:1.4; font-weight: 500;}

/* Formulaire */
.form-container { border-radius:20px; backdrop-filter: blur(10px); height:100%; }
.form-group { position:relative; margin-bottom:20px; }
.form-input {
  width:100%; padding:15px 20px; border:2px solid #654321; border-radius:15px;
  font-size:18px; outline:none; transition:all .3s ease; background:#fff;
}
input::placeholder { font-family:'sofiaPro'; color:#562d20; font-weight:bolder; font-style:normal; }
.error-message{
  position:absolute; top:-20px; left:50%;
  background:#fae4ad; color:#654321; text-transform:uppercase;
  padding:4px 25px; border-radius:12px; font-size:12px; font-weight:bold;
  transform:translateX(-50%); opacity:0; transition:opacity .3s ease; width:max-content;
}
.error-message:before {
  content: " "; position:absolute; bottom:-13px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-style:solid; margin:auto; border-width:18px 18px 0 18px;
  border-color:#fae4ad transparent transparent transparent; line-height:0;
}
.form-group.error .error-message { opacity:1; }
.file-input{ display:none; }

/* Zone de scan */
.scan-area {
  height: 100%;
  background: rgba(255, 255, 255, 1);
  border: 2px solid #654321;
  border-radius: 50px;
  padding: 60px 20px;
  text-align: center;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.scan-area.dragover { background: rgba(255,255,255,.7); border-color:#654321; transform:scale(1.02); }
.scan-text {
  font-size:25px; color:#562d20; font-weight:600; margin-bottom:10px;
  height:100%; display:flex; align-items:center; justify-content:center; line-height:40px;
}
.scan-subtitle { font-size:18px; color:#666; }

/* Case à cocher */
.checkbox-container {
  display:flex; align-items:center; gap:15px; cursor:pointer; margin:30px 0; justify-content:center;
}
.custom-checkbox {
  width:24px; height:24px; border:2px solid #DAA520; border-radius:5px; position:relative; transition:all .3s ease; background:#fff;
}
.checkbox-container.checked .custom-checkbox { background:#654321; border-color:#654321; }
.checkbox-container.checked .custom-checkbox::after {
  content:'✓'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:#fff; font-weight:bold; font-size:16px;
}
.checkbox-container label{ font-family:'sofiaPro'; color:#654321; margin-bottom:0; }

/* Preloader */
.preloader {
  position: fixed; top:0; left:0; bottom:0; right:0;
  background-color: rgba(0,0,0,0.8);
  display:none; align-items:center; justify-content:center;
}
.loader { width:48px; height:48px; border-radius:50%; position:relative; animation: rotate 1s linear infinite }
.loader::before {
  content:""; box-sizing:border-box; position:absolute; inset:0; border-radius:50%;
  border:5px solid #FFF; animation: prixClipFix 2s linear infinite ;
}
@keyframes rotate { 100% {transform: rotate(360deg)} }
@keyframes prixClipFix {
  0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
  25%{clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
  50%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
  75%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
  100%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

/* Bouton d'envoi */
.submit-btn {
  width:100%; max-width:50%; padding:18px;
  background: linear-gradient(135deg, #562d20, #654321);
  color:#fff; border:none; border-radius:25px; font-size:18px; font-weight:bold;
  cursor:pointer; transition:all .3s ease; text-transform:uppercase; letter-spacing:1px;
  box-shadow:0 8px 20px rgba(0,0,0,0.2); margin-bottom:50px;
}
.submit-btn:hover {
  background: linear-gradient(135deg, #654321, #562d20);
  transform: translateY(-2px); box-shadow:0 12px 25px rgba(0,0,0,0.3);
}
.submit-btn:active { transform: translateY(0); }

/* Image Ferrero */
.pyramid-container { text-align:center; position:relative; margin-top:20px; }
.hand { position:absolute; top:-352px; right:-15px; width:536px; }
@keyframes handFloat { 0%,100%{ transform: rotate(-15deg) translateY(0)} 50%{ transform: rotate(-15deg) translateY(-5px)} }
.ferrero {
  width:25px; height:25px; background: radial-gradient(circle at 30% 30%, #f4d03f, #d4af37, #b8860b);
  border-radius:50%; display:inline-block; margin:2px; box-shadow:0 3px 8px rgba(0,0,0,0.3);
  position:relative; animation: sparkle 3s ease-in-out infinite;
}
.ferrero::before {
  content:''; position:absolute; top:6px; left:8px; width:8px; height:8px; background: rgba(255,255,255,0.6); border-radius:50%;
}
@keyframes sparkle { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.pyramid-row { margin-bottom:5px; }

/* Responsive */
@media (max-width: 768px) {
  .hand { position:relative; top:0; right:79px; left: inherit; width:700px;margin-bottom: 60px; }
   .rtl .hand {
    left: 79px !important;
    width: 205%;
    margin-bottom: 60px;
	}
  .scan-area { border-radius:15px; margin-top:20px; }
  .scan-text{ font-size:22px; }
  .lang-switcher{ right:62px; }
  .rtl .hand {left: 51px !important;;}
}
@media (max-width: 480px) {
  .hand { position:relative; top:0; right:25px; width:205%; }
  .lang-switcher{ right:62px; }
  .rtl .hand {left: 0px !important;;}
}

/* Popup */
.popup{
  position:fixed; top:0; left:0; width:100vw; height:100vh; background-color: rgba(0,0,0,0.8);
  display:none; align-items:center; justify-content:center;
}
.popup .popup-close { position:absolute; right:-20px; color:#FFF; z-index:99999999999; top:-20px; font-size:20px; }
.popup-container {
  background:url(../images/popup_background.png) no-repeat center/cover;
  border-radius:20px; padding:30px 70px; max-width:500px; position:relative; box-shadow:0 20px 40px rgba(0,0,0,.3);
}
.popup .popup-close { right:10px; top:-35px; font-size:20px; cursor:pointer; }
.popup-logo img{ width:100%; margin-bottom:30px; }
.congratulations-text { color:#562d20; font-size:20px; font-weight:bold; text-align:center; margin-bottom:20px; line-height:1.3; position:relative; z-index:2; }
.details-text { color:#562d20; font-size:15px; text-align:center; line-height:1.5; margin-bottom:10px; position:relative; z-index:2; }
.sub-text { color:#562d20; font-size:13px; text-align:center; line-height:1.4; position:relative; z-index:2; }
.highlight { font-weight:bold; }

@media (max-width: 600px) {
  .popup-container { padding:20px; margin:10px; }
  .congratulations-text { font-size:20px; }
  .details-text { font-size:14px; }
  .sub-text { font-size:12px; }
  .lang-switcher{ right:20px; }
}

html {
    overflow-x: hidden;
}

@media (min-width: 1200px){
	.hand {
        position: absolute;
    top: -843px !important;
    right: -667px !important;
    width: 1278px !important;
	}
	.rtl .hand {
		transform: rotateY(180deg);
		left: -689px !important;
		right: inherit !important;
	}
}

/* Ajustements */
.main-title { max-width: 720px; text-align: center !important; }
.subtitle { line-height: 1.15; }

/* ==== RTL helpers ==== */
body.rtl { direction: rtl; text-align: right; }
body.rtl .steps .step { flex-direction: row-reverse; }
body.rtl .steps .step .step-number { margin-right: 0; margin-left: 2px; }
body.rtl input.form-input,
body.rtl .error-message,
body.rtl label { text-align: right; }

body.rtl input,
body.rtl textarea {
  font-family: 'Cairo' !important;
}

/* IMPORTANT: que tout hérite de la police du body */
body, label, button, input, textarea, select,
.error-message, .scan-text, .submit-btn, .step-text, .subtitle, .details-text, .sub-text {
  font-family: inherit;
}

/* Quand la langue est arabe, on applique Cairo */
body.rtl {
  font-family: 'Cairo', 'sofiaPro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  letter-spacing: 0; /* l'arabe n’aime pas trop le letter-spacing */
}

/* SweetAlert suit aussi la police */
.swal2-popup { font-family: inherit; }

body.rtl .steps .step {
    direction: ltr;
}


body.rtl input::-webkit-input-placeholder {
  font-family: "Cairo";
}

body.rtl input:-ms-input-placeholder {
  font-family: "Cairo";
}

body.rtl input:-moz-placeholder {
  font-family: "Cairo";
}

body.rtl input::-moz-placeholder {
  font-family: "Cairo";
}

.rtl .hand {
    transform: rotateY(180deg);
    left: -397px;
    right: inherit !important;
}
.rtl .lang-switcher {
    direction: ltr;
}
.rtl .steps {  text-align: right ! important; }