/* find-tutors page — marketing/content sections added around the existing,
   fully-functional real tutor search (resources/views/frontend/find-tutors.blade.php
   + app/Livewire/Components/SearchTutor.php). Ported from mentors-page.md
   (a build spec for scrollix-local-4's hand-authored mentors.html), adapted
   to this project's conventions:
   - Uses Bootstrap's own `.container` (matching this page's existing filter/
     results markup) instead of the spec's own `.mp-container` — keeps this
     new content's left/right edges aligned with the real search UI above
     and below it.
   - Reuses `.nvg-pill-input` / `.nvg-gradient-btn` / `.nvg-list-wrap` directly
     from scrollix-header.css (already loaded sitewide) for the hero search
     bar, exactly like the source spec itself reuses navbar-glow.css's same
     classes — no duplicate button/input/dropdown styling defined here.
   - Host Grotesk / Inter and the #ff6363 coral already match this project's
     own established palette (scrollix-sections.css's --scx-coral etc.) —
     kept as literal values here to keep this file self-contained rather
     than coupling it to another section's CSS variables. */

/* Smooth scrolling for this page's one plain anchor link (_cta.blade.php's
   href="#find-tutors-results") — targets html (the actual scrolling
   viewport, not a wrapper div) but is still scoped to this page in
   practice since this stylesheet only ever loads on find-tutors.blade.php
   (both the generic page and every subject-landing page). The hero
   "Rechercher" button already smooth-scrolls via an explicit
   scrollIntoView({behavior:'smooth'}) call in find-tutors-page.js,
   independent of this property — no conflict, this just covers the one
   trigger that wasn't already smooth. */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.ft-page-extra {
  font-family: "Capriola", sans-serif;
  color: #171717;
  /* overflow-x: hidden; */
}

/* ---------- Scroll-reveal ----------
   This project already has a sitewide reveal system (public/js/scrollix-reveal.js
   + [data-reveal] in scrollix-sections.css) — reused here instead of the
   spec's own bespoke initScrollReveal(), so this page uses the exact same
   mechanism/timing as every other section in the project rather than a
   second parallel one. See scrollix-sections.css for the [data-reveal] base
   rules (opacity/transform/transition) — nothing needs redefining here. */

/* @media (min-width: 810px) {
  .ft-container {
    padding-left: 35px;
    padding-right: 35px;
  }
} */

.ft-section {
  padding: 130px 0;
}

@media (max-width: 810px) {
  .ft-section {
    padding: 48px 0;
  }
}

.ft-badge-row {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.ft-h2 {
  font-family: "Capriola", sans-serif;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 40px;
  color: #020202;
  max-width: 515px;
  margin-left: auto;
  margin-right: auto;
}

.ft-h2.ft-tight {
  margin-bottom: 50px;
}

/* ---------- Hero ---------- */

.am-find-tutors-area {
  padding: 0 !important;
}

.ft-hero {
  position: relative;
  padding: 200px 0 130px;
}

@media (max-width: 640px) {
  .ft-hero {
    /* 150 px en haut + 100 en bas, plus les 50 de marge du bandeau
       d'images : deux cent cinquante pixels de vide autour d'un bloc qui
       tient déjà tout l'écran. Le haut garde de quoi dégager la barre
       flottante, le bas se resserre. */
    padding: 104px 0 44px;
  }

  /* Le bandeau d'images se rapproche de la boîte de recherche : c'est la
     même respiration que partout ailleurs sur la page. */
  .ft-stack {
    margin-top: 22px;
  }
}

.ft-hero-clip {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 20px;
  overflow: hidden;
}

.ft-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 20px;
  top: 10px;
  bottom: 20px;
  left: 50%;
  width: calc(100vw - 40px);
  transform: translateX(-50%);
}

@media (max-width: 767px) {
  .ft-hero-bg {
    width: calc(100vw - 20px);
  }
}

.ft-hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: inherit;
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

