/* ══════════════════════════════════════════════════════════════════════
   Page d'accueil — s'appuie sur les jetons de app.css.

   Elle raconte une histoire, dans cet ordre : le rêve (un salaire suisse),
   la galère (chercher à l'aveugle), le tournant (Fronta fait le tri), les
   preuves (quatre chapitres, chacun avec un exemple visible), puis l'élan.

   La DA reste celle de l'application : du blanc sur un fond presque blanc,
   le bleu Fronta pour agir, le bleu nuit pour les moments forts, et la barre
   de match — la signature — partout où l'on montre une offre. Deux aplats
   sombres seulement (le chiffre du rêve, l'appel final) : c'est leur rareté
   qui leur donne leur poids.
   ══════════════════════════════════════════════════════════════════════ */

.landing { background: var(--bg); }
.landing main { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

/* ─────────────────────────────── Nav ─────────────────────────────── */

.l-nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 20px;
  padding: 14px max(22px, calc((100vw - 1120px) / 2 + 22px));
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.l-nav.is-scrolled { border-bottom-color: var(--line); }
.l-nav .brand { margin-right: auto; }
.l-links { display: none; gap: 28px; }
.l-links a { font-size: 14px; font-weight: 550; color: var(--ink-3); text-decoration: none; transition: color .2s var(--ease); }
.l-links a:hover { color: var(--ink); }
@media (min-width: 900px) {
  .l-links { display: flex; margin: 0 auto; }
  .l-nav .brand { margin-right: 0; }
}
.nav-cta {
  padding: 9px 18px; border-radius: 980px;
  background: var(--action); color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 650; box-shadow: var(--lueur-action);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.nav-cta:hover { background: var(--action-fort); transform: translateY(-1px); }

/* ─────────────────────────────── Boutons ─────────────────────────────── */

.l-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.l-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px; border-radius: 16px;
  background: var(--action); color: #fff; text-decoration: none;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 6px 20px rgba(47, 127, 153, .28);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.l-btn:hover { background: var(--action-fort); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(47, 127, 153, .32); }
.l-btn span { transition: transform .25s var(--ease); }
.l-btn:hover span { transform: translateX(4px); }
.l-btn--ghost { background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-2); }
.l-btn--ghost:hover { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3); }
.l-btn--clair { background: #fff; color: var(--direct); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.l-btn--clair:hover { background: #fff; color: var(--direct); }

/* Les petites garanties sous l'appel : trois faits, séparés par des points. */
.l-rassure { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; font-size: 13px; color: var(--ink-3); }
.l-rassure span { display: inline-flex; align-items: center; gap: 7px; }
.l-rassure span::before {
  content: ''; width: 14px; height: 14px; flex: none; border-radius: 50%;
  background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E8B4D' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.l-rassure--clair { justify-content: center; color: rgba(255, 255, 255, .78); }
.l-rassure--clair span::before { background-color: rgba(255, 255, 255, .16); }

/* ─────────────────────────────── Hero ─────────────────────────────── */

.l-hero {
  display: grid; gap: 48px; align-items: center;
  padding: clamp(40px, 8vw, 96px) 0 clamp(48px, 7vw, 88px);
}
@media (min-width: 960px) { .l-hero { grid-template-columns: 1.1fr .9fr; } }

.l-kicker {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px;
  padding: 7px 14px 7px 8px; border-radius: 980px;
  background: var(--surface); box-shadow: var(--shadow-1);
  font-size: 13px; font-weight: 650; color: var(--ink-2);
}
.l-flag {
  position: relative; width: 20px; height: 20px; flex: none; border-radius: 6px; background: var(--swiss);
}
.l-flag::before, .l-flag::after { content: ''; position: absolute; background: #fff; border-radius: 1px; }
.l-flag::before { left: 8.5px; top: 4px; width: 3px; height: 12px; }
.l-flag::after { left: 4px; top: 8.5px; width: 12px; height: 3px; }

.l-hero h1 {
  margin: 0; font-size: clamp(42px, 7vw, 76px); font-weight: 800;
  line-height: 1.02; letter-spacing: -.045em; color: var(--ink);
}
.hl { color: var(--action); }
.l-hero h1 .accent { color: var(--swiss); }
.l-sub {
  max-width: 34em; margin: 24px 0 0;
  font-size: clamp(17px, 2vw, 19.5px); line-height: 1.55; color: var(--ink-3);
}
.l-sub em { font-style: normal; font-weight: 650; color: var(--ink); }

/* La pile de cartes : trois offres d'exemple, la meilleure devant. */
.l-hero-visuel { position: relative; }
/* Les cartes 2 et 3 sont décalées par transformation, qui ne compte pas dans
   la hauteur : la pile réserve donc elle-même la place mesurée (~400 px). */
.mk-pile { position: relative; display: grid; min-height: 412px; }
.mk-pile .mk-carte { grid-area: 1 / 1; align-self: start; }
.mk-carte {
  position: relative; overflow: hidden;
  padding: 24px 22px 18px; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-3);
}
.mk-pile .mk-carte:first-child { z-index: 3; }
.mk-carte--2 { z-index: 2; transform: translate(26px, 150px) rotate(2.5deg); opacity: .96; }
.mk-carte--3 { z-index: 1; transform: translate(-18px, 236px) rotate(-2deg); opacity: .9; }
.mk-tete { display: flex; align-items: baseline; gap: 9px; }
.mk-tete .k-type { margin-left: auto; }
.mk-carte .k-score { font-size: 38px; }
.mk-carte h3 { margin: 12px 0 0; font-size: 18px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.mk-org { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-3); }
.mk-carte .k-raisons { margin-top: 14px; }
.mk-section {
  margin: 16px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-4);
}
.mk-legende { margin: 12px 0 0; font-size: 11.5px; color: var(--ink-4); text-align: right; }
.mk-pile + .mk-legende { margin-top: 10px; }
@media (max-width: 959px) {
  .l-hero-visuel { max-width: 460px; }
  .mk-carte--2 { transform: translate(18px, 150px) rotate(2deg); }
  .mk-carte--3 { transform: translate(-10px, 232px) rotate(-1.5deg); }
}

/* ─────────────────────────────── Le rêve ─────────────────────────────── */

.l-reve {
  display: grid; gap: 6px; justify-items: center; text-align: center;
  padding: clamp(40px, 7vw, 72px) 24px; border-radius: 28px;
  background: var(--direct); color: #fff;
}
.l-reve-chiffre {
  margin: 0; font-size: clamp(56px, 11vw, 112px); font-weight: 800; line-height: 1;
  letter-spacing: -.05em; font-variant-numeric: tabular-nums;
}
.l-reve-chiffre small { font-size: .38em; font-weight: 700; letter-spacing: 0; opacity: .8; }
.l-reve-txt { max-width: 30em; margin: 10px 0 0; font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, .86); }
.l-reve-txt strong { color: #fff; }
.l-reve-txt span { display: block; margin-top: 6px; font-weight: 700; color: #fff; }
.l-reve-source { margin: 14px 0 0; font-size: 12px; color: rgba(255, 255, 255, .55); }

/* ─────────────────────────────── Sections ─────────────────────────────── */

.l-section { padding: clamp(64px, 10vw, 120px) 0 0; }
.l-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 13px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--action);
}
.landing h2 {
  margin: 0; font-size: clamp(30px, 4.6vw, 48px); font-weight: 780;
  line-height: 1.08; letter-spacing: -.035em; color: var(--ink);
}
.l-body { max-width: 36em; margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-3); }
.l-body em { font-style: normal; font-weight: 650; color: var(--ink); }

