/* m-discover : design mobile (<= 759px) — Accueil, catalogue, fiche, métier, packs */
/* Desktop (>= 1024px) inchangé. Tablette 760–1023 : pas de régression volontaire. */

/* ─── Helpers rails ─── */
@media (max-width: 759px) {
  [data-m-home],
  [data-m-cat],
  [data-m-fiche],
  [data-m-metier],
  [data-m-packs] {
    overflow-x: clip;
  }

  /* ═══════════════════════════════════════════
     ACCUEIL
     ═══════════════════════════════════════════ */
  [data-m-home] {
    padding-bottom: calc(var(--m-bar-h) + 16px + env(safe-area-inset-bottom, 0px));
  }

  [data-m-home] .hero-home,
  [data-m-hero] {
    padding: 28px var(--m-gutter) 20px !important;
    gap: 14px !important;
    align-items: stretch !important;
    text-align: left !important;
    background-image:
      linear-gradient(180deg, rgba(251, 248, 243, .92) 0%, rgba(251, 248, 243, .78) 55%, #FBF8F3 100%),
      url("../img/banniere.png") !important;
    background-position: center, center bottom !important;
    background-size: cover, 140% auto !important;
  }

  [data-m-hero-title] {
    font-size: 28px !important;
    line-height: 1.12 !important;
    max-width: none !important;
  }

  [data-m-hero-lead] {
    font-size: 16px !important;
    line-height: 1.5 !important;
    max-width: none !important;
  }

  [data-m-hero-search] {
    max-width: none !important;
    width: 100% !important;
  }

  [data-m-hero-search] {
    min-width: 0 !important;
    box-sizing: border-box;
  }

  [data-m-hero-search] #metier-search {
    height: var(--m-tap) !important;
    border-radius: var(--m-radius-sm) !important;
    box-shadow: var(--m-shadow);
    padding: 0 10px 0 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  [data-m-hero-search] #metier-search > i {
    flex: none;
  }

  /* Safari iOS : un <input> garde une largeur intrinsèque (size=20) qui pousse le champ hors écran.
     width:0 + flex-basis:0 + min-width:0 force le champ à se contenter de la place restante. */
  [data-m-hero-search] #metier-q {
    font-size: 16px !important;
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0;
    margin: 0;
    border-radius: 0;
    text-overflow: ellipsis;
  }

  [data-m-hero-search] #metier-search > a {
    flex: none;
    white-space: nowrap;
  }

  [data-m-rail-label] {
    margin: 8px var(--m-gutter) 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-rust);
    letter-spacing: .02em;
  }

  [data-m-rail] {
    padding: 10px 0 18px var(--m-gutter) !important;
    gap: 10px !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--m-gutter);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  [data-m-rail]::after {
    content: "";
    flex: 0 0 var(--m-gutter);
  }

  [data-m-rail] .metier-tile {
    flex: 0 0 128px !important;
    scroll-snap-align: start;
    border-radius: var(--m-radius) !important;
    padding: 10px !important;
    gap: 8px !important;
    box-shadow: var(--m-shadow);
  }

  [data-m-rail] .metier-tile .metier-tile-img,
  [data-m-rail] .metier-tile > span[aria-hidden] {
    border-radius: 12px !important;
  }

  [data-m-rail] .metier-tile > span:nth-of-type(1),
  [data-m-rail] .metier-tile > span:last-of-type:not([style*="absolute"]) {
    font-size: 15px !important;
    min-height: 36px !important;
  }

  [data-m-section]:not([data-m-steps]) {
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }

  [data-m-reco] {
    padding-top: 28px !important;
    gap: 16px !important;
  }

  [data-m-reco-head] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  [data-m-reco-head] .metier-current-img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 14px !important;
  }

  [data-m-reco-head] h2 {
    font-size: 24px !important;
  }

  [data-m-reco-head] p {
    font-size: 15px !important;
  }

  [data-m-reco-link] {
    align-self: flex-start;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 0;
  }

  /* Rail horizontal de cartes presta */
  [data-m-reco-grid] {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto;
    margin-left: calc(-1 * var(--m-gutter));
    margin-right: calc(-1 * var(--m-gutter));
    padding: 4px var(--m-gutter) 12px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--m-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [data-m-reco-grid]::-webkit-scrollbar { display: none; }

  [data-m-reco-grid]::after {
    content: "";
    flex: 0 0 4px;
  }

  [data-m-reco-grid] > .presta-card {
    flex: 0 0 min(78vw, 300px);
    scroll-snap-align: start;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow);
  }

  .presta-card-visual {
    height: 140px !important;
  }

  .presta-card-cta {
    height: var(--m-tap) !important;
    border-radius: var(--m-radius-sm) !important;
    font-size: 16px !important;
  }

  .presta-card-list {
    display: none !important; /* less clutter on mobile cards in rails */
  }

  [data-m-pack-teaser] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 18px !important;
    border-radius: var(--m-radius) !important;
    border-style: solid !important;
    border-color: var(--c-green) !important;
    background: #fff;
    box-shadow: var(--m-shadow);
  }

  /* En colonne, le flex-basis 380px inline deviendrait une hauteur : on le neutralise. */
  [data-m-pack-teaser] > * {
    flex: 0 0 auto !important;
    min-width: 0;
  }

  [data-m-pack-teaser] > div:first-child > span {
    flex-wrap: wrap;
    line-height: 1.35;
  }

  [data-m-pack-teaser] form button {
    width: 100%;
    height: var(--m-tap) !important;
    border-radius: var(--m-radius-sm) !important;
  }

  [data-m-rayons] {
    padding-top: 48px !important;
  }

  [data-m-rayons] > h2 {
    font-size: 24px !important;
  }

  [data-m-rayons-grid] {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto;
    margin-left: calc(-1 * var(--m-gutter));
    margin-right: calc(-1 * var(--m-gutter));
    padding: 4px var(--m-gutter) 10px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--m-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [data-m-rayons-grid]::-webkit-scrollbar { display: none; }

  [data-m-rayons-grid]::after {
    content: "";
    flex: 0 0 4px;
  }

  [data-m-rayons-grid] .rayon-card {
    flex: 0 0 min(72vw, 260px);
    scroll-snap-align: start;
    border-radius: var(--m-radius) !important;
    padding: 16px !important;
    box-shadow: var(--m-shadow);
    min-height: 160px;
  }

  [data-m-surmesure] {
    flex-direction: column !important;
    text-align: left !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px !important;
    border-radius: var(--m-radius-sm) !important;
  }

  [data-m-surmesure] a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: var(--m-radius-sm);
    border: 2px solid var(--c-green);
    padding: 0 14px;
    text-decoration: none;
    color: var(--c-green);
  }

  [data-m-steps] {
    margin-top: 48px !important;
  }

  [data-m-steps] > div {
    padding: 36px var(--m-gutter) !important;
    gap: 18px !important;
  }

  [data-m-steps] h2 {
    font-size: 24px !important;
  }

  [data-m-steps-grid] {
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto;
    margin-left: calc(-1 * var(--m-gutter));
    margin-right: calc(-1 * var(--m-gutter));
    padding: 4px var(--m-gutter) 8px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--m-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [data-m-steps-grid]::-webkit-scrollbar { display: none; }

  [data-m-steps-grid]::after {
    content: "";
    flex: 0 0 4px;
  }

  [data-m-steps-grid] .step-card {
    flex: 0 0 min(82vw, 300px);
    scroll-snap-align: start;
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    border-radius: var(--m-radius);
    padding: 14px;
  }

  [data-m-cta] {
    padding-top: 40px !important;
    padding-bottom: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  [data-m-cta-card] {
    padding: 22px !important;
    border-radius: var(--m-radius) !important;
  }

  [data-m-cta-card] h2 {
    font-size: 22px !important;
  }

  [data-m-cta-card] a[href*="conseil"] {
    width: 100%;
    justify-content: center;
    height: var(--m-tap) !important;
    border-radius: var(--m-radius-sm) !important;
  }

  /* ═══════════════════════════════════════════
     CARTES PRESTA (partagé)
     ═══════════════════════════════════════════ */
  .presta-card {
    border-radius: var(--m-radius) !important;
  }

  .presta-card-body {
    padding: 16px !important;
    gap: 10px !important;
  }

  .presta-card-body h3 {
    font-size: 18px !important;
  }

  /* ═══════════════════════════════════════════
     CATALOGUE
     ═══════════════════════════════════════════ */
  .cat-page[data-m-cat],
  [data-m-cat].cat-page {
    padding: 16px var(--m-gutter) calc(var(--m-bar-h) + 24px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 14px !important;
  }

  [data-m-cat] .cat-crumb {
    font-size: 13px;
  }

  [data-m-cat] .cat-head h1 {
    font-size: 26px !important;
    line-height: 1.15;
  }

  [data-m-cat] .cat-head p {
    font-size: 15px !important;
    line-height: 1.5;
  }

  [data-m-cat] .cat-shell {
    display: flex !important;
    flex-direction: column;
    gap: 12px !important;
  }

  /* Barre outils sticky */
  [data-m-cat] .cat-tools {
    position: sticky;
    top: 0;
    z-index: 25;
    background: var(--c-cream);
    margin: 0 calc(-1 * var(--m-gutter));
    padding: 10px var(--m-gutter);
    gap: 8px !important;
    flex-wrap: nowrap !important;
    box-shadow: 0 8px 16px -12px rgba(29, 36, 32, .25);
  }

  [data-m-cat] .cat-tools input[type="search"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: var(--m-tap) !important;
    border-radius: var(--m-radius-sm) !important;
    border-color: var(--c-green) !important;
  }

  [data-m-cat] .cat-tools select {
    flex: 0 0 auto !important;
    max-width: 42%;
    height: var(--m-tap) !important;
    border-radius: var(--m-radius-sm) !important;
  }

  [data-m-cat] .cat-tools button[type="submit"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  /* Bouton Filtrer + panneau plein écran */
  [data-m-cat] .cat-side {
    order: -1;
  }

  [data-m-cat] .cat-facets > summary {
    min-height: var(--m-tap);
    border-radius: var(--m-radius-sm) !important;
    padding: 0 16px !important;
    font-size: 16px !important;
    gap: 10px !important;
    box-shadow: var(--m-shadow);
  }

  [data-m-cat] .cat-facets > summary .ti {
    font-size: 22px;
    color: var(--c-green);
  }

  [data-m-cat] .cat-facets > summary span {
    flex: 1;
  }

  [data-m-cat] .cat-filter-badge {
    font-style: normal;
    min-width: 24px;
    height: 24px;
    border-radius: 99px;
    background: var(--c-coral);
    color: var(--c-ink);
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
  }

  [data-m-cat] .cat-facets[open] {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--c-cream);
    padding: calc(12px + env(safe-area-inset-top, 0px)) var(--m-gutter) calc(var(--m-bar-h) + 24px + env(safe-area-inset-bottom, 0px));
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  [data-m-cat] .cat-facets[open] > summary {
    border-radius: var(--m-radius-sm) !important;
    border-bottom: 2px solid var(--c-green) !important;
    margin-bottom: 12px;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  [data-m-cat] .cat-facets[open] > summary::after {
    content: "Fermer";
    font-size: 14px;
    font-weight: 700;
    color: var(--c-rust);
  }

  [data-m-cat] .cat-facets-body {
    border: 0 !important;
    border-radius: var(--m-radius) !important;
    padding: 8px 4px 20px !important;
    background: transparent !important;
    flex: 1;
  }

  [data-m-cat] .cat-link,
  [data-m-cat] .cat-ray,
  [data-m-cat] .cat-met {
    min-height: 48px;
    padding: 12px 12px !important;
    font-size: 16px !important;
    border-radius: var(--m-radius-sm) !important;
  }

  [data-m-cat] .cat-met-q {
    height: var(--m-tap) !important;
    border-radius: var(--m-radius-sm) !important;
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }

  [data-m-cat] .cat-group > summary {
    min-height: 48px;
    padding: 12px 12px !important;
    font-size: 16px !important;
  }

  [data-m-cat] .cat-clear {
    min-height: 48px;
    border-radius: var(--m-radius-sm);
    border: 2px solid var(--c-line);
    margin: 16px 0 8px !important;
  }

  [data-m-cat] .cat-facets-done {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--m-tap);
    margin-top: 12px;
    border: 0;
    border-radius: var(--m-radius-sm);
    background: var(--c-green);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    font-family: inherit;
  }

  [data-m-cat] .cat-facets-done:focus-visible {
    outline: 3px solid var(--c-coral);
    outline-offset: 2px;
  }

  /* Chips filtres actifs */
  [data-m-cat] .cat-chips,
  [data-m-chips] {
    gap: 8px !important;
    margin: 2px 0 4px;
  }

  [data-m-cat] .cat-chip {
    min-height: 40px;
    padding: 8px 14px 8px 14px !important;
    font-size: 15px !important;
    background: var(--c-green-soft) !important;
    border: 1.5px solid var(--c-green);
    border-radius: 99px;
  }

  [data-m-cat] .cat-count {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-ink-2);
  }

  /* Grille 1 colonne soignée */
  [data-m-cat] .cat-grid {
    display: flex !important;
    flex-direction: column;
    gap: 14px !important;
  }

  [data-m-cat] .cat-card {
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow);
    border-color: var(--c-line) !important;
  }

  [data-m-cat] .cat-card-visual {
    height: auto !important;
    aspect-ratio: 16 / 10;
  }

  [data-m-cat] .cat-card-body {
    padding: 16px !important;
    gap: 8px !important;
  }

  [data-m-cat] .cat-card-title h3 {
    font-size: 19px !important;
  }

  [data-m-cat] .cat-card-what,
  [data-m-cat] .cat-card-for {
    font-size: 15px !important;
    line-height: 1.45;
  }

  [data-m-cat] .cat-card-foot {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid #EFEAE1;
    margin-top: 6px;
  }

  [data-m-cat] .cat-card-price span:first-child {
    font-size: 24px !important;
  }

  [data-m-cat] .cat-card-foot button {
    width: 100%;
    height: var(--m-tap) !important;
    border-radius: var(--m-radius-sm) !important;
    font-size: 16px !important;
  }

  [data-m-cat] .cat-empty {
    padding: 24px 18px !important;
    border-radius: var(--m-radius) !important;
  }

  [data-m-cat] .cat-devis {
    width: 100%;
    justify-content: center;
    height: var(--m-tap) !important;
    border-radius: var(--m-radius-sm) !important;
  }

  /* ═══════════════════════════════════════════
     FICHE PRESTATION
     ═══════════════════════════════════════════ */
  [data-m-fiche] {
    padding: 16px var(--m-gutter) 0 !important;
    gap: 16px !important;
    padding-bottom: calc(var(--m-bar-h) + 88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  [data-m-fiche-crumb] {
    font-size: 13px !important;
  }

  [data-m-fiche-split] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  [data-m-fiche-col] {
    display: contents !important;
  }

  [data-m-fiche-intro] {
    order: 1;
    gap: 10px !important;
  }

  [data-m-fiche-intro] h1 {
    font-size: 26px !important;
    line-height: 1.12 !important;
  }

  [data-m-fiche-intro] p {
    font-size: 16px !important;
  }

  [data-m-fiche-cover] {
    order: 2;
    border-radius: var(--m-radius) !important;
    width: 100%;
  }

  .fiche-cover[data-m-fiche-cover],
  [data-m-fiche] .fiche-cover {
    border-radius: var(--m-radius) !important;
  }

  [data-m-fiche-buy] {
    order: 3;
    position: static !important;
    top: auto !important;
    border-radius: var(--m-radius) !important;
    padding: 18px !important;
    gap: 12px !important;
    box-shadow: var(--m-shadow);
  }

  [data-m-fiche-buy] > div:first-child span:first-child {
    font-size: 28px !important;
  }

  [data-m-fiche] .fiche-opt {
    min-height: var(--m-tap) !important;
    padding: 14px !important;
    border-radius: var(--m-radius-sm) !important;
    border-width: 2px !important;
    gap: 12px !important;
    font-size: 15px;
  }

  [data-m-fiche] .fiche-opt input {
    width: 24px !important;
    height: 24px !important;
  }

  [data-m-fiche] .m-hide-btns > button {
    display: none !important;
  }

  [data-m-fiche-trust] {
    font-size: 14px !important;
  }

  [data-m-fiche-rest] {
    order: 4;
    gap: 18px !important;
  }

  [data-m-fiche-rest] section,
  [data-m-fiche-boxes] section {
    border-radius: var(--m-radius) !important;
    padding: 18px !important;
  }

  [data-m-fiche-rest] h2,
  [data-m-fiche-boxes] h2 {
    font-size: 19px !important;
  }

  [data-m-fiche-points] span,
  [data-m-fiche-for] a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 10px 14px !important;
    border-radius: var(--m-radius-sm) !important;
    font-size: 15px !important;
  }

  [data-m-fiche-boxes] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  [data-m-fiche-related] {
    order: 5;
    padding-top: 8px !important;
  }

  [data-m-fiche-related] h2 {
    font-size: 22px !important;
  }

  [data-m-related-grid] {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto;
    margin-left: calc(-1 * var(--m-gutter));
    margin-right: calc(-1 * var(--m-gutter));
    padding: 4px var(--m-gutter) 8px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--m-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [data-m-related-grid]::-webkit-scrollbar { display: none; }

  [data-m-related-grid] .related-card {
    flex: 0 0 min(78vw, 280px);
    scroll-snap-align: start;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow);
  }

  /* Barre d'achat collante au-dessus de la tab bar */
  [data-m-fiche-bar] {
    display: block !important;
  }

  .m-fiche-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--m-bar-h) + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px var(--m-gutter);
    background: #fff;
    border-top: 1px solid var(--c-line);
    box-shadow: var(--m-shadow-up);
  }

  .m-fiche-bar-price {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .m-fiche-bar-price strong {
    font-family: Outfit, sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: var(--c-green);
    line-height: 1.1;
  }

  .m-fiche-bar-price > span {
    font-size: 12px;
    color: var(--c-ink-2);
    line-height: 1.3;
  }

  .m-fiche-bar-acompte {
    font-weight: 700;
    color: var(--c-rust) !important;
  }

  .m-fiche-bar-btn {
    flex: none;
    height: var(--m-tap);
    min-width: 120px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--m-radius-sm);
    background: var(--c-green);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
  }

  .m-fiche-bar-btn:focus-visible {
    outline: 3px solid var(--c-coral);
    outline-offset: 2px;
  }

  /* ═══════════════════════════════════════════
     MÉTIER
     ═══════════════════════════════════════════ */
  [data-m-metier] {
    padding-bottom: calc(var(--m-bar-h) + 16px + env(safe-area-inset-bottom, 0px));
  }

  [data-m-metier-hero] > div {
    padding: 28px var(--m-gutter) 32px !important;
    gap: 20px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  [data-m-metier-hero] h1 {
    font-size: 28px !important;
  }

  [data-m-metier-hero] p {
    font-size: 16px !important;
  }

  [data-m-metier-hero] a[href*="conseil"] {
    width: 100%;
    justify-content: center;
    height: var(--m-tap) !important;
    border-radius: var(--m-radius-sm) !important;
    align-self: stretch !important;
  }

  [data-m-metier-hero] .metier-hero-photo,
  [data-m-metier-hero] > div > div:last-child {
    width: min(220px, 100%);
    max-width: 220px;
    flex: none;
    align-self: center;
    margin: 0 auto;
    border-radius: var(--m-radius) !important;
    overflow: hidden;
  }

  [data-m-metier-body] {
    padding: 28px var(--m-gutter) 40px !important;
    gap: 36px !important;
  }

  [data-m-metier-pack] {
    padding: 18px !important;
    border-radius: var(--m-radius) !important;
    gap: 18px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  [data-m-metier-pack] form button {
    width: 100%;
    height: var(--m-tap) !important;
    border-radius: var(--m-radius-sm) !important;
  }

  [data-m-metier-cta] {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 22px !important;
    border-radius: var(--m-radius) !important;
    gap: 16px !important;
  }

  [data-m-metier-cta] h2 {
    font-size: 22px !important;
  }

  [data-m-metier-cta] a {
    width: 100%;
    justify-content: center;
    height: var(--m-tap) !important;
    border-radius: var(--m-radius-sm) !important;
  }

  /* ═══════════════════════════════════════════
     PACKS
     ═══════════════════════════════════════════ */
  [data-m-packs] {
    padding-bottom: calc(var(--m-bar-h) + 16px + env(safe-area-inset-bottom, 0px));
  }

  [data-m-packs-head] {
    padding: 20px var(--m-gutter) 0 !important;
    gap: 18px !important;
  }

  [data-m-packs-head] h1 {
    font-size: 28px !important;
  }

  [data-m-packs-head] > div:first-of-type + div,
  [data-m-packs-head] h1 + p {
    font-size: 16px !important;
  }

  [data-m-pack-perks] {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto;
    margin-left: calc(-1 * var(--m-gutter));
    margin-right: calc(-1 * var(--m-gutter));
    padding: 4px var(--m-gutter) 6px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--m-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [data-m-pack-perks]::-webkit-scrollbar { display: none; }

  [data-m-pack-perks] > div {
    flex: 0 0 min(70vw, 220px);
    scroll-snap-align: start;
    border-radius: var(--m-radius-sm) !important;
    min-height: 110px;
  }

  [data-m-pack-segs] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    margin-left: calc(-1 * var(--m-gutter));
    margin-right: calc(-1 * var(--m-gutter));
    padding: 4px var(--m-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px !important;
  }

  [data-m-pack-segs]::-webkit-scrollbar { display: none; }

  [data-m-pack-segs] > span {
    flex: none;
    white-space: nowrap;
  }

  [data-m-pack-segs] .pack-seg {
    flex: none;
    min-height: 48px;
    white-space: nowrap;
    padding: 10px 16px !important;
  }

  [data-m-packs-grid] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  [data-m-packs-grid] .pack-card {
    border-radius: var(--m-radius) !important;
    padding: 18px !important;
    box-shadow: var(--m-shadow);
  }

  [data-m-packs-grid] .pack-card form button {
    height: var(--m-tap) !important;
    border-radius: var(--m-radius-sm) !important;
    font-size: 16px !important;
  }

  [data-m-pack-builder] {
    margin-top: 48px !important;
  }

  [data-m-pack-builder] > .split {
    padding: 36px var(--m-gutter) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  [data-m-pack-builder-grid] {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  [data-m-pack-builder] .pack-builder-opt {
    min-height: var(--m-tap) !important;
    border-radius: var(--m-radius-sm) !important;
    padding: 14px !important;
  }

  [data-m-pack-summary] {
    position: static !important;
    border-radius: var(--m-radius) !important;
    padding: 18px !important;
  }

  [data-m-pack-summary] form button {
    height: var(--m-tap) !important;
    border-radius: var(--m-radius-sm) !important;
  }

  [data-m-packs-faq] {
    padding: 48px var(--m-gutter) 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  [data-m-packs-faq] .faq-q {
    min-height: 56px;
    padding: 14px 16px !important;
    font-size: 16px !important;
  }

  [data-m-packs-help] {
    padding: 22px !important;
    border-radius: var(--m-radius) !important;
  }

  [data-m-packs-help] h2 {
    font-size: 22px !important;
  }

  [data-m-packs-help] a {
    width: 100%;
    justify-content: center;
    height: var(--m-tap) !important;
    border-radius: var(--m-radius-sm) !important;
  }

  [data-m-packs-help] > div {
    flex-direction: column !important;
    width: 100%;
  }

  /* Focus visibles */
  [data-m-home] a:focus-visible,
  [data-m-cat] a:focus-visible,
  [data-m-fiche] a:focus-visible,
  [data-m-metier] a:focus-visible,
  [data-m-packs] a:focus-visible,
  [data-m-home] button:focus-visible,
  [data-m-cat] button:focus-visible,
  [data-m-fiche] button:focus-visible,
  [data-m-metier] button:focus-visible,
  [data-m-packs] button:focus-visible {
    outline: 3px solid var(--c-coral);
    outline-offset: 2px;
  }
}

/* Tablette : aérer sans changer le desktop */
@media (min-width: 760px) and (max-width: 1023px) {
  [data-m-cat] .cat-page,
  .cat-page[data-m-cat] {
    padding-left: 24px;
    padding-right: 24px;
  }

  [data-m-fiche] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}