/* ================================================
   RECRUTEMENT CAUDAN - CSS UNIFIÉ 2025
   ================================================ */

:root {
  --primary-50:#eaf9fb;--primary-100:#c5eff3;--primary-200:#a0e5ec;--primary-300:#7bdbe5;
  --primary-400:#5fcedb;--primary-500:#50bfd0;--primary-600:#40a9b9;--primary-700:#308392;
  --primary-800:#205d6b;--primary-900:#103744;
  --gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;
  --gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;
  --gray-800:#1e293b;--gray-900:#0f172a;
  --success:#10b981;--warning:#f59e0b;--error:#ef4444;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;
  --shadow-card:0 4px 20px rgba(80,191,208,.08);
  --shadow-card-hover:0 12px 40px rgba(80,191,208,.15);
  --transition-base:250ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--gray-800);background:var(--gray-50)}

h1,h2,h3{font-weight:700;line-height:1.2;color:var(--gray-900)}
h1{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:1.5rem}
h2{font-size:clamp(1.75rem,4vw,2.5rem);margin-bottom:1rem}
h3{font-size:clamp(1.25rem,3vw,1.75rem);margin-bottom:1rem}
p{margin-bottom:1rem}
a{color:var(--primary-600);text-decoration:none;transition:color var(--transition-base)}
a:hover{color:var(--primary-700)}

