/* ===== UNI PRESTIGE — page styles ===== */

/* Tokens: brand values, do not change */
:root{
  --eerie:#1c2321;
  --deep:#141a18;
  --black:#0a0d0c;
  --card:#232b28;
  --line:#333d3a;
  --sea:#98d2eb;
  --soft:#e1f2fe;
  --txt:#e8edeb;
  --mut:#9fb4ad;
  --seadark:#3d7ea6;

  /* Derived: --sea opacities only */
  --sea-06:rgba(152,210,235,.06);
  --sea-12:rgba(152,210,235,.12);
  --sea-26:rgba(152,210,235,.26);
  --sea-45:rgba(152,210,235,.45);

  --hd-h:76px;

  /* Shared radii, curves and durations */
  --r-card:20px;          /* Cards: faces, references, off-market, form */
  --r-soft:14px;          /* Thumbnails and medallions */
  --e-out:cubic-bezier(.2,.7,.2,1);
  --e-sweep:cubic-bezier(.65,.05,.2,1);
  --t-rvl:1.05s;          /* Entrance reveal */
  --t-hover:.42s;         /* Hover response */
  --ico:24px;             /* Line icons */
  --ico-w:1.2;            /* Same stroke as the .gmark icons */

  --serif:'Playfair Display','Didot','Bodoni MT',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk','Helvetica Neue',Helvetica,Arial,'Segoe UI',sans-serif;

  /* Design settings (admin > Design): when they are changed, the page carries a <style> that replaces the values below */
  --k:1;--k-hero:1;--k-section:1;--k-carte:1;--k-intro:1;--k-texte:1;--k-petit:1;--k-bouton:1;--k-menu:1;--k-chiffres:1;
  --fw-title:400;                      /* weight of the titles (the hero is one step lighter) */
  --fw-text:300;                       /* weight of the text of cards, lists, answers */
  --btn-r:999px;--btn-br:50%;          /* shape of the buttons: pill (default) or rounded */

  /* One type scale for the whole site: every text takes one of these, so the same kind of text has the same size everywhere */
  --fs-xs:calc(12px * var(--k) * var(--k-petit));                          /* labels in capitals, meta, small print */
  --fs-s:calc(clamp(13.5px,0.95vw,14.5px) * var(--k) * var(--k-texte));             /* captions, notes, secondary lines */
  --fs-m:calc(clamp(15px,1.1vw,17px) * var(--k) * var(--k-texte));           /* the text of cards, lists, answers, forms */
  --fs-l:calc(clamp(15px,1.1vw,17px) * var(--k) * var(--k-intro));           /* introductions: the line under a title (the same size as the text of cards, so every text under a title is one size) */
  --fs-h3:calc(clamp(18px,1.4vw,20px) * var(--k) * var(--k-carte));          /* titles of cards, questions, names */
  --fs-h2:calc(clamp(28px,3.3vw,50px) * var(--k) * var(--k-section));        /* titles of sections */
  --fs-h1:calc(clamp(46px,min(6.6vw,10.4vh),118px) * var(--k) * var(--k-hero)); /* the title of the hero */
  --fs-num:calc(clamp(19px,1.5vw,22px) * var(--k) * var(--k-chiffres));      /* key figures */
  --fs-btn:calc(clamp(13px,0.95vw,14px) * var(--k) * var(--k-bouton));        /* buttons, in capitals */
  --fs-nav:calc(clamp(16px,1.15vw,18px) * var(--k) * var(--k-menu));         /* the way around in the header */
}

/* Hanken Grotesk (variable, SIL OFL), self-hosted like Playfair Display */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2')}
/* The two other choices of the Design settings */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-tight-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/manrope-latin-wght-normal.woff2) format('woff2')}
/* Playfair Display, self-hosted (no request to Google before consent) */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 500;font-display:swap;
  src:url(../fonts/playfair-display-latin.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 500;font-display:swap;
  src:url(../fonts/playfair-display-italic-latin.woff2) format('woff2')}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
/* No scroll snapping: it made the footer unreachable on trackpads */
html{scroll-behavior:smooth;scroll-padding-top:var(--hd-h)}
body{font-family:var(--sans);color:var(--txt);background:var(--deep);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.pre-lock{overflow:hidden}
a{text-decoration:none;color:inherit}
button{font-family:inherit;color:inherit}
img,video{max-width:100%}
::selection{background:var(--sea);color:var(--eerie)}
:focus-visible{outline:2px solid var(--sea);outline-offset:3px;border-radius:3px}

/* ===== TYPOGRAPHY ===== */
/* Text never ends on a lonely word: titles and short notes are balanced, paragraphs avoid a last line of one word */
p,li,dd,figcaption,blockquote{text-wrap:pretty}
/* a small word and what it goes with (see "TITLES REVEALED WORD BY WORD" in main.js) never break apart */
.gw{white-space:nowrap}
/* the short descriptions: lines of about the same length, never one lonely word at the end */
.rd,.scard p,.ctp-step p,.fq-a p,#recherche li,.stat>span,.gb p,.adm .a p,.pc-perks p{text-wrap:balance}
h1,h2,h3,h4,h5,h6,.legende,.fine,.blog-card__excerpt,.blog-meta,.crumbs{text-wrap:balance}

h1{font-size:calc(clamp(36.8px,5.2vw,77.3px) * var(--k) * var(--k-section));font-weight:var(--fw-title);letter-spacing:-.02em;line-height:1.06;color:#fff}
h2{font-size:var(--fs-h2);font-weight:var(--fw-title);letter-spacing:-.015em;line-height:1.14;color:#fff}
h1 b,h2 b{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--sea);letter-spacing:-.01em}
.lead{font-size:var(--fs-l);line-height:1.6;color:var(--mut);max-width:56ch;margin-top:16px;font-weight:var(--fw-text)}
.legende{font-size:var(--fs-xs);color:#8a9692;margin-top:16px;font-style:italic}
/* The h2 opens each section (no eyebrow) */

/* ===== LAYOUT — content centred, rail overlays with no width ===== */
.sec{position:relative;padding:clamp(56px,7.5vh,104px) 0}
/* Each section fills the screen */
.sec--fit{min-height:100svh;display:flex;align-items:center}
.sec--fit>.wrap{width:100%}
.band{padding:0}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* ===== BUTTONS: see the block "BUTTONS — one language" at the end of this file ===== */

/* ===== PRELOADER ===== */
#pre{position:fixed;inset:0;z-index:3000;background:var(--black);display:grid;place-items:center;
  overflow:hidden;transition:opacity .5s ease,visibility .5s}
#pre.off{opacity:0;visibility:hidden;pointer-events:none}
.pre-mesh{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.pre-mesh span{position:absolute;width:min(560px,86vw);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--sea-12);transform:scale(.2);opacity:0;
  animation:pre-ring 3.1s cubic-bezier(.16,1,.3,1) forwards}
.pre-mesh span:nth-child(2){animation-delay:.16s}
.pre-mesh span:nth-child(3){animation-delay:.32s}
.pre-mesh span:nth-child(4){animation-delay:.48s}
.pre-mesh span:nth-child(5){animation-delay:.64s}
@keyframes pre-ring{0%{transform:scale(.18);opacity:0}28%{opacity:.9}100%{transform:scale(1.5);opacity:0}}
.pre-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px}
.pre-in img{height:58px;opacity:0;animation:pre-up 1s cubic-bezier(.16,1,.3,1) forwards .2s}
.pre-word{font-size:var(--fs-xs);letter-spacing:.56em;text-transform:uppercase;color:var(--sea);font-weight:600;
  margin-left:.56em;opacity:0;animation:pre-up 1s cubic-bezier(.16,1,.3,1) forwards .7s}
.pre-bar{display:block;width:150px;height:1px;background:var(--line);overflow:hidden;opacity:0;
  animation:pre-up .7s ease forwards 1s}
.pre-bar i{display:block;height:100%;width:100%;background:var(--sea);transform:scaleX(0);transform-origin:left;
  animation:pre-fill 1.9s cubic-bezier(.5,0,.2,1) forwards 1.15s}
@keyframes pre-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pre-fill{to{transform:scaleX(1)}}
.pre-curtain{position:absolute;inset:0;background:var(--deep);transform:scaleY(0);transform-origin:bottom;z-index:3}
#pre.leaving .pre-curtain{animation:pre-curt .7s cubic-bezier(.65,0,.35,1) forwards}
@keyframes pre-curt{
  0%{transform:scaleY(0);transform-origin:bottom}
  55%{transform:scaleY(1);transform-origin:bottom}
  56%{transform:scaleY(1);transform-origin:top}
  100%{transform:scaleY(0);transform-origin:top}
}

/* ===== PROGRESS RAIL — overlay, no layout width ===== */
#rail{position:fixed;left:0;top:0;bottom:0;width:40px;z-index:900;pointer-events:none}
.rail-line{position:absolute;left:19px;top:17vh;bottom:17vh;width:1px;background:var(--line)}
.rail-line i{position:absolute;left:0;top:0;width:1px;height:0;background:var(--sea);
  box-shadow:0 0 8px var(--sea-45)}
/* The padding widens the hover area a little without moving the dots. It stays narrow on purpose: the labels open when you
   reach for the dots at the edge of the screen, not when you hover what sits near it (the first face of the hero). */
#railticks{position:absolute;left:15px;top:17vh;bottom:17vh;list-style:none;
  display:flex;flex-direction:column;justify-content:space-between;pointer-events:auto;
  padding-right:14px}
#railticks a{display:block;position:relative;width:9px;height:9px}
#railticks a::before{content:"";position:absolute;left:3px;top:3px;width:3px;height:3px;border-radius:50%;
  background:#3f4a47;transition:background .3s,width .3s,height .3s,left .3s,top .3s}
#railticks a:hover::before{background:var(--sea)}
/* Glow under the hovered item */
#railticks a::after{content:"";position:absolute;left:-13px;top:-13px;width:35px;height:35px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(152,210,235,.55),rgba(152,210,235,.12) 45%,transparent 70%);
  opacity:0;transform:scale(.5);
  transition:opacity .3s ease,transform .35s var(--e-out)}
#railticks a:hover::after,#railticks a:focus-visible::after,#railticks li.on a::after{
  opacity:1;transform:scale(1)}
#railticks li.on a::before{background:var(--sea);width:5px;height:5px;left:2px;top:2px;
  box-shadow:0 0 8px var(--sea-45)}
/* Labels unfold top to bottom on hover, fold at once on leave */
#railticks span{position:absolute;left:17px;top:50%;white-space:nowrap;
  font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);font-weight:600;
  background:radial-gradient(130% 170% at 0% 50%,rgba(152,210,235,.22),rgba(152,210,235,.07) 52%,transparent 78%);
  padding:6px 16px 6px 10px;border-radius:999px;
  text-shadow:0 1px 9px rgba(10,13,12,.95);
  opacity:0;transform:translateY(-50%) translateX(-8px);pointer-events:auto;
  transition:opacity .26s ease,transform .32s cubic-bezier(.16,1,.3,1),color .26s;
  transition-delay:0ms}
#railticks:hover span,#railticks:focus-within span{
  opacity:1;transform:translateY(-50%) translateX(0);transition-delay:var(--d,0ms)}
#railticks:hover a:hover span,#railticks a:focus-visible span{color:var(--sea)}
#railticks:hover li.on span{color:var(--sea)}
@media(max-width:1023px){
  #rail{width:3px}
  #railticks{display:none}
  .rail-line{left:0;top:0;bottom:0;width:2px}
}

/* ===== HEADER — only frosted-glass surface ===== */
#hd{position:fixed;top:0;left:0;right:0;z-index:950;height:var(--hd-h);
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(20px,4vw,48px);
  /* Logo visible from load; bar and phone appear on scroll */
  transition:box-shadow .4s,background .4s,border-color .4s;
  background:transparent;border-bottom:1px solid transparent}
#hd.show{background:rgba(14,19,17,.55);border-bottom-color:rgba(255,255,255,.06);
  backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6)}
#hd.sc{box-shadow:0 14px 40px rgba(0,0,0,.4);background:rgba(14,19,17,.78)}
#hd .tel{opacity:0;pointer-events:none;transition:opacity .45s,border-color .3s,color .3s}
#hd.show .tel{opacity:1;pointer-events:auto}
/* PRESTIGE centred on the logo height */
#hd .brand{display:flex;align-items:center;gap:13px}
/* Logo inverts over light areas; no filter (it breaks the blend) */
#hd .brand{mix-blend-mode:difference}
#hd .brand img{height:62px;display:block}   /* Header logo height (desktop) */
/* line-height:1 centres the caps on the logo */
#hd .brand .p{font-size:15px;line-height:1;letter-spacing:.42em;text-transform:uppercase;
  color:var(--sea);font-weight:600}
#hd .tel{font-size:var(--fs-s);font-weight:600;color:var(--txt);border:1px solid rgba(255,255,255,.16);
  border-radius:10px;padding:9px 18px;transition:border-color .3s,color .3s}
#hd .tel:hover{border-color:var(--sea);color:var(--sea)}
/* Mobile: PRESTIGE shown, phone button shows the number only */
@media(max-width:720px){#hd .brand .p{font-size:11px;letter-spacing:.3em}#hd .tel-lb{display:none}#hd .brand img{height:52px}#hd .tel{font-size:11.5px;padding:8px 13px}}
/* Phones up to 360px: one size smaller */
@media(max-width:360px){#hd{gap:12px}#hd .brand{gap:10px}#hd .brand img{height:46px}#hd .brand .p{font-size:10px;letter-spacing:.25em}}

/* ===== HERO: see the block "HERO — the words on the left" at the end of this file ===== */
#vendre{overflow:hidden}
.hero-cta{margin-top:clamp(34px,5.4vh,62px)}
/* Centred on the window, not the text column */
.scrolldn{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;
  background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:var(--fs-xs);letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--mut);transition:color .3s}
.scrolldn:hover{color:var(--sea)}
.scrolldn i{display:block;width:1px;height:28px;background:linear-gradient(180deg,var(--sea),transparent);
  animation:dn 1.9s ease infinite}
@keyframes dn{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ===== KEY FIGURES — animated entrance ===== */
#chiffres{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--deep)}
.strip-in{display:grid;grid-template-columns:repeat(var(--n,3),1fr);padding:clamp(38px,5.5vh,60px) 0}
.stat{position:relative;padding:0 34px}
.stat::before{content:"";position:absolute;left:0;top:6%;height:88%;width:1px;background:var(--line);
  transform:scaleY(0);transform-origin:top;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.stat:first-child{padding-left:0}
.stat:first-child::before{display:none}
.stat b{display:block;font-size:var(--fs-num);font-weight:600;color:#fff;
  letter-spacing:-.02em;line-height:1.1;
  opacity:0;transform:translateY(16px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.stat b .u{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--sea)}
.stat>span{font-size:var(--fs-m);color:var(--mut);line-height:1.6;display:block;margin-top:10px;font-weight:var(--fw-text);
  max-width:30ch;opacity:0;transition:opacity .7s ease}
#strip.is-in .stat::before{transform:scaleY(1)}
#strip.is-in .stat b{opacity:1;transform:none}
#strip.is-in .stat>span{opacity:1}
#strip.is-in .stat:nth-child(1) b{transition-delay:.05s}
#strip.is-in .stat:nth-child(2) b{transition-delay:.19s}
#strip.is-in .stat:nth-child(3) b{transition-delay:.33s}
#strip.is-in .stat:nth-child(1)>span{transition-delay:.3s}
#strip.is-in .stat:nth-child(2)>span{transition-delay:.44s}
#strip.is-in .stat:nth-child(3)>span{transition-delay:.58s}
#strip.is-in .stat:nth-child(2)::before{transition-delay:.1s}
#strip.is-in .stat:nth-child(3)::before{transition-delay:.24s}
#statnum{font-size:inherit;color:inherit;display:inline;margin:0}
.unip-count{font-size:inherit;color:inherit;display:inline;margin:0}
#strip.is-in .stat:nth-child(4) b{transition-delay:.47s}
#strip.is-in .stat:nth-child(4)>span{transition-delay:.72s}
#strip.is-in .stat:nth-child(4)::before{transition-delay:.38s}
@media(max-width:900px){
  .strip-in{grid-template-columns:1fr;gap:24px;padding:34px 0}
  .stat{padding:0 0 0 20px}
  .stat:first-child{padding-left:20px}
  .stat:first-child::before{display:block}
}

/* ===== SCROLLING TEXT BAR ===== */
.tmarq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--deep);padding:clamp(18px,3vh,28px) 0}
.tmarq .ttrack{display:flex;width:max-content;animation:slide 30s linear infinite;white-space:nowrap}
.tmarq span{font-size:clamp(30px,min(4.4vw,6vh),62px);font-weight:200;letter-spacing:.02em;
  color:var(--sea);padding-right:44px}
.tmarq span b{color:var(--soft);font-weight:200;opacity:.45;font-family:var(--sans);font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== ETHOS / SEARCH — columns and principles ===== */
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,58px);align-items:center;width:100%}
.two .ph{position:relative;overflow:hidden;border-radius:4px;height:clamp(240px,52vh,520px)}
.two .ph img{width:100%;height:100%;object-fit:cover}
/* Gradient blends the photo into the dark background */
.two .ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,transparent 46%,rgba(20,26,24,.6))}
/* Gradient joins the photo to the background */
.principes{list-style:none;margin-top:clamp(18px,3vh,32px)}
/* Title and icon centred on their row height */
.principes li{display:flex;gap:20px;align-items:center;padding:clamp(11px,1.7vh,18px) 0;
  border-top:1px solid var(--line);font-weight:var(--fw-text);font-size:var(--fs-m);
  color:var(--mut);line-height:1.5}
