:root{
    --pin:#161616;
    --pin-soft:#2B2B2B;
    --rust:#3A3A3A;
    --rust-deep:#1A1A1A;
    --bark:#8C8C8C;
    --paper:#F3ECDC;
    --paper-deep:#E9DEC5;
    --snow:#FFFFFF;
    --stone:#6B6B6B;
    --gold:#3A3A3A;
    --beige-pale:#FAF6EC;
    --line: rgba(22,22,22,0.14);
    --radius: 22px;
    --shadow: 0 18px 40px rgba(22,22,22,0.12);
    --shadow-sm: 0 8px 22px rgba(22,22,22,0.08);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--pin);
    font-family:'Inter', sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Playfair Display', serif;
    font-weight:600;
    letter-spacing:-0.01em;
    color:var(--pin);
  }
  .label{
    font-family:'DM Sans', sans-serif;
    font-weight:600;
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--gold);
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  section{position:relative;}
  section[id]{scroll-margin-top:88px;}

  /* ---------- reveal ---------- */
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
    *{scroll-behavior:auto !important;}
  }

  /* ---------- rounded photo frame, signature element (Chaletô-style) ---------- */
  .viewfinder{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
  .viewfinder::before, .viewfinder::after,
  .vf-tl, .vf-tr, .vf-bl, .vf-br{display:none;}
  .vf-anim.focused{transform:scale(1);}

  /* ---------- marquee strip (mouvement façon Chaletô) ---------- */
  .marquee{overflow:hidden; background:var(--pin); padding:16px 0;}
  .marquee-track{display:flex; width:max-content; animation:scroll-marquee 26s linear infinite;}
  .marquee-track span{
    display:flex; align-items:center; gap:10px;
    font-family:'DM Sans', sans-serif; font-weight:600; font-size:0.95rem;
    color:var(--snow); text-transform:uppercase; letter-spacing:0.06em;
    padding:0 36px; white-space:nowrap;
  }
  .marquee-track span::after{content:'●'; margin-left:36px; font-size:0.5rem; color:var(--stone);}
  @keyframes scroll-marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

  header{
    position:sticky; top:0; z-index:50;
    background:rgba(241,231,214,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  /* sur mobile : fond opaque, sans flou. Le backdrop-filter force le navigateur a
     re-flouter la portion de la photo du hero situee derriere l'entete a chaque
     image du defilement, ce qui saccade au haut de la page. */
  @media(max-width:879px){
    header{background:var(--paper); backdrop-filter:none; -webkit-backdrop-filter:none;}
  }
  nav{position:relative; display:flex; align-items:center; justify-content:space-between; padding:20px 32px;}
  .logo{font-family:'Playfair Display', serif; font-weight:600; font-size:1.15rem; letter-spacing:-0.01em; display:flex; align-items:center;}
  .logo span{color:var(--rust);}
  .navlinks{display:flex; gap:32px; font-size:0.92rem;}
  .navlinks a{position:relative; padding-bottom:4px;}
  .navlinks a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--rust); transition:width .3s ease;}
  .navlinks a:hover::after{width:100%;}
  .navlinks a.current::after{width:100%;}
  .nav-cta{
    font-size:0.85rem; padding:10px 20px; border:1px solid var(--pin); border-radius:100px;
    font-family:'DM Sans', sans-serif; letter-spacing:0.02em;
    transition:background .25s ease, color .25s ease;
  }
  .nav-cta:hover{background:var(--pin); color:var(--snow);}
  .navlinks, .nav-cta{display:none;}
  .nav-cta-mobile{display:none;}
  .nav-right{display:flex; align-items:center; gap:20px;}
  .lang-switch{
    font-family:'DM Sans', sans-serif; font-weight:600; font-size:0.78rem; letter-spacing:0.02em;
    border:1px solid var(--pin); border-radius:100px; padding:7px 14px;
    transition:background .25s ease, color .25s ease;
  }
  .lang-switch:hover{background:var(--pin); color:var(--snow);}

  /* ---------- mobile nav toggle ---------- */
  .nav-toggle{display:inline-flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:5px; width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0;}
  .nav-toggle span{display:block; width:100%; height:2px; background:var(--pin); border-radius:2px; transition:transform .25s ease, opacity .25s ease;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  @media(max-width:879px){
    .nav-toggle{display:inline-flex;}
    .navlinks.open{
      display:flex; flex-direction:column; gap:0;
      position:absolute; top:100%; left:0; right:0;
      background:var(--paper); padding:6px 32px 22px;
      border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm);
    }
    .navlinks.open a{padding:14px 0; border-top:1px solid var(--line); font-size:1rem;}
    .navlinks.open a:first-child{border-top:none;}
    .navlinks.open .nav-cta-mobile{
      display:inline-block; margin-top:14px; text-align:center;
      font-size:0.9rem; padding:12px 20px; border:1px solid var(--pin); border-radius:100px;
      font-family:'DM Sans', sans-serif;
    }
  }
  @media(min-width:880px){.navlinks{display:flex;} .nav-cta{display:inline-block;} .nav-toggle{display:none;}}

  /* ---------- hero (image plein fond) ---------- */
  .hero{position:relative; min-height:92vh; min-height:92svh; display:flex; align-items:flex-end; overflow:hidden; padding:0;}
  .hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
  .hero-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(22,22,22,0.15) 0%, rgba(22,22,22,0.35) 55%, rgba(22,22,22,0.78) 100%);}
  .hero-content{position:relative; z-index:2; padding:0 32px 88px; max-width:760px;}
  .hero .label{color:var(--gold); opacity:0.95;}
  .hero h1{font-weight:600; font-size:clamp(2.4rem, 5vw, 3.6rem); line-height:1.05; margin:18px 0 22px; color:var(--snow); letter-spacing:-0.01em;}
  .hero p.lede{font-size:1.1rem; color:rgba(255,255,255,0.85); max-width:46ch; margin-bottom:34px;}
  @media(max-width:879px){
    /* La hauteur du hero se calcule a partir de la LARGEUR de l'ecran, jamais de
       sa hauteur. Quand la barre d'adresse du navigateur mobile se retracte au
       defilement, la hauteur du viewport augmente : un hero en vh/svh grandirait
       alors, et object-fit:cover devrait agrandir la photo pour couvrir la boite
       plus haute (c'est le zoom observe). La largeur, elle, ne bouge jamais
       pendant un defilement vertical, donc la boite et la photo restent fixes. */
    .hero{min-height:min(calc(100vw * 1.6), 680px);}
    /* couche de composition dediee + aucun parallaxe sur mobile */
    .hero-bg{transform:translateZ(0) !important; backface-visibility:hidden; will-change:auto;}
  }
  /* en paysage, une hauteur fixe : 160% de la largeur serait demesure */
  @media(max-width:879px) and (orientation:landscape){
    .hero{min-height:420px;}
  }
  @media(max-width:600px){
    .hero .label{font-size:0.7rem;}
    .hero h1{font-size:2rem; margin:12px 0 14px;}
    .hero p.lede{font-size:0.92rem; margin-bottom:26px;}
  }
  .btn-row{display:flex; gap:16px; flex-wrap:wrap;}
  .btn{
    display:inline-block; padding:15px 30px; font-size:0.95rem; font-weight:600;
    border-radius:100px;
    transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  }
  .btn-primary{background:var(--rust); color:var(--snow); box-shadow:var(--shadow-sm);}
  .btn-primary:hover{background:var(--rust-deep); transform:translateY(-2px); box-shadow:var(--shadow);}
  .btn-ghost{border:1px solid var(--snow); color:var(--snow);}
  .btn-ghost:hover{background:var(--snow); color:var(--pin);}
  .btn-outline{border:1px solid var(--pin); color:var(--pin); background:transparent;}
  .btn-outline:hover{background:var(--pin); color:var(--snow); transform:translateY(-2px); box-shadow:var(--shadow);}
  .hero .btn-ghost{border:1px solid var(--snow);}

  /* ---------- generic section heading ---------- */
  .sec-head{max-width:640px; margin-bottom:52px;}
  .sec-head .label{margin-bottom:14px; display:block;}
  .sec-head h2{font-size:clamp(1.8rem, 3.2vw, 2.4rem);}
  .sec-head p{color:var(--stone); margin-top:14px; font-size:1.02rem;}

  /* ---------- services ---------- */
  .services{padding:96px 0; background:var(--snow);}
  .svc-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
  @media(max-width:820px){.svc-grid{grid-template-columns:1fr;}}
  .svc-card{background:var(--snow); padding:40px 34px; border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease;}
  .svc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
  .svc-num{font-family:'DM Sans', sans-serif; font-size:0.78rem; color:var(--rust); display:block; margin-bottom:22px;}
  .svc-card h3{font-size:1.28rem; margin-bottom:12px;}
  .svc-card p{color:var(--stone); font-size:0.95rem;}

  /* ---------- portfolio ---------- */
  .portfolio{padding:96px 0; background:var(--beige-pale);}
  .pf-grid{display:grid; grid-template-columns:1fr; gap:26px; max-width:640px; margin:0 auto;}
  @media(min-width:700px){.pf-grid{grid-template-columns:1fr 1fr; max-width:980px; gap:28px;}}
  .pf-item{color:var(--rust);}
  .pf-frame{aspect-ratio:3/2; position:relative; overflow:hidden; background:var(--beige-pale);}
  .pf-frame svg{width:100%; height:100%; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  .pf-item:hover .pf-frame svg{transform:scale(1.12) rotate(-1deg);}
  .pf-item{transition:transform .4s ease;}
  .pf-item:hover{transform:translateY(-6px);}
  .pf-exif{margin-top:12px; display:flex; justify-content:space-between; font-family:'DM Sans', sans-serif; font-size:0.7rem; color:var(--stone);}
  .pf-exif b{color:var(--pin); font-weight:500;}

  /* ---------- back link (portfolio complet page) ---------- */
  .back-link{display:inline-flex; align-items:center; gap:8px; margin-bottom:28px; font-family:'DM Sans', sans-serif; font-weight:600; font-size:0.85rem; color:var(--rust); transition:transform .25s ease;}
  .back-link:hover{transform:translateX(-4px);}

  /* ---------- airbnb mgmt ---------- */
  .mgmt{padding:96px 0; background:var(--pin); color:var(--paper);}
  .mgmt .label{color:var(--rust);}
  .mgmt h2{color:var(--snow);}
  .mgmt-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;}
  @media(max-width:880px){.mgmt-grid{grid-template-columns:1fr; gap:40px;}}
  .mgmt p.lede{color:rgba(255,255,255,0.72); font-size:1.05rem; max-width:42ch; margin-top:16px;}
  .mgmt-list{display:grid; gap:0;}
  .mgmt-row{display:grid; grid-template-columns:32px 1fr; gap:16px; padding:20px 0; border-top:1px solid rgba(255,255,255,0.16);}
  .mgmt-row:last-child{border-bottom:1px solid rgba(255,255,255,0.16);}
  .mgmt-row span.mark{font-family:'DM Sans', sans-serif; color:var(--rust); font-size:0.85rem;}
  .mgmt-row h4{font-family:'Inter'; font-weight:600; font-size:1rem; margin-bottom:4px; color:var(--snow);}
  .mgmt-row p{font-size:0.9rem; color:rgba(255,255,255,0.65);}

  /* ---------- pricing ---------- */
  .pricing{padding:96px 0; background:var(--snow);}
  .price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  @media(max-width:880px){.price-grid{grid-template-columns:1fr; max-width:420px; margin:0 auto;}}
  @media(min-width:881px){.price-grid.cols-2{grid-template-columns:repeat(2,1fr); max-width:760px;}}
  .price-card{border:none; padding:38px 30px; display:flex; flex-direction:column; border-radius:var(--radius); background:var(--snow); box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease;}
  .price-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
  .price-card.featured{border:2px solid var(--gold); position:relative; background:var(--beige-pale);}
  .price-card.featured .label{color:var(--rust);}
  .price-card:not(.featured) .btn{border:1px solid var(--pin); color:var(--pin); background:transparent;}
  .price-card:not(.featured) .btn:hover{background:var(--pin); color:var(--snow); transform:translateY(-2px); box-shadow:var(--shadow);}
  .plan-name{font-family:'DM Sans', sans-serif; font-size:1.4rem; margin:14px 0 6px;}
  .plan-sub{color:var(--stone); font-size:0.88rem; margin-bottom:22px;}
  .plan-price{font-family:'DM Sans', sans-serif; font-size:2.2rem; margin-bottom:2px;}
  .plan-price sup{font-family:'DM Sans'; font-size:0.9rem; font-weight:400; color:var(--stone);}
  .plan-note{font-size:0.78rem; color:var(--stone); margin-bottom:26px;}
  .plan-feat{list-style:none; display:grid; gap:10px; font-size:0.9rem; margin-bottom:28px; flex:1;}
  .plan-feat li{padding-left:18px; position:relative; color:var(--pin-soft);}
  .plan-feat li::before{content:'•'; position:absolute; left:0; color:var(--rust);}
  .price-note-global{margin-top:36px; font-size:0.85rem; color:var(--stone); text-align:center;}

  /* ---------- testimonials ---------- */
  .testi{padding:96px 0; background:var(--beige-pale);}
  .testi-carousel{overflow:hidden; max-width:640px; margin:0 auto;}
  .testi-track{display:flex; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  .testi-track .testi-card{flex:0 0 100%;}
  .testi-card{padding:40px 38px; background:var(--snow); border:none; border-radius:var(--radius); box-shadow:var(--shadow-sm); text-align:center;}
  .testi-dots{display:flex; justify-content:center; gap:10px; margin-top:28px;}
  .testi-dots button{width:9px; height:9px; border-radius:50%; border:none; background:var(--line); cursor:pointer; padding:0; transition:background .3s ease, transform .3s ease;}
  .testi-dots button.active{background:var(--pin); transform:scale(1.25);}
  .testi-quote{font-family:'DM Sans', sans-serif; font-style:italic; font-size:1.08rem; line-height:1.5; margin-bottom:22px; color:var(--pin-soft);}
  .testi-who{font-family:'DM Sans', sans-serif; font-size:0.75rem; color:var(--rust); text-transform:uppercase; letter-spacing:0.06em;}
  .testi-role{font-size:0.82rem; color:var(--stone); margin-top:2px;}

  /* ---------- contact ---------- */
  .contact{padding:96px 0 110px; background:var(--pin); color:var(--paper);}
  .contact .label{color:var(--rust);}
  .contact h2{color:var(--snow);}
  .contact-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px;}
  @media(max-width:880px){.contact-grid{grid-template-columns:1fr; gap:44px;}}
  .contact-info p{color:rgba(255,255,255,0.7); margin-top:14px; max-width:36ch;}
  .contact-deets{margin-top:34px; display:grid; gap:16px;}
  .contact-deets div{font-size:0.95rem;}
  .contact-deets .clabel{font-family:'DM Sans', sans-serif; font-size:0.7rem; color:var(--rust); text-transform:uppercase; letter-spacing:0.08em; display:block; margin-bottom:4px;}
  .contact-deets a:hover{text-decoration:underline;}
  form{display:grid; gap:18px;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  @media(max-width:560px){.form-row{grid-template-columns:1fr;}}
  label{display:block; font-family:'DM Sans', sans-serif; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:8px;}
  input, select, textarea{
    width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,0.3);
    color:var(--snow); font-family:'Inter'; font-size:0.98rem; padding:10px 2px;
    outline:none; transition:border-color .25s ease;
  }
  input:focus, select:focus, textarea:focus{border-color:var(--rust);}
  select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    padding-right:22px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 2px center; background-size:14px;
  }
  select option{color:#111;}
  textarea{resize:vertical; min-height:90px;}
  .addon-group{display:grid; gap:12px; margin-top:2px;}
  .addon-check{
    display:flex; align-items:center; gap:10px;
    font-family:'Inter', sans-serif; font-weight:400; font-size:0.9rem;
    text-transform:none; letter-spacing:0; color:rgba(255,255,255,0.8);
    margin-bottom:0; cursor:pointer;
  }
  .addon-check input{width:16px; height:16px; flex-shrink:0; accent-color:var(--rust); cursor:pointer;}
  .addon-check:has(input:checked){color:var(--snow);}
  .submit-btn{
    justify-self:start; margin-top:6px; background:var(--rust); color:var(--snow);
    border:none; padding:15px 32px; border-radius:100px; font-family:'Inter'; font-size:0.95rem; font-weight:600;
    cursor:pointer; transition:background .25s ease, transform .25s ease;
  }
  .submit-btn:hover{background:var(--rust-deep); transform:translateY(-2px);}
  input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, button:focus-visible{
    outline:2px solid var(--rust); outline-offset:3px;
  }

  /* ---------- footer ---------- */
  footer{padding:34px 32px; background:var(--pin); border-top:1px solid rgba(255,255,255,0.14);}
  .foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; color:rgba(255,255,255,0.55); font-size:0.82rem;}
  .foot-row .logo{color:rgba(255,255,255,0.55); font-size:1rem; font-weight:400;}
  @media(max-width:600px){.foot-row{flex-direction:column; align-items:center; text-align:center; gap:16px;}}
  /* hard circular clip so the mark is cropped exactly to its own circle, no halo/frame added */
  .logo-badge{border-radius:50%; overflow:hidden; width:24px; height:24px; display:inline-flex; flex-shrink:0;}
  .logo-badge img{width:24px; height:24px; object-fit:cover;}