/* The Google search landing (docs/design/google-landing/): the variant a paid-search visitor sees on a town page.
   Built on site.css and secteurs.css; ported from the design's screens.css. Only for body.gl (the head's rule put
   the variant in place); nothing here touches today's town page. */
/* A value click: until the value page is in place, the courtier page's hero and sections never paint. */
html[data-gl="valeur"] [data-gl-static]{display:none}
.gl [hidden]{display:none!important}
.gl .face{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 22%;background:#c9d7ea}

/* ── hero: proof first, the question, one fact; then the intent's first action ──
   valeur:   copy (with the address box) and the card strip on the left, an example estimate on the right.
   courtier: copy and the fork on the left, her times (the card) on the right. */
html:root .gl .town-hero{grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);grid-template-areas:"copy card" "fork card";grid-template-rows:auto 1fr;align-items:start;row-gap:0}
html:root .gl .gl-copy{grid-area:copy}
html:root .gl .gl-card{grid-area:card}
html:root .gl .gl-fork{grid-area:fork}
html:root .gl .gl-side{grid-area:sample}
html:root .gl .g-rating{margin:0 0 18px}
html:root .gl.seo-doc .town-hero h1{max-width:16ch}
html:root .gl .gl-fact{margin-top:16px;max-width:44ch}
html:root .gl .gl-fact b{font-weight:600;color:var(--theme-ink)}