.principes li:last-child{border-bottom:1px solid var(--line)}
.principes li b{color:#fff;font-weight:600;font-size:var(--fs-h3);flex:0 0 200px;letter-spacing:-.01em}
@media(max-width:960px){
  .two{grid-template-columns:1fr;gap:30px}
  .two .ph{height:260px}
  /* Stacked: back to left alignment */
  .principes li{flex-direction:column;align-items:flex-start;gap:5px}
  .principes li b{flex:none}
}

/* ===== THE FACES — one row, auto-scrolling track ===== */
.faces{position:relative;display:flex;gap:var(--fg);
  /* Vertical padding leaves room for the hover glow */
  margin-top:calc(clamp(20px,3.4vh,42px) - 20px);padding:20px 0 22px;
  --fg:clamp(12px,1.4vw,20px);
  /* 4.5 cards visible: the next face peeks in */
  --fw:calc((100% - 4 * var(--fg)) / 4.5)}
/* Double class beats the fade vars set by .swipe */
.faces.swipe{
  /* Fade covers the half-visible card */
  --fade-r:calc(var(--fw) / 2 + var(--fg));
  /* No left fade until the track has scrolled */
  --fade-l:0px}
.faces.swipe.is-scrolled{--fade-l:calc(var(--fw) / 2)}
.face{position:relative;z-index:0;overflow:hidden;background:var(--black);margin:0;
  flex:0 0 var(--fw);
  /* Playing-card proportions */
  border-radius:var(--r-soft);aspect-ratio:5/7;
  box-shadow:0 0 0 1px transparent;
  transition:box-shadow var(--t-hover) ease}
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  -webkit-user-drag:none;user-select:none}
/* Shade covers only the card foot at rest */
.face::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,13,12,0),rgba(10,13,12,.6) 44%,rgba(10,13,12,.96));
  transition:height var(--t-hover) var(--e-out)}
.face:hover::after,.face:focus-within::after{height:64%}
/* Card stays still; only border and glow react */
.face:hover,.face:focus-within{z-index:3;
  box-shadow:0 24px 56px rgba(0,0,0,.55),
             0 0 52px 10px rgba(152,210,235,.26),
             0 0 0 1px var(--sea-26)}
/* Name and role always visible; quote on hover */
.face figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 16px 15px}
.face b{color:#fff;font-size:var(--fs-h3);font-weight:600;display:block;letter-spacing:-.01em}
.face .fr{font-size:var(--fs-xs);color:var(--sea);display:block;margin-top:5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;line-height:1.5}
.face .fq{font-family:var(--serif);font-style:italic;font-size:var(--fs-s);color:var(--mut);
  line-height:1.45;margin-top:0;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--e-out),opacity .38s ease,margin-top .5s var(--e-out)}
.face:hover .fq,.face:focus-within .fq{max-height:9em;opacity:1;margin-top:9px}
@media(max-width:960px){
  /* Touch: 1.5 cards, quote always shown */
  .faces{--fw:calc((100% - var(--fg)) / 1.5)}
  .face{aspect-ratio:3/4.5}
  .face::after{height:56%}
  .face .fq{max-height:9em;opacity:1;margin-top:9px;font-size:var(--fs-s);line-height:1.4}
}

/* ===== THE COLLECTIVE ===== */
/* Soft blue halo behind the section */
#collectif{overflow:hidden}
#collectif::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 46% at 18% 30%,rgba(152,210,235,.09),transparent 68%),
    radial-gradient(46% 42% at 86% 74%,rgba(61,126,166,.11),transparent 70%)}
#collectif>.wrap{position:relative;z-index:1}

/* ===== THE OFF-MARKET — marquee and sticky stack ===== */
#offmarket>.wrap{position:relative;z-index:2}
.omq{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:center;gap:5vh;
  pointer-events:none;overflow:hidden;opacity:.5}
.omq-l{display:flex;width:max-content;white-space:nowrap;animation:slide 58s linear infinite}
.omq-l.r{animation-direction:reverse;animation-duration:72s}
.omq-l span{font-size:clamp(70px,11vw,168px);font-weight:700;letter-spacing:-.02em;text-transform:uppercase;
  color:rgba(152,210,235,.055);padding-right:50px;line-height:1}
.offgrid{display:grid;grid-template-columns:210px 1fr;gap:42px;align-items:start;margin-top:clamp(28px,4.4vh,54px)}
.otl{position:sticky;top:26vh;list-style:none}
.otl li{position:relative;padding:0 0 clamp(24px,4.2vh,40px) 26px;font-size:var(--fs-s);color:#8a9692;
  line-height:1.5;transition:color .4s}
.otl li::before{content:"";position:absolute;left:4px;top:5px;bottom:-5px;width:1px;background:var(--line)}
.otl li:last-child::before{display:none}
.otl li::after{content:"";position:absolute;left:0;top:4px;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--line);background:var(--deep);
  transition:background .4s,border-color .4s,box-shadow .4s}
.otl li b{display:block;font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);
  font-weight:700;margin-bottom:4px;transition:color .4s}
.otl li.on b{color:var(--sea)}
.otl li.on::after{background:var(--sea);border-color:var(--sea);box-shadow:0 0 12px var(--sea-45)}

.scard{position:sticky;background:linear-gradient(158deg,#252d2a,#1b2320);
  border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,3.4vh,40px) clamp(24px,3vw,44px);margin-bottom:22px;
  display:grid;grid-template-columns:auto 1fr .95fr;gap:clamp(20px,2.6vw,36px);align-items:center;
  box-shadow:0 -18px 50px rgba(0,0,0,.42);overflow:hidden}
.scard:nth-child(1){top:calc(var(--hd-h) + 40px)}
.scard:nth-child(2){top:calc(var(--hd-h) + 58px)}
.scard:nth-child(3){top:calc(var(--hd-h) + 76px)}
.scard:nth-child(4){top:calc(var(--hd-h) + 94px)}
/* Cards past the 4th: same 18px step via --i */
.scard{top:calc(var(--hd-h) + 40px + var(--i,0) * 18px)}
/* Background shapes made denser so their motion shows */
.scard::before,.scard::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  filter:blur(52px);opacity:.85;transition:opacity .7s}
/* Shapes breathe continuously; hover only brightens the halo */
.scard::before{width:360px;height:360px;left:-60px;top:-110px;background:rgba(152,210,235,.42);
  animation:blob-a 15s ease-in-out infinite}
.scard::after{width:300px;height:300px;right:10%;bottom:-120px;background:rgba(61,126,166,.5);
  animation:blob-b 19s ease-in-out infinite}
@keyframes blob-a{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(90px,52px) scale(1.2)}
  66%{transform:translate(34px,102px) scale(.9)}}
@keyframes blob-b{
  0%,100%{transform:translate(0,0) scale(1)}
  40%{transform:translate(-84px,-58px) scale(1.18)}
  75%{transform:translate(-26px,-104px) scale(.92)}}
.scard:hover::before{opacity:1}
.scard:hover::after{opacity:.95}
.scard>*{position:relative;z-index:1}
/* Long fade so the numeral blends at the bottom */
.scard .n{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(64px,min(8.6vw,15vh),146px);line-height:.78;letter-spacing:-.03em;
  background:linear-gradient(176deg,
    var(--soft) 0%,
    #cbe6f5 22%,
    var(--sea) 44%,
    rgba(152,210,235,.78) 62%,
    rgba(152,210,235,.5) 76%,
    rgba(152,210,235,.28) 87%,
    rgba(152,210,235,.12) 95%,
    rgba(152,210,235,.05) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;white-space:nowrap}
.scard .n i{font-style:italic;-webkit-text-fill-color:var(--sea);color:var(--sea)}
.scard .st b{font-size:var(--fs-h3);font-weight:600;color:#fff;letter-spacing:-.015em;display:block}
.scard .st .du{font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--sea);
  font-weight:700;display:block;margin-top:9px}
.scard p{font-size:var(--fs-m);color:var(--mut);line-height:1.6;font-weight:var(--fw-text);
  margin-top:14px;max-width:44ch}
.scard .sph{border-radius:14px;overflow:hidden;height:clamp(150px,32vh,320px);border:1px solid var(--line)}
/* Natural-colour photo */
.scard .sph img{width:100%;height:100%;object-fit:cover}
@media(max-width:1100px){.offgrid{grid-template-columns:1fr}.otl{display:none}}
@media(max-width:960px){
  .scard{grid-template-columns:1fr;padding:24px;gap:14px}
  .scard:nth-child(n){top:calc(var(--hd-h) + 18px)}
  .scard .n{font-size:60px}
  .scard .sph{height:180px;order:-1}
  .omq{opacity:.35}
}

/* ===== THE GUARANTEES ===== */
.big3{font-size:1.85em;line-height:.75;vertical-align:-.09em;margin-right:.04em}
/* Balanced two-line title on small screens */
#garanties h2{text-wrap:balance}
.gar{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:clamp(16px,1.8vw,22px);
  margin-top:clamp(28px,4.6vh,58px);width:100%}
/* Title is the focus: centred, large, icon above */
.g{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:var(--black);
  height:clamp(250px,50vh,430px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(20px,3vh,32px) clamp(18px,2vw,28px);cursor:default;
  transition:border-color .45s}
/* Shade keeps the big title readable */
.g>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.42;
  transition:opacity .6s}
.g::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(72% 54% at 50% 46%,rgba(10,13,12,.62),rgba(10,13,12,.2) 78%,transparent),
    linear-gradient(180deg,rgba(10,13,12,.42),rgba(10,13,12,.5) 46%,rgba(10,13,12,.9))}
.g{box-shadow:0 0 0 0 rgba(152,210,235,0)}
/* Card does not move on hover */
.g:hover,.g:focus-visible{border-color:var(--sea-45);
  box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 60px 12px rgba(152,210,235,.3)}
.g:hover>img,.g:focus-visible>img{opacity:.6}
/* Icon above the title, centred */
.gmark{position:relative;z-index:2;display:block;
  width:clamp(34px,4.4vh,44px);height:clamp(34px,4.4vh,44px);
  margin:0 auto clamp(12px,2.2vh,20px);color:var(--sea);opacity:.92;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.75))}
/* Paragraph out of flow so the title stays centred */
.gb{position:relative;z-index:2;width:100%}
.gb b{font-size:var(--fs-h3);font-weight:600;color:#fff;display:block;
  letter-spacing:-.02em;line-height:1.12;text-wrap:balance;
  text-shadow:0 2px 16px rgba(0,0,0,.85)}
.gb p{position:absolute;left:0;right:0;top:calc(100% + clamp(10px,1.6vh,15px));
  font-size:var(--fs-m);color:#c4d3ce;line-height:1.6;font-weight:var(--fw-text);
  text-shadow:0 1px 10px rgba(0,0,0,.9);text-wrap:pretty;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .42s ease,transform .5s var(--e-out)}
.g:hover .gb p,.g:focus-visible .gb p,.g:focus-within .gb p{opacity:1;transform:none}
@media(max-width:960px){
  .gar{grid-template-columns:1fr;gap:12px}
  .g{height:auto;min-height:230px;padding:30px 22px}
  /* Touch: paragraph back in the flow */
  .gb p{position:static;opacity:1;transform:none;margin-top:12px}
}

/* ===== THE CIRCLE — rings centred on the content ===== */
#cercle{background:var(--black);overflow:hidden;text-align:center}
#cercle>.wrap{position:relative}
.rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0}
.rings i{position:absolute;width:150px;height:150px;border:1px solid var(--sea-26);border-radius:50%;
  animation:ripple 7s linear infinite}
.rings i:nth-child(2){animation-delay:1.75s}
.rings i:nth-child(3){animation-delay:3.5s}
.rings i:nth-child(4){animation-delay:5.25s}
@keyframes ripple{from{transform:scale(.9);opacity:.5}to{transform:scale(8);opacity:0}}
.cercle-in{position:relative;z-index:2}
.adm{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:clamp(18px,2.4vw,26px);
  margin-top:clamp(26px,4.4vh,52px);text-align:left}
.adm .a{border-left:1px solid var(--line);padding-left:20px;transition:border-color .4s}
.adm .a:hover{border-color:var(--sea)}
.adm .a b{display:block;font-size:var(--fs-h3);font-weight:600;color:#fff;
  letter-spacing:-.015em;line-height:1.18}
.adm .a b .u{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--sea)}
/* Admission counter readable from afar */
.adm .a b .u--24{font-size:2.1em;line-height:.85;display:inline-block;color:var(--soft);
  text-shadow:0 0 26px rgba(152,210,235,.5)}
.adm .a p{font-size:var(--fs-m);color:var(--mut);line-height:1.6;font-weight:var(--fw-text);margin-top:9px}
#cercle .hero-cta{margin-top:clamp(26px,4.4vh,48px)}
@media(max-width:960px){.adm{grid-template-columns:1fr 1fr;gap:24px 18px}}
@media(max-width:600px){.adm{grid-template-columns:1fr}}

/* ===== SELLING — four struck-through refusals ===== */
.rayes{list-style:none;margin-top:clamp(14px,2.4vh,38px);border-top:1px solid var(--line)}
.raye{display:grid;grid-template-columns:52px 1fr;gap:0 20px;align-items:baseline;
  padding:clamp(11px,2vh,30px) 0;border-bottom:1px solid var(--line)}
.rx{font-size:var(--fs-xs);letter-spacing:.2em;color:var(--mut);font-weight:700;padding-top:.7em}
/* Strike line is a background gradient, not an SVG */
.rw{display:inline;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:calc(var(--fs-h2) * .8);line-height:1.1;letter-spacing:-.015em;color:var(--txt);
  --rs-h:clamp(4px,.11em,8px);
  background-image:linear-gradient(var(--sea),var(--sea));
  background-repeat:no-repeat;background-position:0 56%;
  background-size:0% var(--rs-h);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size 1.05s cubic-bezier(.62,0,.3,1),
             color .8s ease .35s,opacity .8s ease .35s}
.raye.is-struck .rw{color:var(--mut);opacity:.62;background-size:100% var(--rs-h)}
.rd{font-size:var(--fs-m);color:var(--mut);line-height:1.6;font-weight:var(--fw-text);
  margin-top:clamp(5px,1vh,10px);max-width:52ch}
@media(max-width:700px){.raye{grid-template-columns:1fr;gap:6px}.rx{padding-top:0}}
/* No box: text and button sit on the section */
.elig{position:relative;display:flex;gap:24px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-top:clamp(14px,2.4vh,40px);padding:clamp(15px,2.3vh,28px) 0;
  background:none;border:none;border-radius:0}
.elig>div{position:relative;z-index:2;flex:1;min-width:270px}
.elig b{font-size:var(--fs-h3);color:#fff;font-weight:600;display:block}
.elig span{font-size:var(--fs-m);color:var(--mut);font-weight:var(--fw-text);display:block;margin-top:6px;max-width:56ch}
.elig .btn{position:relative;z-index:2}

/* ===== SEARCH — full-bleed half screen ===== */
.sec--split h2{font-size:calc(clamp(25.8px,2.8vw,40.5px) * var(--k) * var(--k-section))}   /* a title in half of the width */
.sec--split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0;padding:0;min-height:100svh}
.sp-txt{display:flex;align-items:center;padding:clamp(48px,7vh,88px) clamp(20px,4vw,48px)}
.sp-in{width:100%;max-width:560px;margin-left:auto;padding-right:clamp(16px,3vw,44px)}
.sp-img{position:relative;overflow:hidden;background:var(--black)}
/* Natural-colour photo, gradient blend */
.sp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.sp-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--deep) 0%,rgba(20,26,24,.4) 24%,transparent 58%)}
.sp-in .principes li{padding:clamp(10px,1.5vh,15px) 0}
.sp-in .hero-cta{margin-top:clamp(18px,2.8vh,30px)}
@media(max-width:960px){
  .sec--split{grid-template-columns:1fr;min-height:0}
  .sp-txt{padding:56px 24px;order:2}
  .sp-in{margin-left:0;padding-right:0;max-width:none}
  .sp-img{order:1;height:38vh}
  .sp-img::after{background:linear-gradient(180deg,transparent 40%,var(--deep))}
}

/* ===== TERRITORIES — list, wireframe globe, continents ===== */
#territoires{background:var(--black);overflow:hidden}
.terr{display:grid;grid-template-columns:1fr minmax(260px,40%);gap:clamp(24px,3.4vw,44px);
  align-items:center;margin-top:clamp(16px,2.6vh,34px)}
.trows{max-width:600px}
.trow{display:flex;align-items:baseline;gap:14px;padding:clamp(7px,1.35vh,15px) 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:clamp(18px,2.4vw,34px);font-weight:300;color:#cfd8d4;cursor:pointer;
  letter-spacing:-.01em;transition:color .3s,padding-left .35s cubic-bezier(.16,1,.3,1)}
.trow::before{content:"";width:0;height:1px;background:var(--sea);flex-shrink:0;
  transition:width .35s cubic-bezier(.16,1,.3,1)}
.trow:hover,.trow.on{color:#fff;padding-left:6px}
.trow:hover::before,.trow.on::before{width:24px}
.globe{display:grid;place-items:center}
.globe svg{width:100%;max-width:min(400px,44vh);height:auto;overflow:visible}
.g-limb{fill:none;stroke:var(--sea-26);stroke-width:1}
/* Graticule and continents redrawn every frame */
.g-par path{fill:none;stroke:rgba(152,210,235,.13);stroke-width:.75;stroke-linecap:round}
.g-mer path{fill:none;stroke:rgba(152,210,235,.18);stroke-width:.75;stroke-linecap:round}
.g-cont path{fill:none;stroke:rgba(152,210,235,.42);stroke-width:.9;stroke-linejoin:round;stroke-linecap:round}
#gpts circle{fill:var(--sea);opacity:0;transition:opacity .4s}
#gpts circle.on{opacity:1}
#gpts circle.home{opacity:.5}
/* Route drawn in full, revealed by dash (see main.js) */
#garcs path{fill:none;stroke:var(--sea);stroke-width:2.2;stroke-linecap:round;opacity:1}
/* Glowing tip moving along the route */
#garcs .arc-head{fill:var(--soft);stroke:none;filter:drop-shadow(0 0 5px var(--sea))}
#glabel{fill:var(--sea);font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  opacity:0;transition:opacity .35s}
#glabel.on{opacity:1}
.clocks{display:flex;gap:clamp(20px,3vw,38px);margin-top:clamp(18px,3vh,38px);flex-wrap:wrap}
.clock b{font-size:var(--fs-h3);color:#fff;font-weight:600;display:block;
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
.clock span{font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--mut);font-weight:700}
.clock .cl-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sea);
  margin-right:7px;vertical-align:2px}
