/* ============================================================================
   Vitrine publique — accueil, bourse d'emploi, offre.

   Direction : le logo est un tracé monoligne, large, sans fioriture. La page
   reprend cette écriture — traits nets, aplats francs, aucune ombre portée
   décorative. La couleur de marque est réservée : magenta sur les seuls
   éléments qui appellent une action, indigo pour tout ce qui structure.

   Le fond alterne clair et indigo profond d'une section à l'autre. C'est ce
   rythme qui donne le sentiment d'avancer dans un argumentaire plutôt que de
   dérouler une liste.
   ============================================================================ */

.vit {
  margin: 0;
  font-family: var(--lf-texte);
  color: var(--lf-encre);
  background: var(--lf-blanc);
  -webkit-font-smoothing: antialiased;
}

.vit__wrap {
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
}

.vit__skip {
  position: absolute; left: -9999px;
  background: var(--lf-indigo); color: #fff; padding: .7rem 1rem; z-index: 200;
}
.vit__skip:focus { left: 1rem; top: 1rem; border-radius: var(--lf-r-sm); }

/* ------------------------------------------------------------ Typographie */

.vit__h2 {
  font-family: var(--lf-titre);
  font-size: clamp(1.75rem, 3.6vw, 2.85rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--lf-indigo);
  text-wrap: balance;
  margin: 0 0 1rem;
}
.vit__h2--clair { color: var(--lf-blanc); }

.vit__eyebrow {
  display: inline-block;
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--lf-magenta);
  margin: 0 0 .7rem;
}
.vit__eyebrow--clair { color: #f2a8ca; }

.vit__lede {
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.65;
  color: var(--lf-ardoise);
  max-width: 62ch;
  margin: 0 0 2rem;
}
.vit__lede--centre { margin-inline: auto; text-align: center; }

/* ------------------------------------------------------------- Boutons */

.vit .btn--lg { padding: .85rem 1.6rem; font-size: 1rem; border-radius: var(--lf-r-md); }
.vit .btn--block { display: flex; width: 100%; justify-content: center; }

.vit .btn--primary,
.vit__bar .btn--primary {
  background: var(--lf-magenta);
  border-color: var(--lf-magenta);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--lf-ombre-marque);
}
.vit .btn--primary:hover { background: var(--lf-magenta-vif); border-color: var(--lf-magenta-vif); }

.btn--fantome {
  background: transparent;
  border: 1.5px solid var(--lf-nuage);
  color: var(--lf-indigo);
  font-weight: 600;
}
.btn--fantome:hover { border-color: var(--lf-indigo); background: var(--lf-indigo-voile); }

