/*!****************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./assets/pages/metiers/metiers.scss ***!
  \****************************************************************************************************************************/
@charset "UTF-8";
/* === DICO_SCSS_META_START ===
path: assets/pages/metiers/metiers.scss
=== DICO_SCSS_META_END === */
/* Pages /metiers/ (l'index) et /metiers/<slug>/ (un métier).
 *
   Deux pages, une même matière : un lexique professionnel de douze mille
   entrées réparties sur 485 métiers. Le dessin reprend la charte du site
   (variables, cartes, filets) sans rien inventer — ces pages ne sont pas un
   univers à part, ce sont deux rubriques de plus.

   TROIS PARTIS PRIS TIENNENT AU CONTENU, pas au goût :

   - les entrées sont des LOCUTIONS sept fois sur dix (« recherche de fuite non
     destructive »). Les vedettes ne peuvent donc pas être posées en grille
     serrée comme des mots courts : elles ont besoin de largeur, et la
     définition se lit dessous, pas à côté ;

   - la définition fait deux à trois lignes, jamais un mot. Une liste à puces
     l'aurait hachée ; chaque terme occupe donc une carte, séparée des voisines
     par un filet plutôt que par un cadre — douze mille cadres feraient un mur ;

   - la PROVENANCE se voit. Ces définitions viennent d'un modèle de langue, et
     l'étiquette qui le dit est posée à côté du titre, à l'endroit où le lecteur
     décide du crédit qu'il accorde à la page. */
/* ─────────────────────────────────────────────────────────────────────
   /metiers/ — l'index des 485 métiers
   ───────────────────────────────────────────────────────────────────── */
.metiers__titre {
  margin: 0 0 10px;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream);
}
.metiers__chapo {
  margin: 0 0 10px;
  max-width: 64ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--mut);
}
.metiers__compte {
  margin: 0 0 32px;
  font-size: 13.5px;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}
