/* =========================
   PMCE — Form Styles (form.css)
   ========================= */

/* ---------- Root & Theme ---------- */
:root{
  --pmce-bg: #0f172a;            /* ardoise très foncé */
  --pmce-card: #111827;          /* gris-noir doux */
  --pmce-muted: #94a3b8;         /* ardoise claire */
  --pmce-text: #e5e7eb;          /* gris très clair */
  --pmce-border: #1f2937;        /* gris foncé */
  --pmce-orange: #ff6b00;        /* orange PMCE */
  --pmce-orange-600:#ff7f1a;
  --pmce-orange-700:#e86800;
  --pmce-focus: 0 0 0 4px rgba(255,107,0,.15), 0 0 0 1.5px #ff6b00;
  --radius-lg: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 6px 18px rgba(0,0,0,.25);
  --shadow-md: 0 12px 28px rgba(0,0,0,.35);
}

/* ---------- Page background ---------- */
body.zf-backgroundBg{
  margin:0;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(255,107,0,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(255,107,0,.05), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0a0f1a 100%);
  color:var(--pmce-text);
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.55;
}

/* ---------- Container ---------- */
.zf-templateWidth{
  max-width: 920px;
  margin: 48px auto;
  padding: 0 20px;
}
.zf-templateWrapper{
  background: var(--pmce-card);
  border: 1px solid var(--pmce-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* ---------- Header ---------- */
.zf-tempHeadBdr{ list-style:none; padding:0; margin:0; }
.zf-tempHeadContBdr{
  background:
    linear-gradient(180deg, rgba(255,107,0,.12), rgba(255,107,0,0));
  padding: 28px 28px 16px;
  border-bottom: 1px solid var(--pmce-border);
}
.zf-frmTitle{
  margin:0 0 6px 0;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing:.2px;
  color:#fff;
}
.zf-frmTitle em{ font-style: normal; }
.zf-frmDesc{
  margin:0;
  color: var(--pmce-muted);
  font-size: 14px;
}

/* ---------- Sections ---------- */
.zf-subContWrap{ padding: 8px 28px 28px; }
.zf-section{
  margin: 24px 0 12px;
  padding-top: 8px;
}
.zf-section h2{
  margin:0 0 8px 0;
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 700;
  color:#fff;
  position:relative;
}
.zf-section h2::after{
  content:"";
  display:block;
  width: 64px; height: 3px;
  background: linear-gradient(90deg, var(--pmce-orange), transparent);
  border-radius: 2px;
  margin-top: 8px;
}

/* ---------- Note / Intro block ---------- */
.zf-note{
  background: linear-gradient(180deg, rgba(255,107,0,.06), rgba(255,107,0,.02));
  border: 1px solid rgba(255,107,0,.20);
  color: var(--pmce-text);
  padding: 18px;
  border-radius: var(--radius-sm);
  margin: 18px 0 10px;
}
.zf-descFld p{ margin:0 0 8px; }
.zf-descFld b{ color:#fff; }
.zf-descFld blockquote{
  margin:12px 0 0;
  padding:12px 14px;
  background: rgba(255,107,0,.06);
  border-left: 3px solid var(--pmce-orange);
  border-radius: 8px;
}

/* ---------- Field wrappers ---------- */
.zf-tempFrmWrapper{
  display:block;
  margin: 14px 0;
}
.zf-labelName{
  display:block;
  margin: 0 0 8px 2px;
  font-size: 13px;
  color: var(--pmce-muted);
  letter-spacing:.2px;
}
.zf-important{ color: var(--pmce-orange); font-style: normal; }

/* ---------- Inputs / Select / Textarea ---------- */
.zf-tempContDiv input[type="text"],
.zf-tempContDiv input[type="email"],
.zf-tempContDiv input[type="tel"],
.zf-tempContDiv textarea,
.zf-form-sBox{
  width: 100%;
  box-sizing: border-box;
  background: #0b1220;
  color: #e6e7ea;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
  outline: none;
}
.zf-tempContDiv textarea{
  min-height: 120px;
  resize: vertical;
}

.zf-tempContDiv input::placeholder,
.zf-tempContDiv textarea::placeholder{
  color:#64748b;
}

.zf-tempContDiv input:focus,
.zf-tempContDiv textarea:focus,
.zf-form-sBox:focus{
  border-color: var(--pmce-orange);
  box-shadow: var(--pmce-focus);
  background:#0c1426;
}

/* ---------- Phone group ---------- */
.zf-phonefld .zf-phwrapper{
  display:grid;
  grid-template-columns: 1fr 3fr;
  gap: 10px;
}
.zf-phonefld .zf-phwrapper span{
  display:block;
  position:relative;
}
.zf-phonefld .zf-phwrapper span label{
  position:absolute;
  bottom: 10px; right: 12px;
  font-size: 12px;
  color:#74829a;
  pointer-events:none;
}

/* ---------- Radios ---------- */
.zf-radio .zf-overflow{
  display:grid;
  gap:10px;
}
.zf-radioBtnType{
  appearance:none;
  width:18px; height:18px;
  border:2px solid #334155;
  border-radius:50%;
  display:inline-grid;
  place-content:center;
  margin:0 10px 0 0;
  vertical-align: middle;
  background:#0b1220;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.zf-radioBtnType::before{
  content:"";
  width:10px; height:10px;
  border-radius:50%;
  transform: scale(0);
  transition: transform .12s ease;
  background: var(--pmce-orange);
}
.zf-radioBtnType:focus{ box-shadow: var(--pmce-focus); }
.zf-radioBtnType:checked{ border-color: var(--pmce-orange); background:#0c1426; }
.zf-radioBtnType:checked::before{ transform: scale(1); }

.zf-radioChoice{
  display:inline-block;
  padding:12px 14px;
  border:1px solid #1e293b;
  border-radius:12px;
  background:#0b1220;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  font-size:15px;
}
.zf-multiAttType:hover .zf-radioChoice{ border-color:#334155; }
.zf-radio input:checked + .zf-radioChoice{
  border-color: var(--pmce-orange);
  box-shadow: 0 0 0 2px rgba(255,107,0,.12) inset;
}

/* ---------- Help & Errors ---------- */
.zf-instruction{
  margin:6px 2px 0;
  font-size: 12.5px;
  color:#8fa0b8;
}
.zf-errorMessage{
  margin:6px 2px 0;
  font-size: 13px;
  color:#ffb4a1;
  background: rgba(255, 87, 51, .08);
  border:1px solid rgba(255, 87, 51, .22);
  padding:10px 12px;
  border-radius:10px;
  display:none;               /* Zoho script la passera à display:block si erreur */
}

/* ---------- Footer / Submit ---------- */
.zf-fmFooter{
  list-style:none;
  margin: 26px 0 8px;
  padding: 0;
  display:flex;
  justify-content:flex-end;
}
.zf-submitColor{
  appearance:none;
  border:none;
  background: linear-gradient(180deg, var(--pmce-orange-600), var(--pmce-orange-700));
  color:#fff;
  font-weight:700;
  letter-spacing:.3px;
  padding: 14px 20px;
  font-size:16px;
  border-radius: 14px;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(255,107,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .06s ease, box-shadow .15s ease, filter .15s ease;
}
.zf-submitColor:hover{
  filter: brightness(1.02);
  box-shadow: 0 10px 22px rgba(255,107,0,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
.zf-submitColor:active{
  transform: translateY(1px);
}

/* ---------- Lists & spacing cleanup ---------- */
ul{ padding-left: 1.1rem; }
.zf-tempHeadBdr ul, .zf-subContWrap ul{ margin:0; }
.zf-clearBoth{ clear:both; }

/* ---------- Layout tweaks for large fields ---------- */
.zf-large{}

/* ---------- Responsive ---------- */
@media (min-width: 720px){
  /* Aligner certains champs en 2 colonnes si besoin — on garde simple pour compat Zoho */
  .zf-radio .zf-overflow{ grid-template-columns: 1fr; } /* radios en colonne pour lisibilité */
}
@media (max-width: 560px){
  .zf-tempHeadContBdr{ padding:22px 18px 12px; }
  .zf-subContWrap{ padding: 6px 18px 22px; }
  .zf-phonefld .zf-phwrapper{ grid-template-columns: 1fr; }
  .zf-fmFooter{ justify-content:stretch; }
  .zf-submitColor{ width:100%; }
}