/* 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, repris de hazelreformer.com (768 px et plus) : en haut de page, pas de pastille (fond,
   bord, ombre et marges intérieures à zéro), menu à 24 px du bord ; dès 72 px de défilement (classe
   pl-nav-top du menu retirée par site.js), pastille givrée qui s'ouvre et menu remonté à 12 px. Tout glisse en
   .4s ease, comme Hazel. Sur une page à haut sombre (pl-nav-dark), textes clairs tant qu'on est en haut. */
@media (min-width: 768px) {
  /* le modèle coupe ce qui dépasse du menu (overflow: clip) : l'ombre de la pastille serait tranchée net */
  .framer-kytauw-container nav { padding-top: 12px !important; padding-bottom: 12px !important; overflow: visible !important; }
  .framer-kytauw-container [data-framer-name="Container"] { background-color: rgba(255, 255, 255, .8) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 10px 40px rgba(14, 22, 15, .08); }
  .framer-kytauw-container.pl-nav-top nav { padding-top: 24px !important; padding-bottom: 24px !important; }
  .framer-kytauw-container.pl-nav-top [data-framer-name="Container"] { background-color: transparent !important;
    -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; box-shadow: none;
    padding-left: 0 !important; padding-right: 0 !important; }
  .pl-nav-dark .framer-kytauw-container.pl-nav-top [data-framer-name="Container"] :is(p, .pl-logo-word) {
    color: rgb(238, 243, 234) !important; }
  .pl-nav-dark .framer-kytauw-container.pl-nav-top [data-framer-name="Container"] a[data-framer-name="Navbar Button"] {
    background-color: rgb(238, 243, 234) !important; }
  .pl-nav-dark .framer-kytauw-container.pl-nav-top [data-framer-name="Container"] a[data-framer-name="Navbar Button"] p {
    color: rgb(14, 22, 15) !important; }
  .pl-nav-dark .framer-kytauw-container.pl-nav-top .pl-logo-leaf { filter: brightness(0) invert(1); }
  .pl-motion .framer-kytauw-container .pl-logo-leaf { transition: filter .4s ease; }
  /* la pastille garde aussi l'entrée du menu (opacité, position) que site.js écrit en style en ligne */
  .pl-motion .framer-kytauw-container [data-framer-name="Container"] {
    transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1),
      padding .4s ease, background-color .4s ease, border-color .4s ease, box-shadow .4s ease !important; }
  .pl-motion .framer-kytauw-container nav,
  .pl-motion .framer-kytauw-container [data-framer-name="Container"] :is(p, .pl-logo-word, a[data-framer-name="Navbar Button"]) {
    transition: padding .4s ease, background-color .4s ease, border-color .4s ease, box-shadow .4s ease,
      color .4s ease; }
}

/* 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; } }

/* Grande carte « Des faits » : la fiche de l'app redessinée (build.py med_card) */
.pl-shot-card { position: relative; overflow: hidden; }
.pl-medc { box-sizing: border-box; flex: none; overflow: hidden; border-radius: 20px; background: #F4F0E6; color: #1A3A1F;
  box-shadow: 0 0 0 1px rgba(14,22,15,.06), 0 10px 30px rgba(14,22,15,.08); }
.pl-medc-top { padding: 16px 18px 40px; color: #FBF5EA; background: linear-gradient(160deg, #C9A173, #8A6240 55%, #452C17); }
.pl-medc-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: rgba(255,255,255,.2);
  font: 600 10px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: .12em; }