@media(max-width:960px){
  .terr{grid-template-columns:1fr;gap:26px}
  .globe{order:-1}
  .globe svg{max-width:230px}
  .clocks{gap:20px}
}

/* ===== FAQ ===== */
.faq{border:1px solid var(--line);border-radius:16px;overflow:hidden;
  margin-top:clamp(20px,3.4vh,42px);width:100%}
.fq-item{border-bottom:1px solid var(--line);background:var(--card)}
.fq-item:last-child{border-bottom:none}
.fq-q{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:clamp(15px,2.2vh,23px) clamp(18px,2.2vw,28px);cursor:pointer;
  font-size:var(--fs-h3);font-weight:600;color:#fff;user-select:none;
  background:none;border:none;width:100%;text-align:left}
.fq-q:hover{color:var(--sea)}
.fq-q .pl{color:var(--sea);font-size:23px;font-weight:300;transition:transform .35s ease;flex-shrink:0;line-height:1}
.fq-item.open .pl{transform:rotate(45deg)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1)}
.fq-a p{padding:2px clamp(18px,2.2vw,28px) clamp(16px,2.4vh,24px);
  font-size:var(--fs-m);color:var(--mut);line-height:1.6;font-weight:var(--fw-text);max-width:74ch}

/* ===== CONTACT — one panel: the team and the ways to reach us on the left, the form on the right ===== */
#contact{background:var(--eerie)}
.ct-head{display:grid;justify-items:center;margin-bottom:clamp(22px,3.6vh,36px);text-align:center}
.ct-b{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);overflow:hidden;border:1px solid var(--line);border-radius:calc(var(--r-card) * 1.6);background:linear-gradient(158deg,#252d2a,#1b2320);box-shadow:0 30px 80px rgba(0,0,0,.35);text-align:left}

/* the team: the whole photograph, at its own proportions (nobody is cut off), the ways to reach us under it */
.ct-photo{display:flex;flex-direction:column;background:#0c100f}
.ct-team{position:relative;margin:0;overflow:hidden}
.ct-team img{display:block;width:100%;height:auto}
.ct-team::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0c100f 0%,rgba(12,16,15,0) 26%),linear-gradient(180deg,rgba(10,13,12,.45),rgba(10,13,12,0) 24%)}
.ct-chip-top{position:absolute;z-index:2;top:16px;left:16px;display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border:1px solid rgba(232,237,235,.28);border-radius:999px;background:rgba(10,13,12,.55);backdrop-filter:blur(12px);font-size:var(--fs-s);color:#fff}
.ct-chip-top .lucide{color:var(--sea)}
.ct-ways{display:grid;gap:8px;margin-top:auto;padding:14px clamp(16px,2vw,24px) clamp(16px,2vw,24px)}
.ct-way{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);color:var(--txt);transition:border-color .4s var(--e-out),background .4s var(--e-out),transform .4s var(--e-out)}
.ct-way .ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--sea-12);color:var(--sea);transition:background .4s,color .4s}
.ct-way small{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.ct-way b{display:block;margin-top:1px;font-size:var(--fs-m);font-weight:500;color:#fff;overflow-wrap:anywhere}
.ct-way .go{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);color:var(--mut);transition:all .4s var(--e-out)}
a.ct-way:hover{border-color:var(--sea-45);background:var(--sea-06);transform:translateY(-2px)}
a.ct-way:hover .ico,a.ct-way:hover .go{background:var(--sea);border-color:var(--sea);color:var(--eerie)}
/* the quickest way is the first and the strongest: a call */
.ct-way--main{padding:13px 16px;background:var(--sea);border-color:var(--sea);color:var(--eerie)}
.ct-way--main .ico{background:var(--eerie);color:var(--sea);width:44px;height:44px}
.ct-way--main small{color:rgba(28,35,33,.7)}
.ct-way--main b{font-size:calc(var(--fs-m) * 1.25);font-weight:600;color:var(--eerie)}
.ct-way--main .go{background:var(--eerie);border-color:var(--eerie);color:var(--sea)}
a.ct-way--main:hover{background:var(--soft);border-color:var(--soft)}
a.ct-way--main:hover .ico,a.ct-way--main:hover .go{background:var(--eerie);border-color:var(--eerie);color:var(--sea)}

/* the form: a progress bar in steps, one question, big choices; the promises stay at the foot */
.ct-formcol{display:flex;flex-direction:column;justify-content:space-between;gap:22px;padding:clamp(22px,2.8vw,40px)}
.formbox{position:relative;text-align:left}
/* the form is sans-serif only */
.formbox,.formbox *{font-family:var(--sans);font-style:normal}
.fhead{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;margin-bottom:12px}
.fhead span{font-size:var(--fs-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.fhead span b{color:var(--sea);font-weight:700}
.fback{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:0;border-radius:999px;background:none;font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);cursor:pointer;transition:color .3s,background .3s;visibility:hidden}
.fback.show{visibility:visible}
.fback:hover{color:#fff;background:var(--sea-12)}
.fprog{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:clamp(18px,3vh,28px)}
.fprog i{height:4px;border-radius:4px;background:rgba(232,237,235,.14);transition:background .5s var(--e-out)}
.fprog i.on{background:var(--sea)}
.fstep{animation:ct-in .55s var(--e-out)}
@keyframes ct-in{from{opacity:0;transform:translateX(18px)}}
.fstep h4{margin:0 0 18px;font-size:calc(var(--fs-h3) * 1.4);font-weight:500;line-height:1.2;letter-spacing:-.015em;color:#fff}
.fqrow{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 12px}
/* the two big choices of the first question */
.ftiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fbig{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:164px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-card);background:rgba(255,255,255,.025);color:var(--txt);text-align:left;cursor:pointer;overflow:hidden;transition:border-color .45s var(--e-out),background .45s var(--e-out),transform .45s var(--e-out)}
.fbig .ico{display:grid;place-items:center;flex:none;width:46px;height:46px;margin-bottom:auto;border-radius:50%;background:var(--sea-12);color:var(--sea);transition:background .45s,color .45s}
.fbig b{font-size:var(--fs-h3);font-weight:600;color:#fff}
.fbig small{display:block;font-size:var(--fs-s);line-height:1.4;font-weight:var(--fw-text);color:var(--mut);letter-spacing:0}
.fbig .ar{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);color:var(--mut);transition:all .45s var(--e-out)}
.fbig:hover,.fbig:focus-visible{border-color:var(--sea);background:var(--sea-06);transform:translateY(-4px)}
.fbig:hover .ico,.fbig:hover .ar,.fbig:focus-visible .ico,.fbig:focus-visible .ar{background:var(--sea);border-color:var(--sea);color:var(--eerie)}
/* the other questions: pills */
.fopts{display:flex;flex-wrap:wrap;gap:10px}
.fopt{padding:14px 22px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025);font-size:var(--fs-m);color:var(--txt);cursor:pointer;user-select:none;transition:all .35s var(--e-out)}
.fopt:hover{border-color:var(--sea);background:var(--sea);color:var(--eerie);transform:translateY(-2px)}
.fopt:active{transform:scale(.97)}
.fopt.on{background:var(--sea);border-color:var(--sea);color:var(--eerie);font-weight:600}
.fopt.on:hover{background:var(--soft);border-color:var(--soft)}
.ffree{margin-top:16px}
.fnext{margin-top:14px}
.fnext .btn{margin-top:2px}
/* the last question: who answers, then the fields */
.frecap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.frecap span{padding:5px 11px;border-radius:999px;background:var(--sea-12);font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sea)}
.who{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}
.who img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:top;flex-shrink:0}
.who b{display:block;font-size:var(--fs-m);font-weight:500;color:#fff}
.who span{display:block;font-size:var(--fs-s);line-height:1.45;font-weight:var(--fw-text);color:var(--mut)}
.who .wk{margin-bottom:2px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sea)}
.formbox label{display:block;margin:12px 0 6px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.frow label{margin-top:0}
.formbox input,.formbox textarea{width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);font-size:var(--fs-m);color:#fff;outline:none;transition:border-color .3s,box-shadow .3s}
.formbox textarea{min-height:64px;resize:vertical}
.formbox input::placeholder,.formbox textarea::placeholder{color:#6f7f79}
.formbox input:focus,.formbox textarea:focus{border-color:var(--sea);box-shadow:0 0 0 4px var(--sea-12)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ok-msg{padding:20px 22px;border:1px solid var(--sea-45);border-radius:16px;background:var(--sea-12);font-size:var(--fs-m);line-height:1.55;color:var(--sea)}
/* the promises of the home page, then the fine print */
.ct-pledges{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:16px;border-top:1px solid var(--line)}
.ct-pledges[hidden]{display:none}
.ct-pledges li{display:flex;align-items:center;gap:9px;font-size:var(--fs-s);color:var(--txt)}
.ct-pledges .lucide{color:var(--sea)}
.fine{margin-top:12px;max-width:60ch;font-size:var(--fs-xs);line-height:1.55;color:#7f8b87}
/* a sentence stays in one piece while it fits on a line: the break falls between sentences (see "SHORT TEXTS" in form.js) */
.sn{display:inline-block;max-width:100%;vertical-align:top}
:where(.ct-way,.fbig,.fopt,.fback):focus-visible{outline:2px solid var(--sea);outline-offset:3px}
@media(max-width:980px){
  .ct-b{display:flex;flex-direction:column}
  .ct-formcol{order:-1}
}
@media(max-width:620px){
  .ftiles,.frow{grid-template-columns:1fr}
  .fhead .fname{display:none}
  .fbig{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i b" "i s";column-gap:14px;align-items:center;min-height:0;padding:16px 54px 16px 16px}
  .fbig .ico{grid-area:i;margin:0}
  .fbig b{grid-area:b}
  .fbig small{grid-area:s}
  .fbig .ar{top:50%;transform:translateY(-50%)}
  .fbig:hover{transform:none}
  .ct-way{grid-template-columns:auto 1fr}
  .ct-way .go{display:none}
}
@media(prefers-reduced-motion:reduce){.fstep{animation:none}}

/* ===== CONTACT PAGE (/contact): the title and its sentence, the same panel, then what happens next ===== */
.ctp{min-height:0;padding-bottom:clamp(40px,7vh,80px)}
.ctp .crumbs{margin-bottom:clamp(18px,3vh,30px)}
.ctp-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end;gap:14px clamp(20px,4vw,64px);margin-bottom:clamp(26px,4.4vh,46px)}
.ctp-head h1{font-size:calc(clamp(33.1px,4.2vw,62.6px) * var(--k) * var(--k-section));line-height:1.04}
.ctp-head .lead{margin:0 0 .5em;max-width:42ch}
.ctp-next{padding-top:clamp(40px,7vh,84px);padding-bottom:clamp(60px,10vh,120px)}
.ctp-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(22px,3.6vh,38px)}
.ctp-step{position:relative;padding:clamp(20px,2.2vw,30px);border:1px solid var(--line);border-radius:var(--r-card);background:rgba(255,255,255,.025);transition:border-color .45s var(--e-out),background .45s var(--e-out),transform .45s var(--e-out)}
.ctp-step:hover{border-color:var(--sea-45);background:var(--sea-06);transform:translateY(-3px)}
.ctp-step .ico{display:grid;place-items:center;width:52px;height:52px;margin-bottom:clamp(18px,3vh,30px);border-radius:50%;background:var(--sea-12);color:var(--sea)}
.ctp-step b{display:block;margin-bottom:8px;font-size:var(--fs-h3);font-weight:600;color:#fff}
.ctp-step p{font-size:var(--fs-m);line-height:1.6;font-weight:var(--fw-text);color:var(--mut)}
/* a small arrow between the steps says "then" */
.ctp-then{position:absolute;z-index:2;top:calc(clamp(20px,2.2vw,30px) + 26px - 15px);right:calc(clamp(12px,1.6vw,22px) / -2 - 15px);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--deep);color:var(--sea)}
@media(max-width:980px){.ctp-head{grid-template-columns:1fr}.ctp-head .lead{margin:0}}
@media(max-width:760px){.ctp-steps{grid-template-columns:1fr}.ctp-then{display:none}}

/* ===== FOOTER — a street: each column is a house with its own roof, the château in the middle holds the logo, the button and the direct line ===== */
footer{background:#0a0d0c;color:var(--mut);border-top:1px solid var(--line);overflow:hidden}
.ft-in{max-width:1320px;margin:0 auto;padding:clamp(54px,10vh,110px) clamp(20px,4vw,48px) 0}
.ft-row{display:flex;align-items:flex-end;gap:clamp(8px,1.2vw,16px)}
.ft-h{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.ft-h--main{flex:1.5 1 0}
.ft-rf{display:block;width:100%;height:auto;overflow:visible}
.ft-rf path{fill:none;stroke:var(--sea);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.7;transition:opacity .6s var(--e-out)}
.ft-rf .t{opacity:.4}
.ft-h:hover .ft-rf path{opacity:1}
.ft-hb{position:relative;display:flex;flex-direction:column;justify-content:flex-start;padding:22px clamp(14px,1.5vw,22px) 24px;border:1px solid rgba(232,237,235,.22);border-top:0;border-bottom:0;
  background:linear-gradient(180deg,rgba(152,210,235,.06),rgba(152,210,235,0) 70%);transition:border-color .6s var(--e-out)}
.ft-h:hover .ft-hb{border-color:rgba(152,210,235,.7)}
.ft-hb h6{margin-bottom:16px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sea)}
.ft-hb ul{list-style:none}
.ft-hb li{margin-bottom:10px;font-size:calc(var(--fs-s) * 1.06);font-weight:var(--fw-text);color:var(--mut)}
.ft-hb li a{position:relative;display:inline-block;padding:2px 0;transition:color .4s var(--e-out)}
.ft-hb li a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sea);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e-out)}
.ft-hb li a:hover{color:#fff}
.ft-hb li a:hover::after{transform:scaleX(1);transform-origin:left}
.ft-h--main .ft-hb img{width:clamp(170px,17vw,240px);height:auto;align-self:center}
.ft-hb .base-line{margin:18px 0 20px;font-size:calc(var(--fs-s) * 1.06);text-wrap:balance;line-height:1.65;font-weight:var(--fw-text)}
.ft-hb .btn{align-self:flex-start}
/* without the signature under the logo, the button keeps its distance */
.ft-h--main .ft-hb img+.btn{margin-top:22px}
.ft-tel{display:block;margin-top:18px;font-size:clamp(18.4px,1.8vw,25.8px);font-weight:300;letter-spacing:-.01em;color:#fff;transition:color .4s var(--e-out)}
.ft-tel:hover{color:var(--sea)}
.ft-ground{position:relative;height:1px;background:var(--sea);opacity:.55}
.ft-ground::after{content:"";position:absolute;left:0;right:0;top:1px;height:70px;background:linear-gradient(180deg,rgba(152,210,235,.12),transparent)}
.base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding:26px 0 30px;font-size:var(--fs-s);color:var(--mut)}
.base-links{display:flex;flex-wrap:wrap;gap:8px 20px}
/* The houses rise as the footer comes into view (browsers without scroll-driven animations just show them) */
@keyframes ft-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .ft-h{animation:ft-rise 1s var(--e-out) both;animation-timeline:view();animation-range:entry 0% entry 90%}
    .ft-h:nth-child(2){animation-range:entry 8% entry 98%}
    .ft-h:nth-child(3){animation-range:entry 4% entry 94%}
    .ft-h:nth-child(4){animation-range:entry 12% entry 100%}
  }
}
@media(max-width:1000px){
  .ft-row{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:44px 16px}
  .ft-h--main{order:-1;grid-column:1/-1;justify-self:center;width:100%;max-width:560px}
}
@media(max-width:640px){
  .ft-row{grid-template-columns:1fr}
}

/* ===== SHARED ANIMATIONS ===== */
/* Content reveals in sequence when the section is live */
.rvl{opacity:0;transform:translateY(34px);filter:blur(12px);
  transition:opacity var(--t-rvl) ease,transform var(--t-rvl) var(--e-out),filter var(--t-rvl) ease}
.sec.live .rvl{opacity:1;transform:none;filter:blur(0)}
/* Cascade starts at the h2 */
.sec.live .d2{transition-delay:.15s}
.sec.live .d3{transition-delay:.3s}
/* Accent word: blue Playfair italic, no underline */
/* No wipe reveal on cards */
h1 .sw,h2 .sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
h1 .sw i,h2 .sw i{display:inline-block;font-style:inherit;transform:translateY(118%);
  transition:transform 1s cubic-bezier(.16,1,.3,1)}
h1.in .sw i,h2.in .sw i{transform:none}
.two .ph{clip-path:inset(0 100% 0 0 round 4px);transition:clip-path 1.2s var(--e-sweep)}
.sec.live .two .ph{clip-path:inset(0 0 0 0 round 4px)}

/* ===== ACCESSIBILITY ===== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  h1 .sw i,h2 .sw i{transform:none!important}
  .two .ph{clip-path:none!important}
  #pre{display:none!important}
  .raye .rw{background-size:100% var(--rs-h)!important}
  .face .fq{max-height:none!important;opacity:1!important}
  .face::after{height:56%!important}
  .gb p{opacity:1!important;transform:none!important}
  .stat b,.stat>span{opacity:1!important;transform:none!important}
  .stat::before{transform:scaleY(1)!important}
}


/* ===== SHARED COMPONENTS ===== */

/* ===== AUTO-SCROLLING TRACKS — faces and references ===== */
.swipe{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:auto;overscroll-behavior-x:contain;
  /* pan-y: the finger keeps vertical page scroll */
  touch-action:pan-y;cursor:grab;
  -webkit-user-select:none;user-select:none;
  /* Edges fade to hint that the track continues */
  --fade:clamp(28px,4.5%,72px);
  --fade-l:var(--fade);
  --fade-r:var(--fade);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),transparent 100%)}
