/* =========================================================================
 * LBYLCL Grille — Section : styles du shadow root.
 *
 * Aucun token de marque n'est DÉCLARÉ ici : tous viennent du `:host` de la
 * grille et arrivent par héritage à travers l'arbre aplati (§ 5). Chaque var()
 * porte un repli littéral, pour que la section reste lisible hors d'une grille
 * et dans le harnais Vite.
 *
 * Seule exception, et ce n'est pas un token de marque : `--lcl-pg-rule-w`,
 * posé en style inline sur `.root` par le TSX selon « Séparateurs entre les
 * lignes ». Il descend jusqu'aux lignes slottées, le `<slot>` étant à
 * l'intérieur de `.root`.
 *
 * Seule animation : l'ombre du titre collé, coupée en mouvement réduit.
 * ========================================================================= */

/* Aucune largeur, aucune marge : c'est la grille qui place la section, et
   l'arbre externe bat `:host` (§ 6.5). */
:host {
  display: block;
  min-width: 0;
  font-family: var(--lcl-font-body, Inter, sans-serif);
}

/*
 * L'écart entre deux sections est un `padding-bottom` sur NOTRE racine, pas un
 * `gap` sur le wrapper de Webflow ni une marge sur `:host` — même raison, et
 * même conséquence assumée (la dernière section le porte aussi), que le
 * `padding-bottom` de NavBlock (§ 3.3 bis).
 */