.pl-medc-tag i { width: 5px; height: 5px; border-radius: 50%; background: #F5DCB8; }
.pl-medc p.pl-medc-name { margin: 10px 0 0; font: 400 30px/1.05 Fraunces, Georgia, serif; color: #FBF5EA; }
.pl-medc-name em { font-style: italic; color: #F3D9B5; }
.pl-medc-stats { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: -26px 14px 0; padding: 10px 0; border-radius: 14px;
  background: #FBF8F1; text-align: center; font: 400 17px/1.2 Fraunces, Georgia, serif; }
.pl-medc-stats small { display: block; margin-top: 2px; font: 600 9px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: .08em; color: #6B5A46; }
.pl-medc-uses { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 14px; }
.pl-medc-uses > div { padding: 10px 12px; border-radius: 12px; background: #FBF8F1; }
.pl-medc-uses b { display: block; font: 600 12.5px/1.25 "Plus Jakarta Sans", sans-serif; }
.pl-medc-uses small { display: block; margin-top: 2px; font: 400 10.5px/1.25 "Plus Jakarta Sans", sans-serif; color: #6B5A46; }
/* la 2e rangée grandit avec les extraits ; ses trois cartes gardent la même hauteur */
[data-framer-name="Cards 02"] { height: auto !important; align-items: stretch !important; }
[data-framer-name="Cards 02"] [class*="-container"] { height: auto !important; }
[data-framer-name="Cards 02"] [class*="-container"] > * { height: 100% !important; }
@media (min-width: 768px) {
  .pl-shot-med > div:not(.pl-medc) { max-width: 52%; margin-right: auto; }
  .pl-shot-med .pl-medc { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); width: 320px; }
}
@media (max-width: 767.98px) {
  .pl-shot-med { gap: 20px; }
  .pl-shot-med .pl-medc { width: 100%; }
}

/* Cartes à chiffres : défilement continu entre le chiffre et son intitulé (build.py stat_cards) */
.framer-0jhfe { position: relative; overflow: hidden; }
.pl-tick { position: absolute; left: 24px; right: 24px; top: 84px; bottom: 60px; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(#0000, #000 14%, #000 86%, #0000); mask-image: linear-gradient(#0000, #000 14%, #000 86%, #0000); }
.pl-tick-col { display: flex; flex-direction: column; gap: 8px; will-change: transform; animation: pl-tick-up 40s linear infinite; }
.pl-tick-plants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pl-tick-plants .pl-tick-col { animation-duration: 32s; }
.pl-tick-plants .pl-tick-col:nth-child(2) { animation-direction: reverse; animation-duration: 38s; }
.pl-tick-photo { display: block; flex: none; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
/* zoom depuis le coin bas-gauche : le cœur de l'app, en haut à droite de la photo, sort du cadre */
.pl-tick-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); transform-origin: left bottom; }
.pl-tick-row { display: flex; align-items: center; gap: 10px; flex: none; padding: 8px 10px; border-radius: 12px; background: #fff; }
.pl-tick-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 9px; }
.pl-tick-icon svg { width: 18px; height: 18px; }
.pl-tick-row b { display: block; font: 400 15px/1.15 Fraunces, Georgia, serif; color: rgb(14, 22, 15); }
.pl-tick-row small { display: block; margin-top: 2px; font: 400 11px/1.2 "Plus Jakarta Sans", sans-serif; color: rgb(95, 105, 92); }
@keyframes pl-tick-up { to { transform: translateY(calc(-50% - 4px)); } }
@media (prefers-reduced-motion: reduce) { .pl-tick-col { animation: none; } }
@media (max-width: 767.98px) {   /* carte trop basse sur téléphone : elle grandit pour laisser voir le défilement */
  [data-framer-name="Cards 01"] [class*="-container"]:has(> .framer-0jhfe) { height: auto !important; }
  .framer-0jhfe { min-height: 300px; }
}

/* Carte « Rester prudent » : champ des Conseils où le texte s'écrit (build.py type_card, site.js typing) */
.pl-type { box-sizing: border-box; width: 100%; margin: 20px 0; padding: 12px; border-radius: 18px; background: #F4F0E6;
  box-shadow: 0 0 0 1px rgba(14,22,15,.06), 0 10px 30px rgba(14,22,15,.08); }
.pl-type-field { display: flex; align-items: center; gap: 10px; padding: 13px 12px 13px 14px; border-radius: 15px; background: #FBF8F1;
  box-shadow: 0 2px 8px rgba(14,22,15,.05); }
.pl-type-spark { flex: none; width: 20px; height: 20px; color: #3F6B47; }
.pl-type-spark svg, .pl-type-send svg { display: block; width: 100%; height: 100%; }
.pl-type-line { position: relative; flex: 1; min-width: 0; height: 20px; overflow: hidden; white-space: nowrap;
  font: 400 14px/20px "Plus Jakarta Sans", sans-serif; }
.pl-type-hint { position: absolute; left: 0; top: 0; color: rgb(165, 165, 155); }
.pl-type-on .pl-type-hint { visibility: hidden; }
.pl-type-text { position: absolute; right: auto; left: 0; top: 0; color: rgb(26, 58, 31); }
.pl-type-on .pl-type-text::after { content: ""; display: inline-block; width: 1.5px; height: 16px; margin-left: 1px;
  vertical-align: -3px; background: #3F6B47; }
.pl-type-send { flex: none; box-sizing: border-box; width: 26px; height: 26px; padding: 6px; border-radius: 50%; color: #fff;
  background: rgb(214, 208, 196); transition: background-color .2s ease; }
.pl-type-on .pl-type-send { background: #2E6B3A; }
.pl-type p.pl-type-tries { margin: 10px 2px 0; font: 400 12px/1.3 "Plus Jakarta Sans", sans-serif; color: rgb(110, 100, 88); }
.pl-type-tries i { font: italic 400 12.5px/1.3 Fraunces, Georgia, serif; color: #3F6B47; }

/* Carte « Une plante par jour » : calendrier qui avance d'un jour (build.py calendar_card, site.js calendar) */
.pl-cal { position: relative; width: 100%; height: 198px; margin: 16px 0 20px; flex: none; }
.pl-cal-edge { position: absolute; left: 5px; right: 5px; bottom: -5px; height: 20px; border-radius: 0 0 14px 14px; background: rgb(223, 227, 218);
  box-shadow: 0 8px 18px rgba(14, 22, 15, .12); }
.pl-cal-head { position: absolute; left: 0; right: 0; top: 0; height: 28px; border-radius: 16px 16px 0 0; background: #2E6B3A; color: #fff;
  text-align: center; font: 700 12px/28px "Plus Jakarta Sans", sans-serif; letter-spacing: .08em; }
.pl-cal-page { position: absolute; left: 0; right: 0; top: 28px; bottom: 0; overflow: hidden; border-radius: 0 0 16px 16px; background: #17301D; color: #fff; }
.pl-cal-photo { position: absolute; left: 124px; right: 0; top: 0; bottom: 0; overflow: hidden; }
.pl-cal-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); transform-origin: left bottom; }
.pl-cal-fade { position: absolute; left: 124px; right: 0; top: 0; bottom: 0; background: linear-gradient(rgba(14,22,15,0) 35%, rgba(14,22,15,.78)); }
.pl-cal-day { position: absolute; left: 0; top: 0; bottom: 0; width: 124px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #FBF8F1; color: rgb(14, 22, 15); }
.pl-cal-day b { font: 300 72px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: -.04em; }
.pl-cal-day small { margin-top: 4px; font: 600 11px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgb(95, 108, 92); }
.pl-cal-roll { position: absolute; left: 0; top: 0; bottom: 0; width: 124px; overflow: hidden; background: #FBF8F1; }
.pl-cal-roll .pl-cal-day { width: 100%; }
.pl-cal-page p.pl-cal-name { position: absolute; left: 138px; right: 14px; bottom: 13px; margin: 0; font: 400 18px/1.1 Fraunces, Georgia, serif; color: #fff; }
@media (max-width: 767.98px) {
  .pl-cal-photo, .pl-cal-fade { left: 100px; }
  .pl-cal-day, .pl-cal-roll { width: 100px; }
  .pl-cal-day b { font-size: 60px; }
  .pl-cal-page p.pl-cal-name { left: 112px; font-size: 16px; }
}

/* Tarifs : trois offres côte à côte, l'annuelle mise en avant (build.py pricing_plans) */
[data-framer-name="Pricing Section"] [data-framer-name="Content"] { flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: none !important; gap: 40px !important; }
[data-framer-name="Pricing Section"] > [data-framer-name="Container"] { width: 100% !important; max-width: 1240px !important; }
[data-framer-name="Pricing Section"] [data-framer-name="Title"], [data-framer-name="Pricing Section"] [data-framer-name="Title"] > * {
  width: 100% !important; height: auto !important; flex: none !important; align-items: center !important; justify-content: center !important; }
[data-framer-name="Pricing Section"] [data-framer-name="Title"] h2 { text-align: center !important; }
.pl-plans { width: 100%; }
.pl-plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pl-plan { display: flex; flex-direction: column; padding: 26px; border-radius: 24px; background: rgb(246, 247, 246); color: rgb(14, 22, 15); }
.pl-plan-best { background: #12301B; color: #F2F6EC; }
.pl-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.pl-plan p { margin: 0; }
.pl-plan p.pl-plan-name { font: 500 18px/1.2 "Plus Jakarta Sans", sans-serif; color: inherit; }
.pl-plan-tag { padding: 5px 11px; border-radius: 99px; background: #D9ECB8; color: #1D4A26; font: 600 12px/1.2 "Plus Jakarta Sans", sans-serif; white-space: nowrap; }
.pl-plan p.pl-plan-price { margin-top: 18px; font: 400 46px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: -.03em; color: inherit; }
.pl-plan-price small { margin-left: 3px; font: 400 17px/1 "Inter", "Inter Placeholder", sans-serif; letter-spacing: 0; color: rgb(95, 106, 93); }
.pl-plan p.pl-plan-sub { margin-top: 8px; font: 400 14px/1.35 "Inter", "Inter Placeholder", sans-serif; color: rgb(95, 106, 93); }
.pl-plan-best .pl-plan-price small, .pl-plan-best p.pl-plan-sub { color: #C6D6BF; }
.pl-plan-list { flex: 1; margin: 22px 0 0; padding: 0; list-style: none; }
.pl-plan-list li { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 400 15px/1.3 "Inter", "Inter Placeholder", sans-serif; }
.pl-plan-list i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #2E6B3A; color: #fff; font: 600 12px/20px "Inter", sans-serif; text-align: center; font-style: normal; }
.pl-plan-best .pl-plan-list i { background: #D9ECB8; color: #12301B; }
.pl-plan-cta { display: block; margin-top: 22px; padding: 15px; border: 1.5px solid rgba(14, 22, 15, .33); border-radius: 99px; color: inherit; text-align: center; text-decoration: none;
  font: 600 15px/1.2 "Plus Jakarta Sans", sans-serif; }
.pl-plan-best .pl-plan-cta { border-color: #F2F6EC; background: #F2F6EC; color: #12301B; }
.pl-plans p.pl-plans-note { margin: 16px 0 0; text-align: center; font: 400 13.5px/1.5 "Inter", "Inter Placeholder", sans-serif; color: rgb(95, 106, 93); }
@media (max-width: 1023.98px) {
  .pl-plans-grid { grid-template-columns: minmax(0, 1fr); }
  .pl-plan-best { order: -1; }
}