/* Pearl Talents — v3 */

/* ── iOS : désactive animations lourdes pour éviter crash mémoire ── */
.ios-device .how-card-1,
.ios-device .how-card-2,
.ios-device .how-card-3 { animation: none !important; }
.ios-device * { will-change: auto !important; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── ANIMATIONS CARTES "COMMENT ÇA FONCTIONNE" ── */
@keyframes howFloat1 {
  0%,100%{ transform:translateY(0) scale(1); box-shadow:0 6px 30px rgba(0,180,255,0.5); }
  50%    { transform:translateY(-10px) scale(1.03); box-shadow:0 20px 50px rgba(0,180,255,0.7); }
}
@keyframes howFloat2 {
  0%,100%{ transform:translateY(0) scale(1); box-shadow:0 6px 30px rgba(168,85,247,0.5); }
  50%    { transform:translateY(-10px) scale(1.03); box-shadow:0 20px 50px rgba(168,85,247,0.7); }
}
@keyframes howFloat3 {
  0%,100%{ transform:translateY(0) scale(1); box-shadow:0 6px 30px rgba(16,185,129,0.5); }
  50%    { transform:translateY(-10px) scale(1.03); box-shadow:0 20px 50px rgba(16,185,129,0.7); }
}
@keyframes badgePulse {
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.25); }
}
@keyframes borderGlow1 {
  0%,100%{ border-color:rgba(0,180,255,0.5); }
  50%    { border-color:rgba(0,180,255,1); }
}
@keyframes borderGlow2 {
  0%,100%{ border-color:rgba(168,85,247,0.5); }
  50%    { border-color:rgba(168,85,247,1); }
}
@keyframes borderGlow3 {
  0%,100%{ border-color:rgba(16,185,129,0.5); }
  50%    { border-color:rgba(16,185,129,1); }
}

.how-card { cursor:default; }
.how-card-1 { animation:howFloat1 3s ease-in-out infinite, borderGlow1 3s ease-in-out infinite !important; }
.how-card-2 { animation:howFloat2 3s ease-in-out infinite 0.7s, borderGlow2 3s ease-in-out infinite 0.7s !important; }
.how-card-3 { animation:howFloat3 3s ease-in-out infinite 1.4s, borderGlow3 3s ease-in-out infinite 1.4s !important; }

.how-badge {
  width:34px; height:34px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.9rem; font-weight:900; flex-shrink:0;
  animation:badgePulse 2s ease-in-out infinite;
}
.how-badge-1 { background:#00b4ff; border:2px solid #0090cc; color:#fff; animation-delay:0s; }
.how-badge-2 { background:#a855f7; border:2px solid #8b3de8; color:#fff; animation-delay:0.7s; }
.how-badge-3 { background:#10b981; border:2px solid #059669; color:#fff; animation-delay:1.4s; }

.how-glow { display:none; }

:root{
  --bg: #ffffff;
  --bg2:#f6f7fb;
  --text:#0b1220;
  --muted:#4b5563;
  --muted2:#6b7280;
  --line:#e5e7eb;
  --card:#ffffff;
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
  --shadow2: 0 10px 24px rgba(15, 23, 42, 0.08);
  --radius: 18px;
  --radius2: 24px;
  --brand:#2563eb;
  --brand2:#06b6d4;
  --accent:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --max: 1120px;
}

*{ box-sizing:border-box; }
html,body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg') center/cover fixed no-repeat;
  overflow-x:hidden;
}
@media (max-width: 768px) {
  html, body {
    background-attachment: scroll;
    overflow-x: hidden;
    max-width: 100vw;
  }
  /* Empêche tout élément de dépasser la largeur écran */
  * { max-width: 100%; box-sizing: border-box; }
  img, video, iframe { max-width: 100%; height: auto; }

  /* Hero section */
  .hero { padding: 2rem 1rem !important; text-align: center; }
  .hero h1 { font-size: 1.6rem !important; }
  .hero p { font-size: .9rem !important; }
  .hero-btns { flex-direction: column !important; align-items: stretch !important; gap: .6rem !important; }
  .hero-btns button { width: 100% !important; }

  /* Sections générales */
  section { padding: 2rem 1rem !important; }
  .section-title { font-size: 1.3rem !important; }

  /* Grilles */
  .pricing-grid, .how-grid, .diff-grid { grid-template-columns: 1fr !important; }

  /* Modals plein écran sur mobile */
  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
  .modal { align-items: flex-end !important; padding: 0 !important; }

  /* Tableaux admin */
  table { font-size: .72rem !important; }
  td, th { padding: .3rem .4rem !important; }

  /* Boutons nav */
  .nav-actions { gap: .3rem !important; }
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(1200px 520px at 10% 0%, rgba(37,99,235,0.10), transparent 60%),
              radial-gradient(900px 520px at 90% 10%, rgba(6,182,212,0.08), transparent 60%),
              radial-gradient(900px 520px at 55% 110%, rgba(34,197,94,0.06), transparent 62%),
              linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.18));
  pointer-events:none;
}

a{ color: var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ max-width: var(--max); margin:0 auto; padding: 0 1.2rem; }

/* Top ribbon */
.ribbon{
  background: rgba(15,23,42,0.92);
  color: rgba(255,255,255,0.92);
  font-size:.9rem;
  padding: .65rem 0;
}
.ribbon .container{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.ribbon b{ font-weight:800; }
.ribbon .pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.22rem .55rem;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  font-weight:700;
  font-size:.82rem;
}

