/* Simple Recrutement — site vitrine statique (simple-recrutement.com).
   Tokens copiés du front Simple Signal (styles.css) pour garder la même
   identité visuelle ; accent produit = violet (celui de l'app recrutement). */

:root {
  --background: #FAFBFC;
  --ink: #1E293B;
  --ink-soft: #475569;
  --line: #BFDBFE;
  --card: #FFFFFF;
  --secondary: #F0F9FF;
  --violet: #7C3AED;
  --violet-fonce: #6D28D9;
  --violet-pale: #EDE9FE;
  --shadow-panel: 0 1px 2px #1E293B0A, 0 28px 60px -28px #1E293B2E;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Sora", "Manrope", ui-sans-serif, system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.15; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.conteneur { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
section.bloc { padding: 4.5rem 0; }
@media (min-width: 768px) { section.bloc { padding: 6rem 0; } }

/* ---- Header ---- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--background) 85%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
header.site .barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.25rem; max-width: 72rem; margin: 0 auto;
}
.wordmark { font-weight: 800; font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }
.wordmark .point { color: var(--violet); }
nav.principale { display: none; gap: 0.25rem; }
nav.principale a {
  padding: 0.5rem 0.9rem; border-radius: 0.5rem; font-size: 0.875rem;
  font-weight: 500; color: var(--ink-soft); transition: background .2s, color .2s;
}
nav.principale a:hover { background: var(--secondary); color: var(--ink); }
nav.principale a.actif { background: var(--secondary); color: var(--ink); }
.actions-header { display: none; align-items: center; gap: 0.5rem; }
.lien-connexion { padding: 0.5rem 0.9rem; font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); }
.lien-connexion:hover { color: var(--ink); }
@media (min-width: 768px) {
  nav.principale, .actions-header { display: flex; }
  .burger { display: none; }
}
.burger {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 0.6rem; cursor: pointer; line-height: 0;
}
.menu-mobile { display: none; border-top: 1px solid var(--line); padding: 0.75rem 1.25rem 1.25rem; }
.menu-mobile.ouvert { display: block; }
.menu-mobile a { display: block; padding: 0.75rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); }
.menu-mobile a:hover { background: var(--secondary); }
.menu-mobile .cta { margin-top: 0.5rem; text-align: center; color: #fff; }

/* ---- Boutons ---- */
.cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--violet); color: #fff; font-weight: 600; font-size: 0.875rem;
  padding: 0.75rem 1.75rem; border-radius: 999px;
  box-shadow: 0 4px 14px #7C3AED40; transition: transform .2s, background .2s;
}
.cta:hover { transform: scale(1.02); background: var(--violet-fonce); }
.cta.header { padding: 0.65rem 1.25rem; border-radius: 0.5rem; }
.bouton-secondaire {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  font-weight: 500; font-size: 0.875rem; padding: 0.75rem 1.75rem; border-radius: 999px;
  transition: color .2s;
}
.bouton-secondaire:hover { color: var(--ink); }

