/* ---------------------------------------------------------------
   Identite Janus, bichromie serigraphique.
   Encre klein #0F29AD sur papier creme #EFE7DD. Aucun blanc,
   aucun vert. Les panneaux sont PLUS SOMBRES que le fond :
   l'encre s'enfonce dans le papier, elle ne flotte pas au-dessus.
   Parti pris assume : la creme s'applique quel que soit le theme
   du systeme. C'est l'identite, pas une preference. Donc pas de
   prefers-color-scheme ici, et toutes les couleurs sont peintes
   explicitement pour que la page tienne sur n'importe quel fond.
   --------------------------------------------------------------- */
:root{
  --papier:      #EFE7DD;
  --panneau:     #EAE2D8;
  --panneau-2:   #E3DACE;
  --encre:       #0F29AD;
  --encre-pale:  #8C97C9;
  --texte:       #1B2038;
  --texte-doux:  #4A5068;
  --trait:       #C9BFB2;
  --chaud:       #C4841C;

  --col: 68ch;
  --r: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--papier);
  color:var(--texte);
  font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* --- Texture, en trois couches superposees -------------------
   1. body::before  la trame serigraphique : deux grilles de
      points de pas different (3px et 7px), qui se dephasent et
      produisent un moire irregulier au lieu d'un quadrillage.
   2. body::after   le grain de papier : un bruit fractal SVG
      en ligne, en multiply, qui casse les aplats.
   3. .page::before l'inegalite d'encrage : de larges taches
      tres pales, façon papier qui a bu l'encre par endroits.
   Tout est vectoriel ou procedural, aucun fichier image.
   ------------------------------------------------------------- */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  color:var(--encre); opacity:.085;
  background-image:
    radial-gradient(currentColor .62px,transparent .68px),
    radial-gradient(currentColor .45px,transparent .55px);
  background-size:3px 3px, 7px 7px;
  background-position:0 0, 1px 2px;
}

body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:3;
  opacity:.25;
  mix-blend-mode:multiply;
  background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
}

.page{ position:relative; z-index:1; }

/* Celle-ci defile avec le papier plutot que de rester collee a
   l'ecran : une tache d'encrage appartient a la feuille, pas a
   la fenetre. En absolute, elle coute aussi moins cher au scroll
   que trois calques fixes empiles. */
.page::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  opacity:.5;
  mix-blend-mode:multiply;
  background-size:640px 640px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23m)' opacity='0.16'/%3E%3C/svg%3E");
}

.wrap{
  width:100%;
  max-width:var(--col);
  margin-inline:auto;
  padding-inline:22px;
}

/* ---------- Bandeau de tete ---------- */

.tete{
  border-bottom:2px solid var(--encre);
  padding:52px 0 26px;
}

/* La marque seule, sans nom ecrit, en ouverture de page. En aplat
   d'encre : le PNG d'origine portait un halo pense pour un fond
   noir, qui n'aurait fait qu'une aureole sale sur du papier creme. */
.marque{
  height:72px;
  width:auto;
  display:block;
  margin:0 auto 26px;
}

.surtitre{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--encre);
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.surtitre .pt{ color:var(--encre-pale); }

/* Le seul geste appuye de la page : un defaut de reperage
   serigraphique sur le titre, deux passages d'encre decales. */
.titre{
  position:relative;
  font-size:clamp(56px,17vw,116px);
  font-weight:900;
  line-height:.86;
  letter-spacing:-.045em;
  color:var(--encre);
  margin:18px 0 0;
  text-wrap:balance;
}
.titre::before{
  content:"LEXIQUE";
  position:absolute;
  left:-.055em; top:.045em;
  color:var(--encre);
  opacity:.17;
  z-index:-1;
}

.chapo{
  margin:22px 0 0;
  font-size:19px;
  line-height:1.55;
  color:var(--texte);
  max-width:52ch;
}
.chapo b{ font-weight:600; color:var(--encre); }

/* ---------- Sommaire ---------- */