/* Nav */
.nav{
  position: sticky;
  top:0;
  z-index:50;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: .75rem 0;
  gap: 1.5rem;
  flex-wrap:nowrap;
}
.logo{
  display:flex; align-items:center; gap:.6rem;
  font-weight: 900;
  letter-spacing:.04em;
  text-decoration:none;
  color:#111827;
  flex-shrink:0;
}
.logo span{
  font-size: .9rem;
  color:#111827;
  letter-spacing:.08em;
  font-weight:800;
}
.mark{
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  box-shadow: 0 4px 12px rgba(37,99,235,0.25);
  position:relative;
}
.mark:after{
  content:"";
  position:absolute; inset: 10px 12px 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.88);
  transform: rotate(10deg);
  opacity:.16;
}
.nav-links{
  display:flex; gap: 0; align-items:center;
  flex:1; justify-content:center;
}
.nav-links a{
  color: #374151;
  font-size:.88rem;
  font-weight:550;
  padding:.4rem .85rem;
  border-radius:8px;
  transition:all .15s;
  white-space:nowrap;
}
.nav-links a:hover{ color:#111827; background:#f3f4f6; text-decoration:none; }
.nav-actions{ display:flex; gap:.45rem; align-items:center; flex-shrink:0; }
.btn{
  cursor:pointer;
  border:1px solid var(--line);
  padding:.72rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-weight: 800;
  font-size:.93rem;
  display:inline-flex; align-items:center; gap:.5rem;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, opacity .12s ease;
  user-select:none;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(15,23,42,0.10); border-color: rgba(37,99,235,0.25); }
.btn:focus{ outline:none; box-shadow: 0 0 0 4px rgba(37,99,235,0.18), 0 12px 28px rgba(15,23,42,0.10); }
.btn-primary{
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, rgba(37,99,235,1), rgba(6,182,212,1));
  box-shadow: 0 16px 40px rgba(37,99,235,0.20);
}
.btn-ghost{ background: rgba(255,255,255,0.75); }

