/* ============================================================
   SEGMENTS — trois cartes cliquables vers les pages dédiées.
   ============================================================ */

  .segments {
    position: relative; isolation: isolate;
  }
  .segments > .container { position: relative; z-index: 1; }

  .segments__title {
    text-align: center; max-width: 22ch; margin-inline: auto;
    margin-bottom: clamp(2rem, 4vw, 3rem);
  }

  .segments__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--space-lg);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Toute la carte est le lien : la zone cliquable est la carte entière. */
  .seg {
    position: relative; display: block; height: 100%;
    padding: clamp(1.4rem, 2vw, 1.85rem);
    background: var(--k-white);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-panel);
    box-shadow: 0 1px 2px rgba(10, 4, 6, 0.04);
    text-decoration: none; color: inherit;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  }
  .seg:hover {
    transform: translateY(-3px);
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow: 0 2px 6px rgba(55, 12, 130, 0.07), 0 18px 40px rgba(55, 12, 130, 0.13);
  }

  .seg__name { margin: 0; font-size: 1.25rem; }
  .seg__desc {
    margin: 0.55rem 0 0; color: var(--text-muted);
    font-size: 0.9375rem; line-height: 1.6; max-width: 34ch;
  }


  @media (max-width: 900px) { .segments__grid { grid-template-columns: 1fr; } }

  /* Les trois descriptions tiennent la même hauteur, quelle que soit
     la longueur du texte : les cartes restent alignées. */
  .seg__desc { min-height: 4.8em; }

  /* Matière : un lavis lavande qui monte d'un coin, et le grain de la marque
     par-dessus. Les cartes cessent d'être des rectangles blancs à plat. */
  .seg { isolation: isolate; overflow: hidden; }
  .seg::before {
    content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(184, 142, 255, 0.28) 0%, rgba(184, 142, 255, 0) 55%),
      var(--k-white);
    transition: opacity 0.2s ease;
  }
  .seg::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: url('../assets/noise-pattern.svg');
    background-repeat: repeat; opacity: 0.32;
  }
  .seg { background: transparent; }
  .seg:hover::before {
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(124, 58, 237, 0.26) 0%, rgba(124, 58, 237, 0) 58%),
      var(--k-white);
  }