/* ── the card ── */
html:root .gl-card{padding:22px;border-radius:24px;background:#ffffffc7;border:1px solid #fff;box-shadow:0 18px 44px #516f9622}
.gl-who{display:flex;gap:14px;align-items:center}
.gl-h{margin:0;font-size:19px;line-height:1.25;font-weight:600;color:var(--theme-ink)}
.gl-sub{margin:4px 0 0;font-size:14.5px;line-height:1.45;color:var(--theme-muted)}
.gl-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
.gl-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:60px;padding:8px 4px;border-radius:14px;border:1.5px solid #bcd0ec;background:#fff;color:#14417d;font:inherit;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,transform .1s ease}
.gl-slot .d{font-size:12.5px;color:var(--theme-muted)}
.gl-slot .t{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.gl-slot:hover{border-color:var(--blue)}
.gl-slot:active{transform:scale(.98);background:#eef4fd}
.gl-slot.on{border-color:var(--blue);background:var(--blue);color:#fff}
.gl-slot.on .d{color:#ffffffcc}
.gl-call{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:10px;font-size:15px;color:var(--theme-ink);text-align:center}
.gl-call b{font-weight:600;margin-left:.3em;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#24365366}
.gl-note{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--theme-muted);text-align:center}

/* loading: the same boxes, so nothing moves when the times arrive */
.gl-slot.ph{border-color:#dbe5f2;background:#eef3f9;cursor:default}
.gl-slot.ph .t,.gl-slot.ph .d{display:block;border-radius:6px;background:#dde6f1;color:transparent}
.gl-slot.ph .d{width:64%;height:11px;margin-bottom:5px}.gl-slot.ph .t{width:46%;height:16px}
@keyframes glpulse{50%{opacity:.55}}
.gl-slot.ph{animation:glpulse 1.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.gl-slot.ph{animation-duration:2.8s}}

/* the full-width actions (feed down, booked) */
.gl-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin-top:16px;border:0;border-radius:16px;background:var(--blue);color:#fff;font:inherit;font-size:16.5px;font-weight:600;cursor:pointer;text-decoration:none;text-align:center;padding:0 16px}
.gl-btn:hover{background:var(--blue-d)}
.gl-btn.quiet2{background:#fff;color:#14417d;border:1.5px solid #bcd0ec}
.gl-link{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:6px;font-size:15px;font-weight:600;color:#185eaf;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#185eaf55;background:none;border:0;font-family:inherit;cursor:pointer;width:100%}

/* booked */
.gl-done-h{margin:0;font-size:21px;font-weight:600;color:#17603c}
.gl-done p{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--theme-ink)}
.gl-done .m{font-size:14.5px;color:var(--theme-muted)}




/* the first screen on a phone: the design's tighter hero, so the intent's first action and her times sit above the fold */
@media(max-width:760px){
 html:root .gl .dtitle{padding-top:14px;padding-bottom:28px}
 html:root .gl .g-rating{min-height:44px;padding:8px 14px 8px 10px;font-size:15px;margin-bottom:14px}
 html:root .gl .g-rating .stars svg{width:18px;height:18px}
 html:root .gl .g-rating b{font-size:16px}
 html:root .gl.seo-doc .town-hero h1{font-size:33px;line-height:1.08}
 html:root .gl .gl-fact{font-size:16px;line-height:1.5;margin-top:12px}
 html:root .gl-card{padding:18px;border-radius:22px;margin-top:20px}
 .gl .face{width:46px;height:46px}
 .gl-h{font-size:18px}
}

/* ══ intent (body[data-v]): what shows, and in which order ══ */
[data-for]{display:none}
.gl[data-v="valeur"] [data-for="valeur"],.gl[data-v="courtier"] [data-for="courtier"]{display:block}
.gl-addr,.gl-ask,.gl-side,.gl-fork{display:none}

/* value search: the address box is the hero; the card is second, « Préférez-vous en parler? » */
.gl[data-v="valeur"] .gl-addr{display:block;margin-top:24px;max-width:600px}
.gl-addr-l{display:block;margin:0 0 8px;font-size:16px;font-weight:600;color:var(--theme-ink)}
.gl-addr-n{margin:10px 0 0;font-size:14.5px;color:var(--theme-muted)}
.gl[data-v="valeur"] .gl-ask{display:block;margin:0 0 10px;font-size:15px;font-weight:600;color:var(--theme-muted)}
.gl[data-v="valeur"] .gl-card .face{display:none}
.gl[data-v="valeur"] .gl-card .gl-h{font-size:17px}
.gl[data-v="valeur"] .gl-card [data-slot-sub]{display:none}
.gl[data-v="valeur"] .gl-card .gl-slots{margin-top:12px}
.gl[data-v="valeur"] .gl-card .gl-slot{min-height:52px}
/* the card stays second, so its buttons are outlined, never a second blue button */
html:root .gl[data-v="valeur"] .gl-card .gl-btn{background:#fff;color:#14417d;border:1.5px solid #bcd0ec;min-height:52px}
html:root .gl[data-v="valeur"] .gl-card .gl-book .gl-btn{background:var(--blue);color:#fff;border:0}

/* the example estimate (value search, wide screen): the outcome shown before the ask */
.gl-side{align-self:start;margin:0;padding:22px;border-radius:24px;background:#ffffffc7;border:1px solid #fff;box-shadow:0 18px 44px #516f9622}
.gl-side figcaption{font-size:14px;color:var(--theme-muted)}
.gl-side .ok{margin-top:16px;font-size:16px;font-weight:600;color:#17603c}
.gl-side .range{margin-top:6px;font-size:clamp(30px,2.6vw,38px);line-height:1.15;font-weight:600;letter-spacing:-.015em;color:#14213d}
.gl-side .range small{font-size:18px;font-weight:400;color:var(--theme-muted)}
.gl-side .meta{margin-top:6px;font-size:15px;line-height:1.5;color:var(--theme-muted)}
.gl-side .meta b{font-weight:600;color:var(--theme-ink)}
.gl-side .pdf{display:flex;justify-content:space-between;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid #e1e8f1;font-size:15px;color:var(--theme-ink)}

/* broker search: the seller's and the buyer's jobs, one tap each, under the copy */
.gl[data-v="courtier"] .gl-fork{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:600px;margin-top:28px}
.gl-fork-b{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:68px;padding:12px 18px;border-radius:18px;background:#ffffffb3;border:1.5px solid #bcd0ec;color:var(--theme-ink);text-decoration:none;transition:border-color .15s ease,background-color .15s ease}
.gl-fork-b:hover{border-color:var(--blue);background:#fff}
.gl-fork b{font-size:15.5px;font-weight:600;line-height:1.25}
.gl-fork span{font-size:14.5px;line-height:1.3;color:#0e5fcc}

@media(min-width:761px){
 html:root .gl[data-v="valeur"] .town-hero{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);grid-template-areas:"copy sample" "card sample";grid-template-rows:auto 1fr}
 .gl[data-v="valeur"] .gl-side{display:block}
 /* value search: the card is a strip under the address box */
 html:root .gl[data-v="valeur"] .gl-card{margin-top:28px;max-width:600px;padding:18px 22px}
 .gl[data-v="valeur"] .gl-card>[data-show="slots"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:24px;align-items:center}
 .gl[data-v="valeur"] .gl-card>[data-show="slots"] .gl-call{display:block;min-height:0;padding:6px 0}
 .gl[data-v="valeur"] .gl-card>[data-show="slots"] .gl-call b{white-space:nowrap;margin-left:0}
 .gl[data-v="valeur"] .gl-card>[data-show="slots"] .gl-ask{grid-column:1;margin:0}
 .gl[data-v="valeur"] .gl-card>[data-show="slots"] .gl-who{grid-column:1}
 .gl[data-v="valeur"] .gl-card>[data-show="slots"] .gl-slots{grid-column:2;grid-row:1 / span 3;margin-top:0}
 .gl[data-v="valeur"] .gl-card>[data-show="slots"] .gl-call,.gl[data-v="valeur"] .gl-card>[data-show="slots"] .gl-note{grid-column:1;justify-content:flex-start;text-align:left;margin-top:2px}
}
@media(max-width:760px){
 html:root .gl .town-hero{grid-template-columns:1fr;grid-template-areas:"copy" "card" "fork"}
 html:root .gl[data-v="valeur"] .gl-card{margin-top:16px;padding:14px 16px}
 .gl[data-v="valeur"] .gl-addr{margin-top:16px}
 .gl[data-v="valeur"] .gl-addr .hbox .btn-blue,.gl[data-v="valeur"] .gl-addr .hbox input{height:52px}
 .gl[data-v="valeur"] .gl-addr-n{margin-top:8px;font-size:14px}
 .gl[data-v="valeur"] .gl-card .gl-call{margin-top:4px}
 .gl[data-v="courtier"] .gl-fork{margin-top:12px;gap:10px}
 .gl-fork-b{min-height:64px;padding:10px 14px}
 .gl-fork b{font-size:15px}.gl-fork span{font-size:14px}
}

/* ══ the sections below the hero: one grammar for both intents ══
   Each section: a heading (the visitor's next question, answered), one short line, one block.
   Same rail as the hero (.wrap), 88 px between sections (64 on a phone), 32 px from the head to its block.
   Blocks reuse the site's Glass surfaces: the translucent panel of the town card, the hairline rows,
   the white review card, the listing card, the eval band's rounded close. */
.gls{padding-top:var(--s8)}
.gls-h{max-width:760px}
.gls h2,.gl-close h2{font-weight:400;font-size:clamp(28px,3.1vw,40px);line-height:1.12;letter-spacing:-.025em;color:var(--theme-ink);text-wrap:balance;max-width:24ch}
.gls-l{margin-top:12px;font-size:17px;line-height:1.6;color:var(--theme-muted);max-width:58ch}
.gl-h3{font-size:20px;line-height:1.25;font-weight:600;color:var(--theme-ink)}
.gl-p{margin-top:8px;font-size:16px;line-height:1.6;color:var(--theme-muted)}
.gl-panel{padding:clamp(20px,2.6vw,32px);border-radius:24px;background:#ffffff38;border:1px solid var(--theme-rim);box-shadow:0 16px 42px #516f9610;backdrop-filter:blur(16px)}
.gl-more{display:inline-flex;align-items:center;min-height:44px;margin-top:16px;font-size:16px;font-weight:600;color:#0e5fcc;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#0e5fcc55}
.gl-more::after{content:"\00a0→";text-decoration:none}
.gl-more:hover{color:var(--theme-ink)}
.gl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gls .rows{max-width:1000px;margin-top:var(--s5)}

/* the town figures */
.gl-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:var(--s5)}
.gl-fig{padding:24px 26px;border-radius:22px;background:#ffffff38;border:1px solid var(--theme-rim);box-shadow:0 16px 42px #516f9610;backdrop-filter:blur(16px)}
.gl-fig .n{font-size:clamp(34px,3.4vw,46px);font-weight:400;line-height:1.05;letter-spacing:-.03em;color:var(--theme-ink);white-space:nowrap}
.gl-fig:first-child .n{color:#0e5fcc}
.gl-fig .l{margin-top:10px;font-size:15px;line-height:1.5;color:var(--theme-muted)}
.gl-src{margin-top:16px;font-size:13.5px;line-height:1.55;color:var(--theme-muted);max-width:90ch}

/* what you get: the list, then the example beside it */
.gl-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.gl-list{margin-top:var(--s5);border-top:1px solid #c9d7e8}
.gl-list>div{padding:16px 0;border-bottom:1px solid #c9d7e8}
.gl-list dt{font-size:17px;font-weight:600;line-height:1.35;color:var(--theme-ink)}
.gl-list dd{margin:4px 0 0;font-size:16px;line-height:1.6;color:var(--theme-muted);max-width:52ch}
.gl-comps{margin:0}
.gl-comps figcaption b{display:block;font-size:20px;line-height:1.25;font-weight:600;color:var(--theme-ink)}
.gl-comps figcaption span{display:block;margin-top:2px;font-size:14px;color:var(--theme-muted)}
.gl-comps ol{list-style:none;padding:0;margin:16px 0 0}
.gl-comps li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:12px 0;border-top:1px solid #c9d7e8}
.gl-comps .a{font-size:15.5px;line-height:1.35;color:var(--theme-ink)}
.gl-comps .a small{display:block;font-size:13.5px;color:var(--theme-muted)}
.gl-comps .v{font-size:16px;font-weight:600;color:var(--theme-ink);white-space:nowrap}
.gl-comps .foot{margin-top:12px;padding-top:12px;border-top:1px solid #c9d7e8;font-size:13.5px;line-height:1.5;color:var(--theme-muted)}

/* numbered steps (how it is made, how it goes): numbers in plain circles, no ornament */
.gl-comps .k,.gl-steps .k,.gl-first .k{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid #c9d7e8;font-size:13.5px;font-weight:600;color:var(--theme-ink);font-variant-numeric:tabular-nums}
.gl-steps{list-style:none;padding:0;margin:var(--s5) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.gl-steps li{padding-top:18px;border-top:1px solid #c9d7e8}
.gl-steps .k{margin-bottom:12px}
.gl-steps b{display:block;font-size:17px;line-height:1.35;font-weight:600;color:var(--theme-ink)}
.gl-steps p{margin-top:6px;font-size:16px;line-height:1.6;color:var(--theme-muted)}
.gl-limit{margin-top:var(--s5);max-width:760px;padding:18px 22px;border-radius:18px;background:#ffffff52;border:1px solid #c9d7e8;font-size:16px;line-height:1.6;color:var(--theme-muted)}
.gl-limit b{font-weight:600;color:var(--theme-ink)}

/* talk to her instead (value search) */
.gl-talk{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px;align-items:center;margin-top:var(--s5);max-width:1000px}
.gl-id{display:flex;gap:16px;align-items:center}
.gl-id .face{width:72px;height:72px;font-size:22px}
.gl-id .nm{font-size:20px;font-weight:600;line-height:1.25;color:var(--theme-ink)}
.gl-id .rl{margin-top:3px;font-size:15px;line-height:1.45;color:var(--theme-muted)}
.gl-slotblock .gl-slots{margin-top:12px}
.gl-free{margin-top:12px;font-size:14px;line-height:1.45;color:var(--theme-muted)}

/* sell or buy (broker search): two equal panels, each with its own real form */
.gl-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:var(--s5)}
.gl-path form{margin-top:20px}
.gl-fl{display:block;margin:0 0 6px;font-size:14.5px;font-weight:600;color:var(--theme-ink)}
.gl-alert select{display:block;width:100%;margin-bottom:14px;height:56px;padding:0 40px 0 20px;border:1px solid #c5d4e8;border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23455a75' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center;font:inherit;font-size:16px;color:var(--theme-ink);appearance:none;-webkit-appearance:none;box-shadow:0 10px 30px #6384ae14}
.gl-alert select:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px}
.gl-n{margin-top:10px;font-size:14px;color:var(--theme-muted)}
html:root .gl .btn-blue.gl-navy{background:#243653;border-color:#243653;color:#fff}
html:root .gl .btn-blue.gl-navy:hover{background:#14213d;border-color:#14213d}

/* proof (broker search): her reviews, then her listings in the town */
.gls .reviews{margin-top:var(--s5)}
.gls .review figcaption{color:var(--theme-muted)}
.gls .review figcaption b{color:var(--theme-ink)}
.nw{white-space:nowrap}
.gl-rate{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.gl-rate .stars{display:inline-flex;gap:2px}
.gl-rate b{font-weight:600;color:var(--theme-ink)}
.gl-subh{margin-top:var(--s6)}
.gl-lst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:16px;max-width:880px}
html:root .gl .gl-lst .status{text-transform:none;letter-spacing:0;font-size:13px}
html:root .gl .gl-lst .lcard .m{text-transform:none;letter-spacing:0;font-size:13px}

/* how it goes (broker search): the call, then the seller's and the buyer's paths side by side */
.gl-first{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;margin-top:var(--s5);max-width:none;padding:20px 24px;border-radius:22px;background:#ffffff38;border:1px solid var(--theme-rim);box-shadow:0 16px 42px #516f9610;backdrop-filter:blur(16px)}
.gl-first b{display:block;font-size:17px;line-height:1.35;font-weight:600;color:var(--theme-ink);padding-top:2px}
.gl-first p{margin-top:4px;font-size:16px;line-height:1.6;color:var(--theme-muted)}
.gl-ways{margin-top:16px}
.gl-ways>div{padding:20px 24px;border-radius:22px;background:#ffffff38;border:1px solid var(--theme-rim);box-shadow:0 16px 42px #516f9610;backdrop-filter:blur(16px)}
.gl-steps-v{grid-template-columns:1fr;gap:0;margin-top:8px}
.gl-steps-v li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;padding:14px 0 0;border-top:0}
.gl-steps-v li+li{margin-top:14px;border-top:1px solid #c9d7e8}
.gl-steps-v .k{grid-row:1 / span 2;margin:0}
.gl-steps-v b{padding-top:2px}
.gl-steps-v p{margin-top:2px}

/* the ask again: the eval band's rounded glass close, with the same action as the hero */
.gl-closewrap{padding-top:var(--s8)}
.gl-close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4vw,56px);border:2px solid #ffffffd9;border-radius:32px;background:#ffffff25;backdrop-filter:blur(16px);box-shadow:0 12px 48px #6384ae08}
.gl-close p{margin-top:12px;font-size:17px;line-height:1.6;color:var(--theme-muted);max-width:46ch}
.gl-close .act{min-width:0}
.gl-close .gl-slots{margin-top:0}
.gl-q{display:block;padding:12px 0;margin-top:2px;font-size:15px;line-height:1.4;color:var(--theme-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:#24365366}
.gl-close .gl-call{justify-content:flex-start;margin-top:12px}
html:root .gl footer{margin-top:var(--s8)}
@supports not (backdrop-filter:blur(1px)){.gl-panel,.gl-fig,.gl-first,.gl-ways>div,.gl-close{background:#edf3fa}}

@media(max-width:1000px){
 .gl-figs{grid-template-columns:1fr;gap:12px}
 .gl-split,.gl-talk,.gl-two,.gl-close{grid-template-columns:1fr}
 .gl-steps{grid-template-columns:1fr;gap:0}
 .gl-steps:not(.gl-steps-v) li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;padding:16px 0}
 .gl-steps:not(.gl-steps-v) .k{grid-row:1 / span 2;margin:0}
 .gl-steps:not(.gl-steps-v) b{padding-top:2px}
 .gl-steps:not(.gl-steps-v) p{margin-top:2px}
}
@media(max-width:760px){
 .gls,.gl-closewrap{padding-top:var(--s7)}
 .gls h2,.gl-close h2{font-size:28px;line-height:1.15}
 .gls-l,.gl-close p{font-size:16px}
 .gl-fig{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);column-gap:16px;align-items:center;padding:16px 18px;border-radius:18px}
 .gl-fig .n{font-size:28px}
 .gl-fig .l{margin-top:0;font-size:14.5px}
 .gl-panel,.gl-first,.gl-ways>div{padding:18px;border-radius:20px}
 .gl-talk{gap:20px}
 .gl-id .face{width:56px;height:56px;font-size:18px}
 .gl-two{gap:16px}
 .gl-alert select{height:52px;padding-left:16px;font-size:16px}
 html:root .gl .gl-path .hbox input{height:52px}
 html:root .gl .gl-path .hbox .btn-blue{height:52px}
 .gl-lst{grid-template-columns:1fr;gap:12px}
 /* phone: the listing card lies flat, photo on the left, so two homes fit one screen */
 html:root .gl .gl-lst .lcard{display:grid;grid-template-columns:116px minmax(0,1fr)}
 html:root .gl .gl-lst .lcard .ph{aspect-ratio:auto;height:100%;min-height:116px}
 html:root .gl .gl-lst .lcard .b{padding:12px 14px}
 html:root .gl .gl-lst .lcard .p{font-size:17px}
 html:root .gl .gl-lst .lcard .m{margin-top:8px;gap:6px}
 html:root .gl .gl-lst .status{top:8px;left:8px;padding:4px 9px;font-size:12px}
 .gl-close{padding:24px 20px;border-radius:24px;gap:20px}
 html:root .gl footer{margin-top:var(--s7)}
}


/* ── the card's states (body[data-s]) ── */
.gl [data-show]{display:none}
.gl:is([data-s="today"],[data-s="tomorrow"],[data-s="later"],[data-s="loading"]) [data-show="slots"],
.gl[data-s="callback"] [data-show="callback"]{display:block}
/* the landing's address boxes never move the page: on a phone their suggestions open upward, above the keyboard */
@media(max-width:640px){.gl .hsuggest{top:auto;bottom:calc(100% + 6px)}}
.gl-next{margin-top:10px;text-align:center}

/* ── the booking form: where the time was tapped on a wide screen, a bottom sheet on a phone ── */
.gl-in-form>*:not(.gl-book){display:none!important}
.gl-book .when{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:#eef4fd;font-size:15.5px;color:var(--theme-ink)}
.gl-book .when b{font-weight:600}
.gl-book .when button{border:0;background:none;min-height:44px;padding:0 0 0 10px;margin:-12px 0;font:inherit;font-size:15px;font-weight:600;color:#185eaf;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gl-book h2{margin:16px 0 4px;font-size:21px;line-height:1.25;font-weight:600;color:var(--theme-ink)}
.gl-f{margin-top:12px}
.gl-f label{display:block;margin-bottom:6px;font-size:14.5px;font-weight:600;color:var(--theme-ink)}
.gl-f input,.gl-in{display:block;width:100%;height:52px;padding:0 16px;border-radius:14px;border:1.5px solid #c9d6e8;background:#fff;color:#14213d;font:inherit;font-size:17px}
.gl-in{margin-bottom:14px;border-radius:999px;padding:0 20px;font-size:16px}
.gl-f input:focus,.gl-in:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px #1871f01f}
.gl-consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13.5px;line-height:1.45;color:var(--theme-muted);cursor:pointer}
.gl-consent input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--blue)}
.gl-consent a{color:#185eaf;text-decoration:underline}
.gl-err{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#fdf1e7;color:#7a3d0c;font-size:15px;line-height:1.4}
.gl-err:focus{outline:none}
.gl-book .gl-slots{margin-top:10px}
.gl-book .gl-p{margin-top:8px}
.gl-book [data-part="done"] .gl-done-h,.gl-book [data-part="called"] .gl-done-h{margin-top:6px}
.gl-book [data-part]:focus{outline:none}
.gl-book .grab{display:none}
.gl-bad{color:#7a3d0c!important}.gl-ok{color:#17603c!important;font-weight:600}
.gl-qb{display:inline;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#24365366;cursor:pointer}
button.gl-more{border:0;background:none;padding:0;font-family:inherit;cursor:pointer}
button.gl-more[aria-expanded="true"]::after{content:""}
.gl-out::after{content:"\00a0↗"}

/* The sheet (a phone): above the keyboard, the time on top, three fields and the button in reach. */
.gl-sheet{position:fixed;inset:auto 0 auto 0;top:calc(var(--gl-vtop,0px) + var(--gl-vh,100dvh));transform:translateY(-100%);width:100%;max-width:none;max-height:calc(var(--gl-vh,100dvh) - 12px);margin:0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));border:0;border-radius:24px 24px 0 0;background:#fff;color:var(--theme-ink);box-shadow:0 -12px 40px #14213d33;overflow:auto;overscroll-behavior:contain;scroll-padding-bottom:78px}
.gl-sheet::backdrop{background:#14213d59}
.gl-sheet[open]{animation:glsheet .22s ease-out}
@keyframes glsheet{from{transform:translateY(-100%) translateY(24px);opacity:.4}}
@media(prefers-reduced-motion:reduce){.gl-sheet[open]{animation:none}}
.gl-sheet .gl-book .grab{display:block;width:40px;height:5px;border-radius:3px;background:#d3dbe6;margin:0 auto 12px}
/* keyboard open: tighter, so the field, its neighbours and the button fit above it */
.gl-sheet[data-kbd]{padding-top:8px;padding-bottom:10px}
.gl-sheet[data-kbd] .gl-book .grab{margin-bottom:8px}
.gl-sheet[data-kbd] .gl-book .when{padding:8px 12px;font-size:14.5px}
.gl-sheet[data-kbd] .gl-book h2{margin:10px 0 0;font-size:18px}
.gl-sheet[data-kbd] .gl-f{margin-top:6px}
.gl-sheet[data-kbd] .gl-f label{margin-bottom:3px;font-size:13.5px}
.gl-sheet[data-kbd] .gl-f input{height:46px}
.gl-sheet[data-kbd] .gl-consent{margin-top:8px;font-size:12.5px}
.gl-sheet[data-kbd] .gl-btn{margin-top:10px;min-height:50px}
/* In the sheet the button stays in reach above the keyboard; the fields scroll under it. */
.gl-sheet .gl-book [data-go]{position:sticky;bottom:0;box-shadow:0 -10px 0 #fff,0 10px 0 #fff}

/* ── in place: a button's own form opens right under it ── */
.gl-xp{margin-top:12px;max-width:600px}
.gl-xp .hform{margin:0}
.gl-forkwrap{grid-area:fork}
.gl[data-v="courtier"] .gl-forkwrap .gl-xp{padding:18px;border-radius:20px;background:#ffffffc7;border:1px solid #fff;box-shadow:0 12px 32px #516f9618}
.gl-fork-b{font:inherit;text-align:left;cursor:pointer}
.gl-fork-b[aria-expanded="true"]{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px #1871f01f}
.gl-alert input[type=email]{min-width:0}

/* the broker's photo card on the right of the value search's first screen */
.gl-side{display:none}
.gl-side .town-agent img{width:100%;height:auto;border-radius:18px}

/* the towns around it: real links, seen as links */
.gl #voisins .gls-l a{color:#0e5fcc;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#0e5fcc66}