/* Hero */
header{ padding: 2.1rem 0 1.2rem; }
.hero{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 1.35rem;
  align-items: start;
  margin-top: 1.2rem;
}
@media(max-width: 980px){ .hero{ grid-template-columns: 1fr; } }
.hero h1{
  margin: .7rem 0 .6rem;
  font-size: clamp(2.15rem, 4.7vw, 3.35rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hero h1 strong{
  background: linear-gradient(135deg, rgba(37,99,235,1), rgba(6,182,212,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p{
  margin:0;
  color: #1a202c;
  font-size: 1.06rem;
  line-height: 1.6;
  max-width: 62ch;
}
.hero-badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top: 1rem; }
.badge{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.38rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(229,231,235,0.95);
  background: rgba(255,255,255,0.85);
  color: var(--muted);
  font-weight: 750;
  font-size: .88rem;
}
.badge i{ font-style:normal; }
.badge.ok{ border-color: rgba(34,197,94,0.22); background: rgba(34,197,94,0.07); color: #14532d; }
.badge.brand{ border-color: rgba(37,99,235,0.22); background: rgba(37,99,235,0.06); color: #1e3a8a; }
.badge.warn{ border-color: rgba(245,158,11,0.22); background: rgba(245,158,11,0.08); color: #7c2d12; }

/* Side card */
.side{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(229,231,235,0.85);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 1.1rem;
  position:relative;
  overflow:hidden;
}
.side:before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width: 260px; height: 260px;
  background: radial-gradient(circle at 30% 30%, rgba(37,99,235,0.28), rgba(6,182,212,0.12), transparent 70%);
  border-radius: 999px;
}
.side h3{ margin:.15rem 0 .35rem; font-size: 1.05rem; }
.side p{ margin:0 0 .9rem; color: var(--muted); line-height: 1.55; font-size:.95rem; }
.kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:.7rem;
}
@media(max-width:520px){ .kpis{ grid-template-columns: 1fr; } }
.kpi{
  border: 1px solid rgba(229,231,235,0.90);
  background: #fff;
  border-radius: 16px;
  padding: .8rem .85rem;
  box-shadow: var(--shadow2);
}
.kpi b{ display:block; font-size:1.1rem; }
.kpi span{ display:block; margin-top:.12rem; color: var(--muted2); font-size:.86rem; }
.rules{ margin-top: .95rem; display:grid; gap:.55rem; }
.rule{
  display:flex; gap:.65rem; align-items:flex-start;
  padding:.75rem .8rem;
  border-radius: 16px;
  border: 1px solid rgba(229,231,235,0.92);
  background: rgba(255,255,255,0.88);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}
.rule.rule-col{
  display:block;
}
.rule.rule-col b { color:#e2e8f0; }
.rule.rule-col small { color:#94a3b8; display:block; margin-top:.15rem; }
.rule.rule-col .icon { color:#00e0ff; }
.rule .icon{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.16);
  color: #1d4ed8;
  font-weight: 900;
  flex: 0 0 auto;
  margin-top:.05rem;
}
.rule b{ display:block; margin-bottom:.15rem; }
.rule small{ display:block; color: var(--muted); line-height:1.45; }

/* Logos strip */
.strip{
  margin-top: 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(229,231,235,0.75);
  border-bottom: 1px solid rgba(229,231,235,0.75);
  background: rgba(255,255,255,0.46);
  backdrop-filter: blur(10px);
}
.strip .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .9rem;
  flex-wrap:wrap;
}
.strip .row span{ color: var(--muted2); font-weight: 700; font-size:.9rem; }
.logos{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.logo-pill{
  padding:.38rem .62rem;
  border-radius: 999px;
  border: 1px dashed rgba(107,114,128,0.35);
  color: rgba(107,114,128,0.95);
  font-weight: 800;
  font-size:.82rem;
  background: rgba(255,255,255,0.70);
}

/* Sections */
section{ padding: 2.2rem 0; }
.section-title{ font-size: 1.7rem; margin:0 0 .4rem; }
.section-sub{ margin:0 0 1.25rem; color: var(--muted); max-width: 85ch; line-height: 1.55; }
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}
@media(max-width: 980px){ .grid{ grid-template-columns: 1fr; } }
.card{
  background: var(--card);
  border: 1px solid rgba(229,231,235,0.95);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 1.15rem 1.1rem;
}
.card h4{ margin:.15rem 0 .35rem; font-size: 1.05rem; }
.card p{ margin:0; color: var(--muted); line-height: 1.55; }

/* Cartes "Comment ça fonctionne" — priorité maximale */
.card.how-card-1{
  border:2px solid #00b4ff !important;
  background:rgba(0,0,0,0.75) !important;
  box-shadow:0 6px 28px rgba(0,180,255,0.35) !important;
  animation:howFloat1 3s ease-in-out infinite !important;
  color:#fff !important;
}
.card.how-card-2{
  border:2px solid #a855f7 !important;
  background:rgba(0,0,0,0.75) !important;
  box-shadow:0 6px 28px rgba(168,85,247,0.35) !important;
  animation:howFloat2 3s ease-in-out infinite 0.7s !important;
  color:#fff !important;
}
.card.how-card-3{
  border:2px solid #10b981 !important;
  background:rgba(0,0,0,0.75) !important;
  box-shadow:0 6px 28px rgba(16,185,129,0.35) !important;
  animation:howFloat3 3s ease-in-out infinite 1.4s !important;
  color:#fff !important;
}
.card.how-card-1 h3,.card.how-card-1 h4,.card.how-card-1 p{ color:#fff !important; }
.card.how-card-2 h3,.card.how-card-2 h4,.card.how-card-2 p{ color:#fff !important; }
.card.how-card-3 h3,.card.how-card-3 h4,.card.how-card-3 p{ color:#fff !important; }
.card.how-card-1 strong{ color:#00b4ff !important; }
.card.how-card-2 strong{ color:#a855f7 !important; }
.card.how-card-3 strong{ color:#10b981 !important; }
.two{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 1rem;
  align-items:start;
}
@media(max-width: 980px){ .two{ grid-template-columns: 1fr; } }

/* Pricing */
.pricing{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.2rem;
}
@media(max-width: 980px){ .pricing{ grid-template-columns: 1fr; } }
.price{
  background: linear-gradient(145deg, rgba(13,22,45,0.95), rgba(9,16,35,0.98));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius2);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
  padding: 1.5rem 1.3rem;
  position:relative;
  overflow:hidden;
  color:#fff;
  transition: transform .2s, box-shadow .2s;
}
.price:hover{ transform: translateY(-3px); box-shadow: 0 14px 55px rgba(0,0,0,0.55); }
.price.pop{
  border-color: rgba(37,99,235,0.45);
  box-shadow: 0 0 0 1px rgba(37,99,235,0.3), 0 22px 70px rgba(37,99,235,0.22);
  transform: translateY(-5px);
  background: linear-gradient(145deg, rgba(15,26,60,0.98), rgba(10,18,45,0.99));
}
.price.pop:hover{ transform: translateY(-8px); }
.price .top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.price h3{ color:#fff; }
.price .tag{
  font-size:.72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding:.22rem .55rem;
  border-radius: 999px;
  background: rgba(37,99,235,0.18);
  border: 1px solid rgba(37,99,235,0.35);
  color:#93c5fd;
  white-space:nowrap;
}
.amount{
  font-size: 2.2rem;
  font-weight: 950;
  margin: .7rem 0 .25rem;
  background: linear-gradient(135deg, #60a5fa, #22d3ee);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.price .note{ color: rgba(255,255,255,0.45); margin:0 0 .9rem; font-size:.84rem; }
.ul{ margin:.6rem 0 0; padding-left: 1.1rem; }
.ul li{ margin:.45rem 0; color: rgba(255,255,255,0.7); line-height:1.45; font-size:.88rem; }

/* FAQ */
details{
  background:#fff;
  border: 1px solid rgba(229,231,235,0.95);
  border-radius: 16px;
  box-shadow: var(--shadow2);
  padding:.9rem 1rem;
  margin:.7rem 0;
}
summary{ cursor:pointer; font-weight: 850; }
details p{ margin:.55rem 0 0; color: var(--muted); line-height:1.55; }

/* Modals */
.modal{
  display:none;
  position:fixed; inset:0;
  z-index:999;
  background: rgba(15,23,42,0.55);
  padding: 1rem;
  overflow:auto;
  backdrop-filter: blur(8px);
}
.modal.show{ display:flex; align-items:center; justify-content:center; }
.modal-content{
  width: min(900px, 96vw);
  border-radius: 26px;
  border: 1px solid rgba(0,224,255,0.18);
  background: rgba(8,10,22,0.97);
  box-shadow: 0 30px 100px rgba(15,23,42,0.22);
  padding: 1.25rem 1.25rem;
  position:relative;
}

/* CV Builder — thème sombre forcé */
#cvBuilderModal .modal-content {
  background: rgba(10,12,24,0.97);
  border: 1px solid rgba(0,224,255,0.2);
  color: #fff;
}
#cvBuilderModal .modal-content h2,
#cvBuilderModal .modal-content p,
#cvBuilderModal .modal-content label {
  color: rgba(255,255,255,0.9);
}
#cvBuilderModal .modal-content .subline {
  color: rgba(255,255,255,0.55);
}
#cvBuilderModal .modal-close {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: #fff;
}
.modal-close{
  position:absolute; top:.85rem; right:.85rem;
  cursor:pointer;
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(229,231,235,0.9);
  background: rgba(255,255,255,0.9);
  color: var(--text);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 20px rgba(15,23,42,0.10);
  font-weight: 900;
}
.modal h2{ margin:.1rem 0 .3rem; }
.modal .subline{ margin:0 0 1rem; color: var(--muted); }
.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .9rem;
}
@media(max-width: 740px){ .form-grid{ grid-template-columns: 1fr; } }
label{
  display:block;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(75,85,99,0.95);
  margin:0 0 .25rem;
  font-weight: 800;
}
input,select,textarea{
  width:100%;
  padding:.78rem .8rem;
  border-radius: 14px;
  border:1px solid rgba(229,231,235,0.98);
  background: rgba(255,255,255,0.95);
  color: var(--text);
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .12s ease;
  font-size:.98rem;
  box-shadow: 0 6px 14px rgba(15,23,42,0.05);
}
input:focus,select:focus,textarea:focus{
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.16), 0 10px 20px rgba(15,23,42,0.07);
}
.modal-actions{
  display:flex; gap:.7rem; flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-top: .95rem;
}
.tiny{ font-size:.9rem; color: var(--muted); line-height:1.45; max-width: 80ch; }

/* Demo table */
table{ width:100%; border-collapse:collapse; margin-top:.8rem; font-size:.95rem; }
th,td{ padding:.8rem .65rem; border-bottom: 1px solid rgba(229,231,235,0.95); vertical-align:top; }
th{ text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; color: rgba(107,114,128,0.95); text-align:left; }
tr:hover td{ background: rgba(37,99,235,0.03); }
#recruiterCvTableBody tr td { background: inherit; transition: background .15s; }
#recruiterCvTableBody tr:hover td { background: rgba(255,255,255,0.04) !important; }
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.22rem .55rem;
  border-radius: 999px;
  font-weight: 850;
  font-size:.78rem;
  border: 1px solid rgba(229,231,235,0.95);
  background: rgba(255,255,255,0.85);
  color: var(--muted);
}
.chip.blue{ border-color: rgba(37,99,235,0.22); background: rgba(37,99,235,0.06); color:#1d4ed8;}
.chip.green{ border-color: rgba(34,197,94,0.22); background: rgba(34,197,94,0.07); color:#14532d;}
.chip.amber{ border-color: rgba(245,158,11,0.25); background: rgba(245,158,11,0.10); color:#7c2d12;}

/* Final CTA */
.final{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(229,231,235,0.85);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 1.55rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.final:before{
  content:"";
  position:absolute;
  inset:auto -120px -180px auto;
  width: 420px; height: 420px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(6,182,212,0.26), rgba(37,99,235,0.12), transparent 70%);
}
.final h3{ margin:.15rem 0 .35rem; font-size: 1.35rem; }
.final p{ margin:0; color: var(--muted); max-width: 70ch; line-height:1.55; }

footer{
  background: linear-gradient(180deg, rgba(6,12,24,0) 0%, rgba(5,9,20,0.98) 6%);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 3rem 2rem 1.5rem;
  margin-top: 2rem;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto 2rem;
}
@media(max-width:820px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media(max-width:480px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-col{ display:flex; flex-direction:column; gap:.5rem; }
.footer-col-title{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.35);
  margin-bottom:.3rem;
}
.footer-col a{
  font-size:.82rem;
  color:rgba(255,255,255,0.45);
  text-decoration:none;
  transition:color .15s;
}
.footer-col a:hover{ color:#60a5fa; }
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.75rem;
  max-width:1100px;
  margin:0 auto;
  padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,0.06);
  font-size:.74rem;
  color:rgba(255,255,255,0.22);
}

/* Toast */
.toast{
  position:fixed;
  right: 1rem; bottom: 1rem;
  z-index: 1000;
  padding: .75rem .95rem;
  border-radius: 999px;
  background: rgba(15,23,42,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 55px rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.92);
  opacity:0;
  transform: translateY(12px);
  transition: opacity .18s ease, transform .18s ease;
  font-size:.92rem;
  max-width: min(680px, 92vw);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.toast.show{ opacity:1; transform: translateY(0); }
.toast.ok{ border-color: rgba(34,197,94,0.30); }
.toast.err{ border-color: rgba(239,68,68,0.30); }

/* PRE-INTRO */
#pre-intro-overlay{
  position:fixed; inset:0;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  z-index:10000;
  padding: 1.2rem;
}
.pre-inner{ width: min(1050px, 92vw); text-align:center; }
.pre-line{
  color: rgba(255,255,255,0.88);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-shadow: 0 14px 55px rgba(0,0,0,0.85);
}
.pre-line.l1{
  font-weight: 900;
  font-size: clamp(1.35rem, 2.4vw, 2.15rem);
  line-height: 1.15;
  opacity:0;
  animation: preFade 0.7s ease forwards;
}
.pre-line.l2{
  margin-top:.9rem;
  font-weight: 850;
  font-size: clamp(1.15rem, 2.1vw, 1.85rem);
  line-height: 1.18;
  opacity:0;
  animation: preFade 0.7s ease forwards;
  animation-delay: .45s;
  color: rgba(255,255,255,0.80);
}
.pre-line.l3{
  margin-top: 1.05rem;
  font-weight: 950;
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  letter-spacing:.18em;
  opacity:0;
  animation: preFade 0.65s ease forwards;
  animation-delay: .95s;
  color: rgba(255,255,255,0.78);
}
@keyframes preFade{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}

/* INTRO CINÉ */
#intro-overlay{
  position:fixed; inset:0;
  background:#000;
  display:flex; justify-content:center; align-items:center;
  overflow:hidden;
  z-index:9999;
}
#particles{ position:absolute; inset:0; z-index:1; }
@keyframes introPulse{
  from{ transform:scale(1); filter:drop-shadow(0 0 30px rgba(0,224,255,0.6)) drop-shadow(0 0 60px rgba(180,0,255,0.4)); }
  to{ transform:scale(1.07); filter:drop-shadow(0 0 55px rgba(0,224,255,0.95)) drop-shadow(0 0 100px rgba(180,0,255,0.7)); }
}
.intro-text{
  position:relative; text-align:center;
  z-index:3; animation:fadeInUp 1.2s ease forwards; display:flex; flex-direction:column; align-items:center;
}
.intro-small{ font-size:2.5rem; letter-spacing:5px; opacity:0.8; }
.intro-big{
  font-size:6rem; font-weight:900;
  background:linear-gradient(90deg,#00f5ff,#ffffff,#00f5ff);
  background-size:200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradientFlow 3s infinite;
}
@keyframes gradientFlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.flash{
  position:absolute;
  width:200px; height:200px;
  background:radial-gradient(circle,#ffffff 0%,#00f5ff 40%,transparent 70%);
  border-radius:50%;
  opacity:0; z-index:2;
}
.shockwave{
  position:absolute;
  width:200px; height:200px;
  border-radius:50%;
  border:4px solid #00f5ff;
  opacity:0; z-index:2;
}

/* Offer matching controls */
.offer-controls{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:10px}
.offer-controls .ctl{display:flex;flex-direction:column;gap:6px}
.offer-controls label{font-size:12px;opacity:.85}
.offer-controls .range{display:flex;align-items:center;gap:10px}
.offer-controls input[type=range]{width:180px}
.offer-controls select{height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.12);color:inherit;padding:0 10px}
.offer-controls .hint{font-size:12px;opacity:.75;flex:1;min-width:240px}
.offer-controls .dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:#27cba5;margin-right:8px;vertical-align:middle}

/* Fond cinématique */
body{ background: transparent !important; }
#bg-slideshow{
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
  background: #0b1220;
}
#bg-slideshow .bg-slide{
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.25s ease, transform 6s ease;
  will-change: opacity, transform;
}
#bg-slideshow .bg-slide.active{
  opacity: 1;
  transform: scale(1);
}
#bg-slideshow::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(11,18,32,0.28), rgba(11,18,32,0.18));
}

/* --- CV Blur Preview (modal protégé) --- */
.cv-blur-preview{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
  margin: .5rem 0;
}
.cv-blur-line{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  margin-bottom: .55rem;
}
.cv-blur-line.w80{ width: 80%; }
.cv-blur-line.w60{ width: 60%; }
.cv-blur-line.w90{ width: 90%; }
.cv-blur-line.w70{ width: 70%; }
.cv-blur-line.w85{ width: 85%; }
.cv-blur-line.w50{ width: 50%; }
.cv-blur-line.w65{ width: 65%; }
.cv-blur-line.w75{ width: 75%; }
.cv-blur-sep{
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: .7rem 0;
}

/* --- Viewer PDF canvas --- */
#cvViewerPages canvas{
  border-radius: 10px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.55);
  max-width: 100%;
  display: block;
}
#cvViewerPages{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}

/* --- Badge notifications --- */
#notifBadge{
  animation: notif-pulse 2s ease-in-out infinite;
}
@keyframes notif-pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.18); }
}