.ft-hero-cloud {
  position: absolute;
  top: -15%;
  left: -15%;
  width: 130%;
  height: 130%;
  z-index: 1;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

@media (max-width: 640px) {
  .ft-hero-cloud {
    max-width: 200px;
  }
}

.ft-hero-cloud img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

.ft-hero-cloud-b {
  animation: ft-hero-cloud-drift-b 12s cubic-bezier(0.44, 0, 0.56, 1) infinite
    alternate;
}

@keyframes ft-hero-cloud-drift-b {
  from {
    transform: translateX(0);
    opacity: 0.4;
  }
  to {
    transform: translateX(800px);
    opacity: 1;
  }
}
@media (max-width: 640px) {
  @keyframes ft-hero-cloud-drift-b {
    from {
      transform: translateX(170px);
      opacity: 0.4;
    }
    to {
      transform: translateX(80px);
      opacity: 1;
    }
  }
}

.ft-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.ft-hero-grid > * {
  min-width: 0;
}

@media (min-width: 950px) {
  .ft-hero-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: 32px;
  }
}

.ft-badge {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: rgb(255, 99, 99);
  margin-bottom: 24px;
  gap: 8px;
  background: rgb(255, 241, 241);
  border-radius: 999px;
  padding: 8px 16px;
}
.ft-badge-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgb(255, 99, 99);
}

