/* ==========================================================================
   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);
}

/* --------------------------------------------------------------------------
   Trimming the hero for the two-column layout left it shorter than the
   viewport on tall windows, so the pale section below showed through during
   the entry animation. Keep it at full height.
   -------------------------------------------------------------------------- */
.josefine-home .framer-ykgwn3 {
  min-height: 100vh;
  min-height: 100svh;
}

/* --------------------------------------------------------------------------
   The new hero thumbnail carries its own headline and logo, so Framer's
   "Découvrir Josefine" caption now sat on top of the artwork's own text and
   made both unreadable. Hide the caption; the play control stays.
   -------------------------------------------------------------------------- */
.josefine-home .framer-13tszph {
  display: none !important;
}

/*
 * With the wording gone, keep the play control clear of the artwork's own
 * headline: centred horizontally, low in the frame over the empty area.
 */
.josefine-home .framer-buipz {
  justify-content: center !important;
  transform: translateY(78%);
}

@media (max-width: 810px) {
  .josefine-home .framer-buipz {
    transform: translateY(60%);
  }
}

/* --------------------------------------------------------------------------
   Hero video window (« Découvrir Josefine »). Framer pins the YouTube frame
   300px from each side of the screen: on a phone nothing is left (0 × 0, the
   play button only darkens the page) and on a small laptop it is tiny.
   Keep it 16px from the edges, at most 960px wide, and as tall as its width
   allows within the screen.
   -------------------------------------------------------------------------- */
.framer-VqRLI.framer-xa5tqr {
  left: max(16px, calc((100vw - 960px) / 2)) !important;
  right: max(16px, calc((100vw - 960px) / 2)) !important;
  height: auto !important;
  max-height: calc(100vh - 32px);
}

/* --------------------------------------------------------------------------
   The « josefine® » opening screen: a full-screen layer Framer shows over a
   black page for about a second on every page load. Kept on the home page,
   removed everywhere else (owner's decision 2026-10-01). Its container class
   differs per page, so it is matched by its own inline style.
   -------------------------------------------------------------------------- */
body:not(.josefine-home) [class*="-container"] > div[style*="position: fixed"][style*="z-index: 9999"][style*="100vh"],
body:not(.josefine-home) [class*="-container"] > div[style*="position:fixed"][style*="z-index:9999"][style*="100vh"] {
  display: none !important;
}

/* The image cards under the hero (« Pilotage automatique », « Validation de
   dossier par IA »…) repeated « Les fonctionnalités de Josefine »: removed
   from the home page (owner's decision 2026-10-01). */
.josefine-home .framer-1tt6srh {
  display: none !important;
}

/* The violet brand screen (« Josefine analyse votre rentabilité en temps
   réel… ») before the closing call to action: removed from the home page
   (owner's decision 2026-10-01). */
.josefine-home .framer-19j2lei {
  display: none !important;
}

/* The violet brand screen (« Josefine — État des lieux numérique »…) that
   opened every feature page: removed (owner's decision 2026-10-02). */
body:not(.josefine-home) section[id^="hero"] > [data-framer-name="First screen"] {
  display: none !important;
}

/* The content used to slide up over that screen on scroll; without it, the
   slide only pushed the page under the navigation bar. */
body:not(.josefine-home) section[id^="hero"] > [data-framer-name="Clients"] {
  transform: none !important;
}

/* Contact page: the sentence under « Contact » (josefine.js). */
.josefine-contact-intro {
  max-width: 440px;
  margin: 16px 0 0;
  font-family: "Figtree", "Figtree Placeholder", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #ffffffb3;
}

/* On a phone the home page scrolls plainly (owner, 2026-10-02): the blocks
   that slid up and faded in while scrolling are simply there. */
@media (max-width: 809.98px) {
  .josefine-home :is(
      .framer-18b9974-container,
      .framer-3qfh9d-container,
      .framer-1xaw9zx-container,
      .framer-tWI4q,
      .framer-ea8u7g,
      .framer-15odl8f,
      .framer-ajwwiu,
      .framer-1knk7su,
      .framer-1fqakp5,
      .framer-ije8n0-container
    ) {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Framer laid these two cards 16px wider than their box, which cut their
     left and right edges. */
  .josefine-home :is(.framer-ea8u7g, .framer-15odl8f) {
    width: 100% !important;
  }
}

/* Framer's « Footer Reveal » wrapper turns clicks off for everything inside
   it: on the feature pages the closing buttons and the footer links did
   nothing. The links take clicks again. */
[data-framer-name^="Footer Reveal Section"] a {
  pointer-events: auto !important;
}

/* The sign-up buttons between the home sections (josefine.js, 2026-10-03):
   the hero's violet pill, its reassurance under it, on the black ground. */
.josefine-cta-row {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 56px 20px 72px;
  background: #000;
  font-family: "Figtree", "Figtree Placeholder", sans-serif;
  text-align: center;
}

.josefine-cta-row__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid #ffffff33;
  border-radius: 999px;
  background: #6e77f4;
  box-shadow: 0 8px 28px #6e77f459;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.josefine-cta-row__btn:hover {
  background-color: #5f68f0;
}

.josefine-cta-row__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.josefine-cta-row__note {
  margin: 12px 0 0;
  font-size: 14px;
  color: #ffffffa6;
}