@tailwind base;
@tailwind components;
@tailwind utilities;

/* MonMentor — charte A « Transmission » */

@layer base {
  /* Les navigateurs appliquent min-inline-size: min-content aux fieldset : un formulaire
     dans un fieldset ne peut alors jamais descendre sous la largeur de son champ le plus
     large, et pousse la page au-delà de 390 px sur téléphone. Sans effet sur desktop,
     où le contenu tient de toute façon. */
  fieldset {
    min-width: 0;
  }

  /* Un <details> fermé ne retire plus son contenu de la mise en page : les navigateurs
     récents le rendent seulement invisible (content-visibility sur ::details-content), et
     ce contenu garde une boîte. Effet mesuré à 390 px sur les filtres de liste : le
     panneau `max-lg:fixed` de shared/_filter_dropdown est positionné par rapport à la
     puce et non au viewport (la containment de ::details-content en fait le bloc
     conteneur), donc chaque filtre FERMÉ posait un rectangle de 366 px qui sortait de
     l'écran — jusqu'à 179 px dehors, sur 5 écrans, sans que personne puisse le voir.
     Ouvert, le même panneau tombe bien à left: 12px. On rétablit le comportement
     historique : fermé = pas de boîte. */
  details:not([open]) > :not(summary) {
    display: none;
  }
}

@layer components {
  /* Eyebrow : libellé uppercase doré au-dessus des titres (signature du site) */
  .eyebrow {
    @apply uppercase font-semibold;
    letter-spacing: .28em;
    font-size: .7rem;
  }

  /* Tableaux larges : un défilement horizontal QUI SE VOIT.
     Constat mesuré au bureau (26/08/2026) sur /admin/users, /mentees, /mentors : le
     conteneur `overflow-x-auto` faisait bien défiler, mais sa barre de défilement
     mesurait 0 px de haut (scrollbars en surimpression). offsetHeight == clientHeight :
     rien, à l'écran, n'annonçait 549 px de colonnes à droite. Un tableau qui déborde en
     silence équivaut à des colonnes inatteignables.
     `scrollbar-width: thin` + `scrollbar-color` sortent Chromium/Firefox du mode
     surimpression : la barre reprend sa place dans la mise en page et reste visible tant
     qu'il y a quelque chose à droite. Elle disparaît d'elle-même quand le tableau tient,
     donc pas de bruit sur les listes étroites et rien à piloter en JS.
     C'est un CHOIX, pas un repli : à 1 120 px de large, onze colonnes de liste (mentors)
     ne tiennent pas sans rendre chaque cellule illisible. On assume le défilement, on
     exige seulement qu'il se voie. */
  .table-scroll {
    overflow-x: auto;
  }

  /* Surtout PAS de `scrollbar-width` ici : dès qu'on pose la propriété standard, Chromium
     ignore les pseudo-éléments `::-webkit-scrollbar` ci-dessous et revient à sa barre en
     surimpression, de hauteur nulle. Mesuré : avec `scrollbar-width: thin`,
     offsetHeight - clientHeight valait toujours 0. Sans elle, la barre reprend sa place
     dans la mise en page (10 px) et devient réellement visible. */
  .table-scroll::-webkit-scrollbar {
    height: 10px;
  }

  .table-scroll::-webkit-scrollbar-track {
    background: rgba(26, 22, 80, .08);
    border-radius: 999px;
  }

  .table-scroll::-webkit-scrollbar-thumb {
    background: rgba(26, 22, 80, .35);
    border-radius: 999px;
  }

  .table-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(26, 22, 80, .55);
  }

  /* Bord droit estompé tant qu'il reste des colonnes de ce côté. Posé par le contrôleur
     Stimulus `table-scroll`, qui l'enlève dès qu'on a défilé jusqu'au bout. C'est le signal
     visuel ; la ligne de texte sous le tableau en est le pendant lisible (et le seul que
     lit une synthèse vocale). */
  .table-scroll-more::after {
    content: "";
    position: sticky;
    top: 0;
    right: 0;
    float: right;
    width: 3rem;
    height: 100%;
    margin-left: -3rem;
    pointer-events: none;
    background: linear-gradient(to right, rgba(250, 247, 240, 0), rgba(250, 247, 240, .95));
  }

  /* Fond « aurora » : indigo profond + halos doré/violet (hero, pages auth) */
  .bg-aurora {
    background:
      radial-gradient(60% 50% at 80% 0%, rgba(216, 154, 29, .18), transparent 60%),
      radial-gradient(50% 50% at 0% 100%, rgba(70, 84, 163, .55), transparent 60%),
      #1A1650;
  }
}