/* herculestudio.art: near-black ground, raised cards on hairlines, Inter set tight, one electric blue.
   Direction contract: .impeccable/surfaces/templates-public-home-html.md */
:root {
  --fond:#0A0A0B; --fond2:#141416; --fond3:#1B1B1F;
  --encre:#F5F5F7; --gris:#9A9AA3; --trait:rgba(255,255,255,.09); --trait2:rgba(255,255,255,.18);
  --accent:#1F6BF0; --accent2:#5B97FF; --accent-doux:rgba(46,123,255,.12);
  --alerte:#FF7A66; --alerte-doux:rgba(255,122,102,.1);
  --rayon:24px;
  --titre:'Inter', system-ui, sans-serif; --texte:'Inter', system-ui, sans-serif;
  color-scheme:dark;
}
*, *::before, *::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--fond) }
body { margin:0; background:var(--fond); color:var(--encre); font-family:var(--texte); font-size:18px; line-height:1.55;
       font-optical-sizing:auto; font-feature-settings:'cv11', 'ss01'; -webkit-font-smoothing:antialiased }
h1, h2, h3 { font-family:var(--titre); font-weight:650; line-height:1; letter-spacing:-.04em; margin:0 }
h1 { font-size:clamp(46px, 7.2vw, 96px) }
h2 { font-size:clamp(34px, 4.6vw, 64px) }
h3 { font-size:24px; font-weight:600; letter-spacing:-.02em; line-height:1.15 }
p { margin:0 0 1em }
a { color:inherit; text-underline-offset:4px }
.wrap { max-width:1120px; margin:0 auto; padding:0 48px }
.lede { font-size:20px; color:var(--gris); max-width:30em }
small, .small { font-size:14px; color:var(--gris) }

::selection { background:var(--accent); color:#fff }
:focus-visible { outline:2px solid var(--accent2); outline-offset:3px; border-radius:6px }
input::placeholder, textarea::placeholder { color:#6E6E77 }
html { scrollbar-color:#2A2A30 var(--fond) }
.skip { position:absolute; left:-999px; top:8px; background:var(--encre); color:var(--fond); padding:10px 16px; z-index:100; border-radius:99px }
.skip:focus { left:8px }

.site-header { position:sticky; top:0; z-index:40; background:rgba(10,10,11,.72); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--trait) }
.nav { display:flex; align-items:center; gap:28px; padding-top:14px; padding-bottom:14px; font-size:15px }
.brand { font-family:var(--titre); font-weight:700; letter-spacing:-.035em; font-size:20px; text-decoration:none; margin-right:auto }
.nav-link { color:var(--gris); text-decoration:none; padding:8px 0; transition:color .15s }
.nav-link:hover { color:var(--encre) }

.cta { display:inline-block; background:var(--encre); color:var(--fond); padding:16px 28px; border-radius:99px; font-weight:600; font-size:17px; letter-spacing:-.01em;
       text-decoration:none; white-space:nowrap; border:0; cursor:pointer; font-family:inherit; transition:box-shadow .2s, background .2s, transform .2s }
.cta:hover { background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.12) }
.cta:active { transform:scale(.98) }
.cta-nav { padding:10px 18px; font-size:15px; background:var(--accent); color:#fff }
.cta-nav:hover { background:#1A5FDB; box-shadow:0 0 0 4px rgba(46,123,255,.2) }

.site-footer { border-top:1px solid var(--trait); margin-top:96px; padding:36px 0 44px; background:var(--fond); color:var(--gris); font-size:15px }
.site-footer p { margin:0 0 .5em }
.signature { font-family:var(--titre); font-weight:650; letter-spacing:-.03em; font-size:20px; color:var(--encre) }
.legal-links a { margin-right:18px }
.legal-links a:hover { color:var(--encre) }

.cta-sticky { display:none }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important }
}

@media (max-width:720px) {
  body { font-size:17px }
  h1 { font-size:42px }
  h2 { font-size:34px }
  .wrap { padding:0 20px }
  .nav-link, .cta-nav { display:none }
  .nav .nav-contact { display:inline-block; font-weight:600; color:var(--encre) }
  .lede { font-size:17px }
  .site-footer { padding-bottom:110px }
  .cta-sticky { display:block; position:fixed; left:0; right:0; bottom:0; padding:12px 16px 16px; z-index:50 }
  .cta-sticky .cta { display:block; text-align:center; padding:16px; font-size:17px; box-shadow:0 12px 32px -8px rgba(0,0,0,.8) }
}

/* ---------- Home ---------- */
.desk-only { display:inline }

/* Phone frames and the mini sites inside them (the _screen_*.html partials) */
.phone { --w:190px; width:var(--w); aspect-ratio:9/19; border-radius:calc(var(--w)*.15); background:#1c1c1e; padding:calc(var(--w)*.03); flex:none;
         box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.14); font-size:calc(var(--w)/26); text-align:left; letter-spacing:0 }
