/* Plantis — compléments au CSS du modèle Plantab (le runtime Framer est retiré). */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }
[data-pl-faq] { cursor: pointer; }
a[aria-disabled="true"] { cursor: default; }
/* Le modèle impose « display:block » au lien du logo : on rétablit la ligne icône + mot. */
.pl-logo { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px;
  width: auto !important; height: auto !important; aspect-ratio: auto !important; }
.pl-logo-mark { display: block; width: 34px; height: 34px; flex: none; }
/* Logo seul : pas carré, et calé sur la hauteur du mot (30px écrasait « Plantis »). */
.pl-logo-leaf { width: auto; height: 23px; }
.pl-logo-word { font: 700 22px/1.1 "Plus Jakarta Sans", "Plus Jakarta Sans Placeholder", sans-serif;
  letter-spacing: -0.02em; color: rgb(14, 22, 15); white-space: nowrap; }
.pl-source { display: flex; align-items: center; justify-content: center; height: 100%; white-space: nowrap;
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Placeholder", sans-serif; font-weight: 700;
  font-size: 24px; letter-spacing: -0.02em; color: rgba(14, 22, 15, 0.42); }
.pl-menu { position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); z-index: 20; display: flex;
  flex-direction: column; gap: 2px; padding: 10px; background: #fff; border-radius: 20px;
  box-shadow: 0 12px 40px rgba(14, 22, 15, 0.14); }
.pl-menu[hidden] { display: none; }
/* Le bandeau du haut (58 px) coupe ce qui dépasse : on le libère le temps que le panneau est ouvert. */
.pl-menu-open { overflow: visible !important; }
.pl-menu a { padding: 12px 14px; border-radius: 12px; color: rgb(14, 22, 15); text-decoration: none;
  font: 500 16px/1.2 "Inter", "Inter Placeholder", sans-serif; }
.pl-menu a:hover { background: rgb(246, 247, 246); }
.pl-menu .pl-menu-cta { margin-top: 6px; text-align: center; background: rgb(14, 22, 15); color: #fff; }
@media (prefers-reduced-motion: reduce) { .pl-moving { animation: none; } html { scroll-behavior: auto; } }

/* Haut de page sombre (site/content/common.py : DARK_HERO). */
.pl-dark-hero h1, .pl-dark-hero h2, .pl-dark-hero p { color: rgb(238, 243, 234) !important; }
.pl-dark-hero [data-framer-name="Primary"] p { color: rgb(14, 22, 15) !important; }

/* Cartes plantes du bandeau : le dessin de l'app, refait en HTML (police Fraunces de l'app). */
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces-VariableFont.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces-Italic-VariableFont.ttf") format("truetype");
  font-weight: 100 900; font-style: italic; font-display: swap; }
/* Bandeau du haut : moitié gauche = médicaments, moitié droite = plantes, téléphone au milieu.
   Les deux bandes glissent vers la droite (médicament → app → plante) ; site.js duplique les cartes
   autant de fois qu'il faut pour que le tour boucle sans trou, et pose --pl-cycle. */
.pl-band-side { flex: 1 1 50%; min-width: 0; display: flex; align-items: center; overflow: hidden; }
.pl-band-strip { display: flex; gap: 16px; align-items: center; width: max-content; flex: none; }
.pl-moving { animation: pl-band var(--pl-dur, 45s) linear infinite; }
@keyframes pl-band { from { transform: translateX(calc(-1 * var(--pl-cycle, 0px))); }
  to { transform: translateX(0); } }
