/* ===========================================================================
   Maison Les Pins · responsive
   Every small-screen decision in one place, read top to bottom:
   shared floor > tablets > phones > portrait tablets > landscape phones >
   4:3 screens > very large screens. Loaded after site.css.
   ========================================================================= */

/* --- shared floor: no label under 12px, comfortable targets ------------- */
.kicker, .pill, .fcard__from, .fcard__plus-t, .foot__h, .member__role, .prune__sig, .sizer__label, .map__src { font-size: 13px; }
.hero .kicker { text-wrap: balance; }
.coords a, .foot li a, .foot__more, .foot__base a { min-height: 44px; display: inline-flex; align-items: center; }
.consent input { width: 24px; height: 24px; }
.consent label { cursor: pointer; }

.contact__quick { display: none; }

/* --- tablets and below --------------------------------------------------- */
@media (max-width: 1100px) {
  .sizer__opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sizer__opt--plus { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: .6rem; min-height: 52px; }
}

/* services as a two-column set of tiles between phone and desktop */
@media (max-width: 900px) and (min-width: 561px) {
  .svc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
  .svc__item { padding: 0; border-top: 0; }
  .svc__m { aspect-ratio: 4 / 3; margin-bottom: 1.1rem; }
  .svc__item .h3 { font-size: 1.45rem; }
  .svc__item p { font-size: 1rem; margin-top: .45rem; }
}

/* --- phones -------------------------------------------------------------- */
@media (max-width: 760px) {
  .sizer__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* services: a compact list, thumbnail beside the words */
  .svc__head { margin-bottom: 1.5rem; }
  .svc__item { display: grid; grid-template-columns: 5.5rem 1fr; column-gap: 1rem; align-items: start; padding: 1.25rem 0; }
  .svc__m { grid-row: span 2; margin: 0; aspect-ratio: 1; border-radius: 10px; }
  .svc__item .h3 { font-size: 1.25rem; line-height: 1.2; }
  .svc__item p { font-size: .95rem; margin-top: .3rem; }

  /* the map: labels big enough to read once the drawing is phone-sized */
  .map__town text { font-size: 24px; }
  .map__town--main text { font-size: 28px; }
  .map__sea-label, .map__note { font-size: 21px; }
  .map__ocean { display: none; }

  /* placeholders and portraits: wide rather than tall */
  .prune__img, .member__img, .member--big .member__img { aspect-ratio: 4 / 3; max-width: none; }
  .team__rest { gap: 2.5rem; }

  /* contact: a one-tap call before the long form */
  .contact__quick { display: flex; gap: .6rem; align-items: center; margin-top: -1.5rem; margin-bottom: 2rem; color: var(--encre-doux); }
  .contact__quick a { color: var(--pin); font-weight: 600; text-underline-offset: .3em; display: inline-block; padding: .6rem 0; }

  /* footer: two columns instead of one long list */
  .foot__in { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .foot__brand, .foot__col:last-child { grid-column: 1 / -1; }
  .foot__base { flex-direction: column; gap: .25rem; }
  .foot__base p:last-child a:first-child { margin-left: 0; }

  .faq__item summary { gap: 1rem; }
  .faq__a { padding-right: 0; }
  .call .h2 { font-size: clamp(2rem, 1.3rem + 3.6vw, 2.6rem); }
}

/* --- the peak on portrait phones: everything fits one screen ------------- */
@media (max-width: 860px) and (orientation: portrait) {
  .gestes [data-sc-stage] { gap: min(1.25rem, 2.2vh); padding: calc(var(--bar-h) + 1.25vh) var(--sc-gutter) 5.5rem; align-content: center; }
  .cone { width: min(38vw, 16vh); }
  .gestes__txt .kicker { margin-bottom: min(1rem, 1.6vh); }
  /* under 18px the light weight thins out on the dark ground: regular instead */
  .gestes__list { gap: min(.7rem, 1.2vh); font-size: clamp(1rem, .55rem + 1.25vh, 1.3rem); font-weight: 400; }
  .gestes__list li { grid-template-columns: 1.9rem 1fr; }
  .gestes__tick { width: 1.3rem; height: 1.3rem; }
  .gestes__final { margin-top: min(1.25rem, 2vh); padding-top: min(1.1rem, 1.8vh); }
  .gestes__line { font-size: clamp(1.4rem, .8rem + 2.2vh, 2rem); margin-bottom: .35rem; }
}

/* --- portrait tablets: the phone composition, with room to breathe ------- */
@media (orientation: portrait) and (min-width: 701px) and (max-width: 1100px) {
  .hero__veil { background: linear-gradient(180deg, rgba(251, 248, 242, .95) 0%, rgba(251, 248, 242, .82) 40%, rgba(251, 248, 242, .2) 62%, rgba(251, 248, 242, 0) 74%); }
  .hero__bg img { object-position: 50% 50%; transform-origin: var(--hero-focus-m, 50% 50%); }
  .hero__copy { width: auto; max-width: 40rem; top: calc(var(--bar-h) + 6vh); bottom: auto; right: var(--sc-gutter); }
  .hero__beat { top: calc(var(--bar-h) + 10vh); }
  .h1--hero { font-size: clamp(2.6rem, 1.2rem + 4.2vw, 3.6rem); }
  .gestes [data-sc-stage] { padding-bottom: 6rem; }
  .cone { width: min(34vw, 22vh); }
}

/* --- landscape phones: little height, so trim every vertical cost -------- */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --bar-h: 56px; }
  .float-cta { display: none; }
  .bar__in { gap: .5rem; }
  .hero__veil { background: linear-gradient(90deg, rgba(251, 248, 242, .95) 0%, rgba(251, 248, 242, .8) 42%, rgba(251, 248, 242, .15) 64%, rgba(251, 248, 242, 0) 72%); }
  .hero__copy { top: calc(var(--bar-h) + 1rem); bottom: auto; right: auto; width: min(30rem, 58vw); }
  .hero .kicker { display: none; }
  .h1--hero { font-size: min(2.3rem, 10vh); }
  .hero__sub { display: none; }
  .hero__btns { margin-top: 1rem; }
  .hero__btns .btn { flex: 0 0 auto; min-height: 44px; }
  .hero__beat { top: calc(var(--bar-h) + 4vh); right: auto; font-size: min(2.6rem, 11vh); }
  .hero__mist { height: 14vh; }

  /* the peak keeps its two columns and scales with the height */
  .gestes [data-sc-stage] { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); grid-template-rows: none; gap: 2rem; padding: calc(var(--bar-h) + 2vh) var(--sc-gutter) 2vh; align-content: center; }
  .cone { width: min(26vw, 58vh); }
  .gestes__txt .kicker { display: none; }
  .gestes__list { gap: 1.2vh; font-size: min(1.15rem, 4.4vh); font-weight: 400; }
  .gestes__list li { grid-template-columns: 1.7rem 1fr; }
  .gestes__tick { width: 1.2rem; height: 1.2rem; }
  .gestes__final { margin-top: 2.5vh; padding-top: 2vh; }
  .gestes__line { font-size: min(1.6rem, 6.4vh); margin-bottom: .2rem; }

  .phead { padding-top: calc(var(--bar-h) + 2rem); }
  .thanks { min-height: 0; }
}