.s { height:100%; border-radius:calc(var(--w)*.12); overflow:hidden; padding:2.6em 1.5em 1.5em; line-height:1.3 }
.s-nav { display:flex; justify-content:space-between; align-items:center; font-size:1.15em; margin-bottom:1.3em }
.s-nav i { width:1.6em; height:.9em; border-top:.18em solid; border-bottom:.18em solid; display:block; opacity:.7 }
.s-img { height:12.5em; border-radius:1.1em; margin-bottom:1.5em }
.s .s-h { font-size:2.15em; line-height:1.08; margin:0 0 .5em; font-weight:600; letter-spacing:0 }
.s .s-sub { font-size:1.15em; opacity:.75; margin:0 0 1.4em }
.s-btn { display:block; text-align:center; padding:1.15em; border-radius:99em; font-size:1.2em; font-weight:700; margin-bottom:1.4em }
.s-line { display:flex; justify-content:space-between; font-size:1.15em; padding:.75em 0; border-bottom:1px solid rgba(127,127,127,.3) }
.s-tiles { display:grid; grid-template-columns:1fr 1fr; gap:.8em }
.s-tiles div { aspect-ratio:1; border-radius:.9em; display:flex; align-items:flex-end; padding:.6em; font-size:1.05em; font-weight:600; color:#fff }
.s-coif { background:#1d1a18; color:#f0e9df; font-family:'Jost', sans-serif }
/* Mini-site photos: small crops of the licensed example photos (provenance: docs/photos-exemples.md) */
.s-img, .s-tiles div { background-color:#2b211d; background-size:cover; background-position:center }
.s-coif .s-img { background-image:url(/static/public/mini/coiffeur.jpg) }
.s-coif .s-btn { background:#e9d8c3; color:#1d1a18 }
.s-resto { background:#eef0e7; color:#1f2b20; font-family:'Cormorant Garamond', serif }
.s-resto .s-h { font-weight:700; font-size:2.6em }
.s-resto .s-sub, .s-resto .s-line { font-family:'Jost', sans-serif }
.s-resto .s-img { background-image:url(/static/public/mini/restaurant.jpg) }
.s-resto .s-btn { background:#3d6a37; color:#f3f8ee; font-family:'Jost', sans-serif }
.s-boul { background:#fbf2e2; color:#3b2614; font-family:'Young Serif', serif }
.s-boul .s-h { font-weight:400 }
.s-boul .s-sub, .s-boul .s-btn, .s-boul .s-tiles { font-family:'Jost', sans-serif }
.s-boul .s-btn { background:#9c4515; color:#fff6ec }
.s-boul .ouvert { font-family:'Jost', sans-serif; font-size:1.1em; display:inline-block; background:#f4e6cd; color:#3b2614; border-radius:99em; padding:.35em .9em; margin-bottom:1.3em }
/* Tile labels sit on a dark foot so they stay readable over any photo */
.s-tiles .t-trad { background-image:linear-gradient(180deg, transparent 45%, rgba(25,14,6,.75)), url(/static/public/mini/tradition.jpg) }
.s-tiles .t-crois { background-image:linear-gradient(180deg, transparent 45%, rgba(25,14,6,.75)), url(/static/public/mini/croissant.jpg) }
.s-tiles .t-seigle { background-image:linear-gradient(180deg, transparent 45%, rgba(25,14,6,.75)), url(/static/public/mini/seigle.jpg) }
.s-tiles .t-tarte { background-image:linear-gradient(180deg, transparent 45%, rgba(25,14,6,.75)), url(/static/public/mini/tarte.jpg) }

/* Hero: the single load sequence (title, phones one after the other, price). Reduced motion: see the rule above. */
@keyframes up { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:none } }
@keyframes rise { from { opacity:0; transform:translateY(28px); filter:blur(10px) } to { opacity:1; transform:none; filter:none } }
@keyframes fanL { from { opacity:0; transform:translate(40%,30px) rotate(0) } to { opacity:1; transform:rotate(-7deg) } }
@keyframes fanR { from { opacity:0; transform:translate(-40%,30px) rotate(0) } to { opacity:1; transform:rotate(7deg) } }

.hero { text-align:center; padding-top:72px; background:radial-gradient(60% 50% at 50% 78%, rgba(46,123,255,.22), transparent 70%), var(--fond) }
.hero-top { display:flex; flex-direction:column; align-items:center }
.hero h1 { max-width:11em; margin:0 auto; letter-spacing:-.045em; line-height:.95; text-wrap:balance; animation:rise .9s .08s cubic-bezier(.16,1,.3,1) both }
.hero .lede { margin:22px auto 0; animation:rise .8s .18s cubic-bezier(.16,1,.3,1) both }
.lineup { display:flex; justify-content:center; align-items:flex-start; gap:64px; max-width:1024px; height:560px; margin:52px auto 0; padding:56px 40px 0; overflow:hidden; scroll-margin-top:80px;
  border:1px solid var(--trait); border-bottom:0; border-radius:28px 28px 0 0; background:linear-gradient(180deg, var(--fond3), var(--fond) 85%);
  /* the stage dissolves at its foot instead of stopping on a hard seam */
  -webkit-mask-image:linear-gradient(180deg, #000 90%, transparent); mask-image:linear-gradient(180deg, #000 90%, transparent) }
.item { display:flex; flex-direction:column; align-items:center; gap:14px; margin:0 }
.item figcaption { font-size:14px; font-weight:500; color:var(--gris) }
.i-coif { animation:up .8s .3s both }
.i-resto { animation:up .8s .42s both }
.i-boul { animation:up .8s .54s both }
.i-pour { animation:up .8s .3s both }
/* Live demo inside the centre phone: the iframe is laid out at 390px and scaled down by --k (inner width / 390) */
.s-live { --k:.458; height:100%; border-radius:calc(var(--w)*.12); overflow:hidden; background:#fff; position:relative }
.s-live iframe { position:absolute; left:0; top:0; width:calc(100%/var(--k)); height:calc(100%/var(--k)); border:0; transform:scale(var(--k)); transform-origin:0 0; pointer-events:none }
.lineup-go { text-align:center; margin:28px auto 0; animation:up .7s .62s both }
.lineup-go a { color:var(--encre); font-weight:600; text-decoration:underline; text-decoration-color:var(--trait2); text-underline-offset:5px; text-decoration-thickness:1.5px; padding:6px 0 }
.lineup-go a::after { content:" \2192"; display:inline-block; transition:transform .2s ease }
.lineup-go a:hover { color:var(--accent2); text-decoration-color:currentColor }
.lineup-go a:hover::after { transform:translateX(4px) }
.prixbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:36px; padding:24px 0 36px; border-top:1px solid var(--trait); text-align:left; animation:up .7s .7s both }
.prixbar p { margin:0 }
.prix { font-size:20px; font-weight:600; letter-spacing:-.02em }
.prixbar .note { font-size:14px; color:var(--gris); margin-top:4px }

/* Sections after the hero: centred heads, content in raised cards that rise into place on scroll */
.band { padding-top:128px; padding-bottom:24px }
.band-head { padding-bottom:40px; text-align:center }
.band-head h2 { margin:0 auto; max-width:14em; text-wrap:balance }
.band-sub { margin:16px auto 0; color:var(--gris); font-size:19px; max-width:34em; text-wrap:pretty }

.step-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; counter-reset:step }
.step-list li { counter-increment:step; background:var(--fond2); border:1px solid var(--trait); border-radius:var(--rayon); padding:30px 28px 32px }
.step-list li::before { content:counter(step); display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; font-size:15px; font-weight:600; margin-bottom:48px }
.step-list h3 { font-size:22px; margin-bottom:12px }
.step-list p { color:var(--gris); margin:0 }

.offer-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px }
.offer { display:flex; flex-direction:column; background:var(--fond2); border:1px solid var(--trait); border-radius:var(--rayon); padding:30px 28px 26px }
.offer:nth-child(2) { border-color:rgba(46,123,255,.6); box-shadow:0 0 0 1px rgba(46,123,255,.35), 0 30px 60px -30px rgba(46,123,255,.45) }
.offer h3 { font-size:20px }
.o-big { display:block; font-family:var(--titre); font-weight:650; font-size:clamp(56px, 6vw, 80px); line-height:1; letter-spacing:-.05em; margin:18px 0 12px; font-variant-numeric:tabular-nums }
.o-line { font-weight:600; margin-bottom:4px }
.o-dep { color:var(--gris); font-size:15px; margin-bottom:22px }
.o-plus { font-size:15px; font-weight:600; margin-bottom:6px }
.o-list { list-style:none; margin:0 0 24px; padding:0; font-size:16px; color:var(--gris) }
.o-list li { padding:8px 0; border-bottom:1px solid var(--trait) }
.o-go { margin-top:auto; text-align:center; color:var(--accent2); font-weight:600; text-decoration:none; background:var(--fond3); border:1px solid var(--trait); border-radius:99px; padding:12px 18px; transition:background .2s, color .2s }
.o-go:hover { color:#fff; background:var(--accent) }
.prix-go { display:flex; align-items:center; gap:24px; flex-shrink:0 }
.talk { color:var(--encre); font-weight:600; text-decoration-color:var(--trait2); text-underline-offset:5px; white-space:nowrap }
.talk:hover { color:var(--accent2); text-decoration-color:currentColor }
.offers-talk { margin:32px 0 0; text-align:center; color:var(--gris) }
.guarantee { margin-top:20px; padding:36px; background:var(--fond2); border:1px solid var(--trait); border-radius:var(--rayon); display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:12px 48px; align-items:start }
.g-text { font-family:var(--titre); font-weight:600; font-size:30px; line-height:1.12; letter-spacing:-.03em; margin:0; grid-row:span 2 }
.g-small { color:var(--gris); font-size:15px; margin:0 }

.operator { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:48px; align-items:center; max-width:1024px; margin-top:128px; padding:28px;
  background:var(--fond2); border:1px solid var(--trait); border-radius:28px }
.op-photo img, .ph-box { display:block; width:100%; height:auto; aspect-ratio:4/5; border-radius:18px; object-fit:cover }
.ph-box { border:1px dashed var(--gris); display:flex; align-items:center; justify-content:center; color:var(--gris); font-size:18px; background:var(--fond3) }
.op-text h2 { font-size:clamp(36px, 4.4vw, 56px); margin-bottom:24px }
.op-voice { font-family:var(--titre); font-weight:600; font-size:28px; line-height:1.18; letter-spacing:-.025em }
.op-body { color:var(--gris); max-width:30em }
.op-phone { font-family:var(--titre); font-weight:650; font-size:36px; letter-spacing:-.04em; margin:8px 0 0; font-variant-numeric:tabular-nums }
.op-phone a { color:var(--encre); text-decoration:none; border-bottom:2px solid var(--accent) }
.op-phone a:hover { color:var(--accent2) }

.review-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:14px }
.review { margin:0; background:var(--fond2); border:1px solid var(--trait); border-radius:var(--rayon); padding:28px }
.review blockquote { margin:0 0 12px; font-family:var(--titre); font-weight:600; font-size:22px; line-height:1.25; letter-spacing:-.02em }
.review figcaption { color:var(--gris); font-size:15px }

.faq { padding-bottom:48px }
.faq-list { max-width:760px; margin:0 auto; display:grid; gap:10px }
.faq-list details { background:var(--fond2); border:1px solid var(--trait); border-radius:18px; padding:0 22px; transition:border-color .2s }
.faq-list details[open] { border-color:var(--trait2) }
.faq-list summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px 0; font-size:18px; font-weight:500 }
.faq-list summary::-webkit-details-marker { display:none }
.faq-list summary::after { content:"+"; font-size:26px; font-weight:300; line-height:1; color:var(--encre); transition:transform .2s ease }
.faq-list details[open] summary::after { transform:rotate(45deg) }
.faq-list details p { color:var(--gris); max-width:40em; margin:0 0 22px }

/* Scroll: each card rises out of a blur as it enters (progressive enhancement, off with reduced motion) */
@supports (animation-timeline: view()) {
  .step-list li, .offer, .guarantee, .operator, .review, .ex-card {
    animation:rise both cubic-bezier(.16,1,.3,1); animation-timeline:view(); animation-range:entry 0% entry 75% }
}

@media (max-width:960px) and (min-width:721px) {
  .lineup { gap:32px }
  .operator { margin-left:24px; margin-right:24px }
}

@media (max-width:720px) {
  .desk-only { display:none }
  .hero { padding-top:28px; background:radial-gradient(90% 40% at 50% 60%, rgba(46,123,255,.25), transparent 70%), var(--fond) }
  .hero .lede { margin-top:14px }
  .lineup { position:relative; height:300px; margin:24px 20px 14px; padding:0; gap:0; align-items:center; border:0; border-radius:0; background:none; overflow:visible; -webkit-mask-image:none; mask-image:none }
  .item { position:absolute }
  .item figcaption { display:none }
  .item .phone { --w:118px }
  .i-coif, .i-pour { z-index:2; animation:up .8s .2s both }
  .i-coif .phone, .i-pour .phone { --w:132px }
  .i-pour .s-live { --k:.318 }
  .i-boul { left:0; top:30px; transform:rotate(-7deg); animation:fanL .9s .35s both }
  .i-resto { right:0; top:30px; transform:rotate(7deg); animation:fanR .9s .5s both }
  .lineup-go { margin:0 auto 14px; font-size:16px; animation:none }
  .prixbar { display:block; margin:0; padding:0 0 28px; border:0; text-align:center; animation:none }
  .prixbar .cta { display:none }
  .prix-go { display:block; margin-top:14px }
  .prix { font-size:22px; line-height:1.2; animation:up .7s .6s both }
  .prixbar .note { font-size:15px; margin-top:8px; animation:up .7s .7s both }
  .band { padding-top:84px }
  .band-head { padding-bottom:24px }
  .band-head h2, .op-text h2 { font-size:34px }
  .band-sub { font-size:17px; margin-top:12px }
  .step-list, .offer-grid { grid-template-columns:1fr }
  .step-list li { padding:24px 22px }
  .step-list li::before { margin-bottom:22px }
  .offer { padding:26px 22px 22px }
  .o-list { font-size:17px }
  .guarantee { display:block; padding:24px 22px }
  .g-text { font-size:24px; margin-bottom:16px }
  .operator { grid-template-columns:1fr; gap:26px; margin:84px 20px 0; padding:16px 16px 26px }
  .op-photo img, .op-photo .ph-box { aspect-ratio:1/1; object-position:50% 22% }
  .op-text { padding:0 6px }
  .op-voice { font-size:24px }
  .op-phone { font-size:30px }
  .faq-list details { padding:0 18px }
  .faq-list summary { font-size:17px; padding:18px 0 }
}

/* Short phones (667 px and the like): a tighter fan so the price line stays above the sticky button */
@media (max-width:720px) and (max-height:760px) {
  .lineup { height:220px; margin:8px 20px }
  .item .phone { --w:88px }
  .i-coif .phone, .i-pour .phone { --w:100px }
  .i-pour .s-live { --k:.241 }
  .i-boul, .i-resto { top:24px }
}

/* ---------- Exemples (gallery of the showcase demos) ---------- */
.nav-link[aria-current="page"] { color:var(--encre); font-weight:600 }
.ex-intro { padding-top:72px; padding-bottom:64px; text-align:center }
.ex-intro h1 { max-width:11em; margin:0 auto; line-height:.98; text-wrap:balance; animation:rise .9s cubic-bezier(.16,1,.3,1) both }
.ex-intro .lede { margin:22px auto 0; max-width:34em; animation:rise .8s .12s cubic-bezier(.16,1,.3,1) both }
.ex-note { margin:14px 0 0; font-size:15px; color:var(--gris); animation:up .7s .2s both }
.ex-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px }
.ex-card { display:flex; flex-direction:column; text-decoration:none; border-radius:var(--rayon); background:var(--fond2); border:1px solid var(--trait); padding:10px 10px 26px; transition:border-color .2s }
.ex-card:hover { border-color:var(--trait2) }
.ex-stage { display:flex; justify-content:center; align-items:flex-end; height:460px; padding-top:44px; overflow:hidden; border-radius:16px; background:var(--stage) }
.ex-coiffeur { --stage:#1d1a18 }
.ex-restaurant { --stage:#dfe4d4 }
.ex-boulangerie { --stage:#f1e1c6 }
.ex-stage .phone { --w:220px; margin-bottom:-90px; transition:transform .35s cubic-bezier(.2,.7,.2,1) }
.ex-coiffeur .ex-stage .phone { box-shadow:0 0 0 1px rgba(255,255,255,.14) }
.ex-card:hover .ex-stage .phone, .ex-card:focus-visible .ex-stage .phone { transform:translateY(-14px) }
.ex-trade { margin:22px 16px 0; font-size:14px; font-weight:500; color:var(--gris) }
.ex-name { font-family:var(--titre); font-weight:650; font-size:30px; line-height:1.1; letter-spacing:-.035em; margin:4px 16px 0 }
.ex-text { color:var(--gris); font-size:16px; margin:8px 16px 0 }
.ex-go { margin:16px 16px 0; align-self:flex-start; color:var(--accent2); font-weight:600; text-decoration:none }
.ex-go::after { content:" \2192"; display:inline-block; transition:transform .2s ease }
.ex-card:hover .ex-go::after { transform:translateX(4px) }
.ex-end-go { display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; padding-top:32px; margin:0 }
.ex-back { color:var(--encre); font-weight:600; text-decoration-color:var(--trait2); text-underline-offset:5px }
.ex-back:hover { color:var(--accent2) }

@media (max-width:960px) and (min-width:721px) {
  .ex-stage { height:400px }
  .ex-stage .phone { --w:180px }
}

@media (max-width:720px) {
  .ex-intro { padding-top:32px; padding-bottom:40px }
  .ex-grid { grid-template-columns:1fr; gap:14px }
  .ex-stage { height:400px; padding-top:32px }
  .ex-stage .phone { --w:200px; margin-bottom:-80px }
  .ex-name { font-size:28px }
  .ex-text { font-size:17px }
}

/* Legal pages: long-form, ~68 characters per line */
.legal { padding-top:56px; padding-bottom:96px }
.legal > * { max-width:68ch }
.legal h1 { font-size:clamp(36px,5vw,56px); line-height:1.05; margin:16px 0 32px }
.legal h2 { font-size:24px; line-height:1.2; letter-spacing:-.025em; margin:44px 0 10px }
.legal p, .legal li { font-size:17px; line-height:1.65; color:#C9C9D0 }
.legal p { margin:0 0 14px }
.legal ul { margin:0 0 14px; padding-left:22px }
.legal a { color:var(--accent2) }
.legal-banner { display:inline-block; padding:6px 14px; border:1px solid var(--accent2); border-radius:99px; font-weight:600; font-size:15px; color:var(--accent2); background:var(--accent-doux) }
@media (max-width:720px) { .legal { padding-top:28px } }

/* ---------- Order funnel: one question per screen, a progress line that fills ---------- */
.t-head { display:flex; align-items:baseline; justify-content:space-between; padding-top:16px; padding-bottom:14px }
.t-count { margin:0; color:var(--gris); font-size:15px }
.t-num { font-family:var(--titre); font-weight:650; font-size:26px; letter-spacing:-.03em; color:var(--encre); margin-right:2px }
.t-prog { height:3px; background:var(--trait) }
.t-prog i { display:block; height:100%; background:var(--accent2); transition:width .5s cubic-bezier(.16,1,.3,1) }
.t-screen { max-width:640px; margin:0 auto; padding:64px 24px 72px }
.t-for { margin:0 0 12px; font-size:15px; font-weight:600; color:var(--accent2) }
.t-q { font-size:clamp(38px, 5.4vw, 54px); line-height:1.02; letter-spacing:-.045em; margin-bottom:28px; text-wrap:balance }
.t-lede { font-size:20px }
.t-help, .t-tva { color:var(--gris); font-size:16px }
.t-hint { color:var(--gris); font-weight:400 }
/* An example answer, in the merchant's own trade: shows the tone and the level of detail we expect. */
.t-example { margin:0 0 24px; padding:18px 20px; background:var(--fond2); border:1px solid var(--trait); border-radius:16px }
.t-example-k { margin:0 0 6px; font-size:14px; font-weight:600; color:var(--accent2) }
.t-example-t { margin:0; white-space:pre-line; font-size:17px; line-height:1.6; color:#C9C9D0 }
.t-saved { min-height:1.5em; margin:12px 0 0; color:var(--gris); font-size:15px }
.t-alert { background:var(--alerte-doux); border:1px solid rgba(255,122,102,.45); padding:14px 18px; margin:0 0 24px; border-radius:14px }
.t-alert p { margin:0 0 6px; font-weight:600; color:var(--alerte) }
.t-alert ul { margin:0; padding-left:20px }

.t-options { border:0; margin:0; padding:0; display:grid; gap:10px }
.t-options legend { padding:0; margin-bottom:14px }
.t-opt { display:flex; gap:18px; align-items:flex-start; padding:20px 20px; background:var(--fond2); border:1px solid var(--trait); border-radius:18px; cursor:pointer; transition:border-color .2s, box-shadow .2s }
.t-opt:hover { border-color:var(--trait2) }
.t-opt:has(input:checked) { border-color:rgba(46,123,255,.7); box-shadow:0 0 0 1px rgba(46,123,255,.4), 0 20px 40px -24px rgba(46,123,255,.5) }
.t-opt input { appearance:none; flex:none; width:24px; height:24px; margin:4px 0 0; border:2px solid var(--gris); border-radius:50%; background:transparent; transition:box-shadow .15s, border-color .15s }
.t-opt input:checked { border-color:var(--accent2); box-shadow:inset 0 0 0 5px var(--fond2), inset 0 0 0 12px var(--accent2) }
.t-opt-body { display:flex; flex-direction:column; gap:4px }
.t-opt-name { font-family:var(--titre); font-weight:650; font-size:26px; line-height:1.1; letter-spacing:-.035em }
.t-reco { align-self:flex-start; font-size:13px; font-weight:600; color:var(--accent2); background:var(--accent-doux); border-radius:99px; padding:3px 10px }
.t-opt-price { font-weight:600 }
.t-opt-inc { color:var(--gris); font-size:16px }

.t-form { margin:0 }
.t-field { display:block; font-weight:600; font-size:16px; margin-bottom:20px }
.t-field input, .t-field textarea, .t-field select { display:block; width:100%; margin-top:8px; padding:15px 16px; font:inherit; font-weight:400; font-size:18px; color:var(--encre);
  background:var(--fond2); border:1px solid var(--trait2); border-radius:14px; transition:border-color .15s, box-shadow .15s }
.t-field input:hover, .t-field textarea:hover, .t-field select:hover { border-color:rgba(255,255,255,.28) }
/* Focus: a solid ring like every other control (forced-colors and high-contrast modes keep it), plus the blue border */
.t-field input:focus { outline:3px solid var(--accent); outline-offset:2px; border-color:var(--accent2) }
.t-field textarea:focus { outline:3px solid var(--accent); outline-offset:2px; border-color:var(--accent2) }
.t-field select:focus { outline:3px solid var(--accent); outline-offset:2px; border-color:var(--accent2) }
.t-field textarea { line-height:1.45; resize:vertical }
.t-field-cp input { max-width:11em }
.t-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 16px }
.t-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:28px }
.t-ghost { color:var(--gris); font-weight:600; text-decoration-color:var(--trait2); text-underline-offset:5px; padding:8px 0 }
.t-ghost:hover { color:var(--encre) }
.t-ghost-btn { font:inherit; font-weight:600; color:var(--encre); background:var(--fond3); border:1px solid var(--trait2); border-radius:99px; padding:10px 20px; cursor:pointer }
.t-ghost-btn:hover { border-color:var(--accent2); color:var(--accent2) }

.t-card { padding:24px; background:var(--fond2); border:1px solid var(--trait); border-radius:var(--rayon); font-size:18px }
.t-card p { margin:0 0 4px }
.t-card-name { font-family:var(--titre); font-weight:650; letter-spacing:-.035em; font-size:32px; line-height:1.1; margin-bottom:10px !important }

.t-search { padding-bottom:8px }
.t-results ul { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px }
.t-results form { margin:0 }
.t-result { display:flex; flex-direction:column; align-items:flex-start; width:100%; text-align:left; font:inherit; background:var(--fond2); border:1px solid var(--trait); border-radius:16px; padding:14px 18px; cursor:pointer; color:var(--encre); transition:border-color .15s }
.t-result b { font-weight:600; font-size:20px; letter-spacing:-.02em }
.t-result span { color:var(--gris); font-size:16px }
.t-result:hover { border-color:var(--accent2) }
.t-or { display:flex; align-items:center; gap:14px; margin:28px 0 20px; color:var(--gris); font-size:16px }
.t-or::before, .t-or::after { content:''; flex:1; border-top:1px solid var(--trait) }

.t-recap { margin:0; background:var(--fond2); border:1px solid var(--trait); border-radius:var(--rayon); padding:4px 22px }
.t-recap > div { display:grid; grid-template-columns:8em minmax(0,1fr); gap:16px; padding:18px 0; border-bottom:1px solid var(--trait) }
.t-recap > div:last-child { border-bottom:0 }
.t-recap dt { color:var(--gris); font-size:16px; padding-top:4px }
.t-recap dd { margin:0; font-weight:600; display:flex; flex-direction:column }
.t-recap dd span { font-weight:400; color:var(--gris); font-size:16px }
.t-today dd { font-family:var(--titre); font-weight:650; font-size:48px; line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums }
.t-today dd span { font-family:var(--texte); letter-spacing:0; margin-top:8px }
.t-recap + .t-tva { margin:10px 0 0 }
.t-guarantee { font-family:var(--titre); font-weight:600; font-size:22px; line-height:1.3; letter-spacing:-.02em; margin:28px 0; padding:20px 22px; background:var(--accent-doux); border:1px solid rgba(46,123,255,.35); border-radius:18px }
.t-check { display:flex; gap:14px; align-items:flex-start; margin:0 0 16px; font-size:17px; cursor:pointer }
.t-check input { flex:none; width:22px; height:22px; margin:2px 0 0; accent-color:var(--accent) }
.t-check a { color:var(--accent2) }
.t-pay { font-size:18px; padding:18px 36px }
.t-pay-note { margin:20px 0 0; padding-top:16px; border-top:1px solid var(--trait) }
.t-merci .t-q { font-size:clamp(44px, 6vw, 68px) }
.t-merci { padding-top:96px }
.t-merci .t-actions + .t-help { margin-top:18px }

@media (max-width:720px) {
  .t-screen { padding:32px 20px 56px }
  .t-q { font-size:36px; margin-bottom:22px }
  .t-merci .t-q { font-size:44px }
  .t-opt { padding:18px 16px }
  .t-opt-name { font-size:23px }
  .t-help, .t-tva, .t-opt-inc, .t-recap dt, .t-recap dd span, .t-result span, .t-count { font-size:17px }
  .t-row { grid-template-columns:1fr }
  .t-recap { padding:2px 18px }
  .t-recap > div { grid-template-columns:1fr; gap:4px }
  .t-today dd { font-size:42px }
  .t-guarantee { font-size:19px }
  .t-actions .cta { flex:1 1 100%; text-align:center }
  .t-actions .t-ghost { margin:0 auto }
}

/* client space: completion steps */
.t-drop { display:block; padding:34px 20px; text-align:center; font-family:var(--titre); font-weight:600; letter-spacing:-.02em; font-size:22px; color:var(--accent2);
  border:1.5px dashed rgba(91,151,255,.6); border-radius:18px; cursor:pointer; background:var(--accent-doux); transition:background .2s }
.t-drop:hover { background:rgba(46,123,255,.18) }
.t-drop input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden }
.t-drop:focus-within { outline:2px solid var(--accent2); outline-offset:3px }
.t-thumbs { list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px }
.t-thumbs img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; animation:t-pop .35s ease both }
@keyframes t-pop { from { opacity:0; transform:scale(.92) } to { opacity:1; transform:none } }
.t-later { margin:28px 0 0 }
/* The way out of the steps sits apart from the step's own buttons, under a hairline. */
.t-resume { margin:36px 0 0; padding-top:24px; border-top:1px solid var(--trait); line-height:1.6 }
.t-resume span { white-space:nowrap }

/* ---------------------------------------------------------------- client space (/mon-site/<token>) */
.sp-title { margin-bottom:20px }
.sp-notice { margin:0 0 24px; padding:14px 18px; background:var(--accent-doux); border:1px solid rgba(46,123,255,.35); border-radius:14px; font-weight:600 }
.sp-pay { margin-top:12px }
.sp-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* the timeline: a thread of six beads, done ones filled, the current one ringed */
.sp-line { list-style:none; margin:8px 0 40px; padding:0; position:relative }
.sp-line::before { content:''; position:absolute; left:17px; top:18px; bottom:18px; border-left:2px dotted var(--trait2) }
.sp-step { position:relative; display:flex; align-items:center; gap:18px; padding:7px 0; color:var(--gris); animation:up .55s calc(var(--i) * 70ms + 100ms) both }
.sp-dot { position:relative; z-index:1; flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font-weight:600; font-size:15px; background:var(--fond); border:2px solid var(--trait2); color:var(--gris) }
.sp-label { font-size:18px }
.is-done { color:var(--encre) }
.is-done .sp-dot { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700 }
.is-current { color:var(--encre) }
.is-current .sp-dot { border-color:var(--accent2); color:var(--accent2); box-shadow:0 0 0 6px rgba(46,123,255,.16); animation:sp-breathe 2.4s 1s ease-in-out infinite }
.is-current .sp-label { font-family:var(--titre); font-weight:650; letter-spacing:-.03em; font-size:24px; line-height:1.1 }
.sp-step.is-done + .sp-step::before { content:''; position:absolute; left:17px; top:-18px; height:36px; border-left:2px solid var(--accent) }
@keyframes sp-breathe { 50% { box-shadow:0 0 0 11px rgba(46,123,255,.06) } }

/* what to do now */
.sp-now { border-top:1px solid var(--trait); padding-top:28px; animation:up .7s .55s both }
.sp-h { font-size:38px; line-height:1.05; margin-bottom:14px }
/* Which revision this version answers: set large above the title, so the merchant knows where they stand. */
.sp-round { display:inline-block; margin:0 0 14px; padding:6px 14px; border-radius:99px; background:var(--fond3); border:1px solid var(--trait2);
            font-size:18px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent2) }
.sp-after { margin-top:28px; padding-top:20px; border-top:1px solid var(--trait); max-width:34em }
.sp-add span { display:block; margin-top:4px }
.nw { white-space:nowrap }
.sp-meter { color:var(--gris); font-size:16px }
.sp-meter b { font-weight:650; font-size:28px; letter-spacing:-.03em; color:var(--accent2); margin-right:4px }
.sp-block { margin-top:44px; padding-top:24px; border-top:1px solid var(--trait) }
/* Everything sent: the space switches to a second phase, our side of the work, with a quiet "live" pulse. */
.sp-build { margin:0 -24px; padding:26px 24px 22px; background:radial-gradient(80% 120% at 0 0, rgba(46,123,255,.16), transparent 70%), var(--fond2); border-radius:var(--rayon); border:1px solid var(--trait) }
.sp-build-k { display:inline-flex; align-items:center; gap:10px; margin:0 0 14px; padding:5px 12px 5px 10px; border-radius:99px; background:var(--fond3); border:1px solid var(--trait);
              font-size:14px; font-weight:600; color:var(--accent2) }
.sp-pulse { width:9px; height:9px; border-radius:50%; background:var(--accent2); animation:pulse 1.8s ease-out infinite }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(91,151,255,.5) } 70%, 100% { box-shadow:0 0 0 9px rgba(91,151,255,0) } }
.sp-sent { list-style:none; margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--trait); display:grid; grid-template-columns:1fr 1fr; gap:10px 20px }
.sp-sent li { display:flex; align-items:baseline; gap:10px; font-size:16px }
.sp-sent span { flex:none; width:20px; color:var(--accent2); font-weight:700; text-align:center }
.sp-sent :is(.is-later, .is-none), .sp-sent :is(.is-later, .is-none) span { color:var(--gris) }
.sp-sent em { font-style:normal; font-size:14px }
@media (max-width:520px) { .sp-sent { grid-template-columns:1fr } }
.sp-k { font-size:28px; margin-bottom:16px }
.sp-validate { background:var(--fond2); margin-left:-24px; margin-right:-24px; padding:28px 24px 8px; border:1px solid rgba(46,123,255,.45); border-radius:var(--rayon) }
.sp-validate .t-recap { background:none; border:0; padding:0; border-top:1px solid var(--trait); border-radius:0 }
.sp-validate form { margin:22px 0 14px }
.sp-counter { display:inline-block; margin:0 0 18px; padding:6px 14px; border-radius:99px; background:var(--fond3); border:1px solid var(--trait); font-weight:600; font-size:16px }
.sp-photos { border:0; margin:0 0 8px; padding:0 }
.sp-photos .t-thumbs { margin-top:6px }
.sp-pick { position:relative; display:block; cursor:pointer; border-radius:12px }
.sp-pick input { position:absolute; top:6px; left:6px; width:22px; height:22px; margin:0; accent-color:var(--accent); z-index:1 }
.sp-pick:has(input:checked) img { outline:3px solid var(--accent2); outline-offset:2px }
.sp-refund .t-guarantee { margin:8px 0 16px }
.sp-more { margin:36px 0 0 }
.sp-history { margin-top:36px; border-top:1px solid var(--trait); padding-top:14px }
.sp-history summary { cursor:pointer; font-weight:600; padding:6px 0 }
.sp-rev { padding:12px 0; border-bottom:1px solid var(--trait) }
.sp-rev-n { margin:0 0 4px; font-size:14px; font-weight:600; color:var(--accent2) }
.sp-rev-t { margin:0; white-space:pre-line; color:var(--gris) }
.sp-contact { margin-top:40px }
.sp-contact a { color:var(--accent2) }
button[aria-busy="true"] { opacity:.6; cursor:progress }

@media (max-width:720px) {
  .sp-h { font-size:31px }
  .sp-k { font-size:24px }
  .sp-counter, .sp-meter { font-size:17px }
  .is-current .sp-label { font-size:22px }
  .sp-build { margin:0 -8px; padding:22px 18px 20px }
  .sp-validate { margin-left:-8px; margin-right:-8px; padding-left:18px; padding-right:18px }
  .sp-validate .t-pay { width:100% }
}
@media (prefers-reduced-motion:reduce) { .sp-step, .sp-now, .is-current .sp-dot, .t-thumbs img { animation:none } }


/* Phones: everything a merchant has to read is 17 px or more (only the legal footer stays smaller). Last, so it wins. */
@media (max-width:720px) {
  small, .small, .prixbar .note, .o-dep, .o-plus, .g-small, .review figcaption, .ex-note, .ex-trade, .legal-banner,
  .t-for, .t-reco, .t-saved, .t-or, .sp-rev-n { font-size:17px }
}

/* Request action pages (/r/...): merchant answers and client answers, no site navigation */
.f-top { padding-top:24px; padding-bottom:0 }
.f-top .brand { margin:0 }
.f-title { font-size:clamp(32px,5vw,48px); margin-bottom:18px }
.f-status { display:inline-block; padding:4px 12px; border:1px solid var(--trait2); background:var(--fond2); border-radius:99px; font-weight:600; font-size:15px; margin:0 0 20px }
.f-notice { background:var(--accent-doux); border:1px solid rgba(46,123,255,.35); padding:14px 18px; margin:0 0 24px; border-radius:14px; font-weight:600 }
.f-sum { margin:0 0 28px; padding:4px 20px; background:var(--fond2); border:1px solid var(--trait); border-radius:18px }
.f-sum div { display:grid; grid-template-columns:9em minmax(0,1fr); gap:12px; padding:12px 0; border-bottom:1px solid var(--trait) }
.f-sum div:last-child { border-bottom:0 }
.f-sum dt { color:var(--gris); font-weight:600 }
.f-sum dd { margin:0; overflow-wrap:anywhere; white-space:pre-line }
.f-box { border:1px solid var(--trait); border-radius:18px; padding:20px 22px; margin:0 0 14px; background:var(--fond2) }
.f-box.on { border-color:rgba(46,123,255,.7); box-shadow:0 0 0 1px rgba(46,123,255,.35) }
.f-box h2 { font-size:24px; letter-spacing:-.03em; margin-bottom:10px }
.f-box .t-field { margin-bottom:14px }
.t-field input[type=date] { max-width:14em; color-scheme:dark }
.f-row { display:flex; gap:16px; flex-wrap:wrap }
.f-row .t-field { flex:1 1 10em }
.f-back { margin-top:28px }

/* Contact page: who answers on the left, the message form in a raised card on the right */
.ct { display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:start; padding-top:64px; padding-bottom:72px }
.ct-side h1 { max-width:9em; line-height:.98; animation:rise .9s cubic-bezier(.16,1,.3,1) both }
.ct-side .lede { margin:22px 0 0; animation:rise .8s .12s cubic-bezier(.16,1,.3,1) both }
.ct-ways { margin:40px 0 0; animation:up .7s .22s both }
.ct-ways > div { padding:18px 0; border-top:1px solid var(--trait) }
.ct-ways dt { font-size:14px; font-weight:500; color:var(--gris); margin-bottom:4px }
.ct-ways dd { margin:0 }
.ct-ways a { color:var(--encre); text-decoration:none; border-bottom:2px solid var(--accent); overflow-wrap:anywhere }
.ct-ways a:hover { color:var(--accent2) }
.ct-big { font-family:var(--titre); font-weight:650; font-size:36px; line-height:1.15; letter-spacing:-.04em; font-variant-numeric:tabular-nums }
.ct-card { position:relative; background:var(--fond2); border:1px solid var(--trait); border-radius:28px; padding:36px; box-shadow:0 40px 80px -40px rgba(46,123,255,.35); animation:rise .9s .3s cubic-bezier(.16,1,.3,1) both }
.ct-h { font-size:30px; margin-bottom:22px }
.ct-trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.ct-fine { margin:16px 0 0; font-size:15px; color:var(--gris) }
.ct-fine a { color:inherit }
.ct-sent h2 { font-size:36px; margin-bottom:14px; color:var(--accent2) }
@media (max-width:860px) {
  .ct { grid-template-columns:1fr; gap:40px; padding-top:28px }
  .ct-card { padding:26px 20px; border-radius:var(--rayon) }
  .ct-big { font-size:30px }
  .ct .cta { display:block; width:100%; text-align:center }
}

/* ---------- Home: map of Paris, second section ---------- */
.carte-band { --ciel:#0A0A0B; --craie:#F5F5F7; --brume:#9A9AA3; --clair:#5B97FF; --seine:#1C2536; --fil:rgba(255,255,255,.12);
  position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:center; min-height:680px; padding-block:56px;
  background:var(--ciel); color:var(--craie); border-top:1px solid var(--trait); border-bottom:1px solid var(--trait); text-align:left }
#carte { position:absolute; inset:0; width:100%; height:100%; z-index:-2 }
.carte-band::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, var(--ciel) 0, var(--ciel) calc(50% - 90px), rgba(10,10,11,.7) calc(50% - 10px), rgba(10,10,11,0) calc(50% + 90px)) }
.carte-tete, .carte-form { width:100% }
.carte-tete > *, .carte-form > * { max-width:470px }
.carte-tete h2 { font-size:clamp(40px, 4.6vw, 56px); margin-bottom:16px; text-wrap:balance }
.carte-sub { color:var(--brume); margin:0 0 28px }
.chercher { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; margin-bottom:14px }
.chercher label { display:block; font-weight:600; font-size:15px }
.chercher input { display:block; width:100%; margin-top:8px; padding:14px 16px; font:inherit; font-weight:400; font-size:18px; color:var(--encre); background:var(--fond2); border:1px solid var(--trait2); border-radius:14px }
.chercher .cta { padding:15px 24px; background:var(--accent); color:#fff }
.chercher .cta:hover { background:#1A5FDB; box-shadow:0 0 0 4px rgba(46,123,255,.2) }
.carte-band :focus-visible { outline:2px solid var(--clair); outline-offset:2px }
.chercher input:focus { outline:3px solid var(--accent); outline-offset:2px; border-color:var(--accent2) }
.retour { margin-top:8px; min-height:26px; font-size:16px; color:var(--brume) }
.retour p { margin:0 0 6px }
.retour .hors { color:var(--craie) }
.choix { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px }
.choix button { display:block; width:100%; text-align:left; font:inherit; color:var(--craie); background:var(--fond2); border:1px solid var(--trait); border-radius:14px; padding:10px 14px; cursor:pointer; transition:border-color .15s }
.choix b { display:block; font-weight:600; font-size:18px; letter-spacing:-.02em; line-height:1.2 }
.choix span { color:var(--brume); font-size:15px }
.choix button:hover { border-color:var(--accent2) }
.a-la-main { font:inherit; font-size:16px; color:var(--craie); background:none; border:0; padding:8px 0 0; text-decoration:underline; text-decoration-color:var(--trait2); text-underline-offset:4px; cursor:pointer }
.a-la-main:hover { color:var(--clair) }
.main-arr { display:block; margin-top:8px; font-size:16px; color:var(--craie) }
.main-arr select { display:block; margin-top:6px; width:min(280px,100%); padding:11px 12px; font:inherit; color:var(--encre); background:var(--fond2); border:1px solid var(--trait2); border-radius:12px }
.place h3 { font-size:30px; letter-spacing:-.035em; margin:0 0 10px; color:var(--craie); text-wrap:balance }
.place h3 em { font-style:normal; color:var(--clair) }
.place p { color:var(--brume); margin:0 0 18px }
.place-go { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-bottom:14px }
.place .talk { color:var(--craie) }
.place .talk:hover { color:var(--clair) }
.carte-leg { position:absolute; right:max(24px, calc((100% - 1120px) / 2 - 80px)); bottom:24px; width:262px; padding:14px 16px; background:rgba(20,20,22,.9);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--fil); border-radius:16px; font-size:14px; line-height:1.38; color:var(--brume) }
.carte-leg ul { list-style:none; margin:0 0 8px; padding:0; display:grid; gap:5px }
.carte-leg li { display:grid; grid-template-columns:22px 1fr auto; align-items:center; color:var(--craie) }
.carte-leg b { font-weight:600; font-variant-numeric:tabular-nums }
.pt { display:block; justify-self:center; border-radius:50%; background:var(--craie) }
.pt.fort { width:6px; height:6px }
.pt.pale { width:3px; height:3px; opacity:.6 }
.pt.vous { width:13px; height:13px; background:none; border:1.5px solid var(--clair); position:relative }
.pt.vous::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--clair) }
@media (max-width:980px) {
  .carte-tete h2 { font-size:40px }
  .carte-band { min-height:680px }
  .carte-leg { display:none }
}
@media (max-width:720px) {
  .carte-band { display:block; min-height:0; padding-block:0 }
  .carte-band::before { display:none }
  #carte { position:relative; display:block; height:82vw; max-height:440px; z-index:0 }
  .carte-tete { padding-top:56px; padding-bottom:18px }
  .carte-tete > *, .carte-form > * { max-width:none }
  .carte-tete h2 { font-size:34px; margin-bottom:10px }
  .carte-sub { margin:0 }
  .carte-form { padding-top:22px; padding-bottom:34px }
  .chercher { grid-template-columns:minmax(0,1fr) }
  .chercher .cta { text-align:center }
  .carte-leg { display:block; position:static; width:auto; margin:0 20px 40px }
  .place-go .cta { display:block; width:100%; text-align:center; white-space:normal }
}
/* The formulas' intro is the longest band text: a wider column so it stays at three lines on desktop */
.offers .band-head { padding-bottom:44px }
.offers .band-sub { max-width:44em; text-wrap:pretty }
.o-go { font-size:15px }
.t-options + .t-tva { margin-top:14px }