/* MonLaveur – styles version téléphone */
/* ---------- Version téléphone : même mise en page que le grand écran, en plus compact ---------- */
@media (max-width: 640px) {
  html body { font-size: 15px; }
  /* En-tête : logo + Réserver, puis les liens du menu sur une ligne qui défile */
  html body .top .bar { position: relative; height: auto !important; flex-wrap: wrap; padding-top: 10px; padding-bottom: 4px; row-gap: 4px; }
  html body .top .bar .logo { min-height: 42px; }
  html body .top .bar .right { order: 3; flex-basis: 100%; display: flex !important; gap: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  html body .top .bar .right::-webkit-scrollbar { display: none; }
  html body .top .bar .right .link { display: inline-flex !important; flex: none; font-size: 13px; padding: 6px 0; white-space: nowrap; }
  html body .top .bar .right .btn { position: absolute; top: 10px; right: 16px; padding: 9px 14px; font-size: 13px; }
  /* Haut de page : texte compact, formulaire juste dessous */
  html body .jhero.hc .in, html body .jhero.hc .in.hsplit { padding: 22px 16px 40px !important; gap: 22px !important; }
  html body #view h1 { font-size: 26px !important; line-height: 1.18 !important; }
  html body #view h2 { line-height: 1.2; }
  html body #view .htext h1 { font-size: 30px !important; line-height: 1.12 !important; margin-top: 12px !important; }
  html body .htext p { font-size: 15px !important; line-height: 1.55 !important; margin-top: 10px !important; }
  html body .htext .heroline { font-size: 12px; margin-top: 12px; }
  html body .pill-eb { height: 28px; padding: 0 12px; font-size: 10.5px; letter-spacing: 0.1em; }
  html body .scard { padding: 20px 16px 16px !important; border-radius: 20px; }
  html body .scard h2 { font-size: 22px !important; }
  html body .scard p { font-size: 13px; }
  html body .scard select, html body .scard input { font-size: 14px; }
  /* Sections : moins d'espace, titres plus petits */
  html body .band1, html body .band2 { padding: 40px 0 !important; }
  html body .shead { margin-bottom: 16px; }
  html body .shead h2, html body .mapsec h2 { font-size: 23px !important; line-height: 1.2; }
  html body .eb { font-size: 11px; }
  html body .lead { font-size: 14px; }
  html body .mapsec { gap: 18px; }
  html body .mapsec .btn { padding: 11px 16px; font-size: 14px; }
  html body .wcard { padding: 12px; }
  /* Étapes : 3 colonnes comme sur ordinateur */
  html body .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  html body .s3 { padding: 14px 8px !important; }
  html body .s3 .n { width: 30px; height: 30px; font-size: 14px; }
  html body .s3 h3 { font-size: 14px; margin: 8px 0 4px; }
  html body .s3 p { font-size: 11.5px; line-height: 1.4; }
  html body .btn.big { padding: 13px 20px; font-size: 15px; }
  /* Villes, avis : rangées qui défilent avec le doigt, comme la rangée de l'ordinateur */
  html body .cities, html body .reviews { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px !important; margin: 0 -16px; padding: 4px 16px 10px; scrollbar-width: none; }
  html body .cities::-webkit-scrollbar, html body .reviews::-webkit-scrollbar { display: none; }
  html body .cities > *, html body .reviews > * { flex: 0 0 auto; scroll-snap-align: start; }
  html body .cities > * { width: 150px; }
  html body .reviews > * { width: 240px; }
  html body .reviews .rscore { width: 170px; }
  html body .rscore b { font-size: 36px; }
  /* Prestations et garanties : grille 2 × 2 */
  html body .svcs, html body .guar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html body .svc2, html body .guar .g { padding: 14px 12px !important; }
  html body .svc2 b, html body .guar .g b { font-size: 14px; }
  html body .svc2 span, html body .guar .g span { font-size: 12px; line-height: 1.4; }
  html body .svc2 .pr { font-size: 11px; white-space: nowrap; }
  html body .svc2 .ico, html body .guar .g .ico { width: 34px; height: 34px; }
  /* FAQ */
  html body .ftabs button { font-size: 13px; padding: 8px 14px; }
  html body .fq summary { font-size: 14px !important; padding: 14px 16px !important; }
  html body .fq p { font-size: 13.5px; padding: 0 16px 14px !important; }
  /* Bas de page */
  html body .jfoot .in { padding: 64px 16px 44px !important; }
  html body .jfoot h2 { font-size: 26px !important; }
  html body .jfoot p { font-size: 14px; }
  html body .jfbtns { gap: 10px; }
  html body .jfbtns .btn { padding: 13px 16px; font-size: 14px; }
  html body .foot .in { font-size: 12px; gap: 6px; }
}
/* Accueil sur téléphone : moins de texte, le formulaire « Trouvez votre laveur » tout de suite visible */
@media (max-width: 640px) {
  html body .jhero .htext p, html body .jhero .htext .heroline, html body .jhero .htext .pill-eb { display: none !important; }
  html body #view .htext h1 { font-size: 25px !important; margin-top: 0 !important; }
  html body .jhero.hc .in, html body .jhero.hc .in.hsplit { padding-top: 16px !important; gap: 16px !important; }
  html body .scard > p { display: none; }
  html body .scard h2 { margin-bottom: 12px; }
}
/* Logo MonLaveur */
.top .logo { gap: 12px; }
.mlseal { width: 42px; height: 42px; border-radius: 50%; background: #FFFFFF; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 2px 8px rgba(11,42,74,.18); }
.mlring { width: 34px; height: 34px; border-radius: 50%; border: 1.2px solid #0B2A4A; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 16px; letter-spacing: -.12em; color: #0B2A4A; padding-right: .12em; }
.mlword { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 22px; letter-spacing: .18em; }
@media (max-width: 640px) { .mlword { font-size: 17px; letter-spacing: .12em; } .mlseal { width: 36px; height: 36px; } .mlring { width: 29px; height: 29px; font-size: 14px; } }
/* ===== Appli téléphone : onglets, recherche simple, laveurs proches, bouton collant ===== */
#mtabs, #mcta, .mpros, .mfaqbtn, .mquit { display: none; }
.jm-loading { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; color: #4E6478; background: #EAF3FB; }
@media (max-width: 640px) {
  html body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  html body .top .bar .right .link { display: none !important; }
  html body .top .bar .right { flex-basis: auto; margin: 0; padding: 0; overflow: visible; }
  html body .top .bar { padding-bottom: 10px; }
  #mtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(255,255,255,0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid #E1E8F0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  #mtabs button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font-size: 11px; font-weight: 700; color: #6B7A89; cursor: pointer; font-family: inherit; }
  #mtabs button[aria-current="page"] { color: var(--accent, #1F5D96); }
  #mtabs button[aria-current="page"] svg { stroke-width: 2.4; }
  #mcta { display: flex; position: fixed; left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 29; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 15px; font-family: inherit; font-size: 15px; font-weight: 800; color: #FFFFFF; background: var(--accent, #1F5D96); box-shadow: 0 10px 24px rgba(20,80,160,0.35); transform: translateY(140%); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; pointer-events: none; cursor: pointer; }
  #mcta.on { transform: none; opacity: 1; pointer-events: auto; }
  /* Recherche simplifiée : Où ? + Quand ? (le reste se choisit ensuite) */
  html body .scard > .fld:nth-child(5), html body .scard > .fld:nth-child(6) { display: none !important; }
  html body .scard > .fld:nth-child(4) { grid-template-columns: minmax(0, 1fr); }
  html body .scard > .fld:nth-child(4) > div:nth-child(2) { display: none; }
  html body .scard .fld label { font-size: 13px; }
  html body .scard .fld input, html body .scard .fld select { font-size: 16px; }
  /* Laveurs près de chez vous */
  .mpros { display: block; padding: 22px 0 6px; background: #FFFFFF; }
  .mph { display: flex; justify-content: space-between; align-items: baseline; padding: 0 16px 10px; } .mph b { font-size: 18px; color: var(--ink, #0B2540); }
  .mprow { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 14px; scrollbar-width: none; } .mprow::-webkit-scrollbar { display: none; }
  .mpro { flex: 0 0 150px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; border: 1px solid #E3EAF2; background: #FFFFFF; border-radius: 18px; padding: 14px; cursor: pointer; font-family: inherit; box-shadow: 0 4px 14px rgba(11,37,64,0.06); position: relative; }
  .mpro .av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; margin-bottom: 4px; }
  .mpro b { font-size: 14px; color: var(--ink, #0B2540); line-height: 1.2; } .mpro small { font-size: 12px; color: #6B7A89; }
  .mpro .mrow { display: flex; gap: 8px; font-size: 11.5px; font-weight: 700; color: #31445A; margin-top: 2px; }
  .mpro .tag { position: absolute; top: 10px; right: 10px; font-size: 9.5px; padding: 2px 6px; }
  /* Carte en aperçu */
  html body .mapsec .wcard .eb { display: none; }
  .mmap { position: relative; display: block; width: 100%; height: 170px; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; padding: 0; background: radial-gradient(circle at 30% 40%, #CFE6D2 0 18%, transparent 19%), radial-gradient(circle at 70% 60%, #DCEBD8 0 22%, transparent 23%), linear-gradient(160deg, #EAF3E6, #D9E9F6); }
  .mmap .mpins i { position: absolute; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent, #1F5D96); box-shadow: 0 0 0 3px #FFFFFF; }
  .mmap .mlbl { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; color: var(--ink, #0B2540); font-weight: 800; font-size: 14px; padding: 10px 16px; border-radius: 999px; box-shadow: 0 6px 16px rgba(11,37,64,0.15); white-space: nowrap; font-family: inherit; }
  /* FAQ raccourcie */
  html body .faq.mfaq .fq:nth-child(n+5) { display: none; }
  .mfaqbtn { display: block; margin: 14px auto 0; }
  /* Étapes de réservation en plein écran */
  html body.inflow { padding-bottom: 0; }
  html body.inflow .top, html body.inflow #foot, html body.inflow #mtabs, html body.inflow #mcta, html body.inflow .ai-fab { display: none !important; }
  html body.inflow .prog { position: sticky; top: 0; z-index: 12; }
  html body.inflow .prog .in { position: relative; padding-right: 46px; }
  .mquit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 1px solid #DCE5EF; background: #FFFFFF; display: grid; place-items: center; color: #31445A; cursor: pointer; }
  html body.inflow .actbar { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Compte client ---------- */
@media (min-width: 641px) { .top .link.acct { display: inline-flex; align-items: center; gap: 6px; } }
@media (max-width: 640px) { .top .link.acct { display: none !important; } }
.acq { max-width: 640px; }
.acform { display: flex; flex-direction: column; gap: 16px; }
.acform .req { color: var(--accent); }
.lbl2 { font-size: 14px; font-weight: 700; }
.accheck { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; }
.accheck input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.acerr { margin: 0; color: #C2410C; font-weight: 700; font-size: 14px; }
.acbtns { display: flex; gap: 10px; flex-wrap: wrap; }
.achead { display: flex; align-items: center; gap: 14px; }
.achead b { font-size: 19px; display: block; }
.achead small { color: var(--muted); font-size: 13px; }
.acav { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #FFF; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; flex: none; }
.acdl { margin: 0; display: grid; gap: 10px; }
.acdl div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.acdl dt { color: var(--muted); font-size: 14px; }
.acdl dd { margin: 0; font-weight: 700; font-size: 14px; text-align: right; overflow-wrap: anywhere; }
.acsw { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.acsw b { display: block; font-size: 15px; }
.acsw small { color: var(--muted); font-size: 13px; }
.acsw .sw { width: 48px; height: 28px; border-radius: 14px; border: 0; padding: 0; flex: none; position: relative; background: var(--line); cursor: pointer; }
.acsw .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFF; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.acsw .sw[aria-checked="true"] { background: var(--accent); }
.acsw .sw[aria-checked="true"]::after { left: 23px; }
.acdel { align-self: flex-start; color: #C2410C; background: none; border: 0; font-size: 14px; font-weight: 700; cursor: pointer; padding: 4px 0; text-decoration: underline; }
.acpush { text-align: left; max-width: 520px; margin: 4px auto 0; gap: 8px; }
.acpush .btn { align-self: flex-start; }
@media (max-width: 640px) { .acform .f2 { grid-template-columns: minmax(0, 1fr); } .acbtns .btn { flex: 1 1 auto; } }
.acres { display: flex; flex-direction: column; gap: 14px; }
.acresh { display: flex; align-items: center; gap: 10px; }
.acresh h2 { margin: 0; font-size: 22px; }
.tag2 { background: var(--accent); color: #FFF; font-weight: 800; font-size: 13px; border-radius: 999px; padding: 2px 10px; }
.acempty { align-items: flex-start; gap: 8px; }
.acgate { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); font-weight: 700; font-size: 15px; }
.acgate svg { flex: none; color: var(--accent); margin-top: 2px; }
.acswitch { margin: 0; font-size: 14px; color: var(--muted); }
.acswitch .linkbtn { font-weight: 700; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; text-decoration: underline; }
.acinfo { margin: 0; color: #15803D; font-weight: 700; font-size: 14px; }
.accap { min-height: 65px; }
/* paiement en ligne : statut des réservations du client */
.trip .st2.wait { background: #FFF6E5; color: #9A3412; }
.trip .st2.bad { background: #FDECEC; color: #B42318; }
.trip .st2.ex { background: var(--sky); color: var(--muted); }
.trip.acq2 { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,134,232,.10); }
.acpi { font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.acmodal { position: fixed; inset: 0; z-index: 9000; background: rgba(11,31,54,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.acmodal form { width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.acmodal fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.acmodal legend { margin-bottom: 6px; }
.acmot { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 15px; }
.acmot:has(input:checked) { border-color: var(--accent); background: #EEF5FD; }
.acmot input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.acmodal textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 16px; resize: vertical; box-sizing: border-box; }
.acmodal .acbtns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.acres .trip { grid-template-columns: auto minmax(0, 1fr); }
.acres .trip .acts2 { grid-column: 1 / -1; justify-content: flex-end; }
.trip.acq2 { box-shadow: 0 0 0 2px var(--accent), 0 8px 22px rgba(16,38,61,0.06); }
@media (max-width: 640px) { .acres .trip .acts2 { justify-content: flex-start; } }
/* ---------- Avis clients ---------- */
.acst { color: var(--star, #F2A516); letter-spacing: 1px; white-space: nowrap; }
.acst i { font-style: normal; color: #CBD5E1; }
.acavis { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, var(--card)); font-size: 14px; display: grid; gap: 6px; }
.acavis p { margin: 0; color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
.acavis0 { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: color-mix(in srgb, #F5A524 10%, var(--card)); border-color: color-mix(in srgb, #F5A524 40%, var(--line)); }
.acrep { border-left: 3px solid var(--accent); padding: 4px 10px; background: var(--card); border-radius: 0 8px 8px 0; }
.acrep b { font-size: 13px; }
.acstars .acstarsin { display: flex; gap: 6px; flex-direction: row-reverse; justify-content: flex-end; }
.acstars label { cursor: pointer; font-size: 34px; line-height: 1; color: #CBD5E1; transition: transform .1s; }
.acstars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.acstars label:hover, .acstars label:hover ~ label, .acstars label:has(input:checked), .acstars label:has(input:checked) ~ label { color: var(--star, #F2A516); }
.acstars label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.acstars label:active { transform: scale(.92); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.acnotetxt { min-height: 18px; font-weight: 700; color: color-mix(in srgb, #F5A524 70%, var(--ink)); }
.acmodal textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; resize: vertical; background: var(--card); color: var(--ink); }
/* avis sur la page du laveur */
.lvrevs { display: grid; gap: 12px; }
.lvrevh { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.lvrevh .big { font-size: 40px; font-weight: 800; line-height: 1; }
.lvrev { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 6px; text-align: left; }
.lvrev p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.lvrev small { color: var(--muted); }
.lvver { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 700; color: var(--ok, #0F7B4B); background: var(--okbg, #E8F7EF); border-radius: 99px; padding: 2px 8px; }
.lvrevinfo { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.acrep p { margin: 4px 0 0; }
@media (max-width: 640px) { html body.inflow .actbar .in .btn { min-width: 0; white-space: normal; text-align: center; line-height: 1.2; } }