/* ─────────────────────────────── La galère ─────────────────────────────── */

.l-douleurs { display: grid; gap: 14px; margin-top: 34px; }
@media (min-width: 760px) { .l-douleurs { grid-template-columns: 1fr 1fr; } }
.l-douleur {
  padding: 26px 24px; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-2);
}
.l-douleur-ico {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px;
  background: var(--swiss-soft); color: var(--swiss); font-size: 18px; font-weight: 800;
}
.l-douleur h3 { margin: 16px 0 0; font-size: 19px; font-weight: 720; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.l-douleur p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-3); }

/* ─────────────────────────────── Le tournant ─────────────────────────────── */

.l-tournant { padding: clamp(72px, 11vw, 128px) 0 0; text-align: center; }
.l-tournant h2 span { color: var(--action); }
.l-compteurs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin: 40px 0 0; text-align: left;
}
@media (min-width: 900px) { .l-compteurs { grid-template-columns: repeat(4, 1fr); } }
.l-compteurs > div { padding: 22px 20px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2); }
.l-compteurs dt {
  font-size: clamp(30px, 4vw, 40px); font-weight: 800; letter-spacing: -.04em;
  color: var(--action); font-variant-numeric: tabular-nums;
}
.l-compteurs dd { margin: 6px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-2); }
.l-compteurs dd small { font-size: 12px; font-weight: 500; color: var(--ink-4); }