@keyframes livePulse{
  0%,100%{ opacity:.4; }
  50%{ opacity:1; }
}

/* --- Panel notifications candidat --- */
.notif-card{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .85rem 1rem;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
}
.notif-card .notif-info{ flex:1; min-width:180px; }
.notif-card .notif-info b{ display:block; font-size:.95rem; }
.notif-card .notif-info small{ color:var(--muted); font-size:.83rem; }
.notif-card .notif-actions{ display:flex; gap:.45rem; flex-shrink:0; }
.granted-card{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  padding: .6rem .85rem;
  border-radius: 12px;
  background: rgba(0,200,100,0.06);
  border: 1px solid rgba(0,200,100,0.18);
  font-size: .88rem;
}

/* ============================================================
   CV BUILDER STYLES
   ============================================================ */
.cvb-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: .75rem;
}
@media (max-width: 520px) {
  .cvb-grid2 { grid-template-columns: 1fr; }
}
.cvb-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .65rem;
}
.cvb-field label {
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.cvb-field input,
.cvb-field select,
.cvb-field textarea {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: .6rem .85rem;
  color: #fff;
  font-size: .88rem;
  outline: none;
  transition: border-color .2s;
  width: 100%;
  box-sizing: border-box;
}
.cvb-field input:focus,
.cvb-field select:focus,
.cvb-field textarea:focus {
  border-color: rgba(0,224,255,0.5);
}
.cvb-field textarea { resize: vertical; min-height: 70px; }
.cvb-hint {
  font-size: .77rem;
  color: rgba(255,255,255,0.45);
  margin-top: .2rem;
  line-height: 1.5;
}
.cvb-tip-box {
  background: rgba(0,224,255,0.05);
  border: 1px solid rgba(0,224,255,0.2);
  border-radius: 12px;
  padding: .8rem 1rem;
}
.cvb-entry-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: .85rem;
}
.cvb-add-btn {
  width: 100%;
  background: rgba(0,224,255,0.06);
  border: 1px dashed rgba(0,224,255,0.35);
  border-radius: 12px;
  color: rgba(0,224,255,0.9);
  padding: .65rem;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  transition: background .2s;
}
.cvb-add-btn:hover { background: rgba(0,224,255,0.12); }

