/* ============================================================
   ETANSUR — recrutement.css v3
   Page recrutement — dark premium, compatible thème mi-dark
   IS COM Agency
   ============================================================ */

/* ── Variables locales ── */
:root {
  --rp-bg:        #1c2b38;
  --rp-panel-bg:  #162230;
  --rp-form-bg:   #0e1822;
  --rp-surface:   #223042;
  --rp-surface-2: #2a3a4e;
  --rp-border:    rgba(48, 164, 208, 0.12);
  --rp-border-h:  rgba(48, 164, 208, 0.35);
  --rp-accent:    #30a4d0;
  --rp-accent-d:  #1d7fa8;
  --rp-text:      #e8edf5;
  --rp-muted:     #6b8099;
  --rp-faint:     #344557;
}

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
.rp {
  display: grid;
  grid-template-columns: 420px 1fr;
  min-height: calc(100vh - var(--sticky-offset));
  margin-top: var(--sticky-offset);
  padding-bottom: 36px;
}

/* ============================================================
   PANNEAU GAUCHE
   ============================================================ */
.rp__panel {
  position: relative;
  background: var(--rp-panel-bg);
  border-right: 1px solid var(--rp-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rp__panel-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vh, 2.5rem);
  padding: clamp(2rem, 4vw, 3.5rem);
  height: 100%;
}

.rp__panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.rp__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rp-muted);
  transition: color 0.16s ease;
}
.rp__back svg { width:14px; height:14px; transition:transform .16s ease; }
.rp__back:hover { color: var(--rp-accent); }
.rp__back:hover svg { transform: translateX(-3px); }

.rp__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rp-accent);
  background: rgba(48,164,208,0.10);
  border: 1px solid var(--rp-border-h);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

.rp__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rp-accent);
  animation: rpDot 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes rpDot {
  0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(48,164,208,.45); }
  50%      { opacity:.7; box-shadow:0 0 0 5px rgba(48,164,208,0); }
}

.rp__headline { display:flex; flex-direction:column; gap:1rem; }

.rp__title {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #fff;
}
.rp__title em { font-style:normal; color:var(--rp-accent); }

.rp__sub {
  font-size: clamp(0.83rem, 1vw, 0.94rem);
  color: var(--rp-muted);
  line-height: 1.75;
  max-width: 34ch;
}

.rp__values { display:flex; flex-direction:column; gap:0.85rem; }

.rp__value {
  display:flex; align-items:center; gap:0.9rem;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--rp-border);
  border-radius: 10px;
  transition: border-color .18s ease, background .18s ease;
}
.rp__value:hover {
  border-color: var(--rp-border-h);
  background: rgba(48,164,208,0.05);
}