/* ─────────────────────────────── Les chapitres ─────────────────────────────── */

.l-chapitre {
  display: grid; gap: 36px; align-items: center;
  padding: clamp(72px, 10vw, 120px) 0 0;
}
@media (min-width: 960px) {
  .l-chapitre { grid-template-columns: 1fr 1fr; gap: 64px; }
  .l-chapitre--inverse .l-chapitre-txt { order: 2; }
}
.l-num {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--action); color: #fff; font-size: 13px; letter-spacing: 0;
}
.l-benefices { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.l-benefices li {
  position: relative; padding-left: 32px;
  font-size: 15.5px; line-height: 1.55; color: var(--ink-3);
}
.l-benefices li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E8B4D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.l-benefices b { color: var(--ink); font-weight: 680; }
.mk-carte--seule { max-width: 440px; margin: 0 auto; }
.l-chapitre-visuel .mk-legende { max-width: 440px; margin-left: auto; margin-right: auto; }

/* Le trajet : le texte au-dessus, la démo sur toute la largeur. */
.l-chapitre--trajet { grid-template-columns: 1fr !important; gap: 28px; }

.l-demo { padding: 20px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-3); }
.l-demo-head { display: flex; flex-wrap: wrap; gap: 12px; }
.l-demo-head label {
  display: grid; gap: 6px; flex: 1 1 200px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4);
}
.l-demo-head select {
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface-2); font: inherit; font-size: 15px; font-weight: 600;
  letter-spacing: normal; text-transform: none; color: var(--ink);
}
.l-demo-body { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 860px) { .l-demo-body { grid-template-columns: 320px 1fr; } }
.l-demo-map { min-height: 320px; border-radius: 16px; overflow: hidden; background: var(--surface-2); }
.l-demo-load, .l-demo-err { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-3); }
.l-demo-nums { display: grid; gap: 10px; }
.l-demo-nums > div { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); }
.l-demo-nums b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.l-demo-nums b small { font-size: 14px; font-weight: 650; color: var(--ink-3); }
.l-demo-nums span { font-size: 13px; color: var(--ink-3); }
.l-demo-poste { display: flex; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--action-soft); }
.l-demo-poste strong { font-size: 14.5px; color: var(--ink); }
.l-demo-poste p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.passage-pin { width: 12px; height: 12px; flex: none; margin-top: 4px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.l-caption { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-4); }
.pin span {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: var(--pin); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(16, 24, 40, .3);
}

/* Avant / après : ton CV, puis le format suisse. */
.mk-avant-apres { display: grid; gap: 12px; align-items: center; max-width: 520px; margin: 0 auto; }
@media (min-width: 560px) { .mk-avant-apres { grid-template-columns: 1fr auto 1fr; } }
.mk-cv { padding: 20px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-2); }
.mk-cv p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.mk-cv p:last-child { margin-bottom: 0; }
.mk-cv-lib { font-size: 11px !important; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4) !important; }
.mk-cv--avant p:not(.mk-cv-lib) { color: var(--ink-3); }
.mk-cv--apres { box-shadow: var(--shadow-3); outline: 2px solid color-mix(in srgb, var(--green) 35%, transparent); }
.mk-cv mark { background: var(--green-soft); color: var(--green-fort); font-weight: 650; padding: 0 3px; border-radius: 4px; }
.mk-fleche { justify-self: center; font-size: 26px; font-weight: 800; color: var(--action); }
@media (max-width: 559px) { .mk-fleche { transform: rotate(90deg); } }