/* Templates grid */
.cvb-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: .75rem;
}
.cvb-tpl-card {
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 1rem .85rem;
  cursor: pointer;
  position: relative;
  transition: border-color .2s, background .2s;
  text-align: center;
}
.cvb-tpl-card:hover { background: rgba(255,255,255,0.07); }
.cvb-tpl-card.selected { border-color: #00e0ff; background: rgba(0,224,255,0.08); }
.cvb-tpl-card.premium { opacity: .7; cursor: default; }
.cvb-tpl-flag { font-size: 1.8rem; margin-bottom: .4rem; }
.cvb-tpl-name { font-weight: 700; font-size: .88rem; color: #fff; margin-bottom: .25rem; }
.cvb-tpl-desc { font-size: .76rem; color: rgba(255,255,255,0.55); line-height: 1.45; }
.cvb-tpl-premium-badge {
  position: absolute;
  top: .4rem; right: .4rem;
  background: linear-gradient(135deg,#7c3aed,#f59e0b);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  padding: .15rem .45rem;
  border-radius: 999px;
}
.cvb-tpl-free-badge {
  position: absolute;
  top: .4rem; right: .4rem;
  background: rgba(0,200,100,0.2);
  color: #4ade80;
  font-size: .65rem;
  font-weight: 800;
  padding: .15rem .45rem;
  border-radius: 999px;
  border: 1px solid rgba(74,222,128,0.3);
}
.cvb-tpl-lock {
  margin-top: .5rem;
  font-size: .73rem;
  color: rgba(124,58,237,0.9);
  font-weight: 600;
}

/* Template preview thumbnail */
.cvb-tpl-preview {
  width: 100%;
  height: 65px;
  border-radius: 8px;
  margin-bottom: .6rem;
  border: 1px solid rgba(255,255,255,0.1);
}
.cvb-tpl-card.selected .cvb-tpl-preview {
  border-color: #00e0ff;
  box-shadow: 0 0 0 2px rgba(0,224,255,0.3);
}

/* Color swatches */
.cvb-color-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid transparent;
  transition: border-color .2s, transform .15s;
}
.cvb-color-swatch:hover { transform: scale(1.15); }
.cvb-color-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}

/* ============================================================
   CV BUILDER v4 — Galerie + Éditeur
   ============================================================ */

/* Galerie */
.cvb-gallery-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: .75rem;
}
.cvb-gallery-colors {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: .6rem .8rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
}
.cvb-g-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2.5px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s, border-color .15s;
  flex-shrink: 0;
}
.cvb-g-swatch:hover { transform: scale(1.2); }
.cvb-g-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }

