@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../assets/fonts/manrope-variable.woff2") format("woff2");
}

:root{
  --ink:#0a0b0f;
  --ink-2:#14161c;
  --text:#171a21;
  --muted:#586174;
  --line:#e3e7ee;
  --soft:#f5f7fa;
  --white:#fff;
  --accent:#2563eb;
  --accent-d:#1d4ed8;
  --accent-l:#eaf1ff;
  --ok:#15803d;
  --r:14px;
  --wrap:1200px;
  --pad:24px;
  --header-h:72px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 10px 28px rgba(16,24,40,.07);
}

@media (min-width:1600px){
  :root{ --wrap:1320px; --pad:32px; }
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

body.menu-open{ overflow:hidden; }

img,svg{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; }

h1,h2,h3,h4{ margin:0; line-height:1.15; letter-spacing:-.025em; font-weight:800; color:var(--ink); text-wrap:balance; }

p{ margin:0; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }

.skip{
  position:absolute;
  left:12px;
  top:-60px;
  z-index:200;
  padding:10px 16px;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  text-decoration:none;
}
.skip:focus{ top:12px; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

.ico{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ico--fill{ fill:currentColor; stroke:none; }

/* ───────── Boutons ───────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  padding:0 22px;
  border-radius:10px;
  border:1.5px solid transparent;
  font:inherit;
  font-size:15.5px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn .ico{ width:18px; height:18px; }
.btn:active{ transform:translateY(1px); }

.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-d); }

.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#262a33; }

.btn--outline{ background:transparent; color:var(--ink); border-color:#c9cfda; }
.btn--outline:hover{ border-color:var(--ink); }

.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ background:#eef1f6; }

.btn--line-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.32); }
.btn--line-light:hover{ border-color:#fff; }

.btn--lg{ min-height:54px; padding:0 28px; font-size:16px; }
.btn--sm{ min-height:40px; padding:0 16px; font-size:14.5px; }
.btn--block{ width:100%; }

/* ───────── En-tête noir ───────── */
.header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--ink);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow .2s ease;
}
.header.scrolled{ box-shadow:0 8px 28px rgba(0,0,0,.28); }

.header__in{
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.logo{ display:flex; align-items:center; flex:none; }
.logo img{ height:34px; width:auto; }

.nav{ display:none; }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:2px; }
.nav a{
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 13px;
  border-radius:8px;
  color:#d7dbe3;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:color .15s ease, background .15s ease;
}
.nav a:hover,
.nav a[aria-current="page"]{ color:#fff; background:rgba(255,255,255,.08); }
.nav .chev{ width:14px; height:14px; stroke-width:2.4; opacity:.7; }

.has-menu{ position:relative; }
.has-menu::after{ content:""; position:absolute; left:0; right:0; top:100%; height:14px; }

.menu{
  position:absolute;
  top:calc(100% + 10px);
  left:-10px;
  width:380px;
  display:none;
  padding:10px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.has-menu:hover .menu,
.has-menu:focus-within .menu{ display:grid; gap:2px; }

.menu a{
  align-items:flex-start;
  gap:14px;
  padding:12px;
  border-radius:10px;
  color:var(--text);
  background:transparent;
}
.menu a:hover{ background:var(--soft); color:var(--text); }
.menu strong{ display:block; font-size:15px; color:var(--ink); line-height:1.3; }
.menu span.sub{ display:block; margin-top:2px; font-size:13.5px; font-weight:500; color:var(--muted); line-height:1.4; }
.menu .mi{
  width:38px; height:38px; flex:none; border-radius:10px;
  display:grid; place-items:center;
  background:var(--accent-l); color:var(--accent);
}
.menu .mi .ico{ width:20px; height:20px; }
.menu--wide{ width:440px; grid-template-columns:1fr; }

.header__actions{ display:flex; align-items:center; gap:10px; }
.header__phone{
  display:none;
  align-items:center;
  gap:9px;
  padding:0 6px;
  color:#fff;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.header__phone .ico{ width:18px; height:18px; color:#7aa2ff; }
.header__phone:hover{ color:#bcd0ff; }
.header__cta{ display:none; }

.burger{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:#fff;
  border:0;
  cursor:pointer;
}
.burger .ico{ width:24px; height:24px; }

@media (min-width:1100px){
  .nav{ display:block; }
  .burger{ display:none; }
  .header__cta{ display:inline-flex; }
}
@media (min-width:1280px){
  .header__phone{ display:inline-flex; }
}

/* Menu mobile */
.mmenu{
  position:fixed;
  inset:0;
  z-index:150;
  display:none;
  flex-direction:column;
  background:var(--ink);
  color:#fff;
  overflow-y:auto;
}
.mmenu.is-open{ display:flex; }
.mmenu__top{
  height:var(--header-h);
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--pad);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mmenu__body{ padding:12px var(--pad) 32px; display:flex; flex-direction:column; }
.mmenu__body > a,
.mmenu__body summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:17px 4px;
  border-bottom:1px solid rgba(255,255,255,.09);
  color:#fff;
  font-size:19px;
  font-weight:700;
  text-decoration:none;
  list-style:none;
  cursor:pointer;
}
.mmenu__body summary::-webkit-details-marker{ display:none; }
.mmenu__body summary .ico{ width:18px; height:18px; transition:transform .2s ease; }
.mmenu__body details[open] summary .ico{ transform:rotate(180deg); }
.mmenu__sub{ display:flex; flex-direction:column; padding:6px 0 10px 14px; border-bottom:1px solid rgba(255,255,255,.09); }
.mmenu__sub a{ padding:11px 4px; color:#c9cfdb; font-size:16.5px; font-weight:600; text-decoration:none; }
.mmenu__cta{ margin-top:24px; display:grid; gap:12px; }

/* ───────── Sections ───────── */
.sec{ padding:88px 0; }
.sec--soft{ background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sec--tight{ padding:56px 0; }
[id]{ scroll-margin-top:calc(var(--header-h) + 18px); }

.sec__head{ max-width:760px; margin:0 0 44px; }
.sec__head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{
  display:block;
  margin-bottom:12px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.sec__head h2{ font-size:clamp(28px,3.6vw,42px); }
.lead{ font-size:19px; line-height:1.6; color:var(--muted); }
.sec__head .lead{ margin-top:16px; }

.grid{ display:grid; gap:22px; }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1000px){
  .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px){
  .grid--4,.grid--3,.grid--2{ grid-template-columns:1fr; }
  .sec{ padding:64px 0; }
}

/* ───────── Hero accueil ───────── */
.hero{
  padding:72px 0 88px;
  background:linear-gradient(180deg,#fff 0%, #f4f7fb 100%);
  border-bottom:1px solid var(--line);
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:64px;
  align-items:center;
}
.hero .eyebrow{ margin-bottom:18px; }
.hero h1{ font-size:clamp(36px,5.3vw,62px); line-height:1.03; letter-spacing:-.04em; }
.hero .lead{ margin-top:22px; max-width:580px; }
.hero__cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }

.ticks{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:11px; }
.ticks li{ display:flex; align-items:flex-start; gap:10px; font-size:15.5px; font-weight:600; color:var(--text); }
.ticks .ico{ width:20px; height:20px; margin-top:2px; color:var(--ok); stroke-width:2.6; }

.photo{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(16,24,40,.18);
  aspect-ratio:4/3.4;
  background:#dfe5ee;
}
.photo img{ width:100%; height:100%; object-fit:cover; }
.photo__tag{
  position:absolute;
  left:16px;
  bottom:16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(10,11,15,.82);
  color:#fff;
  font-size:14px;
  font-weight:700;
  backdrop-filter:blur(8px);
}
.photo__tag .ico{ width:16px; height:16px; }

@media (max-width:900px){
  .hero{ padding:48px 0 60px; }
  .hero__grid{ grid-template-columns:1fr; gap:40px; }
  .photo{ aspect-ratio:16/11; }
}

/* ───────── Cartes ───────── */
.card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  text-decoration:none;
  color:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
a.card:hover{ border-color:#c3cee4; box-shadow:var(--shadow); transform:translateY(-3px); }
.card__icon{
  width:50px; height:50px;
  display:grid; place-items:center;
  border-radius:13px;
  background:var(--accent-l);
  color:var(--accent);
  margin-bottom:6px;
}
.card__icon .ico{ width:25px; height:25px; }
.card h3{ font-size:20px; }
.card p{ font-size:15.5px; line-height:1.6; color:var(--muted); }
.card__link{
  margin-top:auto;
  padding-top:8px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:15px;
  font-weight:700;
  color:var(--accent);
}
.card__link .ico{ width:17px; height:17px; transition:transform .18s ease; }
a.card:hover .card__link .ico{ transform:translateX(4px); }

.sec--soft .card{ background:#fff; }

.chips{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.chip{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.chip:hover{ border-color:#c3cee4; box-shadow:var(--shadow); transform:translateY(-2px); }
.chip .ico{ width:26px; height:26px; color:var(--accent); }
.chip small{ display:block; margin-top:1px; font-size:13.5px; font-weight:500; color:var(--muted); line-height:1.35; }
@media (max-width:1000px){ .chips{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .chips{ grid-template-columns:1fr; } }

/* Étapes */
.steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.step{ padding:28px; background:#fff; border:1px solid var(--line); border-radius:var(--r); }
.step__n{
  width:38px; height:38px;
  display:grid; place-items:center;
  margin-bottom:18px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-weight:800;
}
.step h3{ font-size:20px; margin-bottom:8px; }
.step p{ font-size:15.5px; color:var(--muted); line-height:1.6; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; } }

/* Réalisation */
.showcase{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:56px; align-items:center; }
.showcase h2{ font-size:clamp(28px,3.4vw,40px); margin-bottom:16px; }
.showcase .lead{ font-size:17.5px; }
.showcase .ticks{ margin-top:22px; }
.showcase .btn{ margin-top:28px; }

.browser{
  display:block;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 26px 60px rgba(16,24,40,.14);
  transition:transform .25s ease, box-shadow .25s ease;
}
.browser:hover{ transform:translateY(-4px); box-shadow:0 34px 70px rgba(16,24,40,.18); }
.browser__bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; background:#eef1f6; border-bottom:1px solid var(--line); }
.browser__bar i{ width:11px; height:11px; border-radius:50%; background:#cfd5df; }
.browser__bar i:nth-child(1){ background:#ff6159; }
.browser__bar i:nth-child(2){ background:#ffbd2e; }
.browser__bar i:nth-child(3){ background:#28c840; }
.browser__url{ margin-left:10px; padding:5px 14px; border-radius:999px; background:#fff; font-size:13px; font-weight:600; color:var(--muted); }
.browser__screen{ padding:30px 32px 38px; background:#0d1017; color:#fff; min-height:300px; }
.browser__nav{ display:flex; align-items:center; gap:20px; margin-bottom:46px; font-size:12.5px; color:#9aa3b5; font-weight:600; }
.browser__nav img{ height:20px; width:auto; margin-right:auto; }
.browser__tag{ display:inline-block; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.1); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#c5cbd8; }
.browser__title{ margin:16px 0 26px; font-size:clamp(26px,3vw,38px); line-height:1.08; color:#fff; }
.browser__btns{ display:flex; gap:10px; flex-wrap:wrap; }
.browser__btns span{ padding:10px 18px; border-radius:8px; border:1px solid rgba(255,255,255,.25); font-size:13px; font-weight:700; }
.browser__btns span:first-child{ background:#fff; color:#0d1017; border-color:#fff; }
@media (max-width:900px){ .showcase{ grid-template-columns:1fr; gap:36px; } }

/* Tarifs */
.pgroup + .pgroup{ margin-top:56px; }
.pgroup__head{ display:flex; align-items:baseline; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.pgroup__head h3{ font-size:24px; }
.pgroup__head span{ font-size:14.5px; color:var(--muted); font-weight:600; }

.offer{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
}
.offer__name{ font-size:19px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.offer__price{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.offer__price small{ font-size:14px; font-weight:600; color:var(--muted); }
.offer__price b{ font-size:34px; line-height:1; letter-spacing:-.03em; color:var(--ink); }
.offer p{ font-size:15.5px; color:var(--muted); line-height:1.6; }
.offer .ticks{ margin:4px 0 6px; gap:9px; }
.offer .ticks li{ font-size:15px; font-weight:500; }
.offer .btn{ margin-top:auto; }

/* Zones */
.zone{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.zone:hover{ box-shadow:var(--shadow); transform:translateY(-3px); border-color:#c3cee4; }
.zone img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.zone__body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.zone h3{ font-size:19px; }
.zone p{ font-size:15px; color:var(--muted); line-height:1.55; }

.link-cloud{ margin-top:30px; display:flex; flex-wrap:wrap; gap:10px; }
.link-cloud a{
  padding:9px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-size:14.5px;
  font-weight:700;
  color:var(--text);
  text-decoration:none;
}
.link-cloud a:hover{ border-color:var(--accent); color:var(--accent); }

/* FAQ */
.faq{ max-width:860px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:first-child{ border-top:1px solid var(--line); }
.faq summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 4px;
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-.01em;
  cursor:pointer;
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"";
  flex:none;
  width:22px; height:22px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat;
  transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details > div{ padding:0 4px 24px; max-width:760px; color:var(--muted); font-size:16.5px; line-height:1.7; }
.faq details > div p + p{ margin-top:12px; }

/* Bandeau d'appel */
.cta{ padding:72px 0 88px; }
.cta__box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:52px 56px;
  border-radius:22px;
  background:var(--ink);
  color:#fff;
}
.cta__box h2{ color:#fff; font-size:clamp(26px,3.2vw,38px); }
.cta__box p{ margin-top:10px; color:#b9c0cf; font-size:17.5px; max-width:560px; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:12px; flex:none; }
@media (max-width:900px){
  .cta__box{ flex-direction:column; align-items:flex-start; padding:36px 28px; }
  .cta{ padding:48px 0 64px; }
}

/* ───────── Pages intérieures ───────── */
.phero{ padding:44px 0 60px; background:var(--soft); border-bottom:1px solid var(--line); }
.phero__grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center; }
.phero--single .phero__grid{ grid-template-columns:1fr; }
.phero h1{ font-size:clamp(32px,4.6vw,52px); line-height:1.06; letter-spacing:-.035em; }
.phero .lead{ margin-top:20px; max-width:640px; }
.phero .hero__cta{ margin-top:28px; }
.phero .ticks{ margin-top:24px; }

.crumbs{ margin-bottom:26px; font-size:14px; color:var(--muted); font-weight:600; }
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.crumbs li{ display:flex; align-items:center; gap:8px; }
.crumbs li + li::before{ content:"/"; color:#b3bac7; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:var(--accent); }

.aside{
  padding:28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.aside h2{ font-size:19px; margin-bottom:14px; }
.aside .ticks{ margin:0 0 20px; gap:10px; }
.aside .ticks li{ font-size:15px; font-weight:600; }
.aside .btn + .btn{ margin-top:10px; }
.aside .photo{ margin:-28px -28px 22px; border-radius:18px 18px 0 0; box-shadow:none; aspect-ratio:16/10; }
@media (max-width:900px){ .phero__grid{ grid-template-columns:1fr; gap:34px; } }

.prose{ max-width:780px; }
.prose h2{ margin:52px 0 16px; font-size:clamp(26px,3vw,34px); }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin:34px 0 10px; font-size:22px; }
.prose p{ margin:0 0 18px; font-size:17.5px; line-height:1.75; color:#2d3441; }
.prose ul,.prose ol{ margin:0 0 22px; padding-left:22px; font-size:17.5px; line-height:1.75; color:#2d3441; }
.prose li{ margin-bottom:8px; }
.prose a{ color:var(--accent); font-weight:600; text-underline-offset:3px; }
.prose a:hover{ color:var(--accent-d); }
.prose strong{ color:var(--ink); }
.callout{ margin:28px 0; padding:22px 26px; border-left:4px solid var(--accent); background:var(--accent-l); border-radius:0 12px 12px 0; }
.callout p{ margin:0; font-size:16.5px; }
.callout p + p{ margin-top:10px; }

.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:64px; align-items:start; }
.split__aside{ position:sticky; top:calc(var(--header-h) + 24px); }
@media (max-width:1000px){ .split{ grid-template-columns:1fr; gap:40px; } .split__aside{ position:static; } }

.compare{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff; }
.compare th,.compare td{ padding:16px 20px; text-align:left; font-size:15.5px; vertical-align:top; border-bottom:1px solid var(--line); }
.compare thead th{ background:var(--soft); font-size:16px; color:var(--ink); }
.compare tr:last-child td{ border-bottom:0; }
.compare td:first-child{ font-weight:700; color:var(--ink); width:28%; }
@media (max-width:720px){ .compare{ display:block; overflow-x:auto; } }

/* Blog */
.post{ display:flex; flex-direction:column; gap:12px; padding:30px; background:#fff; border:1px solid var(--line); border-radius:var(--r); text-decoration:none; color:inherit; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.post:hover{ box-shadow:var(--shadow); transform:translateY(-3px); border-color:#c3cee4; }
.post time,.meta{ font-size:13.5px; font-weight:700; color:var(--muted); letter-spacing:.02em; }
.post h2,.post h3{ font-size:22px; line-height:1.25; }
.post p{ font-size:15.5px; color:var(--muted); }
.meta{ margin-top:18px; display:flex; gap:16px; flex-wrap:wrap; }

/* ───────── Contact ───────── */
.contact{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:start; }
@media (max-width:960px){ .contact{ grid-template-columns:1fr; gap:36px; } }

.info{ display:grid; gap:14px; margin-top:30px; }
.info a,.info div.row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  text-decoration:none;
  color:var(--ink);
}
.info a:hover{ border-color:#c3cee4; box-shadow:var(--shadow); }
.info .ico{ width:24px; height:24px; color:var(--accent); }
.info b{ display:block; font-size:17px; line-height:1.3; }
.info small{ display:block; font-size:13.5px; font-weight:500; color:var(--muted); }

.contactFormCard{
  display:grid;
  gap:14px;
  padding:34px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
}
.contactFormCard h2{ font-size:24px; margin-bottom:2px; }
.formGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:620px){ .formGrid{ grid-template-columns:1fr; } .contactFormCard{ padding:24px; } }
.formGroup{ display:flex; flex-direction:column; gap:7px; position:relative; }
.formGroup label{ font-size:14px; font-weight:700; color:var(--ink); }
.required{ color:#dc2626; }
.honeypot{ position:absolute; left:-5000px; width:1px; height:1px; opacity:0; pointer-events:none; }

.contactFormCard input,
.contactFormCard textarea{
  width:100%;
  min-height:48px;
  padding:11px 14px;
  border:1.5px solid #d3d9e3;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:16px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.contactFormCard textarea{ min-height:130px; resize:vertical; }
.contactFormCard input::placeholder,
.contactFormCard textarea::placeholder{ color:#68717f; }
.contactFormCard input:focus,
.contactFormCard textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(37,99,235,.14); }

.customSelect{ position:relative; }
.customSelect select.customSelectNative{
  position:absolute !important; top:0; left:0;
  width:1px !important; height:1px !important; min-height:0 !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  overflow:hidden; clip:rect(0,0,0,0); opacity:0; pointer-events:none;
}
.customSelectTrigger{
  width:100%;
  min-height:48px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 14px;
  border:1.5px solid #d3d9e3;
  border-radius:10px;
  background:#fff;
  color:#68717f;
  font:inherit; font-size:16px;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.customSelectTrigger.hasValue{ color:var(--ink); }
.customSelectTrigger:hover{ border-color:#9fb3da; }
.customSelectTrigger[aria-expanded="true"]{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(37,99,235,.14); }
.customSelectChevron{ flex:none; transition:transform .2s ease; }
.customSelectTrigger[aria-expanded="true"] .customSelectChevron{ transform:rotate(180deg); }
.customSelectList{
  position:fixed; z-index:9999;
  list-style:none; margin:0; padding:6px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 20px 45px rgba(16,24,40,.18);
  max-height:260px; overflow-y:auto;
}
.customSelectOption{ padding:11px 12px; border-radius:8px; font-size:15px; color:var(--text); cursor:pointer; }
.customSelectOption:hover,
.customSelectOption.is-active{ background:var(--accent-l); color:var(--accent-d); font-weight:600; }

.formError{ min-height:18px; font-size:13px; font-weight:600; line-height:1.4; color:#dc2626; }
.formCounter{ font-size:12.5px; color:#68717f; text-align:right; }
.antiBot{ padding:14px 16px; border:1px dashed #cbd3e0; border-radius:12px; background:var(--soft); }
.formFooter{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.formStatus{ font-size:14px; min-height:20px; font-weight:600; }
.formHint{ width:100%; font-size:13px; color:var(--muted); }

/* ───────── Pages légales ───────── */
.legalDoc{ max-width:860px; }
.legalDoc article{ padding:28px 0; border-bottom:1px solid var(--line); }
.legalDoc article:first-child{ padding-top:0; }
.legalDoc h2{ margin-bottom:12px; font-size:22px; }
.legalDoc h3{ margin:18px 0 8px; font-size:16.5px; color:var(--ink); }
.legalDoc p{ margin:0 0 12px; font-size:16px; line-height:1.75; color:#2d3441; }
.legalDoc ul{ margin:0 0 14px; padding-left:22px; font-size:16px; line-height:1.75; color:#2d3441; }
.legalDoc a{ color:var(--accent); font-weight:600; }
.legalDoc code{ padding:2px 8px; border-radius:6px; background:var(--soft); font-size:14px; }

.cookieTable{ margin:18px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:15px; }
.cookieRow{ display:grid; grid-template-columns:1.1fr 2fr 1fr 1.2fr; gap:16px; padding:14px 18px; border-top:1px solid var(--line); line-height:1.55; }
.cookieRow:first-child{ border-top:0; }
.cookieRowHead{ background:var(--soft); font-weight:800; color:var(--ink); }
@media (max-width:760px){ .cookieRow{ grid-template-columns:1fr; gap:6px; } .cookieRowHead{ display:none; } }

/* Merci */
.thanks{ min-height:58vh; display:flex; align-items:center; padding:80px 0; }
.thanks__card{ max-width:760px; margin:0 auto; padding:56px 48px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); }
.thanks__card .card__icon{ margin:0 auto 22px; width:64px; height:64px; border-radius:50%; background:#e7f6ec; color:var(--ok); }
.thanks__card .card__icon .ico{ width:32px; height:32px; }
.thanks__card h1{ font-size:clamp(28px,4vw,40px); }
.thanks__card p{ margin:16px auto 0; max-width:520px; color:var(--muted); }
.thanks__card .hero__cta{ justify-content:center; }

/* ───────── Pied de page noir ───────── */
.footer{ background:var(--ink); color:#aab1c0; padding:72px 0 0; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; padding-bottom:56px; }
.footer .logo img{ height:36px; }
.footer__about{ margin:20px 0 22px; max-width:340px; font-size:15px; line-height:1.7; color:#9aa2b3; }
.footer__contact{ display:grid; gap:10px; }
.footer__contact a,.footer__contact span{ display:flex; align-items:center; gap:11px; font-size:15px; font-weight:600; color:#e8ebf2; text-decoration:none; }
.footer__contact .ico{ width:18px; height:18px; color:#7aa2ff; }
.footer__contact a:hover{ color:#fff; }
.footer h2{ margin:0 0 18px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#fff; font-weight:800; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer ul a{ font-size:15px; color:#aab1c0; text-decoration:none; }
.footer ul a:hover{ color:#fff; }
.socials{ display:flex; gap:10px; margin:0 0 22px; }
.socials a{ width:42px; height:42px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.08); color:#fff; }
.socials a:hover{ background:rgba(255,255,255,.16); }
.socials .ico{ width:20px; height:20px; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0 26px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 28px; font-size:14px; }
.footer__bottom nav{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.footer__bottom a{ color:#aab1c0; text-decoration:none; }
.footer__bottom a:hover{ color:#fff; }
@media (max-width:1000px){ .footer__grid{ grid-template-columns:1fr 1fr; gap:40px; } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }

/* Barre d'appel mobile */
.callbar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:90;
  display:none;
  gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,11,15,.96);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.1);
}
.callbar .btn{ flex:1; min-height:46px; padding:0 12px; }
@media (max-width:720px){
  .callbar{ display:flex; }
  body{ padding-bottom:70px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

/* ═════════ Refonte visuelle : titres, maquettes, offre unique ═════════ */
.grad{ background:linear-gradient(95deg,#2563eb 0%,#06b6d4 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero h1{ font-size:clamp(40px,6vw,76px); line-height:1; letter-spacing:-.045em; }
.hero .lead{ font-size:20px; max-width:520px; }
.hero{ padding:64px 0 72px; background:linear-gradient(180deg,#fff 0%,#f3f6fb 100%); }
.phero h1{ font-size:clamp(34px,5vw,60px); line-height:1.02; letter-spacing:-.04em; }
.phero .lead{ font-size:19px; max-width:520px; }
.sec__head h2{ font-size:clamp(30px,4vw,48px); letter-spacing:-.035em; }
.sec__head{ margin-bottom:40px; }

/* maquette (unités cqw : tout se met à l'échelle avec le conteneur) */
.mock{ container-type:inline-size; position:relative; width:100%; aspect-ratio:1.12/1; }
.mock__bg{ position:absolute; inset:9% 0 0 9%; border-radius:4cqw; background:linear-gradient(140deg,#e6efff 0%,#f1ecff 55%,#e4f8f3 100%); }
.win{ position:absolute; left:0; top:6%; width:86%; background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:2.2cqw; box-shadow:0 3cqw 7cqw rgba(15,23,42,.2); overflow:hidden; }
.win__bar{ display:flex; align-items:center; gap:.9cqw; padding:1.5cqw 2.2cqw; background:#f1f4f9; }
.win__bar i{ width:1.3cqw; height:1.3cqw; border-radius:50%; background:#cfd6e2; }
.win__url{ margin-left:1.5cqw; flex:1; max-width:44%; padding:.5cqw 2cqw; border-radius:99px; background:#fff; color:#8089a0; font-size:1.5cqw; font-weight:600; }
.site{ padding:2.4cqw 3.2cqw 3.2cqw; color:#182033; font-size:1.5cqw; }
.site__nav{ display:flex; align-items:center; gap:2.4cqw; font-size:1.5cqw; font-weight:600; color:#6b7590; }
.site__logo{ margin-right:auto; font-size:2cqw; font-weight:800; color:var(--a); letter-spacing:-.02em; }
.site__btn{ padding:.8cqw 1.9cqw; border-radius:.9cqw; background:var(--a); color:#fff; font-style:normal; font-weight:700; }
.site__hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:3cqw; align-items:center; margin-top:3.6cqw; }
.site small{ display:inline-block; padding:.5cqw 1.4cqw; border-radius:99px; background:color-mix(in srgb,var(--a) 12%,#fff); color:var(--a); font-size:1.25cqw; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.site__h{ margin:1.3cqw 0 1cqw; font-size:4.3cqw; line-height:1.04; letter-spacing:-.035em; color:#0d1424; text-wrap:balance; }
.site__p{ margin:0 0 1.8cqw; color:#6b7590; font-size:1.55cqw; line-height:1.5; }
.site__cta{ display:inline-block; padding:1cqw 2.2cqw; border-radius:1cqw; background:var(--a); color:#fff; font-style:normal; font-weight:700; font-size:1.55cqw; }
.site__img{ aspect-ratio:1/1.02; border-radius:2.2cqw; position:relative; overflow:hidden; background:linear-gradient(155deg,var(--b) 0%,var(--a) 100%); }
.site__img::before{ content:""; position:absolute; width:55%; height:55%; right:-8%; top:-8%; border-radius:50%; background:rgba(255,255,255,.28); }
.site__img::after{ content:""; position:absolute; left:12%; bottom:12%; width:58%; height:34%; border-radius:1.6cqw; background:rgba(255,255,255,.92); box-shadow:0 1.4cqw 3cqw rgba(0,0,0,.18); }
.site__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8cqw; margin-top:3cqw; }
.site__row span{ height:7.4cqw; border-radius:1.4cqw; background:#f2f5fa; position:relative; }
.site__row span::before{ content:""; position:absolute; left:1.6cqw; top:1.6cqw; width:2.8cqw; height:2.8cqw; border-radius:.8cqw; background:color-mix(in srgb,var(--a) 22%,#fff); }
.site__row span::after{ content:""; position:absolute; left:1.6cqw; bottom:1.6cqw; width:55%; height:.9cqw; border-radius:99px; background:#d7deea; }

.phone{ position:absolute; right:2%; bottom:0; width:27%; aspect-ratio:9/18; padding:.9cqw; border-radius:4.2cqw; background:#0b0d12; box-shadow:0 3cqw 6cqw rgba(15,23,42,.38); }
.phone__in{ width:100%; height:100%; border-radius:3.4cqw; background:#fff; overflow:hidden; padding:3.4cqw 2.4cqw; position:relative; }
.phone__in::before{ content:""; position:absolute; top:1.2cqw; left:50%; width:7cqw; height:1.4cqw; border-radius:99px; background:#0b0d12; transform:translateX(-50%); }
.phone__nav{ display:flex; justify-content:space-between; align-items:center; margin-top:1.6cqw; font-size:1.5cqw; font-weight:800; color:var(--a); }
.phone__nav b{ display:block; width:2.4cqw; height:1.4cqw; border-top:.35cqw solid #9aa3b8; border-bottom:.35cqw solid #9aa3b8; position:relative; }
.phone__nav b::after{ content:""; position:absolute; left:0; right:0; top:.28cqw; height:.35cqw; background:#9aa3b8; }
.phone__h{ margin:2.4cqw 0 1.6cqw; font-size:2.6cqw; line-height:1.05; font-weight:800; letter-spacing:-.03em; color:#0d1424; }
.phone__img{ aspect-ratio:1/.9; border-radius:1.8cqw; background:linear-gradient(155deg,var(--b),var(--a)); }
.phone__cta{ margin-top:1.8cqw; padding:1.2cqw 0; border-radius:1cqw; background:var(--a); color:#fff; font-size:1.5cqw; font-weight:700; text-align:center; }
.phone__l{ margin-top:1.6cqw; height:.9cqw; border-radius:99px; background:#e2e7f0; }
.phone__l + .phone__l{ width:70%; }

.float{ position:absolute; display:flex; align-items:center; gap:1.4cqw; padding:1.5cqw 2.2cqw; border-radius:2cqw; background:#fff; border:1px solid rgba(15,23,42,.06); box-shadow:0 2.4cqw 5.6cqw rgba(15,23,42,.2); font-size:1.65cqw; line-height:1.3; color:#182033; animation:bob 7s ease-in-out infinite; }
.float b{ display:block; font-size:1.85cqw; }
.float small{ color:#6b7590; font-weight:600; }
.float .stars{ color:#f59e0b; letter-spacing:.2cqw; font-size:2cqw; }
.float--rev{ top:0; right:1%; }
.float--nfc{ left:3%; bottom:2%; padding:0; background:none; border:0; box-shadow:none; animation-delay:-3s; }
.float--nfc img{ width:21cqw; height:auto; filter:drop-shadow(0 2cqw 2.2cqw rgba(15,23,42,.3)); }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-1.1cqw); } }

/* visuel « recherche Google » */
.gv{ container-type:inline-size; position:relative; width:100%; aspect-ratio:1.12/1; }
.gv__panel{ position:absolute; inset:7% 3% 3% 3%; border-radius:2.6cqw; background:#fff; border:1px solid rgba(15,23,42,.08); box-shadow:0 3cqw 7cqw rgba(15,23,42,.2); overflow:hidden; }
.gv__bar{ display:flex; align-items:center; gap:2cqw; margin:3cqw 3cqw 0; padding:1.9cqw 2.6cqw; border-radius:99px; border:1px solid #dfe3ec; box-shadow:0 .5cqw 1.6cqw rgba(15,23,42,.08); font-size:2cqw; font-weight:600; color:#3c4658; }
.gv__bar svg{ width:2.6cqw; height:2.6cqw; color:#6b7590; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.gv__map{ position:relative; margin:2.6cqw 3cqw 0; height:25cqw; border-radius:1.8cqw; background:
  linear-gradient(115deg,transparent 46%,#fff 46% 49%,transparent 49%),
  linear-gradient(20deg,transparent 58%,#fff 58% 61%,transparent 61%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.55) 0 .5cqw,transparent .5cqw 7cqw),
  repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 .5cqw,transparent .5cqw 9cqw),
  #dbe7d3; }
.gv__pin{ position:absolute; width:4cqw; height:4cqw; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#94a3b8; box-shadow:0 .6cqw 1.2cqw rgba(0,0,0,.25); }
.gv__pin::after{ content:""; position:absolute; inset:1.2cqw; border-radius:50%; background:#fff; }
.gv__pin--main{ left:46%; top:30%; width:5.4cqw; height:5.4cqw; background:#ef4444; z-index:2; }
.gv__pin--main::after{ inset:1.6cqw; }
.gv__pin:nth-child(1){ left:18%; top:48%; }
.gv__pin:nth-child(2){ left:74%; top:24%; }
.gv__list{ margin:2.4cqw 3cqw 0; display:grid; gap:1.4cqw; }
.gv__item{ display:flex; align-items:center; justify-content:space-between; padding:1.5cqw 2.2cqw; border-radius:1.4cqw; background:#f4f6fa; font-size:1.8cqw; color:#6b7590; }
.gv__item b{ display:block; color:#182033; font-size:2cqw; }
.gv__item--top{ background:#eaf1ff; border:1px solid #bcd0ff; color:#3b4a6b; }
.gv__rate{ font-weight:800; color:#182033; white-space:nowrap; }
.gv__rate i{ font-style:normal; color:#f59e0b; }
.gv__badge{ position:absolute; right:-1%; top:0; padding:1.4cqw 2.2cqw; border-radius:2cqw; background:var(--ink); color:#fff; font-size:1.7cqw; font-weight:700; box-shadow:0 2cqw 4cqw rgba(15,23,42,.3); animation:bob 7s ease-in-out infinite; }

/* visuel vidéo */
.vv{ container-type:inline-size; position:relative; width:100%; aspect-ratio:1.12/1; }
.vv__screen{ position:absolute; left:0; right:6%; top:10%; aspect-ratio:16/10; border-radius:2.4cqw; overflow:hidden; background:linear-gradient(135deg,#0b1220 0%,#1e3a8a 55%,#0ea5e9 120%); box-shadow:0 3cqw 7cqw rgba(15,23,42,.3); }
.vv__screen::before{ content:""; position:absolute; width:60%; height:60%; right:-10%; top:-20%; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.28),transparent 65%); }
.vv__play{ position:absolute; left:50%; top:46%; width:11cqw; height:11cqw; transform:translate(-50%,-50%); border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 2cqw 4cqw rgba(0,0,0,.35); }
.vv__play::after{ content:""; margin-left:1cqw; border-left:3.4cqw solid #0b1220; border-top:2.2cqw solid transparent; border-bottom:2.2cqw solid transparent; }
.vv__tl{ position:absolute; left:3cqw; right:3cqw; bottom:3cqw; height:.9cqw; border-radius:99px; background:rgba(255,255,255,.25); }
.vv__tl::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:38%; border-radius:99px; background:#fff; }
.vv__tag{ position:absolute; top:2.6cqw; left:2.6cqw; padding:.8cqw 1.8cqw; border-radius:99px; background:rgba(255,255,255,.16); color:#fff; font-size:1.7cqw; font-weight:800; }
.vv__cap{ position:absolute; left:50%; bottom:7.4cqw; transform:translateX(-50%); padding:.8cqw 2cqw; border-radius:1cqw; background:rgba(0,0,0,.55); color:#fff; font-size:1.9cqw; font-weight:700; white-space:nowrap; }
.vv__strip{ position:absolute; left:6%; right:0; bottom:4%; display:flex; gap:1.6cqw; }
.vv__strip span{ flex:1; aspect-ratio:16/10; border-radius:1.4cqw; background:linear-gradient(135deg,#dbe6ff,#f1ecff); border:1px solid rgba(15,23,42,.06); box-shadow:0 1.4cqw 3cqw rgba(15,23,42,.14); }
.vv__strip span:nth-child(2){ background:linear-gradient(135deg,#d7f5ee,#e6f0ff); }
.vv__strip span:nth-child(3){ background:linear-gradient(135deg,#ffe8d6,#ffe1f0); }

/* visuel cartes NFC */
.nv{ container-type:inline-size; position:relative; width:100%; aspect-ratio:1.12/1; }
.nv__bg{ position:absolute; inset:9% 0 0 9%; border-radius:4cqw; background:linear-gradient(140deg,#e6efff 0%,#f1ecff 55%,#e4f8f3 100%); }
.nv img{ position:absolute; height:auto; filter:drop-shadow(0 3cqw 3cqw rgba(15,23,42,.28)); }
.nv__a{ left:9%; top:10%; width:42%; transform:rotate(-6deg); animation:bob 7s ease-in-out infinite; }
.nv__b{ right:5%; bottom:6%; width:46%; transform:rotate(5deg); animation:bob 8s ease-in-out infinite; animation-delay:-3s; }

/* vignettes des cartes de services */
.vcard{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; text-decoration:none; color:inherit; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.vcard:hover{ box-shadow:0 18px 44px rgba(16,24,40,.12); transform:translateY(-4px); border-color:#c3cee4; }
.vcard__vis{ position:relative; padding:18px 18px 0; background:linear-gradient(180deg,#f2f6fd,#fff); overflow:hidden; }
.vcard__vis .mock,.vcard__vis .gv,.vcard__vis .vv,.vcard__vis .nv{ aspect-ratio:1.5/1; }
.vcard__vis .mock__bg,.vcard__vis .nv__bg{ display:none; }
.vcard__vis .float--rev{ display:none; }
.vcard__vis .win{ width:94%; left:3%; top:5%; }
.vcard__vis .phone{ width:23%; right:3%; }
.vcard__vis .gv__panel{ inset:5% 5% -10% 5%; }
.vcard__vis .vv__screen{ left:3%; right:3%; top:6%; }
.vcard__vis .vv__strip{ display:none; }
.vcard__vis .gv__badge{ display:none; }
.vcard__vis .nv__a{ left:14%; top:6%; width:34%; }
.vcard__vis .nv__b{ right:12%; bottom:4%; width:38%; }
.vcard__body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:8px; flex:1; }
.vcard__body h3{ font-size:21px; }
.vcard__body p{ font-size:15.5px; line-height:1.55; color:var(--muted); }
.vcard__body .card__link{ margin-top:auto; padding-top:10px; }

/* offre unique */
.sec--dark{ background:var(--ink); color:#fff; }
.sec--dark h2,.sec--dark h3{ color:#fff; }
.eyebrow--light{ color:#7aa2ff; }
.offerbox{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:center; }
.offerbox h2{ font-size:clamp(32px,4.2vw,52px); letter-spacing:-.04em; line-height:1.04; }
.offerbox .lead{ margin-top:18px; color:#b9c0cf; font-size:18.5px; max-width:520px; }
.ticks--light li{ color:#e8ebf2; }
.ticks--light .ico{ color:#5eead4; }
.offerbox .ticks{ margin-top:26px; gap:13px; }
.offerbox .ticks li{ font-size:17px; }
.offerbox__vis{ position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/3.3; box-shadow:0 30px 80px rgba(0,0,0,.45); }
.offerbox__vis img{ width:100%; height:100%; object-fit:cover; }
.offerbox__vis::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,11,15,0) 40%,rgba(10,11,15,.78) 100%); }
.offerbox__tag{ position:absolute; left:20px; right:20px; bottom:20px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-radius:14px; background:rgba(255,255,255,.96); color:var(--ink); }
.offerbox__tag b{ display:block; font-size:18px; letter-spacing:-.02em; }
.offerbox__tag span{ font-size:14px; color:var(--muted); font-weight:600; }
@media (max-width:900px){ .offerbox{ grid-template-columns:1fr; gap:36px; } }

/* étapes compactes */
.mini-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.mini-steps div{ display:flex; align-items:center; gap:16px; padding:22px 24px; background:#fff; border:1px solid var(--line); border-radius:16px; font-weight:700; color:var(--ink); font-size:17px; line-height:1.3; }
.mini-steps i{ flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff; font-style:normal; font-weight:800; }
.mini-steps small{ display:block; font-weight:500; color:var(--muted); font-size:14.5px; margin-top:2px; }
@media (max-width:900px){ .mini-steps{ grid-template-columns:1fr; } }

.hero__mock{ max-width:640px; margin-left:auto; width:100%; }
.phero__mock{ width:100%; max-width:560px; margin-left:auto; }
@media (max-width:900px){ .hero__mock,.phero__mock{ margin:0 auto; max-width:520px; } }
.row-cta{ margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }
@media (prefers-reduced-motion:reduce){ .float,.gv__badge,.nv__a,.nv__b{ animation:none !important; } }

.float__ic{ width:4.6cqw; height:4.6cqw; flex:none; border-radius:1.3cqw; display:grid; place-items:center; background:#eaf1ff; color:#2563eb; }
.float__ic svg{ width:2.8cqw; height:2.8cqw; }
.float > span:last-child{ display:block; }

[data-t]::before{ content:attr(data-t); }
.site__h,.site__p,.phone__h,.phone__cta,.gv__item b{ display:block; }
.gv__item > span:first-child > span{ display:block; }
.float b,.float small,.float .stars{ display:block; }

@media (max-width:1099px){ .crumbs{ display:none; } .phero{ padding-top:36px; } }
.site__h{ font-weight:800; }

/* ═════════ Espace client ═════════ */
.hidden{ display:none !important; }
.dash{ max-width:860px; margin-top:34px; }
.dashboardCard{ padding:34px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); }
.dashboardCardHead h2{ display:flex; align-items:center; gap:12px; font-size:24px; }
.dashboardCardHead h2 .ico{ color:var(--accent); width:26px; height:26px; }
.dashboardCardHead p{ margin-top:6px; color:var(--muted); font-size:16px; }
.clientLookup{ margin-top:26px; }
.clientLookup label,.dash .formGroup label,.projectShareEditor label{ display:block; margin-bottom:8px; font-size:14px; font-weight:700; color:var(--ink); }
.clientLookupRow{ display:flex; flex-wrap:wrap; gap:10px; }
.dash input[type=text],.dash input[type=password],.dash input[type=url],.dash select{
  flex:1; min-width:0; width:100%; min-height:48px; padding:11px 14px;
  border:1.5px solid #d3d9e3; border-radius:10px; background:#fff; color:var(--ink);
  font:inherit; font-size:16px; outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.clientLookupRow input{ flex:1 1 220px; width:auto; }
.dash input::placeholder{ color:#68717f; }
.dash input:focus,.dash select:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(37,99,235,.14); }
.dash input[type=range]{ accent-color:var(--accent); width:100%; min-height:0; padding:0; }
.passToggleBtn{ width:48px; padding:0; flex:none; }
.passToggleBtn .ico{ width:20px; height:20px; }
.dashboardHint{ margin-top:12px; font-size:14px; color:var(--muted); }
.dashboardError{ margin-top:14px; padding:12px 16px; border-radius:10px; background:#fdecec; color:#b42318; font-size:15px; font-weight:600; }
.clientResult{ margin-top:22px; }

.clientProject{ padding:26px; border-radius:16px; background:var(--soft); border:1px solid var(--line); }
.clientLabel{ font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.clientProject h3{ margin-top:6px; font-size:26px; }
.projectOfferTag{ display:inline-block; margin:12px 0 4px; padding:5px 14px; border-radius:999px; background:var(--ink); color:#fff; font-size:13.5px; font-weight:700; }
.progressWrap{ display:flex; align-items:center; gap:14px; margin-top:16px; }
.progressWrap strong{ min-width:48px; text-align:right; font-size:18px; color:var(--ink); }
.progressBar{ flex:1; height:12px; border-radius:99px; background:#dfe5ef; overflow:hidden; }
.progressBar span{ display:block; height:100%; border-radius:99px; background:linear-gradient(95deg,#2563eb,#06b6d4); transition:width .3s ease; }
.projectShare{ margin-top:16px; font-size:15.5px; }
.projectShare--pending{ color:var(--muted); }
.projectShare--ok a{ display:inline-flex; padding:11px 20px; border-radius:10px; background:var(--accent); color:#fff; font-weight:700; text-decoration:none; }
.projectShare--ok a:hover{ background:var(--accent-d); }

.adminInline{ margin-top:30px; padding-top:30px; border-top:1px solid var(--line); }
.adminInlineHead h3{ display:flex; align-items:center; gap:10px; font-size:21px; }
.adminInlineHead h3 .ico{ color:var(--accent); }
.adminInlineHead p{ margin-top:4px; color:var(--muted); }
.projectForm{ display:grid; gap:16px; margin-top:20px; }
.projectForm .btn{ justify-self:start; }
.adminListWrap{ margin-top:34px; }
.adminListHead{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.adminListHead h3{ font-size:20px; }
.projectList{ display:grid; gap:14px; }
.projectItem{ padding:20px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.projectTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.projectTop h4{ font-size:18px; }
.projectTop p{ margin-top:2px; color:var(--muted); font-size:14.5px; }
.projectCode{ padding:5px 12px; border-radius:8px; background:var(--ink); color:#fff; font-size:14px; font-weight:800; letter-spacing:.08em; }
.projectShareEditor{ margin-top:16px; }
.projectControls{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px; }
.projectControls .projectRange{ flex:1 1 180px; width:auto; }
@media (max-width:620px){ .dashboardCard{ padding:22px; } .clientLookupRow .btn{ flex:1 1 100%; } .passToggleBtn{ flex:none !important; width:48px; } }

[hidden]{ display:none !important; }
.dashboardError:empty{ display:none; }

/* ═════════ Mobile & tablette : en-tête compact, rythme resserré ═════════ */
.local{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:center; }
.photo--wide{ aspect-ratio:4/3; }
.browser__screen{ overflow:hidden; }

@media (max-width:1099px){
  :root{ --header-h:56px; }
  .logo img{ height:26px; width:auto; }
  .burger{ width:40px; height:40px; border-radius:9px; }
  .burger .ico{ width:22px; height:22px; }
  .header__in{ gap:12px; }
  .mmenu__body > a,.mmenu__body summary{ padding:14px 4px; font-size:18px; }
}

@media (max-width:900px){
  .local{ grid-template-columns:1fr; gap:24px; }
  .photo--wide{ aspect-ratio:16/10; }
}

@media (max-width:680px){
  body{ font-size:16.5px; }
  .wrap{ --pad:20px; }
  .sec{ padding:44px 0; }
  .sec--tight{ padding:36px 0; }
  .sec__head{ margin-bottom:24px; }
  .sec__head h2{ font-size:clamp(26px,7.4vw,32px); }
  .eyebrow{ margin-bottom:8px; font-size:12px; }
  .lead,.hero .lead,.phero .lead{ font-size:17px; line-height:1.55; }
  .hero{ padding:26px 0 36px; }
  .hero h1{ font-size:clamp(34px,10.4vw,44px); }
  .hero__grid{ gap:28px; }
  .hero__cta{ margin-top:22px; gap:10px; }
  .hero__cta .btn{ width:100%; }
  .ticks{ margin-top:20px; gap:8px; }
  .ticks li{ font-size:15px; }
  .phero{ padding:24px 0 34px; }
  .phero h1{ font-size:clamp(30px,9vw,38px); }
  .phero__grid{ gap:24px; }
  .phero .hero__cta{ margin-top:20px; }
  .hero__mock,.phero__mock{ max-width:none; }
  .grid{ gap:14px; }
  .card,.offer,.step{ padding:22px; }
  .vcard__vis{ padding:14px 14px 0; }
  .vcard__body{ padding:18px 20px 22px; }
  .vcard__body h3{ font-size:19px; }
  .chip{ padding:14px 16px; }
  .chips{ gap:10px; }
  .mini-steps div{ padding:16px 18px; font-size:16px; }
  .offerbox{ gap:26px; }
  .offerbox h2{ font-size:clamp(28px,8vw,34px); }
  .offerbox .lead{ font-size:16.5px; }
  .offerbox .ticks li{ font-size:16px; }
  .offerbox__vis{ aspect-ratio:4/3; }
  .offerbox__tag{ left:12px; right:12px; bottom:12px; padding:12px 14px; }
  .offerbox__tag .btn{ display:none; }
  .offerbox__tag b{ font-size:16px; }
  .offerbox__tag span{ font-size:13px; }
  .showcase{ gap:24px; }
  .showcase h2{ font-size:clamp(26px,7.4vw,32px); }
  .browser__screen{ padding:20px 18px 24px; min-height:0; }
  .browser__nav{ margin-bottom:28px; }
  .browser__nav span{ display:none; }
  .zone__body{ padding:14px 16px 18px; }
  .faq summary{ padding:16px 2px; font-size:16.5px; }
  .faq details > div{ font-size:15.5px; padding-bottom:18px; }
  .cta{ padding:36px 0 48px; }
  .cta__box{ padding:28px 22px; gap:20px; }
  .cta__box h2{ font-size:26px; }
  .cta__box p{ font-size:16px; }
  .cta__actions{ width:100%; }
  .cta__actions .btn{ width:100%; }
  .footer{ padding-top:44px; }
  .footer__grid{ gap:30px; padding-bottom:36px; }
  .info a,.info div.row{ padding:14px 16px; }
  .contactFormCard{ padding:20px; }
  .thanks{ padding:48px 0; }
  .thanks__card{ padding:32px 22px; }
  .link-cloud a{ padding:8px 14px; font-size:14px; }
  .prose p,.prose ul,.prose ol{ font-size:16.5px; }
}
@media (max-width:680px){
  .grid.zones{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .grid.zones .zone img{ aspect-ratio:4/3; }
  .grid.zones .zone h3{ font-size:16px; }
  .grid.zones .zone__body{ padding:12px 14px 14px; gap:4px; }
  .grid.zones .card__link{ font-size:14px; }
}