/* ============================================================
Azur Teak Deck — design system
Ported from azur-teak-deck-trilingue.html (source of truth).
Fonts self-hosted (privacy policy commitment): no fonts.googleapis.com,
no fonts.gstatic.com anywhere in this theme.
============================================================ */
/* --- Self-hosted webfonts (OFL, see assets/fonts/LICENSE-*.txt) ---
Privacy policy states fonts are hosted locally. No fonts.googleapis.com,
no fonts.gstatic.com. latin + latin-ext only: FR accents, IT accents and
RO diacritics (BLITZ DEVELOPMENT SRL) are covered; cyrillic/greek/vietnamese
subsets are deliberately not shipped. ~90 KB total, browser loads what it needs.
------------------------------------------------------------------ */
@font-face{font-family:'Marcellus';src:url('../fonts/marcellus-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Marcellus';src:url('../fonts/marcellus-400-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-400-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-500-ext.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-600-ext.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* --- Photo containers ---------------------------------------
The prototype painted every photo as a CSS background-image, which
blocks WordPress srcset and native lazy loading. In this theme the
photo is a real inside the container and object-fit reproduces
the identical framing. .card-photo/.visual/.proj .img keep their
prototype geometry; the child does the covering.
------------------------------------------------------------- */
/* Descendant selectors, NOT child selectors.
atd_img() emits , so the is a grandchild of the
container — ".card-photo > img" never matched and the photos rendered at
their intrinsic size with object-fit:fill instead of covering the cell.
wp_get_attachment_image() on the projects page is unwrapped, which is why
that page looked correct while the home damier did not. */
.card-photo picture,.visual picture,.proj .img picture{
display:block;width:100%;height:100%;
}
.card-photo img,.visual img,.proj .img img{
width:100%;height:100%;object-fit:cover;object-position:var(--focal,center);display:block;
}
:root{
--ph-before:url("../img/ba-before.webp");
--ph-recaulk:url("../img/ph-recaulk.webp");
--bg-calm:url("../img/bg-calm.webp");
--bg-fab:url("../img/bg-fab.webp");
--bg-hero:url("../img/bg-hero.webp");
--bg-night:url("../img/bg-night.webp");
--bg-grain:url("../img/bg-grain.webp");
/* Client-supplied hero for The Teak page (photo/7). Its own variable so
--bg-grain keeps meaning "wood grain texture" and stays reusable. */
--bg-faq-hero:url("../img/bg-faq-hero.webp");
--bg-projects-hero:url("../img/bg-projects-hero.webp");
--bg-teak-hero:url("../img/bg-teak-hero.webp");
--ph-after:url("../img/ba-after.webp");
--ph-night:url("../img/ph-night.webp");
--blanc:#FFFFFF;
--blanc-doux:#FAFAF7;
--marine:#0C2340;
--marine-encre:#132B49;
--azur:#B98F4E;
--azur-fonce:#0A1B33;
--or:#B98F4E;
--or-clair:#CBA76B;
--gris-metal:#79818C;
--gris-fonce:#4C545F;
--ligne:#E5E3DD;
--ligne-marine:rgba(12,35,64,.12);
--caulk:#1B1B1B;
/*
* The logo's own teak, as CSS.
*
* parts/logo-mark.php paints three planks — #C99C63 #BE9057 #CBA068 — inside
* a #F5F2EA frame. Those exact values give a white glyph only 2.4:1 of
* contrast, under the 3:1 that WCAG 1.4.11 asks of an interactive icon, so
* for a control (rather than the decorative wordmark) each plank is deepened
* a uniform 14.5%. Hue is untouched at 33°, the planks keep their relationship,
* and the glyph clears 3.22:1 — better than the blue button this replaces.
*/
--teak-a:#AC8555;
--teak-b:#A27B4A;
--teak-c:#AE8959;
--teak-a-fonce:#9B784C;
--teak-b-fonce:#926F43;
--teak-c-fonce:#9D7B50;
--teak-cadre:#F5F2EA;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:'Manrope',sans-serif;font-weight:400;color:var(--marine-encre);
background:var(--blanc);line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Marcellus',serif;font-weight:400;line-height:1.15;color:var(--marine)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(22px,5vw,72px)}
.eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--azur);font-weight:600;display:block;margin-bottom:18px}
.section{padding:clamp(72px,11vh,140px) 0}
.section.tint{background:var(--blanc-doux)}
p.lead{font-size:clamp(17px,1.5vw,20px);color:var(--gris-fonce);max-width:62ch}
.muted{color:var(--gris-metal)}
.gold-rule{width:44px;height:1px;background:var(--or);margin:26px 0}
/* Plank divider */
/* Nav */
nav{position:sticky;top:0;z-index:60;background:var(--marine);border-bottom:none}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:80px;gap:18px}
.brand{display:flex;align-items:center;gap:14px;cursor:pointer}
.logo-mark{width:46px;height:46px;flex:none}
.logo-word{font-family:'Marcellus',serif;font-size:24px;font-weight:700;letter-spacing:.11em;color:#fff;line-height:1.1;white-space:nowrap}
/* The prototype declared the small-screen wordmark here, BEFORE the 1240px
block that sets font-size:20px. Both match on a phone and the later rule
wins, so the wordmark never actually shrank. Moved below the other nav
breakpoints so it takes effect — see "Mobile nav" at the end of this file. */
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-size:13.5px;font-weight:500;letter-spacing:.05em;color:rgba(255,255,255,.82);padding:6px 0;position:relative;cursor:pointer;transition:color .25s;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:#fff;transition:width .3s}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-right{display:flex;align-items:center;gap:18px}
.lang{display:flex;gap:2px;border:1px solid rgba(255,255,255,.45)}
.lang button{border:none;background:none;padding:7px 10px;font-family:'Manrope',sans-serif;font-size:11.5px;letter-spacing:.08em;font-weight:600;color:rgba(255,255,255,.75);cursor:pointer;transition:all .25s}
.lang button.on{background:#fff;color:var(--marine)}
.lang button:not(.on):hover{color:#fff}
.nav-cta{display:inline-block;line-height:1;border:1px solid #fff;padding:10px 20px;font-size:12.5px;letter-spacing:.08em;color:#fff;cursor:pointer;transition:all .3s;background:transparent;font-weight:600}
.nav-cta:hover{background:#fff;color:var(--marine)}
/* Burger: the logo mark, in miniature.
*
* It was three bare white lines floating on the blue bar — no edge, no target,
* nothing saying "press me", which on a phone is the only way into the site.
* Now it is cut from the same block as the mark opposite it: the cream frame at
* the mark's own 7/240 ratio (2px at 44px), the corner radius at its 34/240
* (6px), and the three teak planks in the same left-to-right order. Wordmark on
* the left, the same material on the right.
*
* 44px is deliberate — the smallest comfortable touch target, and close enough
* to the 46px mark to read as its sibling.
*
* Planks are the deepened set (see --teak-a), not the logo's literal values: a
* white bar on the logo's own teak is 2.4:1, under the 3:1 WCAG asks of a
* control. These clear 3.22:1 at the same hue.
*/
.burger{
display:none;
align-items:center;justify-content:center;
flex-direction:column;gap:4px;
width:44px;height:44px;padding:0;
border:2px solid var(--teak-cadre);
border-radius:6px;
background:linear-gradient(90deg,
var(--teak-a) 0 33.333%,
var(--teak-b) 33.333% 66.666%,
var(--teak-c) 66.666% 100%);
cursor:pointer;
transition:background .25s ease;
}
.burger span{
width:20px;height:2px;background:#fff;border-radius:1px;
transition:transform .25s ease,opacity .2s ease;
}
.burger:hover{
background:linear-gradient(90deg,
var(--teak-a-fonce) 0 33.333%,
var(--teak-b-fonce) 33.333% 66.666%,
var(--teak-c-fonce) 66.666% 100%);
}
.burger:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Open state. The JS already flips aria-expanded, so the button can say so
itself: bars 1 and 3 close into a cross, bar 2 goes. 6px is the gap plus the
bar height, i.e. exactly the distance to the middle. */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1240px){
.nav-links{gap:18px}
.nav-links a{font-size:12.5px}
.logo-word{font-size:20px}
.nav-cta{padding:9px 14px;font-size:11.5px}
}
@media(max-width:1080px){
.nav-links{display:none;position:absolute;top:80px;left:0;right:0;background:var(--marine);flex-direction:column;padding:28px;gap:22px;border-bottom:none}
.nav-links.open{display:flex}
.burger{display:flex}
.nav-cta{display:none}
}
/* --- Credibility bar -----------------------------------------------------
Deliberately weightless: the eyebrow's own type scale, --gris-metal, a single
hairline above. It has to read as a caption under the hero, never as a
feature strip — the hero's authority comes from its white space, and a boxed
band of five items would spend it.
-------------------------------------------------------------------------- */
.cred-bar{padding:0 0 clamp(28px,4vh,48px)}
.cred-bar ul{
list-style:none;margin:0;padding:22px 0 0;
border-top:1px solid var(--ligne);
display:flex;flex-wrap:wrap;gap:10px clamp(20px,3vw,44px);
}
.cred-bar li{
font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--gris-metal);font-weight:600;
}
/* Separator sits AFTER each item, not before the next one. Placed before, a
wrapped row opened with an orphaned dot hanging in the left margin — which is
exactly what happened once the French strings pushed the list onto two lines. */
.cred-bar li{position:relative}
.cred-bar li:not(:last-child)::after{
content:"";position:absolute;right:calc(-1 * clamp(10px,1.5vw,22px));top:50%;
width:3px;height:3px;border-radius:50%;background:var(--or);transform:translateY(-50%);
}
@media(max-width:640px){
.cred-bar ul{gap:8px 18px}
.cred-bar li{font-size:10.5px;letter-spacing:.14em}
.cred-bar li:not(:last-child)::after{right:-11px}
}
/* Pages */
/* SPA residue, neutralised.
The prototype was a single document that hid every .page and revealed one
with .page.active. In WordPress each of these is a real URL, so the page
must always display — keeping display:none here renders the whole site
blank. The fade is preserved because it was part of the signed-off feel. */
.page{display:block;animation:fadeIn .5s ease}
.page.active{display:block}
@media (prefers-reduced-motion:reduce){.page{animation:none}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Hero */
.hero{
position:relative;padding:clamp(90px,14vh,170px) 0 clamp(80px,12vh,150px);
background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.97)),
repeating-linear-gradient(90deg,rgba(12,35,64,.05) 0 2px,transparent 2px 150px);
overflow:hidden;
}
.hero h1{font-size:clamp(38px,5.6vw,72px);max-width:16ch}
.hero h1 .azur{color:#2A4C7C}
.hero .lead{margin-top:28px}
.hero-actions{display:flex;gap:18px;margin-top:44px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;font-size:13.5px;letter-spacing:.08em;font-weight:600;cursor:pointer;transition:all .3s;border:1px solid var(--marine)}
.btn.primary{background:var(--marine);color:#fff}
.btn.primary:hover{background:var(--azur-fonce);border-color:var(--azur-fonce)}
.btn.ghost{background:transparent;color:var(--marine)}
.btn.ghost:hover{background:var(--marine);color:#fff}
.btn .arr{color:var(--azur);transition:transform .3s}
.btn.primary .arr{color:var(--or-clair)}
.btn:hover .arr{transform:translateX(4px)}
#page-home .hero{
background:
linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.74) 46%,rgba(255,255,255,.46) 74%,rgba(255,255,255,.26) 100%),
var(--bg-hero) center bottom/100% auto no-repeat;
}
@media(max-width:900px){
#page-home .hero{
background:
linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.80) 60%,rgba(255,255,255,.45) 100%),
var(--bg-hero) center bottom/cover no-repeat;
}
}
#page-home .hero .lead{color:var(--marine)}
#page-teck .hero{
background:
linear-gradient(90deg,rgba(255,255,255,.84) 0%,rgba(255,255,255,.62) 42%,rgba(255,255,255,.22) 70%,rgba(255,255,255,0) 100%),
var(--bg-teak-hero) center/cover no-repeat;
}
/*
* The Projects hero. Text sits left, so the wash fades left-to-right and lets
* the foredeck carry the right-hand side — same treatment as #page-teck.
* The source is 1584x672, far wider than the hero band, so cover crops the
* top and bottom rather than the yacht.
*/
/*
* The FAQ hero. Same treatment as #page-realisations: the wash fades left to
* right so the text carries the left and the foredeck holds the right. The
* source is 1584x672, much wider than the hero band, so cover crops top and
* bottom rather than the deck.
*/
#page-faq .hero{
background:
linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.80) 40%,rgba(255,255,255,.38) 70%,rgba(255,255,255,.12) 100%),
var(--bg-faq-hero) center/cover no-repeat;
}
@media(max-width:900px){
/* Narrow screens sit the text over the middle of the frame, so the wash has
to come from the top or the H1 lands on the bright sea. */
#page-faq .hero{
background:
linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.84) 62%,rgba(255,255,255,.55) 100%),
var(--bg-faq-hero) center/cover no-repeat;
}
}
#page-realisations .hero{
background:
linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.78) 40%,rgba(255,255,255,.34) 70%,rgba(255,255,255,.10) 100%),
var(--bg-projects-hero) center/cover no-repeat;
}
@media(max-width:900px){
/* Narrow screens put the text over the middle of the frame, so the wash has
to come from the top instead or the H1 lands on the white superstructure. */
#page-realisations .hero{
background:
linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.84) 62%,rgba(255,255,255,.55) 100%),
var(--bg-projects-hero) center/cover no-repeat;
}
}
#page-services .hero{
background:
linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.90) 46%,rgba(255,255,255,.40) 76%,rgba(255,255,255,.14) 100%),
var(--bg-fab) center 62%/cover no-repeat;
}
@media(max-width:900px){
#page-services .hero{
background:
linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 100%),
var(--bg-fab) center 62%/cover no-repeat;
}
}
#page-contact .hero{
background:
linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.92) 44%,rgba(255,255,255,.35) 78%,rgba(255,255,255,.15) 100%),
var(--bg-calm) right center/cover no-repeat;
}
@media(max-width:900px){
#page-contact .hero{
background:
linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 100%),
var(--bg-calm) 68% center/cover no-repeat;
}
}
.post .thumb{aspect-ratio:16/10;background-size:cover;background-position:center;margin-bottom:16px;border:1px solid var(--ligne)}
/* Cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ligne);border:1px solid var(--ligne)}
.card-photo{min-height:240px}
@media(max-width:900px){.grid3{grid-template-columns:1fr}}
.card{background:#fff;padding:clamp(32px,4vw,52px) clamp(26px,3vw,42px);transition:background .3s;position:relative;cursor:pointer}
.card:hover{background:var(--blanc-doux)}
.card .num{font-family:'Marcellus',serif;color:var(--or);font-size:15px;letter-spacing:.18em;margin-bottom:22px;display:block}
.card h3{font-size:clamp(21px,2vw,25px);margin-bottom:16px}
.card p{font-size:15px;color:var(--gris-fonce)}
.card .more{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:12.5px;letter-spacing:.1em;font-weight:600;color:var(--marine);text-transform:uppercase}
.card .more span{color:var(--azur)}
.sec-head{max-width:760px;margin-bottom:clamp(44px,6vh,72px)}
.sec-head h2{font-size:clamp(30px,3.6vw,48px)}
.oneline{white-space:nowrap;max-width:none !important}
.ft-brandline{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:6px}
.form-intro{font-size:15.5px;color:var(--gris-fonce);max-width:60ch;margin-bottom:10px}
.form-rt{font-size:13px;color:var(--azur);letter-spacing:.02em;margin-bottom:26px}
.form-conf{font-size:12px;color:var(--gris-metal);margin-top:14px}
.refit-band{background:linear-gradient(180deg,#0E2848 0%,#0C2340 60%,#0A1E38 100%)}
.refit-band .eyebrow{color:var(--azur)}
.refit-band h2{color:#FFFFFF}
.refit-band .sec-head p{color:rgba(255,255,255,.72)}
.refit-band .tl-step{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:30px 26px 34px}
.refit-band .tl-step h4{color:#FFFFFF}
.refit-band .tl-step p{color:rgba(255,255,255,.70)}
.refit-band .tl-step .dur{color:#EFE2C8;background:rgba(185,143,78,.16);border-color:rgba(185,143,78,.45)}
.tl-vert{position:relative;margin-top:clamp(36px,5vh,56px);padding-left:64px;max-width:820px}
.tl-vert .rail{position:absolute;left:19px;top:10px;bottom:10px;width:2px;background:rgba(255,255,255,.14);border-radius:2px}
#tlBarV{position:absolute;left:19px;top:10px;width:2px;background:var(--azur);height:0;border-radius:2px;box-shadow:0 0 12px rgba(185,143,78,.5)}
.tl-vert .tl-step{position:relative;margin-bottom:22px;opacity:0;transform:translateY(34px);transition:opacity .65s ease,transform .65s ease}
.tl-vert .tl-step.in{opacity:1;transform:none}
.tl-vert .tl-step::before{content:'';position:absolute;left:-52px;top:38px;width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:#0C2340;transition:all .3s}
.tl-vert .tl-step{position:relative}
.tl-vert .tl-step.on::before{background:var(--azur);border-color:var(--azur);box-shadow:0 0 14px rgba(185,143,78,.65)}
.tl-vert .tl-step.on{border-color:rgba(185,143,78,.5)}
.tl-step .ghost{position:absolute;top:6px;right:14px;font-family:'Marcellus',serif;font-size:88px;line-height:1;color:rgba(255,255,255,.07);pointer-events:none}
.hero-tags{font-family:'Manrope',sans-serif;font-size:16px;font-weight:700;letter-spacing:.28em;word-spacing:1.4em;text-transform:uppercase;color:#A87E3E;text-shadow:0 1px 0 rgba(255,255,255,.7);margin:30px 0 8px;text-align:center}
@media(max-width:820px){.oneline{white-space:normal}}
.sec-head p{margin-top:20px;color:var(--gris-fonce)}
/* Before / After */
.ba-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
@media(max-width:960px){.ba-wrap{grid-template-columns:1fr}}
.ba{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--ligne);user-select:none;touch-action:none}
.teak{position:absolute;inset:0}
.teak.gris{
background:var(--ph-before) center/cover no-repeat,
repeating-linear-gradient(90deg,var(--caulk) 0 3px,#9A968D 3px 20px,#ABA79E 20px 33px,#9A968D 33px 47px,#A29E95 47px 61px);
}
.teak.miel{
background:var(--ph-after) center/cover no-repeat,
repeating-linear-gradient(90deg,#1B1B1B 0 3px,#B4854C 3px 18px,#C89B60 18px 34px,#A97C44 34px 46px,#C89B60 46px 61px);
}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(12,35,64,.25);cursor:ew-resize;z-index:5}
.ba-handle::after{
content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:44px;height:44px;background:var(--azur);border:none;border-radius:50%;
display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;
box-shadow:0 4px 14px rgba(12,35,64,.22);
}
.ba-tag{position:absolute;bottom:14px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;background:rgba(255,255,255,.92);padding:6px 12px;color:var(--marine);font-weight:600;z-index:4}
.ba-tag.g{left:14px}.ba-tag.m{right:14px}
.ba-note{font-size:12.5px;color:var(--gris-metal);margin-top:14px;letter-spacing:.03em}
/* Season timeline */
.tl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);position:relative;margin-top:clamp(40px,6vh,64px)}
@media(max-width:760px){.tl{grid-template-columns:1fr}}
.tl::before{content:"";position:absolute;top:7px;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--azur),var(--azur) 70%,transparent)}
@media(max-width:760px){.tl::before{display:none}}
.tl-step{position:relative;padding-top:34px}
.tl-step::before{content:"";position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid var(--azur)}
.tl-step:last-child::before{background:var(--azur)}
.tl-step .phase{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--azur);font-weight:600}
.tl-step h4{font-family:'Marcellus',serif;font-weight:400;font-size:clamp(19px,1.8vw,23px);color:var(--marine);margin:10px 0 10px}
.tl-step p{font-size:14.5px;color:var(--gris-fonce)}
.tl-step .dur{display:inline-block;margin-top:14px;font-size:12px;letter-spacing:.08em;font-weight:600;color:var(--marine);border:1px solid var(--ligne);padding:6px 12px;background:var(--blanc-doux)}
/* Process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,44px)}
.step{border-top:1px solid var(--ligne);padding-top:22px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step .n{font-family:'Marcellus',serif;color:var(--or);font-size:15px;letter-spacing:.16em}
.step h4{font-family:'Marcellus',serif;font-weight:400;font-size:19px;color:var(--marine);margin:12px 0 10px}
.step p{font-size:14px;color:var(--gris-fonce)}
/* Clients */
.clients{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ligne)}
@media(max-width:820px){.clients{grid-template-columns:repeat(2,1fr)}}
.client{padding:34px 26px;border-right:1px solid var(--ligne)}
.client:last-child{border-right:none}
@media(max-width:820px){.client:nth-child(2){border-right:none}.client:nth-child(-n+2){border-bottom:1px solid var(--ligne)}}
.client h4{font-family:'Marcellus',serif;font-weight:400;font-size:18px;color:var(--marine)}
.client p{font-size:13.5px;color:var(--gris-metal);margin-top:8px}
/* Service blocks */
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(36px,5vw,84px);align-items:center}
.svc.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.svc.flip .visual{order:-1}
@media(max-width:900px){.svc,.svc.flip{grid-template-columns:1fr}
.svc.flip .visual{order:0}}
.svc h3{font-size:clamp(25px,2.8vw,34px)}
.svc .tagline{color:var(--azur);font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-bottom:16px;display:block}
.svc ul{list-style:none;margin-top:24px}
.svc li{padding:13px 0 13px 26px;border-bottom:1px solid var(--ligne);font-size:15px;color:var(--gris-fonce);position:relative}
.svc li::before{content:"·";color:var(--azur);position:absolute;left:6px;font-size:22px;line-height:1}
.svc .visual{aspect-ratio:4/3;border:1px solid var(--ligne);position:relative;overflow:hidden;background:var(--blanc-doux)}
.svc .visual .ph{color:var(--gris-metal);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;background:rgba(255,255,255,.88);position:absolute;left:0;right:0;bottom:0;padding:12px;display:flex;align-items:center;justify-content:center}
.visual.v-neuf{background:repeating-linear-gradient(78deg,#1B1B1B 0 3px,#B4854C 3px 20px,#C89B60 20px 37px,#A97C44 37px 52px)}
.visual.v-renov{background:repeating-linear-gradient(78deg,#1B1B1B 0 3px,#9A968D 3px 20px,#B4854C 20px 37px,#ABA79E 37px 52px)}
.visual.v-sanding{background:repeating-linear-gradient(78deg,#1B1B1B 0 3px,#C89B60 3px 22px,#D8B078 22px 40px,#B4854C 40px 55px)}
/* Teak page */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ligne);border:1px solid var(--ligne)}
@media(max-width:860px){.spec-grid{grid-template-columns:1fr}}
.spec{background:#fff;padding:36px 30px}
.spec .k{font-family:'Marcellus',serif;font-size:26px;color:var(--marine)}
.spec .u{color:var(--azur);font-size:14px}
.spec p{font-size:13.5px;color:var(--gris-metal);margin-top:10px}
.longform{max-width:720px}
.longform h3{font-size:clamp(22px,2.4vw,28px);margin:52px 0 18px}
.longform p{margin-bottom:18px;color:var(--gris-fonce)}
/* --- The Teak: the four chapters, laid along a seam ---------------------
The rail is the product, not a generic timeline line: a teak plank between
two caulk seams, capped by the plugs that hide the fastenings. The ghost
rail is the full run; .tk-rail-fill is the same plank at full strength,
its height driven by scroll position in atd.js.
Nothing here hides content on its own. The steps are only cloaked once JS
adds .tk-ready to the track, so with JS off — or with reduced motion, where
the script skips the class — every chapter renders in place, visible.
---------------------------------------------------------------------- */
.teak-track{position:relative;max-width:1040px;margin:0 auto}
.tk-rail,
.tk-rail-fill{
position:absolute;left:50%;transform:translateX(-50%);
width:9px;border-radius:1px;
background:linear-gradient(90deg,
var(--caulk) 0 1px,
var(--teak-a) 1px 4px,
var(--teak-b) 4px 6px,
var(--teak-c) 6px 8px,
var(--caulk) 8px 9px);
}
.tk-rail{top:0;bottom:0;opacity:.15}
.tk-rail-fill{top:0;height:0}
.tk-step{
position:relative;
display:grid;grid-template-columns:1fr 84px 1fr;align-items:start;
margin-bottom:clamp(52px,8vh,96px);
}
.tk-step:last-child{margin-bottom:0}
.tk-card{grid-column:1}
.tk-step:nth-of-type(even) .tk-card{grid-column:3}
/* The plug sits on the seam and covers it, so it needs no ring cut out of the
page colour — which also means it survives any change of section tint. */
.tk-plug{
grid-column:2;justify-self:center;align-self:start;margin-top:12px;
width:18px;height:18px;border-radius:50%;
background:var(--blanc);border:2px solid var(--teak-b);
z-index:2;
transition:background .45s ease,transform .45s ease;
}
.tk-step.is-in .tk-plug{background:var(--teak-b);transform:scale(1.15)}
.tk-card h3{margin:0}
.tk-card .gold-rule{display:block;margin:16px 0 18px}
.tk-card p{margin:0;color:var(--gris-fonce)}
/* Reveal. --tk-dx sends each card back towards its own side of the seam. */
.teak-track.tk-ready .tk-card{
opacity:0;transform:translate(var(--tk-dx,0),14px);
transition:opacity .65s ease,transform .65s ease;
}
.teak-track.tk-ready .tk-step:nth-of-type(odd) .tk-card{--tk-dx:-22px}
.teak-track.tk-ready .tk-step:nth-of-type(even) .tk-card{--tk-dx:22px}
.teak-track.tk-ready .tk-step.is-in .tk-card{opacity:1;transform:none}
/* Below 900px the seam moves to the left margin and every chapter hangs off
it — alternating sides needs two columns of width, and there aren't two. */
@media(max-width:900px){
.tk-rail,.tk-rail-fill{left:22px}
.tk-step{grid-template-columns:44px 1fr}
.tk-card,
.tk-step:nth-of-type(even) .tk-card{grid-column:2}
/* Column 2 is the card here, so the plug has to be told to move as well —
left in column 2 it centres itself in the text, off the seam entirely. */
.tk-plug{grid-column:1}
.teak-track.tk-ready .tk-step:nth-of-type(odd) .tk-card,
.teak-track.tk-ready .tk-step:nth-of-type(even) .tk-card{--tk-dx:0}
}
/* Related-project cards are links, and the whole card is clickable here —
unlike the listing, there is no gallery inside them to swallow the click. */
.proj-link{display:block;text-decoration:none;color:inherit;transition:box-shadow .25s,transform .25s}
.proj-link:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(12,35,64,.10)}
.proj-link .img{aspect-ratio:4/3;overflow:hidden;background:var(--blanc-doux)}
.proj-link .img img{width:100%;height:100%;object-fit:cover}
.proj-link h4{transition:color .25s}
.proj-link:hover h4{color:var(--azur)}
/* --- A single project -------------------------------------------------- */
/*
* The breadcrumb is a