.ft-hero-title {
  font-family: "Capriola", sans-serif;
  font-size: clamp(40px, 7vw, 60px);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.15;
  margin: 0 0 24px;
  color: #020202;
}
.ft-hero-points {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ft-hero-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  color: #2b2b2b;
}
.ft-hero-points svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #ff6363;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ft-hero-search {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border-radius: 999px;
  padding: 8px;
  max-width: 560px;
  /* L'ombre était rose très pâle (#ffdfd7) et remontée de 20 px : sur le
     fond crème du héros, la boîte blanche ne s'en détachait que de 1,02:1
     — elle flottait sans qu'on voie où elle commence. Une ombre plus
     franche et un liseré la posent enfin sur la page. */
  box-shadow:
    0 2px 6px -2px rgba(90, 45, 35, 0.10),
    0 18px 44px -16px rgba(90, 45, 35, 0.22),
    0 0 0 1px rgba(90, 45, 35, 0.06);
  transition: border-radius 220ms ease;
}
@media (max-width: 640px) {
  .ft-hero-search {
    padding: 16px 20px;
    border-radius: 10px;
  }
}
@media (min-width: 640px) {
  .ft-hero-search {
    flex-direction: row;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .ft-hero-search.is-dropdown-open {
    border-radius: 10px 10px 0 0;
  }
}

.ft-hero-search-divider {
  display: none;
  width: 1px;
  align-self: stretch;
  background: rgba(0, 0, 0, 0.08);
}
@media (min-width: 640px) {
  .ft-hero-search-divider {
    display: block;
  }
}

.ft-hero-search .nvg-gradient-btn {
  flex-shrink: 0;
}

/* Keeps the actual input row/button above the suggestions dropdown
   (z-index: 20 below) even where the two would otherwise overlap — flex
   items respect z-index without needing an explicit `position` of their
   own, since they're direct children of .ft-hero-search's flex layout. */
.ft-hero-search > .nvg-pill-input,
.ft-hero-search > .ft-hero-search-divider,
.ft-hero-search > .nvg-gradient-btn {
  position: relative;
  z-index: 21;
}

/* .nvg-pill-input expects an <i> icon font glyph positioned via CSS in
   scrollix-header.css — this page uses inline <svg> icons instead (same
   as the source spec), so this adds the equivalent absolute-position
   rule for svg without touching the shared .nvg-pill-input i rule. */
.ft-hero-search .nvg-pill-input svg {
  position: absolute;
  left: 18px;
  width: 16px;
  height: 16px;
  color: #a3a3a3;
  pointer-events: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Scoped override of the shared .nvg-list-wrap (which normally just shows/
   hides via the `hidden` attribute) — animated open/close specific to this
   hero search context, same technique as the source spec. Both dropdowns
   are always-mounted siblings; only one shows at a time (see JS).
   top: 100% (not the input row's own 54%) so it opens starting right at the
   search bar's bottom edge instead of over the top half of the inputs.
   overflow stays hidden here (NOT auto) — this element only handles the
   open/close size animation + the rounded-corner clip; actual scrolling of
   the list itself happens on the nested .nvg-list-scroll div below instead.
   A native scrollbar isn't itself subject to border-radius clipping in most
   browsers, so if this same element both scrolled AND clipped to a rounded
   corner, the scrollbar could visibly cut across/poke past the curve. With
   scrolling one level in, the scrollbar renders inside a plain rectangular
   box that this element's overflow:hidden then safely clips to the rounded
   shape, same as everything else in it. */
.ft-hero-search .nvg-list-wrap {
  position: absolute;
  top: 37%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 0px 0px 20px 20px;
  z-index: 20;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  /* max-height is the ONLY animated property — no separate opacity/transform
     fade-and-slide. Those made the panel reach full visual presence (180ms)
     faster than the height grew (220ms) and the search bar's corners
     finished squaring off (220ms, see .ft-hero-search above), which is
     exactly what read as "the dropdown appears, then the gap fills in"
     instead of one shape growing out of the bar. With only max-height
     animating (and overflow: hidden clipping everything past the current
     height), the list is revealed top-down as the box grows — there's
     nothing left to fade or slide independently of that growth. */
  transition: max-height 220ms ease;
}

@media (max-width: 640px) {
  .ft-hero-search .nvg-list-wrap {
    top: 70%;
  }
}

/* 340px comfortably fits the 5 rows find-tutors-page.js now caps the list
   to (MAX_VISIBLE_ITEMS) with no scrollbar in the normal case — measured
   empirically, since padding/box-sizing swallows a chunk of the raw
   max-height value before it reaches the scrollable inner content. */
.ft-hero-search .nvg-list-wrap.is-open {
  max-height: 340px;
  pointer-events: auto;
}

.ft-hero-search .nvg-list-wrap .nvg-list-scroll {
  max-height: 340px;
  overflow: hidden;
  padding: 34px 8px 8px;
}
.ft-hero-search .nvg-list-wrap .nvg-list-scroll ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-hero-search .nvg-list-empty {
  margin: 0;
  padding: 10px 12px;
  color: #8a8a8a;
  font-size: 15px;
  text-align: center;
}

/* Subject-suggestion group label (e.g. "Anglais - Primaire") — the base
   name text keeps .nvg-list-wrap button span's own color (scrollix-header.css,
   shared sitewide by every other nvg-list-wrap dropdown); this nested span
   needs the fuller selector path below to actually outrank that rule's own
   specificity (.nvg-list-wrap button span, 1 class + 2 elements) — a bare
   .ft-hero-suggest-group class alone loses that fight and silently renders
   as the inherited default color instead. */
.ft-hero-search .nvg-list-wrap button span.ft-hero-suggest-group {
  color: #ff6363;
  font-weight: 500;
  font-size: 13px;
}

/* ---------- Hero mentor-photo marquee (decorative, aria-hidden) ---------- */

.ft-stack {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  width: 408px;
  height: 416px;
  max-width: 100%;
  position: relative;
  overflow: visible;
  background: transparent;
  margin: 0 auto;
  z-index: -1;
  margin-top: 50px;
}
.ft-stack-column {
  width: 125px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.ft-stack-viewport {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: flex-start;
  overflow: hidden;
  mask-image: linear-gradient(
    transparent 0%,
    black 25%,
    black 75%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    transparent 0%,
    black 25%,
    black 75%,
    transparent 100%
  );
}
.ft-stack:hover .ft-stack-track {
  animation-play-state: paused;
}
.ft-stack-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  will-change: transform;
  animation-name: ft-stack-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes ft-stack-scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-1 * var(--stack-shift, 50%)));
  }
}
.ft-stack-card {
  flex-shrink: 0;
  width: 125px;
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ft-stack-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 15px;
  box-shadow: 0 0 0 1px rgba(103, 103, 103, 0.08),
    0 2px 4px rgba(103, 103, 103, 0.08);
}
@media (max-width: 640px) {
  .ft-stack {
    display: none;
  }
}

.ft-stack-h {
  display: none;
}
@media (max-width: 640px) {
  .ft-stack-h {
    display: block;
    width: 100%;
    max-width: 335px;
    margin: 0 auto;
    overflow: hidden;
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 12%,
      black 88%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 12%,
      black 88%,
      transparent 100%
    );
  }
}
.ft-stack-h:hover .ft-stack-h-track {
  animation-play-state: paused;
}
.ft-stack-h-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  will-change: transform;
  animation: ft-stack-h-scroll 22s linear infinite;
}
@keyframes ft-stack-h-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--stack-shift-h, 50%)));
  }
}

.am-tutorsearch_section,
.am-searchfilter_wrap {
  padding: 130px 0;
}
/* ---------- Testimonials (scattered stack) ---------- */

