/* Palette beige + noir (refonte 2026-08-25) */
  :root{
    --ink:#17130c; --muted:#6f6759; --soft:#efe7d6; --line:#e2d8c3;
    --accent:#17130c;
    --paper:#f7f2e7; --card:#fffdf8;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Manrope',sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
  /* recul des ancres (#travaux, #methode, #tarifs, #contact) sous le header sticky */
  section[id]{scroll-margin-top:78px}

  /* header */
  .hdr{position:sticky;top:0;z-index:50;background:rgba(247,242,231,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .hdr-in{display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{font-family:'Outfit',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em}
  .logo span{color:#a89d89;font-weight:400;font-size:.72em;letter-spacing:0;margin-left:2px}
  .nav{display:flex;gap:26px;align-items:center}
  .nav a{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;letter-spacing:.04em}
  .nav a:hover{color:var(--ink)}
  .btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;padding:11px 22px;border-radius:999px;text-decoration:none;transition:transform .15s,opacity .15s}
  .btn:hover{transform:translateY(-1px);opacity:.88;color:#fff !important}
  /* le nav a{color:muted} a plus de specificite que .btn -> force blanc sur le bouton nav */
  .nav a.btn{color:#fff !important}

  /* hero */
  .hero{padding:88px 0 64px}
  /* eyebrow : badge pill avec etincelle (remplace l'ancienne ligne + texte gris) */
  .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:9px 18px;margin-bottom:24px}
  .eyebrow::before{content:"\2726";font-size:13px;line-height:1;color:var(--ink)}
  h1{font-family:'Outfit',sans-serif;font-weight:600;font-size:clamp(38px,5.4vw,64px);line-height:1.06;letter-spacing:-.03em;max-width:820px}
  h1 em{font-style:normal;font-weight:300;color:#a89d89}
  .hero p{margin-top:22px;font-size:17px;color:var(--muted);max-width:560px}
  .hero .btn{margin-top:28px;font-size:15px;padding:14px 28px}
  @media(max-width:640px){
    .logo{font-size:16px}
    .nav a{display:none}
    .nav .btn{display:inline-flex}
    .sec-head{flex-direction:column;align-items:flex-start;gap:6px}
    .hero{padding:60px 0 44px}
  }

  /* work */
  .work{padding:36px 0 72px}
  .sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:34px}
  h2{font-family:'Outfit',sans-serif;font-size:clamp(26px,3vw,36px);font-weight:600;letter-spacing:-.02em}
  .sec-head small{color:var(--muted);font-size:13px}
  .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
  .card{grid-column:span 6;border:1.5px solid #241f16;border-radius:18px;overflow:hidden;background:var(--card);transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(23,19,12,.06)}
  .card:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(23,19,12,.16)}
  .card.wide{grid-column:span 12}
  .thumb{position:relative;overflow:hidden;background:var(--soft)}
  .thumb img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;object-position:top}
  .thumb iframe{width:100%;display:block;aspect-ratio:16/9;border:0;background:#151109}
  /* Cadre "fenetre de navigateur" qui delimite chaque preview du reste du site */
  .bar{height:22px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#17130c;border-bottom:1.5px solid #17130c}
  .dot{width:7px;height:7px;border-radius:50%;background:#3a3325;flex:none}
  .dot:nth-child(1){background:#8a7f68}
  .tag-bottom{top:auto;bottom:12px}
  .tag{position:absolute;top:14px;left:14px;background:rgba(255,253,248,.94);border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;color:var(--ink)}
  .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
  .body h3{font-family:'Outfit',sans-serif;font-size:21px;font-weight:600;letter-spacing:-.01em}
  .body h3 small{font-weight:400;font-size:14px;color:var(--muted);margin-left:10px}
  .body p{font-size:14px;color:var(--muted);flex:1}
  .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
  .meta span{font-size:11.5px;font-weight:600;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
  @media(max-width:860px){.card,.card.wide{grid-column:span 12}}
  /* Soban: cadre PLUS GRAND sur mobile (4/3 au lieu de 16/9 = +33% de hauteur) */
  @media(max-width:860px){.card-soban .thumb iframe{aspect-ratio:4/3}}
  /* Chez Lucette: fond blanc (site clair) + meme cadre mobile 4/3 */
  .card-lucette .thumb iframe{background:#fff}
  @media(max-width:860px){.card-lucette .thumb iframe{aspect-ratio:4/3}}
  .card-lucette .expand-btn{background:rgba(34,55,78,.55)}
  .card-lucette .expand-btn:hover{background:rgba(34,55,78,.8)}
  /* Tsubame: fond washi (site clair) + meme cadre mobile 4/3 */
  .card-tsubame .thumb iframe{background:#f4efe6}
  @media(max-width:860px){.card-tsubame .thumb iframe{aspect-ratio:4/3}}
  /* My Coach Warren: fond noir (site sombre) + meme cadre mobile 4/3 */
  .card-warren .thumb iframe{background:#0b0d12}
  @media(max-width:860px){.card-warren .thumb iframe{aspect-ratio:4/3}}
  /* Bouton "agrandir la preview" (bas a droite du cadre Soban) */
  .expand-btn{position:absolute;right:10px;bottom:10px;z-index:5;width:38px;height:38px;border:0;border-radius:10px;background:rgba(10,8,5,.62);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px);transition:background .18s,transform .18s}
  .expand-btn:hover{background:rgba(10,8,5,.85);transform:scale(1.08)}
  .expand-btn svg{display:block}
  /* Overlay "mode fenetré": 92vw x 88vh (presque tout l'ecran, sans tout prendre) */
  .ovl{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(8,6,4,.82);backdrop-filter:blur(6px);animation:ovlIn .18s ease-out}
  .ovl[hidden]{display:none}
  @keyframes ovlIn{from{opacity:0}to{opacity:1}}
  .ovl-box{position:relative;width:92vw;max-width:1280px;height:88vh;background:#151109;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55)}
  .ovl-frame{position:absolute;inset:0}
  .ovl-frame iframe{width:100%;height:100%;border:0;display:block;background:#151109}
  .ovl-close{position:absolute;top:12px;right:12px;z-index:20;width:40px;height:40px;border:0;border-radius:50%;background:rgba(10,8,5,.7);color:#fff;font-size:17px;cursor:pointer;display:grid;place-items:center;transition:background .18s}
  .ovl-close:hover{background:rgba(10,8,5,.95)}
  body.ovl-open{overflow:hidden}
  @media(max-width:640px){
    .ovl-box{width:96vw;height:90vh;border-radius:10px}
    .expand-btn{width:34px;height:34px}
  }

  /* process */
  .process{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:72px 0}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:40px}
  .step{border-top:2px solid var(--ink);padding-top:18px}
  .step b{font-family:'Outfit',sans-serif;font-size:13px;letter-spacing:.12em;color:var(--muted)}
  .step h4{font-family:'Outfit',sans-serif;font-size:18px;font-weight:600;margin:6px 0 8px}
  .step p{font-size:13.5px;color:var(--muted)}
  @media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.steps{grid-template-columns:1fr}}

  /* offer */
  .offer{padding:72px 0}
  .prices{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:38px}
  .price{border:1px solid var(--line);border-radius:18px;padding:30px 28px;transition:transform .18s,box-shadow .18s,border-color .18s;cursor:default}
  .price:hover{transform:translateY(-6px);border-color:var(--ink);box-shadow:0 18px 40px rgba(23,19,12,.14)}
  .price:active{transform:translateY(-2px) scale(.985)}
  .price b{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;letter-spacing:.04em}
  .price .amt{font-family:'Outfit',sans-serif;font-size:40px;font-weight:600;letter-spacing:-.03em;margin:10px 0 4px;transition:transform .18s}
  .price:hover .amt{transform:scale(1.06)}
  .price .amt small{font-size:16px;font-weight:400;color:var(--muted)}
  .price p{font-size:13.5px;color:var(--muted)}
  /* prix cliquable : identique au texte normal, sans style de lien par defaut */
  .price .amt .price-link{color:inherit;text-decoration:none;cursor:pointer}
  /* carte "Site vitrine" cliquable sur toute la surface */
  a.price{color:inherit;text-decoration:none;cursor:pointer}
  @media(max-width:860px){.prices{grid-template-columns:1fr}}

  /* cta */
  .cta{background:var(--ink);color:var(--paper);padding:76px 0;text-align:center}
  .cta h2{color:var(--paper);font-size:clamp(28px,3.6vw,44px);max-width:640px;margin:0 auto}
  .cta h2 em{font-style:normal;font-weight:300;color:#cfc3a9}
  .cta p{color:#d8cdb6;margin:18px auto 30px;max-width:440px;font-size:15px}
  .cta .btn{background:var(--paper);color:var(--ink) !important}
  .cta .btn:hover{background:#e8dfcc;color:var(--ink) !important}
  .cta .alt{margin-top:18px;font-size:13.5px;color:#a89d89}
  .cta .alt b{color:var(--paper)}

  /* footer */
  footer{padding:34px 0;font-size:13px;color:var(--muted)}
  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}