.pl-med { box-sizing: border-box; width: 124px; height: 182px; padding: 8px 8px 10px; display: flex;
  flex-direction: column; gap: 4px; background: #FBF8F1; border-radius: 14px; flex: none; }
.pl-med-icon { width: 100%; aspect-ratio: 1; border-radius: 10px; flex: none; display: flex;
  align-items: center; justify-content: center; }
.pl-med-icon svg { width: 44px; height: 44px; }
.pl-med p.pl-med-name { margin: 6px 0 0; font: 400 13px/1.15 Fraunces, Georgia, serif;
  color: #1A3A1F !important; min-height: 30px; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.pl-med p.pl-med-sub { margin: 0; font: 400 10px/1.2 "Plus Jakarta Sans", sans-serif;
  color: #6B7A6E !important; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-dark-hero p.pl-band-note { margin: 0; text-align: center;
  font: 500 13px/1.4 "Inter", "Inter Placeholder", sans-serif; color: rgba(238, 243, 234, .55) !important; }
/* Sur large écran la mention se loge dans le coin bas droit : elle ne prend plus de hauteur,
   donc le bouton et le téléphone remontent. En étroit elle resterait sur le téléphone. */
@media (min-width: 810px) {
  .pl-dark-hero p.pl-band-note { position: absolute; right: 40px; bottom: 24px; text-align: right; }
}
/* Hauteur calée sur deux lignes de nom : sinon le nom latin déborde sous la carte. */
.pl-plant { box-sizing: border-box; width: 124px; height: 182px; padding: 8px 8px 10px; display: flex;
  flex-direction: column; gap: 4px; background: #FBF8F1; border-radius: 14px; flex: none; }
.pl-plant-photo { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1; flex: none; }
.pl-plant-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pl-plant p.pl-plant-name { margin: 6px 0 0; font: 400 13px/1.15 Fraunces, Georgia, serif;
  color: #1A3A1F !important; min-height: 30px; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.pl-plant p.pl-plant-latin { margin: 0; font: italic 400 10px/1.2 Fraunces, Georgia, serif;
  color: #6B7A6E !important; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Carte « traditionnellement associées » du panneau « Scannez, importez, ou décrivez » :
   redessinée aux jetons de l'app (crème, Fraunces, vert) plutôt que découpée dans une capture. */
.pl-feel { box-sizing: border-box; width: 100%; background: #FBF8F1; border-radius: 18px;
  padding: 16px 16px 14px; color: #1A3A1F; }
.pl-feel p.pl-feel-title { margin: 0 0 11px; text-transform: uppercase; letter-spacing: .14em;
  font: 700 9.5px/1 "Plus Jakarta Sans", sans-serif; color: #6E8A72 !important; }
.pl-feel-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid rgba(26, 58, 31, .08); }
.pl-feel-row:last-child { border-bottom: 0; }
.pl-feel-row b { font: 400 14px/1.2 Fraunces, Georgia, serif; color: #1A3A1F; }
.pl-feel-row span { font: italic 400 12px/1.2 Fraunces, Georgia, serif; color: #6E8A72;
  text-align: right; }
/* ---- Cohérence des sections (revue de design du 2026-09-23) ---- */

/* Haut de page : le téléphone s'arrête net entre la carte verte et les tuiles, sans fondu ;
   les voiles latéraux n'estompent que la carte qui entre ou qui sort. */
.pl-dark-hero [data-framer-name="Hero Image"] { height: 502px !important; }
.pl-dark-hero [data-framer-name="Linear"] { width: 12% !important; }
/* Entre 810 et ~1060 px, la mention passait sous le téléphone : elle reste centrée jusque-là. */
@media (min-width: 810px) and (max-width: 1059.98px) {
  .pl-dark-hero p.pl-band-note { position: static; text-align: center; }
}

/* Les trois sections « Feature » : même panneau, une seule carte de l'app, même bas de colonne. */
.framer-DJbYj .framer-1rc8xow { gap: 40px !important; }        /* « Scannez » : titre → bouton */
.framer-DJbYj .framer-10icnta { gap: 40px !important; }        /* « Zone du corps » : coches → bouton */
.framer-DJbYj [data-framer-name="Step-2"] p.framer-text { font-size: 16px !important; line-height: 24px !important; }
.pl-body-shot { aspect-ratio: 4 / 5 !important; width: min(314px, 100%) !important; align-self: center;
  border-radius: 18px; overflow: hidden;
  /* fond de la scène anatomique de l'app : dégradé chaud + halo mousse au centre */
  background: radial-gradient(ellipse 49% 39% at 50% 50%, rgba(74, 107, 74, .10), rgba(74, 107, 74, 0)),
              linear-gradient(180deg, #EFE8D7, #F4F0E6); }
/* Points sur les organes cités : vert de sélection de l'app, liseré crème, onde lente. */
.pl-dot { position: absolute; z-index: 1; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: #2E7D32; box-shadow: 0 0 0 2px #FBF8F1, 0 0 0 6px rgba(46, 125, 50, .16); }
.pl-dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; opacity: 0;
  border: 1px solid rgba(46, 125, 50, .45); }
.pl-motion .pl-dot::after { animation: pl-pulse 3s cubic-bezier(.2, .6, .3, 1) infinite; }
.pl-dot + .pl-dot::after { animation-delay: 1s; }
.pl-dot + .pl-dot + .pl-dot::after { animation-delay: 2s; }
@keyframes pl-pulse { 0% { transform: scale(.4); opacity: .9; } 70%, 100% { transform: scale(1.3); opacity: 0; } }
/* Cartes d'organes, façon « Plus de catégories » de l'app. Une seule règle de placement : même largeur,
   même débord (--pl-out) au-delà de la silhouette, donc même marge au bord du panneau vert (18 px à
   1200 px et plus) ; en hauteur, zigzag régulier — cerveau à cheval sur le haut, poumons au milieu,
   cœur à cheval sur le bas, du même débord (--pl-over) : autant de vert au-dessus qu'en dessous. */
.pl-organs { position: absolute; left: 50%; top: 0; width: min(314px, 100%); aspect-ratio: 4 / 5;
  transform: translateX(-50%); pointer-events: none; --pl-out: 91px; --pl-over: 29px; }
.pl-organ { position: absolute; box-sizing: border-box; display: flex; align-items: center; gap: 10px;
  width: 196px; padding: 10px 14px 10px 10px; background: #FBF8F1; border-radius: 16px;
  box-shadow: 0 10px 28px rgba(5, 20, 8, .28); --pl-base: translateY(0); transform: var(--pl-base); }
.pl-organ-brain { right: calc(-1 * var(--pl-out)); top: calc(-1 * var(--pl-over)); }
.pl-organ-lungs { left: calc(-1 * var(--pl-out)); top: 50%; --pl-base: translateY(-50%); }
.pl-organ-heart { right: calc(-1 * var(--pl-out)); bottom: calc(-1 * var(--pl-over)); }
.pl-organ-icon { width: 40px; height: 40px; border-radius: 12px; flex: none; display: flex; align-items: center;
  justify-content: center; }
.pl-organ-icon svg { width: 22px; height: 22px; }
.pl-organ-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-organ-name { font: 600 13.5px/1.2 "Plus Jakarta Sans", "Plus Jakarta Sans Placeholder", sans-serif; color: #1A3A1F; }
.pl-organ-line { font: italic 400 12px/1.25 Fraunces, Georgia, serif; color: #6E8A72; }
/* Au défilement (posé par site.js, jamais si les animations sont réduites ni sans JavaScript) :
   chaque point éclot, puis sa carte glisse depuis son côté, nette après un léger flou ; ensuite les
   cartes flottent à des vitesses différentes pendant qu'on fait défiler (--pl-par, de -1 à 1). */
/* Les transitions ne vivent que dans l'état « pl-in » : se cacher au chargement est instantané, sinon
   une carte déjà à l'écran s'estomperait avant d'entrer. */
.pl-anim .pl-dot { transform: scale(0); }
.pl-anim.pl-in .pl-dot { transform: none; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) .15s; }
.pl-anim.pl-in .pl-dot + .pl-dot { transition-delay: .4s; }
.pl-anim.pl-in .pl-dot + .pl-dot + .pl-dot { transition-delay: .65s; }
.pl-anim .pl-organ { opacity: 0; filter: blur(6px);
  transform: var(--pl-base) translate3d(var(--pl-from, 28px), 12px, 0) scale(.96); }
.pl-anim .pl-organ-brain { --pl-d: .3s; }
.pl-anim .pl-organ-lungs { --pl-d: .55s; --pl-from: -28px; }
.pl-anim .pl-organ-heart { --pl-d: .8s; }
.pl-anim.pl-in .pl-organ { opacity: 1; filter: none; transform: var(--pl-base);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1) var(--pl-d), filter .8s cubic-bezier(.22, 1, .36, 1) var(--pl-d),
              transform 1s cubic-bezier(.22, 1, .36, 1) var(--pl-d); }
.pl-anim.pl-done .pl-organ, .pl-anim.pl-done .pl-dot { transition: none; }
@media (min-width: 810px) {
  .pl-anim.pl-in .pl-organ-brain { translate: 0 calc(var(--pl-par, 0) * -16px); }
  .pl-anim.pl-in .pl-organ-lungs { translate: 0 calc(var(--pl-par, 0) * 12px); }
  .pl-anim.pl-in .pl-organ-heart { translate: 0 calc(var(--pl-par, 0) * -9px); }
}
/* En étroit, la carte occupe tout le panneau : les cartes d'organes s'empilent dessous et montent. */
@media (max-width: 809.98px) {
  .pl-organs { position: static; transform: none; aspect-ratio: auto; align-self: center; display: grid; gap: 8px; }
  .pl-organ { position: static; width: auto; box-shadow: none; --pl-base: translateY(0); --pl-from: 0px; }
  .pl-anim .pl-organ-lungs { --pl-from: 0px; }
}
/* « Nature » : téléphone centré, coupé net sous la carte « Plante du jour ». */
.framer-DJbYj .framer-1csn4xd { aspect-ratio: .67 !important; }
@media (min-width: 1200px) {
  .framer-DJbYj .framer-1589eqe { padding-left: 104px !important; padding-right: 104px !important; }
}

/* Chiffres qui comptent : une valeur en cours plus large que la case déborde des deux côtés. */
[data-pl-count] { display: flex; justify-content: center; white-space: nowrap; }

/* « 3 étapes » : titres à la graisse des autres titres de la page. La hauteur visible du téléphone
   est posée par build.py (steps_cut) : coupe dans l'espace vide sous la dernière carte. */
#how-it-works h6.framer-text { font-weight: 500 !important; letter-spacing: -0.02em !important; }

/* « Des faits » : toutes les cartes avec le même retrait de 24 px ; la phrase de tête sur deux lignes. */
.framer-MX2kW.framer-v-z4qwgx.framer-z4qwgx, .framer-MX2kW.framer-v-bx5cwc.framer-z4qwgx { padding: 24px !important; }
.framer-MX2kW.framer-v-z4qwgx .framer-a54xza, .framer-MX2kW.framer-v-bx5cwc .framer-a54xza { padding: 0 !important; }
.framer-MX2kW.framer-v-z4qwgx h5.framer-text { max-width: 560px; text-wrap: balance; }

@media (max-width: 809.98px) {
  /* Pied de page : colonnes pleine largeur (liens entiers), crédits sur plusieurs lignes. */
  .framer-WpkJl.framer-v-1xkzej9 .framer-14vjss4, .framer-WpkJl.framer-v-1xkzej9 .framer-19xkfg4,
  .framer-WpkJl.framer-v-1xkzej9 .framer-7yx6mi { width: 100% !important; }
  .framer-WpkJl.framer-v-1xkzej9 .framer-1jnize1 { white-space: normal !important; width: 100% !important; }
}
@media (max-width: 767.98px) {
  .pl-dark-hero [data-framer-name="Hero Image"] { height: 306px !important; }
  .framer-DJbYj .framer-j2r4ro { padding: 20px !important; }
  .framer-DJbYj .framer-1589eqe { padding-left: 23px !important; padding-right: 23px !important; }
  .framer-0jhfe.framer-v-1gxj7ji.framer-vpblzz, .framer-0jhfe.framer-v-b4shi1.framer-vpblzz {
    height: auto !important; gap: 40px; padding: 24px !important; }
  .framer-MX2kW.framer-v-1z0mpbb.framer-z4qwgx { height: auto !important; }
  .framer-MX2kW.framer-v-1z0mpbb .framer-a54xza { gap: 32px; }
}

/* « Découvrez ce que dit la nature » : la vidéo de l'onglet Naturel sur l'écran du téléphone. */
.pl-demo { position: absolute; display: block; object-fit: cover; background: transparent; pointer-events: none; }
.pl-island { position: absolute; background: #000; border-radius: 999px; pointer-events: none; }

/* ---- Animations reprises du modèle Plantab (inventaire du 2026-09-25) ----
   Les mouvements n'existent que sous html.pl-motion, posé par site.js hors « animations réduites » et
   hors ?pl-static : sans lui, chaque état final s'affiche d'emblée. Courbe du modèle : .44,0,.56,1. */

/* Menu du haut : se cache quand on descend, revient dès qu'on remonte (768 px et plus). */
.pl-motion .framer-kytauw-container { transition: opacity .6s cubic-bezier(.25, .8, .3, 1),
  transform .6s cubic-bezier(.25, .8, .3, 1); }
.pl-nav-hidden { opacity: 0 !important; transform: translateY(-110px) !important; pointer-events: none; }

/* Boutons : fond teinté et libellé qui roule (la 2e copie, 24 px plus bas, prend la place de la 1re).
   Seulement sur un vrai bouton : « Bientôt » (aria-disabled) ne réagit pas. */
@media (hover: hover) {
  a.framer-gJ6z5:not([aria-disabled="true"]):is(:hover, :focus-visible):is(.framer-v-1d6v8r9, .framer-v-e5r8xq,
    .framer-v-fox7hb) { background-color: rgb(49, 112, 57) !important; }
  a.framer-gJ6z5.framer-v-1ilhpk:not([aria-disabled="true"]):is(:hover, :focus-visible) {
    background-color: rgb(14, 22, 15) !important; }
  a.framer-gJ6z5:not([aria-disabled="true"]):is(:hover, :focus-visible):is(.framer-v-fox7hb, .framer-v-1ilhpk)
    :is(.framer-10yh5mg, .framer-k6bi09) { --extracted-r6o4lv: rgb(255, 255, 255) !important; }
  .pl-dark-hero a[data-framer-name="Primary"]:not([aria-disabled="true"]):is(:hover, :focus-visible) p {
    color: rgb(255, 255, 255) !important; }
  .pl-motion a.framer-gJ6z5:not([aria-disabled="true"]):is(:hover, :focus-visible) .framer-10yh5mg {
    translate: 0 -24px; scale: .9; }
  .pl-motion a.framer-gJ6z5:not([aria-disabled="true"]):is(:hover, :focus-visible) .framer-k6bi09 {
    translate: 0 -24px; transform: none !important; }
  /* Liens du menu et du pied de page : vert au survol. */
  a.framer-X5JIc:not([aria-disabled="true"]):is(:hover, :focus-visible) > div { --extracted-r6o4lv: rgb(49, 112, 57) !important; }
  /* Bouton du formulaire d'assistance. */
  button.framer-5z5Rr:is(:hover, :focus-visible) { background-color: rgb(49, 112, 57) !important; }
}
.pl-motion a.framer-gJ6z5 { transition: background-color .3s cubic-bezier(.44, 0, .56, 1); }
.pl-motion a.framer-gJ6z5 :is(.framer-10yh5mg, .framer-k6bi09) { transition: translate .3s cubic-bezier(.44, 0, .56, 1),
  scale .3s cubic-bezier(.44, 0, .56, 1), transform .3s cubic-bezier(.44, 0, .56, 1); }
.pl-motion a.framer-gJ6z5 p, .pl-motion a.framer-X5JIc p { transition: color .3s cubic-bezier(.44, 0, .56, 1); }
.pl-motion button.framer-5z5Rr { transition: background-color .2s cubic-bezier(.44, 0, .56, 1); }
a[aria-disabled="true"], a[aria-disabled="true"] * { cursor: default !important; }

/* Menu téléphone : les trois traits deviennent une croix (traits de 2 px, centres à 5 px les uns des
   autres), le panneau descend en fondu. La croix reste même sans animation : elle dit « fermer ». */
[data-pl-menu-button][aria-expanded="true"] .framer-jlw40m { transform: translateY(5px) rotate(-45deg) !important; }
[data-pl-menu-button][aria-expanded="true"] .framer-ixf07o { transform: scaleX(.06) !important; }
[data-pl-menu-button][aria-expanded="true"] .framer-vwlm7j { transform: translateY(-5px) rotate(45deg) !important; }
.pl-motion [data-pl-menu-button] > div { transition: transform .3s cubic-bezier(.44, 0, .56, 1); }
.pl-motion .pl-menu:not([hidden]) { animation: pl-menu-in .3s cubic-bezier(.44, 0, .56, 1); }
@keyframes pl-menu-in { from { opacity: 0; transform: translateY(-8px); } }

/* FAQ : la réponse apparaît en fondu, le + tourne en − (site.js anime la hauteur). */
.pl-motion [data-pl-faq] [data-framer-name="Answer"] { transition: opacity .3s cubic-bezier(.44, 0, .56, 1); }
.pl-motion [data-pl-faq] :is([data-framer-name="Horizontal"], [data-framer-name="Vertical"]) {
  transition: transform .3s cubic-bezier(.44, 0, .56, 1), background-color .3s cubic-bezier(.44, 0, .56, 1); }

/* Chiffres qui comptent : une valeur en cours plus large que la case déborde des deux côtés. */
[data-pl-count] { display: flex; justify-content: center; white-space: nowrap; }

/* « 3 étapes » : le cercle de l'étape passe au sombre quand elle atteint le milieu de l'écran. */
@property --pihg2i { syntax: "<color>"; inherits: true; initial-value: rgb(49, 112, 57); }
/* Ressort du modèle (durée .4, rebond .2) échantillonné ; sans linear(), la courbe du modèle. */
.pl-motion .framer-sM8ta .framer-1ql2v6 { transition: background-color .4s cubic-bezier(.44, 0, .56, 1);
  transition: background-color .45s linear(0, .117, .344, .569, .748, .872, .949, .99, 1.009, 1.015, 1.014,
    1.011, 1.008, 1.005, 1.002, 1.001, 1, 1, 1); }
.pl-motion .framer-sM8ta .framer-1ql2v6 > * { transition: --pihg2i .4s cubic-bezier(.44, 0, .56, 1);
  transition: --pihg2i .45s linear(0, .117, .344, .569, .748, .872, .949, .99, 1.009, 1.015, 1.014,
    1.011, 1.008, 1.005, 1.002, 1.001, 1, 1, 1); }

/* D'une page à l'autre : fondu de la nouvelle page. Le menu du haut reste immobile grâce au CSS du
   modèle (view-transition-name « …-kytauw-exclude », animation none). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: pl-page-in .4s cubic-bezier(.44, 0, .56, 1); }
@keyframes pl-page-in { from { opacity: 0; } }

/* Loader de l'app (PlantisLogoLoader « Tracé », cycle de 2,3 s) : chaque pièce du logo se dessine au trait
   puis se remplit, en cascade (décalage de 14 %), et tout s'estompe avant de reboucler. Fond crème de
   PlantisLoadingView. Affiché seulement quand le script de tête pose html.pl-loading (1re visite, ou
   chargement de plus de 0,5 s : html.pl-late, puis pl-shown pour le fondu d'arrivée). */
.pl-loader { display: none; }
.pl-loading .pl-loader { display: flex; position: fixed; inset: 0; z-index: 1000; align-items: center;
  justify-content: center; background: rgb(239, 232, 215); transition: opacity .45s cubic-bezier(.44, 0, .56, 1); }
.pl-loading.pl-loaded .pl-loader { opacity: 0; pointer-events: none; }
.pl-late:not(.pl-shown) .pl-loader { opacity: 0; }
.pl-loader path { stroke-width: 14.35; stroke-dasharray: 1; stroke-linecap: round; stroke-linejoin: round; }
.pl-loader .pl-piece-0 { animation: pl-draw-0 2.3s ease-in-out infinite, pl-fill-0 2.3s ease-in-out infinite; }
.pl-loader .pl-piece-1 { animation: pl-draw-1 2.3s ease-in-out infinite, pl-fill-1 2.3s ease-in-out infinite; }
.pl-loader .pl-piece-2 { animation: pl-draw-2 2.3s ease-in-out infinite, pl-fill-2 2.3s ease-in-out infinite; }
@keyframes pl-draw-0 { 0% { stroke-dashoffset: 1; } 32%, 100% { stroke-dashoffset: 0; } }
@keyframes pl-draw-1 { 0%, 14% { stroke-dashoffset: 1; } 46%, 100% { stroke-dashoffset: 0; } }
@keyframes pl-draw-2 { 0%, 28% { stroke-dashoffset: 1; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes pl-fill-0 { 0%, 24% { fill-opacity: 0; stroke-opacity: 1; } 50%, 86% { fill-opacity: 1; stroke-opacity: 0; }
  100% { fill-opacity: 0; stroke-opacity: 0; } }
@keyframes pl-fill-1 { 0%, 38% { fill-opacity: 0; stroke-opacity: 1; } 64%, 86% { fill-opacity: 1; stroke-opacity: 0; }
  100% { fill-opacity: 0; stroke-opacity: 0; } }
@keyframes pl-fill-2 { 0%, 52% { fill-opacity: 0; stroke-opacity: 1; } 78%, 86% { fill-opacity: 1; stroke-opacity: 0; }
  100% { fill-opacity: 0; stroke-opacity: 0; } }