/* Le kit de candidature. */
.mk-kit {
  display: grid; gap: 10px; max-width: 440px; margin: 0 auto;
  padding: 22px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-3);
}
.mk-kit-lib { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); }
.mk-kit-ligne { margin: 0; font-size: 14px; color: var(--ink-2); }
.mk-kit-corps { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.mk-kit-pj { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-kit-pj span {
  padding: 6px 11px; border-radius: 10px; background: var(--action-soft);
  font-size: 12.5px; font-weight: 650; color: var(--action);
}
.mk-kit-relance { margin: 4px 0 0; font-size: 12.5px; font-weight: 650; color: var(--green-fort); }

/* ─────────────────────────────── Les étapes ─────────────────────────────── */

.l-etapes { text-align: center; }
.l-etapes-liste {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; gap: 14px; text-align: left;
}
@media (min-width: 900px) { .l-etapes-liste { grid-template-columns: repeat(3, 1fr); } }
.l-etapes-liste li { padding: 26px 24px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2); }
.l-etape-num {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px;
  background: var(--action-soft); color: var(--action); font-size: 17px; font-weight: 800;
}
.l-etapes-liste h3 { margin: 16px 0 0; font-size: 18px; font-weight: 720; line-height: 1.3; color: var(--ink); }
.l-etapes-liste p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-3); }

/* ─────────────────────────────── Les engagements ─────────────────────────────── */

.l-engagements-liste { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .l-engagements-liste { grid-template-columns: 1fr 1fr; } }
.l-engagements-liste li {
  position: relative; padding: 22px 22px 22px 60px; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-2);
  font-size: 15px; line-height: 1.55; color: var(--ink-3);
}
.l-engagements-liste li::before {
  content: '×'; position: absolute; left: 20px; top: 20px;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-3); font-size: 18px; font-weight: 700; line-height: 1;
}
.l-engagements-liste strong { display: block; margin-bottom: 4px; font-size: 16px; color: var(--ink); }

/* ─────────────────────────────── L'élan ─────────────────────────────── */

.l-final {
  display: grid; justify-items: center; gap: 26px; text-align: center;
  margin: clamp(72px, 11vw, 128px) 0 0; padding: clamp(48px, 8vw, 88px) 24px;
  border-radius: 32px; background: var(--direct);
}
.l-final h2 { color: #fff; max-width: 18em; }
.l-final h2 span { color: #7FC4D6; }

/* ─────────────────────────────── Pied ─────────────────────────────── */

.l-footer {
  max-width: 1120px; margin: 0 auto; padding: 48px 22px 64px;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-4);
}
.l-footer p { margin: 0 0 8px; }
.l-footer b { color: var(--ink-2); }
.l-footer .l-legal { margin-top: 14px; }
.l-footer .l-legal a { color: var(--ink-3); text-underline-offset: 2px; }
.l-footer .l-legal a:hover { color: var(--ink); }

/* ─────────────────────────────── Apparition ───────────────────────────────
   Les blocs montent doucement en arrivant à l'écran. Masqués SEULEMENT si
   le script tourne (classe « js » posée dans le <head>) : sans JavaScript,
   tout reste visible. Et rien ne bouge pour qui a demandé moins
   d'animations. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.est-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────────────── Mobile ─────────────────────────────── */

@media (max-width: 640px) {
  .landing main { padding: 0 16px; }
  .l-nav { padding: 12px 16px; }
  .nav-cta { padding: 8px 14px; font-size: 13.5px; }
  .l-actions { flex-direction: column; align-items: stretch; }
  .l-btn { justify-content: center; }
  .l-reve { border-radius: 22px; }
  .l-final { border-radius: 24px; }
  .l-demo { padding: 14px; }
  .l-footer { padding: 40px 16px 56px; }
}

/* Même forme que tous les boutons du site : une capsule. */
.l-btn { border-radius: 999px; }