.cvb-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: .85rem;
}
.cvb-g-card {
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.cvb-g-card:hover {
  border-color: rgba(0,224,255,0.5);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.cvb-g-card-preview {
  position: relative;
  background: #fff;
  overflow: hidden;
  aspect-ratio: 210/297;
}
.cvb-g-card-preview svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cvb-g-card-tag {
  position: absolute;
  top: .4rem;
  right: .4rem;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.cvb-g-card-info {
  padding: .6rem .7rem .7rem;
}
.cvb-g-card-name { font-weight: 700; font-size: .88rem; color: #fff; margin-bottom: .2rem; }
.cvb-g-card-desc { font-size: .73rem; color: rgba(255,255,255,0.5); line-height: 1.45; }

/* Éditeur plein écran */
#cvbEditorOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0c18;
  display: flex;
  flex-direction: column;
}
.cvb-editor-wrap {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.cvb-editor-form {
  width: 42%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  background: rgba(10,12,24,0.98);
  border-right: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.cvb-editor-form-header {
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}
.cvb-back-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: rgba(255,255,255,0.7);
  padding: .3rem .75rem;
  cursor: pointer;
  font-size: .78rem;
  transition: background .2s;
  white-space: nowrap;
}
.cvb-back-btn:hover { background: rgba(255,255,255,0.12); }
.cvb-editor-form-body {
  flex: 1;
  overflow-y: auto;
  padding: .75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.cvb-editor-form-footer {
  padding: .75rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.cvb-btn-generate {
  width: 100%;
  background: linear-gradient(135deg, #00e0ff, #2563eb);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  padding: .85rem;
  cursor: pointer;
  transition: opacity .2s;
}
.cvb-btn-generate:hover { opacity: .9; }
.cvb-btn-generate:disabled { opacity: .5; cursor: default; }

/* Form sections (accordéon) */
.cvb-form-section { margin-bottom: .5rem; }
.cvb-form-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .7rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  user-select: none;
  transition: background .2s;
}
.cvb-form-section-title:hover { background: rgba(255,255,255,0.08); }
.cvb-chevron { font-size: .7rem; opacity: .6; }
.cvb-form-section-body {
  padding: .65rem .5rem .3rem;
  border: 1px solid rgba(255,255,255,0.06);
  border-top: none;
  border-radius: 0 0 10px 10px;
  margin-top: -2px;
}
.cvb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .4rem; }
@media (max-width: 480px) { .cvb-row2 { grid-template-columns: 1fr; } }

/* Panneau droit : aperçu */
.cvb-editor-preview {
  flex: 1;
  background: #1a1d2e;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding: 1rem;
}
.cvb-editor-preview-label {
  font-size: .75rem;
  font-weight: 700;
  color: rgba(0,224,255,0.7);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .75rem;
}
.cvb-preview-a4-wrap {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 210/297;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  border-radius: 4px;
  overflow: hidden;
}
.cvb-preview-a4 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 7.5pt;
  transform-origin: top left;
}

.pwd-wrap{position:relative;display:flex;align-items:center;}
.pwd-wrap input{flex:1;padding-right:2.4rem !important;}
.pwd-eye{position:absolute;right:.5rem;background:none;border:none;cursor:pointer;font-size:1rem;opacity:.4;padding:0;line-height:1;color:inherit;transition:opacity .2s;}
.pwd-eye:hover{opacity:.85;}

/* ══════════════════════════════════════════
   CARTES CHAMPS FORMULAIRE (cv-field-card)
══════════════════════════════════════════ */
.cv-field-card {
  transition: transform .18s, box-shadow .18s;
  cursor: text;
}
.cv-field-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.cv-field-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.6), 0 0 0 2px rgba(0,224,255,0.25);
}
.cv-field-card input::placeholder { color: rgba(148,163,184,0.55) !important; }
/* Placeholders visibles dans les champs photo recruteur */
#recruiterModal input::placeholder, #recruiterModal select { color: rgba(255,255,255,0.85) !important; }
#recruiterModal input { color: #ffffff !important; }
.cv-field-card select {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  color: #fff !important;
}
/* Override .card blanc dans cvModal */
#cvModal .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Animation entrée formulaire candidat */
#cvModal .modal-content {
  animation: cvModalIn .35s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes cvModalIn {
  from { opacity: 0; transform: scale(0.93) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Overlay modal */
#cvViewerModal { z-index: 12000 !important; }
#cvModal.modal {
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(5px);
}

/* Carte principale — fond CHARCOAL harmonieux */
#cvModal .modal-content {
  background:
    radial-gradient(ellipse 65% 45% at 0% 0%,   rgba(255,255,255,0.025) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 100% 100%, rgba(255,255,255,0.018) 0%, transparent 50%),
    #1c1c1e;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 40px 120px rgba(0,0,0,0.75);
  border-radius: 22px;
  overflow: hidden;
}

/* Titre */
#cvModal h2 {
  color: #f9fafb !important;
  -webkit-text-fill-color: #f9fafb !important;
  background: none !important;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -.03em;
}

/* Sous-titre */
#cvModal .subline { color: rgba(156,163,175,0.85); }

/* Labels */
#cvModal label { color: rgba(156,163,175,0.9); }

/* Bouton fermer */
#cvModal .modal-close {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
}
#cvModal .modal-close:hover {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.4);
  color: #fca5a5;
  box-shadow: none;
}

