:root{
  --white:#fff;
  --yellow:#FAEBB8;
  --blue:#D0EBF2;
  --red:#AA3C3F;
  --black:#000;
  --serif:"Young Serif",Georgia,serif;
  --mono:"Courier Prime","Courier New",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:#000;font-family:var(--mono);font-size:16px;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
.topbar{
  height:56px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;
  background:var(--yellow);border-bottom:1px solid #000;position:relative;z-index:20
}
.topbar .brand{font-family:var(--serif);font-size:28px;text-decoration:none}
.topbar .menu-link{font-family:var(--serif);font-size:16px;text-underline-offset:4px}
.section-yellow{background:var(--yellow)}
.white{background:#fff}
.red{background:var(--red);color:#fff}

/* HERO — proportions based on the supplied 1728px desktop reference */
.hero{height:820px;position:relative;padding:0 7.2vw;overflow:hidden}
.hero-inner{height:100%;max-width:1500px;margin:0 auto;display:grid;grid-template-columns:50% 50%;align-items:center}
.hero-copy{padding-top:20px;text-align:center}
.hero-copy h1{font-family:var(--serif);font-weight:400;font-size:clamp(72px,5.55vw,96px);line-height:.96;letter-spacing:-.035em;margin:0}
.signature{font-family:var(--serif);font-size:24px;text-align:right;margin:14px 15% 0 0}
.portrait-wrap{width:min(560px,78%);justify-self:center;transform:rotate(6deg) translateY(5px)}
.portrait-wrap img{width:100%}
.hero-notes{display:none}
.wave-red{
  height:150px;bottom:-2px;background:var(--red);
  clip-path:polygon(0 67%,8% 42%,18% 18%,27% 3%,35% 0,45% 16%,55% 39%,66% 66%,76% 86%,84% 95%,91% 88%,100% 67%,100% 100%,0 100%)
}
.wave{position:absolute;left:0;width:100%;pointer-events:none}

/* MANIFESTO */
.manifesto{height:500px;display:grid;place-items:center;padding:50px 18vw 25px;text-align:center}
.manifesto p{font-family:var(--serif);font-size:clamp(45px,3.45vw,60px);line-height:1.03;margin:0;max-width:1200px}
.manifesto p::first-letter{color:var(--yellow)}

/* J'AIME MOINS */
.likes{height:565px;display:grid;place-items:center;text-align:center;padding:50px 12vw}
.likes p{font-family:var(--serif);font-size:clamp(42px,3.25vw,56px);line-height:1.03;margin:0;max-width:1250px}
.likes span{color:var(--red)}

/* ON Y VA */
.skills{min-height:990px;padding:52px 18px 90px;position:relative}
.skills>h2{font-family:var(--serif);font-weight:400;font-size:clamp(76px,5.6vw,98px);line-height:1;margin:0 0 110px}
.skills-grid{max-width:none;margin:0;display:grid;grid-template-columns:48% 52%;gap:0;align-items:start}
.skills-intro{font-size:20px;line-height:1.08;max-width:690px}
.skills-intro p{margin:0 0 24px}
.skills-intro h3{font-family:var(--serif);font-size:28px;text-decoration:underline;text-underline-offset:8px;margin:75px 0 38px}
.skills-intro .button{margin-top:150px}
.skills-list{position:relative;font-family:var(--serif);font-size:clamp(48px,3.65vw,63px);line-height:1.02;padding:25px 20px 20px 130px}
.skills-list p{margin:0;position:relative;z-index:2}
.daisy{position:absolute;left:-5px;top:75px;color:var(--yellow);font-size:245px;line-height:.7;z-index:1}
.button{display:inline-flex;align-items:center;justify-content:center;min-width:340px;min-height:86px;text-decoration:none;font-size:14px;padding:14px 30px}
.button.black{background:#000;color:#fff;border-radius:0 0 20px 0}
.button.blue{background:var(--blue);color:#000;border-radius:0 45px 45px 45px;width:100%;min-height:84px}

/* BLUE WAVE */
.ticker-section{height:610px;position:relative;overflow:hidden;background:#fff}
.ticker{position:absolute;left:0;right:0;top:88px;height:455px;background:var(--blue);display:flex;align-items:center;overflow:hidden;clip-path:polygon(0 17%,9% 7%,18% 0,27% 3%,39% 14%,53% 30%,66% 42%,76% 47%,85% 42%,100% 17%,100% 83%,91% 94%,80% 100%,69% 95%,57% 82%,44% 67%,31% 56%,21% 55%,10% 66%,0 80%)}
.ticker-track{display:flex;width:max-content;animation:marquee 25s linear infinite;font-family:var(--serif);font-size:clamp(56px,4.6vw,80px);white-space:nowrap;transform:rotate(-4deg)}
@keyframes marquee{to{translate:-50% 0}}
.wave-blue.top,.wave-blue.bottom{display:none}

/* PROJECTS */
.projects{padding:70px 0 90px}
.project-strip{display:grid;grid-auto-flow:column;grid-auto-columns:31vw;gap:24px;overflow-x:auto;padding:0 16px 22px;scroll-snap-type:x mandatory}
.project-card{scroll-snap-align:start;min-width:0}
.project-card img{width:100%;height:530px;object-fit:cover}
.project-card h3{font-family:var(--serif);font-size:25px;margin:28px 0 24px}
.project-card p{font-size:16px;line-height:1.05;max-width:420px;margin:0}

/* OFFERS */
.offers{min-height:865px;padding:16px 20px 40px}
.offers-inner{max-width:550px;margin:auto}
.offers h2{font-family:var(--serif);font-weight:400;text-align:center;font-size:clamp(50px,3.7vw,64px);line-height:1.02;margin:0}
.offers-lead{text-align:center;font-size:16px;line-height:1.15;margin:70px 0 28px}
.accordion details{border-bottom:1px solid rgba(255,255,255,.7);padding:27px 0}
.accordion summary{cursor:pointer;list-style:none;font-family:var(--serif);font-size:28px;display:flex;justify-content:space-between}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary:after{content:"◆";font-size:12px;align-self:center}
.accordion details[open] summary:after{content:"◇"}
.accordion details p{font-size:14px;line-height:1.4;max-width:480px}
.offers .button{margin-top:60px}

/* CTA + FOOTER */
.contact{height:750px;position:relative;text-align:center;padding:55px 20px 150px;overflow:hidden}
.contact-inner{max-width:900px;margin:auto}
.contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(70px,5.2vw,90px);line-height:.98;margin:0}
.contact p{font-size:17px;line-height:1.05;margin:85px 0 0}
.contact .button{margin-top:35px;min-width:410px}
.footer-wave{display:block;bottom:-2px;height:160px;background:var(--blue);clip-path:polygon(0 70%,10% 43%,20% 20%,28% 6%,35% 0,44% 8%,55% 28%,67% 52%,78% 72%,88% 78%,100% 62%,100% 100%,0 100%)}
footer{background:var(--blue);height:265px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 78px;font-family:var(--serif);font-size:29px}
footer span:nth-child(2){text-align:center}
footer>a{text-align:right;text-decoration:underline;text-underline-offset:7px}
footer a{text-decoration-thickness:1px}

/* Responsive */
@media(max-width:900px){
  .topbar{height:48px}
  .topbar .brand{font-size:18px}
  .topbar .menu-link{font-size:13px}
  .hero{height:auto;min-height:900px;padding:55px 22px 125px}
  .hero-inner{grid-template-columns:1fr;gap:50px}
  .hero-copy{padding:0}
  .hero-copy h1{font-size:55px}
  .signature{font-size:18px}
  .portrait-wrap{width:min(420px,78vw)}
  .manifesto{height:auto;min-height:410px;padding:70px 28px}
  .manifesto p{font-size:34px}
  .likes{height:auto;min-height:390px;padding:70px 28px}
  .likes p{font-size:32px}
  .skills{min-height:0;padding:45px 22px 80px}
  .skills>h2{font-size:65px;margin-bottom:70px}
  .skills-grid{grid-template-columns:1fr;gap:60px}
  .skills-intro{font-size:16px}
  .skills-intro h3{margin-top:45px}
  .skills-intro .button{margin-top:60px}
  .skills-list{padding-left:55px;font-size:40px}
  .daisy{font-size:150px;top:45px}
  .ticker-section{height:370px}
  .ticker{top:40px;height:300px}
  .ticker-track{font-size:45px}
  .project-strip{grid-auto-columns:80vw;gap:15px}
  .project-card img{height:420px}
  .offers{min-height:0;padding:55px 24px 75px}
  .offers h2{font-size:43px}
  .offers-lead{margin-top:45px}
  .contact{height:auto;min-height:650px;padding:70px 24px 140px}
  .contact h2{font-size:53px}
  .contact p{margin-top:55px}
  .contact .button{min-width:280px}
  footer{height:auto;min-height:240px;grid-template-columns:1fr;gap:24px;padding:50px 24px;text-align:center;font-size:20px}
  footer>a{text-align:center}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track{animation:none}
}

/* V3 — exact Squarespace heading scale + expanded offer accordion */
h1,h2,h3,h4{font-family:var(--serif);font-style:normal;font-weight:400;line-height:1.2;letter-spacing:-.03em}
h1{font-size:5rem} h2{font-size:4.5rem} h3{font-size:3rem} h4{font-size:1.4rem}
.offers{min-height:865px;padding:16px 20px 55px}
.offers-inner{max-width:570px;margin:auto}
.offers h2{font-size:4.5rem;line-height:1.02;letter-spacing:-.03em}
.accordion details{border-bottom:1px solid rgba(255,255,255,.7);padding:27px 0}
.accordion summary{font-size:1.75rem;line-height:1.2;letter-spacing:-.03em;align-items:center}
.accordion summary:after{content:"◆";font-size:12px;transform:rotate(45deg);transition:transform .2s ease}
.accordion details[open] summary:after{content:"◆";transform:rotate(-45deg)}
.offer-content{font-family:var(--mono);font-size:1rem;line-height:1.18;padding:32px 0 8px;max-width:540px}
.offer-content p{font-size:1rem;line-height:1.18;max-width:100%;margin:0 0 24px}
.offer-content .offer-tagline{text-decoration:underline;text-underline-offset:3px;font-size:1.05rem}
.offer-content ul{margin:0 0 26px;padding-left:38px}
.offer-content li{margin:0 0 9px;padding-left:3px}
.offer-content strong{font-weight:700}
@media(min-width:1200px){
  .offers-inner{max-width:570px}
}
@media(max-width:900px){
  h1{font-size:3.5rem} h2{font-size:3.1rem} h3{font-size:2.35rem}
  .offers h2{font-size:3.1rem}
  .accordion summary{font-size:1.6rem}
  .offer-content,.offer-content p{font-size:.95rem}
}

/* V4 refinements */
.menu{display:flex;align-items:center;gap:24px}
.hero{height:790px;padding-top:0}
.hero-inner{align-items:start;padding-top:78px}
.hero-copy{padding-top:0;align-self:start}
.hero-copy h1{font-size:clamp(88px,6.45vw,112px);line-height:.91}
.signature{font-size:30px;margin-top:12px}
.portrait-wrap{width:min(650px,92%);transform:rotate(5deg) translateY(12px);will-change:transform}
.manifesto{height:450px;padding-top:18px;padding-bottom:34px}
.manifesto .like-word{color:var(--yellow)}
.manifesto p::first-letter{color:inherit}
.likes{height:500px;padding-top:20px;padding-bottom:38px}
.skills-list{overflow:visible}
.brand-shape{position:absolute;left:-35px;top:40px;width:285px;height:285px;object-fit:contain;z-index:1;opacity:.95;transform:rotate(-8deg)}
.skills-list p{z-index:2}
.button{background:var(--blue);color:#000;border-radius:999px;min-height:76px;min-width:340px;font-family:var(--mono);font-size:14px;line-height:1.05;text-align:center;border:1px solid transparent;box-shadow:0 0 0 rgba(0,0,0,0);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;cursor:pointer}
.button:hover{transform:translateY(-4px);box-shadow:0 7px 0 #000}
.button:active{transform:translateY(1px);box-shadow:0 2px 0 #000}
.button.black,.button.blue{background:var(--blue);color:#000;border-radius:999px}
.ticker{clip-path:none;top:72px;height:470px;background:var(--blue);border-radius:50% 45% 52% 48% / 18% 22% 20% 24%;transform:scaleX(1.08)}
.ticker-track{animation:none;width:100%;height:100%;transform:none}
.wave-marquee{width:115%;height:100%;overflow:visible;animation:waveSlide 14s linear infinite}
.wave-marquee text{font-family:var(--serif);font-size:74px;letter-spacing:-.03em;fill:#000}
@keyframes waveSlide{from{transform:translateX(0)}to{transform:translateX(-12%)}}
.projects{position:relative;padding:70px 0 95px}
.projects-shell{position:relative}
.project-strip{scrollbar-width:none;-ms-overflow-style:none;padding-right:90px}
.project-strip::-webkit-scrollbar{display:none}
.carousel-arrow{position:absolute;top:235px;width:64px;height:64px;border-radius:50%;border:1px solid #000;background:var(--blue);font-size:28px;display:grid;place-items:center;cursor:pointer;z-index:5;transition:transform .18s ease,box-shadow .18s ease}
.carousel-arrow:hover{transform:translateY(-3px);box-shadow:0 5px 0 #000}
.carousel-arrow:active{transform:translateY(1px);box-shadow:none}
.carousel-arrow.next{right:22px}.carousel-arrow.prev{left:22px}
.offers h2{text-align:center}
footer .socials{display:flex;justify-content:center;align-items:center;gap:22px}
footer .socials a,footer .instagram-placeholder{display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid #000;border-radius:50%;font-family:var(--mono);font-size:18px;text-decoration:none}
.instagram-placeholder{opacity:.65}
/* smoother SVG-like divider curves using border-radius blobs instead of angular clip paths */
.wave-red{height:155px;bottom:-1px;background:var(--red);clip-path:path('M0 105 C260 15 470 -20 720 42 C970 104 1190 176 1435 105 C1555 70 1645 60 1728 72 L1728 155 L0 155 Z')}
.footer-wave{height:170px;bottom:-1px;background:var(--blue);clip-path:path('M0 120 C250 20 500 -15 750 48 C1010 114 1215 185 1460 112 C1575 78 1665 68 1728 80 L1728 170 L0 170 Z')}
@media(max-width:900px){
 .menu{gap:13px}.hero{min-height:850px}.hero-inner{padding-top:38px}.hero-copy h1{font-size:clamp(56px,15vw,76px)}.portrait-wrap{width:min(470px,90vw)}
 .manifesto{min-height:350px;padding-top:25px}.likes{min-height:340px;padding-top:25px}
 .brand-shape{width:180px;height:180px;left:-20px;top:30px}
 .wave-marquee text{font-size:62px}.carousel-arrow{top:180px;width:54px;height:54px}.carousel-arrow.prev{left:10px}.carousel-arrow.next{right:10px}
 .button{min-width:280px;min-height:70px}
}
@media(prefers-reduced-motion:reduce){.wave-marquee{animation:none}.portrait-wrap{will-change:auto}.button,.carousel-arrow{transition:none}}

/* V5 refinements */
/* Let the manifesto wrap naturally: no awkward “les / passionnés” or “con / leche” breaks. */
.manifesto{padding-left:9vw;padding-right:9vw}
.manifesto p{max-width:1420px;text-wrap:balance}
.likes{padding-left:9vw;padding-right:9vw}
.likes p{max-width:1420px;text-wrap:balance}

/* Keep the offer title truly centered on the page while the accordion remains comfortably narrow. */
.offers-inner{max-width:100%;width:100%;margin:0 auto}
.offers h2{width:100%;max-width:1100px;margin:0 auto;text-align:center}
.offers-lead,.accordion,.offers .button{max-width:570px;margin-left:auto;margin-right:auto}
.offers .button{display:flex}

/* Larger decorative artwork in ON Y VA. */
.brand-shape{width:430px;height:430px;left:-95px;top:-10px;opacity:.95}

/* FOOD & LIEUX DE VIE — same soft wave language as the footer, top + bottom. */
.ticker-section{height:650px;background:#fff;position:relative;overflow:hidden}
.ticker{top:120px;height:410px;left:0;right:0;background:var(--blue);border-radius:0;transform:none;clip-path:none;z-index:2}
.ticker-section::before,.ticker-section::after{content:"";position:absolute;left:0;width:100%;height:150px;background:var(--blue);z-index:1;pointer-events:none}
.ticker-section::before{top:28px;clip-path:path('M0 120 C250 20 500 -15 750 48 C1010 114 1215 185 1460 112 C1575 78 1665 68 1728 80 L1728 150 L0 150 Z')}
.ticker-section::after{bottom:28px;clip-path:path('M0 30 C250 130 500 165 750 102 C1010 36 1215 -35 1460 38 C1575 72 1665 82 1728 70 L1728 0 L0 0 Z')}
.wave-marquee{animation-duration:9s}

@media(max-width:900px){
  .manifesto,.likes{padding-left:22px;padding-right:22px}
  .brand-shape{width:260px;height:260px;left:-55px;top:5px}
  .ticker-section{height:430px}
  .ticker{top:85px;height:260px}
  .ticker-section::before,.ticker-section::after{height:100px}
  .ticker-section::before{top:22px}
  .ticker-section::after{bottom:22px}
}


/* V6 refinements */
/* More breathing room before the offers heading. */
.offers{padding-top:110px}

/* Isa de Burgh / “Colgate”-inspired continuous word rail: straight type, seamless loop. */
.ticker{display:flex;align-items:center;overflow:hidden}
.ticker-track.colgate-marquee{display:flex;width:max-content;height:auto;transform:none;animation:v6Marquee 11s linear infinite;will-change:transform}
.marquee-group{display:flex;align-items:center;flex-shrink:0;white-space:nowrap;font-family:var(--serif);font-size:clamp(68px,6.4vw,112px);line-height:1;letter-spacing:-.04em;padding-right:.38em}
.marquee-group span{display:inline-block}
.marquee-group i{font-style:normal;font-family:var(--serif);padding:0 .34em;transform:translateY(-.04em)}
@keyframes v6Marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Clear accordion affordance: arrow down, rotating up when open. */
.accordion summary:after{content:"↓" !important;font-family:var(--mono);font-size:24px;font-weight:400;line-height:1;transform:none !important;transition:transform .22s ease}
.accordion details[open] summary:after{content:"↓" !important;transform:rotate(180deg) !important}

/* Footer: one clean baseline on desktop, with the descriptor kept on one line. */
footer{display:flex;align-items:center;justify-content:space-between;gap:34px}
footer>span:first-child{white-space:nowrap;flex:0 0 auto}
footer .socials{flex:0 0 auto}
footer>a{margin-left:auto;white-space:nowrap;text-align:right}

@media(max-width:900px){
  .offers{padding-top:76px}
  .marquee-group{font-size:clamp(48px,13vw,72px)}
  .ticker-track.colgate-marquee{animation-duration:9s}
  footer{display:flex;flex-direction:column;justify-content:center;gap:22px}
  footer>span:first-child{white-space:normal;text-align:center}
  footer>a{margin-left:0;text-align:center;white-space:normal}
}
@media(prefers-reduced-motion:reduce){.ticker-track.colgate-marquee{animation:none}}

/* =========================
   V7 — motion + clean ticker
   ========================= */
/* Hero: larger portrait, with room to breathe */
.hero-inner{grid-template-columns:48% 52%}
.portrait-wrap{width:min(735px,100%);max-width:none;transform:rotate(5deg) translate3d(0,8px,0);transform-origin:50% 50%;will-change:transform}
.portrait-wrap img{display:block;width:100%;height:auto}

/* Univers ticker: intentionally straight top and bottom */
.ticker-section{height:390px;background:var(--blue);overflow:hidden;position:relative}
.ticker-section::before,.ticker-section::after,.ticker-section>.wave{display:none!important;content:none!important}
.ticker{position:absolute;inset:0;background:var(--blue);height:100%;display:flex;align-items:center;overflow:hidden;clip-path:none!important;border-radius:0!important;transform:none!important}
.ticker-track.colgate-marquee{animation-duration:15s}

/* Footer social marks: clean outlined icons, no circular button around them */
footer .socials{display:flex;justify-content:center;align-items:center;gap:18px}
footer .social-icon{width:31px;height:31px;display:inline-flex;align-items:center;justify-content:center;border:0!important;border-radius:0!important;text-decoration:none;line-height:0}
footer .social-icon svg{width:29px;height:29px;overflow:visible}
footer .social-icon svg rect,footer .social-icon svg circle,footer .social-icon svg path{fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
footer .social-icon svg .fill,footer .social-icon svg .dot{fill:currentColor;stroke:none}
footer .social-icon{transition:transform .25s ease,opacity .25s ease}
footer a.social-icon:hover{transform:translateY(-3px);opacity:.62}

/* Scroll reveal language inspired by editorial Squarespace motion */
.reveal{opacity:0;transform:translate3d(0,42px,0);transition:opacity .82s cubic-bezier(.2,.7,.2,1),transform .82s cubic-bezier(.2,.7,.2,1)}
.reveal.reveal-left{transform:translate3d(-42px,0,0)}
.reveal.reveal-scale{transform:translate3d(0,22px,0) scale(.975)}
.reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
.project-card.reveal:nth-child(2){transition-delay:.08s}.project-card.reveal:nth-child(3){transition-delay:.16s}.project-card.reveal:nth-child(4){transition-delay:.24s}
.accordion details.reveal:nth-child(2){transition-delay:.06s}.accordion details.reveal:nth-child(3){transition-delay:.12s}.accordion details.reveal:nth-child(4){transition-delay:.18s}

@media(max-width:760px){
  .hero-inner{grid-template-columns:1fr}
  .portrait-wrap{width:min(540px,96vw)}
  .ticker-section{height:280px}
  footer .social-icon{width:29px;height:29px}
}
@media(prefers-reduced-motion:reduce){
  .portrait-wrap{transform:rotate(5deg)!important}
  .reveal,.reveal.reveal-left,.reveal.reveal-scale{opacity:1;transform:none;transition:none}
}

/* V8 refinements */
/* ON Y VA: intentionally clean — no decorative stars/shapes. */
.skills-list .brand-shape,.skills-list .daisy{display:none!important}
/* Align the top edge of the portrait around the “bientôt” line while keeping parallax. */
@media(min-width:901px){.portrait-wrap{margin-top:92px}}
@media(max-width:900px){.portrait-wrap{margin-top:12px}}