/*
Theme Name: SCANPAIE Pro
Theme URI: https://scanpaie.com
Author: SCANPAIE
Description: Thème professionnel moderne pour externalisation de la paie : menu sticky, hero, services, processus, formulaire devis.
Version: 2.0.0
Text Domain: scanpaie-pro
*/

/* ========================
   Palette couleurs
   ======================== */
:root {
  --navy:#0B1F3A;       /* bleu nuit */
  --blue:#1E40AF;       /* bleu pro */
  --yellow:#FACC15;     /* jaune accent */
  --yellow-dark:#EAB308;
  --gray:#6B7280;
  --light:#F9FAFB;
  --white:#FFFFFF;
}

/* ========================
   Global
   ======================== */
body {
  margin:0;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: var(--light);
  color: var(--navy);
  line-height: 1.7;
}

.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

h1,h2,h3,h4 {
  margin-top:0;
  font-weight:700;
  line-height:1.3;
}

a {
  text-decoration:none;
  color: inherit;
  transition: all .2s ease;
}

/* ========================
   Header & Menu
   ======================== */
.header {
  position:sticky;
  top:0;
  background: var(--navy);
  z-index:1000;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

.nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:80px;
}

.brand {
  font-size:22px;
  font-weight:800;
  color: var(--white);
  letter-spacing:1px;
}

.primary-menu {
  display:flex;
  gap:32px;
  list-style:none;
  margin:0;
  padding:0;
}

.primary-menu li a {
  font-weight:500;
  color: var(--white);
  padding:8px 0;
  border-bottom:2px solid transparent;
}

.primary-menu li a:hover {
  border-bottom:2px solid var(--yellow);
  color: var(--yellow);
}

/* ========================
   Boutons
   ======================== */
.btn {
  display:inline-block;
  padding:12px 22px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  border:none;
  font-size:16px;
  transition: all .2s ease;
}

.btn-primary {
  background: var(--blue);
  color: var(--white);
}

.btn-primary:hover {
  background: #153083;
  transform: translateY(-2px);
}

.btn-devis {
  background: var(--yellow);
  color: var(--navy);
  font-weight:700;
}

.btn-devis:hover {
  background: var(--yellow-dark);
  transform: translateY(-2px);
}

/* ========================
   Sections
   ======================== */
.section {
  padding:80px 0;
}

.section h2 {
  text-align:center;
  margin-bottom:40px;
  font-size:32px;
}

/* ========================
   Hero
   ======================== */
.hero {
  padding:120px 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  color: var(--white);
  text-align:left;
}

.hero h1 {
  font-size:52px;
  margin-bottom:20px;
}

.hero p {
  font-size:20px;
  margin-bottom:30px;
  opacity:.9;
}

/* ========================
   Cards (services, etc.)
   ======================== */
.card {
  background: var(--white);
  padding:30px;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
  text-align:center;
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow:0 12px 24px rgba(0,0,0,0.12);
}

.card img {
  height:60px;
  margin-bottom:16px;
}

.card h3 {
  margin-bottom:12px;
  font-size:20px;
}

/* ========================
   Footer
   ======================== */
.footer {
  background: var(--navy);
  color: var(--white);
  padding: 60px 20px 30px;
}

.footer h3 {
  margin-bottom:15px;
  font-size:18px;
}

.footer a {
  color: var(--white);
  opacity:0.9;
}

.footer a:hover {
  opacity:1;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  margin-bottom: 10px;
}

.footer-bottom {
  text-align:center;
  margin-top:30px;
  color:#cbd5e1;
  font-size:14px;
}
/* ========================
   Amélioration cartes & images
   ======================== */

/* Cartes modernes */
.card {
  background: var(--white);
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
  text-align: center;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Images avec effet moderne */
.card img {
  border-radius: 12px;
  margin-bottom: 15px;
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* Titres dans les cartes */
.card h3 {
  font-size: 20px;
  margin: 10px 0;
  color: var(--navy);
}

.card p {
  color: var(--gray);
  font-size: 15px;
}

/* ========================
   Formulaire de devis
   ======================== */
form input[type="text"],
form input[type="email"],
form textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 15px;
  margin-bottom: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

form input:focus,
form textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(30,64,175,0.2);
  outline: none;
}

form button {
  margin-top: 10px;
}
/* ========================
   Hero Section
   ======================== */
.hero {
  padding: 140px 20px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Effet décoratif : vague en bas */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 100px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="%23ffffff" fill-opacity="1" d="M0,256L1440,128L1440,320L0,320Z"></path></svg>') no-repeat bottom;
  background-size: cover;
}

/* Logo */
.hero img {
  max-width: 180px;
  margin-bottom: 25px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.3));
}

/* Titre */
.hero h1 {
  font-size: 52px;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
}

/* Sous-titre */
.hero p {
  font-size: 20px;
  opacity: 0.9;
  max-width: 720px;
  margin: 0 auto 30px;
}

/* Bouton */
.hero .btn-devis {
  font-size: 18px;
  padding: 14px 28px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* ========================
   Animations Hero
   ======================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero h1 {
  animation: fadeInUp 1s ease forwards;
}

.hero p {
  animation: fadeInUp 1.4s ease forwards;
}

.hero .btn-devis {
  animation: fadeInUp 1.8s ease forwards, pulse 2s infinite 3s;
}

/* Effet bouton pulse */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(250,204,21,0.6); }
  70% { box-shadow: 0 0 0 15px rgba(250,204,21,0); }
  100% { box-shadow: 0 0 0 0 rgba(250,204,21,0); }
}

/* ========================
   Animations cartes
   ======================== */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.card {
  animation: zoomIn 0.8s ease forwards;
  opacity: 0;
}

/* Delay progressif sur les cartes */
.card:nth-child(1) { animation-delay: 0.2s; }
.card:nth-child(2) { animation-delay: 0.4s; }
.card:nth-child(3) { animation-delay: 0.6s; }

/* ========================
   Animation au scroll
   ======================== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* ========================
   Partenaires
   ======================== */
.partners {
  display: flex;
  flex-direction: column; /* disposition verticale */
  align-items: center;
  gap: 30px;
  margin-top: 40px;
}

.partner-logo img {
  max-width: 180px;
  height: auto;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: all 0.3s ease;
}

.partner-logo img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}