/* Liens */
#cvModal a { color: #93c5fd; }
#cvModal a:hover { color: #bfdbfe; text-shadow: none; }

/* Petits textes */
#cvModal .tiny { color: rgba(107,114,128,0.9); }

/* Override .card */
#cvModal .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Séparateur colonnes */
#cvModal .two {
  gap: 0 !important;
  grid-template-columns: 1fr auto 1fr !important;
}
#cvModal .two > div:first-child {
  border-right: none !important;
  padding-right: 2.5rem !important;
}
#cvModal .two > div:last-child {
  background: rgba(255,255,255,0.02) !important;
  padding-left: 2.5rem !important;
}
#cvModal .cv-modal-divider {
  width: 1px;
  background: rgba(255,255,255,0.1);
  align-self: stretch;
  margin: 0;
}

/* Titre section Inscription */
#cvModal .two > div:first-child h3 { color: #f9fafb !important; }
#cvModal .two > div:first-child > div:first-child { border-bottom-color: rgba(99,102,241,0.3) !important; }
#cvModal .two > div:first-child > div:first-child span:last-child {
  background: rgba(99,102,241,0.15) !important;
  color: rgba(165,180,252,0.9) !important;
}

/* Titre section Connexion */
#cvModal .two > div:last-child {
  background: rgba(255,255,255,0.02) !important;
}
#cvModal .two > div:last-child h3 { color: #f9fafb !important; }
#cvModal .two > div:last-child > div:first-child { border-bottom-color: rgba(245,158,11,0.3) !important; }
#cvModal .two > div:last-child > div:first-child span:last-child {
  background: rgba(245,158,11,0.12) !important;
  color: rgba(253,211,118,0.9) !important;
}

/* Chat IA */
#cvModal [style*="rgba(99,102,241,0.12)"] {
  background: rgba(99,102,241,0.1) !important;
  border-color: rgba(139,92,246,0.3) !important;
}

/* Bouton Se connecter */
#cvModal #loginBtn {
  background: linear-gradient(135deg,#6366f1,#8b5cf6) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(99,102,241,0.4) !important;
}

/* Bouton Inscription */
#cvModal #submitCvBtn {
  background: linear-gradient(135deg,#2563eb,#6366f1) !important;
  box-shadow: 0 4px 20px rgba(37,99,235,0.35) !important;
}

/* Info text */
#cvModal .tiny, #cvModal p.tiny { color: rgba(156,163,175,0.8); }

/* Barre top — désactivée */
#cvModal .modal-content::before { display: none; }

/* (barre shimmer désactivée — fond blanc) */
@keyframes shimmerBar {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Titres H2 */
#cvModal h2 {
  background: linear-gradient(90deg, #ffffff 0%, #b8d4ff 50%, #00e0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: .2rem;
}

/* Sous-titres */
#cvModal .subline {
  color: rgba(148,163,184,0.7);
  font-size: .8rem;
  letter-spacing: .04em;
}

/* Labels des champs */
#cvModal label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.9);
  margin-bottom: .32rem;
}

/* ── INPUTS / SELECT / TEXTAREA ── */
#cvModal input:not([type="file"]),
#cvModal select,
#cvModal textarea {
  width: 100%;
  background: rgba(15,23,42,0.7);
  border: 1.5px solid rgba(71,85,105,0.55);
  color: #e2e8f0;
  border-radius: 12px;
  padding: .75rem 1rem;
  font-size: .9rem;
  transition: border-color .22s, box-shadow .22s, background .22s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35) inset;
  outline: none;
  -webkit-appearance: none;
}

#cvModal input::placeholder,
#cvModal textarea::placeholder {
  color: rgba(100,116,139,0.6);
}

#cvModal select option {
  background: #0f172a;
  color: #cbd5e1;
}

/* Focus : lueur néon cyan */
#cvModal input:not([type="file"]):focus,
#cvModal select:focus,
#cvModal textarea:focus {
  border-color: rgba(0,224,255,0.55);
  background: rgba(0,224,255,0.04);
  box-shadow:
    0 0 0 3px rgba(0,224,255,0.14),
    0 0 20px rgba(0,224,255,0.08),
    0 2px 8px rgba(0,0,0,0.3) inset;
}

/* Hover subtle */
#cvModal input:not([type="file"]):hover:not(:focus),
#cvModal select:hover:not(:focus) {
  border-color: rgba(100,116,139,0.9);
}

/* Icône oeil mot de passe */
#cvModal .pwd-eye {
  color: rgba(100,116,139,0.8);
}
#cvModal .pwd-eye:hover {
  color: #00e0ff;
}

/* ── UPLOAD FICHIER ── */
#cvModal input[type="file"] {
  width: 100%;
  padding: 1rem;
  border: 2px dashed rgba(0,224,255,0.35);
  background: rgba(0,224,255,0.03);
  border-radius: 14px;
  color: rgba(148,163,184,0.7);
  cursor: pointer;
  font-size: .85rem;
  transition: border-color .2s, background .2s;
  text-align: center;
}
#cvModal input[type="file"]:hover {
  border-color: rgba(0,224,255,0.65);
  background: rgba(0,224,255,0.07);
}