/* ---- Composants ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 0.4rem 0.9rem; font-size: 0.75rem; font-weight: 500; color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--violet); }
.surface {
  background: var(--card); border: 1px solid var(--line); border-radius: 1rem;
  box-shadow: var(--shadow-panel);
}
.accent { color: var(--violet); }

h1 { font-size: 2.5rem; font-weight: 600; }
h2 { font-size: 1.875rem; font-weight: 600; }
@media (min-width: 768px) { h1 { font-size: 3rem; } }
.sous-titre { margin-top: 1.5rem; font-size: 1.125rem; color: var(--ink-soft); }
.texte-doux { color: var(--ink-soft); }
.centre { text-align: center; }
.max-2xl { max-width: 42rem; }
.max-3xl { max-width: 48rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---- Badges persona (couleurs de l'app, signature du produit) ---- */
.badge { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 11px; font-weight: 700; }
.badge.ambre { background: #FEF3C7; color: #B45309; }
.badge.violet { background: #EDE9FE; color: #6D28D9; }
.badge.emeraude { background: #D1FAE5; color: #047857; }
.badge.ardoise { background: #E2E8F0; color: #334155; }
.badge.vert { background: #DCFCE7; color: #15803D; }
.badge.rose { background: #FFE4E6; color: #BE123C; }
.badge.ciel { background: #E0F2FE; color: #0369A1; }

/* chips critères / filtres */
.chip { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; padding: 0.4rem 0.8rem; font-size: 0.75rem; font-weight: 600; }

/* barres de score colorées */
.ligne-score { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.piste { height: 8px; flex: 1; border-radius: 999px; background: var(--secondary); overflow: hidden; }
.piste > div { height: 100%; border-radius: 999px; }
.rouge { background: #EF4444; } .ambre-500 { background: #F59E0B; }
.ambre-400 { background: #FBBF24; } .emeraude-500 { background: #10B981; }
.val-score { width: 2rem; text-align: right; font-size: 0.75rem; font-weight: 600; }
.lib-score { width: 14rem; font-size: 0.75rem; color: var(--ink-soft); }

/* pastilles score (fonctionnement) */
.pastille { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 700; color: #fff; }

/* grilles */
.grille { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .grille.c2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .grille.c3 { grid-template-columns: 1fr 1fr 1fr; }
  .grille.c4 { grid-template-columns: repeat(4, 1fr); }
  .grille.moitie { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* stats hero */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; border: 1px solid var(--line); border-radius: 1rem; background: color-mix(in srgb, var(--card) 60%, transparent); padding: 1.25rem 0; }
.stats > div { padding: 0 0.5rem; }
.stats > div + div { border-left: 1px solid var(--line); }
.stats .valeur { font-size: 1.75rem; font-weight: 600; }
.stats .legende { margin-top: 0.25rem; font-size: 0.75rem; color: var(--ink-soft); }

/* listes à coche */
ul.coches { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
ul.coches li { display: flex; gap: 0.75rem; font-size: 0.875rem; align-items: flex-start; }
ul.coches li::before { content: "✓"; color: var(--violet); font-weight: 700; flex-shrink: 0; }

/* FAQ (details natif) */
details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
details summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-size: 1.2rem; color: var(--ink-soft); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin-top: 0.75rem; font-size: 0.9rem; color: var(--ink-soft); }

/* étapes (fonctionnement) */
.etape { display: grid; grid-template-columns: auto 1fr; gap: 2rem; }
.numero { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--violet); color: #fff; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }

/* pricing */
.carte-prix { position: relative; display: flex; flex-direction: column; padding: 1.5rem; height: 100%; }
.carte-prix.populaire { border: 2px solid #A78BFA; box-shadow: 0 10px 30px #7C3AED1A; }
.etiquette-populaire { position: absolute; top: -0.8rem; left: 1.5rem; background: var(--violet); color: #fff; border-radius: 999px; padding: 0.25rem 0.8rem; font-size: 11px; font-weight: 700; }
.prix { font-size: 2rem; font-weight: 700; }
.periode { font-size: 0.75rem; color: var(--ink-soft); }
.carte-prix ul.coches { flex: 1; }
.carte-prix .cta, .carte-prix .bouton-secondaire { margin-top: 1.5rem; justify-content: center; }

/* footer */
footer.site { margin-top: 6rem; border-top: 1px solid var(--line); }
footer.site .grille-pied { display: grid; gap: 2.5rem; padding: 4rem 0 0; }
@media (min-width: 768px) { footer.site .grille-pied { grid-template-columns: 1.4fr 1fr 1fr; } }
footer.site p.pitch { margin-top: 1rem; max-width: 24rem; font-size: 0.875rem; color: var(--ink-soft); }
footer.site .colonne p { font-weight: 600; font-size: 0.875rem; }
footer.site .colonne ul { list-style: none; margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; color: var(--ink-soft); }
footer.site .colonne a:hover { color: var(--ink); }
.geant {
  margin-top: 3.5rem; user-select: none; font-weight: 600; letter-spacing: -0.05em;
  font-size: 9vw; line-height: 0.85;
  background: linear-gradient(100deg, var(--ink) 30%, var(--violet) 50%, var(--ink) 70%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: shimmer 6s linear infinite;
}
@media (min-width: 1100px) { .geant { font-size: 7rem; } }
@keyframes shimmer { to { background-position: -200% center; } }
.mentions { margin-top: 2.5rem; border-top: 1px solid var(--line); padding: 1.5rem 0 2rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.75rem; color: var(--ink-soft); }
@media (min-width: 768px) { .mentions { flex-direction: row; justify-content: space-between; } }

/* reveal au scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }