/* ===== /exemple5 : HavenWorks (marketplace services maison) ===== */
body.exemple5{background:#fff;color:#151515;font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.hw{--g:#12335C;--gd:#0B2140;--ink:#151515;--mut:#6c7280;--line:#e9ebee;--bg:#f4f5f3}
.hw *{box-sizing:border-box}
.hw a{text-decoration:none;color:inherit}
.hw button{font-family:inherit;cursor:pointer;border:none;background:none}
.hw h1,.hw h2,.hw h3,.hw h5,.hw-logo{font-family:'Inter',system-ui,-apple-system,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
.hw .hw-wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}

/* HERO plein cadre + grande image + ombre douce */
.hw-hero{padding:12px}
.hw-hero-card{position:relative;max-width:none;margin:0 auto;min-height:min(94vh,860px);border-radius:26px;overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:center;box-shadow:0 44px 90px -40px rgba(12,16,10,.6),0 12px 30px -18px rgba(12,16,10,.35)}
.hw-hero-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,6,.46) 0%,rgba(6,10,6,.1) 16%,transparent 34%),linear-gradient(96deg,rgba(9,13,8,.82) 0%,rgba(9,13,8,.56) 32%,rgba(9,13,8,.12) 60%,transparent 80%)}
.hw-hero-body{position:relative;z-index:2;color:#fff;padding:clamp(30px,5vw,74px);max-width:640px}
.hw-hero-body h1{font-size:clamp(38px,5.4vw,66px);color:#fff;line-height:1.04}
.hw-hero-body p{margin:18px 0 26px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.92);max-width:490px}
.hw-search{display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:8px 8px 8px 22px;max-width:560px;box-shadow:0 22px 44px -20px rgba(0,0,0,.5)}
.hw-search input{border:none;outline:none;font-size:15px;color:var(--ink);background:none;width:100%}
.hw-search input::placeholder{color:#9aa0a8}
.hw-q{flex:1.4;min-width:0}
.hw-sep{width:1px;height:26px;background:var(--line);flex:0 0 auto}
.hw-zip{display:flex;align-items:center;gap:7px;flex:1;min-width:0;padding-left:14px}
.hw-pin{display:inline-flex;color:#9aa0a8}.hw-pin svg{width:18px;height:18px}
.hw-go{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--g);color:#ffffff;display:grid;place-items:center;transition:background .2s,transform .2s}
.hw-go svg{width:20px;height:20px}
.hw-go:hover{background:var(--gd);transform:scale(1.05)}

/* NAV transparente, superposee sur l'image du hero */
.hw-nav{position:absolute;top:0;left:0;right:0;z-index:10}
.hw-nav-in{max-width:none;margin:0;padding:24px clamp(24px,4vw,54px);display:flex;align-items:center;gap:22px}
.hw-logo{display:inline-flex;align-items:center;gap:9px;font-size:20px;color:#fff}
.hw-logo-ic{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff}
.hw-logo-ic svg{width:18px;height:18px}
.hw-menu{display:flex;align-items:center;gap:3px;margin-left:14px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:5px;border-radius:999px;border:1px solid rgba(255,255,255,.16)}
.hw-menu>a,.hw-mi>button{display:inline-flex;align-items:center;gap:5px;padding:9px 16px;border-radius:999px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.9)}
.hw-menu>a.on{background:#fff;color:#151515}
.hw-menu>a:hover:not(.on),.hw-mi>button:hover{color:#fff}
.hw-chev{display:inline-flex}.hw-chev svg{width:15px;height:15px}
.hw-mi{position:relative}
.hw-panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);min-width:210px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px -22px rgba(20,20,20,.4);padding:8px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;z-index:20}
.hw-mi:hover .hw-panel,.hw-mi.open .hw-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.hw-panel a{display:block;padding:10px 14px;border-radius:10px;font-size:14px;font-weight:500;color:#3d4149}
.hw-panel a:hover{background:var(--bg);color:var(--ink)}
.hw-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.hw-signin{font-size:14.5px;font-weight:600;color:#fff}
.hw-pro{display:inline-flex;align-items:center;background:var(--g);color:#ffffff;font-weight:700;font-size:14.5px;padding:11px 20px;border-radius:999px;transition:background .2s,transform .2s}
.hw-pro:hover{background:var(--gd);transform:translateY(-1px)}
.hw-burger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;justify-content:center;align-items:center;border-radius:12px}
.hw-burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:.3s}

/* CATEGORIES */
.hw-cat{padding:44px 0 20px}
.hw-cat-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.hw-cat-head h2{font-size:clamp(24px,3vw,32px)}
.hw-chips{display:flex;gap:9px;flex-wrap:wrap}
.hw-chips button{padding:9px 16px;border-radius:999px;background:var(--bg);font-size:13.5px;font-weight:600;color:#3d4149;transition:.2s}
.hw-chips button.on{background:var(--ink);color:#fff}
.hw-chips button:hover:not(.on){background:#e6e8ea}
.hw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.hw-card-img{position:relative;display:block;aspect-ratio:1/1;border-radius:20px;background-size:cover;background-position:center;overflow:hidden;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.hw-card-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.14));opacity:0;transition:.4s}
.hw-card:hover .hw-card-img{transform:translateY(-4px)}
.hw-card:hover .hw-card-img::after{opacity:1}
.hw-corner{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--ink);transition:.3s}
.hw-corner svg{width:17px;height:17px}
.hw-card:hover .hw-corner{background:var(--g);color:#ffffff;transform:scale(1.05)}
.hw-card h3{font-size:17px;font-weight:700;margin:14px 0 6px}
.hw-rate{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:#3d4149}
.hw-star{color:#f5b301;font-size:15px}
.hw-count{color:var(--mut);font-weight:500}

/* HOW */
.hw-how{padding:70px 0 30px}
.hw-eyebrow{color:var(--gd);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;margin:0 0 10px}
.hw-how h2{font-size:clamp(26px,3.4vw,38px);max-width:520px}
.hw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}
.hw-step{background:var(--bg);border-radius:20px;padding:30px}
.hw-num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--ink);color:#fff;font-weight:800;font-size:18px;margin-bottom:16px}
.hw-step h3{font-size:20px;margin-bottom:8px}
.hw-step p{color:var(--mut);font-size:14.5px;line-height:1.6;margin:0}

/* BAND */
.hw-band{padding:40px 0 70px}
.hw-band-in{background:var(--ink);color:#fff;border-radius:26px;padding:clamp(30px,5vw,54px);display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;position:relative;overflow:hidden}
.hw-band-in::before{content:'';position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(42,92,153,.5),transparent 70%)}
.hw-band-in>div{position:relative;z-index:1}
.hw-band h2{font-size:clamp(24px,3vw,34px);color:#fff}
.hw-band p{margin:10px 0 0;color:rgba(255,255,255,.75);font-size:15px}
.hw-pro-lg{position:relative;z-index:1;padding:15px 28px;font-size:15.5px}

/* FOOTER */
.hw-foot{border-top:1px solid var(--line);padding:52px 0 26px}
.hw-foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
.hw-foot-brand .hw-logo{color:var(--ink)}
.hw-foot-brand .hw-logo-ic{background:var(--ink);color:#fff;backdrop-filter:none}
.hw-foot-brand p{color:var(--mut);font-size:14px;margin:12px 0 0;max-width:220px}
.hw-foot-col h5{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#9aa0a8;margin:0 0 14px;font-weight:700}
.hw-foot-col a{display:block;padding:5px 0;font-size:14.5px;color:#3d4149;font-weight:500}
.hw-foot-col a:hover{color:var(--ink)}
.hw-foot-bot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:34px;padding-top:20px;border-top:1px solid var(--line);color:var(--mut);font-size:13.5px}
.hw-foot-bot a{color:var(--gd);font-weight:600}

/* RESPONSIVE */
@media(max-width:1000px){
  .hw-menu,.hw-signin{display:none}
  .hw-burger{display:flex}
  .hw-grid{grid-template-columns:repeat(2,1fr)}
  .hw-steps{grid-template-columns:1fr}
  .hw-foot-in{grid-template-columns:1fr 1fr}
  .hw-hero-card{background-position:60% center}
}
@media(max-width:560px){
  .hw-grid{grid-template-columns:1fr 1fr;gap:16px}
  .hw-search{flex-wrap:wrap;border-radius:20px;padding:12px}
  .hw-sep{display:none}.hw-zip{padding-left:0}
  .hw-foot-in{grid-template-columns:1fr}
}
/* menu mobile deroulant */
.hw-mob{display:none;position:fixed;inset:70px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 24px 40px -22px rgba(0,0,0,.3);padding:16px 24px 22px;z-index:49}
.hw-mob.show{display:block}
.hw-mob a{display:block;padding:12px 6px;font-size:17px;font-weight:600;border-bottom:1px solid var(--line);color:var(--ink)}
.hw-mob .hw-pro{margin-top:14px;justify-content:center;width:100%}
/* bouton hero (remplace la barre de recherche) */
.hw-hero-btn{display:inline-flex;align-items:center;gap:11px;background:var(--g);color:#ffffff;font-weight:700;font-size:16px;letter-spacing:.01em;padding:18px 32px;border-radius:999px;box-shadow:0 20px 44px -16px rgba(42,92,153,.75);transition:background .2s,transform .2s,box-shadow .2s}
.hw-hero-btn:hover{background:var(--gd);transform:translateY(-2px);box-shadow:0 26px 50px -18px rgba(143,199,58,.8)}
.hw-hero-btn span{font-size:19px;line-height:1;transition:transform .2s}
.hw-hero-btn:hover span{transform:translateX(3px)}
/* bouton hero : verre transparent (override) */
.hw-hero-btn{background:rgba(255,255,255,.12);color:#fff;font-weight:600;border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(9px) saturate(1.2);backdrop-filter:blur(9px) saturate(1.2);box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.hw-hero-btn:hover{background:rgba(255,255,255,.22);border-color:#fff;transform:translateY(-2px);box-shadow:0 16px 36px -16px rgba(0,0,0,.55)}
/* nav collante (solide) revelee au scroll */
.hw-nav-stuck{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);transform:translateY(-100%);transition:transform .45s cubic-bezier(.16,1,.3,1);box-shadow:0 12px 34px -22px rgba(20,20,20,.55)}
.hw-nav-stuck.show{transform:translateY(0)}
.hw-nav-stuck .hw-nav-in{padding-top:14px;padding-bottom:14px}
.hw-nav-stuck .hw-logo{color:var(--ink)}
.hw-nav-stuck .hw-logo-ic{background:var(--ink);color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.hw-nav-stuck .hw-menu{background:var(--bg);border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.hw-nav-stuck .hw-menu>a,.hw-nav-stuck .hw-mi>button{color:#3d4149}
.hw-nav-stuck .hw-menu>a.on{background:#fff;color:#151515}
.hw-nav-stuck .hw-menu>a:hover:not(.on),.hw-nav-stuck .hw-mi>button:hover{color:var(--ink)}
.hw-nav-stuck .hw-signin{color:var(--ink)}
.hw-nav-stuck .hw-burger span{background:var(--ink)}
/* FAQ 50/50 (texte gauche, image droite) */
.hw-faq{padding:74px 0 40px}
.hw-faq-in{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.hw-faq-left h2{font-size:clamp(26px,3.4vw,40px);margin:0 0 22px}
.hw-acc details{border-bottom:1px solid var(--line)}
.hw-acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 2px;font-size:17px;font-weight:700;color:var(--ink)}
.hw-acc summary::-webkit-details-marker{display:none}
.hw-acc summary::after{content:'+';font-weight:600;font-size:22px;color:var(--gd);width:26px;height:26px;display:grid;place-items:center;flex:0 0 auto;transition:transform .25s}
.hw-acc details[open] summary::after{content:'\2212'}
.hw-acc details p{margin:0;padding:0 2px 22px;color:var(--mut);font-size:15px;line-height:1.65;max-width:92%}
.hw-faq-img{align-self:stretch;min-height:480px;border-radius:24px;background-size:cover;background-position:center;box-shadow:0 40px 80px -40px rgba(12,16,10,.5)}
@media(max-width:900px){.hw-faq-in{grid-template-columns:1fr;gap:30px}.hw-faq-img{min-height:280px;order:-1}}
/* FAQ : transition hauteur pour l'ouverture animee */
.hw-acc details{overflow:hidden;transition:height .5s cubic-bezier(.16,1,.3,1)}
.hw-acc summary::after{transition:transform .3s,content .3s}
/* ===== Avis Google (marquee, repris du modele aubrypatrimoine) ===== */
.hw-avis{background:var(--bg);padding:74px 0 64px}
.hw-avis .avis-title{font-family:'Inter',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;font-size:clamp(26px,3.4vw,40px);color:var(--ink);margin:0 0 14px}
.hw-avis .avis-lead{font-size:16px;color:var(--mut);line-height:1.6;max-width:660px;margin:0}
.hw-avis .g-summary{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:40px;padding:22px 28px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px -34px rgba(20,20,20,.35)}
.hw-avis .g-logo{width:48px;height:48px;flex:0 0 auto;display:inline-flex}
.hw-avis .g-logo svg,.hw-avis .gicon svg{width:100%;height:100%;display:block}
.hw-avis .g-score{display:flex;align-items:center;gap:12px}
.hw-avis .g-score b{font-weight:800;font-size:38px;color:#202124;line-height:1}
.hw-avis .g-stars{color:#fbbc04;font-size:21px;letter-spacing:2px}
.hw-avis .g-meta{font-size:13px;color:var(--mut);margin-top:4px}
.hw-avis .g-meta strong{color:#202124;font-weight:600}
.hw-avis .g-cta{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:13px 22px;background:var(--ink);color:#fff;border-radius:999px;font-size:13.5px;font-weight:700;transition:background .25s,transform .25s}
.hw-avis .g-cta:hover{background:#000;transform:translateY(-1px)}
.hw-avis .greviews-marquee{margin-top:30px;padding:6px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.hw-avis .greviews-track{display:flex;width:max-content;animation:hw-avis-scroll 60s linear infinite;will-change:transform}
.hw-avis .greviews-marquee:hover .greviews-track{animation-play-state:paused}
.hw-avis .greview{flex:0 0 380px;margin-right:24px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:13px}
.hw-avis .gr-top{display:flex;align-items:center;gap:13px}
.hw-avis .gr-avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:19px;flex:0 0 auto}
.hw-avis .gr-id{flex:1;min-width:0}
.hw-avis .gr-name{font-size:15px;font-weight:600;color:#202124}
.hw-avis .gr-date{font-size:12px;color:var(--mut)}
.hw-avis .gicon{width:22px;height:22px;flex:0 0 auto;display:inline-flex}
.hw-avis .gr-stars{color:#fbbc04;font-size:16px;letter-spacing:2px}
.hw-avis .gr-text{font-size:14.5px;line-height:1.66;color:#3c4043}
@keyframes hw-avis-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:600px){.hw-avis .greview{flex:0 0 300px}}

/* ===== Contact integre en haut du footer ===== */
.hw-contact{background:var(--ink);color:#fff;padding:66px 0 36px}
.hw-contact-in{display:grid;grid-template-columns:1fr 1.05fr;gap:54px;align-items:start}
.hw-contact-info h2{font-family:'Inter',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;font-size:clamp(26px,3vw,38px);color:#fff;margin:8px 0 12px}
.hw-contact-sub{color:rgba(255,255,255,.7);font-size:15px;margin:0 0 26px;line-height:1.6;max-width:420px}
.hw-contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.hw-contact-list li{display:flex;align-items:center;gap:14px;font-size:16px;color:rgba(255,255,255,.92)}
.hw-contact-list a{color:#fff;text-decoration:none}
.hw-contact-list a:hover{color:var(--g)}
.hw-contact-list .ci{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:0 0 auto;color:var(--g)}
.hw-contact-list .ci svg{width:20px;height:20px}
.hw-contact-form{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:26px}
.hw-field{margin-bottom:16px}
.hw-field label{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:7px}
.hw-field input,.hw-field textarea{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:13px 15px;color:#fff;font-family:inherit;font-size:15px;outline:none;transition:border-color .2s,background .2s}
.hw-field input::placeholder,.hw-field textarea::placeholder{color:rgba(255,255,255,.42)}
.hw-field input:focus,.hw-field textarea:focus{border-color:var(--g);background:rgba(255,255,255,.12)}
.hw-field textarea{resize:vertical;min-height:112px}
.hw-contact-send{width:100%;justify-content:center;font-size:15px;padding:15px;margin-top:4px}
@media(max-width:860px){.hw-contact-in{grid-template-columns:1fr;gap:32px}}
/* hero : remplir la hauteur, marges uniformes 12px (moins de blanc en bas) */
.hw-hero-card{min-height:calc(100vh - 24px)}
/* fix : bouton .hw-pro vert meme sur <button> (le reset .hw button mettait background:none) */
.hw button.hw-pro{background:var(--g)}
.hw button.hw-pro:hover{background:var(--gd)}
/* ===== Contact premium (override) ===== */
.hw-contact{position:relative;overflow:hidden;background:#0d0d0f;color:#fff;padding:80px 0 46px}
.hw-contact-glow{position:absolute;top:-140px;right:-90px;width:540px;height:540px;border-radius:50%;background:radial-gradient(circle,rgba(42,92,153,.26),transparent 68%);pointer-events:none;z-index:0}
.hw-contact-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:start}
.hw-badge{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#BFD4EE;background:rgba(42,92,153,.12);border:1px solid rgba(42,92,153,.32);padding:8px 15px;border-radius:999px;margin-bottom:20px}
.hw-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--g);animation:hwpulse 2s infinite}
@keyframes hwpulse{0%{box-shadow:0 0 0 0 rgba(42,92,153,.55)}70%{box-shadow:0 0 0 9px rgba(42,92,153,0)}100%{box-shadow:0 0 0 0 rgba(42,92,153,0)}}
.hw-contact-info h2{font-family:'Inter',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;font-size:clamp(28px,3.2vw,44px);color:#fff;margin:0 0 14px;line-height:1.04}
.hw-contact-info .hw-accent{color:var(--g)}
.hw-contact-sub{color:rgba(255,255,255,.65);font-size:15px;margin:0 0 28px;line-height:1.6;max-width:410px}
.hw-contact-cards{display:flex;flex-direction:column;gap:12px;max-width:420px}
.hw-cc{display:flex;align-items:center;gap:15px;padding:14px 18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;text-decoration:none;transition:border-color .25s,background .25s,transform .25s}
a.hw-cc:hover{border-color:rgba(42,92,153,.5);background:rgba(255,255,255,.07);transform:translateX(4px)}
.hw-cc .ci{width:44px;height:44px;border-radius:12px;background:rgba(42,92,153,.14);color:var(--g);display:grid;place-items:center;flex:0 0 auto}
.hw-cc .ci svg{width:20px;height:20px}
.hw-cc .cc-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.hw-cc .k{font-size:12px;color:rgba(255,255,255,.5);font-weight:600}
.hw-cc .v{font-size:16px;color:#fff;font-weight:600}
.hw-contact-form{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:30px;box-shadow:0 44px 90px -52px rgba(0,0,0,.85)}
.hw-contact-form::before{content:'';position:absolute;inset:0;border-radius:24px;padding:1px;background:linear-gradient(140deg,rgba(42,92,153,.55),transparent 42%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hw-frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hw-field{margin-bottom:15px}
.hw-field label{display:block;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:7px}
.hw-field input,.hw-field textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:13px;padding:14px 16px;color:#fff;font-family:inherit;font-size:15px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.hw-field input::placeholder,.hw-field textarea::placeholder{color:rgba(255,255,255,.38)}
.hw-field input:focus,.hw-field textarea:focus{border-color:var(--g);background:rgba(255,255,255,.1);box-shadow:0 0 0 4px rgba(42,92,153,.14)}
.hw-field textarea{resize:vertical;min-height:120px}
.hw button.hw-contact-send{width:100%;justify-content:center;gap:10px;font-size:15px;padding:16px;margin-top:6px;background:linear-gradient(120deg,#1E4E88,#0B2140);box-shadow:0 16px 34px -14px rgba(143,199,58,.6)}
.hw button.hw-contact-send:hover{background:linear-gradient(120deg,#16406F,#081A33);transform:translateY(-2px)}
.hw-contact-send span{font-size:18px;transition:transform .2s}
.hw button.hw-contact-send:hover span{transform:translateX(3px)}
.hw-form-note{font-size:12.5px;color:rgba(255,255,255,.45);text-align:center;margin:14px 0 0}
@media(max-width:860px){.hw-contact-in{grid-template-columns:1fr;gap:34px}.hw-frow{grid-template-columns:1fr}}
/* ===== Hero scroll : image qui retrecit dans le carre (fond noir), type 84paris ===== */
.hw-hero{padding:0;height:230vh;background:#000}
.hw-hero-sticky{position:sticky;top:0;height:100vh;padding:12px;display:flex}
.hw-hero-card{position:relative;flex:1;min-height:0;border-radius:26px;overflow:hidden;background:#000;display:flex;align-items:center;box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}
.hw-hero-card::before{display:none}
.hw-hero-media{position:absolute;inset:0;background-size:cover;background-position:center;transform-origin:center center;will-change:transform,opacity;z-index:0}
@media(max-width:860px){.hw-hero{height:200vh}}
/* correction : pas d'epinglage, fond BLANC autour du carre, photo qui retrecit au scroll */
.hw-hero{padding:12px;height:auto;background:#fff}
.hw-hero-sticky{position:static;height:auto;padding:0;display:block}
.hw-hero-card{flex:none;min-height:calc(100vh - 24px);background:#fff;display:flex;align-items:center;box-shadow:0 30px 70px -40px rgba(12,16,10,.42)}

/* ===== Hero (v2.8) : image + titre retrecissent ensemble, colles en bas centre, interieur noir ===== */
.hw-hero{padding:12px;height:auto;background:#fff}
.hw-hero-sticky{position:relative;height:auto;padding:0;display:block;background:transparent}
.hw-hero-card{position:relative;flex:none;max-width:none;margin:0;height:calc(100vh - 24px);min-height:0;border-radius:26px;overflow:hidden;background:#000;display:block;transform:none!important;box-shadow:0 30px 70px -40px rgba(12,16,10,.42)}
.hw-hero-card::before{display:none}
.hw-hero-inner{position:absolute;inset:0;display:flex;align-items:center;transform-origin:center bottom;will-change:transform;z-index:1}
.hw-hero-media{position:absolute;inset:0;background-size:cover;background-position:center;border-radius:0;z-index:0}
.hw-hero-body{position:relative;z-index:2}
.hw-hero .hw-nav{z-index:12}

/* ===== Formulaire contact retravaille (v2.9) ===== */
.hw-form-head{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.09)}
.hw-form-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin-bottom:9px}
.hw-form-head h3{font-size:21px;color:#fff;font-family:'Inter',system-ui,-apple-system,sans-serif;font-weight:800;letter-spacing:-.02em}
.hw-inp{position:relative;display:flex;align-items:center}
.hw-inp-ic{position:absolute;left:15px;display:inline-flex;color:rgba(255,255,255,.4);pointer-events:none;transition:color .2s}
.hw-inp-ic svg{width:18px;height:18px}
.hw-inp input,.hw-inp textarea{padding-left:44px}
.hw-inp-area{align-items:flex-start}
.hw-inp-area .hw-inp-ic{top:15px}
.hw-inp:focus-within .hw-inp-ic{color:var(--g)}
.hw-form-note{display:flex;align-items:center;justify-content:center;gap:7px}
.hw-form-note svg{width:13px;height:13px;color:rgba(255,255,255,.4);flex:0 0 auto}
/* Aligner la section Domaines/expertises sur la largeur des categories (.hw-wrap) */
body.exemple5 #univers .wide{max-width:1440px;padding:0 clamp(20px,4vw,40px)}

/* ===== Uniformisation des titres : meme police (Inter) + taille coherente partout (v3.0) ===== */
body.exemple5 .hw-cat-head h2,
body.exemple5 .section h2,
body.exemple5 .section h2 em,
body.exemple5 .hw-faq-left h2,
body.exemple5 .hw-contact-info h2,
body.exemple5 .aubry-avis .avis-title,
body.exemple5 .aubry-avis .avis-title em{
  font-family:'Inter',system-ui,-apple-system,sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  font-style:normal !important;
}
body.exemple5 .hw-cat-head h2,
body.exemple5 .section h2,
body.exemple5 .hw-faq-left h2,
body.exemple5 .hw-contact-info h2,
body.exemple5 .aubry-avis .avis-title{
  font-size:clamp(28px,3.6vw,42px) !important;
  line-height:1.08 !important;
}

/* Aligner la section avis sur hw-wrap (1440, comme la FAQ) */
body.exemple5 .aubry-avis .padding-global{padding-left:0;padding-right:0}
body.exemple5 .aubry-avis .container-large{max-width:1440px;margin:0 auto;padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px)}

/* Pont invisible entre le bouton du menu et le panneau : garde le trou visuel (design)
   mais conserve le survol quand la souris traverse le trou (v3.2) */
.hw-panel::before{content:'';position:absolute;left:0;right:0;top:-20px;height:20px;background:transparent}

/* --- Lisibilite des liens sur fond sombre (fix Philippe D) ---
   .hw a{color:inherit} (0-1-1) bat .hw-logo / .hw-signin / .accordx__cta (0-1-0) :
   les liens heritaient du texte SOMBRE, illisible sur le hero noir.
   On re-cible en a.classe avec body.exemple5 (0-2-1) pour repasser devant. */
body.exemple5 a.hw-logo,
body.exemple5 a.hw-signin{color:#fff}
body.exemple5 .hw-nav-stuck a.hw-logo,
body.exemple5 .hw-nav-stuck a.hw-signin,
body.exemple5 .hw-foot-brand a.hw-logo{color:var(--ink)}
body.exemple5 a.accordx__cta{color:#fff}
body.exemple5 a.accordx__cta:hover{color:var(--gold-soft)}


/* ===================== CHARTE BLEU MARINE / BLANC / NOIR =====================
   L'accent etait un vert clair (#a6d84a) pose aussi bien sur des sections BLANCHES
   que sur des sections SOMBRES. Un bleu marine ne marche pas dans les deux cas :
   sur fond sombre il disparait. Regle appliquee :
     - fond blanc  -> bouton bleu marine, texte blanc
     - fond sombre -> bouton blanc, texte bleu marine ; details en bleu clair
   ========================================================================= */
body.exemple5 a.hw-pro,
body.exemple5 button.hw-pro{background:var(--g);color:#fff}
body.exemple5 a.hw-pro:hover,
body.exemple5 button.hw-pro:hover{background:var(--gd)}
/* hero (noir) : bouton blanc, texte marine */
body.exemple5 .hw-hero a.hw-pro{background:#fff;color:var(--g)}
body.exemple5 .hw-hero a.hw-pro:hover{background:#e8eef7;color:var(--gd)}
/* nav collante (blanche) : on repasse en marine */
body.exemple5 .hw-nav-stuck a.hw-pro{background:var(--g);color:#fff}
body.exemple5 .hw-nav-stuck a.hw-pro:hover{background:var(--gd)}
/* section contact (sombre) : bouton blanc + details bleu clair */
body.exemple5 button.hw-contact-send{background:#fff;color:var(--g);box-shadow:0 16px 34px -14px rgba(42,92,153,.5)}
body.exemple5 button.hw-contact-send:hover{background:#e8eef7;color:var(--gd)}
body.exemple5 .hw-cc .ci{color:#8FB6E4;background:rgba(42,92,153,.18)}
body.exemple5 .hw-field input:focus,
body.exemple5 .hw-field textarea:focus{border-color:#8FB6E4;box-shadow:0 0 0 4px rgba(42,92,153,.22)}
/* fleche des cartes (fond blanc) : marine + fleche blanche */
body.exemple5 .hw-card:hover .hw-corner{background:var(--g);color:#fff}

/* ===================== SLIDER DU HERO ===================== */
body.exemple5 .hw-hero-media{opacity:0;transition:opacity 1s ease}
body.exemple5 .hw-hero-media.is-on{opacity:1}
body.exemple5 .hw-hero-dots{position:absolute;z-index:3;right:clamp(16px,2.6vw,30px);bottom:clamp(16px,2.6vw,28px);display:flex;gap:9px}
body.exemple5 .hw-hero-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.42);transition:background .25s,transform .25s}
body.exemple5 .hw-hero-dots button:hover{background:rgba(255,255,255,.7)}
body.exemple5 .hw-hero-dots button.is-on{background:#fff;transform:scale(1.3)}

/* ===================== BOUTIQUE WOOCOMMERCE =====================
   .hw-nav est en position:absolute (conçue pour flotter sur le hero de
   l'accueil). Sur la boutique il n'y a pas de hero : la nav doit devenir
   opaque et occuper sa place dans le flux, sinon elle recouvre le titre. */
body.pd-shop .hw-nav-solid{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
body.pd-shop .hw-nav-solid .hw-nav-in{padding-top:14px;padding-bottom:14px}
body.pd-shop .hw-nav-solid a.hw-logo{color:var(--ink)}
body.pd-shop .hw-nav-solid .hw-logo-ic{background:var(--ink);color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
body.pd-shop .hw-nav-solid a.hw-pro{background:var(--g);color:#fff}
body.pd-shop .hw-nav-solid a.hw-pro:hover{background:var(--gd)}

body.pd-shop .pd-shop-main{padding:clamp(34px,5vw,64px) 0 clamp(60px,8vw,100px);background:#fff}
body.pd-shop .pd-shop-head{margin-bottom:clamp(26px,4vw,44px)}
body.pd-shop .pd-shop-head h1{font-family:'Inter',system-ui,sans-serif!important;font-size:clamp(30px,4vw,46px);color:var(--ink);margin:6px 0 12px}
body.pd-shop .pd-shop-lead{color:var(--mut);font-size:16px;line-height:1.6;max-width:620px;margin:0}

/* grille produits */
body.pd-shop ul.products{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
@media(max-width:1100px){body.pd-shop ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){body.pd-shop ul.products{grid-template-columns:1fr}}
body.pd-shop ul.products li.product{margin:0!important;width:auto!important;float:none!important;text-align:left}
body.pd-shop ul.products li.product img{border-radius:16px;margin-bottom:12px;aspect-ratio:1/1;object-fit:cover;width:100%}
body.pd-shop ul.products li.product .woocommerce-loop-product__title{font-size:16px!important;font-weight:700;color:var(--ink);padding:0!important;margin:0 0 4px}
body.pd-shop ul.products li.product .price{color:var(--g)!important;font-weight:700;font-size:15px}
body.pd-shop .woocommerce-result-count,body.pd-shop .woocommerce-ordering{color:var(--mut);font-size:14px}

/* boutons : marine sur fond blanc */
body.pd-shop a.button,body.pd-shop button.button,
body.pd-shop input.button,body.pd-shop #respond input#submit,
body.pd-shop a.button,body.pd-shop button.button{background:var(--g);color:#fff;border-radius:999px;font-weight:700;padding:11px 20px;font-size:14px;border:0;transition:background .2s}
body.pd-shop a.button:hover,body.pd-shop button.button:hover,
body.pd-shop a.button:hover,body.pd-shop button.button:hover{background:var(--gd);color:#fff}
body.pd-shop button.button.alt,body.pd-shop a.button.alt{background:var(--g);color:#fff}
body.pd-shop button.button.alt:hover,body.pd-shop a.button.alt:hover{background:var(--gd)}

/* fiche produit */
body.pd-shop div.product{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(26px,4vw,54px);align-items:start}
@media(max-width:900px){body.pd-shop div.product{grid-template-columns:1fr}}
body.pd-shop div.product div.images{width:auto!important;float:none!important;margin:0!important}
body.pd-shop div.product div.images img{border-radius:20px}
body.pd-shop div.product div.summary{width:auto!important;float:none!important;margin:0!important}
body.pd-shop div.product .product_title{font-family:'Inter',system-ui,sans-serif!important;font-size:clamp(26px,3vw,38px);color:var(--ink);line-height:1.1}
body.pd-shop div.product p.price,body.pd-shop div.product span.price{color:var(--g)!important;font-size:26px;font-weight:700}
body.pd-shop div.product form.cart table.variations{margin-bottom:14px}
body.pd-shop div.product form.cart table.variations td,
body.pd-shop div.product form.cart table.variations th{padding:11px 0 0;vertical-align:top}
body.pd-shop div.product form.cart table.variations td{vertical-align:top}
body.pd-shop div.product form.cart table.variations label{font-weight:700;color:var(--ink);font-size:14px}
body.pd-shop div.product form.cart table.variations select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:14.5px}
body.pd-shop div.product form.cart .reset_variations{font-size:13px;color:var(--mut)}
body.pd-shop div.product .quantity input{padding:10px;border:1px solid var(--line);border-radius:10px;width:70px}
body.pd-shop div.product .woocommerce-tabs ul.tabs li{background:transparent;border-radius:0}
body.pd-shop .woocommerce-message,body.pd-shop .woocommerce-info{border-top-color:var(--g)}
body.pd-shop .woocommerce-message::before,body.pd-shop .woocommerce-info::before{color:var(--g)}

/* WooCommerce pose un clearfix (::before/::after) sur ul.products : en display:grid
   ces pseudo-elements comptent comme des cases -> une case vide apparaissait avant
   le 1er produit. */
body.pd-shop ul.products::before,
body.pd-shop ul.products::after{display:none!important}

/* Nav opaque de la boutique : on reprend les memes couleurs que .hw-nav-stuck
   (nav blanche de l'accueil au scroll). Sans ca, les menus gardaient leur texte
   blanc (prevu pour le hero sombre) et devenaient invisibles sur fond blanc. */
body.pd-shop .hw-nav-solid .hw-menu{background:var(--bg);border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body.pd-shop .hw-nav-solid .hw-menu>a,
body.pd-shop .hw-nav-solid .hw-mi>button{color:#3d4149}
body.pd-shop .hw-nav-solid .hw-menu>a.on{background:#fff;color:#151515}
body.pd-shop .hw-nav-solid .hw-menu>a:hover:not(.on),
body.pd-shop .hw-nav-solid .hw-mi>button:hover{color:var(--ink)}
body.pd-shop .hw-nav-solid .hw-burger span{background:var(--ink)}

/* Prix : WooCommerce impose #958e09 via .woocommerce:where(body:not(...)) ;
   on repasse en bleu marine. */
body.pd-shop div.product p.price,
body.pd-shop div.product p.price .amount,
body.pd-shop div.product p.price bdi,
body.pd-shop ul.products li.product .price,
body.pd-shop ul.products li.product .price .amount,
body.pd-shop ul.products li.product .price bdi{color:var(--g)!important}
body.pd-shop div.product p.price del,
body.pd-shop ul.products li.product .price del{color:var(--mut)!important}
/* Reference produit non renseignee -> ne pas afficher "UGS : ND" */
body.pd-shop .product_meta .sku_wrapper{display:none}

/* ===================== LOGO : branche d'olivier =====================
   Reprise de l'embleme grave sur les cadrans Philippe D (vectorise depuis la
   photo studio). Remplace l'icone "maison" generique heritee de HavenWorks.
   Le SVG est en fill:currentColor : il suit donc les couleurs deja gerees pour
   .hw-logo (blanc sur le hero sombre, marine sur la nav blanche). */
body.exemple5 a.hw-logo{gap:11px}
body.exemple5 a.hw-logo .pd-mark{display:inline-flex;align-items:center;width:38px;flex:0 0 auto}
body.exemple5 a.hw-logo .pd-mark svg{width:100%;height:auto;display:block}
@media(max-width:600px){body.exemple5 a.hw-logo .pd-mark{width:30px}}
/* .footer-logo du theme detective : cercle de 56px avec bordure (logo rond
   Tausend Berg). La branche d'olivier n'est pas ronde -> on retire le cercle. */
body.exemple5 .footer-brand .footer-logo{width:auto;height:38px;max-width:170px;object-fit:contain;border:0;border-radius:0;display:inline-block;vertical-align:middle;margin:0 12px 0 0}

/* Fiche produit : la colonne de droite ne doit contenir que le resumé.
   Les onglets et les produits similaires sont rendus DANS div.product par
   WooCommerce : sans ca, la grille 2 colonnes les collait a cote de la
   description. On les passe en pleine largeur, sous le produit. */
body.pd-shop div.product .woocommerce-tabs,
body.pd-shop div.product .related,
body.pd-shop div.product .upsells,
body.pd-watch div.product .woocommerce-product-gallery + .summary + *{grid-column:1 / -1}
body.pd-shop div.product .related,
body.pd-shop div.product .upsells{margin-top:clamp(40px,6vw,72px)}
body.pd-shop div.product .related > h2,
body.pd-shop div.product .upsells > h2,
body.pd-shop div.product .woocommerce-tabs h2{font-family:'Inter',system-ui,sans-serif!important;font-size:clamp(22px,2.4vw,30px);color:var(--ink);margin:0 0 22px}
body.pd-shop div.product .woocommerce-tabs{margin-top:clamp(34px,5vw,60px)}
body.pd-shop div.product .woocommerce-tabs .panel{max-width:820px}
/* securite : un clone de nav ne doit jamais s'afficher dans le flux */
body.pd-shop .hw-nav-stuck{position:fixed!important}

/* ===================== RESUME PRODUIT : rythme vertical =====================
   Les fiches SANS variantes (horloge, occasion) n'ont pas de table.variations :
   titre, prix, description, panier et categorie se retrouvaient colles. On pose
   les marges sur les elements du resume, pas sur le tableau des options. */
body.pd-shop div.product .summary{display:flex;flex-direction:column;align-items:flex-start}
body.pd-shop div.product .product_title{margin:0 0 12px}
body.pd-shop div.product p.price{margin:0 0 20px;line-height:1.2}
body.pd-shop div.product .woocommerce-product-details__short-description{margin:0 0 28px;color:var(--mut);font-size:15.5px;line-height:1.65;max-width:52ch}
body.pd-shop div.product form.cart{width:100%;margin:0 0 26px}
body.pd-shop div.product form.cart .quantity{margin:0 12px 0 0}
body.pd-shop div.product form.cart .quantity input{height:46px}
body.pd-shop div.product form.cart .single_add_to_cart_button{height:46px;padding:0 26px}
/* fiche sans variantes : quantite + bouton alignes */
body.pd-shop div.product form.cart:not(.variations_form){display:flex;align-items:center;gap:0}
/* fiche avec variantes : le bloc prix/panier respire sous les menus */
body.pd-shop div.product .woocommerce-variation-add-to-cart{display:flex;align-items:center;margin-top:18px}
body.pd-shop div.product .woocommerce-variation-price{margin:16px 0 0}
body.pd-shop div.product .product_meta{margin:8px 0 0;padding-top:22px;border-top:1px solid var(--line);width:100%;font-size:13.5px;color:var(--mut)}
body.pd-shop div.product .product_meta a{color:var(--g)}

/* "Parlons-en." : blanc sur le fond sombre du contact (demande Gael) */
body.exemple5 .hw-contact-info .hw-accent{color:#fff}

/* Image produit affichee en COMPACT (4:5) meme si le fichier est long (1:2) :
   object-fit cover montre le boitier ; la loupe (PhotoSwipe) ouvre l'image
   complete au clic (data-large_image, non affectee par ce cadrage). */
/* cadre gris assorti au fond des photos (#706c6d) pour un dezoom sans demarcation */
body.pd-watch .woocommerce-product-gallery__image{background:#706c6d;border-radius:16px;overflow:hidden;aspect-ratio:1/1;position:relative}
body.pd-watch div.product .woocommerce-product-gallery__image img,
body.pd-watch div.product .woocommerce-product-gallery__image > a > img{position:absolute!important;left:50%!important;top:5%!important;transform:translateX(-50%)!important;width:64%!important;max-width:none!important;height:auto!important;border-radius:0;cursor:zoom-in}

/* Visionneuse produit horizontale */
.pd-lightbox{position:fixed;inset:0;z-index:2147483000;background:#0b0e14;display:block}
/* masquer la nav + bouton haut de page quand la visionneuse est ouverte */
.pd-lb-open .hw-nav,.pd-lb-open .to-top{opacity:0;pointer-events:none}
.pd-lightbox__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
/* on pivote l'IMAGE : max-width limite sa largeur de LAYOUT (= hauteur visuelle),
   max-height limite sa hauteur de layout (= largeur visuelle) -> toute l'image
   pivotee tient dans le viewport, rien n'est coupe. */
.pd-lightbox__stage img{max-height:94vh;max-width:96vw;width:auto;height:auto;display:block}
.pd-lightbox__x{position:fixed;top:14px;right:20px;z-index:2;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;cursor:pointer;transition:background .2s}
.pd-lightbox__x:hover{background:rgba(255,255,255,.24)}
/* la loupe WooCommerce reste comme indice cliquable */
body.pd-watch .woocommerce-product-gallery__trigger{z-index:3}

/* ============ MENU MOBILE PLEIN ECRAN ============ */
.hw-mob{display:none;position:fixed;inset:0;z-index:2147482000;background:#fff;padding:84px 26px 40px;overflow:hidden}
.hw-mob.show{display:grid;align-content:center}
/* annule la regle theme 'nav{position:fixed;transform:translateY(-100%)}' (<=900px) qui poussait le menu hors ecran */
.hw-mob .hw-mob-links{display:block;width:100%;max-width:420px;margin:0 auto;position:static;transform:none}
.hw-mob a{display:block;text-align:center;padding:18px 6px;font-size:20px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.hw-mob a.hw-pro{margin-top:24px;border-bottom:0;background:var(--g);color:#fff;border-radius:999px;padding:16px}
.hw-mob a.hw-pro:hover{background:var(--gd)}
.hw-mob-x{position:fixed;top:16px;right:18px;width:46px;height:46px;border:0;border-radius:50%;background:var(--bg);color:var(--ink);font-size:30px;line-height:1;cursor:pointer;z-index:2}
.pd-menu-open{overflow:hidden}

/* ============ CORRECTIFS MOBILE (<=600px) ============ */
@media(max-width:600px){
  /* nav : logo + bouton "Voir la boutique" sur UNE seule ligne */
  body.exemple5 .hw-nav-in{gap:8px;padding-left:16px;padding-right:16px}
  body.exemple5 .hw-hero a.hw-logo,
  body.exemple5 .hw-nav-solid a.hw-logo{white-space:nowrap;font-size:16px;gap:7px}
  body.exemple5 a.hw-logo .pd-mark{width:26px}
  body.exemple5 .hw-nav .hw-right{gap:8px}
  body.exemple5 .hw-nav .hw-right a.hw-pro{white-space:nowrap;font-size:12px;padding:9px 13px}
  /* hero : plein ecran + pleine largeur (pas de bords blancs sur les cotes) */
  body.exemple5 .hw-hero{padding:0}
  body.exemple5 .hw-hero-card{height:100svh;border-radius:0}
  /* fiche produit : champs de personnalisation empiles (libelle au-dessus, menu pleine largeur) */
  body.pd-shop div.product table.variations,
  body.pd-shop div.product table.variations tbody,
  body.pd-shop div.product table.variations tr,
  body.pd-shop div.product table.variations th,
  body.pd-shop div.product table.variations td{display:block;width:100%}
  body.pd-shop div.product table.variations th{text-align:left;padding:0 0 6px;font-weight:700}
  body.pd-shop div.product table.variations td{padding:0 0 14px}
  body.pd-shop div.product .woocommerce-variation-add-to-cart{flex-wrap:wrap}
}

/* Boutique : bouton "Choix des options" en overlay sur l'image (mobile only) */
.pd-card-media{position:relative}
body.pd-shop ul.products li.product .pd-card-media .button{display:none}
@media(max-width:600px){
  body.pd-shop ul.products li.product>.button{display:none}
  body.pd-shop ul.products li.product .pd-card-media .button{display:block;position:absolute;left:14px;right:14px;bottom:14px;margin:0;text-align:center;background:rgba(11,33,64,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;border-radius:999px;padding:14px 18px;font-weight:600;box-shadow:0 10px 30px -12px rgba(0,0,0,.55)}
}

/* Fiche produit : 2e image = bracelet complet vertical a cote (comme l'ancien site chronomen) */
body.pd-watch .woocommerce-product-gallery{display:flex;gap:14px;align-items:flex-start}
body.pd-watch .woocommerce-product-gallery__wrapper{flex:1 1 auto;min-width:0;margin:0}
body.pd-watch .pd-strap{display:none;background:#706c6d;border-radius:16px;overflow:hidden;flex:0 0 auto}
body.pd-watch .woocommerce-product-gallery.pd-has-strap .pd-strap{display:block}
body.pd-watch .pd-strap img{width:100%;height:100%;object-fit:cover;display:block}

/* Police de marque "Philippe D" = Savoye LET (demande client, cf watch dials) */
@font-face{font-family:'Savoye LET';src:url('fonts/savoye-let.woff2') format('woff2'),url('fonts/savoye-let.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
body.exemple5 a.hw-logo,body.pd-shop a.hw-logo{font-family:'Savoye LET','Snell Roundhand','Brush Script MT',cursive;font-weight:400;font-size:32px;letter-spacing:.01em}
@media(max-width:600px){body.exemple5 .hw-hero a.hw-logo,body.exemple5 .hw-nav-solid a.hw-logo,body.pd-shop a.hw-logo{font-size:26px}}

body.exemple5 .footer-brand .name,body.pd-shop .footer-brand .name{font-family:'Savoye LET','Snell Roundhand','Brush Script MT',cursive;font-weight:400;font-size:34px;letter-spacing:.01em;line-height:1;display:inline-block;vertical-align:middle;margin-bottom:0}
body.exemple5 .footer-brand>p,body.pd-shop .footer-brand>p{margin-top:14px}

/* Produits SIMPLES (occasion, etc.) : photo portrait plafonnee -> evite l'image geante */
body.pd-shop:not(.pd-watch) .woocommerce-product-gallery__image img{max-height:560px!important;width:auto!important;max-width:100%!important;height:auto!important;margin:0 auto!important;display:block!important;border-radius:16px}
body.pd-shop:not(.pd-watch) .woocommerce-product-gallery,body.pd-shop:not(.pd-watch) .woocommerce-product-gallery__wrapper,body.pd-shop:not(.pd-watch) .flex-viewport{height:auto!important}