.metiers {
  /* ── La grille des secteurs ──
     Quatre-vingt-dix-sept secteurs de cinq métiers en moyenne. Empilés en pleine
     largeur, ils faisaient une page de quinze mille pixels : dix-neuf écrans à
     faire défiler pour atteindre un métier dont le nom tient en un mot. En
     cartes posées côte à côte, la même matière se balaie du regard.

     EN COLONNES, PAS EN GRILLE. Une grille aligne ses rangées : un secteur de
     deux métiers posé à côté d'un secteur de quatorze laissait un trou de la
     hauteur des douze autres, et le dernier secteur d'un domaine se retrouvait
     seul sur sa rangée. Un domaine compte au plus une douzaine de cartes, toutes
     de hauteurs très inégales — c'est exactement le cas où des colonnes qui se
     remplissent battent des rangées qui s'alignent. On y perd l'ordre de lecture
     de gauche à droite ; sur un annuaire dont chaque carte porte son titre, ce
     n'est pas une perte. */
}
.metiers__grille {
  column-width: 290px;
  column-gap: 16px;
}
.metiers {
  /* ── Le domaine, au-dessus des secteurs ──
     Un intertitre pleine largeur qui coupe la grille : c'est ce qui rend la page
     parcourable d'un coup d'œil, là où quatre-vingt-dix-sept cartes de même
     poids se ressemblaient toutes. Il porte son compte de métiers — le lecteur
     sait avant d'entrer si la rubrique vaut le détour. */
}
.metiers__domaine + .metiers__domaine {
  margin-top: 34px;
}
.metiers__domaine-titre {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 800;
  color: var(--cream);
  letter-spacing: -0.2px;
  scroll-margin-top: 20px;
  /* Un filet qui court jusqu'au bord : sépare sans peser, et distingue le
     domaine du titre de secteur, qui lui est encadré dans sa carte. */
}
.metiers__domaine-titre::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.metiers__domaine-nb {
  order: 1; /* après le filet : la valeur ferme la ligne */
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mut);
}
.metiers__secteur {
  /* En colonnes, l'espacement vertical est une marge : `column-gap` ne sépare
     que les colonnes entre elles. Et une carte ne se coupe jamais en deux au
     passage d'une colonne à l'autre. */
  break-inside: avoid;
  margin: 0 0 16px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  /* La cible d'une ancre doit se poser sous l'en-tête, pas dessous. */
  scroll-margin-top: 20px;
  transition: border-color 0.15s, background 0.15s;
}
.metiers__secteur:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.022);
}
.metiers__secteur-titre {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cream);
  /* Un jalon court dans la couleur d'accent, à la place du carré de puce que
     la carte n'a pas. Il aligne l'œil sur le début de chaque carte quand la
     colonne en empile cinq. */
}
.metiers__secteur-titre::before {
  content: "";
  flex: none;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--acc);
  transform: translateY(1px);
}
.metiers__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  /* VARIANTE DES RUBRIQUES THÉMATIQUES (/droit/, /administration/), où la liste
     n'est pas dans une carte mais tient la largeur : une famille de domaines n'a
     pas de sous-niveau à découper en cartes, et les vingt-sept domaines du droit
     empilés en une colonne laissaient les trois quarts de la page vides.
     Les colonnes CSS les répartissent sans qu'un item se coupe en deux. */
}
.metiers__liste--colonnes {
  column-width: 260px;
  column-gap: 28px;
}
.metiers__liste--colonnes .metiers__item {
  break-inside: avoid;
  border-bottom: 1px solid var(--line);
}
.metiers {
  /* Un métier, son compte. Le libellé passe en texte ordinaire et non en couleur
     d'accent : sept cents liens orange sur une page en font un damier, où plus
     rien ne se détache. L'accent est gardé pour le survol, c'est-à-dire pour
     répondre au geste plutôt que pour crier en permanence. */
}
.metiers__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.45;
}
.metiers__item + .metiers__item {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.metiers__item a {
  /* Le libellé prime sur le compte : c'est lui qu'on lit, et il peut être
     long. Le compte ne cède jamais sa place, mais ne la prend pas non plus. */
  flex: 1 1 auto;
  min-width: 0;
  color: var(--txt);
  text-decoration: none;
}
.metiers__item a:hover {
  color: var(--acc);
  text-decoration: underline;
}
.metiers {
  /* Le nombre de termes : une indication de densité, pas une donnée qu'on vient
     chercher. Chiffres à chasse fixe pour qu'ils s'empilent proprement. */
}
.metiers__nb {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────
   /metiers/<slug>/ — les termes d'un métier
   ───────────────────────────────────────────────────────────────────── */
.metier {
  /* Le titre et l'étiquette de provenance sur la même ligne : l'étiquette dit
     quel crédit accorder à ce qui suit, et cette information n'a de valeur
     qu'AVANT la lecture. Sur écran étroit elle passe simplement à la ligne. */
}
.metier__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: 0 0 10px;
}
.metier__titre {
  margin: 0;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  color: var(--cream);
}
.metier {
  /* Même forme que « CC0-1.0 » sur les fiches d'histoire ou « rédaction » sur le
     mini-cours : le lecteur a déjà appris à lire ces pastilles. Le curseur
     d'aide signale qu'il y a davantage au survol. */
}
.metier__tag {
  padding: 2px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 11px;
  color: var(--mut);
  white-space: nowrap;
  cursor: help;
}
.metier__chapo {
  margin: 0 0 8px;
  max-width: 64ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--mut);
}
.metier__compte {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--mut);
}
.metier {
  /* ── La recherche interne ──
     Un formulaire GET, sans JavaScript : chaque recherche a son adresse, donc
     se partage et s'indexe. Le dessin reprend celui du moteur du dictionnaire
     en plus sobre — c'est un filtre dans une page, pas la porte d'entrée du
     site. */
}
.metier__recherche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.metier__recherche input[type=search] {
  flex: 1 1 260px;
  max-width: 420px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--txt);
  font: inherit;
  font-size: 15px;
}
.metier__recherche input[type=search]::placeholder {
  color: var(--mut);
}
.metier__recherche input[type=search]:focus {
  outline: none;
  border-color: var(--acc);
}
.metier__recherche button {
  padding: 10px 18px;
  background: var(--acc);
  border: 0;
  border-radius: 8px;
  color: #1a1205;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}
.metier__recherche button:hover {
  filter: brightness(1.08);
}
.metier__recherche button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}
.metier__reset {
  font-size: 13.5px;
  color: var(--mut);
}
.metier__reset:hover {
  color: var(--acc);
}
.metier {
  /* ── Les termes ──
     Deux colonnes quand la place le permet, mais larges : une définition de
     trois lignes dans une colonne de 240 px devient un ruban illisible. */
}
.metier__termes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 0 40px;
}
.metier {
  /* Le survol tient à la longueur de la liste : cent quatre-vingts termes en
     deux colonnes, l'œil perd sa ligne en passant de la vedette à sa définition.
     Un fond à peine posé et un filet d'accent à gauche la lui rendent, sans
     transformer la lecture en clic — ces blocs ne sont pas cliquables. */
}
.metier__terme {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  /* La carte ne se coupe jamais entre sa vedette et sa définition quand la
     grille répartit les colonnes. */
  break-inside: avoid;
  /* Le retrait est pris en marge négative : le texte reste aligné sur la
     colonne, seul le fond du survol déborde. */
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: background 0.15s, border-color 0.15s;
}
.metier__terme:hover {
  background: rgba(255, 255, 255, 0.025);
  border-left-color: var(--acc);
}
.metier__vedette {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--cream);
}
.metier__def {
  margin: 0;
  max-width: 60ch;
  font-size: 14.5px;
  line-height: 1.6;
  /* Plus sombre que le corps de texte : sur cette page, la définition est un
     APPUI, pas la lecture principale — ce qu'on parcourt, c'est la liste des
     termes. Les reculer d'un ton laisse les intitulés porter la page. */
  color: #828282;
}
.metier {
  /* Un terme employé dans plusieurs gestes du métier porte plusieurs
     définitions. On l'annonce sans les empiler : quatre paragraphes voisins
     n'apprennent pas quatre fois plus. */
}
.metier__autres {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--mut);
  font-style: italic;
}
.metier {
  /* La caution d'un professionnel, sur la seule ligne qu'elle couvre. Elle se
     distingue de l'étiquette « IA non-relue » du bandeau — qui vaut pour le
     reste de la page — par la couleur d'accent : ici quelqu'un signe. */
}
.metier__relu {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--mut);
}
.metier__relu a {
  color: var(--acc2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.metier__relu a:hover, .metier__relu a:focus-visible {
  border-bottom-color: var(--acc2);
  text-decoration: none;
}
.metier__vide {
  padding: 20px 0;
  font-size: 15px;
  color: var(--mut);
  font-style: italic;
}
.metier {
  /* ── Pagination ──
     Des liens, jamais un bouton : chaque page doit avoir son adresse. */
}
.metier__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.metier__pages a {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--txt);
  text-decoration: none;
}
.metier__pages a:hover {
  border-color: var(--acc);
  color: var(--acc);
}
.metier__page-nb {
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}
.metier {
  /* Le retour à l'annuaire ferme la page : un lien nu s'y perdait sous la
     dernière définition. La flèche est dessinée dans le lien, pas écrite dans le
     gabarit — c'est une indication de sens, pas un mot à lire à voix haute. */
}
.metier__retour {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.metier__retour a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--mut);
  text-decoration: none;
}
.metier__retour a::before {
  content: "←";
  color: var(--acc);
}
.metier__retour a:hover {
  border-color: var(--acc);
  color: var(--acc);
}
.metier__retour a:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* En dessous de 620 px, la grille des termes repasse en une colonne : deux
   colonnes de 300 px hacheraient chaque définition en rubans de trois mots. */
@media (max-width: 620px) {
  .metier__termes {
    grid-template-columns: 1fr;
  }
}

/*# sourceMappingURL=metiers.css.map*/