@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 {
  /* #3462 (recette du 31/08/2026) : une sélection signalée par la SEULE couleur.
     Retour de la recetteuse sur /admin/programs/:id/edit, qui vaut partout où l'on coche :
     « pour des personnes qui ne verraient pas bien les couleurs, la mise en couleur est
     assez claire ». Le fond doré à 15 % sur blanc et le texte doré foncé se distinguent mal
     du gris dès qu'on perd la perception des couleurs, et rien d'autre ne dit « coché ».

     La coche est dessinée en CSS (deux bordures d'un carré tourné à 45°), pas écrite avec
     un caractère : aucune dépendance à la fonte, donc aucun risque de rectangle vide si la
     police de substitution n'a pas le glyphe. Elle prend `currentColor`, donc la couleur
     déjà portée par l'état coché.

     Deux crochets, parce que ces pastilles ont deux moteurs :
       .peer:checked ~ .chip-check  pour les cases et radios masqués en `sr-only`, où la
         pastille visible est le FRÈRE de l'input (combinateur `~`, comme la variante
         Tailwind `peer-checked:`) ;
       .chip-check-on               pour les pastilles construites en JS par le contrôleur
         Stimulus `chips-select`, qui n'a pas d'input et peint un état.
     Rien n'est dessiné à l'état décoché : la règle n'existe alors pas. */
  .peer:checked ~ .chip-check::before,
  .chip-check-on::before {
    content: "";
    display: inline-block;
    width: .3rem;
    height: .6rem;
    margin-right: .5rem;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-.1em);
    vertical-align: middle;
  }

  /* #3506 (recette du 02/09/2026) : « il n'y a pas de couleur permettant de savoir si le
     curseur est en oui ou non ». Deux causes, la même famille que #3462 (un état porté par
     rien de lisible), et cette règle traite la seconde.

     1. La piste des interrupteurs de `/admin/matching` était peinte par une classe
        FABRIQUÉE (`peer-checked:bg-<%= accent %>`). Le scanner de Tailwind ne lit que le
        texte des fichiers : il n'a jamais vu `peer-checked:bg-ink` ni
        `peer-checked:bg-success`, ces règles n'existaient donc pas dans la feuille, et la
        piste restait grise, allumée comme éteinte. Correction dans la vue : la classe s'y
        écrit ENTIÈRE.
     2. Sur les fiches programme, la pastille est un ENFANT de la piste, et
        `peer-checked:translate-x-5` compile en `.peer:checked ~ …`, un combinateur de
        FRÈRES : elle ne bougeait jamais, il ne restait donc là aussi que la couleur. La
        règle ci-dessous couvre ce cas imbriqué, comme `.peer:checked ~ .chip-check` couvre
        celui des pastilles à input masqué. Le déplacement (1.25rem) est celui de
        `translate-x-5`, à l'identique : les deux formes d'interrupteur bougent pareil. */
  .peer:checked ~ .switch-track .switch-knob {
    transform: translateX(1.25rem);
  }

  /* 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;
  }
}