.ft-section-head {
  max-width: 640px;
  margin: 0 0 48px;
}
.ft-section-head-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ft-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ff6363;
  margin: 0 0 12px;
}
.ft-eyebrow::before,
.ft-eyebrow::after {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}

.ft-h2-dm {
  font-family: "Capriola", sans-serif;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #020202;
  margin: 0;
}
.ft-section-lead {
  font-size: 18px;
  line-height: 1.6;
  color: #4a4a4a;
  max-width: 600px;
  margin: 40px auto 0;
}

.ft-scatter {
  position: relative;
  max-width: 1000px;
  margin: 64px auto 0;
  min-height: 450px;
}

@media (max-width: 810px) {
  .ft-scatter {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 420px;
  }
}

.ft-scatter-card {
  position: absolute;
  width: 280px;
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: -12px -14px 18px #0000000d;
  opacity: 0;
  transform: rotate(var(--ft-r, 0deg));
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1)
      var(--ft-reveal-delay, 0s),
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease;
  will-change: opacity, transform;
}
.ft-scatter-card.is-visible {
  opacity: 1;
}

@media (hover: hover) {
  .ft-scatter:hover .ft-scatter-card.is-visible {
    transform: translate(var(--ft-dx, 0px), var(--ft-dy, 0px))
      rotate(calc(var(--ft-r, 0deg) * 1.6));
    box-shadow: 0 28px 48px -20px rgba(2, 2, 2, 0.25);
    z-index: 6;
  }
}

@media (max-width: 810px) {
  .ft-scatter-card {
    position: static;
    width: 100%;
    transform: none !important;
  }
}

.ft-scatter-stars {
  color: #ffb100;
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.ft-scatter-quote {
  font-size: 16.5px;
  line-height: 1.55;
  color: #2b2b2b;
  margin: 0 0 16px;
}
.ft-scatter-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #4a4a4a;
}
.ft-scatter-author img {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}
.ft-scatter-author strong {
  color: #020202;
}

/* ---------- Stats bar (bento grid) ---------- */

