/*
 * LBYLCL Grille tarifaire.
 *
 * Composant de PREMIER NIVEAU : il déclare le bloc de tokens complet de la
 * grille sur son propre `:host`. Offres, sections, lignes et cellules les
 * LISENT avec un repli et ne redéclarent rien (§ 5) — un token redéclaré dans
 * un enfant cesserait silencieusement de suivre le thème pour tout son
 * sous-arbre.
 *
 * ═══ LA COULEUR SUIT LE THÈME DE LA SECTION, SANS AUCUNE PROP ═══
 *
 * Même mécanisme que la carte tarif : les variables de la collection « Theme »
 * du site, redéfinies par le mode appliqué à la section, descendent jusqu'ici
 * par l'arbre aplati. Elles sont résolues sur cet hôte, puis héritées déjà
 * résolues par tout le contenu slotté. Noms relevés sur la collection `Theme`
 * le 2026-09-15 (voir PricingCard.module.css) ; chaque `var()` porte un repli
 * littéral, sans quoi une variable absente invaliderait la déclaration en
 * silence.
 *
 * NON VÉRIFIÉ : que Webflow émette ces variables sur l'élément de section.
 * Ça se constate sur une page publiée.
 */
:host {
  /* Police et mouvement — recopiés de Nav.module.css, source de vérité. */
  --lcl-font-display: "Cstm Neighbor", Impact, sans-serif;
  --lcl-font-body: Inter, sans-serif;
  --lcl-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lcl-dur: 420ms;

  /* — Couleurs : lues sur le design system du site — */
  /* Fond de la section : c'est lui qui rend opaques les zones collantes. */
  --lcl-pg-bg: var(--_theme---background, #ffffff);
  /* Panneaux. Peut être translucide : voir la peinture en deux couches des
     titres de section. */
  --lcl-pg-panel: var(--_theme---cards--background, #f3f2ef);
  --lcl-pg-ink: var(--_theme---text-1, #2a2240);
  --lcl-pg-ink-soft: var(--_theme---text-2, rgba(42, 34, 64, 0.72));
  --lcl-pg-rule: var(--_theme---border, rgba(42, 34, 64, 0.16));
  /* Filet entre les lignes : la bordure du thème est à 60 % d'opacité, trop
     marquée pour une séparation répétée à chaque ligne. On n'en garde qu'un
     quart. Repli rgba d'abord, pour un moteur sans color-mix(). */
  --lcl-pg-divider: rgba(42, 34, 64, 0.12);
  --lcl-pg-divider: color-mix(in srgb, var(--lcl-pg-rule, rgba(42, 34, 64, 0.16)) 25%, transparent);
  --lcl-pg-accent: var(--_theme---cards--icon-background, #e0fa00);
  --lcl-pg-accent-ink: var(--_theme---cards--icon, #2a2240);
  /* Carte « Mise en avant » : constante de marque, pas un token de thème. Son
     encre est littérale — sur ce jaune, seul du sombre se lit, et chaque token
     de texte vaut du clair dans au moins un mode (leçon de PricingCard). */
  --lcl-pg-highlight: #f1ff77;
  --lcl-pg-highlight-ink: #2a2240;

  /* — Géométrie partagée : c'est elle qui aligne les colonnes d'un shadow root
       à l'autre — */
  --lcl-pg-gap: 12px;
  /* Air entre le bas de la nav et ce qui colle dessous. */
  --lcl-pg-sticky-gap: 12px;
  --lcl-pg-radius: 16px;
  --lcl-pg-offer-radius: 24px;
  --lcl-pg-label-w: minmax(11rem, 31%);
  --lcl-pg-row-min-h: 4.25rem;
  --lcl-pg-pad-x: 0.75rem;

  display: block;
  font-family: var(--lcl-font-body, Inter, sans-serif);
  color: var(--lcl-pg-ink, #2a2240);
}

/*
 * Racine du tableau. Elle porte en style inline `--lcl-pg-offers` (compte
 * borné), `--lcl-pg-expanded` (1 déployé, 0 collé),
 * `--lcl-pg-details-visibility` (`visible` déployé, `hidden` collé) et
 * `--lcl-pg-head-h` (hauteur mesurée de l'en-tête).
 *
 * Ni `overflow` ni `transform` ici : l'un comme l'autre désactiverait le
 * collant de l'en-tête et des titres de section. `isolation` crée seulement un
 * contexte d'empilement, pour que les `z-index` de la grille ne se mesurent pas
 * à ceux de la page.
 */
.UkgWWoYLvvcD26N4qUMt {
  display: block;
  box-sizing: border-box;
  min-width: 0;
  isolation: isolate;
  /* `text-align` est hérité et traverse la frontière shadow : une section
     centrée centrerait sinon les libellés. */
  text-align: start;
  font-family: var(--lcl-font-body, Inter, sans-serif);
  color: var(--lcl-pg-ink, #2a2240);
}

/*
 * ═══ EN-TÊTE DES OFFRES — COLLANT ═══
 *
 * Collant sur cet élément interne, jamais sur `:host` : les règles de l'arbre
 * externe battent `:host`, et un `position` posé par Webflow sur l'instance
 * suffirait à l'annuler (§ 4, § 6.5). Son bloc conteneur est `.root`, donc il
 * colle tant que la grille défile, et s'en va avec elle.
 *
 * Fond opaque : c'est lui qui masque les lignes qui passent dessous. Le
 * `padding-bottom` en fait partie, et les titres de section se collent sous
 * cette marge (`--lcl-pg-head-h` la compte).
 *
 * La grille est la géométrie partagée : la cellule vide prend exactement la
 * colonne des libellés, la zone des offres exactement celle des valeurs.
 */
.JaDkVSHihijrSA0qVpkh {
  position: sticky;
  top: calc(var(--lcl-nav-bottom, 0px) + var(--lcl-pg-sticky-gap, 12px));
  z-index: 3;
  display: grid;
  grid-template-columns: var(--lcl-pg-label-w, minmax(11rem, 31%)) minmax(0, 1fr);
  column-gap: var(--lcl-pg-gap, 12px);
  align-items: stretch;
  box-sizing: border-box;
  padding-bottom: var(--lcl-pg-gap, 12px);
  /* Pas de fond : c'est la carte d'offre qui flotte sur le contenu, pas une
     bande. La zone vide de l'en-tête (coin, marge basse) laisse passer les
     clics vers les lignes qui défilent dessous. */
  pointer-events: none;
}

.JaDkVSHihijrSA0qVpkh .dOw58hRxURweNcuuEgXS {
  pointer-events: auto;
}

/* Sur le canvas, rien ne colle : l'en-tête masquerait les sections qu'on
   édite en dessous. */
.UkgWWoYLvvcD26N4qUMt[data-editor="true"] .JaDkVSHihijrSA0qVpkh {
  position: static;
}

.GTQbV9lY7M1rb8V_uLx7 {
  min-width: 0;
}

.dOw58hRxURweNcuuEgXS {
  min-width: 0;
}

/*
 * ═══ LE WRAPPER DE WEBFLOW EST STYLÉ, PAS NEUTRALISÉ ═══
 *
 * Même technique que le panneau de NavEntry (§ 3.2) : le wrapper que Webflow
 * interpose autour du contenu d'un slot est le seul nœud que `::slotted()`
 * atteigne, et il devient la grille des offres. Le compte de colonnes vient de
 * `--lcl-pg-offers` et non du nombre de composants déposés : une offre de plus
 * que le compte passe à la ligne au lieu de décaler les colonnes des valeurs.
 *
 * Le wrapper appartient à l'arbre du document, d'où les `!important` (§ 6.5).
 */
.dOw58hRxURweNcuuEgXS > slot {
  display: contents;
}

.dOw58hRxURweNcuuEgXS > slot::slotted(*) {
  display: grid !important;
  grid-template-columns: repeat(var(--lcl-pg-offers, 1), minmax(0, 1fr)) !important;
  column-gap: var(--lcl-pg-gap, 12px) !important;
  row-gap: var(--lcl-pg-gap, 12px) !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

/* Le harnais Vite n'a ni shadow root ni `<slot>` : la règle ci-dessus y est
   inerte. Les deux ne s'appliquent jamais ensemble. */
.dOw58hRxURweNcuuEgXS:not(:has(> slot)) {
  display: grid;
  grid-template-columns: repeat(var(--lcl-pg-offers, 1), minmax(0, 1fr));
  column-gap: var(--lcl-pg-gap, 12px);
  row-gap: var(--lcl-pg-gap, 12px);
  align-items: stretch;
}

/*
 * Espaceur de compensation : sa hauteur, écrite en inline par le composant,
 * vaut ce que l'en-tête a perdu en se repliant. À zéro au repos.
 */
.tcU8dFh6n2UUdPXphqNo {
  display: block;
  height: 0;
}

/*
 * Slot « Sections ». Rien sur le wrapper : il est déjà en flex colonne, les
 * sections s'y empilent, et l'écart entre deux sections est porté par chaque
 * section sur sa propre racine (§ 3.3 bis) — jamais par un `gap` ici.
 */
.oQqL9g1puh6Z7yorkRlL {
  display: block;
  min-width: 0;
}

/* ─────────────────────────────── Mobile ─────────────────────────────── */
/* Plus de colonne de libellés : les offres prennent toute la largeur, au-dessus
   des valeurs qui la prennent aussi. */
@media (max-width: 767px) {
  .JaDkVSHihijrSA0qVpkh {
    grid-template-columns: minmax(0, 1fr);
  }

  .GTQbV9lY7M1rb8V_uLx7 {
    display: none;
  }
}