/* ViteSite 2.2.0 — correctif responsive, navigation et finition élégante */
:root{
  --vs-ink:#352b39;
  --vs-ink-2:#514255;
  --vs-violet:#725d75;
  --vs-lilac:#d9cddd;
  --vs-champagne:#c9ab78;
  --vs-coral:#b86f62;
  --vs-sage:#87998d;
  --vs-sage-soft:#e8eee9;
  --vs-blush:#f0dfdb;
  --vs-cream:#fcf9f4;
  --vs-paper:#fffefa;
  --vs-mist:#f4efec;
  --vs-line:#e0d6d2;
  --vs-text:#352f37;
  --vs-muted:#6a626c;
  --vs-shadow:0 24px 68px rgba(59,43,57,.12)
}

html,body{max-width:100%;overflow-x:hidden}
html{scroll-padding-top:124px}
[id]{scroll-margin-top:0}
body{position:relative}
img,svg,video,iframe{max-width:100%}
.wrap{max-width:calc(100% - 28px)}
.vsHero,.vsSection,.vsDomainSearch,.vsHow,.vsTrust,.vsClosing,.v12Footer{overflow:hidden}

/* En-tête : logo réellement visible et menu mobile ancré à droite. */
.header.premiumHeader.v12Header{min-height:88px;grid-template-columns:minmax(240px,300px) 1fr auto;padding-block:9px}
.header .brand{width:min(300px,27vw);height:70px;min-width:225px;display:flex;align-items:center}
.header .brand img.vsBrandLogo{width:100%;height:100%;max-height:70px;object-fit:contain;object-position:left center}
.header .brand:not(:has(.vsBrandLogo)):before{height:70px}
.mobileMenu.v12Menu{position:static}
.mobileMenu.v12Menu summary{display:grid;width:50px;height:50px;place-items:center;padding:0;cursor:pointer}
.mobileMenu .burger4{display:grid;gap:4px;place-items:center}
.mobileMenu .burger4 i{display:block!important;width:22px!important;height:2px!important;margin:0!important;border:0!important;border-radius:999px;background:var(--vs-ink)!important}
.mobileMenu.v12Menu nav{z-index:130}

/* Courbes fines : décor léger, sans gêner la lecture. */
.vsHero:before{right:-145px;border-color:rgba(135,153,141,.28);border-radius:43% 57% 63% 37%/51% 44% 56% 49%}
.vsHero:after{right:-35px;background:linear-gradient(145deg,rgba(240,223,219,.72),rgba(232,238,233,.5));border-radius:42% 58% 56% 44%/61% 43% 57% 39%}
.vsSection,.vsHow,.vsTrust,.vsClosing,.vsDomainSearch{position:relative}
.vsSection:before,.vsHow:before,.vsTrust:before,.vsClosing:before,.vsDomainSearch:before{content:"";position:absolute;z-index:0;width:360px;height:150px;border:1px solid rgba(114,93,117,.12);border-radius:50%;pointer-events:none}
.vsSection:before{top:-105px;left:-90px;transform:rotate(-8deg)}
.vsHow:before{right:-105px;bottom:-100px;transform:rotate(16deg)}
.vsTrust:before{top:-98px;right:12%;transform:rotate(-7deg)}
.vsClosing:before{left:-100px;bottom:-105px;transform:rotate(13deg)}
.vsDomainSearch:before{right:-80px;top:-90px;transform:rotate(9deg)}
.vsSection>.wrap,.vsHow>.wrap,.vsTrust>.wrap,.vsClosing>.wrap,.vsDomainSearch>.wrap{position:relative;z-index:1}

/* Accroche et maquette : aucun texte sous la pastille de prix. */
.vsHero h1{max-width:830px;font-size:clamp(3.55rem,6.4vw,6.75rem);line-height:.94}
.vsShowcase{display:grid;align-content:center;min-width:0}
.vsBrowser{position:relative;inset:auto;min-width:0;margin:30px 28px 20px 0;transform:rotate(1deg)}
.vsBrowserBody{padding:48px 175px 48px 37px}
.vsPriceMedallion{right:0;bottom:24px}

