:root{
   /* Le Collectionist, measured from their live CSS on 14/07/2026: #202020 near-black, white,
      #757575 grey, #f7f7f7 wash. Four values. No gold. No cream. The colour comes from the
      PHOTOGRAPHS, and only from the photographs. Our one addition is --acc, the region colour,
      used on the figures. That is the thing we have and they do not: numbers worth colouring. */
   --ink:#ffffff;      /* page */
   --ink2:#f7f7f7;     /* wash / cards */
   --cream:#202020;    /* text, near-black */
   --cream2:#4c4c4c;   /* secondary text */
   --muted:#757575;    /* tertiary */
   --line:#e5e5e5;     /* hairlines */
   --black:#202020;
   --gold:#202020; --gold2:#4c4c4c;   /* legacy names, now just black. Nothing is gold any more. */
   --acc:#202020;--acc2:#4c4c4c}
 *{margin:0;padding:0;box-sizing:border-box}
 html,body{max-width:100%;overflow-x:hidden}
 body{background:var(--ink);color:var(--cream);font-family:'Inter',sans-serif;font-weight:300;line-height:1.62;font-size:16.5px;
   -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:0}
 .wrap{max-width:760px;margin:0 auto;padding:0 26px}
 /* Header: hamburger LEFT, always. No top nav bar. Le Collectionist grammar. */
 header{position:fixed;top:0;left:0;right:0;z-index:80;background:rgba(247,245,239,.90);
   backdrop-filter:blur(14px);border-bottom:1px solid rgba(157,130,72,.16)}
 .hbar{max-width:1400px;margin:0 auto;padding:19px 30px;display:flex;align-items:center;gap:26px}
 .burger{background:none;border:none;cursor:pointer;padding:6px 4px;flex-shrink:0;display:block}
 .burger span{display:block;width:26px;height:1.4px;background:var(--cream);margin:6.5px 0;transition:.25s}
 .burger:hover span{background:var(--gold)}
 .brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--cream);flex-shrink:0}
 .brand .mark{align-self:center;flex-shrink:0}
 .brand .name{font-family:'Inter',sans-serif;font-weight:400;font-size:20px;letter-spacing:2.6px;
   text-indent:2.6px;text-transform:uppercase;white-space:nowrap;line-height:1;color:var(--cream)}
 .brand .ai{font-family:'Inter',sans-serif;font-weight:400;color:var(--gold);font-size:11px;letter-spacing:4.5px;
   text-indent:4.5px;text-transform:uppercase;line-height:1}
 @media(max-width:640px){.brand .name{font-size:23px;letter-spacing:3.6px}.brand .ai{font-size:9.5px;letter-spacing:3px}}
 body{padding-top:80px}
 h1{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(30px,4.4vw,44px);line-height:1.18;margin:48px 0 18px;letter-spacing:.2px}
 h1 em{color:var(--gold);font-style:italic}
 h2{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(24px,3vw,32px);margin:60px 0 18px;line-height:1.25;letter-spacing:.4px}
 p{margin-bottom:18px;color:var(--cream2)}
 .kicker{color:var(--gold);font-size:11px;letter-spacing:4px;text-indent:4px;text-transform:uppercase;margin-top:48px;font-weight:400}
 .lead{font-size:19px;font-weight:300;line-height:1.58;color:var(--cream2);margin-bottom:34px}
 .rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 30px}
 @media(max-width:640px){.rgrid{grid-template-columns:1fr}}
 .rbox{background:var(--ink2);border:1px solid rgba(200,164,92,.20);border-radius:2px;padding:26px 18px;text-align:center}
 .rbox .v{font-family:'Inter',sans-serif;font-weight:500;font-size:26px;color:var(--acc);letter-spacing:-.3px;font-variant-numeric:tabular-nums}
 .rbox .l{font-size:10px;letter-spacing:2.2px;text-indent:2.2px;text-transform:uppercase;color:var(--muted);margin-top:8px}
 .cta{background:var(--ink2);border:1px solid rgba(157,130,72,.24);border-radius:2px;padding:52px 38px;margin:64px 0;text-align:center}
 .cta h3{font-family:'Inter',sans-serif;font-weight:400;font-size:32px;margin-bottom:14px;line-height:1.25}
 .cta h3 em{color:var(--gold);font-style:italic}
 .cta p{color:var(--muted);font-size:16px;font-weight:300;margin-bottom:30px;max-width:440px;margin-left:auto;margin-right:auto}
 .btn{display:inline-block;background:var(--cream);color:var(--ink2);border:1px solid var(--cream);
   text-decoration:none;border-radius:2px;padding:17px 40px;font-size:12px;letter-spacing:2.6px;text-indent:2.6px;
   text-transform:uppercase;font-weight:400;transition:.25s}
 .btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink2)}
 .note{background:rgba(157,130,72,.07);border-left:2px solid var(--gold);padding:26px 28px;border-radius:0;margin:30px 0;font-size:17px}
 .note b{color:var(--gold)}
 .warn{background:rgba(180,90,60,.06);border-left:2px solid #b45a3c;padding:26px 28px;border-radius:0;margin:30px 0;font-size:17px}
 .trust{font-size:13.5px;color:var(--muted);border-top:1px solid rgba(25,23,18,.08);padding-top:14px;margin-top:6px}
 .trust.ok{color:#5f8a6e}
 /* ---- editorial page components (what-we-do, who-we-are, compare). Monochrome by law:
    colour comes only from the hero photograph and from --acc on the figures. ---- */
 .shero{position:relative;margin:26px 0 4px;border-radius:2px;overflow:hidden;aspect-ratio:16/7;background:var(--ink2)}
 .shero img{width:100%;height:100%;object-fit:cover;display:block}
 .shero .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 22px 15px;font-size:10.5px;
   letter-spacing:2.4px;text-indent:2.4px;text-transform:uppercase;color:#fff;
   background:linear-gradient(to top,rgba(0,0,0,.46),transparent)}
 @media(max-width:640px){.shero{aspect-ratio:3/2}}
 .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0 36px}
 @media(max-width:700px){.steps{grid-template-columns:1fr}}
 .step{background:var(--ink2);border:1px solid var(--line);border-top:3px solid var(--acc);border-radius:2px;padding:24px 22px}
 .step .n{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:var(--acc);letter-spacing:1.4px}
 .step .st{font-weight:500;font-size:16px;margin:9px 0 7px;color:var(--cream);letter-spacing:.2px}
 .step p{font-size:14px;color:var(--muted);margin:0;line-height:1.5}
 .pull{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(20px,2.5vw,26px);line-height:1.36;
   color:var(--cream);border-left:3px solid var(--acc);padding:4px 0 4px 24px;margin:36px 0;letter-spacing:.2px}
 .split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}
 @media(max-width:700px){.split{grid-template-columns:1fr}}
 .split .col{border:1px solid var(--line);border-radius:2px;padding:22px 24px}
 .split .col.bad{background:var(--ink2)}
 .split .col.good{background:#fff;border-color:var(--acc)}
 .split .col h4{font-size:10.5px;letter-spacing:2px;text-indent:2px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:12px}
 .split .col.good h4{color:var(--acc)}
 .split .col p{font-size:14.5px;margin:0;color:var(--cream2);line-height:1.55}
 .fcard{background:var(--ink2);border:1px solid var(--line);border-radius:2px;padding:30px 34px;margin:32px 0}
 .fcard h2{margin-top:0}
 @media(max-width:640px){.fcard{padding:24px 22px}}
 .dl{list-style:none}
 .dl li{padding:13px 0;border-bottom:1px solid rgba(25,23,18,.08);display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
 .dl li:last-child{border-bottom:none}
 .dl a{color:var(--cream);text-decoration:none;font-family:'Inter',sans-serif;font-weight:400;font-size:24px}
 .dl a:hover{color:var(--gold)}
 .dl .c{color:var(--muted);font-size:13px;white-space:nowrap}
 /* World map. The land path is fetched once from a CDN and drawn client-side, so the page
    weighs nothing. The destination list below stays in the HTML, so Google and the AI crawlers
    still see every market even with JavaScript off. */
 .mapwrap{position:relative;margin:34px 0 14px}
 #wmap{height:520px;width:100%;border:1px solid var(--line);border-radius:2px;background:#fafafa;z-index:1}
 @media(max-width:720px){#wmap{height:400px}}
 .mapfoot{margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.5}

 /* Leaflet positions every tile absolutely and sizes it in JS. Our global img{max-width:100%}
    overrode that and the tiles spilled out of the container in a staircase. One line. */
 .leaflet-container img,
 .leaflet-container svg{max-width:none!important;max-height:none!important}
 .leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-tile-container{box-sizing:content-box}

 /* Pins. A coloured dot, and the NAME beside it. The old map had dots and nothing else, so it
    told an owner nothing at all. The name is the point. */
 .lvpin{background:none;border:none;white-space:nowrap;display:flex;align-items:center;gap:6px;
   transform:translate(-7px,-7px);cursor:pointer}
 .lvdot{width:11px;height:11px;border-radius:50%;border:2px solid #fff;flex-shrink:0;
   box-shadow:0 0 0 1px rgba(0,0,0,.18)}
 .lvlab{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:500;color:var(--black);
   letter-spacing:.1px;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 6px #fff}
 .lvpin:hover .lvdot{transform:scale(1.3)}
 .lvpin:hover .lvlab{color:var(--gold)}
 .lvlab{display:none}
 .zoomed .lvlab{display:inline}   /* names appear as you zoom in. See the JS. */

 .leaflet-popup-content-wrapper{border-radius:2px;box-shadow:0 4px 22px rgba(0,0,0,.14);padding:0}
 .leaflet-popup-content{margin:0;width:auto!important}
 .lvpop{padding:15px 17px;font-family:'Inter',sans-serif}
 .lvpn{font-size:16px;font-weight:500;color:var(--black);margin-bottom:6px}
 .lvpv{font-size:17px;font-weight:600;color:var(--black);letter-spacing:-.2px;font-variant-numeric:tabular-nums}
 .lvps{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-top:3px}
 .lvpa{display:inline-block;margin-top:11px;font-size:12px;font-weight:500;letter-spacing:.6px;
   text-transform:uppercase;color:var(--black);text-decoration:none;border-bottom:1px solid var(--black);padding-bottom:2px}
 .lvpa:hover{color:var(--gold);border-color:var(--gold)}
 .leaflet-container a.leaflet-popup-close-button{display:none}
 .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.8)}
 .lvzoom button{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:.6px;
   text-transform:uppercase;background:#fff;color:var(--black);border:1px solid rgba(0,0,0,.2);
   border-radius:2px;padding:7px 12px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.12)}
 .lvzoom button:hover{background:var(--black);color:#fff;border-color:var(--black)}
 .lvtip{background:var(--black);color:#fff;border:none;border-radius:2px;padding:5px 9px;
   font-family:'Inter',sans-serif;font-size:12px;font-weight:400;box-shadow:none;white-space:nowrap}
 .lvtip:before{border-top-color:var(--black)!important}
 .mk:hover{fill:var(--cream)}
 .mlab{font-family:'Inter',sans-serif;font-size:9px;fill:var(--cream2);pointer-events:none;opacity:0;transition:.15s}
 /* Instant filter. On a phone, 39 cards is a lot of thumb. Let the owner type two letters. */
 .dfilter{position:relative;margin:26px 0 6px}
 .dfilter input{width:100%;padding:18px 18px 18px 46px;font-family:'Inter',sans-serif;font-weight:300;
   font-size:17px;color:var(--black);background:var(--ink2);border:1px solid rgba(14,13,9,.16);border-radius:2px}
 .dfilter input:focus{outline:none;border-color:var(--gold)}
 .dfilter:before{content:'';position:absolute;left:17px;top:50%;width:15px;height:15px;margin-top:-9px;
   border:1.6px solid var(--muted);border-radius:50%}
 .dfilter:after{content:'';position:absolute;left:29px;top:50%;width:7px;height:1.6px;margin-top:3px;
   background:var(--muted);transform:rotate(45deg)}
 .rgn.hide{display:none}
 .card.hide{display:none}

 /* Region blocks with photographs. A flat list of 39 links was not good enough. */
 .rgn{margin:54px 0 0}
 .rgn h2{margin:0 0 6px}
 .rgn .sub{color:var(--muted);font-size:14px;margin-bottom:22px}
 .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
 @media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
 @media(max-width:560px){.cards{grid-template-columns:1fr}}
 .card{position:relative;display:block;text-decoration:none;overflow:hidden;border-radius:2px;
   background:var(--ink2);border:1px solid rgba(157,130,72,.18)}
 .card .ph{position:relative;aspect-ratio:3/2;overflow:hidden;background:#e7e2d5}
 .card .ph img{width:100%;height:100%;object-fit:cover;object-position:center 52%;transition:transform .6s ease}
 .card:hover .ph img{transform:scale(1.045)}
 .card .noph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
   font-family:'Inter',sans-serif;font-size:34px;color:rgba(157,130,72,.45)}
 .card .cb{padding:15px 16px 17px}
 .card .cn{font-family:'Inter',sans-serif;font-weight:400;font-size:23px;color:var(--cream);line-height:1.2}
 .card .cc{font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:1.4px;text-transform:uppercase}
 .card .cv{font-size:12.5px;color:var(--cream2);margin-top:8px;letter-spacing:.3px}
 .card .cflag{position:absolute;top:10px;left:10px;background:rgba(25,23,18,.72);color:#e6d9b8;
   font-size:9px;letter-spacing:1.6px;text-transform:uppercase;padding:4px 8px;border-radius:2px}
 /* COMPARISON HERO. Rebuilt 15/07/2026. Alexandre: the comparison pages "read like a newspaper.
    Too much text, no images, no icons." He is right. So the page now OPENS with the two markets
    face to face, as photographs, each carrying its own income, and the verdict in one big line.
    The prose that was a wall of h2 blocks is folded into accordions, exactly like the destination
    pages. Google still reads every word; the visitor is not made to wade through it. */
 .vs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:30px 0 0;border:1px solid var(--line);border-radius:2px;overflow:hidden;position:relative}
 .vspanel{position:relative;height:300px;overflow:hidden;display:block;text-decoration:none}
 .vspanel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 .vspanel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,20,.15) 0%,rgba(20,20,20,.05) 40%,rgba(20,20,20,.82) 100%)}
 .vspanel .vin{position:absolute;inset:auto 0 0 0;z-index:2;padding:22px 22px 20px;color:#fff}
 .vspanel .vn{font-size:20px;font-weight:500;letter-spacing:.2px;margin-bottom:6px;text-shadow:0 1px 12px rgba(0,0,0,.4)}
 .vspanel .vv{font-size:24px;font-weight:600;letter-spacing:-.4px;font-variant-numeric:tabular-nums;text-shadow:0 1px 12px rgba(0,0,0,.5)}
 .vspanel .vl{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;opacity:.8;margin-top:3px}
 .vspanel.hi .vin{border-bottom:3px solid #fff}
 .vspanel .vtag{position:absolute;top:14px;left:14px;z-index:2;background:#fff;color:var(--black);font-size:10px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;padding:5px 10px;border-radius:2px}
 .vsmid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--black);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;letter-spacing:.5px;box-shadow:0 2px 14px rgba(0,0,0,.25)}
 @media(max-width:600px){.vspanel{height:230px}.vspanel .vv{font-size:21px}.vsmid{width:38px;height:38px;font-size:11px}}
 .vsverdict{margin:26px 0 8px;text-align:center}
 .vsverdict .big{font-size:clamp(24px,4vw,34px);font-weight:500;line-height:1.2;color:var(--black);letter-spacing:-.3px}
 .vsverdict .big b{color:var(--acc);font-weight:600}
 .vsverdict .sub{font-size:15px;color:var(--muted);margin-top:12px;line-height:1.5;max-width:560px;margin-left:auto;margin-right:auto}

 .cut{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0 22px}
 @media(max-width:640px){.cut{grid-template-columns:1fr}}
 .cbox{background:var(--ink2);border:1px solid rgba(200,164,92,.20);border-radius:2px;padding:24px 16px;text-align:center}
 .cbox.bad{border-color:rgba(180,90,60,.42);background:rgba(180,90,60,.05)}
 .cbox .v{font-family:'Inter',sans-serif;font-weight:400;font-size:27px;color:var(--gold);letter-spacing:.3px}
 .cbox.bad .v{color:#b45a3c}
 .cbox .l{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:8px;line-height:1.5}
 .cbox .ci{width:26px;height:26px;color:var(--acc);margin:0 auto 12px;display:block}
 .cbox.bad .ci{color:#b45a3c}
 .lad{width:100%;border-collapse:collapse;margin:24px 0 18px;font-size:15px}
 .lad th{background:var(--cream);color:var(--ink2);font-weight:400;font-size:10px;letter-spacing:1.6px;
   text-transform:uppercase;padding:11px 8px;text-align:right}
 .lad th:first-child{text-align:left}
 .lad td{padding:11px 8px;border-bottom:1px solid rgba(25,23,18,.08);text-align:right}
 .lad td:first-child{text-align:left;color:var(--cream)}
 .lad tr.sec td{background:rgba(157,130,72,.07);font-family:'Inter',sans-serif;font-size:19px;
   color:var(--gold);letter-spacing:.4px;padding:12px 8px}
 .lad tr:hover td{background:rgba(157,130,72,.05)}
 .lad .g{color:var(--gold)}
 @media(max-width:640px){.lad{font-size:13px}.lad th,.lad td{padding:9px 4px}.lad th{font-size:8.5px;letter-spacing:.8px}}
 .faq{margin-top:8px}
 .faq .q{font-family:'Inter',sans-serif;font-weight:500;font-size:23px;color:var(--cream);
   margin:34px 0 10px;line-height:1.3}
 .faq .a{color:var(--cream2);margin-bottom:0}
 .crumb{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin:26px 0 0}
 .crumb a{color:var(--muted);text-decoration:none}
 .crumb a:hover{color:var(--gold)}
 .crumb span{margin:0 7px;color:rgba(110,104,88,.5)}
 .disc{font-size:12.5px;color:var(--muted);margin:40px 0 20px}

 /* Comparison table. Added 14/07/2026. Squared corners, no zebra stripes, no chrome.
    The table IS the content on these pages, so it gets to be quiet and legible. */
 .cmp{width:100%;border-collapse:collapse;margin:30px 0 12px;font-size:15px}
 .cmp th,.cmp td{padding:14px 12px;border-bottom:1px solid rgba(25,23,18,.09);text-align:right}
 .cmp th:first-child,.cmp td:first-child{text-align:left;color:var(--muted);font-weight:400;
   font-size:13px;letter-spacing:.3px}
 .cmp thead th{font-family:'Inter',sans-serif;font-weight:400;font-size:23px;color:var(--cream);
   border-bottom:1px solid rgba(157,130,72,.4)}
 .cmp thead th a{color:var(--cream);text-decoration:none}
 .cmp thead th a:hover{color:var(--gold)}
 .cmp tbody tr.key td{color:var(--gold);font-size:17px}
 .cmp tbody tr.key td:first-child{color:var(--muted);font-size:13px}
 .cmp tbody tr.neg td:not(:first-child){color:#b45a3c}
 .cmp td.win{position:relative}
 .cmp td.win:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);opacity:.55}
 @media(max-width:640px){.cmp{font-size:13.5px}.cmp th,.cmp td{padding:11px 6px}
   .cmp thead th{font-size:19px}.cmp th:first-child,.cmp td:first-child{font-size:11.5px}}
 .cmpwrap{overflow-x:auto}
 .footdest{max-width:1120px;margin:70px auto 0;padding:34px 26px 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center}
 .footdest a{color:var(--muted);text-decoration:none;font-size:12.5px;letter-spacing:.2px}
 .footdest a:hover{color:var(--cream)}
 footer{text-align:center;padding:44px 0 70px;color:var(--muted);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;border-top:1px solid rgba(157,130,72,.13);margin-top:34px}
 footer a{color:inherit}
 @media(max-width:720px){.wrap{padding-left:22px;padding-right:22px}}

 /* THE ANSWER, FIRST. Alexandre, 14/07/2026: "les gens ne lisent plus". He is right, and the
    competitors prove it: Le Collectionist puts a photo and a search box above the fold and nothing
    else. Meilleurtaux puts ONE number in colour and a row of buttons. So the destination page now
    opens with the figure the owner came for, at 56px, in the region colour, and the prose waits. */
 .answer{margin:34px 0 8px;text-align:center}
 .answer .al{font-size:11px;letter-spacing:3.4px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
 .answer .av{font-family:'Inter',sans-serif;font-weight:500;font-size:clamp(34px,9vw,54px);
   line-height:1.06;color:var(--acc);letter-spacing:-.8px;font-variant-numeric:tabular-nums}
 .answer .as{font-size:15px;color:var(--muted);margin-top:10px}
 .answer .ab{display:inline-block;margin-top:24px;background:var(--black);color:#fff;text-decoration:none;
   padding:17px 38px;font-size:13px;font-weight:400;letter-spacing:1.4px;text-transform:uppercase;border-radius:2px}
 .answer .ab:hover{background:#000}

 /* Long prose folds away. It is still in the HTML, so Google reads every word of it, but the owner
    is not made to wade through 900 words to reach a button. */
 .fold{border-top:1px solid var(--line);margin-top:0}
 .fold summary{cursor:pointer;list-style:none;padding:20px 2px;font-family:'Inter',sans-serif;
   font-size:17px;font-weight:400;color:var(--black);display:flex;align-items:center;justify-content:space-between;gap:16px}
 .fold summary::-webkit-details-marker{display:none}
 .fold summary:after{content:'+';color:var(--acc);font-size:22px;font-weight:300;flex-shrink:0}
 .fold[open] summary:after{content:'–'}
 .fold[open] summary{color:var(--acc)}
 .fold .fc{padding-bottom:14px}
 .fold .fc p{margin-bottom:16px}
 b,strong{font-weight:500;color:var(--black)}

 /* ACCENT. Every page sets --acc from its region. These rules simply consume it. */
 .kicker{color:var(--acc)}
 h1 em,h2 em{color:var(--acc)}
 .rbox{background:var(--ink2);border:1px solid color-mix(in srgb,var(--acc) 26%,transparent);
   box-shadow:0 1px 0 color-mix(in srgb,var(--acc) 12%,transparent)}
 .rbox .v{color:var(--acc)}
 .note{background:color-mix(in srgb,var(--acc) 6%,transparent);border-left:3px solid var(--acc)}
 .note b{color:var(--acc)}
 .cta{background:linear-gradient(165deg,var(--ink2) 0%,color-mix(in srgb,var(--acc) 7%,var(--ink2)) 100%);
   border:1px solid color-mix(in srgb,var(--acc) 22%,transparent)}
 .cta h3 em{color:var(--acc)}
 .btn:hover{background:var(--acc);border-color:var(--acc);color:#fffdf7}
 .lad thead th{background:color-mix(in srgb,var(--acc) 10%,transparent);color:var(--acc)}
 .lad tbody tr:hover{background:color-mix(in srgb,var(--acc) 5%,transparent)}
 .lad .lmore{font-size:13px;color:var(--muted);line-height:1.5;padding-top:14px;background:none!important}
 a{color:var(--acc)}
 .sticky{background:var(--acc)!important;border-color:var(--acc)!important}
 .sticky a,.sticky .sbtn{color:#fffdf7!important}

 /* full-bleed hero. Mobile first: Alexandre says 95% of owners arrive on a phone, and he wants
    the first screen to feel like a reel, not a document. So the hero is TALL on mobile, not short. */
 .hero{position:relative;height:min(70vh,640px);min-height:380px;overflow:hidden;background:#202020;margin-top:-80px;padding-top:80px}
 .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;
   transform:scale(1.03);transition:transform 12s ease-out}
 .hero:hover img{transform:scale(1.09)}
 .hero::after{content:"";position:absolute;inset:0;
   background:linear-gradient(180deg,rgba(25,23,18,.34) 0%,rgba(25,23,18,.04) 34%,rgba(25,23,18,.30) 62%,rgba(25,23,18,.88) 100%)}
 /* a whisper of the region colour laid over the photograph, so the page and the place agree */
 .hero::before{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:soft-light;opacity:.5;
   background:linear-gradient(200deg,var(--acc2) 0%,transparent 55%)}
 .hero .hin{position:absolute;inset:auto 0 0 0;z-index:2;padding:0 24px 46px;max-width:1080px;margin:0 auto;left:0;right:0}
 .hero .hk{color:rgba(255,255,255,.82);font-size:11px;letter-spacing:4px;text-indent:4px;text-transform:uppercase;margin-bottom:16px;font-weight:400}
 .hero h1{color:#fff;margin:0;font-weight:400;font-size:clamp(36px,5.4vw,58px);line-height:1.12;text-shadow:0 2px 40px rgba(0,0,0,.45)}
 .hero h1 em{color:#fff;font-weight:500}
 .haslead{margin-top:46px}
 @media(max-width:720px){
   .hero{height:64vh;min-height:400px}
   .hero .hin{padding:0 22px 36px}
   .hero h1{font-size:clamp(32px,8.4vw,42px)}
 }

 /* Full-screen menu behind the hamburger. Everything lives here. */
 .mmenu{display:none;position:fixed;inset:0;background:var(--ink2);z-index:200;flex-direction:column;
   padding:96px 40px 40px}
 .mmenu.open{display:flex;animation:mfade .3s ease}
 @keyframes mfade{from{opacity:0}to{opacity:1}}
 .mmenu a.ml{color:var(--cream);text-decoration:none;font-family:'Inter',sans-serif;
   font-size:clamp(30px,4.4vw,44px);font-weight:400;padding:22px 0;
   border-bottom:1px solid rgba(25,23,18,.07);max-width:660px;transition:.22s}
 .mmenu a.ml:hover{color:var(--gold);padding-left:12px}
 .mclose{position:absolute;top:28px;right:34px;font-size:32px;line-height:1;background:none;border:none;
   color:var(--cream);cursor:pointer}
 .mclose:hover{color:var(--gold)}
 .mfoot{margin-top:auto;padding-top:30px;border-top:1px solid rgba(25,23,18,.08);max-width:640px}
 .mfoot .lbl{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
 .mfoot a{display:inline-block;color:var(--cream2);text-decoration:none;font-size:16px;margin:0 20px 10px 0;
   border-bottom:1px solid transparent}
 .mfoot a:hover,.mfoot a.on{color:var(--gold);border-bottom-color:var(--gold)}

 /* Language, bottom-left, behind a globe. Discreet until you want it. */
 .langbar{position:fixed;left:20px;bottom:20px;z-index:90}
 .globe{width:44px;height:44px;border-radius:50%;background:rgba(255,254,250,.95);backdrop-filter:blur(10px);
   border:1px solid rgba(157,130,72,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;
   box-shadow:0 6px 24px rgba(60,45,15,.14);transition:.2s;padding:0}
 .globe:hover{border-color:var(--gold);transform:translateY(-2px)}
 .globe svg{width:21px;height:21px;stroke:var(--cream2);fill:none;stroke-width:1.4}
 .globe:hover svg{stroke:var(--gold)}
 .lpop{display:none;position:absolute;left:0;bottom:calc(100% + 10px);background:var(--ink2);
   border:1px solid rgba(157,130,72,.3);border-radius:12px;overflow:hidden;min-width:172px;
   box-shadow:0 18px 50px rgba(60,45,15,.18)}
 .lpop.open{display:block}
 .lpop .lh{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);
   padding:13px 18px 8px;border-bottom:1px solid rgba(25,23,18,.06)}
 .lpop a{display:block;padding:11px 18px;color:var(--cream2);text-decoration:none;font-size:15px}
 .lpop a:hover{background:rgba(200,164,92,.13);color:var(--gold)}
 .lpop a.on{color:var(--gold);font-weight:500}

 /* =====================================================================
    MOBILE. Rebuilt 14/07/2026 after Alexandre's verdict: "I do not want to
    read this on a phone." He is right. A luxury audience is not an old
    audience. They scroll. So: bigger pictures, bigger numbers, less prose
    above the fold, a thumb-reachable call to action that never leaves.
    ===================================================================== */
 @media(max-width:720px){
   body{font-size:17px;line-height:1.72;padding-top:64px;padding-bottom:76px}
   .wrap{padding-left:20px;padding-right:20px}

   /* Header: shorter, and the hamburger is a real 44px touch target. */
   .hbar{padding:13px 16px;gap:12px}
   .burger{padding:10px 8px;margin-left:-8px}
   .burger span{width:24px;margin:5.5px 0}
   .brand .mark{width:34px;height:34px}
   .brand .name{font-size:21px;letter-spacing:3px;text-indent:3px}
   .brand .ai{font-size:9px;letter-spacing:2.4px;text-indent:2.4px}

   /* Hero: tall, like a story. Photograph first, words second. */
   .hero{height:66vh;min-height:420px;margin-top:-64px;padding-top:64px}
   .hero::after{background:linear-gradient(180deg,rgba(25,23,18,.34) 0%,rgba(25,23,18,.06) 30%,rgba(25,23,18,.86) 100%)}
   .hero .hin{padding:0 20px 34px}
   .hero .hk{font-size:10px;letter-spacing:3px}
   h1{font-size:34px;line-height:1.14;margin:34px 0 16px}
   .hero h1{font-size:36px}
   h2{font-size:27px;margin:46px 0 14px}
   .lead{font-size:19px;line-height:1.62;margin-bottom:28px}
   p{margin-bottom:18px}

   /* THE NUMBERS. These were stacking into a column three screens long.
      Three across, big and gold. This is what the visitor came for. */
   .rgrid,.cut{grid-template-columns:repeat(3,1fr);gap:7px;margin:22px 0}
   .rbox,.cbox{padding:15px 5px;border-radius:2px}
   .rbox .v,.cbox .v{font-size:19px;letter-spacing:-.2px}
   .rbox .l,.cbox .l{font-size:8.5px;letter-spacing:.8px;margin-top:6px;line-height:1.35}

   .note,.warn{padding:20px 18px;font-size:16px;border-left-width:3px}
   .trust{font-size:12px}

   /* Cards: full-bleed photograph, big name. Scrollable, like a feed. */
   .cards{gap:14px}
   .card .ph{aspect-ratio:16/10}
   .card .cn{font-size:24px}
   .card .cv{font-size:13px}
   .rgn{margin-top:40px}
   .rgn h2{font-size:26px}

   /* Map: taller viewport slice so the pins are actually tappable. */

   .faq .q{font-size:21px;margin:26px 0 8px}
   .faq .a{font-size:16px}
   .crumb{font-size:10px;letter-spacing:1.2px}

   .cta{padding:36px 22px;margin:48px 0}
   .cta h3{font-size:27px}
   .cta p{font-size:15px}
   .btn{padding:16px 30px;font-size:11.5px;letter-spacing:2px}

   .dl a{font-size:20px}
   .dl li{padding:15px 0}
   .dl .c{font-size:12px}

   footer{padding:34px 0 30px;font-size:10px;letter-spacing:1.6px}

   /* The floating language globe was sitting on top of the text and on top of the
      sticky bar. It is redundant on a phone: the language list is already inside the
      hamburger menu. So it goes. */
   .langbar{display:none}
 }

 /* Sticky call to action. On a phone the estimator is three screens away,
    and nobody scrolls back up. Now it is always one thumb away. */
 .sticky{display:none}
 @media(max-width:720px){
   .sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;
     background:rgba(247,245,239,.94);backdrop-filter:blur(12px);
     border-top:1px solid rgba(157,130,72,.22);padding:10px 14px 12px}
   .sticky a{display:block;text-align:center;background:var(--cream);color:var(--ink2);
     text-decoration:none;border-radius:2px;padding:15px 10px;font-size:12px;
     letter-spacing:2.4px;text-transform:uppercase;font-weight:400}
 }
 @media(max-width:380px){
   .rbox .v,.cbox .v{font-size:16.5px}
   .rbox .l,.cbox .l{font-size:8px}
   h1,.hero h1{font-size:31px}
 }
 /* Blog / Journal, added 15/07/2026. Same restraint: photograph, figures, air. */
 .bhero{width:100%;height:auto;border-radius:2px;margin:8px 0 30px;display:block}
 .blist{display:grid;grid-template-columns:1fr;gap:2px;margin:30px 0 10px}
 .bcard{display:grid;grid-template-columns:200px 1fr;gap:0;text-decoration:none;color:inherit;
   border:1px solid var(--line);border-radius:2px;overflow:hidden;transition:border-color .2s}
 .bcard:hover{border-color:var(--cream)}
 .bcard .bimg{overflow:hidden}
 .bcard .bimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
 .bcard:hover .bimg img{transform:scale(1.04)}
 .bcard .bbody{padding:26px 28px}
 .bkick{color:var(--acc);font-size:10px;letter-spacing:2.4px;text-transform:uppercase;margin-bottom:12px}
 .bcard h2{font-size:21px;font-weight:400;line-height:1.28;margin:0 0 10px}
 .bcard p{font-size:14.5px;color:var(--cream2);line-height:1.5;margin:0 0 14px}
 .bread{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--acc);font-weight:500}
 @media(max-width:640px){
   .bcard{grid-template-columns:1fr}
   .bcard .bimg{height:190px}
   .bcard .bbody{padding:22px 22px}
   .bcard h2{font-size:19px}
 }