@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600&display=swap'); :root{--green:#17372e;--green-deep:#0d241e;--sage:#9bab8f;--sand:#eee9de;--paper:#f8f5ee;--ink:#17201d;--muted:#67706b;--gold:#b59663;--line:rgba(23,32,29,.16);--serif:'Instrument Serif',Georgia,serif;--sans:'Manrope',Arial,sans-serif} *{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;margin:0}body.menu-open{overflow:hidden}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{margin:0 auto;max-width:1440px;padding-inline:44px}.section-pad{padding:145px 0}.section-pad-small{padding:88px 0}h1,h2,h3,p{margin-top:0}h2{font-family:var(--serif);font-size:clamp(52px,5.1vw,82px);font-weight:400;letter-spacing:-.02em;line-height:1.05}h2 em{color:var(--gold);font-weight:400}.overline{color:var(--gold);font-size:10px;font-weight:500;letter-spacing:.2em;margin-bottom:24px;text-transform:uppercase}.overline-light{color:rgba(255,255,255,.58)} .site-header{border-bottom:1px solid rgba(255,255,255,.24);color:#fff;height:104px;inset:0 0 auto;position:absolute;transition:background .3s,height .3s;z-index:50}.site-header-inner{background:var(--green-deep);position:relative}.site-header.is-scrolled:not(.site-header-inner){backdrop-filter:blur(16px);background:rgba(13,36,30,.92);height:82px;position:fixed}.header-inner{align-items:center;display:flex;height:100%;justify-content:space-between}.site-brand{align-items:center;display:inline-flex;gap:14px}.brand-tree{align-items:center;border:1px solid currentColor;border-radius:50%;color:var(--gold);display:flex;font-family:var(--serif);font-size:24px;height:48px;justify-content:center;width:48px}.brand-copy strong{display:block;font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:.12em;line-height:1}.brand-copy small{display:block;font-size:7px;letter-spacing:.27em;margin-top:7px}.desktop-nav{display:flex;gap:38px;margin-left:100px}.desktop-nav a,.header-contact{font-size:10px;font-weight:500;letter-spacing:.13em;position:relative;text-transform:uppercase}.desktop-nav a:after{background:#fff;bottom:-9px;content:'';height:1px;left:0;position:absolute;transform:scaleX(0);transform-origin:right;transition:.3s;width:100%}.desktop-nav a:hover:after{transform:scaleX(1);transform-origin:left}.header-contact{border-bottom:1px solid rgba(255,255,255,.5);padding:0 0 8px}.header-contact span{margin-left:14px}.nav-toggle,.mobile-nav{display:none} .hero{color:#fff;height:100svh;min-height:800px;overflow:hidden;position:relative}.hero-media{animation:heroIn 12s ease-out both;background:url('../images/exteriors/villa-jardin.jpg') center 55%/cover;inset:0;position:absolute}.hero-overlay{background:linear-gradient(90deg,rgba(7,25,20,.78),rgba(7,25,20,.28) 58%,rgba(7,25,20,.1)),linear-gradient(0deg,rgba(7,20,17,.52),transparent 50%);inset:0;position:absolute}.hero-content{display:flex;flex-direction:column;height:100%;justify-content:center;padding-top:60px;position:relative}.hero-location{align-items:center;display:flex;font-size:10px;font-weight:500;gap:15px;letter-spacing:.26em;margin-bottom:30px;text-transform:uppercase}.hero-location:before{background:var(--gold);content:'';height:1px;width:42px}.hero h1{font-family:var(--serif);font-size:clamp(86px,10vw,160px);font-weight:400;letter-spacing:-.05em;line-height:.85;margin:0 0 35px}.hero-tagline{font-family:var(--serif);font-size:clamp(25px,2.2vw,36px);line-height:1.35;margin-bottom:45px}.hero-actions{align-items:center;display:flex;gap:38px}.button{align-items:center;border:0;cursor:pointer;display:inline-flex;font-size:10px;font-weight:600;justify-content:space-between;letter-spacing:.14em;min-width:225px;padding:19px 21px;text-transform:uppercase;transition:.25s}.button:hover{transform:translateY(-2px)}.button-light{background:var(--paper);color:var(--ink)}.button-dark{background:var(--green);color:#fff}.ghost-link{border-bottom:1px solid rgba(255,255,255,.45);font-size:10px;font-weight:500;letter-spacing:.14em;padding-bottom:8px;text-transform:uppercase}.ghost-link span{margin-left:22px}.hero-facts{backdrop-filter:blur(12px);background:rgba(13,36,30,.78);bottom:0;display:grid;grid-template-columns:repeat(4,1fr);position:absolute;right:0;width:min(880px,70%)}.hero-facts div{border-left:1px solid rgba(255,255,255,.18);padding:25px 28px}.hero-facts span{color:rgba(255,255,255,.55);display:block;font-size:8px;letter-spacing:.17em;margin-bottom:8px;text-transform:uppercase}.hero-facts strong{font-family:var(--serif);font-size:18px;font-weight:400} .intro-grid{display:grid;grid-template-columns:25% 75%}.section-label{align-items:center;display:flex;gap:12px}.section-label span{color:var(--gold);font-family:var(--serif);font-size:13px}.section-label p{font-size:9px;font-weight:500;letter-spacing:.2em;margin:0;text-transform:uppercase}.section-label-light{color:#fff}.intro-copy h2{margin-bottom:55px}.intro-columns{display:grid;gap:60px;grid-template-columns:1fr 1fr;max-width:850px}.intro-columns p,.interior-copy>p,.location-copy>p,.contact-copy>p{color:var(--muted);font-size:16px;line-height:1.85}.feature-image-wrap{margin-top:110px;position:relative}.feature-image-wrap>img{height:720px;object-fit:cover;width:100%}.feature-caption{background:var(--green);bottom:0;color:#fff;display:flex;gap:55px;left:44px;padding:30px 38px;position:absolute}.feature-caption span{color:rgba(255,255,255,.5);font-size:8px;letter-spacing:.18em;text-transform:uppercase}.feature-caption p{font-family:var(--serif);font-size:19px;line-height:1.4;margin:0}.qualities{background:var(--sand)}.qualities-grid{display:grid;grid-template-columns:repeat(4,1fr)}.qualities article{border-right:1px solid var(--line);padding:10px 32px}.qualities article:first-child{padding-left:0}.qualities article:last-child{border:0}.quality-icon{color:var(--gold);display:block;font-size:26px;margin-bottom:28px}.qualities h3{font-family:var(--serif);font-size:25px;font-weight:400;margin-bottom:16px}.qualities p{color:var(--muted);font-size:13px;line-height:1.7;margin:0} .villas{background:var(--green);color:#fff}.section-heading{display:grid;grid-template-columns:25% 75%;margin-bottom:75px}.section-heading h2{margin:0}.villa-grid{display:grid;gap:25px;grid-template-columns:repeat(3,1fr)}.villa-card-image{aspect-ratio:.86;overflow:hidden;position:relative}.villa-card-image:after{background:linear-gradient(0deg,rgba(7,20,17,.35),transparent 50%);content:'';inset:0;position:absolute}.villa-card-image img{height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1);width:100%}.villa-card:nth-child(2) img{object-position:70% center}.villa-card:nth-child(3) img{object-position:30% center}.villa-card:hover img{transform:scale(1.035)}.status{background:var(--paper);color:var(--green);font-size:8px;font-weight:600;left:17px;letter-spacing:.16em;padding:10px 13px;position:absolute;text-transform:uppercase;top:17px;z-index:2}.status-reserve{background:var(--gold);color:#fff}.status-vendu{background:#7d827f;color:#fff}.card-arrow{align-items:center;background:var(--paper);border-radius:50%;bottom:17px;color:var(--ink);display:flex;height:48px;justify-content:center;opacity:0;position:absolute;right:17px;transform:translateY(8px);transition:.3s;width:48px;z-index:2}.villa-card:hover .card-arrow{opacity:1;transform:none}.villa-card-head{align-items:end;border-bottom:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;padding:25px 0 18px}.villa-card-head h3{font-family:var(--serif);font-size:29px;font-weight:400;margin:0}.villa-card-head p{color:var(--gold);font-size:11px;margin:0}.villa-card-facts{color:rgba(255,255,255,.56);display:flex;flex-wrap:wrap;font-size:8px;gap:10px 24px;letter-spacing:.1em;padding-top:15px;text-transform:uppercase} .interior{background:var(--paper)}.interior-grid{align-items:center;display:grid;gap:9%;grid-template-columns:42% 49%}.interior-copy .section-label{margin-bottom:70px}.interior-copy h2{margin-bottom:40px}.interior-copy>p{max-width:550px}.interior-image img{height:780px;object-fit:cover;width:100%}.line-link{border-bottom:1px solid var(--line);display:inline-flex;font-size:10px;font-weight:600;justify-content:space-between;letter-spacing:.13em;margin-top:25px;min-width:225px;padding-bottom:10px;text-transform:uppercase}.location{background:var(--sand)}.location-grid{align-items:center;display:grid;gap:8%;grid-template-columns:52% 40%}.location-visual{position:relative}.location-visual img{filter:saturate(.65);height:720px;object-fit:cover;width:100%}.map-pin{align-items:center;background:var(--green);color:#fff;display:flex;font-size:9px;gap:11px;left:50%;letter-spacing:.15em;padding:13px 16px;position:absolute;text-transform:uppercase;top:46%;transform:translate(-50%,-50%)}.map-pin i{background:var(--gold);border-radius:50%;height:7px;width:7px}.location-copy .section-label{margin-bottom:80px}.location-copy h2{margin-bottom:38px}.distances{border-bottom:1px solid var(--line);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(2,1fr);margin:45px 0 20px} /* Piste des durées commune aux quatre cellules : sans elle, chacune se dimensionnait sur son propre nombre et les libellés ne partaient pas de la même abscisse d'une ligne à l'autre. La valeur est en px car les unités relatives se résoudraient dans la police de la cellule (Manrope 16px), pas dans l'Instrument Serif 27px du : 83px couvre « 10 min », le plus large des quatre à 82.3px. Revoir si une durée à trois chiffres est ajoutée. */ .distances div{align-items:center;border-bottom:1px solid var(--line);display:grid;gap:18px;grid-template-columns:83px 1fr;padding:22px 0} /* Retrait de part et d'autre du filet central, sans décoller les cellules du bord extérieur : la colonne de gauche resterait sinon désalignée du texte courant qui la surplombe. */ .distances div:nth-child(odd){padding-right:34px} .distances div:nth-child(2n){padding-left:34px}.distances div:nth-child(odd){border-right:1px solid var(--line)}.distances div:nth-child(n+3){border-bottom:0} /* La colonne des durées est figée à 6.5ch, soit la largeur de « 15 min », le cas le plus large : en flex, chaque cellule se dimensionnait sur son propre contenu et les libellés ne partaient pas de la même abscisse d'une ligne à l'autre. Les chiffres sont forcés en chasse tabulaire et alignés, sinon le « 1 » elzévirien de la serif rentre et décale le bord gauche du nombre. Revoir cette largeur si une durée à trois chiffres est ajoutée. */ .distances strong{font-family:var(--serif);font-size:27px;font-weight:400;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;white-space:nowrap}.distances span{color:var(--muted);font-size:9px;letter-spacing:.1em;text-transform:uppercase} .gallery{background:var(--paper)}.gallery-heading{margin-bottom:85px}.gallery-grid{display:grid;gap:22px;grid-auto-rows:300px;grid-template-columns:repeat(6,1fr)}.gallery-grid figure{grid-column:span 3;margin:0;overflow:hidden;position:relative}.gallery-grid img{display:block;height:100%;object-fit:cover;transition:transform .7s ease;width:100%}.gallery-grid figure:hover img{transform:scale(1.025)}.gallery-grid figcaption{background:linear-gradient(0deg,rgba(13,36,30,.92),rgba(13,36,30,0));bottom:0;color:#fff;left:0;padding:38px 22px 18px;pointer-events:none;position:absolute;width:100%;z-index:2}.gallery-grid figcaption strong{display:block;font-family:var(--serif);font-size:19px;font-weight:400;letter-spacing:-.01em}.gallery-grid figcaption em{color:var(--gold);font-size:8px;font-style:normal;letter-spacing:.15em;text-transform:uppercase}.gallery-wide{grid-column:span 6}.gallery-tall{grid-column:span 3;grid-row:span 2}.legal-note{color:var(--muted);font-size:9px;letter-spacing:.05em;margin-top:25px}.documents{background:var(--green);color:#fff}.documents-grid{align-items:end;display:grid;gap:12%;grid-template-columns:48% 40%}.documents h2{margin:35px 0 0}.documents-copy p{color:rgba(255,255,255,.66);line-height:1.8;margin-bottom:30px}.document-list{list-style:none;margin:0;padding:0}.document-list__item{border-bottom:1px solid rgba(255,255,255,.2);padding:18px 0}.document-list__type{color:var(--gold);float:right;font-size:9px;text-transform:uppercase} .contact{background:var(--paper)}.contact-grid{display:grid;gap:10%;grid-template-columns:38% 52%}.contact-copy .section-label{margin-bottom:75px}.contact-copy h2{margin-bottom:38px}.contact-person{border-top:1px solid var(--line);display:flex;flex-direction:column;margin-top:45px;padding-top:25px}.contact-person span{font-family:var(--serif);font-size:20px;margin-bottom:12px}.contact-person a{color:var(--muted);font-size:13px;margin:3px 0}.contact-form-card{background:#fff;padding:48px}.form-row{display:grid;gap:22px;grid-template-columns:repeat(2,1fr)}.form-field{display:flex;flex-direction:column;margin-bottom:25px}.form-field label{font-size:8px;font-weight:600;letter-spacing:.16em;margin-bottom:9px;text-transform:uppercase}.form-field input,.form-field select,.form-field textarea{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--ink);font-size:14px;font-weight:300;outline:none;padding:9px 0 13px}.form-field select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23a08b5f' stroke-width='1.2' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");background-position:right 2px center;background-repeat:no-repeat;background-size:10px 6px;cursor:pointer;padding-right:24px;text-overflow:ellipsis}.form-field select::-ms-expand{display:none}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--gold)}.form-field textarea{resize:vertical}.form-consent{align-items:flex-start;color:var(--muted);display:flex;font-size:10px;gap:10px;line-height:1.5;margin:0 0 28px}.form-consent input{accent-color:var(--green);margin-top:2px} .site-footer{background:var(--green-deep);color:#fff;padding:85px 0 28px}.footer-top{align-items:center;border-bottom:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;padding-bottom:48px}.footer-top>p{color:rgba(255,255,255,.5);font-family:var(--serif);font-size:21px;line-height:1.5;margin:0}.footer-grid{display:grid;gap:50px;grid-template-columns:.8fr 1.25fr 1.1fr 1.5fr;padding:60px 0 70px}.footer-grid>div{align-items:flex-start;display:flex;flex-direction:column}.footer-title{color:#fff;font-size:8px;font-weight:600;letter-spacing:.2em;margin-bottom:20px;text-transform:uppercase}.footer-grid a,.footer-grid p,.footer-grid>div>strong{color:rgba(255,255,255,.58);font-size:12px;font-weight:300;line-height:1.75;margin:0 0 5px}.footer-grid p strong{color:rgba(255,255,255,.8);font-weight:400}.footer-cta p{margin-bottom:22px}.footer-bottom{align-items:center;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.38);display:flex;font-size:8px;justify-content:space-between;letter-spacing:.1em;padding-top:25px;text-transform:uppercase}.footer-bottom div{display:flex;gap:28px}.footer-disclaimer{border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.34);font-size:10px;font-weight:300;line-height:1.75;margin:0;max-width:1000px;padding-top:25px}.footer-disclaimer+.footer-bottom{border-top:0;padding-top:20px} .villa-hero{color:#fff;height:720px;overflow:hidden;position:relative}.villa-hero>img{height:100%;object-fit:cover;width:100%}.villa-hero-overlay{background:linear-gradient(0deg,rgba(8,26,21,.75),transparent 65%);inset:0;position:absolute}.villa-hero-content{bottom:65px;position:absolute;width:100%}.villa-back{font-size:9px;letter-spacing:.14em;text-transform:uppercase}.villa-hero .status{display:inline-block;left:auto;margin:0 0 28px;position:relative;top:auto}.villa-hero h1{font-family:var(--serif);font-size:clamp(70px,9vw,130px);font-weight:400;letter-spacing:-.05em;line-height:.9;margin:20px 0 12px}.villa-hero p{font-size:10px;letter-spacing:.2em;text-transform:uppercase}.villa-summary{background:var(--green);color:#fff}.villa-summary-grid{display:grid;grid-template-columns:repeat(6,1fr)}.villa-summary-grid div{border-right:1px solid rgba(255,255,255,.17);padding:8px 25px}.villa-summary-grid div:first-child{padding-left:0}.villa-summary-grid div:last-child{border:0}.villa-summary-grid span{color:rgba(255,255,255,.5);display:block;font-size:8px;letter-spacing:.13em;margin-bottom:10px;text-transform:uppercase}.villa-summary-grid strong{font-family:var(--serif);font-size:22px;font-weight:400}.villa-detail{padding-top:0}.villa-detail-grid{display:grid;gap:10%;grid-template-columns:40% 50%}.villa-detail-copy>p:not(.overline){color:var(--muted);line-height:1.8;margin-bottom:35px}.villa-floors details{border-top:1px solid var(--line)}.villa-floors details:last-child{border-bottom:1px solid var(--line)}.villa-floors summary{align-items:center;cursor:pointer;display:grid;gap:15px;grid-template-columns:45px 1fr auto 25px;list-style:none;padding:25px 0}.villa-floors summary::-webkit-details-marker{display:none}.villa-floors summary>span{color:var(--gold);font-family:var(--serif)}.villa-floors summary strong{font-family:var(--serif);font-size:25px;font-weight:400}.villa-floors summary em{color:var(--muted);font-size:11px;font-style:normal}.villa-floors summary i{font-size:20px;font-style:normal;transition:.3s}.villa-floors details[open] summary i{transform:rotate(45deg)}.villa-floors ul{list-style:none;margin:0 0 25px;padding:0 0 0 60px}.villa-floors li{color:var(--muted);display:flex;font-size:12px;justify-content:space-between;padding:7px 0}.villa-floors li em{font-style:normal}.villa-gallery{display:grid;grid-template-columns:1fr 1fr}.villa-gallery-single{grid-template-columns:1fr} /* Nombre impair d'images : la dernière, seule sur sa ligne, prend toute la largeur. */ .villa-gallery img:last-child:nth-child(odd){grid-column:1/-1}.villa-gallery img{height:620px;object-fit:cover;width:100%}.error-page{min-height:60vh;text-align:center}.error-page h1{font-family:var(--serif);font-size:70px;font-weight:400}.premium-flash{background:var(--gold);color:var(--ink);padding:14px;text-align:center} .desktop-nav a.active:after{transform:scaleX(1);transform-origin:left}.page-intro-hero{background:var(--sand);padding:125px 0 105px}.page-intro-hero h1{font-family:var(--serif);font-size:clamp(62px,7.7vw,116px);font-weight:400;letter-spacing:-.045em;line-height:.98;margin:0 0 32px}.page-intro-hero h1 em{color:var(--gold);font-weight:400}.page-intro-hero>div>p:last-child{color:var(--muted);font-size:17px;line-height:1.7;max-width:580px}.page-intro-green{background:var(--green);color:#fff}.page-intro-green>div>p:last-child{color:rgba(255,255,255,.62)}.home-image-break{height:720px;overflow:hidden;position:relative}.home-image-break>img{height:100%;object-fit:cover;width:100%}.home-image-break:after{background:linear-gradient(90deg,rgba(8,27,22,.74),rgba(8,27,22,.1));content:'';inset:0;position:absolute}.home-image-caption{color:#fff;left:max(44px,calc((100vw - 1352px)/2));position:absolute;top:50%;transform:translateY(-50%);z-index:2}.home-image-caption h2{margin-bottom:38px}.section-footer-link{display:flex;justify-content:flex-end;margin-top:55px}.line-link-light{border-color:rgba(255,255,255,.3);color:#fff}.home-final-grid{align-items:start;display:grid;gap:10%;grid-template-columns:46% 44%}.home-final-links{border-top:1px solid var(--line)}.home-final-links a{align-items:center;border-bottom:1px solid var(--line);display:grid;grid-template-columns:45px 1fr 30px;padding:25px 0;transition:padding .25s}.home-final-links a:hover{padding-inline:10px}.home-final-links span{color:var(--gold);font-family:var(--serif)}.home-final-links strong{font-family:var(--serif);font-size:26px;font-weight:400}.home-final-links i{font-style:normal}.page-cta{background:var(--green);color:#fff;padding:85px 0;text-align:center}.page-cta p{color:var(--gold);font-size:10px;letter-spacing:.18em;text-transform:uppercase}.page-cta h2{font-size:55px;margin-bottom:35px}.page-cta-light{background:var(--sand);color:var(--ink)}.villa-page-intro{color:rgba(255,255,255,.68);font-size:15px;line-height:1.8;margin-bottom:70px;max-width:850px}.villa-page-intro p{margin-bottom:14px}.situation-address{background:var(--green);color:#fff;padding:60px 0}.situation-address .container{align-items:center;display:grid;grid-template-columns:1fr 2fr 1fr}.situation-address span{color:rgba(255,255,255,.5);font-size:9px;letter-spacing:.15em;text-transform:uppercase}.situation-address strong{font-family:var(--serif);font-size:25px;font-weight:400;line-height:1.45}.situation-address a{border-bottom:1px solid rgba(255,255,255,.4);font-size:9px;justify-self:end;letter-spacing:.12em;padding-bottom:8px;text-transform:uppercase}.documents-page-grid{display:grid;gap:10%;grid-template-columns:45% 45%}.documents-page-grid h2{margin:50px 0 35px}.documents-page-grid>div>p{color:var(--muted);line-height:1.8}.document-panel{background:#fff;padding:55px}.document-icon{align-items:center;border:1px solid var(--line);border-radius:50%;color:var(--gold);display:flex;font-size:24px;height:55px;justify-content:center;margin-bottom:35px;width:55px}.document-panel h3{font-family:var(--serif);font-size:32px;font-weight:400}.document-panel p{color:var(--muted);line-height:1.7;margin-bottom:30px}.legal-page{min-height:70vh}.legal-content{max-width:940px}.legal-content h1{font-family:var(--serif);font-size:clamp(55px,7vw,92px);font-weight:400;margin-bottom:70px}.legal-content h2{font-family:var(--serif);font-size:28px;margin:45px 0 15px}.legal-content p{color:var(--muted);line-height:1.8}.legal-content a{border-bottom:1px solid var(--line)} .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.is-visible{opacity:1;transform:none}@keyframes heroIn{from{transform:scale(1.06)}to{transform:scale(1)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-media{animation:none}.reveal{opacity:1;transform:none;transition:none}} .floor-explorer{display:grid;gap:38px;grid-template-columns:1fr 280px} .fx-controls{align-items:center;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:20px;grid-column:1/-1;padding-bottom:18px} .fx-label{color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase} .fx-range{accent-color:var(--gold);width:130px} .fx-hint{color:var(--muted);font-size:11px;font-style:italic;margin:0 0 0 auto;transition:opacity .3s} .fx-hint.is-hidden{opacity:0} .fx-stage{align-items:center;display:flex;justify-content:center;min-height:430px;perspective:1900px;position:relative;transition:min-height .6s cubic-bezier(.22,.68,.3,1)} .fx-stage.is-opened{min-height:620px} .fx-stack{height:380px;position:relative;transform:translateY(60px) rotateX(58deg) rotateZ(-42deg);transform-style:preserve-3d;transition:transform .9s cubic-bezier(.22,.68,.3,1);width:380px} .fx-floor{cursor:pointer;inset:0;position:absolute;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.22,.68,.3,1),opacity .45s} .fx-floor img{display:block;filter:drop-shadow(0 16px 24px rgba(0,0,0,.28));height:100%;object-fit:contain;pointer-events:none;width:100%} .fx-floor.is-dim{opacity:.22} .fx-floor.is-active img{filter:drop-shadow(0 24px 34px rgba(0,0,0,.42))} .fx-floor:focus-visible{outline:2px solid var(--gold);outline-offset:6px} .fx-tag{background:var(--paper);border-left:3px solid var(--gold);color:var(--ink);font-size:10px;font-weight:500;left:-90px;letter-spacing:.14em;opacity:0;padding:5px 10px;position:absolute;text-transform:uppercase;top:46%;transition:opacity .3s;white-space:nowrap} .fx-floor.is-active .fx-tag,.fx-floor:hover .fx-tag{opacity:1} .fx-stack.is-opened{transform:rotateX(0) rotateZ(0)} .fx-stack.is-opened .fx-floor{opacity:0;pointer-events:none;transform:translateZ(0) scale(.9)} .fx-stack.is-opened .fx-floor.is-opened{cursor:zoom-out;opacity:1;pointer-events:auto;transform:translateZ(0) scale(1.5)} .fx-stack.is-opened .fx-floor.is-opened img{filter:drop-shadow(0 12px 28px rgba(0,0,0,.2))} .fx-stack.is-opened .fx-tag{opacity:0} .fx-back{align-items:center;background:var(--paper);border:1px solid var(--line);color:var(--ink);cursor:pointer;display:flex;font-family:var(--sans);font-size:11px;gap:8px;left:0;letter-spacing:.12em;opacity:0;padding:10px 18px;pointer-events:none;position:absolute;text-transform:uppercase;top:0;transition:opacity .35s,border-color .22s,color .22s;z-index:5} .fx-back.is-shown{opacity:1;pointer-events:auto} .fx-back:hover{border-color:var(--gold);color:var(--gold)} .fx-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .fx-caption{color:var(--muted);font-size:10px;letter-spacing:.18em;margin:0;opacity:0;position:absolute;right:0;text-transform:uppercase;top:6px;transition:opacity .35s} .fx-caption.is-shown{opacity:1} .fx-readout{align-self:start;border-top:2px solid var(--gold);padding-top:22px;position:sticky;top:110px} .fx-readout-level{font-family:var(--serif);font-size:26px;margin:0 0 16px} .fx-readout-level em{color:var(--muted);font-family:var(--sans);font-size:13px;font-style:normal} .fx-rooms{display:flex;flex-direction:column;list-style:none;margin:0;padding:0} .fx-rooms li{border-bottom:1px dotted var(--line);display:flex;font-size:13px;justify-content:space-between;padding:8px 0} .fx-rooms li em{color:var(--muted);font-style:normal;font-variant-numeric:tabular-nums} @media(max-width:1050px){.desktop-nav{gap:22px;margin-left:30px}.hero-facts{width:80%}.qualities-grid{grid-template-columns:repeat(2,1fr)}.qualities article:nth-child(2){border:0}.qualities article:nth-child(n+3){border-top:1px solid var(--line);padding-top:35px}.villa-card-head{align-items:flex-start;flex-direction:column;gap:8px}.villa-summary-grid{grid-template-columns:repeat(3,1fr);row-gap:35px}.villa-summary-grid div:nth-child(3){border:0}.footer-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:820px){.villa-detail{padding-top:0}.floor-explorer{grid-template-columns:1fr}.fx-readout{position:static}.fx-stage{min-height:400px}.fx-stack{height:280px;width:280px}.fx-tag{left:-70px}.container{padding-inline:22px}.section-pad{padding:95px 0}.section-pad-small{padding:65px 0}.site-header{height:82px}.desktop-nav,.header-contact{display:none}.nav-toggle{background:transparent;border:0;display:block;height:40px;padding:8px 0;width:32px;z-index:4}.nav-toggle span{background:#fff;display:block;height:1px;margin:8px 0;transition:.3s;width:100%}.menu-open .nav-toggle span:first-child{transform:translateY(4px) rotate(45deg)}.menu-open .nav-toggle span:last-child{transform:translateY(-5px) rotate(-45deg)}.mobile-nav{background:var(--green-deep);display:flex;flex-direction:column;gap:18px;inset:0;justify-content:center;opacity:0;padding:100px 30px 40px;pointer-events:none;position:fixed;transform:translateY(-15px);transition:.3s}.menu-open .mobile-nav{opacity:1;pointer-events:auto;transform:none}.mobile-nav a{font-family:var(--serif);font-size:39px}.mobile-nav p{color:rgba(255,255,255,.45);font-size:10px;line-height:1.7;margin-top:25px}.hero{min-height:720px}.hero h1{font-size:86px}.hero-facts{grid-template-columns:repeat(2,1fr);width:100%}.hero-facts div{padding:16px 20px}.intro-grid,.section-heading,.interior-grid,.location-grid,.documents-grid,.contact-grid,.villa-detail-grid{gap:40px;grid-template-columns:1fr}.intro-grid>.section-label,.section-heading>.section-label{margin-bottom:20px}.intro-columns{gap:25px;grid-template-columns:1fr}.feature-image-wrap{margin-top:70px}.feature-image-wrap>img{height:530px}.feature-caption{left:22px}.villa-grid{grid-template-columns:1fr}.villa-card-image{aspect-ratio:1.15}.interior-copy .section-label,.location-copy .section-label,.contact-copy .section-label{margin-bottom:35px}.interior-image img,.location-visual img{height:560px}.gallery-grid{grid-auto-rows:240px;grid-template-columns:repeat(2,1fr)}.gallery-grid figure,.gallery-tall{grid-column:span 1}.gallery-wide{grid-column:span 2}.gallery-toolbar{align-items:flex-start;flex-direction:column;gap:18px}.footer-top{align-items:flex-start;flex-direction:column;gap:30px}.villa-summary-grid{grid-template-columns:repeat(2,1fr)}.villa-summary-grid div:nth-child(2n){border:0}.villa-summary-grid div:nth-child(3){border-right:1px solid rgba(255,255,255,.17)}.villa-gallery{grid-template-columns:1fr}.villa-gallery img{height:480px}} @media(max-width:560px){.container{padding-inline:18px}.brand-tree{height:41px;width:41px}.brand-copy strong{font-size:17px}.hero-content{justify-content:flex-start;padding-top:180px}.hero h1{font-size:69px}.hero-tagline{font-size:23px}.hero-actions{align-items:flex-start;flex-direction:column;gap:25px}.hero-facts strong{font-size:15px}.intro-copy h2,h2{font-size:44px}.feature-image-wrap>img{height:420px}.feature-caption{bottom:0;gap:20px;left:18px;padding:20px}.qualities-grid{grid-template-columns:1fr}.qualities article,.qualities article:first-child{border-bottom:1px solid var(--line);border-right:0;padding:28px 0}.qualities article:nth-child(n+3){border-top:0}.villa-card-image{aspect-ratio:.88}.interior-image img,.location-visual img{height:460px}.distances{grid-template-columns:1fr}.distances div,.distances div:nth-child(odd),.distances div:nth-child(n+3){border-bottom:1px solid var(--line);border-right:0}.distances div:nth-child(odd),.distances div:nth-child(2n){padding-inline:0}.gallery-grid{display:flex;flex-direction:column;gap:14px}.gallery-grid figure,.gallery-grid .gallery-tall{height:300px}.gallery-grid .gallery-wide{height:340px}.gallery-filters{width:100%}.gallery-filter{flex:1}.contact-form-card{padding:28px 20px}.form-row{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-bottom{align-items:flex-start;flex-direction:column;gap:18px}.villa-hero{height:620px}.villa-summary-grid{grid-template-columns:1fr 1fr}.villa-summary-grid div{padding:8px 12px 8px 0}.villa-floors summary{grid-template-columns:30px 1fr 22px}.villa-floors summary em{display:none}.villa-floors ul{padding-left:45px}.villa-gallery img{height:360px}} @media(max-width:820px){.page-intro-hero{padding:85px 0 75px}.home-image-break{height:580px}.home-image-caption{left:22px}.home-final-grid,.documents-page-grid{gap:55px;grid-template-columns:1fr}.situation-address .container{gap:25px;grid-template-columns:1fr}.situation-address a{justify-self:start}.page-cta h2{font-size:44px}} @media(max-width:560px){.page-intro-hero{padding:70px 0 60px}.page-intro-hero h1{font-size:52px}.home-image-break{height:520px}.home-image-caption{left:18px;right:18px}.document-panel{padding:35px 24px}.home-final-links strong{font-size:22px}} /* Button variants must keep their own contrast inside contextual link groups. */ .footer-grid a.button{font-size:10px;font-weight:600;line-height:1.2;margin-top:16px} .footer-grid a.button-light{background-color:var(--paper);color:var(--ink)} /* Typography pairing: contemporary editorial serif with a precise architectural sans. */ .hero h1,.page-intro-hero h1,.villa-hero h1{letter-spacing:-.025em} .brand-copy strong{letter-spacing:.09em} /* Villas: a fixed rhythm and directly comparable cards. */ .villas-hero{padding-bottom:120px} .villas-page{border-top:1px solid rgba(255,255,255,.14);padding-top:96px} .villa-grid{align-items:stretch;grid-template-columns:repeat(3,minmax(0,1fr))} .villa-card{display:flex;flex-direction:column;min-width:0} .villa-card-image{aspect-ratio:4/5} .villa-card-content{display:flex;flex:1;flex-direction:column} .villa-card-head{align-items:end;display:grid;gap:16px;grid-template-columns:minmax(0,1fr) auto;min-height:84px;padding:23px 0 18px} .villa-card-head h3{line-height:1.05} .villa-card-head p{line-height:1.5;text-align:right} .villa-card-facts{display:grid;gap:0;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:18px 0 20px} .villa-card-facts div{border-right:1px solid rgba(255,255,255,.16);padding:0 13px} .villa-card-facts div:first-child{padding-left:0} .villa-card-facts div:last-child{border:0;padding-right:0} .villa-card-facts dt{color:rgba(255,255,255,.45);font-size:8px;letter-spacing:.13em;margin-bottom:7px;text-transform:uppercase} .villa-card-facts dd{color:#fff;font-family:var(--serif);font-size:19px;letter-spacing:0;margin:0;text-transform:none} .villa-card-link{align-items:center;border-top:1px solid rgba(255,255,255,.2);display:flex;font-size:9px;justify-content:space-between;letter-spacing:.14em;margin-top:auto;padding-top:17px;text-transform:uppercase} .villa-card-link i{color:var(--gold);font-size:16px;font-style:normal;transition:transform .25s} .villa-card:hover .villa-card-link i{transform:translateX(4px)} @media(max-width:1050px){ .villa-card-head{align-items:start;display:grid;grid-template-columns:1fr;min-height:108px} .villa-card-head p{text-align:left} .villa-card-facts{grid-template-columns:1fr} .villa-card-facts div,.villa-card-facts div:first-child,.villa-card-facts div:last-child{align-items:baseline;border-bottom:1px solid rgba(255,255,255,.12);border-right:0;display:flex;justify-content:space-between;padding:9px 0} .villa-card-facts div:last-child{border-bottom:0} .villa-card-facts dt{margin:0} } @media(max-width:820px){ .villas-hero{padding-bottom:80px} .villas-page{padding-top:70px} .villa-grid{grid-template-columns:1fr} .villa-card{margin-bottom:30px} .villa-card-image{aspect-ratio:1.2} .villa-card-head{align-items:end;grid-template-columns:minmax(0,1fr) auto;min-height:0} .villa-card-head p{text-align:right} .villa-card-facts{grid-template-columns:repeat(3,minmax(0,1fr))} .villa-card-facts div,.villa-card-facts div:first-child,.villa-card-facts div:last-child{align-items:flex-start;border-bottom:0;border-right:1px solid rgba(255,255,255,.16);display:block;padding:0 13px} .villa-card-facts div:first-child{padding-left:0} .villa-card-facts div:last-child{border-right:0;padding-right:0} .villa-card-facts dt{margin-bottom:7px} } @media(max-width:560px){ .villa-card-image{aspect-ratio:.95} .villa-card-head{align-items:start;grid-template-columns:1fr} .villa-card-head p{text-align:left} } /* ========================================================================== COUCHE ANIMATION Registre discret : amplitudes courtes, courbes lentes en sortie. Tout passe par transform/opacity pour rester sur le compositeur. Chaque effet est neutralisé dans le bloc prefers-reduced-motion en fin de fichier. ========================================================================== */ :root{ --ease-out-soft:cubic-bezier(.22,.68,.3,1); --ease-out-fine:cubic-bezier(.16,.84,.44,1); --dur-reveal:.95s; } /* --- Reveals : variantes de direction ------------------------------------ */ /* .reveal historique (fondu + montée) reste défini plus haut et sert de comportement par défaut. Les variantes ci-dessous se posent en plus. */ .reveal-left,.reveal-right,.reveal-fade,.reveal-scale{ opacity:0; transition:opacity var(--dur-reveal) var(--ease-out-fine),transform var(--dur-reveal) var(--ease-out-soft); will-change:opacity,transform; } .reveal-left{transform:translateX(-38px)} .reveal-right{transform:translateX(38px)} .reveal-scale{transform:scale(.965)} .reveal-left.is-visible,.reveal-right.is-visible,.reveal-fade.is-visible,.reveal-scale.is-visible{ opacity:1;transform:none; } .reveal.is-visible,.reveal-left.is-visible,.reveal-right.is-visible, .reveal-fade.is-visible,.reveal-scale.is-visible{will-change:auto} /* Le reveal historique gagne la courbe fine et la durée partagée. */ .reveal{transition:opacity var(--dur-reveal) var(--ease-out-fine),transform var(--dur-reveal) var(--ease-out-soft)} /* --- Reveal masqué : un voile couleur papier glisse et découvre l'image --- */ .reveal-mask{overflow:hidden;position:relative} .reveal-mask:before{ background:var(--paper); content:''; inset:0; position:absolute; transform:translateX(0); transition:transform 1.15s var(--ease-out-soft); z-index:3; } .reveal-mask.is-visible:before{transform:translateX(101%)} .reveal-mask-dark:before{background:var(--green)} .reveal-mask-sand:before{background:var(--sand)} /* Les habillages posés par-dessus l'image (légendes, épingles) passent au-dessus du voile pour ne pas clignoter pendant son passage. */ .reveal-mask .feature-caption,.reveal-mask .home-image-caption,.reveal-mask .map-pin{z-index:4} /* L'image elle-même dérive légèrement pendant que le voile passe. */ .reveal-mask>img{transform:scale(1.06);transition:transform 1.5s var(--ease-out-soft)} .reveal-mask.is-visible>img{transform:scale(1)} /* --- Cascade : les enfants directs arrivent l'un après l'autre ------------ */ /* Le délai est posé en variable inline par le JS (--i), ce qui évite une règle :nth-child() par position et fonctionne quel que soit le nombre d'éléments rendus par Twig. */ .reveal-stagger>*{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease-out-fine),transform .85s var(--ease-out-soft); transition-delay:calc(var(--i,0) * 90ms); } .reveal-stagger.is-visible>*{opacity:1;transform:none} /* --- Titres dévoilés ligne par ligne ------------------------------------- */ /* Le JS enveloppe chaque ligne dans .line > .line-inner ; sans JS le titre reste parfaitement lisible puisque aucun style ne s'applique. */ .split-line{display:block;overflow:hidden} .split-line .line-inner{ display:block; transform:translateY(105%); transition:transform 1.05s var(--ease-out-soft); transition-delay:calc(var(--i,0) * 110ms); } /* Le déclencheur est .is-visible, qu'il soit posé sur un ancêtre (reveal observé) ou sur le titre lui-même (heros rendus visibles côté serveur). */ .is-visible .split-line .line-inner, .is-visible.split-line .line-inner, [data-split].is-visible .split-line .line-inner{transform:none} /* --- Parallaxe ------------------------------------------------------------ */ /* Le JS écrit --py ; le conteneur masque le débordement du surdimensionnement. */ .parallax{overflow:hidden} .parallax>img,.parallax-media{ transform:translate3d(0,var(--py,0),0) scale(1.14); will-change:transform; } /* --- Micro-interactions : boutons ---------------------------------------- */ /* Le balayage est un arrière-plan, jamais un calque : le texte brut et les icônes restent ainsi lisibles pendant toute l'animation. */ .button{ background-image:linear-gradient(var(--gold),var(--gold)); background-position:left center; background-repeat:no-repeat; background-size:0 100%; overflow:hidden; position:relative; transition:background-size .55s var(--ease-out-soft),color .3s,transform .25s; } .button:hover,.button:focus-visible{background-size:100% 100%;transform:translateY(-2px)} .button:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .button-light:hover,.button-light:focus-visible{color:var(--green-deep)} .button-dark:hover,.button-dark:focus-visible{color:var(--green-deep)} .button span{transition:transform .45s var(--ease-out-soft)} .button:hover span{transform:translateX(5px)} .button:active{transform:translateY(0)} /* --- Micro-interactions : liens filaires --------------------------------- */ .line-link{position:relative;transition:color .3s} .line-link:after{ background:var(--gold); bottom:-1px; content:''; height:1px; left:0; position:absolute; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease-out-soft); width:100%; } .line-link:hover:after,.line-link:focus-visible:after{transform:scaleX(1);transform-origin:left} .line-link span,.ghost-link span{display:inline-block;transition:transform .45s var(--ease-out-soft)} .line-link:hover span,.ghost-link:hover span{transform:translate(4px,-4px)} .ghost-link{position:relative} .ghost-link:after{ background:#fff;bottom:-1px;content:'';height:1px;left:0;position:absolute; transform:scaleX(0);transform-origin:right; transition:transform .5s var(--ease-out-soft);width:100%; } .ghost-link:hover:after,.ghost-link:focus-visible:after{transform:scaleX(1);transform-origin:left} .ghost-link:focus-visible,.line-link:focus-visible,.gallery-filter:focus-visible, .gallery-open:focus-visible,.lightbox-close:focus-visible,.lightbox-nav:focus-visible, .nav-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:4px} .gallery-open:focus-visible{outline-offset:-4px} /* --- Micro-interactions : cartes villa ------------------------------------ */ .villa-card{transition:transform .6s var(--ease-out-soft)} .villa-card:hover{transform:translateY(-6px)} .villa-card-image img{transition:transform 1.1s var(--ease-out-soft)} .villa-card:hover img{transform:scale(1.06)} .card-arrow{transition:opacity .45s var(--ease-out-fine),transform .55s var(--ease-out-soft)} .villa-card:hover .card-arrow{transform:translateY(0) scale(1.06)} .status{transition:transform .5s var(--ease-out-soft)} .villa-card:hover .status{transform:translateY(-2px)} /* --- Micro-interactions : galerie ---------------------------------------- */ .gallery-grid figure img{transition:transform 1.2s var(--ease-out-soft)} .gallery-grid figure:hover img{transform:scale(1.05)} /* La légende porte le titre du visuel : elle reste lisible en permanence (et sur mobile, où il n'y a pas de survol). Le survol ne fait que la rapprocher légèrement. */ .gallery-grid figcaption{transition:transform .5s var(--ease-out-soft)} .gallery-grid figure:hover figcaption,.gallery-grid figure:focus-within figcaption{ transform:translateY(-4px); } /* --- Galerie : barre de filtres ------------------------------------------ */ .gallery-toolbar{ align-items:center; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; margin-bottom:35px; padding-bottom:18px; } .gallery-filters{display:flex;flex-wrap:wrap;gap:8px} .gallery-filter{ background:transparent; border:1px solid var(--line); border-radius:999px; color:var(--muted); cursor:pointer; font-family:inherit; font-size:9px; letter-spacing:.14em; padding:11px 20px; text-transform:uppercase; transition:background .4s var(--ease-out-fine),border-color .4s var(--ease-out-fine),color .4s var(--ease-out-fine); } .gallery-filter span{color:var(--gold);font-size:8px;margin-left:6px;vertical-align:top} .gallery-filter:hover{border-color:var(--green);color:var(--ink)} .gallery-filter.is-active{background:var(--green);border-color:var(--green);color:#fff} .gallery-filter.is-active span{color:var(--gold)} .gallery-hint{color:var(--muted);font-size:9px;letter-spacing:.13em;text-transform:uppercase} .gallery-empty{ border:1px dashed var(--line); color:var(--muted); font-size:11px; letter-spacing:.06em; padding:60px 20px; text-align:center; } /* Le déclencheur remplit la figure : toute la vignette est cliquable. position:relative est indispensable — c'est lui qui sert de référence à la pastille de zoom, sinon elle se cale sur un ancêtre lointain et atterrit n'importe où dans la page. */ .gallery-open{ background:none; border:0; cursor:zoom-in; display:block; height:100%; inset:0; padding:0; position:absolute; width:100%; z-index:1; } .gallery-open:focus-visible{outline:2px solid var(--gold);outline-offset:-4px} /* Pastille de zoom : une croix dessinée en CSS, sans dépendance à une icône. */ .gallery-zoom{ background:rgba(255,255,255,.94); border-radius:50%; height:44px; opacity:0; position:absolute; right:18px; top:18px; transform:scale(.8); transition:opacity .4s var(--ease-out-fine),transform .5s var(--ease-out-soft); width:44px; } .gallery-zoom:before,.gallery-zoom:after{ background:var(--green);content:'';left:50%;position:absolute;top:50%; transform:translate(-50%,-50%); } .gallery-zoom:before{height:1px;width:15px} .gallery-zoom:after{height:15px;width:1px} .gallery-grid figure:hover .gallery-zoom, .gallery-grid figure:focus-within .gallery-zoom{opacity:1;transform:none} /* Les vignettes filtrées sortent du flux pour que la grille se recompose. */ .gallery-grid figure[data-gallery-item]{ transition:opacity .45s var(--ease-out-fine),transform .45s var(--ease-out-soft); } .gallery-grid figure.is-filtered{display:none} /* --- Visionneuse (lightbox) ---------------------------------------------- */ .lightbox{ align-items:center; display:flex; inset:0; justify-content:center; opacity:0; padding:70px 90px; position:fixed; transition:opacity .4s var(--ease-out-fine); z-index:200; } /* display:flex l'emporte sur le display:none implicite de [hidden] : sans cette règle, la visionneuse fermée reste une surface fixe transparente qui recouvre la page et intercepte tous les clics. */ .lightbox[hidden]{display:none} .lightbox.is-open{opacity:1} .lightbox-backdrop{background:rgba(6,20,16,.95);cursor:zoom-out;inset:0;position:absolute} .lightbox-stage{ align-items:center; display:flex; height:100%; justify-content:center; position:relative; width:100%; } .lightbox-slide{ display:flex; flex-direction:column; gap:22px; margin:0; max-height:100%; max-width:100%; } .lightbox-slide[hidden]{display:none} .lightbox-slide img{ display:block; margin:0 auto; max-height:72vh; max-width:100%; object-fit:contain; } .lightbox.is-open .lightbox-slide img{animation:lightboxIn .55s var(--ease-out-soft) both} .lightbox-slide figcaption{color:#fff;max-width:640px;text-align:center} .lightbox-slide .overline{color:var(--gold);margin-bottom:10px} .lightbox-slide figcaption strong{ display:block;font-family:var(--serif);font-size:30px;font-weight:400;letter-spacing:-.02em; } .lightbox-slide figcaption span{ color:rgba(255,255,255,.62);display:block;font-size:12px;line-height:1.7;margin-top:8px; } .lightbox-close,.lightbox-nav{ align-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); border-radius:50%; color:#fff; cursor:pointer; display:flex; height:48px; justify-content:center; position:absolute; transition:background .35s var(--ease-out-fine),border-color .35s var(--ease-out-fine),transform .4s var(--ease-out-soft); width:48px; z-index:2; } .lightbox-close:hover,.lightbox-nav:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)} .lightbox-close:focus-visible,.lightbox-nav:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .lightbox-close{font-size:26px;line-height:1;right:34px;top:34px} .lightbox-nav{font-size:17px;top:50%;transform:translateY(-50%)} .lightbox-nav:hover{transform:translateY(-50%) scale(1.07)} .lightbox-prev{left:26px} .lightbox-next{right:26px} .lightbox-counter{ bottom:28px; color:rgba(255,255,255,.5); font-size:9px; left:50%; letter-spacing:.2em; position:absolute; transform:translateX(-50%); } /* Le est verrouillé pendant l'ouverture (voir app.js). */ body.lightbox-open{overflow:hidden} @keyframes lightboxIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}} @media(max-width:820px){ .lightbox{padding:70px 18px 90px} .lightbox-close{right:18px;top:18px} .lightbox-nav{bottom:24px;height:44px;top:auto;transform:none;width:44px} .lightbox-nav:hover{transform:scale(1.07)} .lightbox-prev{left:calc(50% - 58px)} .lightbox-next{right:calc(50% - 58px)} .lightbox-counter{bottom:38px;left:auto;right:18px;transform:none} .lightbox-slide img{max-height:56vh} .lightbox-slide figcaption strong{font-size:23px} } /* --- Compteurs ------------------------------------------------------------ */ /* Pendant l'animation, les chiffres gardent une chasse fixe pour éviter que la mise en page ne tressaute à chaque incrément. */ [data-count]{font-variant-numeric:tabular-nums} /* --- Barre de progression de lecture -------------------------------------- */ .scroll-progress{ background:linear-gradient(90deg,var(--gold),var(--sage)); height:2px; left:0; position:fixed; top:0; transform:scaleX(var(--progress,0)); transform-origin:left; width:100%; z-index:100; } /* --- Transition de page (Turbo) ------------------------------------------- */ /* #layout-content enveloppe {% page %} dans les deux layouts. On l'estompe avant la visite, on le ramène une fois le nouveau contenu en place. */ #layout-content{ opacity:1; transition:opacity .32s var(--ease-out-fine),transform .32s var(--ease-out-fine); transform:none; } body.is-leaving #layout-content{opacity:0;transform:translateY(10px)} body.is-entering #layout-content{opacity:0;transform:translateY(-8px)} /* --- Header : apparition du fond au défilement ---------------------------- */ .site-header{transition:background .45s var(--ease-out-fine),height .45s var(--ease-out-soft),backdrop-filter .45s} .desktop-nav a:after{transition:transform .45s var(--ease-out-soft)} /* --- Hero : entrée orchestrée -------------------------------------------- */ /* Les éléments du hero portent déjà .is-visible côté serveur pour ne pas dépendre de l'observer sur le premier écran ; on les anime au chargement. */ .layout-home .hero-content>.reveal.is-visible{animation:heroRise 1.15s var(--ease-out-soft) both} .layout-home .hero-location.is-visible{animation-delay:.15s} .layout-home .hero h1.is-visible{animation-delay:.28s} .layout-home .hero-tagline.is-visible{animation-delay:.46s} .layout-home .hero-actions.is-visible{animation-delay:.62s} .hero-facts{animation:heroFacts 1.1s var(--ease-out-soft) .85s both} .hero-facts div{transition:background .4s} .hero-facts div:hover{background:rgba(255,255,255,.05)} @keyframes heroRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} @keyframes heroFacts{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} /* --- Heros de pages intérieures : entrée orchestrée au chargement --------- */ /* Ces éléments sont au-dessus de la ligne de flottaison : ils portent .is-visible côté serveur (aucun clignotement si le JS tarde) et leur mouvement vient d'une animation, pas de l'observer. */ .page-intro-hero .overline{animation:heroRise 1s var(--ease-out-soft) .1s both} .page-intro-hero h1{animation:heroRise 1.1s var(--ease-out-soft) .22s both} .page-intro-hero>div>p:last-child{animation:heroRise 1s var(--ease-out-soft) .4s both} /* Le titre en lignes gère lui-même son mouvement : l'animation d'ensemble ne ferait que l'estomper. */ .page-intro-hero h1[data-split]{animation:heroFade 1s var(--ease-out-fine) .1s both} @keyframes heroFade{from{opacity:0}to{opacity:1}} /* --- Divers -------------------------------------------------------------- */ .home-final-links a{transition:padding .45s var(--ease-out-soft),background .45s} .home-final-links a:hover{background:rgba(181,150,99,.06)} .home-final-links i{display:inline-block;transition:transform .45s var(--ease-out-soft)} .home-final-links a:hover i{transform:translate(4px,-4px)} .distances div{transition:transform .45s var(--ease-out-soft)} .distances div:hover{transform:translateX(5px)} .qualities article{transition:transform .5s var(--ease-out-soft)} .qualities article:hover{transform:translateY(-4px)} .quality-icon{display:inline-block;transition:transform .6s var(--ease-out-soft)} .qualities article:hover .quality-icon{transform:scale(1.15) rotate(-5deg)} .document-list__item{transition:padding-left .4s var(--ease-out-soft)} .document-list__item:hover{padding-left:10px} .form-field input,.form-field select,.form-field textarea{transition:border-color .35s} .map-pin{animation:pinPulse 3.2s ease-in-out infinite} @keyframes pinPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.045)}} /* --- Respect de prefers-reduced-motion ------------------------------------ */ /* Tous les états finaux sont forcés : le contenu reste intégralement visible et lisible, seul le mouvement disparaît. */ @media(prefers-reduced-motion:reduce){ .reveal-left,.reveal-right,.reveal-fade,.reveal-scale, .reveal-stagger>*{opacity:1;transform:none;transition:none} .reveal-mask:before{display:none} .reveal-mask>img{transform:none;transition:none} .split-line .line-inner{transform:none;transition:none} .parallax>img,.parallax-media{transform:none} .button:hover,.villa-card:hover,.qualities article:hover,.distances div:hover{transform:none} .gallery-grid figcaption{opacity:1;transform:none;transition:none} .gallery-zoom{opacity:1;transform:none;transition:none} .lightbox.is-open .lightbox-slide img{animation:none} .layout-home .hero-content>.reveal.is-visible,.hero-facts{animation:none} .map-pin{animation:none} #layout-content,body.is-leaving #layout-content,body.is-entering #layout-content{ opacity:1;transform:none;transition:none; } .scroll-progress{display:none} } /* Situation: compact spacing and an immediately useful location map. */ .page-intro-hero:has(+.location){padding-bottom:70px} .location.section-pad{padding:70px 0} .location-grid{align-items:start} .location-map{background:#e8e4dc;display:block;height:620px;width:100%} /* Leaflet impose son propre z-index (400+) aux volets de la carte : sans ce contexte d'empilement, ils passeraient au-dessus de l'en-tête collant. */ .location-map.leaflet-container{isolation:isolate;z-index:0} .location-map .leaflet-control-attribution{background:rgba(255,255,255,.82);font-size:11px} .location-map .leaflet-control-attribution a{color:#18362d} .location-map .leaflet-bar a{color:#18362d} .location-copy .section-label{margin-bottom:50px} @media(max-width:820px){ .page-intro-hero:has(+.location){padding-bottom:55px} .location.section-pad{padding:55px 0} .location-map{height:500px} } @media(max-width:560px){ .page-intro-hero:has(+.location){padding-bottom:45px} .location.section-pad{padding:45px 0} .location-map{height:380px} } /* Écran de choix de gamme architecturale (page d'accueil) */ .arch-choice{display:grid;gap:30px;grid-template-columns:repeat(2,minmax(0,1fr))} .arch-option{background:var(--paper);border:1px solid var(--line);color:inherit;display:flex;flex-direction:column;min-width:0;overflow:hidden;text-decoration:none;transition:transform .6s var(--ease-out-soft),box-shadow .6s var(--ease-out-soft)} .arch-option:hover{box-shadow:0 24px 60px rgba(23,32,29,.14);transform:translateY(-6px)} .arch-option-media{aspect-ratio:4/3;background:var(--sand);overflow:hidden;position:relative} .arch-option-media:after{background:linear-gradient(0deg,rgba(7,20,17,.3),transparent 55%);content:'';inset:0;position:absolute} .arch-option-media img{height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out-soft);width:100%} .arch-option:hover .arch-option-media img{transform:scale(1.05)} .arch-option-body{display:flex;flex:1;flex-direction:column;padding:38px 40px 34px} .arch-option-body .overline{color:var(--gold)} .arch-option-body h2{font-family:var(--serif);font-size:clamp(30px,3vw,42px);font-weight:400;letter-spacing:-.03em;line-height:1.06;margin:10px 0 16px} .arch-option-tagline{color:var(--muted);font-size:16px;line-height:1.65;margin:0 0 26px} .arch-option-meta{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:26px;margin-top:auto;padding-top:22px} .arch-option-meta span{color:var(--ink);font-size:13px;letter-spacing:.08em;text-transform:uppercase} .arch-option-meta span:last-child{color:var(--muted)} .arch-option-link{align-items:center;color:var(--green);display:flex;font-size:14px;font-weight:600;gap:10px;letter-spacing:.06em;margin-top:24px;text-transform:uppercase} .arch-option-link i{font-style:normal;transition:transform .5s var(--ease-out-soft)} .arch-option:hover .arch-option-link i{transform:translateX(6px)} /* Réserves listées en bas de la page des villas */ .villas-disclaimer{background:var(--sand);padding:55px 0} .villas-disclaimer .overline{color:var(--gold);margin-bottom:18px} .villas-disclaimer p{color:var(--muted);font-size:14px;line-height:1.7;margin:0 0 8px;max-width:760px} @media(max-width:820px){ .arch-choice{grid-template-columns:1fr;gap:24px} .arch-option-body{padding:32px 30px 30px} .arch-option-media{aspect-ratio:16/10} } @media(max-width:560px){ .arch-option-body{padding:28px 24px 26px} .arch-option-meta{gap:16px} .villas-disclaimer{padding:42px 0} } /* La grille des villas s'adapte au nombre de lots : une promotion de deux biens occupait sinon deux tiers de la largeur, la troisième colonne restant vide. */ .villa-grid:has(.villa-card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} .villa-grid:has(.villa-card:only-child){grid-template-columns:minmax(0,560px)} @media(max-width:820px){ .villa-grid:has(.villa-card:nth-child(2):last-child), .villa-grid:has(.villa-card:only-child){grid-template-columns:1fr} } /* Les décalages nth-child ci-dessus étaient calés sur les trois visuels d'origine du thème. Les photos venues du backend sont cadrées par le photographe : on recentre plutôt que de les recadrer au hasard. */ .villa-card-image img{object-position:center 62%} .villa-card:nth-child(2) img, .villa-card:nth-child(3) img{object-position:center 62%} /* Un lot vendu reste consultable mais recule visuellement : la photo se désature et la carte s'atténue, pour que l'œil aille d'abord aux biens encore disponibles. Le survol restaure l'image — la fiche garde son intérêt documentaire une fois la vente faite. */ .villa-card.is-sold .villa-card-image img{filter:grayscale(1);opacity:.62} .villa-card.is-sold:hover .villa-card-image img{filter:grayscale(.35);opacity:.82} /* Le texte garde son contraste : seule l'image porte l'atténuation. Sur le fond vert des sections villas, un texte grisé passait sous le seuil de lisibilité. */ .villa-card.is-sold .villa-card-head h3{opacity:.78} .villa-card.is-sold .villa-card-facts dd, .villa-card.is-sold .villa-card-head p{opacity:.72} /* Sous-menu des gammes dans la navigation principale. Le survol suffit au pointeur ; le focus clavier ouvre le même panneau pour que la navigation au clavier atteigne les deux gammes. */ .nav-group{position:relative} .nav-group-trigger i{display:inline-block;font-size:7px;font-style:normal;margin-left:5px;transition:transform .3s var(--ease-out-soft);vertical-align:middle} .nav-group:hover .nav-group-trigger i, .nav-group:focus-within .nav-group-trigger i{transform:rotate(180deg)} .nav-group.active>.nav-group-trigger:after{transform:scaleX(1);transform-origin:left} .nav-submenu{background:var(--paper);box-shadow:0 22px 50px rgba(7,20,17,.22);left:50%;min-width:290px;opacity:0;padding:10px;pointer-events:none;position:absolute;top:calc(100% + 18px);transform:translate(-50%,-8px);transition:opacity .3s var(--ease-out-soft),transform .3s var(--ease-out-soft);z-index:60} .nav-group:hover .nav-submenu, .nav-group:focus-within .nav-submenu{opacity:1;pointer-events:auto;transform:translate(-50%,0)} /* Prolonge la zone sensible jusqu'au panneau : sans ce pont, le menu se ferme dès que le pointeur quitte le lien pour descendre vers lui. */ .nav-submenu:before{content:'';height:24px;left:0;position:absolute;right:0;top:-24px} .nav-submenu a{display:block;letter-spacing:0;padding:15px 18px;text-transform:none;transition:background .25s var(--ease-out-soft)} .nav-submenu a:after{display:none} .nav-submenu a:hover{background:var(--sand)} .nav-submenu strong{color:var(--green);display:block;font-family:var(--serif);font-size:19px;font-weight:400;letter-spacing:-.01em} .nav-submenu small{color:var(--muted);display:block;font-size:11px;letter-spacing:.05em;margin-top:4px;text-transform:uppercase} /* Bascule entre les gammes, posée sur les bandeaux d'introduction. Les deux variantes de fond (vert et sable) exigent chacune leur contraste. */ .promo-switch{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px} .promo-switch-option{border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:11px;letter-spacing:.11em;padding:12px 22px;text-transform:uppercase;transition:background .3s var(--ease-out-soft),color .3s var(--ease-out-soft),border-color .3s var(--ease-out-soft)} .promo-switch-option:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)} .promo-switch-option.is-current{background:var(--green);border-color:var(--green);color:#fff} .page-intro-green .promo-switch-option{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.78)} .page-intro-green .promo-switch-option:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff} .page-intro-green .promo-switch-option.is-current{background:var(--paper);border-color:var(--paper);color:var(--green)} @media(max-width:560px){ .promo-switch{gap:8px;margin-top:28px} .promo-switch-option{font-size:10px;padding:11px 17px} } /* Le conteneur du sous-menu est un bloc parmi des liens : sans alignement explicite, sa ligne de base s'écarte de celle de ses voisins. */ .desktop-nav{align-items:center} .nav-group{display:flex} .nav-group-trigger{display:flex;align-items:center;line-height:1} .desktop-nav>a{line-height:1} /* --- Fil d'Ariane -------------------------------------------------------- */ /* Rendu sous le hero de la fiche villa. Le