/* ===== /exemple5 : HavenWorks (marketplace services maison) ===== */
body.exemple5{background:#fff;color:#0A1B3D;font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.hw{--g:#0B5FFF;--gd:#0847D6;--ink:#0A1B3D;--mut:#5B6B87;--line:#E2E8F2;--bg:#F3F6FC}
.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:#0A1B3D}
.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(11,95,255,.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(11,95,255,.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(8,71,214,.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:#0A1B3D}
.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:#08152F;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(11,95,255,.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:#BFD6FF;background:rgba(11,95,255,.12);border:1px solid rgba(11,95,255,.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(11,95,255,.55)}70%{box-shadow:0 0 0 9px rgba(11,95,255,0)}100%{box-shadow:0 0 0 0 rgba(11,95,255,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(11,95,255,.5);background:rgba(255,255,255,.07);transform:translateX(4px)}
.hw-cc .ci{width:44px;height:44px;border-radius:12px;background:rgba(11,95,255,.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(11,95,255,.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(11,95,255,.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,#3B82FF,#0847D6);box-shadow:0 16px 34px -14px rgba(8,71,214,.6)}
.hw button.hw-contact-send:hover{background:linear-gradient(120deg,#2B72FF,#0640BF);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)}

/* ===================================================================
   MAX VISIBILITY (v4.0) — reskin SEO 2.0 sur la base HavenWorks
   =================================================================== */

/* ---- HERO : showreel video a la place de l'image ----
   Pas de calque assombrissant sur la video (demande Gael 2026-07-16). */
.hw-hero-media{background:#000}
.hw-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
/* Logo + lien "Mes offres" : .hw a{color:inherit} (0-1-1) battait .hw-logo{color:#fff} (0-1-0),
   le logo heritait donc du texte sombre. On reprend la main, nav du hero (clair) vs nav collante (sombre). */
body.exemple5 .hw-hero a.hw-logo,
body.exemple5 .hw-hero a.hw-signin{color:#fff}
body.exemple5 .hw-nav-stuck a.hw-logo,
body.exemple5 .hw-nav-stuck a.hw-signin{color:var(--ink)}
/* meme cause : les boutons verts <a class="hw-pro"> heritaient de la couleur du bloc parent
   (blanc dans les sections sombres) -> texte blanc sur vert clair. */
body.exemple5 a.hw-pro{color:#ffffff}

/* la nav collante ne doit plus masquer le titre vise par une ancre */
body.exemple5 section[id]{scroll-margin-top:88px}

/* Menus deroulants : .hw-panel est a top:calc(100% + 12px), ce trou de 12px n'appartient
   a aucun element -> en descendant vers le panneau la souris sortait de .hw-mi et le menu
   se fermait. Pont invisible sur le panneau (visible seulement quand il est ouvert),
   donc le survol reste dans .hw-mi. Design inchange. */
.hw-panel::before{content:'';position:absolute;top:-20px;left:0;right:0;height:20px}

/* le contenu du hero doit passer SOUS la nav (le badge la chevauchait) */
.hw-hero-body{max-width:800px;padding-top:clamp(104px,13vh,138px);padding-bottom:clamp(30px,5vw,60px)}
.hw-hero-badge{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#CFE0FF;background:rgba(11,95,255,.14);border:1px solid rgba(11,95,255,.4);padding:8px 15px;border-radius:999px;margin-bottom:22px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hw-hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--g);animation:hwpulse 2s infinite;flex:0 0 auto}
.hw-hero-body h1{font-size:clamp(32px,4.1vw,54px);max-width:12.5em}
.hw-hero-body p{margin:16px 0 0;max-width:520px}
.hw-hero-p2{color:rgba(255,255,255,.78)!important;font-size:15px!important}
.hw-hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px}
.hw-hero-or{color:rgba(255,255,255,.6);font-size:14px}
.hw-hero-btn--primary{background:var(--g);color:#ffffff;border-color:var(--g);font-weight:700;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 18px 40px -16px rgba(11,95,255,.7)}
.hw-hero-btn--primary:hover{background:var(--gd);border-color:var(--gd);color:#ffffff}
/* Mobile : le CTA de la nav passait sur 2 lignes et ecrasait le logo.
   Le menu burger contient deja "Obtenir un audit gratuit". */
@media(max-width:1000px){
  .hw-nav .hw-right > a.hw-pro{display:none}
  .hw-nav-in{gap:12px}
}
@media(max-width:560px){
  .hw-hero-body h1{font-size:clamp(28px,7.4vw,38px)}
  .hw-hero-actions{gap:10px}
  .hw-hero-or{display:none}
  .hw-hero-btn{padding:15px 24px;font-size:15px}
}

/* ---- CIBLES : la requete client remplace la note bidon ---- */
.hw-cat{padding:64px 0 20px}
.hw-cat-head{align-items:flex-end}
.hw-cat-head .hw-eyebrow{margin-bottom:8px}
.hw-cat-lead{margin:14px 0 0;color:var(--mut);font-size:16px;line-height:1.7;max-width:620px}
.hw-query{font-size:13.5px;color:var(--mut);font-style:italic;line-height:1.4}
.hw-card[hidden]{display:none}
.hw-cat-foot{margin:30px 0 0;color:var(--mut);font-size:15px}

/* ---- LE REFERENCEMENT A CHANGE ---- */
.hw-change{padding:80px 0 20px}
.hw-change-in{display:grid;grid-template-columns:1fr .92fr;gap:56px;align-items:center}
.hw-change-left h2{margin-bottom:18px}
.hw-change-left p{color:var(--mut);font-size:16px;line-height:1.7;margin:0 0 14px;max-width:520px}
.hw-change-strong{color:var(--ink)!important;font-weight:600}
.hw-ask-lead{color:var(--mut);font-size:14.5px;margin:0 0 14px}
.hw-ask{display:flex;align-items:center;gap:14px;background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin-bottom:14px}
.hw-ask p{margin:0;font-size:17px;font-weight:600;color:var(--ink);line-height:1.45}
.hw-ask-ic{width:38px;height:38px;border-radius:12px;background:var(--ink);color:var(--g);display:grid;place-items:center;flex:0 0 auto}
.hw-ask-ic svg{width:19px;height:19px}
@media(max-width:900px){.hw-change-in{grid-template-columns:1fr;gap:32px}}

/* ---- LES 5 SURFACES ---- */
.hw-surf{padding:80px 0 20px}
.hw-surf-head{margin-bottom:38px;max-width:760px}
.hw-surf-head .hw-eyebrow{margin-bottom:10px}
.hw-surf-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.hw-surf-card{background:var(--bg);border-radius:20px;padding:28px 24px;border:1px solid transparent;transition:border-color .3s,transform .3s,background .3s}
.hw-surf-card:hover{border-color:rgba(11,95,255,.6);background:#fff;transform:translateY(-4px)}
.hw-surf-n{display:block;font-size:12.5px;font-weight:800;color:var(--gd);letter-spacing:.1em;margin-bottom:14px}
.hw-surf-card h3{font-size:19px;margin:0 0 8px}
.hw-surf-card p{margin:0;color:var(--mut);font-size:14.5px;line-height:1.6}
@media(max-width:1100px){.hw-surf-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.hw-surf-grid{grid-template-columns:1fr 1fr;gap:14px}}

/* ---- POURQUOI MOI ---- */
.hw-why{padding:80px 0 20px}
.hw-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.hw-why-card{background:var(--bg);border-radius:22px;padding:32px}
.hw-why-card h3{font-size:21px;margin:0 0 12px}
.hw-why-card p{margin:0;color:var(--mut);font-size:15px;line-height:1.7}
.hw-why-end{margin-top:14px!important;color:var(--ink)!important;font-weight:600}
.hw-ticks{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.hw-ticks li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:#3d4149;line-height:1.5}
.hw-ticks .tk{width:19px;height:19px;border-radius:50%;background:rgba(11,95,255,.22);color:#0B5FFF;display:grid;place-items:center;flex:0 0 auto;margin-top:1px}
.hw-ticks .tk svg{width:11px;height:11px;stroke-width:3}
@media(max-width:900px){.hw-why-grid{grid-template-columns:1fr}}

/* ---- OFFRES ---- */
.hw-offres{padding:80px 0 20px}
.hw-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.hw-price{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px 28px;transition:box-shadow .3s,transform .3s}
.hw-price:hover{box-shadow:0 34px 70px -44px rgba(20,20,20,.5);transform:translateY(-3px)}
.hw-price.is-feat{background:var(--ink);border-color:var(--ink);color:#fff}
.hw-price.is-feat h3,.hw-price.is-feat .hw-price-setup b,.hw-price.is-feat .hw-price-mo b{color:#fff}
.hw-price.is-feat .hw-ticks li{color:rgba(255,255,255,.86)}
.hw-price.is-feat .hw-ticks .tk{background:rgba(11,95,255,.2);color:var(--g)}
.hw-price.is-feat .hw-price-setup span,.hw-price.is-feat .hw-price-mo span,.hw-price.is-feat .hw-price-then{color:rgba(255,255,255,.55)}
.hw-price-flag{position:absolute;top:-13px;left:28px;background:var(--g);color:#ffffff;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.hw-price h3{font-size:23px;margin:0 0 4px}
.hw-price-sub{margin:0 0 4px;font-size:14px;color:var(--mut)}
.hw-price-nums{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:20px 0 4px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.hw-price.is-feat .hw-price-nums{border-color:rgba(255,255,255,.14)}
.hw-price-setup b,.hw-price-mo b{font-size:32px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1}
.hw-price-setup span,.hw-price-mo span{font-size:13px;color:var(--mut);margin-left:5px}
.hw-price-then{font-size:13px;color:var(--mut)}
.hw-price-inherit{margin:18px 0 0;font-size:13.5px;font-weight:700;color:var(--gd)}
.hw-price-list{margin-top:18px;flex:1}
.hw-price-promo{display:flex;gap:9px;align-items:flex-start;margin:20px 0 0;padding:14px 16px;border-radius:14px;background:rgba(11,95,255,.14);border:1px solid rgba(11,95,255,.34);font-size:13.5px;line-height:1.55;color:#CFE0FF}
.hw-price:not(.is-feat) .hw-price-promo{color:#0847D6;background:rgba(11,95,255,.16);border-color:rgba(11,95,255,.45)}
.hw-price-cta{margin-top:22px;justify-content:center;text-align:center;padding:15px 20px;font-size:14.5px;line-height:1.25}
@media(max-width:1000px){.hw-price-grid{grid-template-columns:1fr;gap:30px}}

/* ---- ETAPES (4 colonnes) ---- */
.hw-how{padding:80px 0 20px}
.hw-steps-4{grid-template-columns:repeat(4,1fr)!important;gap:20px!important}
.hw-steps-4 .hw-step{position:relative;padding:28px 24px}
@media(max-width:1000px){.hw-steps-4{grid-template-columns:1fr 1fr!important}}
@media(max-width:560px){.hw-steps-4{grid-template-columns:1fr!important}}

/* ---- BANDEAU SEO vs PUB ---- */
.hw-band{padding:80px 0 70px}
.hw-band-in{align-items:center}
.hw-band-txt{max-width:760px}
.hw-band-txt p{margin:12px 0 0;color:rgba(255,255,255,.75);font-size:15.5px;line-height:1.7}
.hw-band .hw-pro-lg{white-space:nowrap}

/* ---- CONTACT : cartes d'etapes non cliquables ---- */
.hw-contact .hw-cc{cursor:default}
.hw-contact .hw-cc .ci svg{width:17px;height:17px;stroke-width:3}

/* ---- FOOTER ----
   Le theme detective force footer{background:var(--ink);color:...} sur TOUT <footer> :
   on rend explicitement le footer HavenWorks clair. */
body.exemple5 footer.hw-foot{background:#fff;color:var(--ink);border-top:1px solid var(--line);padding:60px 0 26px;margin-top:0}
.hw-foot-brand .hw-logo{color:var(--ink);font-size:20px}
.hw-foot-brand p{color:var(--mut);max-width:260px;font-size:14px;line-height:1.6;margin:12px 0 0}
body.exemple5 .hw-foot-col h5{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#9aa0a8;margin:0 0 14px;font-weight:700;font-family:'Inter',system-ui,sans-serif}
body.exemple5 .hw-foot-col a{display:block;padding:5px 0;font-size:14.5px;color:#3d4149;font-weight:500}
body.exemple5 .hw-foot-col a:hover{color:var(--ink)}
body.exemple5 .hw-foot-bot{color:var(--mut);font-size:13.5px}
body.exemple5 .hw-foot-bot a{color:var(--gd);font-weight:600;margin-left:4px}
body.exemple5 .hw-foot-bot a:hover{color:var(--ink)}

/* ---- Bouton retour en haut : passe de l'or detective au vert du site ---- */
body.exemple5 .to-top{background:var(--ink);color:var(--g);border:1px solid rgba(11,95,255,.5);box-shadow:0 14px 30px -12px rgba(20,20,20,.55)}
body.exemple5 .to-top:hover{background:var(--g);color:#ffffff}

/* ---- Uniformisation des titres (remplace le bloc v3.0) ---- */
body.exemple5 .hw-cat-head h2,
body.exemple5 .hw-surf-head h2,
body.exemple5 .hw-change-left h2,
body.exemple5 .hw-how h2,
body.exemple5 .hw-band h2,
body.exemple5 .hw-faq-left h2,
body.exemple5 .hw-contact-info h2{
  font-family:'Inter',system-ui,-apple-system,sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  font-style:normal !important;
  font-size:clamp(26px,3.2vw,40px) !important;
  line-height:1.08 !important;
}
body.exemple5 .hw-hero-body h1{font-family:'Inter',system-ui,-apple-system,sans-serif !important;font-weight:800 !important}
body.exemple5 .hw-price h3,
body.exemple5 .hw-surf-card h3,
body.exemple5 .hw-why-card h3,
body.exemple5 .hw-step h3,
body.exemple5 .hw-acc summary{font-family:'Inter',system-ui,-apple-system,sans-serif !important}

/* ===================================================================
   CHARTE BLEU ELECTRIQUE (v5.0, demande Gael 2026-07-16)
   Dominante = bleu electrique #0B5FFF ; secondaire = bleu marine #0A1B3D
   (blocs sombres : offre mise en avant, bandeau SEO/pub, contact, etapes) ;
   fond du site = blanc. Degrades sur les boutons.
   =================================================================== */

/* Degrade sur tous les boutons pleins (<a> ET <button> : .hw button.hw-pro
   redefinissait le fond, d'ou le double ciblage). */
body.exemple5 a.hw-pro,
body.exemple5 button.hw-pro{
  background:linear-gradient(120deg,#3B82FF 0%,#0B5FFF 55%,#0847D6 100%);
  color:#fff;
  box-shadow:0 14px 30px -14px rgba(11,95,255,.65);
}
body.exemple5 a.hw-pro:hover,
body.exemple5 button.hw-pro:hover{
  background:linear-gradient(120deg,#2B72FF 0%,#0847D6 60%,#0640BF 100%);
  box-shadow:0 18px 38px -14px rgba(11,95,255,.8);
}
body.exemple5 .hw-hero-btn--primary{
  background:linear-gradient(120deg,#3B82FF 0%,#0B5FFF 55%,#0847D6 100%);
  border-color:transparent;color:#fff;
  box-shadow:0 20px 44px -16px rgba(11,95,255,.75);
}
body.exemple5 .hw-hero-btn--primary:hover{
  background:linear-gradient(120deg,#2B72FF 0%,#0847D6 60%,#0640BF 100%);
  border-color:transparent;
  box-shadow:0 26px 52px -18px rgba(11,95,255,.85);
}
body.exemple5 .hw-price-flag{background:linear-gradient(120deg,#3B82FF,#0847D6)}

/* Bleu marine : les surfaces sombres du site */
body.exemple5 .hw-contact{background:#08152F}
body.exemple5 .hw-price.is-feat{background:linear-gradient(160deg,#0F2A5C 0%,#0A1B3D 60%)}
body.exemple5 .hw-band-in{background:linear-gradient(140deg,#0F2A5C 0%,#0A1B3D 62%)}

/* Halos : vert -> bleu electrique */
body.exemple5 .hw-contact-glow{background:radial-gradient(circle,rgba(11,95,255,.34),transparent 68%)}
body.exemple5 .hw-band-in::before{background:radial-gradient(circle,rgba(11,95,255,.55),transparent 70%)}

/* Icone du logo : pastille bleu electrique */
body.exemple5 .hw-nav-stuck .hw-logo-ic,
body.exemple5 .hw-foot-brand .hw-logo-ic{background:linear-gradient(135deg,#3B82FF,#0847D6);color:#fff}

/* Retour en haut */
body.exemple5 .to-top{background:var(--ink);color:#fff;border:1px solid rgba(11,95,255,.6)}
body.exemple5 .to-top:hover{background:linear-gradient(120deg,#3B82FF,#0B5FFF);color:#fff}

/* ---- Badge lauriers "Agence 2026" sur le hero (repris de beevisible.online, en blanc) ---- */
.mx-laurels{display:inline-flex;align-items:center;gap:14px;margin-bottom:22px;color:#fff}
.mx-laurels .mx-laurel{flex-shrink:0;width:46px;height:59px;display:block}
.mx-laurels-txt{font-family:'Inter',system-ui,-apple-system,sans-serif;font-weight:700;font-size:15px;letter-spacing:.01em;color:#fff;white-space:nowrap;line-height:1.3}
.mx-laurels-txt strong{font-weight:800}
@media(max-width:560px){
  .mx-laurels{gap:10px;margin-bottom:16px}
  .mx-laurels .mx-laurel{width:36px;height:46px}
  .mx-laurels-txt{font-size:13.5px}
}

/* ===================================================================
   OFFRES v5.3 — refonte facon "carte tarif" (ref beevisible fournie par Gael) :
   icone ronde, titre + baseline, gros prix mensuel, pastille frais
   d'accompagnement, carte mise en avant a bordure bleue, detail repliable.
   =================================================================== */
body.exemple5 .hw-price{
  background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:34px 26px 28px;text-align:center;align-items:stretch;
}
body.exemple5 .hw-price.is-feat{
  background:#fff;border:2px solid var(--g);
  box-shadow:0 30px 70px -46px rgba(11,95,255,.6);
}
body.exemple5 .hw-price.is-feat h3{color:var(--ink)}
body.exemple5 .hw-price.is-feat .hw-ticks li{color:#3d4149}
body.exemple5 .hw-price.is-feat .hw-ticks .tk{background:rgba(11,95,255,.14);color:var(--g)}
body.exemple5 .hw-price.is-feat .hw-price-nums{border-color:var(--line)}

/* pastille "Offre de lancement" centree en haut */
body.exemple5 .hw-price-flag{
  left:50%;transform:translateX(-50%);top:-14px;white-space:nowrap;
  background:linear-gradient(120deg,#3B82FF,#0847D6);color:#fff;
  box-shadow:0 8px 20px -8px rgba(11,95,255,.8);
}

/* icone ronde */
.hw-price-ic{
  width:64px;height:64px;border-radius:50%;margin:4px auto 16px;
  display:grid;place-items:center;
  background:rgba(11,95,255,.1);color:var(--g);
}
.hw-price-ic svg{width:28px;height:28px}

body.exemple5 .hw-price h3{font-size:22px;margin:0 0 5px}
body.exemple5 .hw-price-sub{margin:0;font-size:14.5px;font-weight:600;color:var(--g)}

/* bloc prix */
body.exemple5 .hw-price-nums{
  display:block;margin:20px 0 0;padding:20px 0 22px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.hw-price-big{display:flex;align-items:flex-start;justify-content:center;gap:2px;line-height:1}
.hw-price-big b{font-size:52px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.hw-price-big .cur{font-size:22px;font-weight:700;color:var(--ink);margin-top:6px}
.hw-price-per{font-size:13.5px;color:var(--mut);margin-top:6px}
body.exemple5 .hw-price-promo{
  display:block;margin:12px auto 0;max-width:290px;padding:9px 12px;
  border-radius:10px;background:rgba(11,95,255,.09);border:1px solid rgba(11,95,255,.28);
  color:#0847D6;font-size:12.5px;font-weight:600;line-height:1.45;text-align:center;
}
.hw-price-setup-pill{
  margin:14px 0 0;padding:11px 14px;border-radius:10px;background:var(--bg);
  font-size:13px;font-weight:600;color:var(--ink);
}

body.exemple5 .hw-price-inherit{margin:18px 0 0;font-size:13px;font-weight:700;color:var(--g);text-align:left}

/* liste : alignee a gauche dans une carte centree */
body.exemple5 .hw-price-list{margin-top:18px;text-align:left;flex:1}
body.exemple5 .hw-price-list li.is-extra[hidden]{display:none}

/* bouton "Voir le detail" */
.hw-price-more{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  margin-top:18px;padding:11px;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--mut);font-size:13.5px;font-weight:600;
  transition:border-color .2s,color .2s,background .2s;
}
.hw-price-more:hover{border-color:var(--g);color:var(--g);background:rgba(11,95,255,.04)}
.hw-price-more .ic{display:inline-flex;transition:transform .3s}
.hw-price-more .ic svg{width:15px;height:15px}
.hw-price-more[aria-expanded="true"] .ic{transform:rotate(180deg)}

body.exemple5 .hw-price-cta{margin-top:16px}