/* Recherche du nom de domaine directement sur l'accueil. */
.vsDomainSearch{padding:38px 0 58px}
.vsDomainSearchCard{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);gap:clamp(28px,5vw,68px);align-items:center;padding:clamp(30px,4vw,52px);border:1px solid var(--vs-line);border-radius:32px 86px 32px 32px;background:linear-gradient(135deg,rgba(255,254,250,.98),rgba(240,223,219,.52));box-shadow:var(--vs-shadow)}
.vsDomainSearch h2{max-width:650px;margin:0;color:var(--vs-ink);font:500 clamp(2.25rem,4.6vw,4.5rem)/.98 var(--vs-serif);letter-spacing:-.045em}
.vsDomainSearch p{margin:16px 0 0}
.vsHomeDomainForm{display:grid;gap:9px;padding:22px;border:1px solid rgba(114,93,117,.14);border-radius:22px 48px 22px 22px;background:rgba(255,254,250,.9)}
.vsHomeDomainForm label{color:var(--vs-ink);font-size:.78rem;font-weight:850}
.vsHomeDomainForm>div{display:grid;grid-template-columns:minmax(0,1fr) auto}
.vsHomeDomainForm input{min-width:0;height:54px;padding:0 15px;border:1px solid #cfc3cb;border-radius:14px 0 0 14px;background:#fff;color:var(--vs-text);font:inherit}
.vsHomeDomainForm button{min-height:54px;padding:0 19px;border:0;border-radius:0 14px 14px 0;background:var(--vs-ink);color:#fff;font-weight:850;cursor:pointer}
.vsHomeDomainForm #homeDomainResult{min-height:26px;margin:2px 0 0;font-weight:750}
.vsHomeDomainForm #homeDomainResult.good{color:#17663f}
.vsHomeDomainForm #homeDomainResult.bad{color:#b12e38}
.homeDomainOrder{justify-self:start;margin-top:3px;padding:13px 20px}

/* Dix marques = deux rangées complètes et régulières. */
.vsTrustInner{align-items:start}
.vsBrandRow{display:grid!important;grid-template-columns:repeat(5,minmax(64px,1fr));gap:12px;width:100%}
.vsBrandChip{display:grid!important;min-width:0;min-height:72px;place-items:center;border:1px solid var(--vs-line);border-radius:18px;background:#fff;box-shadow:0 10px 24px rgba(59,43,57,.045)}
.vsBrandChip img{width:auto!important;height:30px!important;max-width:54px!important;object-fit:contain}

/* Contraste du dernier appel à l'action. */
.vsClosingCard{background:radial-gradient(circle at 86% 16%,rgba(201,171,120,.3),transparent 18rem),linear-gradient(135deg,#46394a,#735f73)}
.vsClosingCard h2,.vsClosingCard p{color:#fff}
.vsClosingCard .button{background:#fff;color:var(--vs-ink)!important;box-shadow:0 14px 34px rgba(34,25,34,.24)}

/* Bas de page : le nom du site et la version ne touchent plus le bord. */
.v12Footer .footerBottom{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:26px;padding-top:22px;padding-bottom:28px;border-top:1px solid rgba(255,255,255,.16)}
.v12Footer>.siteVersion,.v12Footer p.siteVersion{display:block;margin-top:24px!important;margin-bottom:0!important;padding-top:20px!important;padding-bottom:30px!important;border-top:1px solid rgba(255,255,255,.16);line-height:1.5}

/* Pages internes : neutralise aussi tout élément qui pouvait élargir l'écran. */
.infoPage,.infoHero,.contentSection,.projectGrid,.gallery-grid,.demoCards,.relatedPages,.finalCta{min-width:0;max-width:100%}
.contentSection,.infoHero{overflow:hidden}

@media(max-width:1050px){
  .header.premiumHeader.v12Header{grid-template-columns:minmax(220px,1fr) auto}
  .header .brand{width:270px}
}

@media(max-width:780px){
  html{scroll-padding-top:116px}
  [id]{scroll-margin-top:0}
  .wrap,.gallery-grid,.infoPage.wrap{width:calc(100% - 28px);max-width:calc(100% - 28px)}
  .topbar.v12Topbar{min-height:44px;padding:9px 12px;text-align:center}
  .header.premiumHeader.v12Header{position:sticky;top:0;display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:10px;min-height:86px;padding:8px 14px;background:#fffefa;backdrop-filter:none!important}
  .header .brand{width:min(270px,calc(100vw - 92px));height:68px;min-width:0;margin:0}
  .header .brand img.vsBrandLogo{height:68px;max-height:68px}
  .header .brand:not(:has(.vsBrandLogo)):before{width:100%;height:68px;background-size:contain}
  .headerActions{display:none!important}
  .mobileMenu.v12Menu{display:block;justify-self:end;align-self:center}
  .mobileMenu.v12Menu summary{position:relative;top:auto;right:auto;width:50px;height:50px;border-radius:18px;background:#fff;color:var(--vs-ink);box-shadow:0 8px 22px rgba(59,43,57,.09)}
  .mobileMenu.v12Menu nav{position:fixed!important;top:86px!important;right:0!important;bottom:0!important;left:0!important;width:100vw!important;max-width:100vw!important;max-height:calc(100dvh - 86px)!important;margin:0!important;padding:18px 18px 38px!important;overflow-x:hidden!important;overflow-y:auto!important;border:0!important;border-top:1px solid var(--vs-line)!important;border-radius:0!important;background:#fffefa!important;box-shadow:0 20px 50px rgba(59,43,57,.18)!important}
  .vsHome .mobileMenu.v12Menu nav{top:130px!important;max-height:calc(100dvh - 130px)!important}
  .mobileMenu .menuGroup{min-width:0;padding:13px 0}
  .mobileMenu .menuGroup a{display:block;padding:11px 5px;overflow-wrap:anywhere}
  body:has(.mobileMenu[open]){overflow:hidden}
  .vsHero{padding:46px 0 34px}
  .vsHero:before{right:-260px;width:560px;height:560px}
  .vsHero:after{right:-190px;width:430px;height:430px}
  .vsHero h1{font-size:clamp(3rem,13vw,4.45rem);line-height:.96;letter-spacing:-.055em}
  .vsHero .vsLead{font-size:1.03rem;line-height:1.55}
  .vsShowcase{display:grid;min-height:0;margin-top:22px}
  .vsBrowser{position:relative;inset:auto;width:100%;margin:0;transform:none;border-radius:26px 26px 56px 26px}
  .vsBrowserBody{min-height:320px;padding:34px 24px}
  .vsBrowserBody strong{max-width:100%;padding-right:0;font-size:2.55rem}
  .vsBrowserBody span{max-width:100%}
  .vsPriceMedallion{position:relative;right:auto;bottom:auto;justify-self:end;width:auto;height:auto;margin:14px 7px 0;padding:12px 18px;border:0;border-radius:999px;grid-template-columns:auto auto auto;gap:7px;transform:none}
  .vsPriceMedallion b{font-size:1.55rem}
  .vsDomainSearch{padding:26px 0 46px}
  .vsDomainSearchCard{grid-template-columns:1fr;gap:24px;padding:26px 20px;border-radius:26px 58px 26px 26px}
  .vsDomainSearch h2{font-size:2.55rem}
  .vsHomeDomainForm{padding:17px}
  .vsBrandRow{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
  .vsBrandChip{min-height:58px;border-radius:13px}
  .vsBrandChip img{height:25px!important;max-width:38px!important}
  .vsClosingCard{padding:35px 24px}
  .vsClosingCard h2{font-size:2.65rem;line-height:1}
  .v12Footer .footerBottom{display:grid;justify-content:start;justify-items:start;align-items:start;gap:7px;margin-top:24px;padding-top:20px;padding-bottom:34px}
  .v12Footer>.siteVersion,.v12Footer p.siteVersion{margin-top:22px!important;padding-top:18px!important;padding-bottom:36px!important}
}

@media(max-width:430px){
  .header .brand{width:min(270px,calc(100vw - 88px))}
  .vsHeroActions{grid-template-columns:1fr}
  .vsHeroActions .button{width:100%}
  .vsHomeDomainForm>div{grid-template-columns:1fr}
  .vsHomeDomainForm input{border-radius:13px 13px 0 0}
  .vsHomeDomainForm button{border-radius:0 0 13px 13px}
  .vsBrandRow{gap:5px}
  .vsBrandChip{min-height:54px}
  .vsBrandChip img{height:23px!important;max-width:34px!important}
}

@supports not selector(:has(*)){
  .header .brand:before{height:68px}
}