/*
 * FlexiWorker — Feuille de style partagée v3
 * Palette : Canard + Terracotta + Crème
 * Ce fichier est chargé EN DERNIER dans chaque page pour écraser les variables inline.
 * ---------------------------------------------------------------------------
 */

/* ============================================================
   VARIABLES GLOBALES — nouvelle charte graphique
   ============================================================ */
:root {
  /* ── Bleu canard — couleur principale ── */
  --slate:     #0E6E8C;   /* bleu canard principal */
  --slate-dk:  #0a5570;   /* canard foncé */
  --slate-xdk: #07384a;   /* canard très foncé — fonds sombres */
  --slate-lt:  #9FCBD8;   /* canard clair */
  --slate-xl:  #c8e8f2;   /* canard très clair */
  --slate-xxl: #e8f5f9;   /* fond canard ultra-léger */

  /* ── Terracotta — couleur d'accent (remplace amber) ── */
  --amber:     #C75D3C;   /* terracotta principal */
  --amber-lt:  #fceee8;   /* terracotta clair */

  /* ── Neutres ── */
  --white:     #ffffff;   /* blanc pur — fond général */
  --ink:       #14110D;   /* noir chaud — texte */
  --muted:     #6B5F56;   /* texte atténué */
  --border:    #dce8e0;   /* bordures */
  --surface:   #f5f8f6;   /* surfaces légères */

  /* ── Fonctionnels ── */
  --green:     #0E6E8C;
  --green-lt:  #e8f5f9;
  --red-lt:    #fce8e8;
  --red:       #d94f4f;
  --r: 14px; --r-sm: 8px; --r-lg: 22px;
}

/* ============================================================
   LOGO — taille raisonnable (desktop)
   ============================================================ */
.nav-logo img {
  height: 56px !important;
  width: auto !important;
  display: block;
  flex-shrink: 0;
}

/* Nav — alignement flex garanti sur toutes les pages */
nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ─── Toutes les sections hero des pages publiques ─── */
.hero-emp,
.hero-fonc,
.hero-trav,
.page-wrap {
  margin-top: 0 !important;
}

.hero-emp,
.hero-fonc {
  padding-top: 40px !important;
}

.page-wrap {
  min-height: auto;
}

/* ============================================================
   MOBILE NAV — logo gauche, burger droite, nav-links cachées
   ============================================================ */
@media (max-width: 860px) {

  /* Logo réduit sur mobile */
  .nav-logo img {
    height: 40px !important;
    width: auto !important;
    max-width: 160px !important;
  }

  /* Nav — hauteur fixe et layout garanti */
  nav {
    height: 66px !important;
    padding: 0 4% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
  }

  /* Nav-links cachées par défaut sur mobile */
  .nav-links {
    display: none !important;
  }

  /* Nav-links visible quand burger ouvert */
  .nav-links.open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 66px !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    padding: 16px 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
    z-index: 199 !important;
    gap: 0 !important;
  }

  .nav-links.open li {
    border-bottom: 1px solid var(--border, #d1fae5);
  }

  .nav-links.open a {
    display: block;
    padding: 14px 24px;
    font-size: .95rem;
  }

  /* Burger TOUJOURS visible sur mobile */
  .burger {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    padding: 6px !important;
    z-index: 201 !important;
    flex-shrink: 0 !important;
  }

  .burger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #0f172a !important;
    border-radius: 2px !important;
  }

  /* nav-right — on garde seulement Connexion + burger */
  .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  /* Bouton "Poster une annonce" caché sur mobile */
  .btn-start {
    display: none !important;
  }
}

.footer-logo {
  height: 44px;
  width: auto;
  display: block;
  margin-bottom: 16px;
  background: white;
  border-radius: 8px;
  padding: 4px 8px;
  /* annule les filtres inline sur certaines pages */
  filter: none !important;
  opacity: 1 !important;
}

/* ============================================================
   CORRECTIONS COULEURS RESTANTES
   (éléments qui utilisaient des valeurs hex directes)
   ============================================================ */

/* Bouton Connexion nav — force couleur blanche quelle que soit la spécificité héritée */
.btn-connexion {
  color: white !important;
  background: var(--slate) !important;
}
.btn-connexion:hover {
  background: var(--slate-dk) !important;
  color: white !important;
}

/* Boutons CTA orange → teal */
a[style*="e8a040"],
button[style*="e8a040"],
.btn-amber {
  background: var(--slate) !important;
  color: white !important;
}
.btn-amber:hover { background: var(--slate-dk) !important; }

/* Texte italic orange (404, tarifs) → teal */
.title em, h1 em, h2 em { color: var(--slate-lt) !important; }

/* Texte italique orange (tarifs.html, employeurs.html) */
em { color: inherit; }

/* ============================================================
   UTILITAIRES PARTAGÉS (disponibles sur toutes les pages)
   ============================================================ */