.btn--blanc { background: #fff; border-color: #fff; color: var(--lf-indigo); font-weight: 700; }
.btn--blanc:hover { background: var(--lf-lin); }

.btn--fantome-clair {
  background: transparent; border: 1.5px solid rgb(255 255 255 / .35);
  color: #fff; font-weight: 600;
}
.btn--fantome-clair:hover { border-color: #fff; background: rgb(255 255 255 / .1); }

/* ==================================================================== Barre */

.vit__bar {
  position: sticky; top: 0; z-index: 100;
  background: rgb(255 255 255 / .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.vit__bar.is-dense { border-bottom-color: var(--lf-nuage); box-shadow: var(--lf-ombre-1); }

.vit__bar .vit__wrap {
  display: flex; align-items: center; gap: 1.5rem;
  height: 68px;
}
.vit__logo { text-decoration: none; flex: 0 0 auto; }

.vit__nav { display: flex; gap: 1.6rem; margin-left: auto; }
.vit__nav a {
  font-size: .93rem; font-weight: 500; text-decoration: none;
  color: var(--lf-ardoise); padding: .3rem 0;
  border-bottom: 2px solid transparent;
}
.vit__nav a:hover { color: var(--lf-indigo); border-bottom-color: var(--lf-magenta); }
.vit__nav-fort { color: var(--lf-magenta) !important; font-weight: 600 !important; }

.vit__actions { display: flex; align-items: center; gap: .8rem; }
.vit__connexion {
  font-size: .93rem; font-weight: 600; text-decoration: none; color: var(--lf-indigo);
}
.vit__connexion:hover { color: var(--lf-magenta); }

.vit__burger {
  display: none; flex-direction: column; gap: 4px; justify-content: center;
  width: 40px; height: 40px; padding: 0 9px;
  background: none; border: 1px solid var(--lf-nuage); border-radius: var(--lf-r-sm);
  cursor: pointer;
}
.vit__burger span { display: block; height: 2px; background: var(--lf-indigo); border-radius: 2px; }

.vit__flash { padding-top: 1rem; }

/* ==================================================================== Héros */

.hro { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); }
.hro__fond {
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgb(165 25 91 / .10), transparent 62%),
    radial-gradient(900px 480px at 8% 8%, rgb(46 36 130 / .09), transparent 60%),
    var(--lf-lin);
}
.hro__in {
  position: relative;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}

.hro__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .38rem .85rem .38rem .6rem;
  border-radius: 999px;
  background: #fff; border: 1px solid var(--lf-nuage);
  font-size: .82rem; font-weight: 600; color: var(--lf-ardoise);
  margin: 0 0 1.3rem;
  box-shadow: var(--lf-ombre-1);
}
.hro__pouls {
  width: 8px; height: 8px; border-radius: 50%; background: var(--lf-magenta);
  box-shadow: 0 0 0 0 rgb(165 25 91 / .5);
  animation: hro-pouls 2.4s ease-out infinite;
}
@keyframes hro-pouls {
  70%  { box-shadow: 0 0 0 9px rgb(165 25 91 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(165 25 91 / 0); }
}

.hro__titre {
  font-family: var(--lf-titre);
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -.025em;
  color: var(--lf-indigo); text-wrap: balance;
  margin: 0 0 1.2rem;
}
.hro__titre span {
  display: block; margin-top: .35rem;
  font-size: .62em; font-weight: 600; line-height: 1.28;
  color: var(--lf-magenta);
}

.hro__lede {
  font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.68;
  color: var(--lf-ardoise); max-width: 56ch; margin: 0 0 2rem;
}

.hro__act { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.5rem; }

.hro__preuves {
  display: flex; flex-wrap: wrap; gap: 1.8rem;
  list-style: none; margin: 0; padding: 1.5rem 0 0;
  border-top: 1px solid var(--lf-nuage);
}
.hro__preuves li { display: flex; flex-direction: column; }
.hro__preuves strong {
  font-family: var(--lf-titre); font-size: 1.6rem; font-weight: 700;
  color: var(--lf-indigo); line-height: 1;
}
.hro__preuves span { font-size: .82rem; color: var(--lf-brume); margin-top: .25rem; }

/* ---- Maquette produit ---- */

.dmo {
  border-radius: var(--lf-r-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--lf-nuage);
  box-shadow: var(--lf-ombre-3);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
}
.dmo__bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .8rem; background: var(--lf-lin);
  border-bottom: 1px solid var(--lf-nuage);
}
.dmo__pt { width: 9px; height: 9px; border-radius: 50%; background: var(--lf-nuage); }
.dmo__url {
  margin-left: .6rem; font-size: .7rem; color: var(--lf-brume);
  font-family: var(--lf-mono);
}
.dmo__corps { padding: .9rem; display: flex; flex-direction: column; gap: .7rem; }

.dmo__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.dmo__k {
  padding: .55rem .6rem; border-radius: var(--lf-r-sm);
  background: var(--lf-lin); border-left: 3px solid var(--lf-magenta);
}
.dmo__k--alt { border-left-color: var(--lf-indigo); }
.dmo__k b { display: block; font-size: 1.15rem; font-weight: 700; color: var(--lf-indigo); }
.dmo__k i { font-style: normal; font-size: .62rem; color: var(--lf-brume); text-transform: uppercase; letter-spacing: .05em; }

.dmo__carte {
  position: relative; height: 150px; border-radius: var(--lf-r-sm);
  background: #eef1f7; overflow: hidden;
}
.dmo__route { position: absolute; background: #dbe1ec; border-radius: 3px; }
.dmo__route--1 { left: 0; right: 0; top: 42%; height: 7px; }
.dmo__route--2 { top: 0; bottom: 0; left: 33%; width: 7px; }
.dmo__route--3 { left: 8%; right: 12%; top: 74%; height: 5px; transform: rotate(-4deg); }
.dmo__veh {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  background: var(--lf-magenta); border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgb(23 21 41 / .25);
}
.dmo__veh--1 { left: 20%; top: 39%; animation: dmo-go1 9s ease-in-out infinite; }
.dmo__veh--2 { left: 33%; top: 20%; background: var(--lf-indigo); animation: dmo-go2 11s ease-in-out infinite; }
.dmo__veh--3 { left: 66%; top: 71%; background: #16a34a; }
@keyframes dmo-go1 { 50% { left: 74%; } }
@keyframes dmo-go2 { 50% { top: 66%; } }

.dmo__lignes { display: flex; flex-direction: column; gap: .3rem; }
.dmo__l {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .5rem; border-radius: var(--lf-r-sm); background: var(--lf-lin);
  font-size: .74rem;
}
.dmo__l span { width: 3px; height: 20px; border-radius: 2px; background: #16a34a; }
.dmo__l span.is-b { background: var(--lf-indigo); }
.dmo__l span.is-c { background: var(--lf-brume); }
.dmo__l b { font-weight: 700; color: var(--lf-encre); }
.dmo__l i { margin-left: auto; font-style: normal; color: var(--lf-brume); }

/* =============================================================== Problèmes */

.prb { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.prb .vit__h2 { text-align: center; }
.prb__grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem; margin-top: 3rem;
}
.prb__i {
  position: relative; padding: 1.6rem 1.5rem 1.5rem;
  border: 1px solid var(--lf-nuage); border-radius: var(--lf-r-lg);
  background: #fff;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.prb__i:hover { border-color: var(--lf-magenta); transform: translateY(-3px); box-shadow: var(--lf-ombre-2); }
.prb__n {
  display: block; font-family: var(--lf-mono); font-size: .8rem; font-weight: 700;
  color: var(--lf-magenta); margin-bottom: .7rem;
}
.prb__i h3 {
  font-family: var(--lf-titre); font-size: 1.08rem; font-weight: 700;
  color: var(--lf-indigo); margin: 0 0 .55rem; line-height: 1.3;
}
.prb__i p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--lf-ardoise); }

/* ========================================================== Fonctionnalités */

.fnc { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--lf-lin); }
.fnc__grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem; margin-top: 2.5rem;
}
.fnc__i {
  padding: 1.5rem; border-radius: var(--lf-r-lg);
  background: #fff; border: 1px solid var(--lf-nuage);
}
.fnc__i h3 {
  font-family: var(--lf-titre); font-size: 1.05rem; font-weight: 700;
  color: var(--lf-indigo); margin: 0 0 .6rem;
  padding-left: .85rem; border-left: 3px solid var(--lf-magenta);
}
.fnc__i p { margin: 0 0 1rem; font-size: .9rem; line-height: 1.6; color: var(--lf-ardoise); }
.fnc__i ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.fnc__i li {
  position: relative; padding-left: 1.3rem;
  font-size: .84rem; color: var(--lf-encre);
}
.fnc__i li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lf-magenta); opacity: .55;
}