.swipe::-webkit-scrollbar{display:none}
.swipe.is-grabbing{cursor:grabbing}
.swipe img{-webkit-user-drag:none}
/* Arrow header shared by both carousels */
.rhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.anav{flex:none;white-space:nowrap}
.anav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:none;color:var(--txt);font-size:var(--fs-m);cursor:pointer;margin-left:9px;
  transition:background var(--t-hover),color var(--t-hover),border-color var(--t-hover)}
.anav button:hover{background:var(--sea);border-color:var(--sea);color:var(--eerie)}

/* Line icons (Ethos, Guarantees) */
.ico{width:var(--ico);height:var(--ico);flex:none;fill:none;stroke:var(--sea);
  stroke-width:var(--ico-w);stroke-linecap:round;stroke-linejoin:round}
/* Row alignment set once in .principes li */
/* Icons share a 24x24 grid and stroke */
.gmark svg{display:block;width:100%;height:100%;fill:none;stroke:var(--sea);
  stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}

/* Rising blue dust */
.dust{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.dust i{position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;
  background:rgba(152,210,235,.5);animation:drift linear infinite;
  animation-play-state:paused}
.sec.live .dust i{animation-play-state:running}   /* Paused off screen */
@keyframes drift{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.8}
  88%{opacity:.5}
  100%{transform:translateY(-102vh) translateX(var(--dx,14px));opacity:0}}

/* Group life photo strip */
#collectif{overflow:hidden;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,44px)}
#collectif>.wrap{position:relative;z-index:2}
/* Outline title sits under the photo strip */
.kt{position:relative;display:flex;width:max-content;max-width:none;
  white-space:nowrap;z-index:1;pointer-events:none;overflow:hidden;
  animation:ktm 42s linear infinite}
/* Spans filled by main.js so -50% never shows a gap */
.kt span{font-size:clamp(38px,5.2vw,76px);font-weight:700;line-height:1.06;
  text-transform:uppercase;letter-spacing:.09em;
  color:transparent;-webkit-text-stroke:1.1px rgba(225,242,254,.16);padding-right:.5em}
/* Outline strip spaces the section bottom */
#collectif{padding-bottom:clamp(28px,4vh,56px)}
@keyframes ktm{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mstage{position:relative;z-index:2;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mrow{display:flex;gap:18px;width:max-content;margin-bottom:18px;
  animation:mgo 46s linear infinite}
.mrow.rev{animation:mgo2 52s linear infinite;margin-bottom:0}
.mrow:hover{animation-play-state:paused}   /* Pause only the hovered row */
@keyframes mgo{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mgo2{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mph{position:relative;flex:none;width:clamp(230px,24vw,330px);aspect-ratio:330/215;
  border-radius:var(--r-soft);overflow:hidden;transition:transform var(--t-hover) var(--e-out)}
.mrow.rev .mph{width:clamp(210px,22vw,300px)}
.mph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--e-out)}
.mph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 62%,rgba(10,13,12,.55))}
.mph:hover{transform:scale(1.05) rotate(-.5deg);z-index:5}
.mph:hover img{transform:scale(1.06)}

/* References as an address book */
/* stretch keeps .astrip at window width so it scrolls */
#references{flex-direction:column;align-items:stretch;justify-content:center;
  gap:clamp(12px,2.2vh,26px)}
/* .rhead and .anav are defined with .swipe */
/* Track starts at the window edge; first card aligned by padding */
.astrip{display:flex;gap:20px;width:100%;overflow-x:auto;
  --agut:calc(max(0px,(100% - 1180px) / 2) + clamp(20px,4vw,48px));
  padding:8px var(--agut) 14px;scroll-padding-inline:var(--agut);
  /* No smooth scroll here: autoSwipe handles the easing */
  scrollbar-width:none;
  /* Fade ends where the first card starts */
  --fade:max(24px,var(--agut))}
.astrip::-webkit-scrollbar{display:none}
/* Narrower, taller cards; no movement on hover */
.acard{position:relative;flex:none;width:clamp(210px,17vw,260px);aspect-ratio:3/4.6;
  max-height:66vh;border-radius:var(--r-card);overflow:hidden;
  background:linear-gradient(150deg,#2a3a41,var(--eerie));
  border:1px solid var(--line);
  transition:box-shadow var(--t-hover) ease,border-color var(--t-hover)}
.acard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(15px) brightness(.6);transform:scale(1.12);transition:filter .8s ease}
.acard:hover img{filter:blur(9px) brightness(.72)}
.acard:hover{border-color:var(--sea-45);
  box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 62px 12px rgba(152,210,235,.28)}
.acard .ov{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 42%,rgba(10,13,12,.92))}
.acard .dst,.acard .ie{position:absolute;top:14px;z-index:3;font-size:var(--fs-xs);
  letter-spacing:.16em;font-weight:700;padding:5px 11px;border-radius:11px;text-transform:uppercase}
/* Place name never goes under the year badge */
.acard .dst{left:14px;background:rgba(232,237,235,.94);color:var(--eerie);
  max-width:calc(100% - 130px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard .ie{right:14px;background:var(--sea);color:var(--eerie)}
.acard .alock{position:absolute;inset:0;z-index:2;display:grid;place-items:center}
.acard .alock svg{width:30px;height:30px;fill:none;stroke:var(--sea);stroke-width:1.3;opacity:.45}
.acard .bx{position:absolute;left:20px;right:20px;bottom:18px;z-index:3}
.acard .bx b{display:block;font-size:var(--fs-h3);font-weight:600;color:#fff;letter-spacing:-.01em}
.acard .pr2{display:block;font-size:var(--fs-s);color:var(--mut);margin-top:5px;line-height:1.45;font-weight:var(--fw-text)}
.acard .amore{display:block;margin-top:11px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;
  color:var(--sea);opacity:0;transform:translateY(9px);transition:.4s var(--e-out)}
.acard:hover .amore,.acard:focus-visible .amore{opacity:1;transform:none}
/* Narrow cards: smaller badges */
@media(max-width:520px){
  .acard .dst,.acard .ie{font-size:var(--fs-xs);letter-spacing:.1em;padding:4px 9px}
  .acard .dst{max-width:calc(100% - 112px)}
}

/* Removed #chemins section and its rules */

/* ===== ACCESSIBILITY — no motion with reduced motion ===== */
@media(prefers-reduced-motion:reduce){
  .rvl{opacity:1!important;transform:none!important;filter:none!important}
  .two .ph{clip-path:none!important}
  .dust{display:none!important}
  .mrow,.kt{animation:none!important}
  .mrow.rev{transform:none}
}

/* Form error message (see inc/form.php) */
.f-err{
  margin:14px 0 0;
  font-size:var(--fs-s);
  line-height:1.5;
  color:#e8b4b4;
}

/* Free content blocks, styled for the dark page */
.cookie-choice{margin-top:clamp(28px,4vh,44px)}
/* the legal pages: the articles are titles of level 2, shown as before; the questions inside an article are smaller */
.page-col .unip-libre h2{font-size:clamp(18.4px,2.8vw,25.8px);margin:2em 0 .6em}
.page-col .unip-libre h3{font-size:var(--fs-h3);margin:1.6em 0 .5em}
.unip-libre{color:var(--ink,#e8eef2);font-size:var(--fs-m);line-height:1.65;text-align:left}
.unip-libre > *:first-child{margin-top:0}
.unip-libre > *:last-child{margin-bottom:0}
.unip-libre h1,.unip-libre h2,.unip-libre h3,.unip-libre h4{
  font-family:var(--sans);font-weight:400;line-height:1.15;margin:1.6em 0 .5em;color:#fff}
.unip-libre h1{font-size:clamp(27.6px,4.6vw,47.8px)}
.unip-libre h2{font-size:clamp(23.9px,3.7vw,36.8px)}
.unip-libre h3{font-size:clamp(18.4px,2.8vw,25.8px)}
.unip-libre h4{font-size:18px;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.unip-libre em,.unip-libre i{font-family:var(--serif);font-style:italic;color:var(--sea)}
.unip-libre p{margin:0 0 1.1em}
.unip-libre a{color:var(--sea);text-decoration:underline;text-underline-offset:3px}
.unip-libre a:hover{text-decoration-thickness:2px}
.unip-libre ul,.unip-libre ol{margin:0 0 1.2em;padding-left:1.3em}
.unip-libre li{margin:.35em 0}
.unip-libre img,.unip-libre video,.unip-libre iframe{max-width:100%;height:auto;border-radius:14px;display:block}
.unip-libre figure{margin:1.6em 0}
.unip-libre figcaption{margin-top:.6em;font-size:var(--fs-s);opacity:.6}
.unip-libre blockquote{
  margin:1.6em 0;padding-left:18px;border-left:2px solid var(--sea);
  font-family:var(--serif);font-style:italic;font-size:1.15em;color:#fff}
.unip-libre hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:2.4em 0}
.unip-libre table{width:100%;border-collapse:collapse;font-size:var(--fs-s)}
.unip-libre th,.unip-libre td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.12);text-align:left}
.unip-libre .wp-block-button__link{
  display:inline-block;padding:14px 28px;border-radius:999px;
  background:var(--sea);color:#0b1013;text-decoration:none;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-size:var(--fs-xs)}
@media(max-width:720px){ .unip-libre{font-size:var(--fs-m)} }

/* ===== THEME — other pages (legal, 404, fallback) ===== */
/* Header is solid on these pages, so content starts below it */
.sec--page{padding-top:calc(var(--hd-h) + clamp(48px,9vh,110px));min-height:72vh}
.sec--page.sec--fit{padding-top:var(--hd-h)}
.page-col{max-width:760px;margin:0 auto;width:100%}
.page-col > h1,.page-col article > h1{margin-bottom:clamp(26px,4.5vh,44px)}
.page-col--center{text-align:center}
.page-col--center .lead{margin-left:auto;margin-right:auto}
.page-entry + .page-entry{margin-top:40px;padding-top:40px;border-top:1px solid var(--line)}
.page-entry h2{font-size:clamp(20.2px,2.8vw,27.6px);margin-bottom:12px}
.page-entry h2 a:hover{color:var(--sea)}
/* Blog: breadcrumb, header and category filter, latest article on its image, card grid, pager */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;font-size:var(--fs-s);letter-spacing:.02em;color:var(--mut)}
.crumbs li{display:inline-flex;align-items:center;min-width:0}
.crumbs li svg{flex:none;margin:0 6px;opacity:.5}
.crumbs a{color:inherit;transition:color .3s}
.crumbs a:hover{color:var(--sea)}
.crumbs [aria-current]{color:var(--txt)}
.blog-head{margin-bottom:clamp(28px,5vh,48px)}
.blog-head h1{font-size:clamp(29.4px,3.7vw,47.8px);margin-top:clamp(18px,3vh,28px)}
.blog-cats{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(18px,3vh,26px)}
.blog-cats a{padding:9px 18px;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut);transition:color var(--t-hover) var(--e-out),border-color var(--t-hover) var(--e-out),background var(--t-hover) var(--e-out)}
.blog-cats a:hover{color:var(--sea);border-color:var(--sea-45)}
.blog-cats a.is-on{background:var(--sea);border-color:var(--sea);color:var(--eerie)}
.blog-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:clamp(18px,3vh,26px)}
.blog-tools .blog-cats{margin-top:0}
.blog-search{position:relative;flex:0 1 280px;min-width:200px}
.blog-search input{width:100%;height:38px;padding:0 44px 0 18px;background:transparent;border:1px solid var(--line);border-radius:999px;
  color:var(--txt);font:inherit;font-size:var(--fs-s);transition:border-color var(--t-hover) var(--e-out),background var(--t-hover) var(--e-out)}
.blog-search input::placeholder{color:var(--mut)}
.blog-search input:hover,.blog-search input:focus{border-color:var(--sea-45);background:var(--sea-06)}
.blog-search button{position:absolute;top:3px;right:4px;width:32px;height:32px;display:grid;place-items:center;background:none;border:0;border-radius:50%;
  color:var(--mut);cursor:pointer;transition:color .3s}
.blog-search button:hover{color:var(--sea)}
.blog-results{margin:0 0 clamp(20px,3vh,30px);font-size:var(--fs-s);color:var(--mut)}
.blog-results a{color:var(--sea);transition:color .3s}
.blog-results a:hover{color:#fff}
.blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.blog-meta time{letter-spacing:.04em;text-transform:none;font-size:var(--fs-s)}
.blog-cat{position:relative;z-index:2;color:var(--sea);font-weight:700;transition:color .3s}
.blog-cat:hover{color:#fff}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,28px)}
.blog-card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);animation:blog-in .8s var(--e-out) backwards;
  transition:transform var(--t-hover) var(--e-out),border-color var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out)}
.blog-card:nth-child(2){animation-delay:.08s}
.blog-card:nth-child(3){animation-delay:.16s}
.blog-card:nth-child(n+4){animation-delay:.24s}
@keyframes blog-in{from{opacity:0;transform:translateY(18px)}}
.blog-card:hover,.blog-card:focus-within{transform:translateY(-4px);border-color:var(--sea-45);box-shadow:0 18px 46px -18px rgba(0,0,0,.6)}
.blog-card__img{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--eerie),var(--deep));overflow:hidden}
.blog-card__img img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-out)}
.blog-card:hover .blog-card__img img{transform:scale(1.05)}
.blog-card__body{display:flex;flex-direction:column;flex:1;padding:clamp(20px,2.2vw,26px)}
.blog-card h2,.blog-card h3{font-size:var(--fs-h3);line-height:1.22;margin-top:12px;font-weight:400;color:#fff;letter-spacing:-.01em}
.blog-card h2 a::after,.blog-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.blog-card__excerpt{margin-top:12px;font-size:var(--fs-m);line-height:1.6;color:var(--mut);font-weight:var(--fw-text)}
.blog-card__more{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:auto;padding-top:20px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sea)}
.blog-card__more svg{transition:transform var(--t-hover) var(--e-out)}
.blog-card:hover .blog-card__more svg{transform:translateX(4px)}
/* Latest article: the title sits on its image */
.blog-card--feature{grid-column:1/-1;display:block;min-height:clamp(380px,54vh,500px)}
.blog-card--feature .blog-card__img{position:absolute;inset:0;aspect-ratio:auto}
.blog-card--feature .blog-card__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,26,24,.18) 0%,rgba(20,26,24,.3) 38%,rgba(20,26,24,.92) 100%)}
.blog-card--feature .blog-card__img img{filter:brightness(.82)}
.blog-card--feature .blog-card__body{position:absolute;left:0;right:0;bottom:0;max-width:780px;padding:clamp(24px,4vw,52px)}
.blog-card--feature h2{font-size:clamp(22.1px,2.6vw,35px);line-height:1.14;margin-top:14px;text-shadow:0 2px 24px rgba(10,13,12,.7)}
.blog-card--feature .blog-card__excerpt{color:rgba(232,237,235,.84);font-size:var(--fs-m)}
.blog-card--feature .blog-card__more{margin-top:0;padding-top:20px}
.blog-card--feature.is-text{min-height:0}
.blog-card--feature.is-text .blog-card__body{position:static}
.blog-pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(32px,5vh,52px);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.blog-pager a{display:inline-flex;align-items:center;gap:8px;color:var(--sea);padding:12px 0;transition:color .3s}
.blog-pager a:hover{color:#fff}
.blog-pager__n{color:var(--mut);letter-spacing:.1em}

/* Article: image behind the header and the title, then a narrow reading column, share, related articles */
.post-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden;background:var(--eerie);
  min-height:clamp(380px,62vh,580px);padding:calc(var(--hd-h) + 26px) 0 clamp(30px,5.5vh,56px)}
.post-hero--plain{min-height:0;padding-top:calc(var(--hd-h) + clamp(40px,8vh,90px))}
.post-hero__bg{position:absolute;inset:0;z-index:-1}
.post-hero__bg img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.post-hero__bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(20,26,24,.74) 0%,rgba(20,26,24,.16) 30%,rgba(20,26,24,.34) 52%,rgba(20,26,24,.9) 82%,var(--deep) 100%)}
.post-hero__in{position:relative;flex:1;display:flex;flex-direction:column}
.post-hero .crumbs ol{color:rgba(232,237,235,.76);text-shadow:0 1px 10px rgba(10,13,12,.8)}
.post-hero .crumbs [aria-current]{color:#fff}
.post-hero__txt{margin-top:auto;padding-top:clamp(40px,8vh,90px)}
.post-hero h1{font-size:clamp(24.8px,3.2vw,42.3px);line-height:1.13;letter-spacing:-.015em;margin-top:14px;
  text-shadow:0 2px 30px rgba(10,13,12,.85),0 1px 4px rgba(10,13,12,.5)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:18px;font-size:var(--fs-s);color:rgba(232,237,235,.8);text-shadow:0 1px 12px rgba(10,13,12,.9)}
.post-meta span{display:inline-flex;align-items:center;gap:7px}
.post-meta svg{flex:none;color:var(--sea)}
.wrap--read{max-width:calc(760px + 2 * clamp(20px,4vw,48px))}
.post-body{margin:clamp(34px,6vh,60px) 0 0}
.post-body.unip-libre{font-size:var(--fs-m);line-height:1.8}
.post-body.unip-libre h2{font-size:clamp(20.2px,2.4vw,26.7px);margin:2em 0 .6em}
.post-body.unip-libre h3{font-size:clamp(17.5px,1.9vw,21.2px);margin:1.8em 0 .5em}
.post-body.unip-libre blockquote{margin:2em 0;padding:4px 0 4px 22px;font-size:1.2em;line-height:1.5}
.post-foot{margin:clamp(36px,6vh,60px) 0 0;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.post-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.post-share__lead{flex:none;width:14px;height:14px;margin-right:6px;color:var(--mut)}
.share-btn{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;color:var(--sea);
  transition:color var(--t-hover) var(--e-out),border-color var(--t-hover) var(--e-out),background var(--t-hover) var(--e-out),transform var(--t-hover) var(--e-out)}
.share-btn svg{width:15px;height:15px}
.share-btn:hover{color:#fff;border-color:var(--sea-45);background:var(--sea-12);transform:translateY(-2px)}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(28px,4.5vh,44px)}
.post-nav a{display:flex;flex-direction:column;gap:8px;padding:18px 22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-soft);
  transition:border-color var(--t-hover) var(--e-out),transform var(--t-hover) var(--e-out)}
.post-nav a:hover{border-color:var(--sea-45);transform:translateY(-2px)}
.post-nav span{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sea)}
.post-nav strong{font-weight:400;font-size:var(--fs-m);line-height:1.35;color:#fff}
.post-nav__prev{grid-column:1}
.post-nav__next{grid-column:2;align-items:flex-end;text-align:right}
.post-related{margin-top:clamp(56px,9vh,104px);padding:clamp(44px,7vh,80px) 0 clamp(52px,8vh,90px);background:var(--eerie);border-top:1px solid var(--line)}
.post-related h2{font-size:clamp(20.2px,2.2vw,27.6px);margin-bottom:clamp(22px,3.5vh,34px)}
@media(max-width:1000px){ .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:640px){
  .blog-grid{grid-template-columns:1fr}
  .post-nav{grid-template-columns:1fr}
  .post-nav__next{grid-column:1;align-items:flex-start;text-align:left}
  .blog-search{flex:1 1 100%}
  .blog-card--feature{min-height:420px}
  .post-hero{min-height:420px}
}
@media(prefers-reduced-motion:reduce){ .blog-card{animation:none;transition:none} .blog-card__img img{transition:none} .blog-card:hover,.blog-card:focus-within{transform:none} .blog-card:hover .blog-card__img img{transform:none} }
/* Properties: cards, header on the picture, facts, side card with the request form, energy scales */
.prop-card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);animation:blog-in .8s var(--e-out) backwards;
  transition:transform var(--t-hover) var(--e-out),border-color var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out)}
