/*
 * LBYLCL Grille — Offre : styles du shadow root.
 *
 * Aucun token n'est DÉCLARÉ ici (§ 5). Tous viennent du `:host` de la
 * « LBYLCL Grille tarifaire » et arrivent par héritage à travers l'arbre aplati ;
 * chaque `var()` porte son repli littéral, pour que la carte reste lisible hors
 * d'une grille (harnais Vite) et qu'aucune déclaration ne s'invalide en silence.
 *
 * `--lcl-pg-expanded` vaut 1 (en-tête déployé) ou 0 (en-tête collé). Il est
 * posé en style inline par la grille sur sa racine. Toute la géométrie du repli
 * — padding de la carte, hauteur, opacité et marge du bloc `.details` — est un
 * `calc()` sur ce seul nombre : un seul mouvement, sans une ligne de JavaScript.
 * Seule `visibility`, un mot-clé, vient d'un second token posé au même moment,
 * `--lcl-pg-details-visibility`.
 *
 * « Cstm Neighbor » n'existe qu'en 400 / 700 / 900. Le prix est en 900.
 */

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

/*
 * `height: 100%` : deux offres côte à côte gardent la même hauteur de carte
 * quand leurs accroches n'ont pas la même longueur. Sans hauteur définie sur la
 * cellule, la valeur retombe sur `auto`, sans effet de bord.
 *
 * `text-align: start` : `text-align` est hérité et traverse la frontière
 * shadow — déposée dans une section centrée, la carte centrerait son texte.
 */
