/* categories page ("/categories") — ported verbatim from categories.html's
   own <style> block (Step 3 of the integration), scoped under
   .page-categories throughout. The source stylesheet had several bare/
   global selectors (html, body, a, button, h1, section, *) that would have
   leaked sitewide if linked as-is — every rule below is prefixed so this
   page's look is self-contained, same "page-scoped, never touch the global
   class" convention every other *-page.css file in this project already
   uses. No values changed, no framework substitutions needed (the source
   page was already plain CSS). @keyframes fadeUp/fadeIn renamed to
   cat-fadeUp/cat-fadeIn (keyframe names can't be scoped by ancestor
   selector) to avoid any future sitewide collision, same prefixing
   convention already used for this project's other page-specific
   keyframes (e.g. ft-hero-cloud-drift-b). */

/* Smooth scrolling for this page — targets html (not .page-categories,
   which is just a content wrapper, not the actual scrolling viewport) but
   is still page-scoped in practice: this stylesheet is only ever linked
   from categories.blade.php, so it can never reach any other page. Also
   smooths the step1<->step2 window.scrollTo(0,0) calls in this page's own
   <script> (they don't pass a behavior option, so they inherit whatever
   this property is set to). */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.page-categories * {
  box-sizing: border-box;
}
.page-categories [hidden] {
  display: none !important;
}
@keyframes cat-fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cat-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.page-categories .anim-up {
  animation: cat-fadeUp 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.page-categories .anim-in {
  animation: cat-fadeIn 0.3s ease both;
}
.page-categories .chip {
  transition: background 0.2s, color 0.2s;
}
.page-categories .step .n,
.page-categories .step .l {
  transition: all 0.25s;
}
.page-categories .back {
  transition: color 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .page-categories .anim-up,
  .page-categories .anim-in {
    animation: none;
  }
}

.page-categories {
  margin: 0;
  padding: 200px 0 50px;
  background: #ffffff;
  font-family: "Capriola", Helvetica, Arial, sans-serif;
  color: #141414;
}
.page-categories a {
  color: #fa6e59;
  text-decoration: none;
}
.page-categories button {
  font-family: inherit;
  cursor: pointer;
}
.page-categories .wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 24px 110px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.page-categories .topbar {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
}
.page-categories .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fdeae4;
  color: #f4604a;
  font-size: 15px;
  padding: 9px 18px;
  border-radius: 999px;
  text-align: center;
}
.page-categories .badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f4604a;
  flex-shrink: 0;
}
.page-categories .steps {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.page-categories .step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 0;
}
.page-categories .step .n {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: #ffffff;
  color: #8c8070;
  border: 1.5px solid #ede4d7;
}
.page-categories .step .l {
  font-size: 16px;
  color: #9c9080;
}
.page-categories .step.active .n,
.page-categories .step.done .n {
  background: #141414;
  color: #ffffff;
  border-color: #141414;
}
.page-categories .step.active .l {
  color: #141414;
}
.page-categories .step.done .l {
  color: #5f564b;
}
.page-categories .step.done {
  cursor: pointer;
}
.page-categories .stepline {
  width: 30px;
  height: 1.5px;
  background: #ede4d7;
}
.page-categories section {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.page-categories h1 {
  margin: 50px 0 20px;
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-align: center;
}
.page-categories .sub {
  margin: 0;
  font-size: 17px;
  color: #75695a;
  text-align: center;
  max-width: 540px;
  line-height: 1.6;
}
.page-categories .search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1.5px solid #e3d6c2;
  border-radius: 999px;
  padding: 0 24px;
  height: 62px;
  width: min(560px, 100%);
  box-shadow: 0 2px 10px rgba(90, 60, 20, 0.07);
}
.page-categories .loupe {
  width: 16px;
  height: 16px;
  border: 2px solid #8c8070;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.page-categories .loupe i {
  position: absolute;
  width: 2px;
  height: 7px;
  background: #8c8070;
  border-radius: 2px;
  bottom: -5px;
  right: -3px;
  transform: rotate(-45deg);
}
.page-categories .search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 17px;
  color: #141414;
  min-width: 0;
  font-family: inherit;
}
.page-categories .search input::placeholder {
  color: #8c8070;
}
.page-categories .clear {
  border: none;
  background: #f3e7d7;
  color: #5f564b;
  font-size: 14px;
  padding: 7px 13px;
  border-radius: 999px;
}
.page-categories .result-label {
  margin: 0;
  font-size: 16px;
  color: #75695a;
  text-align: center;
}
.page-categories #results {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.page-categories .rgroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-categories .rhead {
  display: flex;
  align-items: center;
  gap: 9px;
}
.page-categories .rhead .e {
  font-size: 19px;
}
.page-categories .rhead h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
}
.page-categories .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.page-categories .chip {
  display: inline-block;
  background: #faf3eb;
  color: #4a4239;
  font-size: 15px;
  padding: 8px 13px;
  border-radius: 999px;
}
.page-categories .chip:hover {
  background: #141414;
  color: #ffffff;
}
.page-categories .more {
  background: transparent;
  border: 1.5px dashed #d8c9b4;
  color: #75695a;
  font-size: 15px;
  padding: 7px 13px;
  border-radius: 999px;
}
.page-categories .more:hover {
  border-color: #141414;
  color: #141414;
}
.page-categories .domains {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.page-categories .dom {
  text-align: left;
  background: #ffffff;
  border: 1.5px solid #ede4d7;
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  transition: 0.2s;
  position: relative;
  overflow: hidden;
}
.page-categories .dom:after,
.page-categories .group:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fffafa;
  transition: 0.3s;
  z-index: -1;
}
.page-categories .dom:hover:after,
.page-categories .group:hover:after {
  width: 100%;
  height: 100%;
}
.page-categories .dom:hover,
.page-categories .group:hover {
  box-shadow: 0 6px 18px rgba(20, 20, 20, 0.08);
  transform: translateY(-2px);
}
.page-categories .dom .e {
  font-size: 28px;
  line-height: 1;
}
.page-categories .dom .name {
  font-size: 18px;
  color: #141414;
  line-height: 1.3;
}
.page-categories .dom .svc {
  align-self: flex-start;
  background: #fff4f4;
  color: #ffa395;
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 999px;
}
.page-categories .dom .count {
  font-size: 14.5px;
  color: #8c8070;
}
.page-categories .expert {
  width: 100%;
  background: #fbf1e6;
  border-radius: 24px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.page-categories .expert .t {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 240px;
  flex: 1;
}
.page-categories .expert .t b {
  font-size: 19px;
  color: #141414;
  font-weight: 400;
}
.page-categories .expert .t span {
  font-size: 15.5px;
  color: #75695a;
  line-height: 1.55;
}
.page-categories .expert a {
  color: #ffffff;
}

.page-categories #step2 {
  align-items: stretch;
  gap: 24px;
}
.page-categories .back {
  align-self: flex-start;
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  color: #75695a;
  font-size: 16px;
  padding: 0;
}
.page-categories .back:hover {
  color: #141414;
}
.page-categories .back:hover svg path {
  stroke: #141414;
}
.page-categories .dom-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.page-categories .tile {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #f7ede1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.page-categories .dom-head h1 {
  font-size: clamp(26px, 4vw, 40px);
  text-align: left;
}
.page-categories .dom-head .hint {
  font-size: 15.5px;
  color: #75695a;
}
.page-categories .dom-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-categories .groups {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.page-categories .group {
  position: relative;
  overflow: hidden;
  transition: 0.2s;
  background: #ffffff;
  border: 1.5px solid #ede4d7;
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-categories .group h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
}
@media (max-width: 480px) {
  .page-categories .groups {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   LE BANDEAU D'ACCROCHE, SUR TÉLÉPHONE

   « Toujours en 1-à-1 · en ligne ou autour de vous » mesure 418 px avec
   ses retraits. Sur un écran de 390, la pastille dépassait de quatorze
   pixels et ouvrait un défilement horizontal sur TOUTE la page — le genre
   de décalage qu'on sent en faisant défiler sans jamais voir d'où il
   vient.

   La phrase se replie donc sur deux lignes. La pastille reste ronde, la
   puce garde sa place en tête grâce à `align-items: flex-start` qui
   l'aligne sur la PREMIÈRE ligne plutôt qu'au milieu du bloc.
   --------------------------------------------------------------------- */
@media (max-width: 520px) {
  .page-categories .badge {
    max-width: 100%;
    white-space: normal;
    align-items: flex-start;
    padding: 10px 16px;
    line-height: 1.4;
    text-wrap: balance;
  }

  .page-categories .badge i {
    margin-top: 7px;
    flex: 0 0 auto;
  }
}