.prop-card:nth-child(2){animation-delay:.08s}
.prop-card:nth-child(3){animation-delay:.16s}
.prop-card:nth-child(n+4){animation-delay:.24s}
.prop-card:hover,.prop-card:focus-within{transform:translateY(-4px);border-color:var(--sea-45);box-shadow:0 18px 46px -18px rgba(0,0,0,.6)}
.prop-card__img{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--eerie),var(--deep))}
.prop-card__img img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-out)}
.prop-card__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,13,12,.5) 0%,rgba(10,13,12,0) 38%)}
.prop-card:hover .prop-card__img img{transform:scale(1.05)}
.prop-card.is-sold .prop-card__img img{filter:grayscale(.7) brightness(.75)}
.prop-tag{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  background:rgba(10,13,12,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.prop-tag svg{color:var(--sea)}
.prop-tag--solid{position:static}
.prop-state{position:absolute;right:14px;top:14px;z-index:2;padding:7px 12px;border-radius:999px;background:var(--sea);color:var(--eerie);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.prop-state--inline{position:static}
.prop-card__body{display:flex;flex-direction:column;flex:1;padding:clamp(20px,2.2vw,26px)}
.prop-card h2,.prop-card h3{font-size:var(--fs-h3);line-height:1.25;margin-top:12px;font-weight:400;color:#fff;letter-spacing:-.01em}
.prop-card h2 a::after,.prop-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.prop-place{display:inline-flex;align-items:center;gap:5px}
.prop-place svg{color:var(--sea)}
.prop-price{margin-top:14px;font-size:clamp(20.2px,1.8vw,23.9px);line-height:1.15;letter-spacing:-.01em;color:var(--sea)}
.prop-facts{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin-top:auto;padding-top:16px;font-size:var(--fs-s);color:var(--mut)}
.prop-card .prop-price + .prop-facts{margin-top:16px;border-top:1px solid var(--line)}
.prop-facts li{display:inline-flex;align-items:center;gap:7px}
.prop-facts svg{flex:none;color:var(--sea)}

/* Property page: the picture is the header, the title block sits on it */
.prop-hero{min-height:clamp(460px,72vh,700px)}
.prop-hero .post-hero__txt{max-width:900px}
.prop-price--hero{margin-top:16px;font-size:clamp(23.9px,2.8vw,35px);color:#fff;text-shadow:0 2px 24px rgba(10,13,12,.8)}
.prop-facts--hero{margin-top:18px;padding-top:0;font-size:var(--fs-s);color:rgba(232,237,235,.9);text-shadow:0 1px 12px rgba(10,13,12,.9)}
/* Photo button of the header: a small photo that opens the full-screen photo show */
.prop-hero__photos{position:absolute;right:clamp(20px,4vw,48px);bottom:clamp(30px,5.5vh,56px);z-index:3;width:176px;height:118px;padding:0;overflow:hidden;cursor:pointer;
  background:var(--eerie);border:1px solid rgba(255,255,255,.34);border-radius:16px;box-shadow:0 18px 40px -16px rgba(0,0,0,.7);transition:transform .3s var(--e-out),border-color .3s}
.prop-hero__photos img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-out)}
.prop-hero__photos::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,13,12,0) 35%,rgba(10,13,12,.8) 100%)}
.prop-hero__photos span{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.prop-hero__photos svg{color:var(--sea)}
.prop-hero__photos:hover{transform:translateY(-3px);border-color:var(--sea)}
.prop-hero__photos:hover img{transform:scale(1.06)}

.prop-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(32px,5vw,72px);align-items:start;margin-top:clamp(36px,6vh,64px)}
.prop-main > section + section,.prop-main > ul + section,.prop-main > section + ul{margin-top:clamp(34px,5vh,52px)}
.prop-main h2{margin-bottom:18px;font-size:clamp(20.2px,2.2vw,25.8px)}
.prop-main section > p{margin-bottom:1em;font-size:var(--fs-m);line-height:1.8;color:var(--txt)}
.prop-checks{display:grid;gap:12px;list-style:none}
.prop-checks li{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-m);line-height:1.6;color:var(--mut)}
.prop-checks svg{flex:none;margin-top:4px;color:var(--sea)}
.prop-checks strong{font-weight:600;color:#fff}
.prop-checks--chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.prop-bullets{display:grid;gap:6px;margin:0 0 1em;padding-left:1.3em;list-style:disc;font-size:var(--fs-m);line-height:1.7;color:var(--txt)}
.prop-bullets li::marker{color:var(--sea)}
.prop-checks--chips li{align-items:center;padding:9px 16px;color:var(--txt);background:var(--card);border:1px solid var(--line);border-radius:999px}
.prop-checks--chips svg{margin-top:0}
.prop-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.prop-specs div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--fs-m)}
.prop-specs dt{color:var(--mut)}
.prop-specs dd{text-align:right;color:#fff}
.energy-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.energy__name{font-size:var(--fs-s);font-weight:700;letter-spacing:.14em;color:#fff}
.energy__name span{display:block;margin-top:3px;font-size:var(--fs-s);font-weight:var(--fw-text);letter-spacing:0;color:var(--mut)}
.energy__scale{display:flex;gap:4px;margin-top:16px;list-style:none}
.energy__scale li{flex:1;display:grid;place-items:center;height:30px;font-size:var(--fs-s);font-weight:700;color:#0a0d0c;border-radius:6px;opacity:.4}
.energy__scale li.is-on{opacity:1;transform:scaleY(1.35);box-shadow:0 0 0 2px #fff}
.energy__scale li:nth-child(n+6){color:#fff}
.energy__value{margin-top:16px;font-size:22px;color:#fff}
.energy__value span{font-size:var(--fs-s);color:var(--mut)}
.prop-note{margin-top:18px;font-size:var(--fs-s);line-height:1.6;color:var(--mut)}
.prop-note a{color:var(--sea);text-decoration:underline;text-underline-offset:3px}
.prop-note strong{color:#fff}
.prop-legal{margin-top:36px;font-size:var(--fs-s);line-height:1.6;color:var(--mut)}

.prop-aside{position:sticky;top:calc(var(--hd-h) + 20px)}
.prop-card-side{padding:clamp(22px,2.4vw,30px);background:var(--card);border:1px solid var(--line);border-radius:var(--r-card)}
.prop-ref{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.prop-card-side .prop-price{margin-top:8px}
.prop-aside__place{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:var(--fs-s);color:var(--mut)}
.prop-aside__place svg{color:var(--sea)}
.prop-contact{display:flex;align-items:center;gap:16px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.prop-contact img{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:top center}
.prop-contact div{display:flex;flex-direction:column;gap:4px;min-width:0}
.prop-contact strong{font-size:var(--fs-m);font-weight:500;color:#fff}
.prop-contact span{font-size:var(--fs-s);color:var(--mut)}
.prop-contact a{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-s);color:var(--sea);overflow-wrap:anywhere;transition:color .3s}
.prop-contact a[href^="tel:"],.mprop-contact__who a[href^="tel:"]{white-space:nowrap}
.prop-contact a:hover{color:#fff}
.prop-aside__title{margin:24px 0 14px;padding-top:22px;border-top:1px solid var(--line);font-size:var(--fs-h3)}
.prop-form{display:grid;gap:14px}
.prop-form label span{display:block;margin-bottom:6px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.prop-form input,.prop-form textarea{width:100%;padding:12px 14px;color:var(--txt);background:#141a18;border:1px solid var(--line);border-radius:12px;
  font:inherit;font-size:var(--fs-m);transition:border-color .3s,box-shadow .3s}
.prop-form input{height:46px;padding:0 14px}
.prop-form input:hover,.prop-form textarea:hover{border-color:var(--sea-45)}
.prop-form input:focus,.prop-form textarea:focus{outline:none;border-color:var(--sea);box-shadow:0 0 0 3px var(--sea-12)}
.prop-form .btn{width:100%;margin-top:4px}
.prop-form .fine{margin:0;text-align:left}
.prop-form__error{font-size:var(--fs-s);color:#ff9d9d}
.prop-form--done{padding:18px;color:#fff;background:var(--sea-06);border:1px solid var(--sea-26);border-radius:14px}
@media(max-width:1000px){
  .prop-layout{grid-template-columns:1fr}
  .prop-aside{position:static}
}
@media(max-width:640px){
  .prop-specs,.energy-row{grid-template-columns:1fr}
  .prop-hero__photos{top:34%;bottom:auto;width:120px;height:84px}
}
@media(prefers-reduced-motion:reduce){ .prop-card{animation:none;transition:none} .prop-card__img img{transition:none} .prop-card:hover,.prop-card:focus-within{transform:none} .prop-card:hover .prop-card__img img{transform:none} }
/* Properties, option 2 (modern): posters in an editorial grid, full-screen photo, sticky section bar, big numbers, photo viewer, request panel */
.mlist__title{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-top:clamp(18px,3vh,28px)}
.mlist__title h1{font-size:clamp(33.1px,4.6vw,58.9px)}
.mlist__title p{font-size:var(--fs-m);color:var(--mut)}
.mlist__title strong{margin-right:4px;font-size:24px;font-weight:300;color:#fff}
.mlist__filters{display:flex;gap:4px;width:fit-content;max-width:100%;margin-top:24px;padding:5px;overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:999px;scrollbar-width:none}
.mlist__filters a{padding:9px 18px;border-radius:999px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--mut);
  transition:color var(--t-hover) var(--e-out),background var(--t-hover) var(--e-out)}
.mlist__filters a:hover{color:var(--sea)}
.mlist__filters a.is-on{background:var(--sea);color:var(--eerie)}
.mlist__head{margin-bottom:clamp(28px,5vh,48px)}
.mlist__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(280px,27vw,400px);gap:clamp(14px,1.6vw,22px)}
.poster--wide{grid-column:span 8;grid-row:span 2}
.poster--side{grid-column:span 4}
.poster--half{grid-column:span 6}
.poster{position:relative;isolation:isolate;overflow:hidden;background:var(--eerie);border:1px solid var(--line);border-radius:var(--r-card);animation:blog-in .8s var(--e-out) backwards;
  transition:transform var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out),border-color var(--t-hover) var(--e-out)}
.poster:nth-child(2){animation-delay:.08s}
.poster:nth-child(3){animation-delay:.16s}
.poster:nth-child(n+4){animation-delay:.24s}
.poster:hover,.poster:focus-within{transform:translateY(-4px);border-color:var(--sea-45);box-shadow:0 26px 60px -24px rgba(0,0,0,.7)}
.poster__img{position:absolute;inset:0;z-index:-2}
.poster__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e-out)}
.poster:hover .poster__img img{transform:scale(1.06)}
.poster.is-sold .poster__img img{filter:grayscale(.7) brightness(.7)}
.poster::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,13,12,.5) 0%,rgba(10,13,12,0) 28%,rgba(10,13,12,.5) 60%,rgba(10,13,12,.94) 100%)}
.poster__top{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;gap:10px}
.poster__top .prop-tag,.poster__top .prop-state{position:static}
.poster__body{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;padding:clamp(20px,2.4vw,32px)}
.poster__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:rgba(232,237,235,.8)}
.poster__meta span{display:inline-flex;align-items:center;gap:5px}
.poster__meta svg{color:var(--sea)}
.poster h2,.poster h3{margin-top:10px;font-size:var(--fs-h3);line-height:1.15;font-weight:400;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 20px rgba(10,13,12,.7)}
.poster--wide h2{max-width:20ch;font-size:clamp(23.9px,2.8vw,38.6px);line-height:1.08}
.poster h2 a::after,.poster h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.poster__price{margin-top:12px;font-size:clamp(18.4px,1.7vw,23.9px);line-height:1.1;color:var(--sea)}
.poster__more{display:flex;align-items:center;justify-content:space-between;gap:12px;max-height:0;margin-top:0;overflow:hidden;opacity:0;
  transition:max-height .5s var(--e-out),opacity .4s var(--e-out),margin-top .4s var(--e-out)}
.poster:hover .poster__more,.poster:focus-within .poster__more{max-height:96px;margin-top:16px;opacity:1}
@media(hover:none){.poster__more{max-height:none;margin-top:14px;opacity:1}}
.poster__facts{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;font-size:var(--fs-s);color:rgba(232,237,235,.9)}
.poster__facts li{display:inline-flex;align-items:center;gap:6px}
.poster__facts svg{color:var(--sea)}
.poster__arrow{flex:none;color:var(--sea);transition:transform var(--t-hover) var(--e-out)}
.poster:hover .poster__arrow{transform:translate(3px,-3px)}

/* Property page, option 2 */
.mprop-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden;background:var(--eerie);
  min-height:clamp(560px,100svh,920px);padding:calc(var(--hd-h) + 26px) 0 clamp(28px,5vh,52px)}
.mprop-hero--plain{min-height:0;padding-top:calc(var(--hd-h) + clamp(40px,8vh,90px))}
.mprop-hero__bg{position:absolute;inset:0;z-index:-1}
.mprop-hero__bg img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.74);animation:mprop-zoom 20s var(--e-out) both}
@keyframes mprop-zoom{from{transform:scale(1.08)}}
.mprop-hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,26,24,.72) 0%,rgba(20,26,24,.1) 26%,rgba(20,26,24,.3) 48%,rgba(20,26,24,.88) 82%,var(--deep) 100%)}
.mprop-hero .crumbs ol{color:rgba(232,237,235,.76);text-shadow:0 1px 10px rgba(10,13,12,.8)}
.mprop-hero .crumbs [aria-current]{color:#fff}
.mprop-hero__in{position:relative;flex:1;display:flex;flex-direction:column}
.mprop-hero__main{margin-top:auto;padding-top:clamp(40px,8vh,90px)}
.mprop-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:rgba(232,237,235,.88)}
.mprop-hero h1{max-width:19ch;margin-top:18px;font-size:clamp(29.4px,5vw,71.8px);line-height:1.03;letter-spacing:-.025em;
  text-shadow:0 2px 30px rgba(10,13,12,.85),0 1px 4px rgba(10,13,12,.5)}
.mprop-hero__bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 28px;margin-top:clamp(26px,5vh,50px);padding-top:clamp(18px,3vh,28px);border-top:1px solid rgba(255,255,255,.2)}
.mprop-hero__price{display:flex;flex-direction:column;gap:4px;text-shadow:0 2px 24px rgba(10,13,12,.8)}
.mprop-hero__price small{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:rgba(232,237,235,.72)}
.mprop-hero__price strong{font-size:clamp(25.8px,3.5vw,47.8px);font-weight:300;line-height:1.05;letter-spacing:-.02em;color:#fff}
.mprop-hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

.snav{position:sticky;top:var(--hd-h);z-index:60;background:rgba(14,19,17,.82);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line)}
.snav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:58px}
.snav ul{display:flex;gap:4px;list-style:none;overflow-x:auto;scrollbar-width:none}
.snav a{display:block;padding:10px 16px;border-radius:999px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--mut);
  transition:color .3s,background .3s}