/* Bouton primaire */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--slate);
  color: white;
  font-weight: 700;
  font-size: .95rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: .01em;
}
.btn-primary:hover {
  background: var(--slate-dk);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13,148,136,.3);
}

/* Bouton secondaire (outline) */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: transparent;
  color: var(--slate);
  font-weight: 600;
  font-size: .95rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  border: 1.5px solid var(--slate);
  cursor: pointer;
  transition: all .2s;
}
.btn-secondary:hover {
  background: var(--slate-xxl);
}

/* Badge urgence — le point clignotant reste teal (pas orange) */
.card-urgence-badge {
  background: var(--slate) !important;
  color: white !important;
}
.card-urgence-badge::before {
  background: white !important;
  opacity: .6 !important;
}

/* Tirets du hero (tagline lines) */
.hero-tagline-line::before {
  background: var(--slate) !important;
}

/* Chips amber → teal */
.chip.amber {
  background: var(--amber-lt) !important;
  color: var(--slate-dk) !important;
}

/* Eyebrow dot (point animé dans le badge nav) */
.eyebrow-dot {
  background: white !important;
  opacity: .7;
}

/* Stat pills — valeur en teal */
.sp-val {
  color: var(--slate) !important;
}

/* Section éthique / dark — fond devient teal très sombre */
.section-ethics {
  background: var(--slate-xdk) !important;
}

/* Mode urgence card head */
.mode-card.urgence .mode-card-head {
  background: var(--slate) !important;
}

/* ============================================================
   FOOTER PARTAGÉ
   ============================================================ */
.footer {
  background: var(--slate-xdk);
  padding: 56px 5% 28px;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer-tagline { font-size: .82rem; color: rgba(255,255,255,.32); line-height: 1.65; max-width: 240px; margin-bottom: 20px; }
.footer-socials { display: flex; gap: 10px; }
.footer-links-group { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.footer-col-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.3); margin-bottom: 14px; }
.footer-col a { display: block; font-size: .82rem; color: rgba(255,255,255,.38); text-decoration: none; margin-bottom: 9px; transition: color .2s; }
.footer-col a:hover { color: rgba(255,255,255,.75); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: .74rem; color: rgba(255,255,255,.2); }
.footer-bottom a { color: rgba(255,255,255,.35); text-decoration: none; }
.footer-bottom a:hover { color: rgba(255,255,255,.7); }
@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-links-group { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .footer-links-group { grid-template-columns: 1fr; }
}

/* Sidebar dashboard logo */
.sb-logo {
  display: flex;
  justify-content: center;
  padding: 8px 12px;
}
.sb-logo img {
  height: 48px !important;
  width: auto !important;
  display: block;
  background: white;
  border-radius: 8px;
  padding: 2px 4px;
  filter: none !important;
  opacity: 1 !important;
}

/* Footer social icons — white SVG on dark footer */
.footer-social svg {
  fill: rgba(255,255,255,0.6);
  stroke: rgba(255,255,255,0.6);
  width: 20px;
  height: 20px;
  display: block;
  transition: fill .2s, stroke .2s;
}
.footer-social:hover svg {
  fill: white;
  stroke: white;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

/* nav burger — géré dans le bloc @media (max-width: 860px) ci-dessus */

/* ============================================================
   ANIMATIONS — Hero entrée, boutons, cartes, burger, dashboard
   ============================================================ */

/* ── 1. Hero entry — cascade staggerée ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-l > * {
  animation: fadeUp .6s ease both;
}
.hero-l > *:nth-child(1) { animation-delay: .05s; }
.hero-l > *:nth-child(2) { animation-delay: .15s; }
.hero-l > *:nth-child(3) { animation-delay: .25s; }
.hero-l > *:nth-child(4) { animation-delay: .35s; }
.hero-l > *:nth-child(5) { animation-delay: .45s; }

/* ── 2. Boutons — transitions fluides ── */
.btn-primary {
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
}
.btn-primary:hover {
  box-shadow: 0 8px 24px rgba(5,150,105,.3) !important;
}

.btn-secondary {
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
}

/* ── 3. Cartes génériques — effet hover lift ── */
.card {
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
}

/* ── 4. Burger — animation ouverture nav ── */
/* Desktop : pas de display:none, on anime l'opacité */
@media (min-width: 861px) {
  .nav-links {
    transition: opacity .25s ease, transform .25s ease;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}

/* Mobile : le toggle display est géré par le @media ci-dessus ;
   l'animation X du burger passe par .active */
.burger span {
  transition: transform .25s ease, opacity .2s ease;
}
.burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
.burger.active span:nth-child(2) { opacity: 0 !important; }
.burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

/* ── 5. Dashboard — compteur visuel stats ── */
@keyframes countUp {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
.sp-val,
.stat-number,
[class*="stat-val"],
[class*="stat-value"] {
  animation: countUp .5s cubic-bezier(.34,1.56,.64,1) both;
}