/*
Theme Name:   Autologic Child
Theme URI:    https://autologic.ma/
Description:  Autologic 2026 design on top of WoodMart. Colors, fonts, buttons, WhatsApp / Help Desk blocks and homepage sections. Keep WoodMart (parent) installed.
Author:       Autologic SARL
Template:     woodmart
Version:      1.0.4
Text Domain:  autologic-child
*/

/* =========================================================
   1. Design tokens (change a color here = changes everywhere)
   ========================================================= */
:root {
  --al-primary: #1E73BE;
  --al-primary-dark: #155A96;
  --al-primary-soft: #E8F1FA;
  --al-ink: #0F1B2D;
  --al-muted: #5B6778;
  --al-border: #DDE3EA;
  --al-surface: #FFFFFF;
  --al-bg: #F5F7FA;
  --al-promo: #D7263D;
  --al-hot: #F28C28;
  --al-success: #1E9E5A;
  --al-whatsapp: #25D366;
  --al-radius: 10px;
  --al-radius-sm: 8px;
  --al-font: 'Inter', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* =========================================================
   2. Global typography
   ========================================================= */
body {
  font-family: var(--al-font);
  color: var(--al-ink);
}
html[dir="rtl"] body,
html[lang^="ar"] body {
  font-family: 'Cairo', 'Inter', system-ui, sans-serif;
  line-height: 1.7;
}

/* =========================================================
   3. WoodMart / WooCommerce overrides
   (set the same colors in WoodMart > Theme Settings > Styles and colors too)
   ========================================================= */
.product-labels .onsale { background-color: var(--al-promo); color: #fff; }
.product-labels .featured,
.product-labels .new { background-color: var(--al-hot); color: var(--al-ink); }
.price ins,
.price ins .amount { color: var(--al-promo); font-weight: 800; }
.price del,
.price del .amount { color: var(--al-muted); }
.stock.in-stock { color: var(--al-success); }
.product-grid-item .product-wrapper {
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius);
  background: var(--al-surface);
}

/* =========================================================
   4. Shared building blocks
   ========================================================= */
.al-section,
.al-section * { box-sizing: border-box; }
.al-section { font-family: var(--al-font); color: var(--al-ink); }
.al-section a { text-decoration: none; }
.al-section a:focus-visible,
.al-section button:focus-visible,
.al-section input:focus-visible { outline: 3px solid var(--al-primary); outline-offset: 2px; }
.al-wrap { max-width: 1240px; margin-inline: auto; padding-inline: 24px; }
.al-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.al-h2 { margin: 0 0 6px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--al-ink); }
.al-lead { margin: 0 0 22px; color: var(--al-muted); font-size: 15px; line-height: 1.55; }

