/* Profession landings (app/_landing/renderProfessionLanding.ts): breadcrumb, photo orbit,
 * feature splits, showcase, bento, « sans / avec Nowie » comparison and steps. */

/* Breadcrumb above the hero */
.n-breadcrumb { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .55em; margin-bottom: 1.6em; color: #a99cc0; font-size: .7em; }
.n-breadcrumb a { color: #d9d0ee; transition: color .3s; }
.n-breadcrumb a:hover { color: white; }
.n-breadcrumb [aria-hidden] { opacity: .5; }

/* A real photo fills its hero orbit instead of overflowing like the illustrations */
.n-portrait-disc.is-photo img { left: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; }

/* Line pointing down at the video, under the VSL heading */
.n-vsl-cue { display: flex; align-items: center; gap: .65em; width: fit-content; margin: 1.6em auto 0; padding: .55em 1.1em .55em .55em; border-radius: 99em; background: #f0eefd; color: #4c3fb3; font-size: .8em; font-weight: 600; }
.n-vsl-cue-play { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: #6c5ce7; }
.n-vsl-cue-play svg { width: .9em; height: .9em; margin-left: .1em; fill: white; }
.n-vsl-cue > .n-icon { width: 1.1em; height: 1.1em; transform: rotate(90deg); animation: n-cue-nudge 1.6s ease-in-out infinite; }
@keyframes n-cue-nudge { 50% { transform: rotate(90deg) translateX(.25em); } }
@media (prefers-reduced-motion: reduce) { .n-vsl-cue > .n-icon { animation: none; } }

/* Feature split: copy next to an animated scene of the app, zigzagging down the page */
.n-split-section .n-section-title { margin-bottom: 3.5em; }
.n-split { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; column-gap: 4.5em; padding: 1.5em 0; }
.n-split.is-reversed .n-split-art { order: -1; }
.n-split-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4em; }
.n-split-eyebrow { display: inline-flex; align-items: center; gap: .6em; color: #76648c; font-size: .7em; letter-spacing: .09em; text-transform: uppercase; }
.n-split-eyebrow .n-icon { width: 1.5em; height: 1.5em; color: #6c5ce7; }
.n-split-copy .h3 { margin: 0; text-align: left; text-transform: uppercase; font-size: 3.2em; line-height: 1.05; }
.n-split-copy .h3 .text-green { color: var(--n-purple); }
.n-split-copy > p { margin: 0; max-width: 31em; color: #7d6e8a; font-size: .95em; line-height: 1.65; }
.n-split-copy ul { display: flex; flex-direction: column; gap: .8em; margin: .1em 0; padding: 0; list-style: none; }
.n-split-copy li { display: flex; align-items: flex-start; gap: .6em; color: #645173; font-size: .85em; line-height: 1.45; }
.n-split-copy li .n-icon { flex: 0 0 auto; width: 1.2em; height: 1.2em; margin-top: .1em; color: #8d75c0; }
.n-split-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2em 1.6em; margin-top: .3em; }
.n-split-actions .n-text-link { margin-top: 0; color: #8c76a7; }
.n-split-art { min-width: 0; overflow: hidden; border-radius: 2.2em; background: #f7f5fb; }
.n-split-art .motion-scene { width: 100%; margin: 0; }
.n-split-art .motion-caption { padding-inline: 1.6em; }
.n-split-art[data-scene='google'] .motion-canvas,
.n-split-art[data-scene='google'] .motion-fallback { aspect-ratio: 760 / 640; }

/* Showcase: the métier's signature feature, a centred scene with two callouts on each side */
.n-feature-eyebrow { margin: 0 auto; }
.n-showcase { display: grid; grid-template-columns: 1fr minmax(0, 25em) 1fr; align-items: center; gap: 2.5em; width: 100%; }
.n-showcase-side { display: flex; flex-direction: column; gap: 1.4em; }
.n-showcase-art { overflow: hidden; border-radius: 2.4em; background: #f7f5fb; }
.n-showcase-art .motion-scene { width: 100%; margin: 0; }
.n-callout { position: relative; display: flex; align-items: flex-start; gap: 1em; padding: 1.4em 1.4em 1.5em; border-radius: 1.6em; background: #f9f8fc; box-shadow: inset 0 0 0 1px #1b142b08; }
.n-callout-icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.6em; height: 2.6em; border-radius: .9em; background: #efeafd; color: #6c5ce7; }
.n-callout-icon .n-icon { width: 1.3em; height: 1.3em; }
.n-callout h3 { margin: 0 0 .35em; font-family: inherit; font-size: 1em; font-weight: 700; line-height: 1.3; letter-spacing: normal; text-transform: none; }
.n-callout p { margin: 0; color: #8a8195; font-size: .82em; line-height: 1.5; }
/* Dashed connector from each callout towards the phone */
.n-showcase-side .n-callout::after { content: ''; position: absolute; top: 50%; width: 2.5em; border-top: 2px dashed #cfc5f3; }
.n-showcase-side.is-left .n-callout::after { left: 100%; }
.n-showcase-side.is-right .n-callout::after { right: 100%; }

/* Bento: deposit scene next to the no-show calculator, key points underneath */
.n-bento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch; gap: 1em; width: 100%; max-width: 64em; margin: 0 auto; }
.n-bento-art { display: flex; align-items: center; overflow: hidden; border-radius: 2em; background: white; }
.n-bento-art .motion-scene { width: 100%; margin: 0; }
.n-bento .n-calculator { display: flex; flex-direction: column; justify-content: center; max-width: none; }
.n-calc-title { margin: 0 0 .8em; font-size: 1.7em; line-height: 1.05; }
.n-calc-title .text-green { color: var(--n-purple); }
.n-bento-points { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em 1em; margin: 0; padding: 0; list-style: none; }
.n-bento-points li { display: inline-flex; align-items: center; gap: .5em; padding: .55em 1em; border-radius: 99em; background: white; color: #645173; font-size: .8em; }
.n-bento-points .n-icon { width: 1.1em; height: 1.1em; color: #6c5ce7; }

/* « Sans logiciel » vs « Avec Nowie »: subgrid keeps each pair of rows aligned */
.n-compare { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto repeat(var(--rows), auto); column-gap: 1em; width: 100%; max-width: 62em; margin: 0 auto; }
.n-compare-col { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; padding: 2em 2em 1.2em; border-radius: 2em; }
.n-compare-col h3 { display: flex; align-items: center; gap: .45em; margin: 0 0 .7em; font-size: 1.25em; text-transform: uppercase; }
.n-compare-col h3 .n-icon { width: 1em; height: 1em; }
.n-compare-col ul { display: contents; }
.n-compare-col li { display: flex; align-items: flex-start; gap: .7em; padding: .85em 0; font-size: .9em; line-height: 1.45; }
.n-compare-col li .n-icon { flex: 0 0 auto; width: 1.25em; height: 1.25em; margin-top: .05em; stroke-width: 2.2; }
.n-compare-col.is-without { background: #f8f7fb; color: #2b213d; }
.n-compare-col.is-without li { border-top: 1px solid #1b142b0d; color: #8a8195; }
.n-compare-col.is-without li .n-icon { color: #c4b9cf; }
.n-compare-col.is-with { background: #2b203c; color: white; box-shadow: 0 1.6em 3.6em #2b203c33; }
.n-compare-col.is-with h3 .n-icon { color: #b7a7ff; }
.n-compare-col.is-with li { border-top: 1px solid #ffffff14; color: #e3dcf1; }
.n-compare-col.is-with li .n-icon { color: #b7a7ff; }

/* Getting started */
.n-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin: 0; padding: 0; list-style: none; }
.n-step { display: flex; flex-direction: column; gap: .9em; padding: 2em 1.8em 2.1em; border-radius: 2em; background: #f8f7fb; }
.n-step-number { color: #6c5ce7; font-family: var(--_typography---h1--font); font-size: 2.6em; line-height: 1; }
.n-step h3 { margin: 0; font-size: 1.45em; }
.n-step p { margin: 0; color: #8a8195; font-size: .88em; line-height: 1.5; }
.n-steps-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.2em 1.8em; }
.n-steps-actions .n-text-link { margin-top: 0; }

/* FAQ questions are <h3> wrapping the accordion button: keep the button's look */
.n-faq-question { margin: 0; font: inherit; letter-spacing: inherit; text-transform: none; }

/* Link to the blog guide under the FAQ buttons */
.faq_content > .n-text-link { margin-top: .2em; color: #8c76a7; }

@media (max-width: 991px) {
  .n-split { column-gap: 2.2em; }
  .n-split-copy .h3 { font-size: 2.6em; }
  .n-steps { grid-template-columns: 1fr; }
  .n-showcase { grid-template-columns: 1fr 1fr; gap: 1em; }
  .n-showcase-art { grid-column: 1 / -1; order: -1; width: 100%; max-width: 26em; margin: 0 auto 1em; }
  .n-showcase-side .n-callout::after { display: none; }
}

@media (max-width: 767px) {
  .n-split-section .n-section-title { margin-bottom: 2em; }
  .n-split { grid-template-columns: 1fr; row-gap: 2em; padding: 1em 0; }
  .n-split.is-reversed .n-split-art { order: 0; }
  .n-split-copy .h3 { font-size: 2.3em; }
  .n-split-art { border-radius: 1.6em; }
  .n-bento { grid-template-columns: 1fr; }
  /* The comparison stays a two-column table, rows still aligned, just tighter */
  .n-compare { column-gap: .45em; }
  .n-compare-col { padding: 1.1em .85em .4em; border-radius: 1.3em; }
  .n-compare-col h3 { margin-bottom: .3em; font-size: .85em; }
  .n-compare-col li { gap: .4em; padding: .75em 0; font-size: .74em; line-height: 1.4; }
  .n-compare-col li .n-icon { width: 1.1em; height: 1.1em; }
}

@media (max-width: 479px) {
  .n-breadcrumb { margin-bottom: 1.2em; font-size: .62em; }
  .n-split-copy .h3 { font-size: 2em; }
  .n-step { padding: 1.5em 1.4em; border-radius: 1.5em; }
  .n-showcase { grid-template-columns: 1fr; }
  .n-callout { padding: 1.1em 1.1em 1.2em; border-radius: 1.3em; }
}