.rp__value-icon {
  width:34px; height:34px; min-width:34px;
  background: rgba(48,164,208,0.1);
  border: 1px solid rgba(48,164,208,0.2);
  border-radius: 8px;
  display:flex; align-items:center; justify-content:center;
  color: var(--rp-accent);
}
.rp__value-icon svg { width:15px; height:15px; }
.rp__value > div   { display:flex; flex-direction:column; gap:2px; }
.rp__value strong  { font-size:.85rem; font-weight:700; color:#fff; }
.rp__value span    { font-size:.75rem; color:var(--rp-muted); }

.rp__contact {
  display:flex; flex-direction:column; gap:0.55rem;
  margin-top:auto; padding-top:1.5rem;
  border-top: 1px solid var(--rp-border);
}

.rp__contact-item {
  display:flex; align-items:center; gap:0.65rem;
  font-size:.83rem; font-weight:500;
  color:var(--rp-muted);
  transition:color .16s ease;
}
.rp__contact-item svg   { width:14px; height:14px; color:var(--rp-accent); flex-shrink:0; }
.rp__contact-item:hover { color:#fff; }

/* Déco géométrique */
.rp__deco { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.rp__deco-circle { position:absolute; border-radius:50%; border:1px solid rgba(48,164,208,0.07); }
.rp__deco-circle--1 { width:320px; height:320px; bottom:-120px; right:-120px; }
.rp__deco-circle--2 {
  width:180px; height:180px; bottom:-50px; right:-50px;
  background:radial-gradient(circle, rgba(48,164,208,0.06) 0%, transparent 70%);
  border:none;
}
.rp__deco-line {
  position:absolute; top:0; bottom:0; right:0; width:1px;
  background:linear-gradient(to bottom, transparent 0%, rgba(48,164,208,0.25) 30%, rgba(48,164,208,0.25) 70%, transparent 100%);
}

/* ============================================================
   PANNEAU DROIT — FORMULAIRE
   ============================================================ */
.rp__form-section {
  background: var(--rp-form-bg);
  display:flex; align-items:center; justify-content:center;
  padding: clamp(2rem, 4vw, 4rem);
  overflow-y: auto;
}

.rp__form-inner {
  width:100%; max-width:580px;
  display:flex; flex-direction:column; gap:2rem;
  animation: rpFadeUp .5s ease .2s both;
}
@keyframes rpFadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

.rp__form-head { display:flex; flex-direction:column; gap:.4rem; }
.rp__form-title {
  font-size:clamp(1.3rem,2.2vw,1.75rem);
  font-weight:800; color:#fff; letter-spacing:-0.02em;
}
.rp__form-desc { font-size:.82rem; color:var(--rp-muted); }

.rp__form  { display:flex; flex-direction:column; gap:1rem; }
.rp__row   { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.rp__field { display:flex; flex-direction:column; gap:.4rem; }
.rp__field--full { grid-column:1 / -1; }

.rp__label {
  font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--rp-muted);
}

.rp__input {
  width:100%;
  background:var(--rp-surface);
  border:1.5px solid var(--rp-border);
  border-radius:8px;
  padding:.75rem 1rem;
  color:var(--rp-text);
  font-family:var(--font-main);
  font-size:.92rem;
  outline:none;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.rp__input::placeholder { color:var(--rp-faint); }
.rp__input:focus {
  border-color:var(--rp-accent);
  background:var(--rp-surface-2);
  box-shadow:0 0 0 3px rgba(48,164,208,0.12);
}

.rp__select {
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b8099' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-color:var(--rp-surface);
}
.rp__select option { background:#223042; }

/* Drop zone CV */
.rp__drop { position:relative; cursor:pointer; border-radius:10px; overflow:hidden; }

.rp__drop-empty {
  display:flex; align-items:center; gap:1rem;
  padding:1.1rem 1.2rem;
  border:2px dashed var(--rp-border);
  border-radius:10px;
  background:var(--rp-surface);
  transition:border-color .16s ease, background .16s ease;
}
.rp__drop:hover .rp__drop-empty,
.rp__drop.dragover .rp__drop-empty {
  border-color:var(--rp-accent);
  background:rgba(48,164,208,0.05);
}

.rp__drop-icon {
  width:38px; height:38px; min-width:38px;
  background:rgba(48,164,208,0.1);
  border:1px solid rgba(48,164,208,0.2);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--rp-accent);
  transition:background .16s ease;
}
.rp__drop:hover .rp__drop-icon { background:rgba(48,164,208,0.16); }
.rp__drop-icon svg { width:18px; height:18px; }

.rp__drop-text { font-size:.86rem; color:var(--rp-muted); }
.rp__drop-text span { color:var(--rp-accent); text-decoration:underline; text-underline-offset:3px; }

.rp__drop-filled {
  display:flex; align-items:center; gap:.85rem;
  padding:1rem 1.1rem;
  border:1.5px solid var(--rp-accent);
  border-radius:10px;
  background:rgba(48,164,208,0.07);
}
.rp__drop-filled > svg { width:18px; height:18px; color:var(--rp-accent); flex-shrink:0; }

.rp__drop-name {
  font-size:.86rem; font-weight:500; color:#fff;
  flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.rp__drop-remove {
  width:26px; height:26px; min-width:26px; border-radius:50%;
  background:rgba(220,60,60,0.12);
  border:1px solid rgba(220,60,60,0.25);
  display:flex; align-items:center; justify-content:center;
  color:#f87171; cursor:pointer;
  transition:background .14s ease;
  z-index:4; position:relative;
}
.rp__drop-remove:hover { background:rgba(220,60,60,0.25); }
.rp__drop-remove svg  { width:11px; height:11px; }

.rp__submit {
  width:100%; padding:.95rem;
  font-size:.9rem; letter-spacing:.08em;
  margin-top:.25rem; border-radius:8px;
}

.rp__feedback {
  padding:.75rem 1rem; border-radius:8px;
  font-size:.84rem; font-weight:500; text-align:center;
}
.rp__feedback.success { background:rgba(48,164,208,0.12); border:1px solid rgba(48,164,208,0.3); color:#52bde0; }
.rp__feedback.error   { background:rgba(220,60,60,0.1); border:1px solid rgba(220,60,60,0.3); color:#f87171; }

.rp__mention { font-size:.72rem; color:var(--rp-faint); text-align:center; line-height:1.6; }
.rp__mention a { color:var(--rp-accent); text-decoration:underline; text-underline-offset:3px; }

/* ── Cache l'état fichier par défaut ── */
#cvSelected[hidden],
.rp__drop-filled[hidden] { display:none !important; }

/* ============================================================
   FOOTER FIXÉ
   ============================================================ */
.rp__footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100; height: 36px;
  background: var(--color-dark-3, #0e1822);
  border-top: 1px solid rgba(48,164,208,0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
  font-size: .7rem;
  color: rgba(255,255,255,0.22);
}
.rp__footer-links { display:flex; align-items:center; gap:1.5rem; }
.rp__footer a { color:rgba(255,255,255,0.28); transition:color .15s ease; }
.rp__footer a:hover { color:var(--color-accent, #30a4d0); }

/* ============================================================
   RESPONSIVE — TABLETTE (< 1100px)
   ============================================================ */
@media (max-width:1100px) {
  .rp { grid-template-columns:360px 1fr; }
  .rp__title { font-size:clamp(1.7rem,3vw,2.2rem); }
}

/* ============================================================
   RESPONSIVE — TABLETTE (< 900px)
   ============================================================ */
@media (max-width:900px) {
  .rp { grid-template-columns:1fr; grid-template-rows:auto 1fr; }

  .rp__panel { border-right:none; border-bottom:1px solid var(--rp-border); }
  .rp__panel-inner {
    flex-direction:row; flex-wrap:wrap;
    align-items:center; gap:1rem 2rem;
    padding:1.25rem clamp(1rem,4vw,2rem);
  }

  .rp__panel-top { order:0; width:100%; }
  .rp__headline  { order:1; flex:1; gap:.3rem; }
  .rp__values    { display:none; }
  .rp__contact   { order:2; flex-direction:row; gap:1.5rem; border-top:none; padding-top:0; margin-top:0; }
  .rp__title     { font-size:clamp(1.3rem,3.5vw,1.7rem); }
  .rp__sub       { display:none; }
  .rp__deco      { display:none; }

  .rp__form-section { align-items:flex-start; padding:2rem clamp(1rem,4vw,2.5rem); }
  .rp__form-inner   { max-width:100%; gap:1.5rem; }
}

/* ============================================================
   RESPONSIVE — MOBILE (< 640px)
   ============================================================ */
@media (max-width:640px) {
  .rp__panel-inner { padding:1rem; gap:.6rem 1rem; }
  .rp__panel-top   { justify-content:flex-start; gap:.75rem; }
  .rp__title       { font-size:1.15rem; }
  .rp__contact     { gap:1rem; }
  .rp__contact-item { font-size:.78rem; }
  .rp__form-section { padding:1.25rem 1rem; }
  .rp__form-inner   { gap:1.25rem; }
  .rp__form         { gap:.75rem; }
  .rp__row          { grid-template-columns:1fr 1fr; gap:.6rem; }
  .rp__input        { padding:.65rem .85rem; font-size:.88rem; }
  .rp__form-title   { font-size:1.2rem; }
  .rp__drop-empty   { padding:.85rem 1rem; }
  .rp__drop-icon    { width:32px; height:32px; min-width:32px; }
  .rp__drop-icon svg { width:15px; height:15px; }
  .rp__submit       { padding:.85rem; font-size:.85rem; }
}

/* ============================================================
   RESPONSIVE — PETIT MOBILE (< 420px)
   ============================================================ */
@media (max-width:420px) {
  .rp__row         { grid-template-columns:1fr; }
  .rp__contact     { display:none; }
  .rp__panel-inner { flex-direction:row; align-items:center; justify-content:space-between; }
  .rp__panel-top   { width:auto; }
  .rp__headline    { flex:none; }
}