.al-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 18px; border-radius: var(--al-radius-sm);
  font-weight: 600; font-size: 15px; line-height: 1.2; border: 1.5px solid transparent;
  cursor: pointer; transition: background-color .15s, color .15s; text-decoration: none !important;
}
.al-btn--primary { background: var(--al-primary); color: #fff !important; }
.al-btn--primary:hover { background: var(--al-primary-dark); }
.al-btn--outline { border-color: var(--al-primary); color: var(--al-primary) !important; background: transparent; }
.al-btn--outline:hover { background: var(--al-primary-soft); }
.al-btn--wa { background: var(--al-whatsapp); color: var(--al-ink) !important; }
.al-btn--wa:hover { background: #1fbf5b; }

/* =========================================================
   5. Top bar (WoodMart header builder > HTML block)
   ========================================================= */
.al-topbar { background: var(--al-ink); color: #E8EDF3; font-size: 14px; }
.al-topbar .al-wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; flex-wrap: wrap; }
.al-topbar__links { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.al-topbar a { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.al-topbar a:hover { color: #DCE9F6; }
.al-topbar .al-topbar__tel { color: #C3CCD8; font-weight: 400; font-size: 13px; }
.al-topbar .al-wa-icon { color: var(--al-whatsapp); }

/* =========================================================
   6. Hero + "Je dois…" job picker
   ========================================================= */
.al-hero { background: var(--al-surface); border-bottom: 1px solid var(--al-border); }
.al-hero .al-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 64px; padding-bottom: 72px; }
.al-hero__text { display: flex; flex-direction: column; gap: 22px; }
.al-hero h1 { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; color: var(--al-ink); max-width: 16ch; }
.al-hero__sub { margin: 0; font-size: 18px; line-height: 1.55; color: var(--al-muted); max-width: 46ch; }
.al-search { display: flex; gap: 8px; max-width: 560px; flex-wrap: wrap; margin: 0; }
.al-search__field { flex: 1 1 280px; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border: 1.5px solid var(--al-ink); border-radius: var(--al-radius); background: #fff; color: var(--al-muted); }
.al-search__field input { border: 0 !important; outline: none; box-shadow: none !important; font: inherit; font-size: 16px; width: 100%; height: auto; padding: 0; background: transparent; color: var(--al-ink); }
.al-search button { height: 56px; padding: 0 24px; border: 0; border-radius: var(--al-radius); background: var(--al-primary); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.al-search button:hover { background: var(--al-primary-dark); }
.al-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.al-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 6px; }

.al-jobs__title { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--al-ink); }
.al-jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.al-job { display: flex; flex-direction: column; gap: 10px; padding: 18px; min-height: 128px; border: 1px solid var(--al-border); border-radius: var(--al-radius); background: var(--al-bg); color: var(--al-ink) !important; }
.al-job:hover { border-color: var(--al-primary); }
.al-job__icon { width: 40px; height: 40px; border-radius: var(--al-radius-sm); background: var(--al-primary-soft); color: var(--al-primary); display: flex; align-items: center; justify-content: center; }
.al-job__text { display: flex; flex-direction: column; gap: 4px; }
.al-job__title { font-size: 17px; font-weight: 700; line-height: 1.25; }
.al-job__tools { font-size: 13px; color: var(--al-muted); line-height: 1.4; }

/* =========================================================
   7. Contact block: WhatsApp + Help Desk first
   ========================================================= */
.al-contact-sec { padding: 56px 0 64px; background: var(--al-bg); }
.al-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.al-ccard { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: var(--al-radius); }
.al-ccard__icon { width: 48px; height: 48px; border-radius: var(--al-radius-sm); background: #fff; display: flex; align-items: center; justify-content: center; }
.al-ccard__icon .al-icon { width: 26px; height: 26px; }
.al-ccard__label { font-size: 15px; font-weight: 600; }
.al-ccard__value { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.al-ccard__action { font-size: 15px; font-weight: 700; }
.al-ccard--wa { background: var(--al-whatsapp); color: var(--al-ink) !important; }
.al-ccard--wa .al-ccard__icon { color: var(--al-success); }
.al-ccard--hd { background: var(--al-primary); color: #fff !important; }
.al-ccard--hd .al-ccard__icon { color: var(--al-primary); }
.al-ccard--hd .al-ccard__label { color: #DCE9F6; }
.al-cmini { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: #fff; border: 1px solid var(--al-border); border-radius: var(--al-radius); color: var(--al-ink) !important; }
.al-cmini__icon { width: 40px; height: 40px; flex: none; border-radius: var(--al-radius-sm); background: var(--al-primary-soft); color: var(--al-primary); display: flex; align-items: center; justify-content: center; }
.al-cmini__label { display: block; font-size: 13px; color: var(--al-muted); }
.al-cmini__value { display: block; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* =========================================================
   8. Social block
   ========================================================= */
.al-social-sec { background: var(--al-primary-soft); border-top: 1px solid var(--al-border); }
.al-social-sec .al-wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 40px; padding-bottom: 40px; }
.al-social-sec .al-h2 { font-size: 24px; }
.al-social-sec p { margin: 0; color: var(--al-muted); font-size: 15px; }
.al-social { display: flex; gap: 10px; flex-wrap: wrap; }
.al-social a { min-height: 52px; padding: 0 16px; border-radius: var(--al-radius-sm); background: #fff; border: 1px solid var(--al-border); color: var(--al-ink) !important; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.al-social__badge { width: 28px; height: 28px; border-radius: 6px; color: #fff; display: flex; align-items: center; justify-content: center; }
.al-social__badge .al-icon { width: 16px; height: 16px; stroke-width: 2; }
.al-social__name { display: flex; flex-direction: column; line-height: 1.2; }
.al-social__handle { font-size: 12px; color: var(--al-muted); font-weight: 500; }
.al-fb { background: #1877F2; } .al-ig { background: #C13584; } .al-yt { background: var(--al-promo); } .al-tt { background: var(--al-ink); } .al-wa { background: var(--al-success); }

/* =========================================================
   9. Footer (WoodMart > Footer > HTML block)
   ========================================================= */
.al-footer { background: var(--al-ink); color: #C3CCD8; font-size: 14px; }
.al-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 56px; padding-bottom: 40px; }
.al-footer__col { display: flex; flex-direction: column; gap: 10px; }
.al-footer__brand { font-weight: 800; font-size: 20px; color: #fff; }
.al-footer__title { font-weight: 700; color: #fff; }
.al-footer p { margin: 0; line-height: 1.6; max-width: 34ch; }
.al-footer a { color: #C3CCD8; }
.al-footer a:hover { color: #fff; }
.al-footer__contact a { color: #fff; display: flex; flex-direction: column; }
.al-footer__contact small { font-size: 12px; color: #9AA6B6; }
.al-footer__contact strong { font-size: 18px; font-weight: 700; }
.al-footer__social { display: flex; gap: 8px; padding-top: 6px; }
.al-footer__social a { width: 44px; height: 44px; border-radius: var(--al-radius-sm); border: 1px solid #2A3646; color: #fff; display: flex; align-items: center; justify-content: center; }
.al-footer__bottom { border-top: 1px solid #2A3646; padding-top: 20px; padding-bottom: 28px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* =========================================================
   10. Mobile sticky bar: WhatsApp + Help Desk
   ========================================================= */
.al-sticky { display: none; }

/* =========================================================
   11. Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .al-hero .al-wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 40px; padding-bottom: 48px; }
  .al-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .al-wrap { padding-inline: 16px; }
  .al-hero h1 { font-size: 30px; }
  .al-hero__sub { font-size: 16px; }
  .al-topbar__hide-sm { display: none !important; }
  .al-contact { grid-template-columns: minmax(0, 1fr); }
  .al-ccard { padding: 20px; }
  .al-ccard__value { font-size: 28px; }
  .al-h2 { font-size: 22px; }
  .al-social { flex-direction: column; width: 100%; }
  .al-footer__grid { grid-template-columns: minmax(0, 1fr); }
  body { padding-bottom: 84px; }
  .al-sticky {
    display: flex; gap: 8px; position: fixed; z-index: 400; inset-inline: 0; bottom: 0;
    background: #fff; border-top: 1px solid var(--al-border); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    font-family: var(--al-font);
  }
  .al-sticky .al-btn { min-height: 52px; white-space: nowrap; gap: 6px; }
  .al-sticky .al-btn--outline { padding: 0 12px; }
  .al-sticky .al-btn--wa { flex: 1; font-weight: 700; font-size: 15px; padding: 0 10px; }
  /* WoodMart's own floating WhatsApp button would duplicate the sticky bar */
  .wd-sticky-social, .whatsapp-floating { display: none !important; }
}
@media (max-width: 480px) {
  .al-jobs { grid-template-columns: minmax(0, 1fr); }
  .al-job { min-height: 0; flex-direction: row; align-items: center; }
  .al-job__icon { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .al-btn { transition: none; }
}

/* Mobile sticky bar fit (v1.0.1) */
@media (max-width: 768px) {
  .al-sticky { gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(15,27,45,.08); }
  .al-sticky .al-btn { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-height: 50px; font-size: 15px; padding: 0 12px; letter-spacing: 0; text-transform: none; }
  .al-sticky .al-btn--outline { flex: 0 0 auto; }
  .al-sticky .al-btn--wa { flex: 1 1 0; }
}
@media (max-width: 380px) {
  .al-sticky .al-btn { font-size: 14px; padding: 0 10px; }
}

/* =========================================================
   Menu 2026 (v1.0.2)
   ========================================================= */
/* Desktop main menu */
:is(.whb-header,.whb-clone) .wd-nav-main{gap:2px;align-items:center}
:is(.whb-header,.whb-clone) .wd-nav-main.wd-style-separated > li:after,
:is(.whb-header,.whb-clone) .wd-nav-main.wd-style-separated > li:before{display:none!important}
:is(.whb-header,.whb-clone) .wd-nav-main > li{margin:0}
:is(.whb-header,.whb-clone) .wd-nav-main > li > a.woodmart-nav-link{position:relative;height:42px;padding:0 14px;border-radius:999px;font-family:var(--al-font);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--al-ink);transition:color .2s,background-color .2s}
:is(.whb-header,.whb-clone) .wd-nav-main > li > a.woodmart-nav-link img,
:is(.whb-header,.whb-clone) .wd-nav-main > li > a.woodmart-nav-link .wd-nav-img,
:is(.whb-header,.whb-clone) .wd-nav-main > li > a.woodmart-nav-link .wd-nav-icon{display:none!important}
:is(.whb-header,.whb-clone) .wd-nav-main > li:not(.al-nav-cta) > a.woodmart-nav-link::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--al-primary);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
:is(.whb-header,.whb-clone) .wd-nav-main > li:not(.al-nav-cta):hover > a.woodmart-nav-link,
:is(.whb-header,.whb-clone) .wd-nav-main > li.current-menu-item:not(.al-nav-cta) > a.woodmart-nav-link{color:var(--al-primary)}
:is(.whb-header,.whb-clone) .wd-nav-main > li:not(.al-nav-cta):hover > a.woodmart-nav-link::after,
:is(.whb-header,.whb-clone) .wd-nav-main > li.current-menu-item:not(.al-nav-cta) > a.woodmart-nav-link::after{transform:scaleX(1)}
.al-nav-brand > a .nav-link-text::after{content:"officiel";display:inline-block;margin-inline-start:6px;padding:2px 7px;border-radius:999px;background:#E6F5EC;color:var(--al-success);font-size:10px;font-weight:700;line-height:1.4;vertical-align:2px;text-transform:none;letter-spacing:0}
:is(.whb-header,.whb-clone) .wd-nav-main > li.al-nav-cta > a.woodmart-nav-link{margin-inline-start:8px;padding:0 18px;background:var(--al-primary);color:#fff!important}
:is(.whb-header,.whb-clone) .wd-nav-main > li.al-nav-cta > a.woodmart-nav-link:hover{background:var(--al-primary-dark)}
:is(.whb-header,.whb-clone) .wd-nav-main .wd-dropdown-menu:not(.wd-design-full-width){border-radius:14px;box-shadow:0 18px 40px rgba(15,27,45,.12)}
:is(.whb-header,.whb-clone) .wd-nav-main .wd-dropdown-menu a{text-transform:none;font-family:var(--al-font)}
@media (prefers-reduced-motion: reduce){:is(.whb-header,.whb-clone) .wd-nav-main > li > a.woodmart-nav-link::after{transition:none}}

/* Mobile side menu */
.mobile-nav{font-family:var(--al-font)}
.mobile-nav .wd-nav-mobile > li > a{min-height:54px;padding:0 20px;font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--al-ink);border-bottom:1px solid var(--al-border);display:flex;align-items:center;gap:12px}
.mobile-nav .wd-nav-mobile > li > a img{width:22px;height:22px;opacity:.75}
.mobile-nav .wd-nav-mobile li li > a{min-height:48px;font-size:15px;text-transform:none;letter-spacing:0}
.mobile-nav .wd-nav-mobile > li.al-nav-cta > a{margin:16px 16px 6px;border:0;border-radius:10px;background:var(--al-primary);color:#fff;justify-content:center}
.mobile-nav .wd-nav-mobile > li.al-nav-cta > a img{filter:brightness(0) invert(1);opacity:1}
.mobile-nav .wd-nav-mobile > li.current-menu-item > a{color:var(--al-primary);box-shadow:inset 3px 0 0 var(--al-primary)}

/* =========================================================
   Mobile menu icons (v1.0.3)
   ========================================================= */
.mobile-nav .wd-nav-mobile > li > a img{display:none!important}
.mobile-nav .wd-nav-mobile > li > a{gap:14px;min-height:60px;padding:0 18px}
.mobile-nav .wd-nav-mobile > li > a::before{content:"";flex:none;width:40px;height:40px;border-radius:12px;background-color:var(--al-primary-soft);background-position:center;background-repeat:no-repeat;background-size:22px;transition:background-color .2s,transform .2s}
.mobile-nav .wd-nav-mobile > li > a:active::before{transform:scale(.94)}
.mobile-nav .wd-nav-mobile > li.current-menu-item > a::before{background-color:#D6E6F7}
.mobile-nav .wd-nav-mobile > li.al-nav-cta > a{min-height:56px;justify-content:flex-start;padding:0 14px}
.mobile-nav .wd-nav-mobile > li.al-nav-cta > a::before{background-color:rgba(255,255,255,.18)}
.mobile-nav .wd-nav-mobile > li > .wd-nav-opener{border-radius:10px}
.mobile-nav .wd-nav-mobile > li.menu-item-4351 > a::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231E73BE%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%209l10-5%2010%205-10%205z%20M6%2011v5c3%202%209%202%2012%200v-5%20M22%209v6%22%2F%3E%3C%2Fsvg%3E")}
.mobile-nav .wd-nav-mobile > li.menu-item-4352 > a::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231E73BE%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011l9-7%209%207%20M5%2010v10h5v-6h4v6h5V10%22%2F%3E%3C%2Fsvg%3E")}
.mobile-nav .wd-nav-mobile > li.menu-item-4353 > a::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231E73BE%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%201%200%200%2018%209%209%200%200%200%200-18z%20M12%2011v6%20M12%207.5h.01%22%2F%3E%3C%2Fsvg%3E")}
.mobile-nav .wd-nav-mobile > li.menu-item-4365 > a::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231E73BE%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v11H9l-5%204z%20M8%209.5h8%20M8%2012.5h5%22%2F%3E%3C%2Fsvg%3E")}
.mobile-nav .wd-nav-mobile > li.menu-item-4923 > a::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231E73BE%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%203v6c0%205-3.5%208-8%209-4.5-1-8-4-8-9V6z%20M8.5%2012l2.5%202.5%204.5-5%22%2F%3E%3C%2Fsvg%3E")}
.mobile-nav .wd-nav-mobile > li.menu-item-6345 > a::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231E73BE%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208z%20M2%2021c0-4%203-6%207-6s7%202%207%206%20M16%203.5a4%204%200%200%201%200%207.5%20M22%2021c0-3-1.7-5-4.5-5.7%22%2F%3E%3C%2Fsvg%3E")}
.mobile-nav .wd-nav-mobile > li.menu-item-29500 > a::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231E73BE%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%208h14l-1.2%2012H6.2z%20M9%208V6.5a3%203%200%200%201%206%200V8%22%2F%3E%3C%2Fsvg%3E")}
.mobile-nav .wd-nav-mobile > li.menu-item-33202 > a::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2013a8%208%200%200%201%2016%200%20M4%2013v4h3v-5H4%20M20%2013v4h-3v-5h3%20M17%2017c0%202-2%203-5%203%22%2F%3E%3C%2Fsvg%3E")}
@keyframes alMenuIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.mobile-nav.wd-opened .wd-nav-mobile > li > a{animation:alMenuIn .35s cubic-bezier(.2,.7,.2,1) both}
.mobile-nav.wd-opened .wd-nav-mobile > li:nth-child(1) > a{animation-delay:0.04s}.mobile-nav.wd-opened .wd-nav-mobile > li:nth-child(2) > a{animation-delay:0.08s}.mobile-nav.wd-opened .wd-nav-mobile > li:nth-child(3) > a{animation-delay:0.12s}.mobile-nav.wd-opened .wd-nav-mobile > li:nth-child(4) > a{animation-delay:0.16s}.mobile-nav.wd-opened .wd-nav-mobile > li:nth-child(5) > a{animation-delay:0.20s}.mobile-nav.wd-opened .wd-nav-mobile > li:nth-child(6) > a{animation-delay:0.24s}.mobile-nav.wd-opened .wd-nav-mobile > li:nth-child(7) > a{animation-delay:0.28s}.mobile-nav.wd-opened .wd-nav-mobile > li:nth-child(8) > a{animation-delay:0.32s}.mobile-nav.wd-opened .wd-nav-mobile > li:nth-child(9) > a{animation-delay:0.36s}.mobile-nav.wd-opened .wd-nav-mobile > li:nth-child(10) > a{animation-delay:0.40s}
@media (prefers-reduced-motion: reduce){.mobile-nav.wd-opened .wd-nav-mobile > li > a{animation:none}}

/* =========================================================
   Mobile sub-menus: categories and brands (v1.0.4)
   ========================================================= */
.mobile-nav .wd-sub-menu > li > a{display:flex;align-items:center;gap:14px;min-height:62px;padding:0 18px;border-bottom:1px solid var(--al-border);font-family:var(--al-font);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--al-ink)}
.mobile-nav .wd-sub-menu > li > a .wd-nav-img,.mobile-nav .wd-sub-menu > li > a img{display:none!important}
.mobile-nav .wd-sub-menu > li:not(.wd-drilldown-back) > a::before{content:"";flex:none;width:46px;height:46px;border-radius:50%;background-color:#fff;background-position:center;background-repeat:no-repeat;background-size:cover;box-shadow:0 0 0 2px var(--al-border);transition:box-shadow .2s,transform .2s}
.mobile-nav .wd-sub-menu > li:not(.wd-drilldown-back) > a:active::before{transform:scale(.94);box-shadow:0 0 0 2px var(--al-primary)}
.mobile-nav .wd-sub-menu > li.current-menu-item > a{color:var(--al-primary)}
.mobile-nav .wd-sub-menu > li.current-menu-item > a::before{box-shadow:0 0 0 2px var(--al-primary)}
.mobile-nav .wd-drilldown-back{background:var(--al-bg)}
.mobile-nav .wd-drilldown-back > a{min-height:56px;font-size:0!important;color:var(--al-ink);border-bottom:1px solid var(--al-border)}
.mobile-nav .wd-drilldown-back > a::after{content:"Retour au menu";font-size:15px;font-weight:700;text-transform:none;letter-spacing:0}
.mobile-nav.wd-opened .wd-sub-menu > li > a{animation:alMenuIn .3s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion: reduce){.mobile-nav.wd-opened .wd-sub-menu > li > a{animation:none}}
.mobile-nav .wd-sub-menu > li.menu-item-4355 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/11/key-prog-7-2-1-300x300.webp")}
.mobile-nav .wd-sub-menu > li.menu-item-4356 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/06/key-prog-2-300x300.jpg")}
.mobile-nav .wd-sub-menu > li.menu-item-4357 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2023/03/key-prog-8-300x300.png")}
.mobile-nav .wd-sub-menu > li.menu-item-4358 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/06/key-prog-1-300x300.jpg")}
.mobile-nav .wd-sub-menu > li.menu-item-4360 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2023/03/key-prog-5-300x300.png")}
.mobile-nav .wd-sub-menu > li.menu-item-4361 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2023/12/SPECIAL-PROMO-2-300x299.jpg")}
.mobile-nav .wd-sub-menu > li.menu-item-4362 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2026/02/key-prog-3-1-300x300.webp")}
.mobile-nav .wd-sub-menu > li.menu-item-4363 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2023/03/key-prog-4-300x300.png")}
.mobile-nav .wd-sub-menu > li.menu-item-4364 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2023/02/Sans-titre-1-2-2-300x300.png")}
.mobile-nav .wd-sub-menu > li.menu-item-4937 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/06/key-prog-13-1-300x300.webp")}
.mobile-nav .wd-sub-menu > li.menu-item-4938 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2026/07/key-prog-10-1-300x300.webp")}
.mobile-nav .wd-sub-menu > li.menu-item-9071 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2026/02/key-prog-21-2-1-300x300.webp")}
.mobile-nav .wd-sub-menu > li.menu-item-9073 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/10/key-prog-14-2-300x300.webp")}
.mobile-nav .wd-sub-menu > li.menu-item-9074 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/10/key-prog-16-3-300x300.webp")}
.mobile-nav .wd-sub-menu > li.menu-item-9075 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/10/key-prog-15-2-300x300.webp")}
.mobile-nav .wd-sub-menu > li.menu-item-9076 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/10/key-prog-23-1-300x300.webp")}
.mobile-nav .wd-sub-menu > li.menu-item-9077 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/09/key-prog-17-1-300x300.webp")}
.mobile-nav .wd-sub-menu > li.menu-item-9078 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/09/key-prog-18-1-300x300.webp")}
.mobile-nav .wd-sub-menu > li.menu-item-30267 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2026/01/key-prog-28-1-300x300.webp")}
.mobile-nav .wd-sub-menu > li.menu-item-30817 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2026/01/key-prog-26-1-300x300.webp")}
.mobile-nav .wd-sub-menu > li.menu-item-31325 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2026/02/key-prog-29-1-300x300.webp")}
.mobile-nav .wd-sub-menu > li.menu-item-32495 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2024/10/key-prog-9-300x300.jpg")}
.mobile-nav .wd-sub-menu > li.menu-item-4924 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/02/abritus-nv-25-scaled-300x299.jpg");border-radius:12px;width:58px;background-size:cover}
.mobile-nav .wd-sub-menu > li.menu-item-4925 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/07/logo-alientech-1-300x300.webp");border-radius:12px;width:58px;background-size:cover}
.mobile-nav .wd-sub-menu > li.menu-item-4926 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/03/autel-red-logo-01-300x212.png");border-radius:12px;width:58px;background-size:cover}
.mobile-nav .wd-sub-menu > li.menu-item-4927 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/03/images.jpeg");border-radius:12px;width:58px;background-size:cover}
.mobile-nav .wd-sub-menu > li.menu-item-4928 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/02/magic-motor-sport-1-300x300.jpg");border-radius:12px;width:58px;background-size:cover}
.mobile-nav .wd-sub-menu > li.menu-item-4929 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2023/03/xhorse-logo-300x286.png");border-radius:12px;width:58px;background-size:cover}
.mobile-nav .wd-sub-menu > li.menu-item-4939 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/07/mk3-300x300.png");border-radius:12px;width:58px;background-size:cover}
.mobile-nav .wd-sub-menu > li.menu-item-6946 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/08/mise-a-jour-KYDZ-300x300.jpg");border-radius:12px;width:58px;background-size:cover}
.mobile-nav .wd-sub-menu > li.menu-item-6947 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/09/Rectangle-75-1-300x300.webp");border-radius:12px;width:58px;background-size:cover}
.mobile-nav .wd-sub-menu > li.menu-item-6948 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2025/07/logo-obdstar-1-1-300x300.webp");border-radius:12px;width:58px;background-size:cover}
.mobile-nav .wd-sub-menu > li.menu-item-33371 > a::before{background-image:url("https://autologic.ma/wp-content/uploads/2026/02/Thinkcar-1-300x309.webp");border-radius:12px;width:58px;background-size:cover}

.mobile-nav .wd-nav-mobile .wd-sub-menu > li > a{min-height:64px!important;text-transform:none!important;letter-spacing:0!important;font-size:15px!important;font-weight:600!important;padding-top:8px!important;padding-bottom:8px!important}
.mobile-nav .wd-nav-mobile .wd-sub-menu > li.wd-drilldown-back > a{min-height:56px!important;font-size:0!important}
.mobile-nav .wd-nav-mobile > li > a{text-transform:none!important;letter-spacing:0!important}

.mobile-nav .wd-nav-mobile > li{transform:none!important;animation:none!important}