/* ===================================================================== GPS */

.gps {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--lf-indigo-nuit);
  color: #fff;
  overflow: hidden;
}
.gps__in {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.gps__lede { font-size: 1.05rem; line-height: 1.7; color: rgb(255 255 255 / .72); margin: 0 0 2rem; max-width: 54ch; }

.gps__pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.gps__pts li {
  padding-left: 1.6rem; position: relative;
}
.gps__pts li::before {
  content: ''; position: absolute; left: 0; top: .35em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lf-magenta-vif);
  box-shadow: 0 0 0 4px rgb(196 31 109 / .18);
}
.gps__pts strong { display: block; font-size: .96rem; font-weight: 600; color: #fff; }
.gps__pts span { display: block; font-size: .85rem; line-height: 1.55; color: rgb(255 255 255 / .58); margin-top: .15rem; }

.gps__carte {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--lf-r-lg);
  background: #1b1650; border: 1px solid rgb(255 255 255 / .1); overflow: hidden;
}
.gps__grille {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 34px 34px;
}
.gps__trace {
  position: absolute; left: 12%; top: 62%; width: 66%; height: 34%;
  border-top: 2.5px solid var(--lf-magenta-vif);
  border-left: 2.5px solid var(--lf-magenta-vif);
  border-radius: 40% 0 0 0;
  opacity: .75;
}
.gps__pin {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: rgb(255 255 255 / .1); display: grid; place-items: center;
}
.gps__pin i { width: 11px; height: 11px; border-radius: 50%; background: var(--lf-magenta-vif); }
.gps__pin--a { left: 11%; top: 58%; }
.gps__pin--b { left: 44%; top: 30%; }
.gps__pin--b i { background: #16a34a; }
.gps__pin--c { left: 74%; top: 66%; }
.gps__pin--c i { background: rgb(255 255 255 / .45); }

.gps__bulle {
  position: absolute; right: 7%; top: 12%;
  padding: .7rem .85rem; border-radius: var(--lf-r-md);
  background: rgb(255 255 255 / .96); color: var(--lf-encre);
  box-shadow: var(--lf-ombre-3); min-width: 150px;
}
.gps__bulle b { display: block; font-size: .82rem; font-weight: 700; color: var(--lf-indigo); }
.gps__v {
  display: block; font-family: var(--lf-titre); font-size: 1.8rem; font-weight: 700;
  color: var(--lf-magenta); line-height: 1.05; margin: .1rem 0;
}
.gps__v small { font-size: .38em; font-weight: 600; margin-left: .15em; opacity: .65; }
.gps__bulle i { font-style: normal; font-size: .7rem; color: var(--lf-brume); }

/* =========================================================== Ils recrutent */

.rec { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--lf-indigo); color: #fff; }
.rec .vit__h2 { color: #fff; }
.rec .vit__lede { color: rgb(255 255 255 / .7); }
.rec__tete {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  align-items: flex-end; justify-content: space-between; margin-bottom: 2.5rem;
}
.rec__grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem;
}
.rec__vide {
  padding: 3rem 1.5rem; text-align: center;
  border: 1px dashed rgb(255 255 255 / .25); border-radius: var(--lf-r-lg);
}
.rec__vide h3 { font-family: var(--lf-titre); font-size: 1.3rem; margin: 0 0 .6rem; }
.rec__vide p { color: rgb(255 255 255 / .65); max-width: 52ch; margin: 0 auto 1.5rem; line-height: 1.6; }
.rec__vide .btn--fantome { border-color: rgb(255 255 255 / .35); color: #fff; }
.rec__vide .btn--fantome:hover { background: rgb(255 255 255 / .1); border-color: #fff; }

/* ------------------------------------------------ Carte d'offre (partagée) */

.emc { height: 100%; }
.emc__lien {
  display: flex; flex-direction: column; height: 100%; gap: .8rem;
  padding: 1.35rem; border-radius: var(--lf-r-lg);
  background: #fff; border: 1px solid var(--lf-nuage);
  text-decoration: none; color: inherit;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.emc__lien:hover { border-color: var(--lf-magenta); transform: translateY(-3px); box-shadow: var(--lf-ombre-2); }

.emc--sombre .emc__lien {
  background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .14); color: #fff;
}
.emc--sombre .emc__lien:hover { background: rgb(255 255 255 / .1); border-color: var(--lf-magenta-vif); }
.emc--sombre .emc__titre { color: #fff; }
.emc--sombre .emc__societe { color: rgb(255 255 255 / .6); }
.emc--sombre .emc__tag { background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .82); }
.emc--sombre .emc__pied { border-top-color: rgb(255 255 255 / .12); }
.emc--sombre .emc__salaire { color: #fff; }

.emc__tete { display: flex; flex-direction: column; gap: .2rem; }
.emc__titre {
  font-family: var(--lf-titre); font-size: 1.02rem; font-weight: 700;
  color: var(--lf-indigo); margin: 0; line-height: 1.32;
}
.emc__societe { margin: 0; font-size: .82rem; font-weight: 600; color: var(--lf-magenta); }

.emc__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.emc__tag {
  font-size: .72rem; font-weight: 600; padding: .22rem .55rem;
  border-radius: 999px; background: var(--lf-lin); color: var(--lf-ardoise);
}
.emc__tag--contrat { background: var(--lf-indigo-voile); color: var(--lf-indigo); }
.emc__tag--salaire { background: var(--lf-magenta-voile); color: var(--lf-magenta); }

.emc__desc { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--lf-ardoise); }

.emc__pied {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--lf-nuage);
}
.emc__salaire { font-size: .88rem; font-weight: 700; color: var(--lf-indigo); }
.emc__salaire--nc { font-weight: 500; color: var(--lf-brume); }
.emc__cta { font-size: .82rem; font-weight: 700; color: var(--lf-magenta); white-space: nowrap; }
.emc__cta span { display: inline-block; transition: transform .2s; }
.emc__lien:hover .emc__cta span { transform: translateX(4px); }

/* ================================================================= Tarifs */

.trf { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.trf .vit__h2, .trf .vit__eyebrow { text-align: center; display: block; }
.trf__grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem; margin: 3rem 0 2.5rem; align-items: start;
}
.trf__i {
  position: relative; padding: 1.8rem 1.4rem 1.5rem; text-align: center;
  border: 1px solid var(--lf-nuage); border-radius: var(--lf-r-lg); background: #fff;
}
.trf__i.is-vedette {
  border-color: var(--lf-magenta); border-width: 2px;
  box-shadow: var(--lf-ombre-marque);
}
.trf__ruban {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: .25rem .8rem; border-radius: 999px;
  background: var(--lf-magenta); color: #fff;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  white-space: nowrap;
}
.trf__i h3 {
  font-family: var(--lf-titre); font-size: 1.15rem; font-weight: 700;
  color: var(--lf-indigo); margin: 0 0 .2rem;
}
.trf__plage { margin: 0 0 1.2rem; font-size: .82rem; color: var(--lf-brume); }
.trf__prix { margin: 0; line-height: 1; }
.trf__prix strong {
  font-family: var(--lf-titre); font-size: 2.1rem; font-weight: 700;
  color: var(--lf-indigo); letter-spacing: -.02em;
}
.trf__prix span { display: block; font-size: .78rem; color: var(--lf-brume); margin-top: .3rem; }
.trf__mois { margin: .5rem 0 1.4rem; font-size: .78rem; color: var(--lf-brume); }

.trf__inclus {
  padding: 1.8rem; border-radius: var(--lf-r-lg);
  background: var(--lf-lin); border: 1px solid var(--lf-nuage);
}
.trf__inclus h3 {
  font-family: var(--lf-titre); font-size: 1rem; font-weight: 700;
  color: var(--lf-indigo); margin: 0 0 1rem; text-align: center;
}
.trf__inclus ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem;
}
.trf__inclus li {
  position: relative; padding-left: 1.5rem; font-size: .88rem; color: var(--lf-encre);
}
.trf__inclus li::before {
  content: '✓'; position: absolute; left: 0; top: -.05em;
  color: var(--lf-magenta); font-weight: 700;
}

/* ============================================================== Démarrage */

.dem { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--lf-lin); }
.dem__etapes {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem;
}
.dem__e { display: flex; gap: .9rem; }
.dem__n {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lf-degrade); color: #fff;
  font-family: var(--lf-titre); font-weight: 700; font-size: .95rem;
}
.dem__e h3 {
  font-family: var(--lf-titre); font-size: 1rem; font-weight: 700;
  color: var(--lf-indigo); margin: .3rem 0 .35rem;
}
.dem__e p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--lf-ardoise); }

