/* Public site: one mobile rhythm, loaded after page-specific styles.
   !important is limited to legacy inline presentation and earlier forced sizes. */
@media (max-width: 800px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
  body { font-size: 16px; line-height: 1.65; }
  .wrap { width: 100%; padding-inline: clamp(20px, 5vw, 32px); }
  main :is(h1,h2,h3,h4,p,li), .foot, .drawer { overflow-wrap: break-word; }
  main :is(h1,h2,h3) { text-wrap: balance; }
  main :is(p,li) { text-wrap: pretty; }
  main > section:not(.hero):not(.page-head):not(.pdp-info):not(.account-layout) { padding-block: 44px !important; }
  main :is(.hero > .wrap,.intro,.cards,.eng-grid,.visit,.presta-modern-grid,.process-grid,.tarifs-grid,.alacarte,.posts,.diag,.pdp) > * { min-width: 0; }
  .hero > .wrap, .intro, main .cards, main .eng-grid, main .visit,
  .presta-modern-grid, .process-grid, .tarifs-grid, .alacarte, .diag, .pdp {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .presta-modern-grid, .process-grid, .cards, .tarifs-grid, .alacarte { gap: 20px !important; }
  main .btn { min-height: 48px; max-width: 100%; justify-content: center; padding: 12px 20px; font-size: 15px !important; line-height: 1.4; text-align: center; white-space: normal; }
  main :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { font-size: 16px; max-width: 100%; }
  main :is(input,select,textarea,button,a) { touch-action: manipulation; }
  main section[id] { scroll-margin-top: 88px; }

  /* A compact header with a legible logo and two comfortable actions. */
  header.site .nav { height: 72px; min-height: 72px; gap: 12px; padding-inline: 20px; }
  .nav .brand { margin: 0; flex: 1 1 auto; min-width: 0; }
  .nav .brand img { width: min(100%, 176px); height: auto; max-height: 46px; }
  .nav-right { gap: 8px; }
  .nav .icon-btn { width: 44px; height: 44px; flex-shrink: 0; }
  .nav-right > .btn-primary { min-height: 44px; padding: 10px 15px !important; font-size: 14px; line-height: 1.2; }
  .drawer { width: min(360px, 90vw); max-width: 90vw; padding: 20px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .drawer-head { padding-bottom: 18px; }
  .drawer-close { width: 44px; height: 44px; flex-shrink: 0; }
  .drawer-nav.small a { font-size: 16px; min-height: 48px; padding: 11px 12px; color: var(--ink); }
  .drawer-foot .btn { min-height: 48px; white-space: normal; text-align: center; }

  /* The opening reads as a short introduction, then a full-width photograph. */
  .hero > .wrap { gap: 28px; padding-top: 36px; padding-bottom: 32px; }
  .hero h1 { max-width: none; font-size: clamp(32px, 8.6vw, 46px); line-height: 1.1; letter-spacing: -.025em; }
  .hero .lead { max-width: 46ch; margin-top: 18px; font-size: 16px; line-height: 1.7; }
  .eyebrow { font-size: 11px !important; line-height: 1.6; letter-spacing: .13em; }
  .hero .eyebrow { margin: 0 0 12px; }
  .hero-cta { margin-top: 24px; gap: 10px; }
  .hero-cta .btn { flex: 1 1 220px; }
  .hero-photo { max-width: none; aspect-ratio: 4/3; border-radius: 16px; box-shadow: var(--shadow); }
  .hero-photo .badge { max-width: calc(100% - 24px); left: 12px; bottom: 12px; padding: 10px 12px; font-size: 12px; border-radius: 10px; }
  .hero-tags .wrap { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 16px; padding-block: 18px; }
  .hero-tags span { min-width: 0; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.5; }
  .hero-tags span svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }
  .hero-tags span:last-child { grid-column: 1/-1; }

  /* Page titles and section headings share a readable scale. */
  .page-head { padding: 30px 0 32px !important; text-align: left !important; }
  .page-head > .wrap { align-items: flex-start !important; }
  .page-head > .wrap > h1 { max-width: 24ch !important; width: 100%; margin: 0 !important; font-size: clamp(29px, 7.3vw, 38px) !important; line-height: 1.18; letter-spacing: -.02em; text-align: left !important; overflow-wrap: normal; }
  .page-head > .wrap > p { max-width: 55ch !important; margin: 14px 0 0 !important; font-size: 16px !important; line-height: 1.65 !important; color: var(--page-head-muted) !important; text-align: left !important; overflow-wrap: break-word; }
  .page-head .crumb { justify-content: flex-start !important; margin-bottom: 16px !important; font-size: 12px; line-height: 1.6; }
  main .crumb, main .crumb a, main .crumb .crumb-sep { color: var(--muted); }
  main .crumb .crumb-active, main .crumb a:hover { color: var(--ink); }
  .sec-head { margin-bottom: 24px !important; }
  .sec-head h2, .intro h2, .diag h2, .visit h2 { font-size: clamp(26px, 6.7vw, 34px) !important; line-height: 1.2; letter-spacing: -.015em; }
  .sec-head p:not(.eyebrow), .intro p:not(.eyebrow) { font-size: 16px !important; line-height: 1.7; }
  .sec-head .eyebrow { margin-bottom: 8px !important; }
  .head-row { align-items: flex-start; flex-direction: column; gap: 18px; }
  .head-row > .btn { align-self: stretch; }
  .intro { gap: 26px; }
  .intro-media { aspect-ratio: 4/4.3; max-height: 460px; border-radius: 16px; }
  .intro-media .sig { font-size: 25px; }
  .intro-media .sig small { font-size: 11px; letter-spacing: .08em; }
  .stat-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 24px; padding-block: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .stat b { font-size: 28px; margin-bottom: 8px; }
  .stat span { display: block; font-size: 12px; line-height: 1.5; }
  .intro .btn { width: 100%; margin-top: 20px; }

  /* Cards: one column and no stacked desktop padding. */
  .pcard, .presta-modern-card, .gallery-card, .tcard, .post { border-radius: 14px !important; }
  .pcard { padding: 0; }
  .pcard .body { padding: 22px !important; }
  .pcard h3, .presta-modern-card h3, .gallery-card h3 { font-size: 22px !important; line-height: 1.3; text-transform: none !important; letter-spacing: 0 !important; }
  .pcard p, .presta-modern-card p, .gallery-card p, .eng p, .process-card p { font-size: 16px !important; line-height: 1.65 !important; }
  .pcard .from { display: flex; flex-wrap: wrap; gap: 4px 8px; line-height: 1.5; }
  .pcard .from span { font-size: 13px; }
  .presta-modern-card { text-align: left !important; }
  .presta-modern-card > div:last-child { padding: 22px !important; align-items: stretch !important; }
  .presta-modern-card .btn { width: 100%; margin-top: auto; }
  .presta-modern-card > div:first-child { max-height: 280px; }
  .presta-modern-card .pm-ph { aspect-ratio: 16/10; }
  .presta-sec > .wrap > .rv:not(.presta-modern-grid):not(.sec-head) { padding: 22px !important; text-align: left !important; }
  .presta-sec > .wrap > .rv > p:not(.eyebrow) { font-size: 16px !important; line-height: 1.7 !important; }
  .process-card { padding: 22px; }
  .process-card h4 { margin-block: 0 8px; font-size: 18px; }
  .eng { padding: 16px 20px; }
  .eng h3 { font-size: 21px; line-height: 1.3; }
  .salon-gallery-grid { grid-template-columns: minmax(0,1fr) !important; gap: 20px !important; }
  .cards > .pcard > div:last-child:not(.body) { padding: 20px 22px !important; }
  .cards > .pcard li { font-size: 15px !important; line-height: 1.65; }

  .diag, .cta-card, .banner-cta { padding: 24px !important; border-radius: 16px; gap: 22px; }
  .banner-cta { flex-direction: column; align-items: stretch; }
  .banner-cta h3, .cta-card h3 { font-size: 26px; line-height: 1.25; }
  .banner-cta p, .cta-card p, .diag p { font-size: 16px; line-height: 1.7; }
  .banner-cta > .btn, .banner-cta > div:last-child > .btn { width: 100%; }
  .banner-cta > .btn { align-self: stretch !important; }
  .banner-cta[style*="background:"] { background: linear-gradient(135deg,rgba(159,182,140,.30),rgba(159,182,140,.16)) !important; }
  .quiz { padding: 20px; }
  .chips { gap: 8px; }
  .chip { min-height: 44px; padding: 9px 14px; font-size: 14px; }

  /* Prices keep their own line when service names are long. */
  .tcard-head { padding: 18px 20px; font-size: 20px; line-height: 1.3; }
  .tcard-body { padding: 0 20px 8px; }
  .trow { gap: 14px; align-items: flex-start; padding-block: 18px; }
  .trow > :first-child { min-width: 0; }
  .trow .nm { font-size: 16px; line-height: 1.5; }
  .trow .desc { margin-top: 6px; font-size: 14px; line-height: 1.6; }
  .trow .amt { font-size: 18px; flex-shrink: 0; white-space: nowrap; }
  .trow .amt small { font-size: 12px; line-height: 1.5; }
  .offres-band { padding: 24px !important; border-radius: 16px; }
  .offres-list { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .offre p, .tarifs-note { font-size: 15px; line-height: 1.65; }

  /* Catalogue, articles and contact. */
  .catalogue .shop-grid, .posts { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .catalogue-filters { grid-template-columns: minmax(0,1fr); padding: 20px; gap: 18px; border-radius: 14px; }
  .catalogue-filters .actions { grid-column: auto; }
  .catalogue-filters .actions .btn { flex: 1 1 auto; }
  .catalogue .prod { display: flex; flex-direction: column; }
  .catalogue .pc-ph { width: 100%; max-height: 280px; }
  .catalogue-product { padding: 22px; gap: 14px; }
  .catalogue-product h2 { font-size: 23px; line-height: 1.3; overflow-wrap: break-word; }
  .catalogue-product .btn { width: 100%; }
  .product-page .pdp { gap: 24px; margin-top: 24px; padding: 0; }
  .product-page .pdp-info { padding: 0; gap: 18px; }
  .product-page h1 { font-size: 30px; line-height: 1.2; }
  .post { flex-direction: column; grid-template-columns: 1fr; }
  .post .body { padding: 22px; }
  .post h3 { font-size: 23px; line-height: 1.3; }
  .post .ph { width: 100%; min-width: 0; min-height: 180px; height: 200px; flex: none; }
  .post .ph img { width: 100%; height: 100%; object-fit: cover; }
  .journal-article { padding-top: 28px; padding-bottom: 44px; }
  .journal-article p, .journal-article li, .legal p, .legal li { font-size: 16px; line-height: 1.75; }
  .journal-article h2, .legal h2 { font-size: 25px; line-height: 1.3; }
  .visit .info { padding: 24px !important; }
  .visit .media { min-height: 240px; }
  .visit .row b { font-size: 16px; }
  .visit .row span { font-size: 15px; line-height: 1.65; }
  .visit .btn { width: 100%; }

  /* Dialogs stay within the screen, with room for the close control. */
  .presta-modal-backdrop { padding: 12px; }
  .presta-modal { padding: 56px 22px 24px; max-height: calc(100dvh - 24px); border-radius: 16px; }
  .presta-modal-close { top: 10px; right: 10px; width: 44px; height: 44px; }
  .presta-modal h2 { font-size: 27px !important; line-height: 1.2; }
  .presta-modal p, .presta-modal li { font-size: 16px !important; line-height: 1.65; }
  .swatch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .swatch-card { min-width: 0; }
  .swatch-card img { height: clamp(100px,30vw,180px); aspect-ratio: auto; object-fit: cover; }
  .swatch-card span { padding: 10px 8px; font-size: 13px; line-height: 1.4; }

  /* Footer groups are easy to scan without narrow text columns. */
  body > footer { padding-block: 40px 24px; }
  .foot { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 20px; }
  .foot > :first-child, .foot > :nth-child(2), .foot > :last-child { grid-column: 1/-1; }
  .foot-logo img { height: 74px; }
  .foot p.tag { max-width: 40ch; font-size: 15px; line-height: 1.7; }
  .foot h4 { font-size: 12px; line-height: 1.6; letter-spacing: .09em; margin: 0 0 14px; }
  .foot a { display: inline-block; font-size: 15px; line-height: 1.5; padding-block: 6px; }
  .foot ul { gap: 4px; }
  .hours li { padding-block: 10px; font-size: 15px; }
  .foot-bottom { margin-top: 28px; gap: 20px; flex-direction: column; align-items: flex-start; font-size: 13px; line-height: 1.7; }
  .foot-bottom .socials a { width: 44px; height: 44px; }

  /* Booking uses the same comfortable reading sizes throughout its steps. */
  .reservation-page .nav .brand img { width: min(100%,160px); height: auto; }
  .booking-account-link { font-size: 13px; min-height: 44px; gap: 7px; }
  .rb-shell { padding: 24px 20px 0; }
  .rb-heading h1 { font-size: clamp(30px,7.5vw,38px); line-height: 1.2; }
  .rb-heading p, .rb-panel-heading p { font-size: 15px; line-height: 1.65; }
  .rb-eyebrow, .rb-step-label { font-size: 11px; line-height: 1.5; letter-spacing: .12em; }
  .rb-back-site { min-height: 36px; font-size: 14px; margin-bottom: 16px; }
  .rb-progress { gap: 12px; justify-content: space-between; }
  .rb-progress button { min-height: 52px; font-size: 13px; line-height: 1.4; gap: 6px; }
  .rb-progress button span { width: 24px; height: 24px; flex-shrink: 0; font-size: 12px; }
  .rb-panel { padding: 22px 20px; border-radius: 14px; }
  .rb-panel-heading h2 { font-size: 27px; line-height: 1.25; }
  .rb-beneficiary { font-size: 14px; gap: 12px; }
  .rb-beneficiary a { font-size: 13px; margin-left: 0; }
  .rb-person-picker { min-width: 0; width: 100%; }
  .rb-person-picker > button, .rb-person-option { min-height: 46px; font-size: 15px; white-space: normal; }
  .rb-person-options { width: 100%; }
  .rb-search input, #rb-message { font-size: 16px; }
  .rb-categories button { min-height: 44px; font-size: 13px; padding: 10px 14px; }
  #rb-catalog { max-height: none; overflow-y: visible; overscroll-behavior: auto; padding-right: 0; }
  #rb-catalog .rb-category-title { position: static; font-size: 14px !important; line-height: 1.5; }
  .rb-service-row { grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding-block: 22px; }
  .rb-service-row h3 { font-size: 16px; line-height: 1.5; }
  .rb-service-row p, .rb-details { font-size: 14px; line-height: 1.65; }
  .rb-service-row .rb-duration, .rb-details summary { font-size: 13px; }
  .rb-service-row > strong { align-self: start; padding-top: 2px; font-size: 15px; }
  .rb-service-row .rb-choose { grid-column: 1/-1; justify-self: stretch; justify-content: space-between; min-height: 46px; font-size: 14px !important; padding: 11px 14px; }
  .rb-primary { min-height: 50px; font-size: 15px; }
  .rb-text-button { min-height: 44px; font-size: 14px !important; }
  .rb-calendar-toolbar { flex-wrap: wrap; align-items: flex-start; }
  .rb-calendar-toolbar h3 { width: 100%; font-size: 16px; line-height: 1.5; }
  .rb-calendar-toolbar > div { width: 100%; }
  .rb-date-picker { margin-right: auto; font-size: 13px; min-height: 44px; }
  .rb-arrow { width: 44px; height: 44px; }
  .rb-calendar { grid-template-columns: repeat(7,minmax(88px,1fr)); gap: 10px; }
  .rb-day-title span { font-size: 13px; }
  .rb-day-title strong { font-size: 14px; }
  .rb-time-list button { min-height: 46px; font-size: 14px; }
  .rb-day-empty small, .rb-day .rb-more-times { font-size: 12px; }
  .rb-calendar-hint, .rb-calendar-bottom, .rb-reassurance, .rb-footnote { font-size: 13px; line-height: 1.6; }
  .rb-calendar-bottom { flex-direction: column; align-items: flex-start; }
  .rb-staff button { min-width: 96px; font-size: 13px; padding: 14px 10px; }
  .rb-selected-service, .rb-review-item { flex-wrap: wrap; padding: 16px; }
  .rb-selected-service strong, .rb-review-item strong { font-size: 16px; }
  .rb-selected-service small, .rb-review-item p, .rb-review-item small, .rb-login-note p, .rb-consent, .rb-mobile-help { font-size: 14px; line-height: 1.65; }
  .rb-field-title, .rb-login-note h3 { font-size: 16px !important; }
  .rb-person-tabs button { min-height: 44px; font-size: 14px; }
  .rb-alert, .rb-empty, .rb-calendar-empty { font-size: 15px; }
  .reservation-page .account-layout { grid-template-columns: minmax(0,1fr); padding-inline: 20px; }
  .reservation-page .account-card, .reservation-page .account-aside { padding: 22px; }
  .reservation-page .account-card p, .reservation-page .account-aside p { font-size: 15px; }
  .reservation-page .account-card label, .reservation-page .account-card .account-check, .reservation-page .account-card a:not(.btn) { font-size: 14px; }
  .reservation-page .account-card small { font-size: 13px; }
  .reservation-page .account-card .btn { font-size: 15px; }
}

@media (max-width: 374px) {
  header.site .nav { padding-inline: 16px; gap: 8px; }
  .nav .brand img { max-width: 136px; }
  .nav-right { gap: 6px; }
  .nav-right > .btn-primary { padding-inline: 12px !important; font-size: 13px; }
  .hero h1 { font-size: 32px; }
  .hero-tags .wrap { column-gap: 10px; }
  .stat b { font-size: 25px; }
  .stat span { font-size: 11px; }
  .trow { flex-wrap: wrap; }
  .trow .amt { margin-left: auto; }
  .rb-shell { padding-inline: 16px; }
  .rb-panel { padding-inline: 16px; }
  .rb-progress { gap: 8px; }
  .rb-progress button { font-size: 12px; gap: 5px; }
  .rb-progress button span { width: 20px; height: 20px; font-size: 11px; }
  .booking-account-link { font-size: 12px; }
}