.snav a:hover{color:var(--sea)}
.snav a[aria-current="true"]{background:var(--sea-12);color:var(--sea)}
.snav__cta{display:flex;flex:none;align-items:center;gap:16px}
.snav__cta strong{font-size:var(--fs-h3);font-weight:400;color:#fff}

.mprop-body{padding-top:clamp(36px,6vh,64px)}
.mprop-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;list-style:none;overflow:hidden;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card)}
.mprop-facts li{display:flex;flex-direction:column;gap:6px;padding:clamp(18px,2vw,28px);background:var(--card)}
.mprop-facts svg{margin-bottom:10px;color:var(--sea)}
.mprop-facts strong{font-size:clamp(27.6px,3.1vw,42.3px);font-weight:300;line-height:1;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.mprop-facts strong small{margin-left:4px;font-size:.4em;letter-spacing:0;color:var(--mut)}
.mprop-facts span{font-size:var(--fs-s);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.mprop-sec{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:clamp(24px,5vw,80px);margin-top:clamp(48px,8vh,96px);padding-top:clamp(28px,4vh,44px);
  border-top:1px solid var(--line);scroll-margin-top:calc(var(--hd-h) + 70px)}
.mprop-sec--photos{display:block;padding-top:0;border-top:0}
.mprop-sec__head{display:flex;flex-direction:column;gap:10px}
.mprop-sec__head span{font-size:var(--fs-xs);letter-spacing:.2em;color:var(--sea)}
.mprop-sec__head h2{font-size:clamp(20.2px,2vw,27.6px);line-height:1.15}
.mprop-sec__body > p{max-width:68ch;margin-bottom:1.1em;font-size:var(--fs-m);line-height:1.85;color:var(--txt)}
.mprop-sec__body p.prop-note{margin:18px 0 0;font-size:var(--fs-s);line-height:1.6;color:var(--mut)}
.mprop-sec__body p.prop-legal{margin-top:24px}
.mprop-sec__body .prop-checks--chips{margin-top:8px}
.mprop-levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;list-style:none}
.mprop-levels li{padding:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-soft)}
.mprop-levels li > span{font-size:var(--fs-xs);letter-spacing:.2em;color:var(--sea)}
.mprop-levels strong{display:block;margin:8px 0;font-size:var(--fs-h3);font-weight:500;color:#fff}
.mprop-levels p{margin:0;font-size:var(--fs-m);line-height:1.6;color:var(--mut)}
.mprop-sec__body .mprop-bigprice{margin:0;font-size:clamp(31.3px,3.7vw,51.5px);font-weight:300;line-height:1.05;letter-spacing:-.02em;color:#fff}
.mprop-sec .energy__scale li{height:34px}

.mgal{display:grid;gap:10px;min-height:300px;aspect-ratio:16/7;overflow:hidden;border-radius:var(--r-card)}
.mgal--1{grid-template-columns:1fr}
.mgal--2{grid-template-columns:1fr 1fr}
.mgal--3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.mgal--3 .mgal__tile:first-child{grid-row:span 2}
.mgal--4,.mgal--5{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}
.mgal--4 .mgal__tile:first-child,.mgal--5 .mgal__tile:first-child{grid-row:span 2}
.mgal--4 .mgal__tile:nth-child(4){grid-column:2 / span 2}
.mgal__tile{position:relative;display:block;padding:0;overflow:hidden;background:var(--eerie);border:0;cursor:zoom-in}
.mgal__tile img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-out)}
.mgal__tile:hover img{transform:scale(1.05)}
.mgal__more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(10,13,12,.55);font-size:22px;color:#fff}

.viewer{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;color:#fff;background:rgba(6,9,8,.97);border:0}
.viewer[open]{display:flex;flex-direction:column}
.viewer::backdrop{background:rgba(0,0,0,.85)}
.viewer__bar{display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,3vw,32px);font-size:var(--fs-s);letter-spacing:.12em;color:var(--mut)}
.viewer__bar button,.drawer header button{display:grid;place-items:center;width:44px;height:44px;padding:0;color:#fff;background:none;border:1px solid rgba(255,255,255,.22);border-radius:50%;cursor:pointer;transition:color .3s,border-color .3s}
.viewer__bar button:hover,.drawer header button:hover{color:var(--sea);border-color:var(--sea-45)}
.viewer__stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.viewer__stage img{max-width:100%;max-height:100%;object-fit:contain;user-select:none}
.viewer__nav{position:absolute;top:50%;display:grid;place-items:center;width:52px;height:52px;padding:0;color:#fff;background:rgba(10,13,12,.55);border:1px solid rgba(255,255,255,.24);border-radius:50%;
  cursor:pointer;transform:translateY(-50%);transition:color .3s,border-color .3s}
.viewer__nav:hover{color:var(--sea);border-color:var(--sea-45)}
.viewer__nav--prev{left:clamp(10px,2vw,24px)}
.viewer__nav--next{right:clamp(10px,2vw,24px)}
.viewer__thumbs{display:flex;justify-content:center;gap:8px;padding:14px;list-style:none;overflow-x:auto}
.viewer__thumbs button{display:block;width:72px;height:48px;padding:0;overflow:hidden;background:none;border:2px solid transparent;border-radius:8px;opacity:.55;cursor:pointer;transition:opacity .3s,border-color .3s}
.viewer__thumbs button[aria-current="true"]{border-color:var(--sea);opacity:1}
.viewer__thumbs img{display:block;width:100%;height:100%;object-fit:cover}
body:has(dialog[open]){overflow:hidden}

/* For the team only: switch between the two presentations of the properties */
.design-switch{position:fixed;left:50%;bottom:16px;z-index:80;display:flex;align-items:center;gap:4px;padding:5px;transform:translateX(-50%);
  background:rgba(14,19,17,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;box-shadow:0 14px 40px -12px rgba(0,0,0,.7)}
.design-switch span{padding:0 12px 0 14px;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.design-switch a{padding:9px 16px;border-radius:999px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);transition:color .3s,background .3s}
.design-switch a:hover{color:var(--sea)}
.design-switch a.is-on{background:var(--sea);color:var(--eerie)}
@media(max-width:760px){.design-switch--above-bar{bottom:88px}}

.drawer{position:fixed;inset:0 0 0 auto;width:min(480px,100vw);height:100dvh;max-width:none;max-height:none;margin:0;padding:0;color:var(--txt);background:var(--card);border:0;border-left:1px solid var(--line);box-shadow:-30px 0 80px rgba(0,0,0,.6)}
.drawer[open]{animation:drawer-in .45s var(--e-out)}
@keyframes drawer-in{from{transform:translateX(100%)}}
.drawer::backdrop{background:rgba(6,9,8,.62);backdrop-filter:blur(3px)}
.drawer__panel{height:100%;padding:clamp(24px,3vw,36px);overflow-y:auto}
.drawer header{display:flex;justify-content:space-between;gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.drawer header h2{font-size:22px}
.drawer header p{margin-top:6px;font-size:var(--fs-s);line-height:1.4;color:var(--mut)}

.mprop-contact{margin-top:clamp(56px,9vh,104px);padding:clamp(36px,6vh,64px) 0;background:var(--eerie);border-top:1px solid var(--line)}
.mprop-contact__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 40px}
.mprop-contact__who{display:flex;align-items:center;gap:22px}
.mprop-contact__who img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:top center}
.mprop-contact__who div{display:flex;flex-direction:column;gap:5px}
.mprop-contact__who strong{font-size:var(--fs-h3);font-weight:500;color:#fff}
.mprop-contact__who span{font-size:var(--fs-s);color:var(--mut)}
.mprop-contact__who a{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-s);color:var(--sea);transition:color .3s}
.mprop-contact__who a:hover{color:#fff}
.mprop-similar{padding:clamp(44px,7vh,80px) 0 clamp(52px,8vh,90px)}
.mprop-similar h2{margin-bottom:28px;font-size:clamp(20.2px,2.2vw,27.6px)}
.mprop-similar__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.poster--third{aspect-ratio:4/5}
.mprop-bar{display:none}

@media(max-width:1000px){
  .mlist__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(300px,42vw,400px)}
  .poster--wide{grid-column:span 2;grid-row:span 1}
  .poster--side,.poster--half{grid-column:span 1}
  .mprop-similar__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mprop-sec{grid-template-columns:1fr;gap:20px}
}
@media(max-width:760px){
  .snav__cta{display:none}
  .mprop-hero__ctas .btn{display:none}
  .mprop{padding-bottom:78px}
  .mprop-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(14,19,17,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
  .mprop-bar strong{display:block;font-size:var(--fs-h3);font-weight:400;color:#fff}
}
@media(max-width:640px){
  .mlist__grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .poster,.poster--wide,.poster--side,.poster--half{grid-column:auto;grid-row:auto;min-height:440px}
  .mprop-similar__grid{grid-template-columns:1fr}
  .mprop-levels{grid-template-columns:1fr}
  .mgal{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:120px;aspect-ratio:auto;min-height:0}
  .mgal .mgal__tile:first-child{grid-column:1 / -1;grid-row:span 2}
  .mgal .mgal__tile:nth-child(4){grid-column:auto}
  .mprop-hero{min-height:620px}
}
@media(prefers-reduced-motion:reduce){ .poster{animation:none;transition:none} .poster__img img,.mgal__tile img{transition:none} .mprop-hero__bg img{animation:none} .drawer[open]{animation:none} .poster__more{transition:none} .poster:hover,.poster:focus-within{transform:none} }
/* Legal links in the footer base line */
.base-links a{transition:color .3s}
.base-links a:hover{color:var(--sea)}

/* ===== COOKIE BANNER (tarteaucitron) — brand design ===== */
/* Its stylesheet loads after this one, hence the #tarteaucitronRoot prefix and !important */
#tarteaucitronRoot,#tarteaucitronRoot *{font-family:var(--sans)!important}
#tarteaucitronRoot button{transition:background .3s var(--e-out),color .3s var(--e-out),border-color .3s var(--e-out),transform .3s var(--e-out)}

/* --- Banner: floating card, bottom left: title, text + privacy link, two buttons, round X --- */
html body #tarteaucitronRoot #tarteaucitronAlertBig{position:fixed!important;inset:auto auto 22px 22px!important;
  width:min(430px,calc(100vw - 28px))!important;max-width:none!important;display:grid!important;
  grid-template-columns:1fr 1fr;gap:12px;padding:26px!important;border-radius:24px!important;
  background:linear-gradient(165deg,rgba(35,43,40,.94),rgba(14,19,17,.96))!important;
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--sea-12)!important;box-shadow:0 30px 80px rgba(0,0,0,.6)!important;
  color:var(--txt)!important;text-align:left!important;animation:unipTac .8s var(--e-out) both}
@keyframes unipTac{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
html body #tarteaucitronRoot #tarteaucitronAlertBig::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 70% at 0% 0%,var(--sea-06),transparent 60%)}

html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert{grid-column:1/-1!important;display:block!important;
  margin:0 0 6px!important;padding:0!important;color:var(--txt)!important;font-size:15px!important;line-height:1.65!important;
  font-weight:300!important;text-align:left!important}
html body #tarteaucitronRoot #tarteaucitronAlertBig .unip-tac-t{display:block;margin:0 0 10px;padding-right:44px;
  font-family:var(--serif)!important;font-weight:500;font-size:22px;line-height:1.25;color:var(--txt);letter-spacing:-.01em}
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert a{color:var(--mut)!important;font-size:inherit!important;
  text-decoration:underline!important;text-underline-offset:4px;text-decoration-color:rgba(159,180,173,.3)!important}
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert a:hover{color:var(--sea)!important}

/* Buttons: Tout accepter | Personnaliser */
html body #tarteaucitronRoot #tarteaucitronAlertBig button{margin:0!important;height:46px!important;padding:0 16px!important;
  border:0!important;border-radius:14px!important;font-size:13.5px!important;font-weight:700!important;letter-spacing:.14em!important;
  text-transform:uppercase!important;line-height:1!important;display:inline-flex!important;align-items:center;justify-content:center;
  cursor:pointer;text-decoration:none!important}
html body #tarteaucitronRoot #tarteaucitronAlertBig button .tarteaucitronCheck,
html body #tarteaucitronRoot #tarteaucitronAlertBig button .tarteaucitronCross{display:none!important}
html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPersonalize2{grid-column:1!important;grid-row:2!important;
  background:var(--sea)!important;color:var(--eerie)!important;box-shadow:0 10px 26px rgba(152,210,235,.16)!important}
html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPersonalize2:hover{background:var(--soft)!important;transform:translateY(-1px)}
html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronCloseAlert{grid-column:2!important;grid-row:2!important;
  background:transparent!important;color:var(--txt)!important;border:1px solid rgba(255,255,255,.2)!important}
html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronCloseAlert:hover{background:var(--sea-06)!important;border-color:var(--sea-45)!important;
  color:var(--sea)!important;transform:translateY(-1px)}
/* The privacy link sits in the text */
html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPrivacyUrl{display:none!important}
/* tarteaucitron closes the card with an inline display:none: our !important must not keep it on screen */
html body #tarteaucitronRoot #tarteaucitronAlertBig[style*="display: none"],
html body #tarteaucitronRoot #tarteaucitronAlertBig[style*="display:none"],
html body #tarteaucitronRoot #tarteaucitronAlertBig button[style*="display: none"],
html body #tarteaucitronRoot #tarteaucitronAlertBig button[style*="display:none"]{display:none!important}

/* --- Panel --- */
html body.tarteaucitron-modal-open #tarteaucitronRoot::before{background:rgba(6,9,8,.78)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html body #tarteaucitronRoot div#tarteaucitron{top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;
  margin:0!important;width:min(720px,calc(100vw - 28px))!important;max-width:none!important;max-height:min(86vh,880px)!important;
  background:var(--deep)!important;border:1px solid var(--line)!important;border-radius:26px!important;overflow:hidden!important;
  box-shadow:0 40px 120px rgba(0,0,0,.7)!important;padding:0!important}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronClosePanel{position:absolute!important;top:14px!important;right:14px!important;
  left:auto!important;width:36px!important;height:36px!important;padding:0!important;border-radius:50%!important;
  background:rgba(255,255,255,.06)!important;border:1px solid var(--line)!important;color:var(--mut)!important;font-size:0!important;
  text-indent:0!important;z-index:3}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronClosePanel::after{content:"✕";font-size:14px;line-height:34px;display:block}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronClosePanel:hover{background:var(--sea-12)!important;color:var(--sea)!important}
html body #tarteaucitronRoot #tarteaucitron div#tarteaucitronServices{max-height:min(80vh,820px)!important;overflow:auto!important;
  background:transparent!important;box-shadow:none!important;margin:0!important;padding-bottom:84px!important}

/* Panel header */
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine{background:transparent!important;border:0!important;
  border-bottom:1px solid var(--line)!important;border-radius:0!important;margin:0!important;padding:30px 30px 26px!important;
  background-image:radial-gradient(100% 120% at 0% 0%,var(--sea-06),transparent 62%)!important}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronH1{display:block!important;font-family:var(--serif)!important;font-weight:500!important;
  font-size:clamp(22px,3vw,27px)!important;color:var(--txt)!important;text-align:left!important;margin:0 0 12px!important;letter-spacing:-.01em}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo{display:block!important;background:transparent!important;border:0!important;
  padding:0!important;margin:0 0 20px!important;color:var(--mut)!important;font-size:15px!important;line-height:1.65!important;
  font-weight:300!important;text-align:left!important;max-width:60ch}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo br{display:none!important}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronPrivacyUrlDialog{display:inline-block!important;margin-top:10px!important;
  padding:0!important;background:transparent!important;border:0!important;color:var(--mut)!important;font-size:12.5px!important;
  text-decoration:underline!important;text-underline-offset:4px}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronPrivacyUrlDialog:hover{color:var(--sea)!important}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronMainLine .tarteaucitronName{display:none!important}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronMainLine .tarteaucitronAsk{display:flex!important;gap:10px;margin:0!important;
  padding:0!important;float:none!important;text-align:left!important}

/* Allow / Deny pills (header + each group) */
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronAsk button{margin:0!important;height:40px!important;padding:0 18px!important;
  border:1px solid rgba(255,255,255,.18)!important;border-radius:12px!important;background:transparent!important;color:var(--txt)!important;
  font-size:13px!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase!important;line-height:1!important;
  display:inline-flex!important;align-items:center;gap:8px;cursor:pointer;opacity:1!important}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronAsk button:hover{border-color:var(--sea-45)!important;background:var(--sea-06)!important}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronAsk button[aria-pressed=true].tarteaucitronAllow,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronLine.tarteaucitronIsAllowed .tarteaucitronAllow,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronAllAllowed.tarteaucitronIsSelected{background:var(--sea)!important;
  border-color:var(--sea)!important;color:var(--eerie)!important}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronAsk button[aria-pressed=true].tarteaucitronDeny,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronLine.tarteaucitronIsDenied .tarteaucitronDeny,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronAllDenied.tarteaucitronIsSelected{background:rgba(255,255,255,.16)!important;
  border-color:transparent!important;color:var(--txt)!important}
/* The tick/cross glyphs fall back to a box in our font: the label and the filled state say it */
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronCheck,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronCross{display:none!important}
/* Contradicts the group below it (Mesure d'audience does need consent) */
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices li#tarteaucitronNoServicesTitle{display:none!important}

/* Service groups */
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder{background:transparent!important;border:0!important;margin:0!important;padding:0!important}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronTitle{margin:0!important;padding:0!important;background:transparent!important}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronTitle button{width:100%!important;margin:0!important;
  padding:18px 30px!important;background:transparent!important;border:0!important;border-top:1px solid var(--line)!important;
  color:var(--txt)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase!important;
  text-align:left!important;display:flex!important;align-items:center;gap:12px;cursor:pointer}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronTitle button:hover{background:var(--sea-06)!important;color:var(--sea)!important}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronDetails{background:transparent!important;border:0!important;
  color:var(--mut)!important;font-size:13px!important;line-height:1.6!important;font-weight:300!important;padding:0 30px 4px!important;
  margin:0!important;text-align:left!important}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine{background:transparent!important;border:0!important;
  border-top:1px solid rgba(51,61,58,.6)!important;margin:0!important;padding:20px 30px!important;display:flex!important;
  align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;transition:background .3s}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine:hover{background:rgba(255,255,255,.02)!important}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronName{width:auto!important;flex:1 1 260px;
  margin:0!important;padding:0!important;text-align:left!important}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronH2,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronH3{display:block!important;color:var(--txt)!important;font-size:14px!important;
  font-weight:600!important;letter-spacing:0!important;text-transform:none!important;margin:0 0 6px!important}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronLine .tarteaucitronName span{color:var(--mut)!important;font-size:12.5px!important;
  line-height:1.55!important;font-weight:300!important}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronLine .tarteaucitronName button.tarteaucitron-toggle-group{margin-top:10px!important;
  padding:0!important;background:transparent!important;border:0!important;color:var(--mut)!important;font-size:11.5px!important;
  letter-spacing:0!important;text-transform:none!important;text-decoration:underline!important;text-underline-offset:4px;cursor:pointer}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronLine .tarteaucitronName button.tarteaucitron-toggle-group:hover{color:var(--sea)!important}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk{float:none!important;margin:0!important;
  padding:0!important;display:flex!important;gap:8px}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronSelfLink,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronScrollbarChild{display:none!important}