/* ================================================================== Appel */

.cta { padding: clamp(3.5rem, 7vw, 5.5rem) 0; background: var(--lf-degrade); color: #fff; }
.cta__in { text-align: center; }
.cta__in h2 {
  font-family: var(--lf-titre); font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
  margin: 0 auto 1rem; max-width: 22ch; text-wrap: balance;
}
.cta__in p { margin: 0 auto 2rem; max-width: 54ch; font-size: 1.02rem; line-height: 1.65; color: rgb(255 255 255 / .85); }
.cta__act { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ================================================================== Pied */

.vit__pied { background: var(--lf-indigo-nuit); color: rgb(255 255 255 / .68); padding: 3.5rem 0 0; }
.vit__pied-grille {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem;
  padding-bottom: 2.5rem;
}
.vit__pied-marque p { margin: 1rem 0 0; font-size: .88rem; line-height: 1.6; max-width: 38ch; }
.vit__pied-liens { display: flex; flex-direction: column; gap: .5rem; }
.vit__pied-liens h3 {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: #fff; margin: 0 0 .3rem;
}
.vit__pied-liens a { font-size: .88rem; color: rgb(255 255 255 / .68); text-decoration: none; }
.vit__pied-liens a:hover { color: #fff; }

.vit__pied-bas {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  padding: 1.2rem 0; border-top: 1px solid rgb(255 255 255 / .1);
  font-size: .8rem; color: rgb(255 255 255 / .45);
}

/* ================================================== Bourse d'emploi (page) */

.emp__tete { padding: clamp(2.5rem, 5vw, 4rem) 0 2.5rem; background: var(--lf-lin); border-bottom: 1px solid var(--lf-nuage); }
.emp__titre {
  font-family: var(--lf-titre); font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -.02em;
  color: var(--lf-indigo); margin: 0 0 .8rem; text-wrap: balance;
}
.emp__lede { font-size: 1.02rem; line-height: 1.65; color: var(--lf-ardoise); max-width: 62ch; margin: 0 0 2rem; }

.emp__rech { display: flex; flex-wrap: wrap; gap: .6rem; }
.emp__champ {
  flex: 1 1 260px; display: flex; align-items: center; gap: .5rem;
  padding: 0 .9rem; height: 46px;
  background: #fff; border: 1px solid var(--lf-nuage); border-radius: var(--lf-r-md);
  color: var(--lf-brume);
}
.emp__champ:focus-within { border-color: var(--lf-magenta); }
.emp__champ input { flex: 1; border: 0; outline: 0; background: none; font-size: .95rem; color: var(--lf-encre); height: 100%; }
.emp__rech select {
  height: 46px; padding: 0 .8rem; border-radius: var(--lf-r-md);
  border: 1px solid var(--lf-nuage); background: #fff; font-size: .92rem; color: var(--lf-encre);
}
.emp__rech .btn { height: 46px; }

.emp__liste { padding: 2.5rem 0 4rem; }
.emp__compte { font-size: .88rem; color: var(--lf-brume); margin: 0 0 1.2rem; }
.emp__compte a { color: var(--lf-magenta); }
.emp__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem; }

.emp__vide { text-align: center; padding: 4rem 1.5rem; }
.emp__vide h2 { font-family: var(--lf-titre); font-size: 1.4rem; color: var(--lf-indigo); margin: 0 0 .7rem; }
.emp__vide p { color: var(--lf-ardoise); max-width: 48ch; margin: 0 auto 1.5rem; line-height: 1.6; }

.emp__appel { background: var(--lf-indigo); color: #fff; padding: 3rem 0; }
.emp__appel-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.emp__appel h2 { font-family: var(--lf-titre); font-size: 1.5rem; margin: 0 0 .5rem; }
.emp__appel p { margin: 0; color: rgb(255 255 255 / .7); max-width: 60ch; line-height: 1.6; font-size: .95rem; }

/* ======================================================= Offre + formulaire */

.ofr__tete { padding: 2.5rem 0; background: var(--lf-lin); border-bottom: 1px solid var(--lf-nuage); }
.ofr__retour { display: inline-block; font-size: .88rem; color: var(--lf-ardoise); text-decoration: none; margin-bottom: 1.2rem; }
.ofr__retour:hover { color: var(--lf-magenta); }
.ofr__societe { margin: 0 0 .3rem; font-size: .95rem; font-weight: 700; color: var(--lf-magenta); }
.ofr__titre {
  font-family: var(--lf-titre); font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
  color: var(--lf-indigo); margin: 0 0 1.2rem; text-wrap: balance;
}
.ofr__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }

.ofr__corps {
  display: grid; grid-template-columns: 1fr 440px; gap: 2.5rem;
  padding: 2.5rem 0 4rem; align-items: start;
}
.ofr__bloc { margin-bottom: 2rem; }
.ofr__bloc h2 {
  font-family: var(--lf-titre); font-size: 1.15rem; font-weight: 700;
  color: var(--lf-indigo); margin: 0 0 .8rem;
  padding-left: .8rem; border-left: 3px solid var(--lf-magenta);
}
.ofr__bloc p { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--lf-ardoise); }
.ofr__criteres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ofr__criteres li {
  position: relative; padding-left: 1.5rem; font-size: .95rem; color: var(--lf-encre);
}
.ofr__criteres li::before {
  content: ''; position: absolute; left: 0; top: .48em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--lf-magenta); opacity: .6;
}
.ofr__exig { margin-top: .9rem !important; }
.ofr__garde {
  padding: 1.1rem 1.2rem; border-radius: var(--lf-r-md);
  background: var(--lf-magenta-voile); border-left: 3px solid var(--lf-magenta);
}
.ofr__garde h2 { border: 0; padding: 0; font-size: 1rem; }
.ofr__garde p { font-size: .88rem; color: var(--lf-encre); }