.wrap{max-width:1280px;margin:0 auto;padding:0 1.5rem}
.section{padding:4rem 0}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-200);box-shadow:0 1px 3px rgba(0,0,0,.04);transition:all var(--transition-base)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:1rem;font-size:1.125rem;font-weight:700;color:var(--gray-900)}
.brand .logo{width:65px;height:65px;object-fit:contain}
.logo-text{background:linear-gradient(135deg,var(--primary-600),var(--primary-400));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.top-nav{display:flex;gap:1rem}

/* Hero */
.hero{padding:4rem 0;background:linear-gradient(135deg,var(--primary-50),var(--gray-50))}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center}
@media(max-width:1024px){.hero-inner{grid-template-columns:1fr}}
.hero h1{background:linear-gradient(135deg,var(--gray-900),var(--primary-700));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:1.125rem;color:var(--gray-600);line-height:1.7}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.chip{padding:.5rem 1rem;font-size:.875rem;font-weight:600;border-radius:9999px;background:var(--primary-600);color:#fff;cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}
.chip-outline{background:#fff;color:var(--primary-600);border:2px solid var(--primary-200)}
.hero-art{display:flex;justify-content:center}
.hero-art img{max-width:250px;height:auto;animation:levitate 6s ease-in-out infinite}
@keyframes levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

/* Toolbar */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.5rem;background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-card);margin-bottom:3rem}
.filter{flex:1;min-width:250px}
.filter label{display:block;font-size:.875rem;font-weight:600;color:var(--gray-700);margin-bottom:.5rem}
.filter select{width:100%;padding:1rem;font-size:1rem;background:#fff;border:2px solid var(--gray-200);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}
.hint{font-size:.875rem;color:var(--gray-500)}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:2rem}
@media(max-width:768px){.grid{grid-template-columns:1fr}}
.card{position:relative;padding:2rem;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);transition:all var(--transition-base);cursor:pointer}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-500),var(--primary-300));transform:scaleX(0);transition:transform var(--transition-base)}
.card:hover::before{transform:scaleX(1)}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-card-hover);border-color:var(--primary-200)}
.card h3{font-size:1.125rem;margin-bottom:1rem}
.card:hover h3{color:var(--primary-600)}
.meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;font-size:.9375rem;color:var(--gray-600)}
.badge{padding:.375rem .75rem;font-size:.8125rem;font-weight:600;text-transform:uppercase;background:linear-gradient(135deg,var(--primary-50),var(--primary-100));color:var(--primary-700);border:1px solid var(--primary-200);border-radius:9999px;transition:all var(--transition-base)}
.card:hover .badge{background:var(--primary-600);color:#fff}
.actions{display:flex;justify-content:space-between;margin-top:auto;padding-top:1rem;border-top:1px solid var(--gray-100)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 1.5rem;font-size:.9375rem;font-weight:600;color:var(--gray-700);background:#fff;border:2px solid var(--gray-300);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}
.btn:hover{background:var(--gray-50);border-color:var(--gray-400);transform:translateY(-2px)}
.btn.primary{background:linear-gradient(135deg,var(--primary-600),var(--primary-500));color:#fff;border:none}
.btn.primary:hover{background:linear-gradient(135deg,var(--primary-700),var(--primary-600))}
.link{color:var(--primary-600);font-weight:600}
.link::after{content:'→';margin-left:.5rem}
.icon-btn{position:fixed;bottom:2rem;right:2rem;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:var(--primary-600);color:#fff;border:none;border-radius:50%;box-shadow:var(--shadow-card);cursor:pointer;z-index:999;transition:all var(--transition-base)}
.icon-btn:hover{background:var(--primary-700)}

.empty{padding:4rem;text-align:center;color:var(--gray-500);background:#fff;border:2px dashed var(--gray-300);border-radius:var(--radius-xl)}
.hidden{display:none!important}

/* Dialog */
dialog{max-width:900px;width:95vw;max-height:90vh;padding:0;border:none;border-radius:var(--radius-2xl);box-shadow:0 25px 50px rgba(0,0,0,.25);overflow:hidden}
dialog::backdrop{background:rgba(15,23,42,.6);backdrop-filter:blur(4px)}
.close-dialog{position:absolute;top:1rem;right:1rem;width:40px;height:40px;border:none;background:none;font-size:1.5rem;cursor:pointer;color:var(--gray-600)}
.close-dialog:hover{color:var(--gray-900)}

/* RH Login */
#rhLogin{padding:2rem}
#rhLogin h2{text-align:center;margin-bottom:1.5rem;background:linear-gradient(135deg,var(--primary-600),var(--primary-400));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#rhLogin p{text-align:center;color:var(--gray-600);margin-bottom:2rem}

/* RH App */
.rh-shell{display:flex;flex-direction:column;max-height:92vh}
.rh-head{padding:1.5rem;background:linear-gradient(135deg,var(--primary-50),#fff);border-bottom:1px solid var(--gray-200)}
.rh-head h2{margin-bottom:.5rem}
.rh-head nav{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.rh-nav-item{padding:.75rem 1.25rem;background:transparent;border:2px solid transparent;border-radius:var(--radius-md);font-weight:600;color:var(--gray-600);cursor:pointer;transition:all var(--transition-base)}
.rh-nav-item:hover{background:var(--gray-50);color:var(--gray-900)}
.rh-nav-item.active{background:var(--primary-600);color:#fff;border-color:var(--primary-600)}
.rh-body{flex:1;overflow-y:auto;padding:2rem}

/* RH Toolbar */
.rh-toolbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;gap:1rem;padding:1.5rem;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);margin-bottom:2rem;flex-wrap:wrap}

/* RH Jobs List */
.rh-item{display:flex;justify-content:space-between;gap:1.5rem;padding:1.5rem;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);margin-bottom:1rem}
.rh-item:hover{border-color:var(--primary-200);box-shadow:var(--shadow-card)}
.rh-item .title{font-size:1.125rem;font-weight:700;margin-bottom:.5rem}
.rh-actions{display:flex;gap:.5rem;flex-wrap:wrap}

/* Forms */
.field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.field label{font-size:.875rem;font-weight:600;color:var(--gray-700)}
.field.required label::after{content:' *';color:var(--error)}
.field input,.field textarea,.field select{width:100%;padding:1rem;font-size:1rem;border:2px solid var(--gray-200);border-radius:var(--radius-md)}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-100)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:768px){.grid-2,.grid-3{grid-template-columns:1fr}}

.small-note{padding:1rem;margin:1rem 0;font-size:.875rem;border-radius:var(--radius-md)}
.small-note.success{background:#d1fae5;color:#065f46;border:2px solid#10b981}
.small-note.error{background:#fee2e2;color:#991b1b;border:2px solid #ef4444}

/* Footer */
.site-footer{margin-top:4rem;padding:2rem 0;background:#fff;border-top:1px solid var(--gray-200);text-align:center}
.site-footer small{color:var(--gray-500)}

/* Responsive */
@media(max-width:640px){
  .hero{padding:2rem 0}
  .btn{font-size:.875rem;padding:.75rem 1rem}
  .toolbar,.rh-toolbar{flex-direction:column}
  .rh-item{flex-direction:column}
}

/* ================================================
   AMÉLIORATIONS PAGE ACCUEIL - 2025
   ================================================ */

/* ========== ANIMATIONS HERO ========== */
.hero-inner > div:first-child {
  animation: slideInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-art {
  animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========== CHIPS INTERACTIFS ========== */
.chip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.chip:hover::before {
  width: 200px;
  height: 200px;
}

.chip:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 16px rgba(80, 191, 208, 0.3);
}

.chip-outline:hover {
  background: var(--primary-600);
  color: #fff;
  border-color: var(--primary-600);
}

.chip.active {
  background: var(--primary-700);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(48, 131, 146, 0.4);
}

.chip-outline.active {
  background: var(--primary-700);
  color: #fff;
  border-color: var(--primary-700);
}

/* ========== TOOLBAR ANIMATION ========== */
.toolbar {
  animation: fadeInUp 0.6s ease-out 0.3s backwards;
}

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

.filter select:hover {
  border-color: var(--primary-400);
}

/* ========== CARDS AMÉLIORÉES ========== */
.card {
  animation: cardAppear 0.5s ease-out backwards;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
.card:nth-child(6) { animation-delay: 0.6s; }

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

/* Effet brillance au survol */
.card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  transform: rotate(45deg);
  transition: all 0.6s;
  pointer-events: none;
}

.card:hover::after {
  animation: shine 1.5s ease-in-out;
}

@keyframes shine {
  0% {
    top: -50%;
    right: -50%;
  }
  100% {
    top: 150%;
    right: 150%;
  }
}

/* ========== DESCRIPTION TRONQUÉE ========== */
.card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
}

/* ========== HEADER SCROLLED ========== */
.site-header.scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.98);
}

/* ========== SCROLL TO TOP AMÉLIORÉ ========== */
#scrollTop {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
}

#scrollTop.visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

#scrollTop:hover {
  transform: scale(1.1);
}

#scrollTop:active {
  transform: scale(0.95);
}

/* ========== ÉTAT VIDE AMÉLIORÉ ========== */
.empty {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ========== RESPONSIVE AMÉLIORÉ ========== */
@media (max-width: 768px) {
  .chips {
    justify-content: center;
  }
  
  .hero-inner > div:first-child {
    text-align: center;
  }
  
  .card {
    animation-delay: 0s !important;
  }
}

/* ========== ACCESSIBILITÉ ========== */
.btn:focus-visible,
.card:focus-visible,
.chip:focus-visible {
  outline: 3px solid var(--primary-400);
  outline-offset: 2px;
}

/* ========== RÉDUCTION ANIMATIONS ========== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}