/* Save bar */
html body #tarteaucitronRoot div#tarteaucitronSave{position:absolute!important;left:0!important;right:0!important;bottom:0!important;
  margin:0!important;padding:16px 30px!important;background:linear-gradient(180deg,rgba(20,26,24,.6),var(--deep) 45%)!important;
  border-top:1px solid var(--line)!important;text-align:center!important;z-index:2}
html body #tarteaucitronRoot button#tarteaucitronSaveButton{box-sizing:border-box!important;width:100%!important;margin:0!important;height:48px!important;padding:0 20px!important;
  background:var(--sea)!important;color:var(--eerie)!important;border:0!important;border-radius:14px!important;font-size:13px!important;
  font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase!important;cursor:pointer;
  box-shadow:0 10px 26px rgba(152,210,235,.16)!important}
html body #tarteaucitronRoot button#tarteaucitronSaveButton:hover{background:var(--soft)!important}

/* Scrollbar */
#tarteaucitronRoot #tarteaucitronServices{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#tarteaucitronRoot #tarteaucitronServices::-webkit-scrollbar{width:8px}
#tarteaucitronRoot #tarteaucitronServices::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}

/* No floating icon (showIcon is off): the footer link reopens the panel */
html body #tarteaucitronRoot #tarteaucitronIcon{display:none!important}

@media (max-width:640px){
  html body #tarteaucitronRoot #tarteaucitronAlertBig{inset:auto 12px 12px 12px!important;width:auto!important;padding:22px!important;
    border-radius:20px!important}
  html body #tarteaucitronRoot #tarteaucitronAlertBig .unip-tac-t{font-size:20px}
  html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine{padding:26px 20px 22px!important}
  html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronTitle button,
  html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine{padding-left:20px!important;padding-right:20px!important}
  html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronDetails{padding-left:20px!important;padding-right:20px!important}
  html body #tarteaucitronRoot div#tarteaucitronSave{padding:14px 20px!important}
}
@media (prefers-reduced-motion:reduce){
  html body #tarteaucitronRoot #tarteaucitronAlertBig{animation:none!important}
}

/* Logo UNI Prestige (lockup complet, septembre 2026) : le mot Prestige est dans l'image, on masque le texte a cote. */
#hd .brand .p,
#pre .pre-word{display:none}

/* ===== HOME — the properties of the moment, the film as a normal block ===== */
/* The properties of the moment: a carousel of cards across the whole width of the page (the photo, then the title, the place and
   the price, then the person who presents it); the next card peeks in, the edges fade, the script of the page makes it turn */
#biens{padding:clamp(64px,10vh,120px) 0}
/* The link and the arrows sit right beside the text, in the middle of its height; on a narrow screen they go under it */
.bhead{display:flex;flex-wrap:wrap;align-items:center;gap:22px clamp(28px,3vw,44px);margin-bottom:clamp(26px,4.2vh,44px)}
.bhead__text{flex:0 1 600px;min-width:0}
.bhead .lead{margin-top:12px}
.bnav{display:flex;align-items:center;gap:clamp(18px,2vw,28px)}
.bmore{display:inline-flex;align-items:center;gap:8px;padding-bottom:5px;border-bottom:1.5px solid currentColor;white-space:nowrap;
  font-size:var(--fs-m);font-weight:600;color:var(--txt);transition:color var(--t-hover) var(--e-out)}
.bmore:hover,.bmore:focus-visible{color:var(--sea)}
.bnav .anav{display:flex;gap:10px}
.bnav .anav button{display:inline-grid;place-items:center;width:46px;height:46px;margin-left:0}

.pcar{--pg:clamp(16px,1.7vw,26px);--pw:clamp(290px,27vw,440px);--gut:clamp(20px,4vw,48px);
  display:flex;align-items:flex-start;gap:var(--pg);
  /* the first card starts where the title starts; the track itself reaches both edges of the page */
  padding:0 max(var(--gut),calc((100% - 1180px) / 2 + var(--gut))) 6px}
/* Double class beats the fade vars of .swipe: no fade on the left until the track has moved */
.pcar.swipe{--fade-l:0px}
.pcar.swipe.is-scrolled{--fade-l:var(--fade)}
/* One or two cards stay in a row, bigger, without a carousel */
.pcar--few{--pw:clamp(300px,36vw,520px)}

.pcard{position:relative;flex:0 0 auto;width:var(--pw);min-width:0}
/* 16/9: the agency's visuals are 16/9 and keep their writing whole */
.pcard__img{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:var(--r-card);border:1px solid var(--line);background:var(--eerie)}
.pcard__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
.pcard:hover .pcard__img img,.pcard:focus-within .pcard__img img{transform:scale(1.05)}
.pcard.is-sold .pcard__img img{filter:grayscale(.7) brightness(.7)}
.pcard__pill{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  background:var(--sea);color:var(--eerie);font-size:var(--fs-xs);font-weight:600;line-height:1;letter-spacing:.02em}
.pcard__body{padding-top:16px}
.pcard h3{font-size:var(--fs-h3);font-weight:500;line-height:1.3;letter-spacing:0;color:#fff}
.pcard h3 a{transition:color var(--t-hover) var(--e-out)}
.pcard h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.pcard:hover h3 a,.pcard h3 a:focus-visible{color:var(--sea)}
.pcard__where{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:6px;font-size:var(--fs-m);color:var(--mut)}
.pcard__where span{color:var(--sea)}
.pcard__agent{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:var(--fs-s);color:var(--txt)}
.pcard__face{flex:none;display:grid;place-items:center;width:38px;height:38px;overflow:hidden;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--sea)}
.pcard__face img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:1000px){.pcar{--pw:clamp(260px,42vw,380px)}.pcar--few{--pw:clamp(260px,42vw,440px)}}
@media(max-width:620px){
  .pcar{--pw:min(78vw,340px)}
  /* the finger swipes it (and it turns by itself): the arrows would not fit next to the link */
  .bnav .anav{display:none}
  .pcar--few{flex-direction:column;align-items:stretch;--pw:100%}
}

/* A visual that already carries its title and price: left clean, with a tag, a way in and a light shade */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.poster--visual::after{background:linear-gradient(180deg,rgba(10,13,12,.42) 0%,rgba(10,13,12,0) 26%,rgba(10,13,12,0) 74%,rgba(10,13,12,.3) 100%)!important}
.poster--visual .poster__img img{object-position:50% 50%!important}
.poster__go{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-end;padding:clamp(14px,1.6vw,22px)}
.poster__go svg{box-sizing:content-box;padding:11px;border-radius:50%;background:rgba(10,13,12,.55);border:1px solid rgba(255,255,255,.18);color:var(--sea);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .45s var(--e-out),background .3s,color .3s}
.poster--visual:hover .poster__go svg{transform:translate(3px,-3px);background:var(--sea);color:var(--eerie)}

#faq{min-height:auto;padding:clamp(64px,10vh,120px) 0}

/* ===== PROPOSALS for the circle and the places (seen by the signed-in team: /?apercu=a or /?apercu=b) ===== */
.pc{padding:clamp(72px,11vh,130px) 0;background:var(--black);overflow:hidden}
#cercle.pc{text-align:left}
.pc-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.pc-stage{display:grid;place-items:center;perspective:1200px;min-height:clamp(260px,34vw,400px)}
.pc-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;width:min(100%,440px);aspect-ratio:1.586;
  padding:clamp(18px,2.2vw,28px);border-radius:22px;border:1px solid rgba(152,210,235,.28);
  background:linear-gradient(135deg,#2a3431 0%,#111715 55%,#1c2523 100%);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 90px 6px rgba(152,210,235,.12),inset 0 1px 0 rgba(255,255,255,.12);
  transform:rotateY(-14deg) rotateX(7deg) rotate(-3deg);transition:transform .9s var(--e-out);animation:pc-float 7s ease-in-out infinite}
.pc-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 80% 28%,transparent 0 54px,rgba(152,210,235,.16) 55px 56px,transparent 57px 92px,rgba(152,210,235,.11) 93px 94px,transparent 95px 134px,rgba(152,210,235,.07) 135px 136px,transparent 137px)}
.pc-stage:hover .pc-card{transform:none;animation-play-state:paused}
@keyframes pc-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.pc-sheen{position:absolute;inset:-40%;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%);animation:pc-sheen 6s ease-in-out infinite}
@keyframes pc-sheen{0%,55%{transform:translateX(-70%)}100%{transform:translateX(70%)}}
.pc-logo{position:relative;align-self:flex-start;width:auto;height:clamp(26px,3vw,36px)}
.pc-chip{position:relative;width:46px;height:34px;border-radius:7px;background:linear-gradient(135deg,#e8f4fb,#98d2eb 55%,#3d7ea6);opacity:.85}
.pc-bottom{position:relative;display:flex;flex-direction:column;gap:6px}
.pc-name{font-family:var(--serif);font-style:italic;font-size:clamp(23.9px,2.8vw,35px);line-height:1;color:#fff}
.pc-sub{font-size:var(--fs-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--sea)}
.pc-txt h2{margin-bottom:clamp(22px,3.4vh,36px)}
.pc-perks{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vh,28px) clamp(20px,3vw,40px);margin-bottom:clamp(26px,4vh,40px)}
.pc-perks li{display:flex;align-items:flex-start;gap:14px}
.pc-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--sea-45);background:var(--sea-06);color:var(--sea)}
.pc-perks b{display:block;font-size:var(--fs-m);font-weight:600;color:#fff}
.pc-perks em,.pc-chips em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--sea)}
.pc-perks p{margin-top:4px;font-size:var(--fs-m);line-height:1.6;font-weight:var(--fw-text);color:var(--mut)}
.pc-steps{position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(32px,5vh,56px)}
.pc-steps::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:linear-gradient(90deg,var(--sea-45),var(--line) 70%,transparent)}
.pc-steps li{position:relative;padding-right:clamp(16px,2vw,32px)}
.pc-n{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1px solid var(--sea-45);background:var(--black);
  font-family:var(--serif);font-style:italic;font-size:20px;color:var(--sea);box-shadow:0 0 30px rgba(152,210,235,.15)}
.pc-steps b{display:block;margin-top:18px;font-size:var(--fs-h3);font-weight:600;color:#fff}
.pc-steps p{max-width:26ch;margin-top:6px;font-size:var(--fs-m);line-height:1.6;font-weight:var(--fw-text);color:var(--mut)}
.pc-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(30px,4.6vh,50px)}
.pc-chips li{padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-s);color:var(--txt)}
.pc-cta{margin-top:clamp(28px,4.4vh,44px)}
@media(max-width:900px){.pc-grid{grid-template-columns:1fr}.pc-perks{grid-template-columns:1fr}.pc-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 0}.pc-steps::before{display:none}}
@media(max-width:520px){.pc-steps{grid-template-columns:1fr}}

.pt{padding:clamp(64px,10vh,120px) 0}
.pt-hubs{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(26px,4.4vh,46px)}
.pt-hub{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;min-height:clamp(200px,22vw,280px);padding:clamp(20px,2.2vw,30px);
  border:1px solid var(--line);border-radius:var(--r-card);
  background:radial-gradient(120% 90% at 100% 0%,rgba(152,210,235,.16),transparent 55%),linear-gradient(158deg,#252d2a,#161d1b);
  transition:transform .5s var(--e-out),border-color .4s,box-shadow .5s}
.pt-hub:hover{transform:translateY(-5px);border-color:var(--sea-45);box-shadow:0 26px 60px -26px rgba(0,0,0,.8),0 0 60px rgba(152,210,235,.12)}
.pt-i{position:absolute;left:clamp(20px,2.2vw,30px);top:clamp(18px,2vw,26px);font-size:var(--fs-xs);font-weight:700;letter-spacing:.24em;color:var(--mut)}
.pt-hub svg{position:absolute;right:clamp(18px,2vw,26px);top:clamp(16px,2vw,24px);color:var(--sea);transition:transform .4s var(--e-out)}
.pt-hub:hover svg{transform:translate(4px,-4px)}
.pt-hub b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(25.8px,3.1vw,44.2px);line-height:1.05;letter-spacing:-.015em;color:#fff}
.pt-far{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3vh,32px)}
.pt-far li{padding:11px 20px;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-m);color:var(--txt)}
.pt-far .pt-all{font-family:var(--serif);font-style:italic;color:var(--sea);border-color:var(--sea-26)}
@media(max-width:760px){.pt-hubs{grid-template-columns:1fr}}
.pt-band{padding:clamp(20px,3vh,30px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.pt-band p{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;text-align:center;font-size:var(--fs-s);letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.pt-band i{font-style:normal;color:var(--sea);opacity:.7}

/* The agency's visual says "vente confidentielle" itself: no second tag on it; the way in sits at the right, in the middle of the photo */
.poster--visual .prop-tag{display:none}
.poster__go{align-items:center}

/* ===== HERO — the words on the left, the film seen as the plan of a villa on the right, a château that draws itself in the back ===== */
#accueil{background:var(--black);text-align:left;overflow:hidden;padding:0}
#accueil .hero-in{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center;gap:clamp(12px,2vw,36px);width:100%;min-height:100svh;
  padding:calc(var(--hd-h) + 30px) clamp(24px,5vw,96px) 76px}
#accueil h1{font-size:var(--fs-h1);font-weight:calc(var(--fw-title) - 100);letter-spacing:-.04em;line-height:.96;text-align:left;text-shadow:0 1px 28px rgba(10,13,12,.5)}
#accueil h1 b{letter-spacing:-.01em}
#accueil .hero-sub{margin-top:clamp(18px,3vh,30px);max-width:32em;color:var(--txt);font-weight:var(--fw-text);font-size:var(--fs-l);line-height:1.6;text-wrap:balance;text-shadow:0 1px 18px rgba(10,13,12,.7)}
#accueil .hero-cta{margin-top:clamp(22px,3.8vh,38px)}

/* the château: thin lines of the brand's blue at 20%, fixed behind everything. One cycle of 18 s: drawn one line after the other,
   the finished house stays 3 s, then the lines are taken back in the reverse order, then it starts again. Generated: scripts/house-drawing.cjs */
.hero-draw{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--black)}
.hero-draw svg{display:block;width:100%;height:100%;opacity:.2}
.hero-draw .m,.hero-draw .s,.hero-draw .h{fill:none;stroke:var(--sea);stroke-linecap:round;stroke-linejoin:round}
.hero-draw .m{stroke-width:1.9}
.hero-draw .s{stroke-width:1.35}
.hero-draw .h{stroke-width:.85}
.hero-draw .d{stroke-dasharray:1;stroke-dashoffset:1;animation:18s infinite}
/* HOUSE-DRAWING-KEYFRAMES:BEGIN */
@keyframes tr0{0%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}12.22%,82.22%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}94.44%,100%{stroke-dashoffset:1}}.hero-draw .t0{animation-name:tr0}
@keyframes tr1{0%,1.11%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}13.33%,81.11%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}93.33%,100%{stroke-dashoffset:1}}.hero-draw .t1{animation-name:tr1}
@keyframes tr2{0%,2.22%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}14.44%,80%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}92.22%,100%{stroke-dashoffset:1}}.hero-draw .t2{animation-name:tr2}
@keyframes tr3{0%,3.33%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}15.56%,78.89%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}91.11%,100%{stroke-dashoffset:1}}.hero-draw .t3{animation-name:tr3}
@keyframes tr4{0%,4.44%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}16.67%,77.78%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}90%,100%{stroke-dashoffset:1}}.hero-draw .t4{animation-name:tr4}
@keyframes tr5{0%,5.56%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}17.78%,76.67%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}88.89%,100%{stroke-dashoffset:1}}.hero-draw .t5{animation-name:tr5}
@keyframes tr6{0%,6.67%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}18.89%,75.56%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}87.78%,100%{stroke-dashoffset:1}}.hero-draw .t6{animation-name:tr6}
@keyframes tr7{0%,7.78%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}20%,74.44%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}86.67%,100%{stroke-dashoffset:1}}.hero-draw .t7{animation-name:tr7}
@keyframes tr8{0%,8.89%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}21.11%,73.33%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}85.56%,100%{stroke-dashoffset:1}}.hero-draw .t8{animation-name:tr8}
@keyframes tr9{0%,10%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}22.22%,72.22%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}84.44%,100%{stroke-dashoffset:1}}.hero-draw .t9{animation-name:tr9}
@keyframes tr10{0%,11.11%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}23.33%,71.11%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}83.33%,100%{stroke-dashoffset:1}}.hero-draw .t10{animation-name:tr10}
@keyframes tr11{0%,12.22%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}24.44%,70%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}82.22%,100%{stroke-dashoffset:1}}.hero-draw .t11{animation-name:tr11}
@keyframes tr12{0%,13.33%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}25.56%,68.89%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}81.11%,100%{stroke-dashoffset:1}}.hero-draw .t12{animation-name:tr12}
@keyframes tr13{0%,14.44%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}26.67%,67.78%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}80%,100%{stroke-dashoffset:1}}.hero-draw .t13{animation-name:tr13}
@keyframes tr14{0%,15.56%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}27.78%,66.67%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}78.89%,100%{stroke-dashoffset:1}}.hero-draw .t14{animation-name:tr14}
@keyframes tr15{0%,16.67%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}28.89%,65.56%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}77.78%,100%{stroke-dashoffset:1}}.hero-draw .t15{animation-name:tr15}
@keyframes tr16{0%,17.78%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}30%,64.44%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}76.67%,100%{stroke-dashoffset:1}}.hero-draw .t16{animation-name:tr16}
@keyframes tr17{0%,18.89%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}31.11%,63.33%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}75.56%,100%{stroke-dashoffset:1}}.hero-draw .t17{animation-name:tr17}
@keyframes tr18{0%,20%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}32.22%,62.22%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}74.44%,100%{stroke-dashoffset:1}}.hero-draw .t18{animation-name:tr18}
@keyframes tr19{0%,21.11%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}33.33%,61.11%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}73.33%,100%{stroke-dashoffset:1}}.hero-draw .t19{animation-name:tr19}
@keyframes tr20{0%,22.22%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}34.44%,60%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}72.22%,100%{stroke-dashoffset:1}}.hero-draw .t20{animation-name:tr20}
@keyframes tr21{0%,23.33%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}35.56%,58.89%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}71.11%,100%{stroke-dashoffset:1}}.hero-draw .t21{animation-name:tr21}
@keyframes tr22{0%,24.44%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}36.67%,57.78%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}70%,100%{stroke-dashoffset:1}}.hero-draw .t22{animation-name:tr22}
@keyframes tr23{0%,25.56%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}37.78%,56.67%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}68.89%,100%{stroke-dashoffset:1}}.hero-draw .t23{animation-name:tr23}
@keyframes tr24{0%,26.67%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,.05,.25,1)}38.89%,55.56%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.55,1)}67.78%,100%{stroke-dashoffset:1}}.hero-draw .t24{animation-name:tr24}
/* HOUSE-DRAWING-KEYFRAMES:END */
.hero-draw .f{fill:var(--black);stroke:none}
.hero-draw .gl{fill:var(--sea);stroke:none;opacity:0;animation:18s infinite}
.hero-draw .la{animation-name:litA}
.hero-draw .lb{animation-name:litB}
@keyframes litA{0%,40%{opacity:0}42.2%{opacity:.28}46.7%{opacity:.05}51.1%{opacity:.3}55.6%{opacity:.1}58.3%,100%{opacity:0}}
@keyframes litB{0%,41%{opacity:0}44%{opacity:.05}48.6%{opacity:.28}53%{opacity:.06}56.4%{opacity:.2}59%,100%{opacity:0}}
.hero-draw .ax,.hero-draw .lv{fill:none;stroke:var(--sea);stroke-width:.8;opacity:0;animation:guide 18s infinite}
.hero-draw .ax{stroke-dasharray:14 6 2 6}
.hero-draw .lv{stroke-dasharray:3 9}
@keyframes guide{0%,14%{opacity:0}22%,62%{opacity:.5}72%,100%{opacity:0}}
#accueil:not(.live) .hero-draw *{animation-play-state:paused}
.hero-tone{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,13,12,.3) 0%,rgba(10,13,12,.2) 30%,rgba(10,13,12,0) 56%),
    radial-gradient(46% 62% at 74% 52%,rgba(152,210,235,.08),transparent 70%),
    linear-gradient(0deg,rgba(10,13,12,.55) 0%,rgba(10,13,12,0) 26%),
    linear-gradient(180deg,rgba(10,13,12,.55) 0%,rgba(10,13,12,0) 22%)}
