/* Trouver ma plante: one question per screen, a progress line, then ranked results with one reason each. */
.fd { padding-block: clamp(12px, 3vh, 32px) clamp(64px, 10vh, 120px); }
@media (max-width: 900px) { .fd { padding-block-start: 16px; } }
.fd__bar { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 20px; margin-block-end: clamp(36px, 7vh, 72px); }
.fd__back { all: unset; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 500 14px/1 var(--font-text); }
.fd__back svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; rotate: 180deg; }
.fd__back:hover { text-decoration: underline; text-underline-offset: 4px; }
.fd__back:focus-visible { outline: 2px solid var(--zellige); outline-offset: 4px; border-radius: 4px; }
.fd__count { grid-column: 2; justify-self: end; margin: 0; font: 400 14px/1 var(--font-text); opacity: .62; }
.fd__back:not([hidden]) + .fd__count { grid-column: 2; }
.fd__line { grid-column: 1 / -1; display: block; block-size: 2px; background: rgba(18,20,18,.1); border-radius: 99px; overflow: hidden; }
.fd__line i { display: block; block-size: 100%; inline-size: max(var(--p, 0%), 2%); background: var(--zellige); transition: inline-size .6s cubic-bezier(.16,1,.3,1); }

.fd__step, .fd__res { display: grid; gap: 18px; }
.fd__step[hidden], .fd__res[hidden] { display: none; }
.fd__q { margin: 0; font: 400 clamp(40px, 5.4vw, 84px)/1 var(--font-serif); letter-spacing: -.03em; font-variation-settings: "opsz" 72; outline: none; }
.fd__q--res { font-size: clamp(38px, 4.6vw, 72px); }
.fd__step .lede { margin-block-end: clamp(16px, 3vh, 32px); }
.is-entering { animation: stepIn .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .is-entering { animation: none; } .fd__line i { transition: none; } }

/* question 1: five places with photos */
.places { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pl { all: unset; box-sizing: border-box; display: grid; gap: 10px; align-content: start; cursor: pointer; }
.pl__img { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: #e7e4dc; }
.pl__img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--zellige); transition: box-shadow .3s cubic-bezier(.16,1,.3,1); }
.pl__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.16,1,.3,1); }
.pl:hover .pl__img img { transform: scale(1.04); }
.pl[aria-checked="true"] .pl__img::after { box-shadow: inset 0 0 0 4px var(--zellige); }
.pl:focus-visible .pl__img { outline: 2px solid var(--zellige); outline-offset: 3px; }
.pl__t { display: flex; align-items: center; gap: 8px; font: 400 23px/1.15 var(--font-serif); letter-spacing: -.01em; }
.pl__t svg, .cn svg { inline-size: 22px; block-size: 22px; flex: none; fill: none; stroke: var(--zellige); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pl__d { font: 400 14px/1.4 var(--font-text); opacity: .65; }

/* question 2: three honest answers */
.times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-inline-size: 1100px; }
.tm, .cn { all: unset; box-sizing: border-box; display: grid; align-content: start; gap: 10px; padding: 26px 24px; border: 1px solid rgba(18,20,18,.16); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.tm:hover, .cn:hover { border-color: rgba(18,20,18,.42); }
.tm[aria-checked="true"], .cn[aria-pressed="true"] { border-color: var(--zellige); box-shadow: inset 0 0 0 1px var(--zellige); background: color-mix(in oklab, var(--menthe) 55%, #fff); }
.tm:focus-visible, .cn:focus-visible { outline: 2px solid var(--zellige); outline-offset: 3px; }
.tm b, .cn b { font: 400 28px/1.1 var(--font-serif); letter-spacing: -.015em; font-weight: 400; }
.tm span, .cn span { font: 400 15px/1.5 var(--font-text); opacity: .75; }
.tm i { margin-block-start: 10px; font: 500 13px/1.3 var(--font-text); font-style: normal; color: var(--zellige); }
/* question 3: several constraints */
.cons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cn { padding: 22px; } .cn b { font-size: 23px; }
.cn svg { inline-size: 26px; block-size: 26px; margin-block-end: 6px; }
.fd__go { justify-self: start; margin-block-start: 14px; }

/* results */
.fd__sum { margin: 0; max-inline-size: 44em; font: 400 17px/1.55 var(--font-text); color: color-mix(in oklab, var(--encre) 76%, var(--chaux)); }
.fd__sum .link-btn { margin-inline-start: 4px; color: var(--zellige); font-weight: 500; }
.fd__relax { display: inline-block; margin-block-start: 8px; font-size: 15px; }
.top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 88px); align-items: center; margin-block: clamp(24px, 4vh, 48px) clamp(56px, 9vh, 96px); }
.top__pic { display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #e7e4dc; }
.top__pic img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.top__txt { display: grid; gap: 18px; justify-items: start; max-inline-size: 34em; }
.top__k { margin: 0; font: 500 14px/1 var(--font-text); color: var(--zellige); }
.top__name { margin: 0; font: 400 clamp(40px, 4.4vw, 68px)/1 var(--font-serif); letter-spacing: -.03em; }
.top__name a { color: inherit; text-decoration: none; }
.top__why { margin: 0; font: 400 clamp(20px, 1.7vw, 26px)/1.35 var(--font-serif); }
.top__facts { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; inline-size: 100%; font: 400 15px/1.45 var(--font-text); }
.top__facts li { display: flex; gap: 12px; align-items: flex-start; padding-block: 12px; border-block-start: 1px solid rgba(18,20,18,.1); }
.top__facts svg { inline-size: 20px; block-size: 20px; flex: none; fill: none; stroke: var(--zellige); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.top__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; inline-size: 100%; padding-block-start: 18px; border-block-start: 1px solid rgba(18,20,18,.1); }
.top__buy .price-big small { font: 400 16px/1 var(--font-text); opacity: .6; letter-spacing: 0; }
.top__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.top .note { opacity: .85; }
.fd__more { display: grid; gap: 28px; }
.fd__more[hidden] { display: none; }
.fd__more .grid-p .prod { animation: cardIn .6s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .fd__more .grid-p .prod { animation: none; } }
.fd__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-block-start: clamp(40px, 7vh, 72px); padding-block-start: 28px; border-block-start: 1px solid rgba(18,20,18,.12); }
.fd__share { margin-inline-start: auto; font: 500 14px/1 var(--font-text); }
.fd__none { display: grid; justify-items: start; gap: 18px; padding-block: 24px; }

.fd-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.fd-help__in { display: grid; gap: 12px; }

@media (max-width: 1100px) { .places { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .times { grid-template-columns: minmax(0, 1fr); }
  .top { grid-template-columns: minmax(0, 1fr); }
  .top__pic { aspect-ratio: 1; }
}
@media (max-width: 600px) {
  .places { grid-template-columns: 1fr 1fr; gap: 18px 10px; }
  .pl:last-child { grid-column: 1 / -1; } .pl:last-child .pl__img { aspect-ratio: 16 / 9; }
  .pl__t { font-size: 20px; } .pl__d { font-size: 13px; }
  .cons { grid-template-columns: minmax(0, 1fr); }
  .tm, .cn { padding: 18px; } .tm b { font-size: 24px; } .cn b { font-size: 21px; }
  .cn { grid-template-columns: auto 1fr; column-gap: 14px; } .cn svg { grid-row: span 2; margin: 2px 0 0; }
  .fd__share { margin-inline-start: 0; }
  .fd__go { inline-size: 100%; justify-content: center; }
}