/* ==========================================================================
   Josefine — code customisations on top of the Framer export.
   Loaded on every page. CSS is used wherever possible because Framer
   re-hydrates the DOM from its JS bundle and reverts direct HTML edits,
   but it never touches stylesheets.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Remove the "Espace Locataire" navigation entry.
   The link is also stripped from the served HTML, so crawlers do not see it;
   this rule covers the copy that hydration puts back into the DOM.
   -------------------------------------------------------------------------- */
.framer-u653dr {
  display: none !important;
}

/* --------------------------------------------------------------------------
   5. Homepage hero order: lead with the headline + "Découvrir Josefine"
   video, and show the purple Josefine screen after it.

   .framer-19j2lei = "First screen" — purple brand screen
   .framer-7u37s9  = "Clients"      — headline + video card

   Both are flex children of the Hero (.framer-ykgwn3, flex-direction:column),
   so ordering is all that is needed. Delete this block to go back.
   -------------------------------------------------------------------------- */
/* The purple screen is relocated out of the hero by josefine.js, so it no
   longer needs an order here - and an !important order would beat the inline
   one the relocation sets, parking it after the closing section. */
.framer-7u37s9 {
  order: 1 !important;
}

/* --------------------------------------------------------------------------
   2. "Retour" link that replaces the inert "Accès anticipé" button on the
   feature pages. Inherits the original button's look; only the affordance
   changes, so it now reads and behaves as a link.
   -------------------------------------------------------------------------- */
[data-josefine-back] {
  cursor: pointer;
}

[data-josefine-back]:focus-visible {
  outline: 2px solid #7971ff;
  outline-offset: 4px;
  border-radius: 999px;
}


/* --------------------------------------------------------------------------
   7. Pricing now lives on its own hand-written page (/tarifs), with the three
   plans and the "after tax" notes. The Framer section it replaces carried the
   old two-plan grid, an English "Choose this plan" CTA and a monthly/annual
   toggle, so it is hidden here and every pricing link points at /tarifs.
   -------------------------------------------------------------------------- */
/* Framer renders one variant of the section per breakpoint (.framer-11ujoq5 on
   desktop, .framer-nn95ce on mobile), so match on the name it keeps on all of
   them, scoped to the home page. */
.josefine-home [data-framer-name="Pricing"] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   With the hero blocks swapped, the headline block no longer sits below the
   purple screen and lost the breathing room that provided. The nav is fixed
   over the top of the page, so the space has to be given back explicitly.
   -------------------------------------------------------------------------- */
.josefine-home .framer-7u37s9 {
  padding-top: 132px !important;
  padding-left: clamp(24px, 5vw, 88px) !important;
  padding-right: clamp(24px, 5vw, 88px) !important;
  align-items: flex-start !important;
}

@media (max-width: 810px) {
  .josefine-home .framer-7u37s9 {
    padding-top: 92px !important;
  }

  /* Internal padding tuned for the old stacked arrangement, where the purple
     screen came first. It now just opens a gap under the navigation. */
  .josefine-home .framer-osccpf {
    padding-top: 32px !important;
  }
}

/* --------------------------------------------------------------------------
   Hero as two columns: the wording on the left, the showreel on the right.
   .framer-osccpf stacks them vertically by default; below 1000px it stays
   stacked, which is what the narrow layout needs anyway.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .josefine-home .framer-osccpf {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: center;
    width: 100% !important;
    max-width: none !important;
    /* 200px of top padding suited the stacked layout; side by side it just
       leaves a dead band under the fold. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .josefine-home .framer-7u37s9 {
    padding-top: 116px !important;
    padding-bottom: 88px !important;
    justify-content: center !important;
    /*
     * Framer applies a scroll effect here - scale(.95) with a -290px shift -
     * which is still applied at the top of the page and pulled the two-column
     * content above the fold. The stacked original absorbed it in its 200px of
     * internal padding; side by side there is nothing to absorb it, so the
     * effect is dropped in favour of a predictable hero.
     */
    transform: none !important;
    will-change: auto !important;
  }

  .josefine-home .framer-f7epti {
    order: 1;
    width: 100% !important;
    max-width: none !important;
  }

  .josefine-home .framer-1yg5ym6 {
    width: 100% !important;
    max-width: none !important;
  }

  .josefine-home .framer-2h2dxq {
    order: 2;
    width: 100% !important;
    max-width: none !important;
  }

  /* The call to action sat hard against the last line of the paragraph. */
  .josefine-home .framer-fmjzw2-container {
    margin-top: 22px !important;
  }
}

/* --------------------------------------------------------------------------
   The floating sign-up pill is fixed to the viewport and sat on top of the
   "Découvrir Josefine" card on phones. The hero now carries a single, clear
   call to action, so the floating duplicate goes.
   -------------------------------------------------------------------------- */
.framer-b0ygjh-container {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Hero call to action: filled rather than outlined. It is the primary action
   on the page and the outline treatment read as secondary.
   -------------------------------------------------------------------------- */
.josefine-home [data-josefine-cta] {
  background: var(--token-be41a43e-693e-4fc8-90af-da5ac66c53f3, #7b7df5) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 30px rgba(123, 125, 245, 0.35) !important;
}

.josefine-home [data-josefine-cta] * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.josefine-home [data-josefine-cta]:hover {
  filter: brightness(1.08);
}

/* Reassurance line under the hero call to action. */
.josefine-reassure {
  margin: 14px 0 0;
  font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}