.ft-bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (min-width: 1000px) {
  .ft-bento-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ft-bento-tile {
  background: #fff1f1;
  border-radius: 24px;
  padding: 28px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  /* justify-content: flex-end; */
  gap: 50px;
  box-shadow: inset 10px 13px 40px -36px rgba(2, 2, 2, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.02);
}
.ft-bento-tile svg {
  width: 26px;
  height: 26px;
  margin-bottom: auto;
  color: #ff6363;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ft-bento-number {
  font-family: "Capriola", sans-serif;
  font-size: clamp(48px, 3.2vw, 64px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #020202;
}
.ft-bento-label {
  font-size: 15px;
  color: #4a4a4a;
}

.ft-bento-dark {
  background: #ff6363;
}
.ft-bento-dark svg {
  color: #ffb100;
}
.ft-bento-dark .ft-bento-number,
.ft-bento-dark .ft-bento-label {
  color: #efede9;
}

.ft-bento-photo {
  padding: 0;
  overflow: hidden;
}
.ft-bento-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .ft-bento-grid {
    grid-template-columns: 1fr;
  }
  .ft-bento-tile {
    aspect-ratio: auto;
    min-height: 200px;
  }
}

/* ---------- Process (how it works) ---------- */

.ft-process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 810px) {
  .ft-process-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ft-process-card {
  background: #fff;
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 5px 20px rgba(25, 24, 23, 0.1);
  transition: transform 200ms ease;
}
.ft-process-card:hover {
  transform: translateY(-5px);
}

.ft-process-img {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  /* 16/9 plutôt qu'une hauteur fixe de 300 px. Le cadre portait des PHOTOS
     de portrait, qu'un recadrage serré ne gênait pas. Il porte maintenant
     des ILLUSTRATIONS en 1664×936 : dans un cadre de 350×300, `cover` en
     rognait un tiers sur les côtés — la tasse, la plante, la moitié de
     l'écran. Au bon rapport, la composition passe entière. */
  aspect-ratio: 16 / 9;
  margin: 0 0 20px;
}

/* Photo shine sweep - ported verbatim from .mp-shine/mpSweep
   (mentor-profile-page.css), renamed to this file's own ft- prefix since
   that stylesheet isn't loaded on this page. Same continuous (not
   hover-triggered) behavior as the mentor-profile version. */
.ft-shine {
  isolation: isolate;
}
.ft-shine::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  width: 34%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.18) 30%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.18) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: blur(5px);
  transform: translateX(-180%) rotate(18deg);
  animation: ft-shine-sweep 2.8s cubic-bezier(0.45, 0.05, 0.35, 0.95) infinite;
  z-index: 1;
}
@keyframes ft-shine-sweep {
  0% {
    transform: translateX(-180%) rotate(18deg);
  }
  100% {
    transform: translateX(480%) rotate(18deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ft-shine::after {
    animation: none;
  }
}
.ft-process-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark rounded number badge, overlaid top-left on the photo - same
   treatment as .mp-badge-verified over .mp-sidebar-photo
   (mentor-profile-page.css), reused here rather than inventing a new
   badge style. */
.ft-process-number {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  background: #191817;
  color: #fff;
  font-family: "Capriola", sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.ft-process-card h3 {
  font-size: 23px;
  font-weight: 700;
  margin: 0 0 14px;
  color: #020202;
}

/* Dashed divider between title and description - same inset-dashed-line
   token as .mp-sidebar-divider (mentor-profile-page.css), spanning full
   card width via negative margin to offset .ft-process-card's own
   padding. */
.ft-process-divider {
  position: relative;
  height: 20px;
  margin: 0 -24px 14px;
}
.ft-process-divider::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  border-top: 2px dashed #e0dbd4;
}

.ft-process-card p {
  font-size: 16px;
  color: #4a4a4a;
  line-height: 1.5;
  margin: 0;
}

/* ---------- FAQ accordion ---------- */

/* ==========================================================================
   LES QUESTIONS FRÉQUENTES — le style de la fiche mentor
   --------------------------------------------------------------------------
   Repris de mew_dash/faq-mentor.html, comme sur /mentor/{slug} et sur les
   pages vitrines : une carte par question, numérotée, qui change de teinte
   en s'ouvrant, et un chevron dans une pastille qui pivote.

   Ces règles servent /trouver-un-mentor ET les pages de matière
   (/professeur-arabe-primaire…), qui rendent la même vue.

   Le dépliage garde le sien : `grid-template-rows: 0fr → 1fr` s'anime sans
   mesurer de hauteur en JavaScript. C'est mieux que ce que fait la fiche
   mentor, et il n'y avait aucune raison de le remplacer.
   ========================================================================== */

.ft-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ft-faq-item {
  border-radius: 24px;
  background: #fff;
  /* En ombre interne plutôt qu'en bordure : le trait ne s'ajoute pas à la
     largeur, les cartes restent alignées quand l'une s'ouvre. */
  box-shadow: inset 0 0 0 1.5px #F0EBE7;
  overflow: hidden;
  transition: box-shadow .22s ease, background .22s ease;
}

.ft-faq-item.is-open {
  background: #F9F7F5;
  box-shadow: inset 0 0 0 1.5px #FFD3D3;
}

.ft-faq-question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 18px;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ft-faq-q-text {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.ft-faq-number {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: #F5F0EF;
  color: #5F5E64;
  font-size: 13.5px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  transition: background .2s ease, color .2s ease;
}

.ft-faq-item.is-open .ft-faq-number {
  background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%);
  color: #fff;
}

/* La question n'est jamais tronquée : elle passe à la ligne. */
.ft-faq-question > .ft-faq-q-text > span:last-child {
  min-width: 0;
  padding-top: 4px;
  font-size: 17.5px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.4;
  color: #1C1C1E;
  text-wrap: pretty;
}

.ft-faq-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F5F0EF;
  color: #1C1C1E;
  transition: background .2s ease, color .2s ease, transform .28s cubic-bezier(.22, .9, .24, 1);
}

.ft-faq-question:hover .ft-faq-icon { background: #FFF1F1; color: #C0392B; }

.ft-faq-item.is-open .ft-faq-icon {
  background: #1C1C1E;
  color: #fff;
  transform: rotate(180deg);
}

.ft-faq-icon svg {
  width: 21px;
  height: 21px;
  color: currentColor;
  fill: currentColor;
  stroke: none;
}

.ft-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .34s cubic-bezier(.22, .9, .24, 1), opacity .24s ease;
}

.ft-faq-item.is-open .ft-faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.ft-faq-answer-inner {
  min-height: 0;
  overflow: hidden;
}

/* Alignée sous la question, pas sous le numéro. */
.ft-faq-answer p {
  margin: 0;
  max-width: none;
  padding: 0 18px 20px 64px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.6;
  color: #5F5E64;
  text-wrap: pretty;
}

@media (max-width: 520px) {
  .ft-faq-answer p { padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-faq-item, .ft-faq-number, .ft-faq-icon, .ft-faq-answer { transition: none; }
}

/* ---------- Secondary CTA banner ---------- */

.ft-cta-banner {
  background: #fff7f1;
  border-radius: 24px;
  padding: 48px 24px;
  text-align: center;
}
.ft-cta-banner h2 {
  font-family: "Capriola", sans-serif;
  font-size: clamp(25.5px, 3vw, 34.5px);
  font-weight: 700;
  margin: 0 0 10px;
  color: #020202;
}
.ft-cta-banner p {
  color: #4a4a4a;
  margin: 0 0 24px;
  font-size: 17px;
}

/* ---------- SEO content block ---------- */

.ft-seo-intro {
  text-align: center;
}
.ft-seo-intro .ft-footnote {
  text-align: center;
  margin-top: 10px;
}
.ft-seo-divider {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 40px 0;
}

.ft-seo-h3 {
  font-family: "Capriola", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #020202;
  margin: 0 0 16px;
}
.ft-seo-block p {
  font-size: 17px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0 0 14px;
}
.ft-seo-block p:last-child {
  margin-bottom: 0;
}
.ft-seo-block strong {
  color: #020202;
  font-weight: 600;
}

.ft-seo-dotlist {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ft-seo-dotlist li {
  /* main.css:645 sets `li { list-style: disc inside none; }` directly on
     every <li> sitewide — a direct declaration on the element always wins
     over the list-style:none inherited from .ft-seo-dotlist above,
     regardless of the ul's own specificity, so the native black disc
     rendered alongside this list's own custom red-ring ::before marker
     below until it's suppressed here too. */
  list-style: none;
  position: relative;
  padding-left: 26px;
  font-size: 16.5px;
  line-height: 1.6;
  color: #4a4a4a;
}
.ft-seo-dotlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff1f1;
  border: 1px solid #ff6363;
}

.ft-seo-why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 20px;
}
.ft-seo-why-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 20px 22px;
}
.ft-seo-why-k {
  display: block;
  font-family: "Capriola", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #ff6363;
  margin-bottom: 6px;
}
.ft-seo-why-card p {
  font-size: 16px;
  margin: 0;
}
@media (max-width: 640px) {
  .ft-seo-why-grid {
    grid-template-columns: 1fr;
  }
}