.C23IogceqLD4C49T9YqQ {
  box-sizing: border-box;
  /*
   * Grille à zones, et ses zones viennent de la grille tarifaire : c'est elle
   * qui sait si l'en-tête est collé. Déployée : prix, accroche, bouton empilés.
   * Repliée : le bouton à droite du prix, l'accroche repliée dessous. Une
   * custom property peut porter une valeur de `grid-template-areas` — c'est le
   * canal qui traverse la frontière shadow (§ 5).
   */
  display: grid;
  grid-template-columns: var(--lcl-pg-offer-cols, minmax(0, 1fr));
  grid-template-areas: var(--lcl-pg-offer-areas, "head" "details" "action");
  align-items: center;
  align-content: start;
  column-gap: 1rem;
  height: 100%;
  min-width: 0;
  /* Déployée : 1.5rem. Repliée : 0.875rem 1.25rem. */
  padding:
    calc(0.875rem + var(--lcl-pg-expanded, 1) * 0.625rem)
    calc(1.25rem + var(--lcl-pg-expanded, 1) * 0.25rem);
  border-radius: var(--lcl-pg-offer-radius, 24px);
  text-align: start;
  /* Repliée, la carte flotte sur les lignes qui défilent : une ombre dosée par
     la même variable que le repli (0 déployée, pleine repliée). */
  box-shadow: 0 10px 28px rgba(20, 16, 40, calc((1 - var(--lcl-pg-expanded, 1)) * 0.32));
  transition:
    padding var(--lcl-dur, 420ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--lcl-dur, 420ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

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

/*
 * Le jaune et son encre sont des constantes de marque, pas des tokens de thème :
 * sur une section sombre, une encre de thème vaudrait du clair — du clair sur
 * jaune. D'où l'encre littérale de la grille, et `color: inherit` partout
 * ailleurs dans la carte.
 */
.C23IogceqLD4C49T9YqQ[data-style="highlight"] {
  background: var(--lcl-pg-highlight, #f1ff77);
  color: var(--lcl-pg-highlight-ink, #2a2240);
}

/* La carte vit dans l'en-tête de la grille, lui-même opaque : un panneau
   translucide n'y laisse rien transparaître de ce qui défile. */
.C23IogceqLD4C49T9YqQ[data-style="standard"] {
  background: var(--lcl-pg-panel, #f3f2ef);
  color: var(--lcl-pg-ink, #2a2240);
}

/* ───────────────────────── Toujours visible ───────────────────────── */

.hcSkB5RiyBl5ZnwI3fFS {
  grid-area: head;
  min-width: 0;
}

.M8YGcSqa1ByCPzddIHlG {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.3;
  color: inherit;
}

/* Prix et période sur la même ligne de base ; `flex-wrap` ne les sépare que si
   la colonne est trop étroite pour les deux. */
.O8BLfQyqxn681sQEvlMK {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 0.375rem;
  min-width: 0;
}

.B69M6Ct8UQGIeD3Z6_K_ {
  font-family: var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  font-weight: 900;
  font-size: 1.75rem;
  line-height: 1;
  white-space: nowrap;
  color: inherit;
}

.OApMya9slPq96MKWKjm0 {
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.2;
  white-space: nowrap;
  color: inherit;
}

/* ───────────────────────────── Repliable ───────────────────────────── */

/*
 * ═══ LE BLOC QUI SE REPLIE ═══
 *
 * `max-height` et non `height` : la hauteur naturelle du bloc est inconnue
 * (accroche slottée). Le plafond de 16rem vaut aussi à l'état
 * déployé : une accroche plus longue serait coupée — ce n'est pas le lieu d'un
 * paragraphe.
 *
 * Le padding de 0.25rem compensé par une marge négative égale ne change rien à
 * la mise en page : il donne de la place à l'anneau de focus d'un lien de l'accroche,
 * que `overflow: hidden` couperait sinon au ras du bloc. Replié, il reste une
 * boîte de 0.5rem que les deux marges négatives annulent.
 *
 * La marge haute suit la même variable : déployée, 0.75rem + le padding haut
 * font 1rem sous le prix ; repliée, elle vaut −0.25rem et s'annule avec lui.
 *
 * ═══ REPLIÉ, LE BLOC SORT DE L'ORDRE DE TABULATION ═══
 *
 * `max-height: 0` et `opacity: 0` ne suffisent pas : un lien de l'accroche resterait
 * focusable, et le focus défilerait le bloc masqué pour le révéler. Seul
 * `visibility: hidden` le retire du focus et de l'arbre d'accessibilité.
 *
 * `visibility` est un MOT-CLÉ : aucun `calc()` sur `--lcl-pg-expanded` ne peut
 * le produire. La grille pose donc le mot-clé lui-même,
 * `--lcl-pg-details-visibility`, hérité comme les autres tokens. Pas de requête
 * de style `@container style()` : sa prise en charge n'est pas acquise sur tous
 * les moteurs visés, et là où elle manque le bouton restait focusable.
 *
 * Le délai de `visibility` vaut la durée au repli et zéro au déploiement, par
 * un `calc()` sur `--lcl-pg-expanded` : c'est la valeur d'ARRIVÉE qui fixe la
 * transition. `visibility` est une propriété discrète, elle se transitionne
 * sans s'interpoler, donc elle accepte un délai (même mécanique que
 * l'`overflow` du panneau de NavEntry, § 3.2). Au repli, le contenu s'efface
 * avant de disparaître ; au déploiement, il est visible dès la première image.
 */
.l3kYylcMnKVTggctKEbr {
  grid-area: details;
  max-height: calc(var(--lcl-pg-expanded, 1) * 16rem);
  margin: calc(var(--lcl-pg-expanded, 1) * 1rem - 0.25rem) -0.25rem -0.25rem;
  padding: 0.25rem;
  overflow: hidden;
  opacity: var(--lcl-pg-expanded, 1);
  visibility: var(--lcl-pg-details-visibility, visible);
  transition:
    max-height var(--lcl-dur, 420ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    margin-top var(--lcl-dur, 420ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity var(--lcl-dur, 420ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    visibility 0s linear calc((1 - var(--lcl-pg-expanded, 1)) * var(--lcl-dur, 420ms));
}

/*
 * L'accroche est un `props.RichText` : son contenu arrive SLOTTÉ, donc
 * `.note p` ne matche rien (§ 6.3). Canal 1 : les propriétés héritées posées
 * ici. Canal 2 : `::slotted()` sur le `div.w-richtext`, dont les `<p>` sont
 * les vrais enfants — un `row-gap` les espace hors de portée des marges du
 * site (§ 6.6).
 */
.AYSy4Ny4xwXXrJBci_sa {
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: inherit;
}

.AYSy4Ny4xwXXrJBci_sa > slot::slotted(*) {
  display: grid !important;
  row-gap: 0.5rem !important;
  margin: 0 !important;
}

/*
 * Le bouton est SLOTTÉ et la carte ne le peint pas (§ 6.12) : elle le place.
 * Le `<div>` colonne que Webflow interpose autour du contenu du slot est
 * neutralisé, pour que le bouton soit l'item flex de `.action` et garde sa
 * largeur propre (§ 6.4). `!important` : le wrapper appartient à l'arbre du
 * document (§ 6.5).
 */
.N7tAmIW_bFTOunYdHv5j {
  grid-area: action;
  justify-self: var(--lcl-pg-offer-action-justify, start);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  /* 1rem sous l'accroche déployée, rien quand le bouton est à droite du prix. */
  margin-top: calc(var(--lcl-pg-expanded, 1) * 1rem);
  transition: margin-top var(--lcl-dur, 420ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.N7tAmIW_bFTOunYdHv5j > slot {
  display: contents;
}

.N7tAmIW_bFTOunYdHv5j > slot::slotted(*) {
  display: contents !important;
}

/* ─────────────────────────── Mouvement réduit ─────────────────────────── */

/* Le repli se pose directement à son état final, `visibility` comprise. */
@media (prefers-reduced-motion: reduce) {
  .C23IogceqLD4C49T9YqQ,
  .l3kYylcMnKVTggctKEbr,
  .N7tAmIW_bFTOunYdHv5j {
    transition: none;
  }
}