.jfI1AXRhC50YF8aRpTli {
  box-sizing: border-box;
  display: block;
  min-width: 0;
  padding-bottom: var(--lcl-pg-gap, 12px);
  color: var(--lcl-pg-ink, #2a2240);
  /* `text-align` est hérité : une section Webflow centrée centrerait les
     libellés. La section impose le sien. */
  text-align: start;
}

.jfI1AXRhC50YF8aRpTli *,
.jfI1AXRhC50YF8aRpTli *::before,
.jfI1AXRhC50YF8aRpTli *::after {
  box-sizing: border-box;
}

/*
 * `position: relative` : bloc conteneur de la couche de panneaux.
 * `isolation: isolate` : la couche est en `z-index: -1`, et sans contexte
 * d'empilement propre elle passerait derrière le fond de la page.
 *
 * AUCUN `overflow` ici : un `overflow` autre que `visible` ferait de la carte
 * le conteneur de défilement de l'en-tête, qui ne collerait plus à l'écran.
 */
.qvJIAIcxqK9TtuuGXrNk {
  position: relative;
  isolation: isolate;
  min-width: 0;
}

/* ─────────────────────────────── Panneaux ─────────────────────────────── */
/*
 * La MÊME grille que celle des lignes : `--lcl-pg-label-w` pour les libellés,
 * le reste pour les valeurs, `--lcl-pg-gap` entre les deux. Le pourcentage de
 * `minmax(11rem, 31%)` se résout sur la largeur de la carte, qui est aussi
 * celle de chaque ligne : les bords tombent pile, sans mesure.
 */
.dlGUtUSmU1cruiH_8dBS {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: var(--lcl-pg-label-w, minmax(11rem, 31%)) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: var(--lcl-pg-gap, 12px);
  pointer-events: none;
}

/* Une seule couche, éventuellement translucide : le fond de la section passe
   dessous, c'est l'effet voulu. */
.RELvVwDHxh9_VFlgPTuG,
.tRM1SbScyE931lVys0h3 {
  display: block;
  min-width: 0;
  border-radius: var(--lcl-pg-radius, 16px);
  background: var(--lcl-pg-panel, #f3f2ef);
}

/* ──────────────────────────── En-tête collant ──────────────────────────── */
/*
 * Colle sous la barre de la nav ET sous l'en-tête des offres de la grille,
 * dont la hauteur courante est posée par la grille en `--lcl-pg-head-h`.
 * `z-index: 2`, sous l'en-tête des offres (3) : en fin de section, le titre
 * glisse dessous au lieu de le recouvrir.
 *
 * Desktop : l'en-tête reprend la grille des lignes et n'occupe que la colonne
 * des libellés. Sa seconde colonne est vide et transparente, d'où
 * `pointer-events: none` sur l'en-tête et `auto` sur sa cellule : collé, il ne
 * doit pas intercepter les clics sur les valeurs qui défilent à côté.
 */
.ypV3jfprbcsLLH7OF2TI {
  position: sticky;
  /* Desktop : à la hauteur de la carte d'offre, qui occupe l'autre colonne. */
  top: calc(var(--lcl-nav-bottom, 0px) + var(--lcl-pg-sticky-gap, 12px));
  z-index: 2;
  display: grid;
  grid-template-columns: var(--lcl-pg-label-w, minmax(11rem, 31%)) minmax(0, 1fr);
  column-gap: var(--lcl-pg-gap, 12px);
  min-width: 0;
  pointer-events: none;
}

/*
 * Fond OPAQUE en deux couches : le panneau peut être translucide, et un
 * en-tête collé translucide laisserait lire les libellés qui défilent dessous.
 * La couleur du panneau est posée sur celle du fond de section — même rendu
 * que le panneau au repos, mais sans transparence.
 */
.mX_xEp1o13_MNSQ5gTZQ {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  min-height: var(--lcl-pg-row-min-h, 4.25rem);
  padding: 0.75rem var(--lcl-pg-pad-x, 0.75rem);
  /* Les quatre angles : au repos, ceux du bas se posent sur le panneau de même
     couleur et ne se voient pas ; collé, le titre flotte et les montre. */
  border-radius: var(--lcl-pg-radius, 16px);
  background:
    linear-gradient(var(--lcl-pg-panel, #f3f2ef), var(--lcl-pg-panel, #f3f2ef)),
    var(--lcl-pg-bg, #fff);
  pointer-events: auto;
  transition: box-shadow var(--lcl-dur, 420ms) var(--lcl-ease, ease);
}

/*
 * Collé, le titre passe par-dessus son propre panneau, de même couleur : ses
 * angles arrondis laissaient voir ce panneau et il paraissait carré. Un aplat
 * du fond de section est donc glissé DERRIÈRE lui, carré, à sa taille : les
 * angles montrent le fond, le titre flotte.
 *
 * `z-index: -1` sans contexte d'empilement sur `.headCell` : l'aplat se range
 * dans celui de `.head` (collant, z-index 2), sous le fond du titre et
 * au-dessus des lignes. Au repos, pas d'aplat — il marquerait les angles du
 * bas, posés sur le panneau.
 */
.mX_xEp1o13_MNSQ5gTZQ {
  position: relative;
}

.jfI1AXRhC50YF8aRpTli[data-stuck="true"] .mX_xEp1o13_MNSQ5gTZQ {
  box-shadow: 0 10px 28px rgba(20, 16, 40, 0.32);
}

.jfI1AXRhC50YF8aRpTli[data-stuck="true"] .mX_xEp1o13_MNSQ5gTZQ::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lcl-pg-bg, #fff);
}

/* — La pastille — */
.poqMFDxpaHDCZjjKYFsy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  line-height: 0;
  /* La pastille contient et rogne ce qu'on y dépose. Un visuel Lumos peut être
     en `position: absolute` : sans bloc conteneur ici, il se calait sur
     l'en-tête collant (lui-même positionné) et débordait de la pastille. */
  position: relative;
  overflow: hidden;
  background: var(--lcl-pg-accent, #e0fa00);
  /* `color` traverse la frontière shadow : un SVG peint en `currentColor`
     prend cette encre sans une ligne de JavaScript (§ 5). */
  color: var(--lcl-pg-accent-ink, #2a2240);
}

/* Taille imposée depuis ici : elle bat les attributs `width` / `height` du SVG
   déposé et les règles de l'arbre externe (§ 6.5). */
.poqMFDxpaHDCZjjKYFsy slot::slotted(*) {
  position: relative !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  display: block !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}

/* Le CSS du site atteint nos balises (§ 6.6) : la classe fixe marge, corps et
   graisse d'un `<h3>` que le site aurait stylé. */
.XXllf2oYjWvtDlRTDINv {
  min-width: 0;
  margin: 0;
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lcl-pg-ink, #2a2240);
}

/* ─────────────────────────────── Lignes ─────────────────────────────── */
/*
 * Le wrapper de Webflow n'est ni neutralisé ni stylé : il est déjà un flex en
 * colonne, et les lignes s'y empilent. Chaque ligne porte ses propres filets.
 *
 * ═══ LE FILET DE LA DERNIÈRE LIGNE EST ROGNÉ, PAS RECOUVERT ═══
 *
 * Une ligne ne sait pas qu'elle est la dernière (§ 6.4), donc elle trace son
 * filet comme les autres. `clip-path` retire la dernière épaisseur de filet en
 * bas de `.rows` — et seulement en bas : les trois autres côtés sont repoussés
 * loin dehors, rien d'autre n'est rogné. Sans séparateurs, l'épaisseur vaut 0
 * et rien n'est rogné du tout.
 *
 * Rogner plutôt que recouvrir d'une bande couleur de panneau : le filet va
 * d'un bord à l'autre de sa colonne, donc jusque dans les angles arrondis du
 * bas, HORS de la forme du panneau. Une bande l'y remplacerait par un trait
 * couleur de panneau sur le fond de la section, et cette couleur ne coïncide
 * avec le fond réel que si ce fond est exactement `--lcl-pg-bg`. Rogner ne
 * dépend d'aucune couleur.
 */
.wQFqFs4w13WWM3nquBg6 {
  display: block;
  min-width: 0;
  clip-path: inset(-100vh -100vw var(--lcl-pg-rule-w, 0px) -100vw);
}

/* ─────────────────────────────── Mobile ─────────────────────────────── */
/*
 * < 768px : plus de colonne de libellés. Les deux panneaux fusionnent en un
 * seul, et l'en-tête prend toute la largeur. Même point de rupture que la
 * grille et les lignes.
 */
@media (max-width: 767px) {
  .dlGUtUSmU1cruiH_8dBS {
    grid-template-columns: minmax(0, 1fr);
  }

  .tRM1SbScyE931lVys0h3 {
    display: none;
  }

  .ypV3jfprbcsLLH7OF2TI {
    display: block;
    /* Mobile : la carte d'offre prend toute la largeur, le titre colle dessous. */
    top: calc(
      var(--lcl-nav-bottom, 0px) + var(--lcl-pg-sticky-gap, 12px) + var(--lcl-pg-head-h, 0px)
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .mX_xEp1o13_MNSQ5gTZQ {
    transition: none;
  }
}