.ofr__form {
  position: sticky; top: 88px;
  padding: 1.6rem; border-radius: var(--lf-r-lg);
  background: #fff; border: 1px solid var(--lf-nuage); box-shadow: var(--lf-ombre-2);
}
.ofr__form-titre {
  font-family: var(--lf-titre); font-size: 1.3rem; font-weight: 700;
  color: var(--lf-indigo); margin: 0 0 .3rem;
}
.ofr__form-lede { margin: 0 0 1.4rem; font-size: .88rem; color: var(--lf-brume); }

.ofr__merci { padding: 4rem 0 5rem; }
.ofr__merci-in {
  max-width: 620px; margin-inline: auto; text-align: center;
  padding: 3rem 2rem; border-radius: var(--lf-r-lg);
  background: var(--lf-lin); border: 1px solid var(--lf-nuage);
}
.ofr__merci-ico {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 1.5rem;
  border-radius: 50%; background: var(--lf-degrade); color: #fff; font-size: 1.7rem;
}
.ofr__merci-in h1 {
  font-family: var(--lf-titre); font-size: 1.7rem; font-weight: 700;
  color: var(--lf-indigo); margin: 0 0 .8rem;
}
.ofr__merci-in p { margin: 0 0 1rem; line-height: 1.65; color: var(--lf-ardoise); }
.ofr__merci-note { font-size: .88rem; color: var(--lf-brume) !important; }
.ofr__merci-act { margin-top: 1.8rem; }