.ft-seo-steps {
  position: relative;
  margin: 24px 0;
}
.ft-seo-steps::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(0, 0, 0, 0.08);
}
.ft-seo-step {
  position: relative;
  display: flex;
  gap: 20px;
  padding-bottom: 26px;
}
.ft-seo-step:last-child {
  padding-bottom: 0;
}
.ft-seo-step-num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ff6363;
  color: #fff;
  font-family: "Capriola", sans-serif;
  font-size: 19px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ft-seo-step h4 {
  font-family: "Capriola", sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #020202;
  margin: 0 0 4px;
}
.ft-seo-step p {
  font-size: 16px;
  margin: 0;
}

/* ---------- Tutor result cards (livewire/components/search-tutor.blade.php) ----------
   Presentational redesign only — the real search/filter/pagination/data-fetching
   behind these cards (SearchTutor.php, SiteService::getTutors()) is untouched.
   Cards themselves are <x-front.mentor-card> (resources/views/components/front/
   mentor-card.blade.php), the same shared component/markup as the landing
   page's .scx-mentors-* mentor cards (public/css/scrollix-sections.css,
   loaded sitewide) — no card-specific visual CSS lives here anymore, only
   this page's own grid layout and entrance-animation/skeleton wiring. */

.ft-tutorcard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 1100px) {
  .ft-tutorcard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  .ft-tutorcard-grid {
    grid-template-columns: 1fr;
  }
}

/* Entrance animation — plays whenever a card is newly inserted into the DOM
   (initial results load, a filter change swapping in a different tutor set,
   or new cards appended by "Load more"). Each card carries wire:key, so
   Livewire only creates fresh nodes for genuinely new entries — a plain
   CSS animation-on-mount is enough, no scroll/IntersectionObserver needed.
   Scoped to .ft-tutorcard-grid so this never touches the landing page's own
   .scx-mentors-card instances (which use data-reveal instead) — moot anyway
   since this file only ever loads on /find-tutors, but kept explicit. */
