@font-face { font-family: Mark-Pro; src: url(https://signature.afgholding-sa.com/assets/font/Mark-Pro.ttf);}
@font-face { font-family: Mark-Pro-Bold; src: url(https://signature.afgholding-sa.com/assets/font/Mark-Pro-Bold.ttf);}
@font-face { font-family: MarkPro-Medium; src: url(https://signature.afgholding-sa.com/assets/font/MarkPro-Medium.ttf);}

:root{
  --primary: #00AD00;
  --accent: #ff8a00;
  --font: Mark-Pro;
}

body{
  font-family: MarkPro-Medium;
  margin:20px;
  background:#f3f4f6;
  color:#111;
}

.container{
  display:flex;
  gap:20px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.form{
  width:360px;
  background:#fff;
  padding:16px;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

.form label{
  display:block;
  margin-top:10px;
  font-size:13px;
  color:#444;
}

.form input, .form select{
  width:100%;
  padding:8px 10px;
  margin-top:6px;
  border:1px solid #ddd;
  border-radius:6px;
  box-sizing:border-box;
}

.preview{
  background:#fff;
  padding:12px;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

.signature-canvas{
  position:relative;
  width:900px; /* adapt to template aspect ratio */
  max-width:100%;
  overflow:hidden;
  border:1px solid #eee;
  border-radius:4px;
  background:#fff;
}

/* Template background */
.signature-bg{
  width:100%;
  display:block;
}

/* Overlay text block positioned to match template layout */
.signature-overlay{
  position:absolute;
  top:40px; /* ajuster si besoin */
  left:430px; /* position à droite du logo */
  width:480px;
  color:#001051;
  font-family:MarkPro-Medium;
  line-height: 1.2;
}

.signature-name{
  font-weight:bold;
  font-size:22px;
  color:#00AD00;
  margin-bottom:4px;
  font-family: Mark-Pro-Bold;
  text-transform: none;
}

.signature-role{
  font-size:15px;
  color:#001051;
  margin-bottom:8px;
  white-space: pre-line; /* permet les sauts de ligne */
}

.signature-meta{
  font-size:14px;
  color:#001051;
  margin-bottom:6px;
}

.signature-meta a{
  color:#E20000;
  text-decoration:underline;
  font-weight:700;
}

.small{
  font-size:12px;
  color:#5b6b7a;
  margin-top:8px;
}

/* Buttons */
.btn{ 
  display:inline-block; 
  padding:9px 12px; 
  border-radius:6px; 
  cursor:pointer; 
  border:none; 
  background:#00AD00; 
  color:#fff; 
  font-weight:600; 
}

.btn.gray{ 
  background:#6b7280; 
}

/* Responsive */
@media(max-width:980px){
  .container{flex-direction:column;}
  .form{width:100%;}
  .signature-overlay{left:430px; top:30px; width:580px; line-height:1.1;}
}