/* Le piège à robots doit être invisible sans être `display:none` — certains
   robots ignorent les champs masqués de cette façon. */
.frm__piege {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ============================================================== Adaptatif */

@media (max-width: 980px) {
  .hro__in, .gps__in { grid-template-columns: 1fr; }
  .hro__demo { order: -1; max-width: 480px; }
  .dmo { transform: none; }
  .ofr__corps { grid-template-columns: 1fr; }
  .ofr__form { position: static; }
  .vit__pied-grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .vit__nav {
    position: fixed; inset: 68px 0 auto; z-index: 99;
    flex-direction: column; gap: 0; margin: 0;
    background: #fff; border-bottom: 1px solid var(--lf-nuage);
    box-shadow: var(--lf-ombre-2);
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  body.vit-menu .vit__nav { max-height: 60vh; }
  .vit__nav a { padding: .95rem 1.25rem; border-bottom: 1px solid var(--lf-lin); }
  .vit__nav a:hover { border-bottom-color: var(--lf-lin); background: var(--lf-lin); }
  .vit__burger { display: flex; }
  .vit__connexion { display: none; }
}

@media (max-width: 640px) {
  .vit__wrap { width: min(1180px, 100% - 1.75rem); }
  .hro__preuves { gap: 1.2rem; }
  .hro__preuves strong { font-size: 1.3rem; }
  .hro__act .btn { flex: 1 1 100%; justify-content: center; }
  .rec__tete { flex-direction: column; align-items: stretch; }
  .rec__tete .btn { align-self: flex-start; }
  .vit__pied-grille { grid-template-columns: 1fr; gap: 1.75rem; }
  .emp__rech .btn { flex: 1 1 100%; }
  .cta__act .btn { flex: 1 1 100%; }
  .dmo__carte { height: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .hro__pouls, .dmo__veh { animation: none; }
  .prb__i:hover, .emc__lien:hover { transform: none; }
}

/* ============================================================================
   Offres en mode « recette » : VTC, taxi, location-gérance.

   L'échange est inversé — le chauffeur verse au lieu de recevoir. La page doit
   le dire sans ambiguïté, sinon un candidat qui cherche un salaire perd son
   temps et l'exploitant trie des dossiers pour rien.
   ============================================================================ */

.emc__tag--vtc {
  background: var(--lf-indigo);
  color: #fff;
}
.emc--sombre .emc__tag--vtc { background: var(--lf-magenta-vif); color: #fff; }

.emc__tag--recette {
  background: color-mix(in srgb, var(--lf-indigo) 12%, transparent);
  color: var(--lf-indigo);
}

.emc__salaire--recette { display: flex; flex-direction: column; line-height: 1.15; }
.emc__salaire--recette small {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--lf-magenta); opacity: .9;
}
.emc--sombre .emc__salaire--recette small { color: #f2a8ca; }

/* ---- Le tableau des conditions ---- */

.ofr__modele {
  margin: 0 0 1.1rem !important;
  font-size: .98rem; line-height: 1.65;
}

.vtc {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem;
}
.vtc__i {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .8rem .9rem; border-radius: var(--lf-r-md);
  background: var(--lf-lin); border: 1px solid var(--lf-nuage);
}
.vtc__v {
  font-family: var(--lf-titre); font-size: 1.02rem; font-weight: 700;
  line-height: 1.2; color: var(--lf-encre);
}
.vtc__v small { font-size: .6em; font-weight: 600; margin-left: .1em; opacity: .6; }
.vtc__l {
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--lf-brume);
}

/* Le montant à verser est le chiffre décisif : il porte la couleur de marque. */
.vtc__i--fort {
  border-color: var(--lf-magenta);
  background: var(--lf-magenta-voile);
}
.vtc__i--fort .vtc__v { font-size: 1.25rem; color: var(--lf-magenta); }

/* Une charge qui pèse sur le chauffeur est signalée : c'est ce qu'il regarde
   après le montant, et le lui cacher serait le tromper. */
.vtc__i--chauffeur .vtc__v { color: var(--lf-magenta-sombre); }
.vtc__i--entreprise .vtc__v { color: #15803d; }
.vtc__i--alerte { border-color: var(--color-warning, #d97706); }
.vtc__i--alerte .vtc__v { color: var(--color-warning, #d97706); }

.ofr__caution {
  margin: .9rem 0 0 !important;
  padding: .7rem .85rem; border-radius: var(--lf-r-sm);
  border-left: 3px solid var(--color-warning, #d97706);
  background: color-mix(in srgb, var(--color-warning, #d97706) 8%, transparent);
  font-size: .86rem !important; line-height: 1.55;
  color: var(--lf-encre) !important;
}

/* ---- Les véhicules confiés ---- */

.ofr__veh-lede { margin: 0 0 1rem !important; font-size: .92rem !important; }

.vfl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem;
}
.vfl__i {
  display: flex; flex-direction: column;
  border: 1px solid var(--lf-nuage); border-radius: var(--lf-r-md);
  overflow: hidden; background: var(--lf-blanc);
}
.vfl__img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  background: var(--lf-lin);
}
.vfl__img--vide {
  display: grid; place-items: center; color: var(--lf-nuage);
}
.vfl__corps { padding: .8rem .9rem; }
.vfl__nom {
  margin: 0 0 .6rem; font-family: var(--lf-titre);
  font-size: .95rem; font-weight: 700; color: var(--lf-indigo);
}
.vfl__specs { margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.vfl__specs > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  font-size: .82rem;
}
.vfl__specs dt { color: var(--lf-brume); }
.vfl__specs dd {
  margin: 0; font-weight: 600; color: var(--lf-encre);
  font-variant-numeric: tabular-nums; text-align: right;
}

@media (max-width: 640px) {
  .vtc { grid-template-columns: 1fr 1fr; }
  .vtc__i--fort { grid-column: 1 / -1; }
  .vfl { grid-template-columns: 1fr; }
}