.ft-tutorcard-grid .scx-mentors-card:not(.ft-tutorcard-skeleton) {
  animation: ft-card-enter 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes ft-card-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ft-tutorcard-grid .scx-mentors-card:not(.ft-tutorcard-skeleton) {
    animation: none;
  }
}

/* ---------- Tutor card skeleton (skeletons/tutor-list.blade.php,
   skeletons/tutor-fullpage-list.blade.php) — .ft-skeleton-block/.ft-skel-chip/
   .ft-skel-line's shimmer fill (background/animation) is registered in the
   sitewide shared selector list in main.css (~line 504), same as every other
   *-skel-* class in this project; only sizing lives here. Structural sizing
   for the photo (aspect-ratio/border-radius) comes from the real
   .scx-mentors-photo rule already. Below-photo info block sizing (rating
   row/description/price) is set to match the real .scx-mentors-info block's
   computed box heights exactly (scrollix-sections.css:734-799, body's
   inherited line-height is 24px) so swapping skeleton->real card causes no
   layout shift: 12 (info padding-top) + 30 (rating row 24 + 6 margin) + 56
   (description 48 + 8 margin) + 24 (price line) = 122px, matched below. */
.ft-skel-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  margin-bottom: 6px;
}
.ft-skel-chip {
  display: block;
  border-radius: 4px;
}
.ft-skel-chip--score {
  width: 24px;
  height: 13px;
}
.ft-skel-chip--count {
  width: 56px;
  height: 12px;
}
.ft-skel-desc {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 48px;
  margin-bottom: 8px;
}
.ft-skel-line {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: 4px;
}
.ft-skel-line--80 {
  width: 80%;
}
.ft-skel-price {
  display: flex;
  align-items: center;
  height: 24px;
}
.ft-skel-line--price {
  width: 90px;
}

/* "Load more" button (replaces numbered pagination — see search-tutor.blade.php).
   .am-loadmore/.am-btn are existing sitewide classes (used as-is by the
   notifications dropdown); only centering/spacing is added here since that
   dropdown's own CSS scopes its layout to .am-notifywrap. */
.am-tutorlist .am-loadmore {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}
.am-tutorlist .am-loadmore .am-btn {
  padding: 12px 32px;
  border-radius: 999px;
}

/* Exhausted-state message, swapped in for the button once no more mentors
   remain (see search-tutor.blade.php) — same .am-loadmore wrapper/margin
   and comparable vertical padding to the button it replaces, so nothing
   shifts when one becomes the other. */
.ft-loadmore-done {
  margin: 0;
  padding: 12px 0;
  color: #8a8a8a;
  font-size: 15px;
}

.ft-footnote {
  font-size: 16px;
  font-style: italic;
  color: #6b6b6b;
}

/* ---------- État vide de la recherche ----------
   Rendu quand aucun mentor ne correspond aux filtres
   (livewire/components/search-tutor.blade.php). Reprend les mêmes
   éléments que le reste de la page : le fond crème et le rayon de
   `.ft-cta-banner`, la pastille corail pleine de `.ft-seo-step-num`,
   Capriola pour le titre. */
.ft-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 76px 24px 80px;
  border-radius: 24px;
  background: #fff7f1;
}
.ft-empty-mark {
  flex-shrink: 0;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #ff6363;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
}
.ft-empty-mark svg {
  width: 32px;
  height: 32px;
  color: #fff;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ft-empty-title {
  font-family: "Capriola", sans-serif;
  font-size: clamp(22px, 2.6vw, 29px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #020202;
  margin: 0 0 12px;
  max-width: 520px;
  text-wrap: balance;
}
.ft-empty-text {
  font-size: 17px;
  line-height: 1.6;
  color: #4a4a4a;
  margin: 0;
  max-width: 460px;
}
.ft-empty-cta {
  margin-top: 28px;
}

@media (max-width: 640px) {
  .ft-empty {
    padding: 52px 20px 56px;
    border-radius: 20px;
  }
  .ft-empty-mark {
    width: 62px;
    height: 62px;
    margin-bottom: 20px;
  }
  .ft-empty-mark svg {
    width: 27px;
    height: 27px;
  }
  .ft-empty-text {
    font-size: 16px;
  }
}