[data-catalogue-mega] { padding: 0 0.5rem; }
  /* A closed mega panel is display:none once its fade-out is over (setOpen);
     opacity-0 alone left ~850 elements in style and layout on every desktop
     page. The navigation editor's own !important rule still shows the panel
     it is editing. */
  [data-mega-panel][data-mega-parked] { display: none !important; }
  .gto-mega-frame {
    display: flex;
    flex-direction: column;
    max-height: var(--gto-mega-available-height, calc(100dvh - 10rem));
    width: min(96rem, calc(100vw - 1rem));
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgb(226 232 240);
    border-top: 0;
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: 0 24px 50px -18px rgba(15, 23, 42, 0.32);
    overflow: hidden;
  }
  .gto-section-mega-grid {
    display: grid;
    /* One column per group, whatever the number, and always ONE row: the
       column count is not written down anywhere. It used to say repeat(7),
       which was true of all three sections on the day it was written — and an
       eighth group would have silently wrapped to a second row and given the
       panel back the height #25 was about. Columns share the width instead
       (minmax(0, …) so they shrink rather than overflow a frame that clips).
       Past nine or so groups they would be too narrow to read: raise the
       1200 px breakpoint below rather than let that happen quietly. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Whatever the panel still cannot show has to LOOK unshown (#25). The two
       white bands ride with the content (attachment local); the two shadows
       stay with the box (attachment scroll). At an end the band covers the
       shadow, so a shadow is
       painted at exactly the edge that still hides rayons — and nowhere else.
       The scrollbar is styled visible for the same reason. */
    scrollbar-width: thin;
    scrollbar-color: rgb(148 163 184) transparent;
    background:
      linear-gradient(#fff, rgba(255, 255, 255, 0)) 0 0 / 100% 22px no-repeat local,
      linear-gradient(rgba(255, 255, 255, 0), #fff) 0 100% / 100% 22px no-repeat local,
      radial-gradient(farthest-side at 50% 0, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0)) 0 0 / 100% 11px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0)) 0 100% / 100% 11px no-repeat scroll;
  }
  .gto-section-mega-grid::-webkit-scrollbar { width: 10px; }
  .gto-section-mega-grid::-webkit-scrollbar-track { background: transparent; }
  .gto-section-mega-grid::-webkit-scrollbar-thumb { border: 3px solid #fff; border-radius: 999px; background: rgb(148 163 184); }
  .gto-section-mega-column {
    min-width: 0;
    padding: 1rem 0.85rem 1.1rem;
    border-left: 1px solid rgb(226 232 240);
  }
  .gto-section-mega-column:first-child { border-left: 0; }
  /* A column shows its first rayons and keeps the rest one click away, so the
     tallest column — not the longest list — sets the panel height. The cut is
     POSITIONAL, never a marker on a row: the menu filter reorders rows by
     score inside the list, so a match promoted to the top becomes visible by
     the same rule that hid it. */
  .gto-section-mega-column[data-mega-collapsed] .gto-mega-list > li:nth-child(n+7) { display: none; }
  .gto-mega-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.2rem 0 0;
    padding: 0.4rem 0.6rem;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: rgb(29 78 216);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
  }
  .gto-mega-more:hover { background: rgb(239 246 255); }
  .gto-mega-more:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
  .gto-mega-more::after {
    content: "";
    width: 5px;
    height: 5px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-1px) rotate(45deg);
  }
  .gto-section-mega-column:not([data-mega-collapsed]) .gto-mega-more::after { transform: translateY(1px) rotate(-135deg); }
  .gto-section-mega-column[data-mega-collapsed] .gto-mega-more [data-more-less] { display: none; }
  .gto-section-mega-column:not([data-mega-collapsed]) .gto-mega-more [data-more-more] { display: none; }
  /* Both studios edit an entry where it sits: the navigation editor drags
     rayons between columns, the page editor rewrites their labels. A folded
     column would hide rayons from the person editing them, so editing unfolds
     every column. The button stays (its own wording is editable too) and
     simply has nothing left to reveal. */
  body.gnm-editing .gto-section-mega-column[data-mega-collapsed] .gto-mega-list > li,
  body.gpe-on .gto-section-mega-column[data-mega-collapsed] .gto-mega-list > li { display: list-item !important; }
  [data-mega-panel="infos"] .gto-mega-frame { max-width: 77rem; padding: 1rem; }
  [data-mega-panel="mobilite"] .gto-mega-frame { max-width: 50rem; padding: 1rem; }
  .gto-info-mega-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .gto-info-mega-grid h2 { margin: 0 0 0.5rem; padding: 0.55rem 0.6rem; font-size: 0.875rem; font-weight: 700; color: #0f172a; }
  .gto-mega-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.55rem;
    padding: 0.55rem 0.6rem;
    border-radius: 0.5rem;
    background: rgb(241 245 249);
    color: rgb(15 23 42);
    font-size: 0.875rem;
    font-weight: 750;
    line-height: 1.3;
    text-decoration: none;
  }
  .gto-mega-heading:hover { background: rgb(224 242 254); color: rgb(29 78 216); }
  .gto-mega-list { margin: 0; padding: 0; list-style: none; }
  .gto-mega-link {
    display: block;
    overflow: hidden;
    padding: 0.4rem 0.6rem;
    border-radius: 0.35rem;
    color: rgb(30 58 91);
    font-size: 0.84rem;
    line-height: 1.25;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .gto-mega-link:hover { background: rgb(239 246 255); color: rgb(29 78 216); }
  .gto-model-mega-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    height: min(56vh, 34rem);
    min-height: 0;
  }
  .gto-model-mega-column {
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.85rem 0.85rem 1.25rem;
    border-left: 1px solid rgb(226 232 240);
    scrollbar-color: rgb(148 163 184) transparent;
    scrollbar-width: thin;
  }
  .gto-model-mega-column:first-child { border-left: 0; }
  .gto-model-mega-section + .gto-model-mega-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(226 232 240);
  }
  /* Quick links to the part families, under the model columns. This is where
     the client's own vocabulary lives on desktop — "Nappes" in particular,
     which is a display group spanning three flex categories and therefore has
     no /pieces/categorie landing of its own (#1305, #1297). */
  .gto-mega-rayons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    flex-shrink: 0;
    border-top: 1px solid rgb(226 232 240);
    background: rgb(248 250 252);
  }
  .gto-mega-rayons-label {
    margin-right: 0.35rem;
    color: rgb(100 116 139);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .gto-mega-rayons-link {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border: 1px solid rgb(226 232 240);
    border-radius: 999px;
    background: #fff;
    color: rgb(30 41 59);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
  }
  .gto-mega-rayons-link:hover {
    background: rgb(239 246 255);
    color: rgb(29 78 216);
  }

  /* "Autres marques" is a real destination, not a caption: the client reported
     missing it entirely among the model columns (#1306). Give the whole picker
     a tinted ground so it reads as something to act on. */
  .gto-model-brand-picker {
    display: block;
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.6rem 0.6rem;
    border: 1px solid rgb(191 219 254);
    border-radius: 0.7rem;
    background: rgb(239 246 255);
  }
  .gto-model-brand-picker-label {
    display: block;
    margin-bottom: 0.3rem;
    color: rgb(29 78 216);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .gto-model-brand-select {
    display: block;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.35rem 2rem 0.35rem 0.65rem;
    border: 1px solid rgb(203 213 225);
    border-radius: 0.55rem;
    background-color: rgb(248 250 252);
    color: rgb(30 58 91);
    font-size: 0.78rem;
    font-weight: 700;
  }
  .gto-model-brand-select:focus-visible {
    border-color: rgb(96 165 250);
    background-color: #fff;
    outline: none;
    box-shadow: 0 0 0 2px rgb(219 234 254);
  }
  .gto-model-brand-status {
    margin: 0.5rem 0;
    color: rgb(100 116 139);
    font-size: 0.75rem;
  }
  [data-mega-panel] [data-mega-filter-hidden], [data-mega-filter-results][hidden], [data-mega-filter-bar][hidden] { display:none !important; }
  .gto-mega-filter-bar { display:flex; align-items:center; gap:0.3rem; flex:0 0 auto; width:clamp(17rem,27vw,24rem); margin-left:auto; border-radius:0.5rem; background:#f1f5f9; padding:0.2rem; }
  .gto-mega-filter-label { display:flex; align-items:center; gap:0.5rem; flex:1; min-width:0; color:#64748b; padding:0.5rem; }
  .gto-mega-filter-label svg { flex-shrink:0; }
  [data-mega-filter] { width:100%; min-width:0; border:0; padding:0; background:transparent; color:#172554; font:inherit; font-size:0.82rem; }
  [data-mega-filter]:focus-visible { outline:2px solid #2563eb; outline-offset:4px; }
  [data-mega-filter-clear] { border:0; background:transparent; color:#1d4ed8; font-size:0.8rem; cursor:pointer; padding:0.4rem; border-radius:0.35rem; }
  [data-mega-filter-clear]:hover { background:#e0f2fe; }
  [data-mega-filter-clear]:focus-visible { outline:2px solid #2563eb; }
  [data-mega-filter-status] { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .gto-mega-filter-feedback { margin:0; padding:0.8rem 1rem; color:#64748b; font-size:0.82rem; flex-shrink:0; }
  [data-mega-match] { background:#fef08a; color:#713f12; border-radius:2px; }
  .gto-mega-filter-results { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-content:start; gap:0.3rem; min-height:0; max-height:8rem; flex-shrink:0; overflow-y:auto; overscroll-behavior:contain; padding:0.5rem 1rem; }
  .gto-mega-filter-result { display:flex; flex-direction:column; gap:0.2rem; padding:0.65rem; border-radius:0.5rem; color:#172554; text-decoration:none; font-size:0.85rem; }
  .gto-mega-filter-result:hover { background:#eff6ff; color:#1d4ed8; }
  .gto-mega-extra-caption { grid-column:1 / -1; margin:0; padding:0 0.65rem; font-size:0.72rem; font-weight:600; color:#64748b; }
  .gto-mega-filter-brand { color:#64748b; font-size:0.7rem; }
  .gto-mega-intro { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.85rem 1rem; flex-shrink:0; border-top:2px solid #22d3ee; border-bottom:1px solid #e2e8f0; background:linear-gradient(110deg,#f0f9ff,#fff 65%); }
  .gto-mega-intro-copy { display:flex; align-items:center; gap:0.7rem; min-width:0; flex:1; }
  .gto-mega-intro-icon { display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0; border:1px solid #bae6fd; border-radius:10px; background:#e0f2fe; color:#075985; }
  .gto-mega-title { margin:0; color:#172554; font-size:1rem; line-height:1.25; font-weight:750; }
  .gto-mega-description { margin:3px 0 0; color:#64748b; font-size:0.78rem; line-height:1.4; }
  .gto-mega-all { display:inline-flex; align-items:center; gap:0.6rem; flex-shrink:0; padding:0.55rem 0.75rem; border:1px solid #bfdbfe; border-radius:0.5rem; background:white; color:#1d4ed8; font-size:0.8rem; font-weight:650; text-decoration:none; }
  .gto-mega-heading::after { content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:rotate(45deg); flex-shrink:0; opacity:.45; }
  .gto-mega-link, .gto-mega-heading, .gto-mega-all, .gto-mega-rayons-link { transition:background-color 140ms, color 140ms; }
  .gto-mega-heading::after, .gto-mega-all svg { transition:transform 140ms ease-out; }
  .gto-mega-heading:hover::after { transform:translateX(2px) rotate(45deg); opacity:1; }
  .gto-mega-all:hover { background:#eff6ff; }
  .gto-mega-close { display:inline-flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; height:36px; padding:0; border:1px solid #cbd5e1; border-radius:0.5rem; background:#fff; color:#475569; cursor:pointer; }
  .gto-mega-close:hover { background:#eff6ff; color:#1d4ed8; }
  .gto-mega-close:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
  .gto-mega-simple-intro { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:0.5rem; }
  .gto-mega-simple-intro .gto-mega-heading { flex:1; margin-bottom:0; }
  .gto-mega-all:hover svg { transform:translateX(2px); }
  .gto-mega-link:is(:hover,:focus-visible) { background:#eff6ff; color:#1d4ed8; }
  .gto-mega-frame :is(a,select):focus-visible { outline:2px solid #2563eb; outline-offset:-2px; border-radius:0.4rem; }
  .gto-section-mega-column .gto-mega-link, [data-mega-panel="mobilite"] .gto-mega-link { display:flex; align-items:baseline; justify-content:space-between; gap:0.35rem; padding-left:0.5rem; padding-right:0.5rem; white-space:normal; }
  .gto-section-mega-column .gto-mega-link > span:first-child, [data-mega-panel="mobilite"] .gto-mega-link > span:first-child { min-width:0; overflow-wrap:anywhere; line-height:1.4; }
  /* Seven columns are narrower than four, and overflow-wrap:anywhere reads
     that as licence to split « reconditionnement » across two lines.
     break-word breaks only a word that genuinely cannot fit on a line of its
     own, which no rayon label does. */
  .gto-section-mega-column .gto-mega-link > span:first-child {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  /* Shelf marks (lib/catalog-shelf-icons): one family glyph per menu entry.
     Written LAST inside the link and ordered first, because the inline menu
     editor addresses a link's label as its first child span
     (public/islands/navigation-menu-inline-editor.js). */
  .gto-shelf-icon { order:-1; flex:0 0 auto; align-self:flex-start; margin-top:1px; color:#94a3b8; }
  .gto-shelf-label { flex:1 1 auto; min-width:0; }
  a:is(:hover,:focus-visible) > .gto-shelf-icon { color:inherit; }
  .gto-section-mega-column [data-navigation-menu-count], [data-mega-panel="mobilite"] [data-navigation-menu-count] { flex-shrink:0; margin-left:0; padding:1px 5px; border-radius:4px; background:#f1f5f9; color:#64748b; font-size:0.65rem; font-variant-numeric:tabular-nums; }
  .gto-model-mega-section > .gto-mega-heading { position:sticky; top:0; z-index:1; box-shadow:0 2px 0 white; }
  .gto-model-mega-column { scrollbar-gutter:stable; }
  /* Same scroll cue as the section grid: each model column scrolls on its own,
     and six silent columns are six silent cuts. */
  .gto-model-mega-column {
    background:
      linear-gradient(#fff, rgba(255, 255, 255, 0)) 0 0 / 100% 18px no-repeat local,
      linear-gradient(rgba(255, 255, 255, 0), #fff) 0 100% / 100% 18px no-repeat local,
      radial-gradient(farthest-side at 50% 0, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0)) 0 0 / 100% 9px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0)) 0 100% / 100% 9px no-repeat scroll;
  }
  .gto-model-mega-column .gto-mega-link { white-space:normal; overflow-wrap:anywhere; line-height:1.35; }
  /* A model row that carries its parts counter (#14) reads like the shelf
     rows that already show one: name left, number right. Plain CSS rather
     than utilities, next to the rule it extends. */
  .gto-model-mega-column .gto-mega-link.is-counted { display:flex; align-items:baseline; justify-content:space-between; gap:0.35rem; }
  .gto-model-mega-column .gto-mega-link.is-counted > span:first-child { min-width:0; overflow-wrap:anywhere; }
  .gto-model-count { flex:0 0 auto; color:#94a3b8; font-size:0.72rem; font-variant-numeric:tabular-nums; }
  .gto-mega-link:is(:hover,:focus-visible) .gto-model-count { color:#60a5fa; }
  .gto-model-brand-select { padding-right:1.2rem; font-weight:600; }
  @media (max-width:1199px) {
    .gto-model-mega-column { padding-left:0.5rem; padding-right:0.5rem; }
    .gto-mega-description { font-size:0.75rem; }
  }
  @media (prefers-reduced-motion:reduce) {
    .gto-mega-link, .gto-mega-heading, .gto-mega-all, .gto-mega-rayons-link,
    .gto-mega-heading::after, .gto-mega-all svg { transition:none; }
    .gto-mega-all:hover svg { transform:none; }
    .gto-mega-heading:hover::after { transform:rotate(45deg); }
  }
  /* One row of columns for as long as the labels stay readable. Folding seven
     groups into four columns costs a SECOND row, and a second row doubles the
     panel: it was the single biggest reason the lower rayons fell out of sight
     between 1200 and 1440 px (#25). Below 1200 the columns would be too narrow
     to read, so the fold comes back — with the rayon cut and the scroll cue
     above to keep it honest. */
  @media (max-width: 1199px) {
    /* grid-auto-flow back to row, or the columns above would keep filling one
       line past the four this template declares. */
    .gto-section-mega-grid { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .gto-section-mega-column { padding: 0.85rem 0.7rem 0.9rem; }
    .gto-section-mega-column:nth-child(5) { border-left: 0; border-top: 1px solid rgb(226 232 240); }
    .gto-section-mega-column:nth-child(n+6) { border-top: 1px solid rgb(226 232 240); }
    .gto-section-mega-column .gto-mega-link { padding: 0.32rem 0.5rem; font-size: 0.82rem; }
    /* Two rows of columns cost twice the height, so the cut is tighter here —
       iPad landscape is exactly 1024 wide and is the narrowest desktop menu
       there is. The button names the column total, not the folded count, so a
       cut that moves with the viewport stays truthful. */
    .gto-section-mega-column[data-mega-collapsed] .gto-mega-list > li:nth-child(n+5) { display: none; }
  }
  @media (min-width: 1200px) and (max-width: 1439px) {
    .gto-section-mega-column { padding-left: 0.6rem; padding-right: 0.6rem; }
    .gto-section-mega-column .gto-mega-link { padding-left: 0.4rem; padding-right: 0.4rem; font-size: 0.8rem; }
    .gto-mega-heading { padding-left: 0.45rem; padding-right: 0.45rem; font-size: 0.82rem; }
  }
  /* What bounds a panel is the viewport HEIGHT, so the cut answers to height
     too. A 650 px-tall laptop window leaves about 400 px of panel: six rayons
     a column no longer fit there, four do, and the rest stay one click away
     instead of one silent scroll away. */
  @media (max-height: 760px) {
    .gto-section-mega-column { padding-top: 0.7rem; padding-bottom: 0.75rem; }
    .gto-mega-heading { margin-bottom: 0.35rem; padding-top: 0.4rem; padding-bottom: 0.4rem; }
    .gto-section-mega-column .gto-mega-link { padding-top: 0.28rem; padding-bottom: 0.28rem; }
    .gto-section-mega-column[data-mega-collapsed] .gto-mega-list > li:nth-child(n+5) { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-mega-panel] { transition: none !important; }
  }