/* ── BOUTON PRINCIPAL (Créer mon compte) ── */
#cvModal #submitCvBtn,
#cvModal button.btn-primary {
  width: 100%;
  padding: .9rem 1.5rem;
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 60%, #8b5cf6 100%);
  border: none;
  border-radius: 14px;
  color: #ffffff;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 28px rgba(99,102,241,0.45), 0 1px 0 rgba(255,255,255,0.12) inset;
  transition: transform .2s, box-shadow .2s;
}
#cvModal #submitCvBtn::after,
#cvModal button.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.12), transparent);
  border-radius: 14px;
}
#cvModal #submitCvBtn:hover,
#cvModal button.btn-primary:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 40px rgba(99,102,241,0.6), 0 1px 0 rgba(255,255,255,0.15) inset;
}

/* ── BOUTON SE CONNECTER ── */
#cvModal #loginBtn {
  width: 100%;
  padding: .9rem 1.5rem;
  background: linear-gradient(135deg, #00e0ff 0%, #0ea5e9 100%);
  border: none;
  border-radius: 14px;
  color: #030712;
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,224,255,0.4), 0 1px 0 rgba(255,255,255,0.3) inset;
  transition: transform .2s, box-shadow .2s;
}
#cvModal #loginBtn:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 36px rgba(0,224,255,0.55);
}

/* ── BOUTON VOIR CV AVANT ENVOI ── */
#cvModal button[onclick*="previewCv"],
#cvModal button[onclick*="Voir"] {
  width: 100%;
  padding: .75rem 1.2rem;
  background: rgba(0,224,255,0.07);
  border: 1.5px solid rgba(0,224,255,0.4);
  border-radius: 12px;
  color: #7dd3fc;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, border-color .2s;
}
#cvModal button[onclick*="previewCv"]:hover,
#cvModal button[onclick*="Voir"]:hover {
  background: rgba(0,224,255,0.13);
  border-color: rgba(0,224,255,0.7);
  box-shadow: 0 0 24px rgba(0,224,255,0.18);
}

/* ── LIENS (mot de passe oublié etc) ── */
#cvModal a {
  color: #7dd3fc;
  text-decoration: none;
  font-weight: 600;
  transition: color .18s, text-shadow .18s;
}
#cvModal a:hover {
  color: #00e0ff;
  text-shadow: 0 0 12px rgba(0,224,255,0.5);
}

/* ── ENCADRÉ CHAT IA ── */
#cvModal [class*="chat"],
#cvModal [id*="aiChat"],
#cvModal [id*="chatBox"] {
  background: rgba(15,20,40,0.7) !important;
  border: 1px solid rgba(99,102,241,0.3) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(8px);
}

/* ── INFO BOX (texte après connexion) ── */
#cvModal .info-box,
#cvModal [style*="background: rgba(0,224"] {
  background: rgba(0,224,255,0.06) !important;
  border: 1px solid rgba(0,224,255,0.2) !important;
  border-radius: 14px;
  padding: .9rem 1.1rem;
  color: rgba(186,230,253,0.9) !important;
  font-size: .83rem;
}

/* ── SÉPARATEUR COLONNES ── */
#cvModal .modal-divider {
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,224,255,0.3) 25%,
    rgba(99,102,241,0.3) 75%,
    transparent 100%);
  align-self: stretch;
  margin: 0 .5rem;
}

/* ── BOUTON FERMER ── */
#cvModal .modal-close {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(148,163,184,0.7);
  z-index: 10;
}
#cvModal .modal-close:hover {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.45);
  color: #fca5a5;
  box-shadow: 0 0 16px rgba(239,68,68,0.2);
}

/* ── SECTION ENCART "Pas de CV?" ── */
#cvModal [style*="border-radius"][style*="border:"] {
  border-color: rgba(99,102,241,0.35) !important;
  background: rgba(99,102,241,0.07) !important;
  border-radius: 16px !important;
}

/* ── PILLS STATUT RECHERCHE ── */
#cvModal select#cvStatus option { color: #e2e8f0; }

/* ── ANIMATION ENTRÉE ── */
#cvModal .modal-content {
  animation: cvModalIn .35s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes cvModalIn {
  from { opacity: 0; transform: scale(0.93) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ===================== RESPONSIVE MOBILE ===================== */
@media (max-width: 768px) {
  .nav-links { display: none !important; }
  .nav-actions > *:not(#mobileMenuBtn):not(#candidateLogoutBtn):not(#candidateNotifBtn) { display: none !important; }
  #mobileMenuBtn { display: flex !important; visibility:visible !important; opacity:1 !important; }
  .hero { flex-direction: column; text-align: center; padding: 2rem 1rem; gap: 1.5rem; }
  .hero h1 { font-size: 1.8rem; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns .btn { text-align: center; }
  section { padding: 2.5rem 1rem; }
  .section-title { font-size: 1.5rem; }
  .section-sub { font-size: .88rem; }
  .steps { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .price.pop { transform: none; }
  table { font-size: .78rem; }
  .table-wrap, .cv-table-wrap, #cvTableWrapper, #aiResultsTable { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; }
  th, td { padding: .5rem .4rem !important; white-space: nowrap; }
  .modal { align-items: flex-end; padding: 0; }
  .modal-content { border-radius: 18px 18px 0 0 !important; max-width: 100% !important; width: 100% !important; max-height: 92vh; overflow-y: auto; padding: 1.2rem 1rem 2rem !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: .5rem; }
  #aiFloatingBtn { bottom: 5rem !important; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 1.5rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .modal-content { padding: 1rem .8rem 2rem !important; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .nav-links { display: none !important; }
  .nav-desktop { display: none !important; }
  #mobileMenuBtn { display: flex !important; }
  .hero { flex-direction: row; padding: 1rem; gap: 1rem; }
  .hero h1 { font-size: 1.4rem; }
  section { padding: 1.5rem 1rem; }
}
.ham-bar { display: block; width: 20px; height: 2px; background: #111827; border-radius: 2px; transition: .2s; }

/* Cache les éléments desktop sur mobile */
@media (max-width: 768px) {
  .nav-desktop { display: none !important; }
  .nav-links { display: none !important; }
  #mobileMenuBtn { display: flex !important; }
}