/* ==========================================================================
   Hirable - SaaS IA de Candidature
   Styles personnalisés, animations, thèmes & impression A4 haute fidélité
   ========================================================================== */

:root {
  --primary: #2a7faa; /* Hirable : bleu */
  --primary-dark: #1d2f55; /* Hirable : marine */
  --primary-light: #50b9b2; /* Hirable : cyan */
  --brand-mint: #5bd3ad;
  --brand-ink: #102135;
  --accent: #f59e0b; /* Ambre / Or chaleureux */
  --dark-bg: #0f172a;
  --card-bg: #ffffff;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
}

/* Polices & Base */
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: var(--text-main);
  background-color: #f8fafc;
  scroll-behavior: smooth;
}

/* Glassmorphism & Cartes */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.glass-panel-dark {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dégradé signature Hirable (bleu → cyan → menthe, comme le logo) */
.gradient-cvtojob {
  background: linear-gradient(135deg, #1d2f55 0%, #2a7faa 60%, #3fa5a6 100%);
}

.gradient-text {
  background: linear-gradient(135deg, #2d88b5 0%, #50b9b2 60%, #5bd3ad 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-animated {
  background: linear-gradient(120deg, #2d88b5 0%, #50b9b2 25%, #5bd3ad 50%, #50b9b2 75%, #2d88b5 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

.gradient-accent {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
}

/* Éléments de Badge & Tags */
.badge-gold {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.badge-emerald {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

/* Animations d'étape, Flottements & Chargement */
@keyframes pulseSlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

.animate-pulse-slow {
  animation: pulseSlow 3s infinite ease-in-out;
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: floatSlow 4s infinite ease-in-out;
}

.animate-float-delayed {
  animation: floatSlow 4.5s infinite ease-in-out 1.5s;
}



@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Animation d'entrée douce Hero Header (Staggered Fade + Slide Up) */
@keyframes heroFadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate-1 {
  animation: heroFadeSlideUp 0.8s ease-out 0s both;
}

.hero-animate-2 {
  animation: heroFadeSlideUp 0.8s ease-out 0.15s both;
}

.hero-animate-3 {
  animation: heroFadeSlideUp 0.8s ease-out 0.3s both;
}

.hero-animate-4 {
  animation: heroFadeSlideUp 0.8s ease-out 0.45s both;
}

/* Animations de la zone interactive d'analyse & génération ATS */
@keyframes progressATS {
  0% { width: 0%; }
  55% { width: 98%; }
  90% { width: 98%; }
  100% { width: 0%; }
}

.animate-progress-ats {
  animation: progressATS 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes cardFloatStagger1 {
  0%, 100% { opacity: 0.92; transform: translateY(0px); }
  50% { opacity: 1; transform: translateY(-5px); }
}

@keyframes cardFloatStagger2 {
  0%, 100% { opacity: 0.92; transform: translateY(0px); }
  50% { opacity: 1; transform: translateY(-6px); }
}

@keyframes cardFloatStagger3 {
  0%, 100% { opacity: 0.96; transform: translateY(0px); }
  50% { opacity: 1; transform: translateY(-4px); }
}

.animate-card-stagger-1 {
  animation: cardFloatStagger1 4s ease-in-out infinite;
}

.animate-card-stagger-2 {
  animation: cardFloatStagger2 4.2s ease-in-out 0.8s infinite;
}

.animate-card-stagger-3 {
  animation: cardFloatStagger3 4.5s ease-in-out 1.6s infinite;
}

@keyframes subtleGlowPulse {
  0%, 100% { box-shadow: 0 0 15px -3px rgba(16, 185, 129, 0.15), 0 4px 6px -1px rgba(0, 0, 0, 0.05); }
  50% { box-shadow: 0 0 25px 2px rgba(16, 185, 129, 0.35), 0 10px 15px -3px rgba(0, 0, 0, 0.08); }
}

.animate-subtle-glow {
  animation: subtleGlowPulse 3s ease-in-out infinite;
}

/* Templates de CV */
.cv-container {
  width: 210mm;
  min-height: 297mm;
  background: #ffffff;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15);
  margin: 0 auto;
  box-sizing: border-box;
}

/* Template 1: Moderne (Barre latérale contrastée) */
.template-modern {
  display: grid;
  grid-template-columns: 72mm 138mm;
  min-height: 297mm;
}

.template-modern .sidebar {
  background: #0f172a;
  color: #f8fafc;
  padding: 24px 20px;
}

.template-modern .main-content {
  padding: 28px 26px;
  background: #ffffff;
}

/* Template 2: Executive (En-tête supérieur statutaire) */
.template-executive {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: #ffffff;
}

.template-executive .header-banner {
  border-bottom: 3px solid #059669;
  padding-bottom: 20px;
  margin-bottom: 24px;
}

/* Template 3: Minimaliste (ATS Optimal) */
.template-minimal {
  padding: 32px 36px;
  background: #ffffff;
  color: #111827;
  font-family: 'Inter', sans-serif;
}

.template-minimal h1 {
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Rendu Lettre de Motivation */
.letter-container {
  width: 210mm;
  min-height: 297mm;
  background: #ffffff;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15);
  margin: 0 auto;
  padding: 40px 45px;
  font-family: 'Plus Jakarta Sans', Georgia, serif;
  line-height: 1.7;
  color: #1e293b;
}

/* Media Query pour l'impression A4 et téléchargement PDF */
@media print {
  body * {
    visibility: hidden;
  }
  
  #printable-area, #printable-area * {
    visibility: visible;
  }
  
  #printable-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 210mm;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: none;
  }

  .no-print {
    display: none !important;
  }

  @page {
    size: A4 portrait;
    margin: 0;
  }
}

/* Responsive pour mobile & tablettes */
@media (max-width: 1024px) {
  .cv-preview-scale-wrapper {
  background: #cbd5e1;
  border-radius: 1.5rem;
  padding: 1.5rem;
  min-height: 650px;
  max-height: 850px;
  overflow-y: auto;
  overflow-x: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.cv-a4-canvas {
  width: 210mm;
  min-height: 297mm;
  background: #ffffff;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25), 0 5px 15px -3px rgba(0, 0, 0, 0.1);
  transform: scale(0.85);
  transform-origin: top center;
  transition: transform 0.2s ease-in-out;
  margin: 0 auto;
}
  
  .cv-scale-down {
    transform-origin: top left;
    transform: scale(0.75);
    margin-bottom: -70mm;
  }
}

@media (max-width: 640px) {
  .cv-scale-down {
    transform-origin: top left;
    transform: scale(0.5);
    margin-bottom: -140mm;
  }
}

/* ─────────────────────────────────────────────────────────────────
   RÈGLES D'IMPRESSION & EXPORT PDF A4 SANS COUPURE DE TEXTE
   ───────────────────────────────────────────────────────────────── */
.cv-a4-page {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  box-sizing: border-box;
}

.cv-section-title {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tmpl-primary, #059669);
  margin-bottom: 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--tmpl-secondary, #10b981);
}

.keep-together {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* ─────────────────────────────────────────────────────────────────
   STYLES DE SÉLECTION DU CATALOGUE DE 100 TEMPLATES
   ───────────────────────────────────────────────────────────────── */
.template-card-option {
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.template-card-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(45, 136, 181, 0.2);
}

.template-card-option.selected {
  border-color: #2d88b5 !important;
  background-color: rgba(45, 136, 181, 0.05) !important;
  box-shadow: 0 0 0 2px #2d88b5 !important;
}

/* ==========================================================================
   ANIMATION DU FLUX ET DES CARTES "COMMENT ÇA MARCHE" (SaaS Motion Design)
   ========================================================================== */
@keyframes flowLine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

@keyframes stepPulse1 {
  0%, 100% {
    border-color: rgba(226, 232, 240, 0.8);
    transform: translateY(0);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  }
  12%, 32% {
    border-color: rgba(16, 185, 129, 0.7);
    transform: translateY(-8px);
    box-shadow: 0 20px 35px -10px rgba(16, 185, 129, 0.25);
  }
}

@keyframes stepPulse2 {
  0%, 32%, 100% {
    border-color: rgba(226, 232, 240, 0.8);
    transform: translateY(0);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  }
  42%, 62% {
    border-color: rgba(20, 184, 166, 0.7);
    transform: translateY(-8px);
    box-shadow: 0 20px 35px -10px rgba(20, 184, 166, 0.25);
  }
}

@keyframes stepPulse3 {
  0%, 62%, 100% {
    border-color: rgba(226, 232, 240, 0.8);
    transform: translateY(0);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  }
  72%, 92% {
    border-color: rgba(245, 158, 11, 0.7);
    transform: translateY(-8px);
    box-shadow: 0 20px 35px -10px rgba(245, 158, 11, 0.25);
  }
}

.animate-flow-line {
  animation: flowLine 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-card-pulse-1 {
  animation: stepPulse1 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.animate-card-pulse-2 {
  animation: stepPulse2 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.animate-card-pulse-3 {
  animation: stepPulse3 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ─────────────────────────────────────────────────────────────────
   MICRO-ANIMATIONS INTERNES DES CARTES D'ÉTAPES
   ───────────────────────────────────────────────────────────────── */
@keyframes itemSlideIn1 {
  0%, 100% { opacity: 0.4; transform: translateX(-6px); }
  15%, 85% { opacity: 1; transform: translateX(0); }
}
@keyframes itemSlideIn2 {
  0%, 25%, 100% { opacity: 0.4; transform: translateX(-6px); }
  40%, 85% { opacity: 1; transform: translateX(0); }
}
@keyframes itemSlideIn3 {
  0%, 50%, 100% { opacity: 0.4; transform: translateX(-6px); }
  65%, 85% { opacity: 1; transform: translateX(0); }
}

.animate-item-1 { animation: itemSlideIn1 5s ease-in-out infinite; }
.animate-item-2 { animation: itemSlideIn2 5s ease-in-out infinite; }
.animate-item-3 { animation: itemSlideIn3 5s ease-in-out infinite; }

@keyframes scanLine {
  0% { top: 0%; opacity: 0.9; }
  50% { top: 85%; opacity: 0.9; }
  100% { top: 0%; opacity: 0.9; }
}
@keyframes barFill {
  0%, 100% { width: 35%; }
  50% { width: 98%; }
}
@keyframes chipPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.animate-scan-line { animation: scanLine 3s ease-in-out infinite; }
.animate-bar-fill { animation: barFill 4s ease-in-out infinite; }
.animate-chip-pulse { animation: chipPulse 2s ease-in-out infinite; }

@keyframes lineBuild {
  0%, 100% { width: 25%; opacity: 0.4; }
  50% { width: 95%; opacity: 1; }
}
@keyframes checkPop {
  0%, 60% { transform: scale(0.92); opacity: 0.7; }
  75%, 95% { transform: scale(1.05); opacity: 1; }
}

.animate-line-build-1 { animation: lineBuild 3s ease-in-out infinite; }
.animate-line-build-2 { animation: lineBuild 3s ease-in-out 0.4s infinite; }
.animate-check-pop { animation: checkPop 3s ease-in-out infinite; }


/* Titres de la page d'accueil Hirable : Montserrat, la police du logo.
   Classe à appliquer au cas par cas (jamais sur les titres des modèles de CV). */
.font-display {
  font-family: 'Montserrat', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: -0.02em;
}

/* FAQ : masque le petit triangle des balises <summary> (Safari / iOS) */
#faq summary::-webkit-details-marker { display: none; }
#faq summary { list-style: none; }

/* Lettre verrouillée avant paiement : la suite du texte (brouillée par le serveur) est floutée */
#letter-locked-view { min-height: 420px; }
#letter-locked-body .letter-locked-p { margin: 0 0 0.8em 0; }
#letter-locked-body .letter-masked {
  filter: blur(5px);
  -webkit-user-select: none;
  user-select: none;
}

/* CV protégé avant paiement : haut net, suite floutée + filigrane */
#cv-render-target, #preview-render-target { position: relative; }
.cv-locked, .cv-locked * { -webkit-user-select: none; user-select: none; }
.cv-lock-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 250px;
  bottom: 0;
  z-index: 20;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background-color: rgba(255, 255, 255, 0.35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='190'%3E%3Ctext x='20' y='120' transform='rotate(-25 150 95)' font-family='Arial' font-size='26' font-weight='700' fill='%231d2f55' fill-opacity='0.13'%3EAPER%C3%87U HIRABLE%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cv-lock-overlay { background-color: rgba(255, 255, 255, 0.94); }
}
.cv-lock-card {
  position: -webkit-sticky;
  position: sticky;
  top: 40px;
  margin: 70px auto 0;
  width: 440px;
  max-width: 86%;
  padding: 28px 30px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid #d5f5ea;
  box-shadow: 0 20px 40px -12px rgba(16, 33, 53, 0.35);
  text-align: center;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
}
.cv-lock-icon {
  width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 9999px;
  background: #d5f5ea; color: #1d2f55;
  display: flex; align-items: center; justify-content: center;
}
.cv-lock-icon svg { width: 28px; height: 28px; }
.cv-lock-title { margin: 0 0 6px; font-size: 24px; font-weight: 800; color: #102135; }
.cv-lock-text { margin: 0 0 18px; font-size: 17px; line-height: 1.5; color: #475569; }
.cv-lock-btn {
  padding: 14px 26px; border: 0; border-radius: 14px; cursor: pointer;
  background: #2a7faa; color: #ffffff; font-size: 17px; font-weight: 800;
}
.cv-lock-btn:hover { background: #1d2f55; }
@media print {
  .cv-lock-overlay { background: #ffffff !important; }
  .cv-lock-card { display: none; }
}

/* Page de téléchargement CV + Lettre : chaque document en miniature A4 */
.bundle-frame { position: relative; width: 100%; overflow: hidden; border-radius: 14px; border: 1px solid #e2e8f0; background: #f1f5f9; }
.bundle-page { position: relative; width: 794px; height: 1123px; overflow: hidden; background: #ffffff; transform-origin: top left; box-sizing: border-box; }
.bundle-page .cv-lock-overlay { top: 250px; }
.bundle-letter-page { color: #1e293b; line-height: 1.5; }
.bundle-letter-page .letter-locked-p { margin: 0 0 0.8em 0; }
.bundle-letter-page .letter-masked { filter: blur(5px); -webkit-user-select: none; user-select: none; }
.bundle-letter-page.letter-is-locked { -webkit-user-select: none; user-select: none; }
.bundle-empty { margin-top: 300px; text-align: center; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: 22px; color: #94a3b8; }

/* ==========================================================================
   LETTRE : PAGE ET MODÈLES (Classique, Moderne, Élégant)
   Utilisé à l'écran (#letter-page), dans le PDF (.letter-export) et sur la page
   de téléchargement (.bundle-letter-page). Le Word a sa propre version (tableaux).
   ========================================================================== */
.letter-page {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 30px 32px;
  color: #1e293b;
}
@media (max-width: 640px) { .letter-page { padding: 20px 16px 24px; } }
.lp { line-height: 1.45; }
.lp p { margin: 0; }
.lp-head { margin-bottom: 1.6em; }
.lp-line { display: block; }
.lp-sender { margin-bottom: 1.4em; }
.lp-recipient { margin-left: 52%; margin-bottom: 1.2em; }
.lp-date { margin-left: 52%; margin-bottom: 1.6em; }
.lp-subject { font-weight: 700; }
.lp-meta { font-size: 0.92em; margin-top: 0.2em; }
.lp-sign { margin-top: 2em; }
.lp-sign-name { font-weight: 700; }
.lp-sign-space { height: 3.2em; }
.lp-empty { color: #94a3b8; font-style: italic; }
/* Classique : expéditeur à gauche, destinataire et date à droite, signature à droite */
.lp-classique .lp-sign { margin-left: 52%; }
/* Moderne : nom en grand, titre en couleur, coordonnées sur une ligne, bandeau bicolore */
.lp-moderne .lp-name { font-size: 2em; line-height: 1.1; letter-spacing: 0.01em; text-transform: uppercase; color: #102135; }
.lp-moderne .lp-title { font-size: 1.05em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #2a7faa; margin-top: 0.15em; }
.lp-moderne .lp-contact { font-size: 0.86em; color: #334155; margin-top: 0.3em; }
.lp-moderne .lp-bar { display: flex; height: 7px; margin: 0.8em 0 1.6em; }
.lp-moderne .lp-bar span:first-child { flex: 3; background: #1d2f55; }
.lp-moderne .lp-bar span:last-child { flex: 1; background: #5bd3ad; }
.lp-moderne .lp-recipient { font-weight: 700; text-align: right; margin-left: 40%; }
.lp-moderne .lp-recipient .lp-line + .lp-line { font-weight: 400; }
.lp-moderne .lp-date { text-align: right; margin-left: 40%; }
/* Élégant : nom en couleur, coordonnées en colonne, formes décoratives */
.lp-elegant { overflow: hidden; }
.lp-elegant .lp-name { font-size: 2.1em; font-weight: 800; line-height: 1.1; color: #2a7faa; }
.lp-elegant .lp-sender { margin-top: 0.4em; }
.lp-elegant .lp-contact-col { margin-top: 0.6em; font-size: 0.92em; }
.lp-elegant .lp-recipient { font-weight: 700; text-align: right; margin-left: 40%; }
.lp-elegant .lp-recipient .lp-line + .lp-line { font-weight: 400; }
.lp-elegant .lp-date { margin-left: 0; margin-top: 1em; }
.lp-elegant .lp-deco-top { position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 70px solid #1d2f55; border-left: 70px solid transparent; }
.lp-elegant .lp-deco-bottom { position: absolute; bottom: 0; left: 0; width: 0; height: 0; border-bottom: 46px solid #50b9b2; border-right: 46px solid transparent; }
/* Texte de la lettre : la zone de saisie se fond dans la page */
.letter-body-input {
  display: block;
  width: 100%;
  min-height: 12em;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: #1e293b;
  resize: none;
  overflow: hidden;
  outline: none;
  font: inherit;
}
.letter-body-input:focus { background: #f8fafc; box-shadow: 0 0 0 6px #f8fafc; border-radius: 4px; }
.letter-export { position: relative; }
.letter-export.lp-elegant .lp-deco-top, .letter-export.lp-elegant .lp-deco-bottom { display: none; }