/* --- 4:3 and squarer landscape screens (iPad landscape, small laptops) --- */
@media (min-width: 701px) and (max-aspect-ratio: 3/2) and (orientation: landscape) and (min-height: 501px) {
  .hero__bg img { object-position: 90% 50%; }
  .hero__veil { background: linear-gradient(90deg, rgba(251, 248, 242, .94) 0%, rgba(251, 248, 242, .8) 40%, rgba(251, 248, 242, .25) 60%, rgba(251, 248, 242, 0) 70%); }
  .hero__copy { width: min(36rem, 52vw); }
  .h1--hero { font-size: clamp(2.4rem, 1rem + 3.4vw, 3.6rem); }
}

/* --- very large screens: keep the reading width ------------------------- */
@media (min-width: 1600px) {
  .hero__copy { width: min(44rem, 46vw); }
}

.hero .kicker { font-size: 13px; letter-spacing: .16em; }
.bar__nav a { padding-inline: .35rem; margin-inline: -.35rem; }

/* landscape phones are wide enough for two columns: images beside the words */
@media (max-height: 500px) and (orientation: landscape) and (min-width: 600px) {
  .main-sec__grid, .prune__grid, .zone-sec__grid, .report__grid, .phead--split, .member--big { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .main-sec__img { order: 0; aspect-ratio: 4 / 5; max-height: 80vh; }
  .prune__img, .member__img { aspect-ratio: 4 / 3; max-height: 80vh; }
  .phead__img { max-height: 80vh; }
  .foot__h { letter-spacing: .16em; }
}
@media (max-width: 560px) { .foot__h { letter-spacing: .16em; } }

/* 16:10 laptops (1280x800, 1440x900): push the bed a little further right */
@media (min-width: 701px) and (max-aspect-ratio: 16/10) and (min-aspect-ratio: 3/2) and (orientation: landscape) {
  .hero__bg img { object-position: 84% 50%; }
  .hero__copy { width: min(40rem, 52vw); }
}