/* ==========================================================================\n   NOA-O MOBILE 1.1.0\n   Wider mobile canvas + SLS-style 3-part header:\n   burger left / logo centered / selection basket right.\n   Loaded after noao-mobile-100.css.\n   ========================================================================== */

/* Header selection icon is mobile-only; desktop keeps the text label. */
.noao-selection-link__icon {
  display: none;
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767px) {
  :root {
    --noao-mobile-gutter: 12px;
  }

  /* ----------------------------------------------------------------------
     Mobile header: same reading order as 7Rental / LiveBroker.
     Burger | centered NOA-O logo | Ma sélection basket
     ---------------------------------------------------------------------- */
  .noao-header .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-inline: 12px !important;
  }

  .noao-header__inner {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    min-height: 78px !important;
    gap: 8px !important;
  }

  .noao-menu-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  .noao-brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .noao-brand__logo {
    width: min(154px, 42vw) !important;
    max-width: 100% !important;
    max-height: 53px !important;
  }

  .noao-header__actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }

  .noao-header__actions .noao-search,
  .noao-header__actions .noao-header__project {
    display: none !important;
  }

  .noao-header__actions .noao-selection-link--header {
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border: 1px solid rgba(11,17,23,.12) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #0b1117 !important;
    text-decoration: none !important;
    box-shadow: 0 7px 20px rgba(11,17,23,.06);
  }

  .noao-header__actions .noao-selection-link--header:active {
    transform: translateY(1px);
  }

  .noao-selection-link__icon {
    display: block !important;
  }

  .noao-selection-link__label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .noao-mainnav {
    top: 78px !important;
  }

  /* Ma sélection is now always visible in the header: avoid duplicating it
     inside the opened mobile menu. */
  .noao-mainnav__mobile-actions > a:first-child {
    display: none !important;
  }

  /* ----------------------------------------------------------------------
     Wider content canvas.
     The CMS pages were receiving the Bootstrap container gutter several
     times (outer layout + custom CMS containers). Keep one 12px gutter only.
     ---------------------------------------------------------------------- */
  .noao-v2-home .container,
  body#category .container,
  body#search .container,
  body#product .container,
  body#cms .columns-container.container,
  body.page-cms .columns-container.container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--noao-mobile-gutter) !important;
    padding-right: var(--noao-mobile-gutter) !important;
  }

  body#cms .columns-container > .page,
  body.page-cms .columns-container > .page,
  body#cms #center-column,
  body.page-cms #center-column {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body#cms .page-content--cms,
  body.page-cms .page-content--cms {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Custom CMS content often contains its own .container. Do not apply a
     second gutter there. */
  body#cms .page-content--cms .container,
  body.page-cms .page-content--cms .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Heroes/cards can now use the available screen width. */
  body#cms .page-content--cms .noao-v2-hero,
  body.page-cms .page-content--cms .noao-v2-hero {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body#cms .page-content--cms .noao-v2-hero__shell,
  body.page-cms .page-content--cms .noao-v2-hero__shell,
  body#cms .page-content--cms .noao-v2-project__shell,
  body.page-cms .page-content--cms .noao-v2-project__shell,
  body#cms .page-content--cms .noao-v2-la__shell,
  body.page-cms .page-content--cms .noao-v2-la__shell,
  body#cms .page-content--cms .noao-v2-sav__shell,
  body.page-cms .page-content--cms .noao-v2-sav__shell,
  body#cms .page-content--cms .noao-v2-final__shell,
  body.page-cms .page-content--cms .noao-v2-final__shell {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .noao-v2-hero__shell {
    border-radius: 20px !important;
  }

  .noao-v2-hero__content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* A little more usable width for standard cards / sections too. */
  .noao-v2-path,
  .noao-v2-solution,
  .noao-v2-project__content,
  .noao-v2-la__content,
  .noao-v2-sav__shell,
  .noao-v2-final__shell {
    border-radius: 18px !important;
  }
}

@media (max-width: 390px) {
  .noao-header .container {
    padding-inline: 9px !important;
  }

  .noao-header__inner {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    min-height: 72px !important;
  }

  .noao-menu-toggle,
  .noao-header__actions .noao-selection-link--header {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .noao-brand__logo {
    width: min(140px, 41vw) !important;
  }

  .noao-mainnav {
    top: 72px !important;
  }
}