/* ==================================================================
   dossier_v7_coherence.css — règle de surface commune à toutes les pages
   Un bloc = fond blanc, coins arrondis, ombre douce. Une seule élévation,
   un seul rayon, appliqués partout : plus de blocs à plat d'un onglet à
   l'autre. Les aplats beiges restent proscrits.
   ================================================================== */

.theme-emeraude {
  --blk-radius: 10px;                                         /* @kind radius */
  --blk-shadow: 0 1px 2px rgba(22, 32, 27, .05),
                0 10px 24px -14px rgba(22, 32, 27, .22);      /* @kind shadow */
}

/* ---- 0. Fond de page : dégradé blanc → gris très clair -------------- */
.theme-emeraude.dossier-v2-shell {
  background: linear-gradient(90deg, #ffffff 0%, rgba(242, 242, 242, .42) 100%);
}

/* ---- 1. Tout bloc : arrondi + ombre --------------------------------
   Un bloc = une surface autonome (fond ou bordure propre) posée dans une
   section. Liste tenue pour l'ensemble des onglets, pas onglet par onglet.
   Les conteneurs qui n'habillent que des blocs déjà élevés reçoivent le
   rayon seul, pour ne pas empiler deux ombres. */
.theme-emeraude .pl-wrap,
.theme-emeraude .pl__group,
.theme-emeraude .pl-wrap__card,
.theme-emeraude .mk,
.theme-emeraude .sc-table,
.theme-emeraude .sc-params,
.theme-emeraude .sc-reco,
.theme-emeraude .mdb-take,
.theme-emeraude .mdb-analysis__col,
.theme-emeraude .tech__panel,
.theme-emeraude .tech__comps,
.theme-emeraude .risk-card,
.theme-emeraude .sum-intro,
.theme-emeraude .sum-ess,
.theme-emeraude .sum-top__photo,
.theme-emeraude .ev__panel,
.theme-emeraude .dec-footer__notes,
.theme-emeraude .dec-footer__decision,
.theme-emeraude .kpi-cell--stack .kpi-stack__item--hero,
.theme-emeraude .accordion,
.theme-emeraude .v1-checklist__item,
.theme-emeraude .dossier-tab-panel[data-panel="scenarios"] .sc-reco {
  border-radius: var(--blk-radius);
  box-shadow: var(--blk-shadow);
}
/* Rayon seul : conteneurs et contrôles. */
.theme-emeraude .kpi-cell--flash,
.theme-emeraude .kpi-cell--stack,
.theme-emeraude .kpi-row--split,
.theme-emeraude .dec-footer__textarea,
.theme-emeraude .sc-table .v1-table-wrap {
  border-radius: var(--blk-radius);
}
/* Un seul rayon : on écrase les 18 / 14 / 12 / 3 / 2 px hérités. */
.theme-emeraude .v1-checklist__item,
.theme-emeraude .ev__panel--timeline,
.theme-emeraude .sc-params,
.theme-emeraude .sc-table {
  border-radius: var(--blk-radius);
}
/* l'ombre de la tuile héro reprend sa teinte, pas le gris commun */
.theme-emeraude .kpi-cell--stack .kpi-stack__item--hero {
  box-shadow: 0 10px 24px -14px rgba(10, 88, 64, .55);
}

/* ---- 2. Aplats beiges restants ------------------------------------- */
.theme-emeraude .sum-ess__case--warn {
  background: transparent;
  border: 1px solid var(--c-warn-border, var(--c-border));
  border-radius: var(--blk-radius);
}
.theme-emeraude .sum-top__photo--empty,
.theme-emeraude .tech-map--missing {
  background: transparent;
  border: 1px dashed var(--c-border-2);
  border-radius: var(--blk-radius);
  color: var(--c-muted);
}

/* ---- 3. Accordéon du comparatif : fond blanc ----------------------- */
.theme-emeraude .accordion {
  background: #fff !important;
  border: 1px solid var(--c-border);
}
.theme-emeraude .accordion::before { background: var(--c-border) !important; }
.theme-emeraude .accordion__hdr {
  background: transparent;
  border-bottom: 1px solid var(--c-border);
}
.theme-emeraude .sc-vt__row--in > td,
.theme-emeraude .sc-vt__row--param > td { background: transparent; }
/* La ligne de résultat parle la même langue que la ligne suivie du
   tableau : teinte émeraude très diluée. */
.theme-emeraude .sc-vt__row--out > td {
  background: color-mix(in srgb, var(--em-emerald) 8%, #fff) !important;
}
.theme-emeraude .sc-vt-input.is-modified {
  background: transparent;
  border-color: var(--em-emerald, var(--c-accent));
}
.theme-emeraude .sc-vt-input:focus-within {
  border-color: var(--em-emerald, var(--c-accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--em-emerald) 15%, transparent);
}

/* ---- 4. Bandeau d'en-tête commun à tous les blocs ------------------
   Même signal partout : fond vert très dilué + filet doré. Il coiffe les
   groupes de points (risques, juridique), l'en-tête du registre, celui
   des panneaux marché et la ligne de tête du comparatif. */
.theme-emeraude .pl__group-h,
.theme-emeraude .pl-wrap__h,
.theme-emeraude .tech__panel-h,
.theme-emeraude .tech__comps > summary,
.theme-emeraude .dossier-tab-panel[data-panel="scenarios"] .sc-table__t thead th {
  background-color: color-mix(in srgb, var(--em-emerald) 6%, #fff);
  background-image: linear-gradient(90deg, #ffffff 0%, rgb(249, 249, 249) 100%);
  border-bottom: 2px solid var(--em-brass-bright);
}
/* la ligne de tête du comparatif est faite de 7 cellules : le dégradé est
   porté par le <thead> pour traverser le tableau entier au lieu de se
   répéter colonne par colonne (la colonne de décision garde son vert). */
.theme-emeraude .dossier-tab-panel[data-panel="scenarios"] .sc-table__t thead {
  background-color: color-mix(in srgb, var(--em-emerald) 6%, #fff);
  background-image: linear-gradient(90deg, #ffffff 0%, rgb(249, 249, 249) 100%);
}
.theme-emeraude .dossier-tab-panel[data-panel="scenarios"] .sc-table__t thead th {
  background-color: transparent;
  background-image: none;
}

/* Les bandeaux coiffent leur bloc : ils en reprennent les coins hauts
   (pas d'overflow:hidden sur les cartes, à cause des popovers). */
.theme-emeraude .pl__group-h,
.theme-emeraude .pl-wrap__h,
.theme-emeraude .tech__panel-h,
.theme-emeraude .tech__comps > summary {
  border-radius: calc(var(--blk-radius) - 1px) calc(var(--blk-radius) - 1px) 0 0;
}
.theme-emeraude .tech__comps[open] > summary { border-radius: calc(var(--blk-radius) - 1px) calc(var(--blk-radius) - 1px) 0 0; }

/* ---- 5. Chaque groupe de points est un bloc ------------------------- */
.theme-emeraude .pl--legal,
.theme-emeraude .pl-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.theme-emeraude .pl-wrap__card {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--blk-radius);
  box-shadow: var(--blk-shadow);
  overflow: hidden;
}
/* Pas d'overflow:hidden sur les groupes : les popovers « Extrait » sont
   en position absolue et seraient rognés par la carte. Les coins sont
   arrondis sur les enfants de tête et de pied à la place. */
.theme-emeraude .pl__group {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--blk-radius);
  box-shadow: var(--blk-shadow);
  overflow: visible;
}
.theme-emeraude .pl__group > .pl__group-h {
  border-radius: calc(var(--blk-radius) - 1px) calc(var(--blk-radius) - 1px) 0 0;
}
.theme-emeraude .pl__group > .pl__item:last-child {
  border-bottom: 0;
  border-radius: 0 0 calc(var(--blk-radius) - 1px) calc(var(--blk-radius) - 1px);
}
.theme-emeraude .pl__group > .pl__item:last-child::before {
  border-radius: 0 0 0 calc(var(--blk-radius) - 1px);
  bottom: 0;
}
.theme-emeraude .pl--legal > .pl__group { overflow: visible; }
.theme-emeraude .pl { gap: 16px; }
.theme-emeraude .pl__group,
.theme-emeraude .pl__group:last-child { border-bottom: 1px solid var(--c-border); }
.theme-emeraude .pl-wrap__card .risks-reg__families { border-bottom: 0; }

/* ---- 6. Recommandation MdB : respire AVANT les paramètres ---------
   (remontée en tête d'onglet le 2026-08-11 — cf. _section_03_scenarios.html) */
.theme-emeraude .dossier-tab-panel[data-panel="scenarios"] .sc-reco { margin: 0 0 24px; }

/* ---- 7. Marché : même grammaire que les autres onglets -------------
   Les panneaux marché reprennent l'en-tête des groupes de points (label
   en capitales + méta discrète), la même respiration et la même table. */
.theme-emeraude .tech__panel-h,
.theme-emeraude .tech__comps > summary {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 24px 11px;
}
/* Le dépliant DVF est un bloc comme les autres : fond blanc, bordure,
   arrondi, ombre — il n'avait qu'un fond. */
.theme-emeraude .tech__panel,
.theme-emeraude .tech__comps {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
}
.theme-emeraude .tech__comps { overflow: hidden; }
.theme-emeraude .tech__comps > summary { list-style: none; }
.theme-emeraude .tech__panel .tech__panel-h h3,
.theme-emeraude .tech__panel-h h3 {
  margin: 0;
  font-size: 11px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--c-ink);
}
.theme-emeraude .tech__panel-m {
  font-size: 11.5px;
  font-style: italic;
  color: var(--c-muted);
  text-transform: none;
  letter-spacing: 0;
}
.theme-emeraude .tech__panel > *:not(.tech__panel-h) { padding-left: 24px; padding-right: 24px; }
.theme-emeraude .tech__panel { padding: 0 0 16px; }
.theme-emeraude .tech__gaps { padding: 4px 0 0; }
.theme-emeraude .tech__comps > summary {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--c-ink);
}
.theme-emeraude .tech__comps > summary .muted {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
  font-style: italic;
}
/* Le bandeau prix reçoit lui aussi son en-tête. */
.theme-emeraude .mk__eyebrow {
  padding: 0;
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--c-muted);
}
.theme-emeraude .mk__scale-h,
.theme-emeraude .mk__stats dt { font-size: 9.5px; }
.theme-emeraude .tech__comps .v1-table th {
  background: transparent;
  border-bottom: 1px solid var(--c-border);
}

/* ---- 8. Passe d'uniformisation finale ------------------------------
   Une seule couleur de filet, un seul rayon, une seule respiration pour
   les panneaux simples (ceux qui n'ont pas de bandeau d'en-tête). */
.theme-emeraude .kpi-row,
.theme-emeraude .kpi-cell,
.theme-emeraude .sum-intro,
.theme-emeraude .sum-ess,
.theme-emeraude .sum-ess__case,
.theme-emeraude .sum-top__photo,
.theme-emeraude .mdb-analysis__col,
.theme-emeraude .sc-params,
.theme-emeraude .sc-table,
.theme-emeraude .sc-reco,
.theme-emeraude .mdb-take,
.theme-emeraude .tech__panel,
.theme-emeraude .tech__comps,
.theme-emeraude .mk,
.theme-emeraude .pl-wrap__card,
.theme-emeraude .pl__group,
.theme-emeraude .ev__panel,
.theme-emeraude .dec-footer__notes,
.theme-emeraude .dec-footer__decision,
.theme-emeraude .v1-checklist__item {
  border-color: var(--c-border);
  border-radius: var(--blk-radius) !important;
}

/* Checklist pré-audience : les cases SONT les blocs, la liste n'en est pas
   un. dossier_v1 dessinait la liste en « grille à filets » (fond coloré +
   gap de 1 px qui laisse voir ce fond en guise de séparateur + bordure du
   conteneur) ; le thème émeraude a ensuite donné une bordure propre à
   chaque case sans retirer celle du conteneur — d'où deux traits
   parallèles à 1 px d'écart autour de la rangée, et deux ombres empilées.
   La liste redevient une simple grille transparente. */
.theme-emeraude .v1-checklist {
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  gap: 12px;
}
/* La section n'est pas un bloc non plus : elle n'a qu'un filet haut/bas
   (dossier_v6) — l'ombre de bloc y dessinait un cadre fantôme. */
.theme-emeraude .v1-sect--checklist {
  box-shadow: none;
  border-radius: 0;
}
/* les blocs à ton sémantique gardent leur filet coloré */
.theme-emeraude .sum-ess__case--warn { border-color: var(--c-warn-border, #e4d2a8); }

/* Panneaux simples (sans bandeau d'en-tête) : même respiration.
   Tous les autres en sont sortis le 2026-08-11 : ils ont désormais un
   bandeau, donc leur padding passe à leurs enfants (section 9). */
.theme-emeraude .sc-reco {
  padding: 16px 20px;
}

/* Libellés de blocs : une seule échelle typographique. */
.theme-emeraude .pl__group-lab,
.theme-emeraude .pl-wrap__t,
.theme-emeraude .tech__panel-h h3,
.theme-emeraude .ev__panel-h h3,
.theme-emeraude .dec-footer__h h3,
.theme-emeraude .mdb-take__eyebrow,
.theme-emeraude .sc-reco__eyebrow,
.theme-emeraude .tech__comps > summary {
  font-size: 11px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--c-ink);
}
.theme-emeraude .pl-wrap__t { font-family: var(--f-sans); }
/* les blocs de l'onglet Scénarios sont ciblés par des sélecteurs plus
   spécifiques dans v3 : on les rejoint sur le même filet. */
.theme-emeraude .dossier-tab-panel[data-panel="scenarios"] .sc-table,
.theme-emeraude .dossier-tab-panel[data-panel="scenarios"] .sc-params,
.theme-emeraude .dossier-tab-panel[data-panel="scenarios"] .sc-reco {
  border-color: var(--c-border);
}

/* ---- 9. Le bandeau d'en-tête coiffe AUSSI les derniers blocs --------
   Uniformisation 2026-08-11 : « Résumé MdB », « Avant l'audience —
   l'essentiel », « Lecture marché » et les panneaux de l'onglet Pièces &
   notes (documents, chronologie, notes, décision) portaient un titre posé
   à même le fond du bloc, alors que les panneaux marché, les groupes de
   risques et le comparatif ont tous le bandeau de la section 4. Ils le
   reprennent.

   Comme pour .tech__panel (section 7), le conteneur cède son padding à
   ses enfants : sans quoi le bandeau ne pourrait pas filer d'un bord à
   l'autre du bloc. Placé en fin de fichier pour passer après la
   normalisation de padding de la section 8. */
.theme-emeraude .sum-intro,
.theme-emeraude .sum-ess,
.theme-emeraude .mdb-take,
.theme-emeraude .ev__panel,
.theme-emeraude .dec-footer__notes,
.theme-emeraude .dec-footer__decision {
  padding: 0 0 16px;
}
.theme-emeraude .sum-intro > *:not(.sum-intro__h),
.theme-emeraude .sum-ess > *:not(.sum-ess__h),
.theme-emeraude .mdb-take > *:not(.mdb-take__h),
.theme-emeraude .ev__panel > *:not(.ev__panel-h),
.theme-emeraude .dec-footer__notes > *:not(.dec-footer__h),
.theme-emeraude .dec-footer__decision > *:not(.dec-footer__h) {
  padding-left: 20px;
  padding-right: 20px;
}
.theme-emeraude .sum-intro__h,
.theme-emeraude .sum-ess__h,
.theme-emeraude .mdb-take__h,
.theme-emeraude .ev__panel-h,
.theme-emeraude .dec-footer__h {
  margin: 0 0 14px;
  padding: 13px 20px 11px;
  background-color: color-mix(in srgb, var(--em-emerald) 6%, #fff);
  background-image: linear-gradient(90deg, #ffffff 0%, rgb(249, 249, 249) 100%);
  border-bottom: 2px solid var(--em-brass-bright);
  border-radius: calc(var(--blk-radius) - 1px) calc(var(--blk-radius) - 1px) 0 0;
}
/* .sum-ess est un flex column à gap : sa gouttière sépare déjà le bandeau
   du contenu — une marge basse s'y ajouterait au lieu de s'y substituer. */
.theme-emeraude .sum-ess__h { margin-bottom: 0; }

/* ---- 10. Retours 2026-08-11 ---------------------------------------- */

/* a. Photo héro : même élévation que les autres blocs. Le bouton portait
   encore l'ombre longue de v3 (0 20px 42px -28px) — deux grammaires
   d'ombre sur la même colonne. */
.theme-emeraude .sum-top__photo,
.theme-emeraude .sum-top__photo--bg {
  border-radius: var(--blk-radius);
  box-shadow: var(--blk-shadow);
}

/* b. Scénario suivi : la ligne sort de l'état « écarté ».
   Un scénario écarté par l'analyse MdB reste grisé/italique — mais si
   l'utilisateur le choisit explicitement (« Suivre ce scénario »), c'est
   SA décision : la ligne redevient pleinement lisible et prend la teinte
   de la ligne suivie.
   L'opacité se neutralise SUR LE <tr> : dossier_v2.css la pose sur la
   ligne elle-même (.sc-table__row--excluded { opacity: .55 }), et une
   opacité de parent ne se rattrape pas depuis les cellules — d'où la
   ligne restée à demi grisée jusqu'au 2026-08-11. */
.theme-emeraude .dossier-tab-panel[data-panel="scenarios"] .sc-table__row--excluded.is-followed,
.sc-table__row--excluded.is-followed,
.sc-table__row--excluded.is-followed:hover {
  opacity: 1;
}
.theme-emeraude .dossier-tab-panel[data-panel="scenarios"] .sc-table__row--excluded.is-followed > td,
.sc-table__row--excluded.is-followed > td {
  opacity: 1;
  color: var(--c-ink) !important;
  font-style: normal;
  background: #f4faf6;
}
/* La colonne « Plafond marteau » garde son accent émeraude, comme sur
   toute autre ligne suivie — sinon le scénario suivi/écarté serait la
   seule ligne du tableau à l'afficher en encre neutre. */
.theme-emeraude .dossier-tab-panel[data-panel="scenarios"] .sc-table__row--excluded.is-followed > td:nth-child(4) {
  color: var(--em-emerald-deep) !important;
}

/* c. Accordéon : plus d'aplat vert systématique sur les lignes de
   résultat, ni de vert d'office sur leur valeur. La couleur ne dit plus
   « c'est une ligne de total » mais « ce total est bon / mauvais » —
   portée au cas par cas par les styles inline des templates (même règle
   que les cellules de la ligne fermée). */
.theme-emeraude .sc-vt__row--out > td {
  background: transparent !important;
}
.theme-emeraude .sc-vt__val--pos { color: var(--c-ink); }

/* d. Groupes « légers » (Juridique « Pas de sujet identifié » ET Risques
   « Points de vigilance » — même composant .pl) : une grille commune.
   Le corps était un flex-wrap : selon qu'un point portait 2 ou 5 faits,
   titre / contenu / source se plaçaient différemment d'une ligne à
   l'autre, et la « prochaine action » tombait en pleine largeur sous le
   corps avec son filet vertical — d'où l'impression d'inachevé.
   Trois colonnes fixes, placement explicite de CHAQUE enfant possible
   (les deux onglets n'ont pas les mêmes : méta+détail côté risques,
   faits côté juridique) : les colonnes s'alignent d'un point à l'autre. */
.theme-emeraude .pl__group--light .pl__item,
.theme-emeraude .pl__group--light .pl__item--solo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 13px 22px 13px 26px;
}
.theme-emeraude .pl__group--light .pl__body {
  display: grid;
  /* colonne 3 plafonnée : `auto` la dimensionnait sur le max-content des
     chips de source (« Recoupement IA (CCV + PV + Diag) » + Extrait + la
     citation), ce qui écrasait la colonne de contenu sur certains points. */
  grid-template-columns: minmax(150px, 250px) minmax(0, 1fr) fit-content(250px);
  align-items: start;
  gap: 4px 22px;
}
.theme-emeraude .pl__group--light .pl__head {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  align-items: baseline;
}
/* Colonne 2 — contenu : méta puis détail (risques), ou faits (juridique). */
.theme-emeraude .pl__group--light .pl__meta { grid-column: 2; grid-row: 1; margin: 0; }
.theme-emeraude .pl__group--light .pl__detail { grid-column: 2; grid-row: 2; margin: 0; }
/* Les faits en cellules de largeur égale : les étiquettes s'alignent en
   colonnes régulières au lieu de se tasser au fil du texte. */
.theme-emeraude .pl__group--light .pl__facts {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 9px 20px;
  align-items: start;
}
.theme-emeraude .pl__group--light .pl__facts > div {
  display: block;
  min-width: 0;
}
.theme-emeraude .pl__group--light .pl__facts dt { line-height: 1.4; }
.theme-emeraude .pl__group--light .pl__facts dd { margin-top: 1px; }
.theme-emeraude .pl__group--light .pl__src {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: start;
  margin: 0;
}
/* Impact / prochaine action : ligne du dessous, sans filet vertical (il
   n'a de sens qu'en vraie 2ᵉ colonne) ni grande typo de KPI. */
.theme-emeraude .pl__group--light .pl__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 24px;
  padding: 0;
  border-left: 0;
  border-top: 0;
}
.theme-emeraude .pl__group--light .pl__aside .pl__k {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.theme-emeraude .pl__group--light .pl__aside .pl__k-lab { margin: 0; }
.theme-emeraude .pl__group--light .pl__aside .pl__k-val,
.theme-emeraude .pl__group--light .pl__aside .pl__k-val .mono {
  font-size: 12.5px;
  font-weight: 600;
}
@media (max-width: 900px) {
  .theme-emeraude .pl__group--light .pl__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .theme-emeraude .pl__group--light .pl__head,
  .theme-emeraude .pl__group--light .pl__meta,
  .theme-emeraude .pl__group--light .pl__detail,
  .theme-emeraude .pl__group--light .pl__facts,
  .theme-emeraude .pl__group--light .pl__src {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Onglets du dossier sur mobile — cible tactile (audit 2026-08-11)
   ══════════════════════════════════════════════════════════════════════
   La rangée tombait à ~36px de haut sous 720px (padding réduit dans
   dossier_v2.css), sous le minimum tactile recommandé de 44px. On repasse à
   44px sans toucher au reste : l'indice de défilement (voile + chevron sticky
   + .is-scroll-end posé par dossier_v2.js) existe déjà et reste inchangé —
   inutile d'empiler une seconde affordance. Le scroll-snap cale simplement
   les onglets au bord après un balayage. */
@media (max-width: 720px) {
  .dossier-tabs__tab,
  .theme-emeraude .dossier-tabs__tab {
    min-height: 44px;
    padding: 0 12px;
    font-size: 12.5px;
    scroll-snap-align: start;
  }
  .dossier-tabs,
  .theme-emeraude .dossier-tabs {
    scroll-snap-type: x proximity;
    scroll-padding-left: 12px;
  }
}