.hero-tone::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}


.hrule{margin-top:clamp(26px,5vh,52px);max-width:600px;border-top:1px solid rgba(232,237,235,.14)}
.hp{list-style:none;display:grid;gap:clamp(10px,1.7vh,15px);margin-top:clamp(18px,3vh,28px);font-size:var(--fs-m);font-weight:var(--fw-text);text-shadow:0 1px 18px rgba(10,13,12,.7)}
.hp li{display:flex;align-items:center;gap:14px}
.hp svg{flex:0 0 auto;width:21px;height:21px;color:var(--sea)}

/* the people who answer: faces only; the name shows when you reach for a face */
.hf{display:flex;margin-top:clamp(22px,4vh,36px)}
.hface{position:relative;margin-left:-14px;border-radius:50%;transition:margin .6s var(--e-out),transform .6s var(--e-out)}
.hface:first-child{margin-left:0}
.hf:hover .hface{margin-left:-6px}
.hf:hover .hface:first-child{margin-left:0}
.hface:hover,.hface:focus-visible{transform:translateY(-5px);z-index:2}
.hface img{display:block;width:clamp(44px,3.6vw,52px);aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 20%;background:var(--deep);border:2.5px solid var(--black)}
.hface::after{content:attr(data-name);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px);padding:7px 14px 8px;border:1px solid rgba(232,237,235,.26);border-radius:999px;background:rgba(10,13,12,.92);
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.04em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .35s,transform .5s var(--e-out)}
.hface:hover::after,.hface:focus-visible::after{opacity:1;transform:translate(-50%,0)}

/* the film seen as the floor plan of a villa: every room is a card of the same picture, the walls are the gaps; the play button in the bottom-left room opens the whole film */
.hero-stage{position:relative;z-index:3;justify-self:end;display:flex;justify-content:center;align-items:center;width:100%}
.hv{position:relative;width:min(100%,calc(min(66vh,640px) * 1.06));aspect-ratio:1.06}
.hv-reveal{position:absolute;inset:0;clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--e-out)}
.hv-reveal.in{clip-path:inset(-4% -4% -4% -4%)}
.hv-clip{position:absolute;inset:0;background:#060808}
.hv-clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;filter:grayscale(.3) contrast(1.06) brightness(.9) saturate(.95)}
.hv-clip::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(88,150,178,.36);mix-blend-mode:soft-light}
.hv-clip::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(10,13,12,.2) 0%,rgba(10,13,12,0) 30%,rgba(10,13,12,0) 62%,rgba(10,13,12,.5) 100%)}
.hv-lines{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;transition:opacity 1s var(--e-out)}
.hv-lines.on{opacity:1}
.hv-lines path{fill:none;stroke:var(--sea);stroke-linecap:round;stroke-linejoin:round}
.hv-lines .l1{stroke-opacity:.7;stroke-width:1.3}
.hv-lines .l2{stroke-opacity:.38;stroke-width:1}
.hv-lines .bar{stroke:rgba(10,13,12,.78);stroke-width:4}
/* reaching for one room darkens the others */
.hv-lines .sh{fill:rgba(10,13,12,0);stroke:none;pointer-events:all;transition:fill .7s var(--e-out)}
.hv-lines:hover .sh{fill:rgba(10,13,12,.55)}
.hv-lines .sh:hover{fill:rgba(10,13,12,0)}
/* the play button, in the line language of the drawings of the page: a fine circle and an outlined triangle; on hover the circle draws itself in blue and the triangle fills */
.hv-play{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);display:grid;place-items:center;width:75px;aspect-ratio:1;padding:0;border:0;background:none;color:#fff;cursor:pointer;opacity:0;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.55));transition:transform .8s var(--e-out),opacity .8s var(--e-out)}
.hv-play.on{opacity:1;transform:translate(-50%,-50%)}
.hv-play svg{display:block;width:100%;height:100%;overflow:visible}
.hv-play .pb{fill:rgba(10,13,12,.42);stroke:rgba(255,255,255,.6);stroke-width:1.3}
.hv-play .pd{fill:none;stroke:var(--sea);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:289;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1s var(--e-out)}
.hv-play .pp{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transition:fill .5s var(--e-out),stroke .5s var(--e-out)}
.hv-play:hover,.hv-play:focus-visible{transform:translate(-50%,-50%) scale(1.05)}
.hv-play:hover .pd,.hv-play:focus-visible .pd{stroke-dashoffset:0}
.hv-play:hover .pp,.hv-play:focus-visible .pp{fill:var(--sea);stroke:var(--sea)}
.hv-play:focus-visible{outline:2px solid var(--sea);outline-offset:6px;border-radius:50%}

/* the film, full screen */
#herofilm{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(6,8,8,.97);color:var(--txt)}
#herofilm::backdrop{background:#000}
#herofilm video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
#herofilm .hx{position:absolute;z-index:2;top:22px;right:clamp(20px,4vw,56px);display:grid;place-items:center;width:52px;aspect-ratio:1;border:1px solid rgba(232,237,235,.26);border-radius:50%;background:rgba(10,13,12,.7);color:#fff;cursor:pointer;transition:border-color .4s,color .4s}
#herofilm .hx:hover{border-color:var(--sea);color:var(--sea)}
#herofilm .hx svg{width:20px;height:20px}

@media(max-width:980px){
  #accueil .hero-in{grid-template-columns:1fr;gap:48px;padding-top:calc(var(--hd-h) + 24px)}
  .hero-stage{justify-self:center}
  .hv{width:min(100%,calc(min(54vh,500px) * 1.06))}
}
@media(max-width:560px){
  .hcta{width:100%;justify-content:space-between}
  .hv-play{width:60px}
}
@media(prefers-reduced-motion:reduce){
  .hero-draw .d{animation:none;stroke-dashoffset:0}
  .hero-draw .gl{animation:none}
  .hero-draw .ax,.hero-draw .lv{animation:none;opacity:.4}
  .hv-reveal{transition:none}
}

/* ===== HEADER — the logo, the way around, the direct line; the links answer the pointer softly ===== */
#hd{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;padding:0 clamp(24px,5vw,96px);transition:height .6s var(--e-out),background .4s,box-shadow .4s}
#hd .brand{justify-self:start}
#hd .brand img{transition:height .6s var(--e-out)}
#hd.slim,#hd.sc{height:72px}
#hd.slim .brand img,#hd.sc .brand img{height:52px}
#hd .hnav{display:flex;align-items:center;gap:clamp(26px,3.2vw,52px)}
#hd .hnav a{position:relative;padding:12px 0;font-size:var(--fs-nav);font-weight:500;letter-spacing:.01em;color:var(--txt);opacity:.8;transition:opacity .5s var(--e-out),color .5s var(--e-out)}
#hd .hnav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--sea);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--e-out)}
#hd .hnav a:hover,#hd .hnav a:focus-visible,#hd .hnav a[aria-current]{opacity:1;color:#fff}
#hd .hnav a:hover::after,#hd .hnav a:focus-visible::after,#hd .hnav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
#hd .hnav:hover a:not(:hover){opacity:.42}
#hd .tel{justify-self:end;display:flex;align-items:center;gap:10px;padding:12px 0;border:0;border-radius:0;background:none;opacity:1;pointer-events:auto;font-size:calc(var(--fs-nav) * .92);font-weight:600;letter-spacing:.12em;white-space:nowrap;color:var(--txt);transition:color .5s var(--e-out)}
#hd .tel .lucide{width:17px;height:17px;color:var(--sea);transition:transform .7s var(--e-out)}
#hd .tel:hover,#hd .tel:focus-visible{color:var(--sea)}
#hd .tel:hover .lucide,#hd .tel:focus-visible .lucide{transform:rotate(-14deg) scale(1.12)}

/* the way in on a phone: a round button and a plain list (no script needed, it also works on the other pages) */
.hd-toggle{position:fixed;left:0;top:0;width:1px;height:1px;opacity:0}
#hd .mbtn{display:none;position:relative;width:48px;aspect-ratio:1;border:1px solid rgba(232,237,235,.26);border-radius:50%;background:rgba(14,19,17,.5);cursor:pointer;transition:border-color .5s var(--e-out)}
#hd .mbtn:hover{border-color:var(--sea)}
#hd .mbtn i{position:absolute;left:15px;right:15px;height:1.5px;background:#fff;transition:transform .6s var(--e-out),top .6s var(--e-out)}
#hd .mbtn i:nth-child(1){top:19px}
#hd .mbtn i:nth-child(2){top:27px}
.hd-toggle:focus-visible ~ #hd .mbtn{outline:1px solid var(--sea);outline-offset:4px}
.hd-toggle:checked ~ #hd .mbtn i:nth-child(1){top:23px;transform:rotate(45deg)}
.hd-toggle:checked ~ #hd .mbtn i:nth-child(2){top:23px;transform:rotate(-45deg)}
.msheet{position:fixed;inset:0;z-index:945;display:flex;flex-direction:column;justify-content:center;padding:var(--hd-h) clamp(24px,6vw,60px) 40px;background:#0a0d0c;opacity:0;visibility:hidden;transition:opacity .5s var(--e-out),visibility .5s}
.hd-toggle:checked ~ .msheet{opacity:1;visibility:visible}
body:has(.hd-toggle:checked){overflow:hidden}
.msheet a{display:block;padding:14px 0;border-bottom:1px solid rgba(232,237,235,.14);font-size:clamp(27.6px,7.4vw,47.8px);font-weight:300;letter-spacing:-.03em;color:var(--txt);transition:color .4s,padding-left .5s var(--e-out)}
.msheet a:hover{color:var(--sea);padding-left:10px}
.msheet a[aria-current]{color:var(--sea)}
@media(max-width:900px){
  #hd{grid-template-columns:1fr auto auto;gap:12px}
  #hd .hnav{display:none}
  #hd .tel{padding:0 4px}
  #hd .tel .num{display:none}
  #hd .mbtn{display:block}
}

/* ===== BUTTONS — one language: a pill, a round bubble at its end, an arrow that slides through the bubble.
   Four voices, each with its own colours and its own answer to the pointer:
   .btn        solid, the pale blue            → it lightens, the arrow slides through
   .btn--line  an outline                      → the blue floods the pill from the bubble
   .btn--glass over a photograph or a film     → it turns pale blue
   .btn--text  a word and an arrow, no pill    → a line is drawn under the word, the arrow slides
   .btn--sm    a smaller size of any of them
   Around them: the choices of the form, the round controls, the cookie banner, in the same language. ===== */
:root{
  --arr-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e1f2fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --arr-sea:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398d2eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --arr-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2321' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
}
.btn{
  --bg:var(--sea);--bgh:var(--soft);--fg:var(--eerie);--fgh:var(--eerie);--bb:var(--eerie);--bbh:var(--eerie);--arr:var(--arr-soft);--arrh:var(--arr-soft);--bs:50px;--pad:5px;
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;
  padding:var(--pad) var(--pad) var(--pad) 30px;border:0;border-radius:var(--btn-r);background:var(--bg);color:var(--fg);
  font-size:var(--fs-btn);font-weight:700;letter-spacing:.2em;line-height:1.2;text-align:left;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:background .5s var(--e-out),color .5s var(--e-out),box-shadow .5s var(--e-out),transform .3s var(--e-out)}
/* the bubble, and the two arrows in it: the first one leaves towards the top right, the second one arrives from the bottom left */
.btn::after{content:"";flex:none;width:var(--bs);aspect-ratio:1;border-radius:var(--btn-br);
  background-color:var(--bb);background-image:var(--arr),var(--arrh);background-repeat:no-repeat;background-size:42%;background-position:center,-70% 170%;
  transition:background-position .7s var(--e-out),background-color .5s var(--e-out),box-shadow .5s var(--e-out)}
.btn:hover,.btn:focus-visible{background:var(--bgh);color:var(--fgh)}
.btn:hover::after,.btn:focus-visible::after{background-color:var(--bbh);background-position:170% -70%,center}
.btn:active{transform:scale(.985)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn:disabled:hover{background:var(--bg);color:var(--fg)}
.btn:disabled:hover::after{background-color:var(--bb);background-position:center,-70% 170%}

/* an outline: on hover the blue floods the pill, starting from the bubble */
.btn--line{--bg:transparent;--bgh:transparent;--fg:#fff;--fgh:var(--eerie);--bb:transparent;--bbh:var(--eerie);--arr:var(--arr-sea);--arrh:var(--arr-soft);box-shadow:inset 0 0 0 1px rgba(232,237,235,.4)}
.btn--line::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sea);clip-path:circle(0 at calc(100% - var(--pad) - var(--bs) / 2) 50%);transition:clip-path .8s var(--e-out)}
.btn--line::after{box-shadow:inset 0 0 0 1px rgba(152,210,235,.45)}
.btn--line:hover,.btn--line:focus-visible{box-shadow:inset 0 0 0 1px var(--sea)}
.btn--line:hover::before,.btn--line:focus-visible::before{clip-path:circle(150% at calc(100% - var(--pad) - var(--bs) / 2) 50%)}
.btn--line:hover::after,.btn--line:focus-visible::after{box-shadow:none}
.btn--line:disabled:hover::before{clip-path:circle(0 at calc(100% - var(--pad) - var(--bs) / 2) 50%)}

/* over a photograph or a film: dark glass, then pale blue */
.btn--glass{--bg:rgba(10,13,12,.5);--bgh:var(--sea);--fg:#fff;--fgh:var(--eerie);--bb:var(--sea);--bbh:var(--eerie);--arr:var(--arr-dark);--arrh:var(--arr-soft);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(232,237,235,.26)}
.btn--glass:hover,.btn--glass:focus-visible{box-shadow:inset 0 0 0 1px var(--sea)}

/* a word and an arrow, no pill: a line is drawn under the word */
.btn--text{--bg:transparent;--bgh:transparent;--fg:var(--txt);--fgh:#fff;--bb:transparent;--bbh:transparent;--arr:var(--arr-sea);--arrh:var(--arr-sea);--bs:22px;--pad:0;
  gap:10px;padding:8px 0;border-radius:0;overflow:visible}
.btn--text::after{background-size:66%}
.btn--text::before{content:"";position:absolute;left:0;right:calc(var(--bs) + 10px);bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--e-out)}
.btn--text:hover::before,.btn--text:focus-visible::before{transform:scaleX(1);transform-origin:left}

.btn--sm{--bs:40px;--pad:4px;gap:18px;padding-left:24px;font-size:calc(var(--fs-btn) * .94);letter-spacing:.18em}

/* the hero button keeps its place and its air */
.hcta{text-shadow:none}

/* round controls (the arrows of the carousels, the viewer): same answer as the glass voice */
.anav button,.viewer__nav{transition:background .45s var(--e-out),color .45s var(--e-out),border-color .45s var(--e-out),transform .45s var(--e-out)}
.anav button:hover,.viewer__nav:hover{background:var(--sea);border-color:var(--sea);color:var(--eerie)}
.anav button:active,.viewer__nav:active{transform:scale(.94)}

/* the cookie banner: a solid pill and an outlined pill */
html body #tarteaucitronRoot #tarteaucitronAlertBig button{border-radius:999px!important;letter-spacing:.18em!important}
html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronCloseAlert{border:1px solid rgba(232,237,235,.4)!important;transition:background .5s var(--e-out),color .5s var(--e-out),border-color .5s var(--e-out)!important}
html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronCloseAlert:hover{background:var(--sea)!important;border-color:var(--sea)!important;color:var(--eerie)!important}
html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPersonalize2{box-shadow:none!important}