/* ============================================================
   ONE PROTECT SECURITY — components.css
   Formulaires, étapes, upload, accordéon, badges
   ============================================================ */

/* ── FORMS ── */
.form { display: flex; flex-direction: column; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }

.form-group label {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.form-group label .req { color: var(--gold); }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: .8rem .95rem;
  background: var(--g2);
  border: 1px solid var(--g4);
  border-radius: var(--radius);
  color: #fff;
  font-family: inherit; font-size: .85rem;
  transition: .25s ease;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
}
.form-input::placeholder,
.form-textarea::placeholder { color: rgba(255,255,255,.28); }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' fill='none' stroke='%23D4AF37' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
}
.form-select option { background: #1a1a1a; }
.form-textarea { resize: vertical; min-height: 130px; }

.form-error { font-size: .72rem; color: #ef4444; margin-top: .25rem; display: none; }
.form-error.visible { display: block; }

.form-input.invalid,
.form-select.invalid,
.form-textarea.invalid { border-color: #ef4444; }

.checkbox-group { display: flex; align-items: flex-start; gap: .7rem; }
.checkbox-group input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.checkbox-group label { font-size: .78rem; color: var(--muted); }
.checkbox-group a { color: var(--gold); }

/* ── STEP INDICATOR ── */
.steps-indicator {
  display: flex;
  margin-bottom: 2.25rem;
  background: var(--g2);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--g3);
}
.step-tab {
  flex: 1; padding: .7rem;
  text-align: center; font-size: .7rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); transition: .25s ease; cursor: pointer;
}
.step-tab.active { background: var(--gold); color: #000; }

.step-content  { display: none; }
.step-content.active { display: block; }
.step-nav { display: flex; justify-content: space-between; margin-top: 1.4rem; }

/* ── FILE UPLOAD ── */
.file-upload {
  border: 2px dashed rgba(212,175,55,.35);
  border-radius: var(--radius);
  padding: 2rem; text-align: center;
  cursor: pointer; transition: .25s ease;
  position: relative;
}
.file-upload:hover { border-color: var(--gold); background: var(--gold-dim); }
.file-upload input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.file-upload svg { width: 28px; height: 28px; color: var(--gold); margin: 0 auto .65rem; }
.file-upload p   { font-size: .8rem; color: var(--muted); margin: 0; }
.file-upload span { font-size: .72rem; color: var(--gold); font-weight: 700; }
.file-name   { font-size: .75rem; color: var(--gold); margin-top: .5rem; }

/* ── BADGES ── */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .8rem; border-radius: 50px;
}
.badge-gold  { background: var(--gold); color: #000; }
.badge-dark  { background: var(--g2); color: var(--muted); border: 1px solid var(--g3); }
.badge-green { background: rgba(34,197,94,.15); color: #22c55e; border: 1px solid rgba(34,197,94,.3); }

/* ── ACCORDION ── */
.accordion-item { border-bottom: 1px solid var(--g3); }
.accordion-item:last-child { border-bottom: none; }
.accordion-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 0; cursor: pointer;
  font-size: .9rem; font-weight: 700;
  color: var(--dim); transition: .2s ease;
}
.accordion-header:hover { color: var(--gold); }
.accordion-header svg { width: 16px; height: 16px; flex-shrink: 0; transition: .3s ease; }
.accordion-header.open svg { transform: rotate(180deg); }
.accordion-body {
  display: none;
  font-size: .85rem; color: var(--muted);
  line-height: 1.8; padding-bottom: 1.1rem;
}
.accordion-body.open { display: block; }

/* ── STAT ROW ── */
.stat-row { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 2rem; }
.stat-item {}
.stat-num {
  font-size: 2.2rem; font-weight: 900;
  color: var(--gold); letter-spacing: -.03em; line-height: 1;
}
.stat-lbl {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: .3rem;
}

/* ── SECTION HEADER WITH LINK ── */
.section-header {
  display: flex; justify-content: space-between;
  align-items: flex-end; flex-wrap: wrap;
  gap: 1.5rem; margin-bottom: 3rem;
}
.section-header-text { max-width: 580px; }

/* ── INTRO BLOCK (2 col text+image) ── */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.intro-visual {
  position: relative; height: 420px;
}
.intro-visual-main {
  position: absolute; top: 0; left: 0; right: 50px; bottom: 50px;
  background: linear-gradient(135deg, var(--g2), var(--g3));
  border-radius: 16px; border: 1px solid var(--g3);
  display: flex; align-items: center; justify-content: center;
}
.intro-visual-sub {
  position: absolute; bottom: 0; right: 0; left: 50px; top: 50px;
  background: var(--gold-dim); border: 1px solid rgba(212,175,55,.35);
  border-radius: 16px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.intro-visual-icon { width: 80px; height: 80px; opacity: .25; }
.intro-visual-icon svg { width: 100%; height: 100%; color: var(--gold); }

/* ── CHECKLIST ── */
.checklist { display: flex; flex-direction: column; gap: .65rem; margin-top: 1rem; }
.checklist-item {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: .85rem; color: var(--muted);
}
.checklist-item svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }

/* ── PROCESS STEPS ── */
.process-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 2rem; }
.process-step {
  background: var(--g2); border: 1px solid var(--g3);
  border-radius: 12px; padding: 1.5rem;
  position: relative; overflow: hidden;
  transition: .25s ease;
}
.process-step:hover { border-color: rgba(212,175,55,.3); }
.process-num {
  position: absolute; top: 1rem; right: 1rem;
  font-size: 2.5rem; font-weight: 900;
  color: rgba(212,175,55,.08); letter-spacing: -.05em; line-height: 1;
}
.process-step svg { width: 28px; height: 28px; color: var(--gold); margin-bottom: .9rem; }
.process-step h4 { color: #fff; font-size: .9rem; margin-bottom: .4rem; }
.process-step p  { font-size: .78rem; margin: 0; }

@media (max-width: 768px) {
  .form-row   { grid-template-columns: 1fr; }
  .intro-grid { grid-template-columns: 1fr; }
  .intro-visual { display: none; }
  .process-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .process-grid { grid-template-columns: 1fr; }
}

/* ── Image fluid loading ── */
img { transition: opacity .35s ease; }
img[loading="lazy"] { opacity: 0; }
img[loading="lazy"].loaded { opacity: 1; }
img[loading="eager"] { opacity: 1; }
/* Prevent layout shift: images in fixed containers always fill */
.scard-photo img,
.about-photo img,
.galerie-item img,
.presta-grid img,
.recrut-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ── Galerie grid responsive ── */
.galerie-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.galerie-item {
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--g2);
}
.galerie-item img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:brightness(.75) saturate(.85);
  transition:filter .5s ease, transform .5s ease;
  display:block;
}
.galerie-item:hover img {
  filter:brightness(.9) saturate(1.05);
  transform:scale(1.04);
}
/* Portrait images in galerie: focus on upper portion */
.galerie-item[data-portrait="true"] img {
  object-position:center 25%;
}
@media(max-width:768px) {
  .galerie-grid { grid-template-columns:repeat(2,1fr); }
  .galerie-item { aspect-ratio:1/1; }
}
@media(max-width:480px) {
  .galerie-grid { grid-template-columns:repeat(2,1fr); }
  .galerie-item { aspect-ratio:1/1; }
}