/* ============================================================
   medO — « Ofys, c’est maintenant medO alys » landing page
   (MDS Templates plugin)
   DS port of the legacy [medo_alys] page (Developped-pages,
   node 21-855 desktop / 30-954 mobile). Same two sections, same
   geometry; buttons, type and the container come from the DS.

   Loaded only on posts that contain the [mds_alys_redirect]
   shortcode. Typography always comes from the DS classes in the
   markup (.h1, .h3, .text-p2, .text-p3 + .fw-*) — this file
   carries layout and colour only.
   ============================================================ */

/* page-scoped border-box: the frames pair % widths with padding, and the DS
   does not set a global box-sizing */
[class^="alysr-"], [class*=" alysr-"] { box-sizing: border-box; }

/* 1420 content container, sized as a % of the 1920 design width and centred */
.alysr-in {
  width: 73.958%; /* 1420/1920 */
  max-width: var(--section-container);
  margin-inline: auto;
}

.alysr-page {
  /* the "Dites bonjour" band is the legacy page's own cyan (#b4e9f9) and its
     hairlines #d9dbe9 — neither is a DS token, so both are kept as documented
     deviations rather than snapped to the nearest secondary-2 step */
  --alysr-hello-bg: #b4e9f9;
  --alysr-line: #d9dbe9;
  color: var(--neutrals-950);
  overflow-x: clip; /* pill hover lobes bloom past the container edge */
}
.alysr-accent { color: var(--site-accent); }

/* ============================================================
   1. Hero — centred copy over the illustration (1920×936), the
   section's cover background. The section keeps the art's own
   ratio, so at 1920 the art is 1:1 and the copy sits on its light
   top; narrower viewports crop the sides, taller copy grows it.
   ============================================================ */
.alysr-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  background-color: var(--neutrals-400);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}
/* the art's ratio as a minimum height: a zero-width float whose % padding
   resolves against the section width (aspect-ratio + overflow:hidden would
   clip copy that outgrows the ratio on mobile) */
.alysr-hero::before {
  content: "";
  float: left;
  width: 0;
  padding-bottom: calc(936 / 1920 * 100%);
}
.alysr-hero::after {
  content: "";
  display: block;
  clear: both;
}
.alysr-hero-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--spacing-step-12); /* 80px */
}
.alysr-hero-title { margin: 0; }
.alysr-hero-subtitle { margin: var(--spacing-step-6) 0 0; } /* 16px */
.alysr-hero-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-step-10); /* 48px */
  /* the pill's hover lobe blooms 32px past its right edge */
  padding-right: 34px;
}

/* ── "Déjà un client Ofys ?" dropdown ── */
.alysr-dd {
  position: relative;
  display: inline-block;
  margin-bottom: var(--spacing-step-5); /* 12px */
}
.alysr-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 4px;
  list-style: none; /* no disclosure triangle */
  color: var(--site-accent);
  cursor: pointer;
}
.alysr-dd-btn::-webkit-details-marker { display: none; }
.alysr-dd-btn:focus-visible {
  outline: 2px dashed var(--neutrals-900);
  outline-offset: 2px;
}
.alysr-dd-caret {
  width: 10px;
  height: 6px;
  flex-shrink: 0;
  transition: transform 0.18s;
}
.alysr-dd[open] .alysr-dd-caret { transform: rotate(180deg); }
.alysr-dd-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 250px;
  padding: 10px 6px;
  text-align: left;
  background: var(--neutrals-100-white);
  border: 1px solid var(--alysr-line);
  border-radius: var(--radius-step-16); /* 18px */
  box-shadow: 0 24px 48px -28px rgba(16, 42, 90, 0.5);
}
.alysr-dd-menu a {
  display: block;
  padding: 8px 18px;
  border-radius: var(--radius-step-11); /* 10px */
  color: var(--site-accent);
  text-decoration: none;
  white-space: nowrap;
}
.alysr-dd-menu a:hover,
.alysr-dd-menu a:focus-visible { background: var(--colors-primary-100); }

/* ============================================================
   2. « Dites bonjour à medO alys » — photo left, copy right,
   inside a 1330 frame with hairline sides on the cyan band
   ============================================================ */
.alysr-hello {
  background: var(--alysr-hello-bg);
  border-bottom: 1px solid var(--alysr-line);
}
.alysr-hello-frame {
  display: flex;
  align-items: center;
  max-width: 1330px;
  min-height: 647px;
  margin: 0 auto;
  border-left: 1px solid var(--alysr-line);
  border-right: 1px solid var(--alysr-line);
}
.alysr-hello-visual {
  flex-shrink: 0;
  align-self: flex-end;
  width: 46%;
  max-width: 649px;
}
.alysr-hello-visual img { display: block; width: 100%; height: auto; }
.alysr-hello-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-step-11) var(--spacing-step-10); /* 64 / 48 */
}
.alysr-hello-title { margin: 0 0 var(--spacing-step-8); } /* 32px */
.alysr-hello-body p { margin: 0; }
/* the paragraphs sit one line apart, tracking the P2 line-height */
.alysr-hello-body p + p { margin-top: var(--typography-line-height-p2); }
.alysr-hello-actions {
  display: flex;
  margin-top: var(--spacing-step-8); /* 32px */
  padding-right: 34px; /* hover lobe room, see hero */
}
/* the outlined pill sits on cyan here — give its label a solid surface so
   the gradient hairline reads */
.alysr-hello .btn-secondary { background: var(--neutrals-100-white); }

/* ============================================================
   Mobile (414) — matches the chrome breakpoint
   ============================================================ */
@media (max-width: 1023px) {
  .alysr-in { width: 88.406%; } /* 366/414 */

  .alysr-hero-text { padding-top: var(--spacing-step-10); padding-bottom: var(--spacing-step-12); } /* 48px / 80px */

  .alysr-hello-frame {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    border: 0;
  }
  .alysr-hello-text {
    order: 1;
    width: 88.406%;
    margin-inline: auto;
    padding: var(--spacing-step-10) 0 var(--spacing-step-4); /* 48 / 8 */
  }
  .alysr-hello-visual {
    order: 2;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    align-self: auto;
  }
}