/* Lockero — CSS stable corrigé */
:root {
  --bg: #101010;
  --panel: #1b1b1b;
  --panel2: #262626;
  --soft: rgba(255,255,255,.07);
  --line: rgba(255,255,255,.1);
  --orange: #ff8a1f;
  --orange2: #ffb15c;
  --cream: #f7f3ea;
  --muted: #aaa;
  --green: #29d17d;
  --red: #ff5e57;
  --gold: #fbbf24;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: radial-gradient(circle at top left, rgba(255,138,31,.18), transparent 34%), var(--bg);
  color: var(--cream);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  background: linear-gradient(180deg, rgba(15,15,15,.97), rgba(10,10,10,.91));
  border-bottom: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
  padding: 10px 16px;
}
.top-inner {
  max-width: 1120px;
  min-height: 64px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo-image {
  width: 210px;
  height: 58px;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(255,255,255,.97);
  padding: 7px 12px;
  border: 1px solid rgba(255,138,31,.22);
  box-shadow: 0 14px 30px rgba(0,0,0,.32);
}
.brand h1, .brand p { display:none; }
.top-actions { display:flex; align-items:center; gap:10px; }
.icon-btn, .small-btn {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.08);
  color: var(--cream);
  border-radius: 16px;
  padding: 10px 12px;
  font-weight: 900;
}
.small-btn.orange, .primary { background: var(--orange); color: #111; border: 0; }
.hamburger-btn {
  width: 50px;
  height: 46px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  color: #111;
  border: 0;
  font-size: 24px;
  font-weight: 950;
  box-shadow: 0 12px 28px rgba(255,138,31,.24);
}
.main { max-width: 1120px; width: 100%; margin: 0 auto; padding: 18px 14px 96px; }
.nav {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 45;
  max-width: 760px; margin: 0 auto;
  border: 1px solid var(--line); background: rgba(0,0,0,.88); backdrop-filter: blur(18px);
  border-radius: 28px; padding: 7px; display: grid; grid-template-columns: repeat(6,1fr); gap: 4px;
  box-shadow: 0 18px 42px rgba(0,0,0,.38);
}
.nav button { border:0; background:transparent; color:var(--muted); border-radius:20px; padding:8px 2px; font-size:10px; font-weight:850; }
.nav button.active { background: rgba(255,138,31,.18); color: var(--orange2); }
.nav span { display:block; font-size:17px; margin-bottom:2px; }
.hero { border-radius:30px; padding:22px; background:linear-gradient(135deg,var(--orange),var(--orange2)); color:#111; box-shadow:0 20px 46px rgba(255,138,31,.20); overflow:hidden; }
.hero h2 { margin:10px 0 8px; font-size:clamp(30px,5vw,48px); line-height:.98; letter-spacing:-1.8px; }
.hero p { margin:0; max-width:720px; color:rgba(0,0,0,.75); font-weight:750; line-height:1.45; }
.pill { display:inline-flex; border-radius:999px; padding:7px 11px; background:rgba(0,0,0,.14); font-size:12px; font-weight:950; }
.hero-actions, .actions-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.btn { border:0; border-radius:18px; padding:12px 14px; font-weight:950; }
.btn.dark { background:#111; color:var(--cream); }
.btn.light { background:rgba(255,255,255,.75); color:#111; }
.grid { display:grid; gap:14px; }
.grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.card, .stat, .item, .product, .history-row { background: var(--panel); border:1px solid var(--line); box-shadow:0 14px 30px rgba(0,0,0,.18); }
.card { border-radius:26px; padding:16px; }
.card h3, .card h2 { margin:0 0 8px; }
.card p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.stat { padding:16px; border-radius:24px; }
.stat .num { font-size:28px; font-weight:950; color:var(--orange); }
.stat .label { color:var(--muted); font-size:12px; font-weight:750; margin-top:4px; }
.section-title { margin:24px 0 10px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.section-title h2 { margin:0; font-size:24px; letter-spacing:-.8px; }
.section-title p { margin:0; color:var(--muted); font-size:13px; }
.home-visual-hero { margin-top:18px; border-radius:30px; overflow:hidden; border:1px solid var(--line); background:var(--panel); box-shadow:0 20px 46px rgba(0,0,0,.26); }
.home-visual-hero img { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:#fff; }
.home-visual-hero-body { padding:16px; }
.home-visual-hero-body strong { display:block; font-size:20px; color:var(--cream); }
.home-visual-hero-body p { margin:7px 0 0; color:var(--muted); font-size:13px; line-height:1.45; }
.image-gallery-button { border:1px solid var(--line); background:rgba(255,255,255,.07); color:var(--cream); border-radius:16px; padding:10px 12px; font-weight:900; text-decoration:none; }
.home-image-showcase, .lockero-image-showcase { margin-top:14px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.home-image-card, .lockero-image-card { border-radius:26px; overflow:hidden; border:1px solid var(--line); background:var(--panel); box-shadow:0 16px 32px rgba(0,0,0,.22); }
.home-image-card img, .lockero-image-card img { width:100%; display:block; aspect-ratio:4/3; object-fit:cover; background:#fff; }
.home-image-card div, .lockero-image-card div { padding:13px; }
.home-image-card strong, .lockero-image-card strong { display:block; font-size:15px; color:var(--cream); }
.home-image-card small, .lockero-image-card small { display:block; margin-top:5px; color:var(--muted); font-size:12px; line-height:1.35; }
.item { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; width:100%; color:var(--cream); border-radius:22px; padding:13px; margin:9px 0; text-align:left; }
.item.essential { background:linear-gradient(135deg,rgba(255,138,31,.13),var(--panel)); }
.checkbox { width:31px; height:31px; border-radius:13px; display:grid; place-items:center; background:rgba(255,255,255,.09); color:var(--muted); font-weight:950; }
.checkbox.checked { background:var(--green); color:#111; }
.item strong { display:block; font-size:15px; }
.item small { color:var(--muted); display:block; margin-top:3px; line-height:1.35; }
.item .danger { background:rgba(255,94,87,.12); color:#ffb4ae; border:1px solid rgba(255,94,87,.25); border-radius:14px; padding:7px 9px; font-size:11px; font-weight:900; }
.form { display:grid; gap:12px; }
.field { display:grid; gap:6px; }
.field label { color:var(--muted); font-size:12px; font-weight:900; }
.field input, .field select, .field textarea { border:1px solid var(--line); background:rgba(255,255,255,.07); color:var(--cream); border-radius:16px; padding:12px; outline:none; }
.progress { height:12px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:10px; }
.progress span { display:block; height:100%; background:linear-gradient(90deg,var(--orange),var(--gold)); border-radius:999px; width:0%; transition:width .2s ease; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.product { border-radius:26px; overflow:hidden; display:flex; flex-direction:column; }
.product-visual { min-height:150px; background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); display:grid; place-items:center; font-size:48px; overflow:hidden; }
.product-visual img { width:100%; height:100%; min-height:150px; object-fit:cover; display:block; }
.product-body { padding:14px; display:grid; gap:8px; }
.product h3 { margin:0; font-size:16px; }
.product p { margin:0; color:var(--muted); font-size:12px; line-height:1.4; }
.price { color:var(--orange); font-weight:950; font-size:18px; }
.tags, .filters { display:flex; gap:6px; flex-wrap:wrap; }
.tag, .filter { border-radius:999px; padding:5px 8px; background:rgba(255,138,31,.12); color:var(--orange2); font-size:10px; font-weight:900; border:1px solid transparent; }
.filter { padding:9px 11px; font-size:12px; border-color:rgba(255,138,31,.24); }
.filter.active { background:var(--orange); color:#111; }
.cart-row { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; border-bottom:1px solid var(--line); padding:10px 0; }
.empty { border:1px dashed rgba(255,255,255,.2); border-radius:22px; padding:18px; color:var(--muted); text-align:center; }
.history-row { border-radius:20px; padding:13px; margin:9px 0; }
.history-row strong { color:var(--orange); }
.drawer-backdrop, .install-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.62); backdrop-filter:blur(7px); z-index:60; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(420px,calc(100vw - 18px)); z-index:61; padding:18px; overflow-y:auto; border-radius:34px 0 0 34px; background:radial-gradient(circle at top right,rgba(255,138,31,.22),transparent 34%),linear-gradient(180deg,rgba(20,20,20,.99),rgba(7,7,7,.98)); border-left:1px solid rgba(255,255,255,.12); box-shadow:-28px 0 70px rgba(0,0,0,.55); animation:drawerIn .22s ease both; }
@keyframes drawerIn { from { transform:translateX(105%); opacity:.5; } to { transform:translateX(0); opacity:1; } }
.drawer-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.drawer-head img { width:150px; height:54px; object-fit:contain; background:#fff; border-radius:16px; padding:7px 10px; }
.drawer-close { margin-left:auto; width:42px; height:42px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.08); color:var(--cream); font-weight:950; }
.drawer-card { border-radius:26px; padding:16px; background:linear-gradient(135deg,rgba(255,138,31,.18),rgba(255,255,255,.045)); border:1px solid rgba(255,138,31,.24); margin-bottom:16px; }
.drawer-card strong { display:block; font-size:19px; }
.drawer-card p { color:var(--muted); font-size:13px; line-height:1.45; margin:7px 0 0; }
.drawer-title { margin:16px 0 9px; color:var(--orange2); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:950; }
.drawer-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.drawer-action { min-height:86px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); color:var(--cream); border-radius:22px; padding:13px; text-align:left; font-weight:850; }
.drawer-action.orange { background:linear-gradient(135deg,var(--orange),var(--orange2)); color:#111; border:0; }
.drawer-action span { display:block; font-size:22px; margin-bottom:8px; }
.install-modal { position:fixed; left:50%; top:50%; width:min(460px,calc(100vw - 26px)); transform:translate(-50%,-50%); z-index:71; border-radius:34px; padding:22px; background:radial-gradient(circle at top,rgba(255,138,31,.18),transparent 40%),rgba(14,14,14,.98); border:1px solid rgba(255,255,255,.12); box-shadow:0 34px 70px rgba(0,0,0,.55); text-align:center; }
.install-modal img { width:190px; max-width:80%; height:74px; border-radius:20px; object-fit:contain; background:#fff; padding:8px 12px; margin:0 auto 16px; display:block; }
.install-modal h3 { margin:0; font-size:27px; letter-spacing:-.9px; }
.install-modal p { margin:10px 0 0; color:var(--muted); line-height:1.5; font-size:14px; }
.toast { position:fixed; left:14px; right:14px; top:88px; z-index:100; max-width:620px; margin:0 auto; padding:13px 14px; border-radius:18px; background:rgba(0,0,0,.92); border:1px solid var(--line); box-shadow:0 18px 44px rgba(0,0,0,.38); transform:translateY(-130%); opacity:0; transition:.25s ease; font-size:13px; font-weight:750; }
.toast.show { transform:translateY(0); opacity:1; }
@media (max-width:900px) { .grid.two,.grid.three,.product-grid,.home-image-showcase,.lockero-image-showcase { grid-template-columns:1fr; } .home-visual-hero img { aspect-ratio:4/3; } .drawer-grid { grid-template-columns:1fr; } }
@media (max-width:640px) { .brand-logo-image { width:150px; height:48px; padding:6px 9px; } .top-actions .small-btn { display:none; } .nav { grid-template-columns:repeat(3,1fr); border-radius:22px; } .hero { border-radius:24px; padding:18px; } .main { padding-left:10px; padding-right:10px; } }


/* ============================================================
   LOCKERO — PATCH LOGO PLUS IMPOSANT
   ============================================================ */

.brand-logo-image {
  width: 280px !important;
  height: 74px !important;
  object-fit: contain !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.98) !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(255,138,31,.26) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.36),
    0 0 0 1px rgba(255,255,255,.08) !important;
}

.top-inner {
  min-height: 82px !important;
}

.topbar {
  padding: 12px 18px !important;
}

.brand {
  gap: 16px !important;
}

@media (max-width: 760px) {
  .brand-logo-image {
    width: 210px !important;
    height: 62px !important;
    padding: 4px 8px !important;
    border-radius: 19px !important;
  }

  .top-inner {
    min-height: 70px !important;
  }

  .topbar {
    padding: 10px 12px !important;
  }
}

@media (max-width: 520px) {
  .brand-logo-image {
    width: 172px !important;
    height: 54px !important;
    padding: 3px 7px !important;
    border-radius: 17px !important;
  }

  .top-inner {
    min-height: 62px !important;
  }
}



/* ============================================================
   LOCKERO — PATCH LOGO HEADER RECADRE
   Objectif :
   - enlever visuellement l’encadrement noir du PNG
   - agrandir le logo
   - faire épouser davantage le header
   ============================================================ */

.topbar {
  padding: 10px 18px !important;
}

.top-inner {
  min-height: 96px !important;
  align-items: center !important;
}

.brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.brand > div {
  display: none !important;
}

/* On cible UNIQUEMENT le logo dans le header */
.topbar .brand-logo-image {
  width: 430px !important;
  max-width: 48vw !important;
  height: 94px !important;

  /* important : on rogne visuellement l'image */
  object-fit: cover !important;
  object-position: center center !important;

  /* on enlève toute déco CSS parasite */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  /* recadrage visuel du PNG pour masquer l'encadrement noir */
  clip-path: inset(22px 18px 22px 18px round 22px) !important;

  display: block !important;
  margin: 0 !important;
}

/* Un peu plus de respiration dans le header */
.top-actions {
  margin-left: auto !important;
  align-items: center !important;
}

/* Responsive tablette */
@media (max-width: 900px) {
  .top-inner {
    min-height: 84px !important;
  }

  .topbar .brand-logo-image {
    width: 320px !important;
    max-width: 52vw !important;
    height: 78px !important;
    clip-path: inset(18px 15px 18px 15px round 18px) !important;
  }
}

/* Responsive mobile */
@media (max-width: 640px) {
  .topbar {
    padding: 8px 12px !important;
  }

  .top-inner {
    min-height: 72px !important;
  }

  .topbar .brand-logo-image {
    width: 230px !important;
    max-width: 58vw !important;
    height: 62px !important;
    clip-path: inset(14px 12px 14px 12px round 14px) !important;
  }
}

/* Très petit mobile */
@media (max-width: 420px) {
  .topbar .brand-logo-image {
    width: 190px !important;
    max-width: 54vw !important;
    height: 54px !important;
    clip-path: inset(12px 10px 12px 10px round 12px) !important;
  }
}



/* ============================================================
   LOCKERO — LOGO HEADER CLEAN REGENERE
   Nouvelle image sans encadrement noir
   ============================================================ */

.topbar {
  padding: 10px 18px !important;
}

.top-inner {
  min-height: 92px !important;
  align-items: center !important;
}

.brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.brand > div {
  display: none !important;
}

.topbar .brand-logo-image,
.brand-logo-image {
  width: 430px !important;
  max-width: 48vw !important;
  height: 88px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: block !important;
}

.top-actions {
  margin-left: auto !important;
  align-items: center !important;
}

@media (max-width: 900px) {
  .top-inner {
    min-height: 78px !important;
  }

  .topbar .brand-logo-image,
  .brand-logo-image {
    width: 320px !important;
    max-width: 52vw !important;
    height: 72px !important;
  }
}

@media (max-width: 640px) {
  .topbar {
    padding: 8px 12px !important;
  }

  .top-inner {
    min-height: 68px !important;
  }

  .topbar .brand-logo-image,
  .brand-logo-image {
    width: 230px !important;
    max-width: 58vw !important;
    height: 58px !important;
  }
}

@media (max-width: 420px) {
  .topbar .brand-logo-image,
  .brand-logo-image {
    width: 190px !important;
    max-width: 54vw !important;
    height: 50px !important;
  }
}



/* ============================================================
   LOCKERO — PATCH LOGO COMPLET ARRONDI
   - affiche l'image complète
   - supprime le recadrage
   - arrondit les bords
   ============================================================ */

.topbar {
  padding: 10px 18px !important;
}

.top-inner {
  min-height: 100px !important;
  align-items: center !important;
}

.brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.brand > div {
  display: none !important;
}

/* Logo header : image complète + coins arrondis */
.topbar .brand-logo-image,
.brand-logo-image {
  width: 440px !important;
  max-width: 48vw !important;
  height: 96px !important;

  object-fit: contain !important;
  object-position: center center !important;

  /* très important : pas de recadrage */
  clip-path: none !important;
  overflow: hidden !important;

  /* bords arrondis */
  border-radius: 26px !important;

  /* style propre */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  display: block !important;
  margin: 0 !important;
}

/* un peu d'espace à droite */
.top-actions {
  margin-left: auto !important;
  align-items: center !important;
}

/* tablette */
@media (max-width: 900px) {
  .top-inner {
    min-height: 84px !important;
  }

  .topbar .brand-logo-image,
  .brand-logo-image {
    width: 330px !important;
    max-width: 52vw !important;
    height: 78px !important;
    border-radius: 22px !important;
  }
}

/* mobile */
@media (max-width: 640px) {
  .topbar {
    padding: 8px 12px !important;
  }

  .top-inner {
    min-height: 72px !important;
  }

  .topbar .brand-logo-image,
  .brand-logo-image {
    width: 235px !important;
    max-width: 58vw !important;
    height: 60px !important;
    border-radius: 18px !important;
  }
}

/* très petit mobile */
@media (max-width: 420px) {
  .topbar .brand-logo-image,
  .brand-logo-image {
    width: 195px !important;
    max-width: 54vw !important;
    height: 52px !important;
    border-radius: 16px !important;
  }
}



/* ============================================================
   LOCKERO — LOGO COMPLET ARRONDI HEADER + MENU
   ============================================================ */

.topbar {
  padding: 10px 18px !important;
}

.top-inner {
  min-height: 100px !important;
  align-items: center !important;
}

.brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.brand > div {
  display: none !important;
}

/* Logo complet dans le header */
.topbar .brand-logo-image,
.brand-logo-image {
  width: 440px !important;
  max-width: 48vw !important;
  height: 96px !important;
  object-fit: contain !important;
  object-position: center center !important;
  clip-path: none !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: block !important;
}

/* Logo complet dans le menu hamburger et la fenêtre d'installation */
.drawer-head img,
.hamburger-panel .drawer-head img,
.install-modal img {
  width: 280px !important;
  max-width: 86% !important;
  height: 86px !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 24px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  clip-path: none !important;
  display: block !important;
}

.drawer-head {
  align-items: center !important;
}

.drawer-close {
  margin-left: auto !important;
}

.top-actions {
  margin-left: auto !important;
  align-items: center !important;
}

/* Tablette */
@media (max-width: 900px) {
  .top-inner {
    min-height: 84px !important;
  }

  .topbar .brand-logo-image,
  .brand-logo-image {
    width: 330px !important;
    max-width: 52vw !important;
    height: 78px !important;
    border-radius: 22px !important;
  }

  .drawer-head img,
  .hamburger-panel .drawer-head img,
  .install-modal img {
    width: 250px !important;
    height: 76px !important;
    border-radius: 22px !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .topbar {
    padding: 8px 12px !important;
  }

  .top-inner {
    min-height: 72px !important;
  }

  .topbar .brand-logo-image,
  .brand-logo-image {
    width: 235px !important;
    max-width: 58vw !important;
    height: 60px !important;
    border-radius: 18px !important;
  }

  .drawer-head img,
  .hamburger-panel .drawer-head img,
  .install-modal img {
    width: 220px !important;
    height: 66px !important;
    border-radius: 18px !important;
  }
}

/* Très petit mobile */
@media (max-width: 420px) {
  .topbar .brand-logo-image,
  .brand-logo-image {
    width: 195px !important;
    max-width: 54vw !important;
    height: 52px !important;
    border-radius: 16px !important;
  }

  .drawer-head img,
  .hamburger-panel .drawer-head img,
  .install-modal img {
    width: 190px !important;
    height: 58px !important;
    border-radius: 16px !important;
  }
}



/* ============================================================
   LOCKERO — LOGOS ARRONDIS HEADER + MENU + INSTALL
   ============================================================ */

/* HEADER */
.topbar .brand-logo-image,
.brand-logo-image {
  width: 440px !important;
  max-width: 48vw !important;
  height: 96px !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 28px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: block !important;
}

/* MENU HAMBURGER + POPUP INSTALL */
.drawer-head img,
.hamburger-panel .drawer-head img,
.install-modal img {
  width: 280px !important;
  max-width: 86% !important;
  height: 86px !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 26px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: block !important;
}

/* TABLETTE */
@media (max-width: 900px) {
  .topbar .brand-logo-image,
  .brand-logo-image {
    width: 330px !important;
    max-width: 52vw !important;
    height: 78px !important;
    border-radius: 24px !important;
    clip-path: inset(0 round 24px) !important;
  }

  .drawer-head img,
  .hamburger-panel .drawer-head img,
  .install-modal img {
    width: 250px !important;
    height: 76px !important;
    border-radius: 22px !important;
    clip-path: inset(0 round 22px) !important;
  }
}

/* MOBILE */
@media (max-width: 640px) {
  .topbar .brand-logo-image,
  .brand-logo-image {
    width: 235px !important;
    max-width: 58vw !important;
    height: 60px !important;
    border-radius: 18px !important;
    clip-path: inset(0 round 18px) !important;
  }

  .drawer-head img,
  .hamburger-panel .drawer-head img,
  .install-modal img {
    width: 220px !important;
    height: 66px !important;
    border-radius: 18px !important;
    clip-path: inset(0 round 18px) !important;
  }
}

/* TRES PETIT MOBILE */
@media (max-width: 420px) {
  .topbar .brand-logo-image,
  .brand-logo-image {
    width: 195px !important;
    max-width: 54vw !important;
    height: 52px !important;
    border-radius: 16px !important;
    clip-path: inset(0 round 16px) !important;
  }

  .drawer-head img,
  .hamburger-panel .drawer-head img,
  .install-modal img {
    width: 190px !important;
    height: 58px !important;
    border-radius: 16px !important;
    clip-path: inset(0 round 16px) !important;
  }
}