.sommaire{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:22px 0 30px;
  border-bottom:1px solid var(--trait);
}
.puce{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--encre);
  text-decoration:none;
  border:1px solid var(--encre);
  border-radius:var(--r);
  padding:7px 11px;
  background:transparent;
  transition:background .14s ease,color .14s ease;
}
.puce:hover,.puce:focus-visible{ background:var(--encre); color:var(--papier); }

/* ---------- Sections ---------- */

.fam{ padding:46px 0 4px; scroll-margin-top:16px; }

.fam-tete{ margin-bottom:26px; }

.fam-num{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--encre-pale);
}
.fam-titre{
  font-size:clamp(27px,6vw,34px);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.12;
  color:var(--encre);
  margin:5px 0 8px;
  text-wrap:balance;
}
.fam-sous{
  margin:0;
  font-size:16px;
  color:var(--texte-doux);
  max-width:50ch;
}

.liste{ display:flex; flex-direction:column; gap:14px; }

/* ---------- Entree ---------- */

.mot{
  background:var(--panneau);
  border:1px solid var(--trait);
  border-left:3px solid var(--encre);
  border-radius:var(--r);
  padding:20px 22px 21px;
}

.mot-tete{
  display:flex;
  align-items:baseline;
  gap:11px;
  flex-wrap:wrap;
  margin-bottom:9px;
}
.mot-nom{
  font-size:23px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--encre);
  line-height:1.15;
}
.mot-dev{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.03em;
  color:var(--texte-doux);
}

.mot p{ margin:0; }
.mot p + p{ margin-top:10px; }

.clair{ color:var(--texte); }

/* L'image concrete : la phrase qui fait comprendre. */
.image{
  color:var(--texte-doux);
  font-size:16px;
}

/* Les exemples : des noms propres verifiables, en fin de fiche.
   Volontairement plus discrets que la definition, parce qu'ils
   vieillissent plus vite qu'elle. */
.mot p.ex{
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid var(--trait);
  font-size:15px;
  color:var(--texte-doux);
}
.ex-lab{
  display:inline-block;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--encre-pale);
  margin-right:8px;
}
.ex b{ color:var(--encre); font-weight:600; }

/* Le piege : seul endroit chaud de la page. Reserve aux
   contresens qui coutent vraiment quelque chose. */
.piege{
  display:flex;
  gap:10px;
  margin-top:13px;
  padding-top:12px;
  border-top:1px solid var(--trait);
  font-size:15.5px;
  color:var(--texte);
}
.piege::before{
  content:"⚠";
  color:var(--chaud);
  font-size:15px;
  line-height:1.5;
  flex:none;
}
.piege b{ color:var(--chaud); font-weight:600; }

/* ---------- Fin ---------- */

.fin{
  margin:56px 0 0;
  padding:30px 24px 32px;
  background:var(--panneau-2);
  border:2px solid var(--encre);
  border-radius:var(--r);
}
.fin h2{
  margin:0 0 12px;
  font-size:26px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--encre);
  text-wrap:balance;
}
.fin p{ margin:0 0 12px; }
.fin p:last-child{ margin-bottom:0; }
.fin b{ color:var(--encre); font-weight:600; }
.fin-note{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--trait);
  font-size:15px;
  color:var(--texte-doux);
}

.cle{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.92em;
  font-weight:600;
  color:var(--papier);
  background:var(--encre);
  padding:2px 7px;
  border-radius:var(--r);
  letter-spacing:.05em;
}

.pied{
  border-top:1px solid var(--trait);
  margin-top:52px;
  padding:20px 0 60px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--texte-doux);
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.pied b{ color:var(--encre); font-weight:600; }
.pied a{ color:var(--encre); text-decoration:none; border-bottom:1px solid var(--encre-pale); }
.pied a:hover,.pied a:focus-visible{ border-bottom-color:var(--encre); }

@media (max-width:520px){
  body{ font-size:16.5px; }
  .mot{ padding:17px 17px 18px; }
  .tete{ padding-top:38px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}