/* ===========================================================================
   Petit lexique vivant de l'intelligence artificielle
   Feuille unique du site. Direction retenue le 31 août 2026 : la piste B,
   l'affiche, corrigée.

   Le système vient de la couverture et de rien d'autre : fond safran, encre
   bleue, crème du papier du livre, chevron en signature. La couverture ne
   comporte aucun aplat bleu, le site non plus. Le bleu est une encre, jamais
   une surface. Les moments de la page se séparent par des changements de
   fond dans la famille safran, crème, papier, et par un filet bleu fin.
   =========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("fontes/archivo-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 62% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fontes/archivo-italique.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --safran: #FCBB05;   /* SPEC-systeme-couverture.md */
  --bleu:   #192E85;   /* l'encre unique de toutes les éditions */
  --creme:  #F4E7CE;   /* le crème du livre, gardé en mémoire du système ;
                          il ne sert plus de fond, retiré le 31 août 2026 */
  --papier: #FFFDF7;
  --encre:  #14120E;
  --filet:  rgba(25, 46, 133, 0.18);   /* le filet clair des tableaux et des notices */

  --mesure: 36rem;
  --air:    clamp(1.25rem, 5vw, 5rem);   /* la marge latérale des surfaces */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: "Archivo", system-ui, sans-serif;
  font-variation-settings: "wdth" 100;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.58;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;      /* aucune surface pleine ne doit faire déborder */
}

p, ul, ol { margin: 0 0 1.05rem; }
em { font-style: italic; }
strong { font-weight: 600; }
img { max-width: 100%; height: auto; display: block; }

/* ------------------------------------------------ accès, bandeau, menu */

.evitement { position: absolute; left: -9999px; }
.evitement:focus {
  left: 0.75rem; top: 0.75rem; z-index: 20;
  padding: 0.5rem 0.85rem;
  background: var(--bleu); color: var(--papier);
}

a { color: var(--bleu); text-underline-offset: 0.18em; }
a:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }

/* Le bandeau est sur le safran de la couverture, et il n'en est séparé que
   par un filet bleu fin. Il ne porte pas le titre du livre : celui-ci est
   déjà le H1 de l'accueil, et le pied le redonne sur les douze pages. */
.bandeau {
  background: var(--safran);
  border-bottom: 1px solid var(--bleu);
  padding: 0.9rem var(--air);
}

.sommaire { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; }
.sommaire a {
  color: var(--bleu);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  padding-bottom: 0.15rem;
  border-bottom: 2px solid transparent;
}
.sommaire a:hover { border-bottom-color: var(--bleu); }
.sommaire a[aria-current="page"] {
  border-bottom-color: var(--bleu);
  font-weight: 700;
}
.langues[hidden] { display: none; }

/* L'adresse de contact presse est coupée en deux par un fragment que cette
   règle masque. Un moissonneur qui lit le HTML brut récolte une adresse
   morte ; un lecteur d'écran saute le fragment, comme le copier-coller.
   Aucun JavaScript n'intervient.
   NE PAS RETIRER sans retirer d'abord le fragment de contenu/contact.md :
   sans cette règle, l'adresse s'affiche cassée. build.py le vérifie. */
.leurre { display: none; }

/* ------------------------------------------------------------ la titraille */

main { padding: 0; }
.page { margin: 0; }

/* Le titre sur le safran, d'un bord à l'autre, comme la 1re de couverture.
   Sous l'attribution, le chevron de la marque, dans la fonte de titrage. */
.titre {
  background: var(--safran);
  padding: clamp(2rem, 5vw, 4rem) var(--air) clamp(1.5rem, 3.5vw, 2.5rem);
}

h1 {
  color: var(--bleu);
  font-variation-settings: "wdth" 68;
  font-weight: 700;
  /* Rupture d'échelle franche : le titre vaut trois fois le corps. */
  font-size: clamp(2.35rem, 7vw, 5rem);
  /* Mesuré sur la fonte, à wdth 68 : la descendante la plus profonde vaut
     -0,197 cadratin et l'ascendante la plus haute +0,734. L'interlignage
     0,92 de la couverture se croise donc de 0,011 cadratin et ne peut pas
     servir ici. 1,02 laisse 9 px de jeu à 88 px de corps, et le contrôle se
     refait sur le rendu à chaque point de rupture, jamais sur la valeur. */
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  text-wrap: balance;
  hyphens: none;
}
/* Sur l'accueil, le titre garde la coupe en trois lignes de la couverture au
   lieu de filer sur toute la largeur. */
.accueil h1 { max-width: 15ch; }

/* L'attribution : le nom de l'auteur en gras, le reste en maigre. */
.attribution {
  color: var(--bleu);
  margin: 0;
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  max-width: 42rem;   /* la ligne d'attribution tient sur un seul rang */
}
.attribution strong { font-weight: 700; }

/* Le chevron est la marque de l'éditeur (SPEC-systeme-couverture.md). Il ne
   figure qu'au pied, comme au pied de la 4e de couverture : celui de la
   titraille a été retiré le 8 septembre 2026, il doublait celui de la
   couverture posée juste dessous. */
.chevron {
  display: block;
  color: var(--bleu);
  font-variation-settings: "wdth" 68;
  font-weight: 700;
  line-height: 0.8;
}

/* Le chapeau : le texte à gauche, la couverture à droite sur le papier,
   plus petite, détachée par une ombre douce pour se lire comme un objet.
   Sur téléphone, la couverture passe sous le texte. */
.entree {
  background: var(--papier);
  border-top: 1px solid var(--bleu);
  padding: clamp(2rem, 5vw, 3.5rem) var(--air) clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.entree-texte > * {
  max-width: 46rem;
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  line-height: 1.4;
}
.entree-texte > *:last-child { margin-bottom: 0; }
.couverture { margin: 0; }
.couverture a { display: block; width: fit-content; }
.couverture a:focus-visible { outline-offset: 6px; }
.couverture img {
  width: min(100%, 12rem);
  box-shadow: 0 0.75rem 2rem rgba(20, 18, 14, 0.22);
}
@media (min-width: 55rem) {
  .entree { grid-template-columns: minmax(0, 46rem) auto; justify-content: start; }
  .couverture img { width: 14rem; }
}

/* Le chapeau des pages de document reste sur la surface du titre. */
.page > .chapeau {
  background: var(--safran);
  color: var(--bleu);
  margin: 0;
  padding: 0 var(--air) clamp(1.75rem, 5vw, 3.5rem);
  font-weight: 600;
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  max-width: none;
}
/* Toute page qui n'est pas l'accueil porte son titre sur le safran, en
   pleine surface, comme la couverture. */
.page:not(.accueil) > h1 {
  background: var(--safran);
  padding: clamp(2rem, 5vw, 4rem) var(--air) clamp(1.25rem, 3vw, 2rem);
  margin: 0;
  font-size: clamp(2.1rem, 5.2vw, 3.75rem);
}

/* ------------------------------------------------------------ le corps */

/* Le texte est calé à gauche, la gouttière est à droite : c'est là qu'est
   l'asymétrie. */
.page > h2,
.page > p,
.page > ul {
  padding-left: var(--air);
  padding-right: var(--air);
}
.page > p,
.page > ul,
.corps > * { max-width: var(--mesure); }

/* .corps n'est qu'une enveloppe. Elle porte l'air de tête, sinon la première
   ligne toucherait l'aplat safran ; elle ne porte pas la justification. */
.corps {
  /* De l'air aussi en bas : le dernier paragraphe ne colle pas au pied. */
  padding: clamp(2rem, 5vw, 3.5rem) var(--air) clamp(3rem, 7vw, 6rem);
  max-width: none;
}

/* Sur les pages de document et de notion, la couverture occupe la droite du
   texte, comme sur l'accueil à côté du chapeau, et ramène à l'accueil. Elle
   suit le lecteur dans les textes longs. Sous le texte sur téléphone. */
.lecture { display: grid; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.lecture > .couverture { padding: 0 var(--air) clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 55rem) {
  /* La couverture se place juste après la colonne de texte, comme sur
     l'accueil, et non au bord de l'écran. */
  .lecture {
    grid-template-columns: minmax(0, calc(var(--mesure) + 2 * var(--air))) auto;
    justify-content: start;
  }
  .lecture > .couverture {
    position: sticky;
    top: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(2rem, 5vw, 3.5rem) var(--air) clamp(2rem, 5vw, 3.5rem) 0;
  }
}

/* Les titres de section, précédés du chevron de la couverture, employé ici
   comme motif de progression. */
h2 {
  font-variation-settings: "wdth" 68;
  font-weight: 700;
  font-size: clamp(0.875rem, 1.4vw, 1rem);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--bleu);
  margin: clamp(2.5rem, 5vw, 4rem) 0 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
h2::before {
  content: "\203A\203A\203A";
  letter-spacing: -0.15em;
  font-size: 1.2em;
  flex: none;
}

h3 {
  font-variation-settings: "wdth" 78;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.18;
  color: var(--bleu);
  margin: 2.25rem 0 0.2rem;
}

/* Les portes : trois pavés, en grille asymétrique sur large écran. Deux
   listes de l'accueil sont composées ainsi : « Trois choses à lire sur ce
   site » et « Se procurer le livre ». [Le 8 septembre 2026, Stéphane a levé
   la règle du §1.5 du cahier des charges qui réservait aux liens d'achat une
   liste en texte.] */
.accueil > #trois-choses-a-lire-sur-ce-site + ul,
.accueil > #se-procurer-le-livre + p + ul {
  list-style: none;
  padding-left: 0;
  padding-right: 0;
  max-width: none;
  display: grid;
  gap: 1px;
  background: var(--bleu);
  border-top: 1px solid var(--bleu);
  border-bottom: 1px solid var(--bleu);
}
.accueil > #trois-choses-a-lire-sur-ce-site + ul li,
.accueil > #se-procurer-le-livre + p + ul li {
  background: var(--papier);
  margin: 0;
  /* En colonne unique, la case porte elle-même la marge latérale de la page :
     le bleu de la liste n'apparaît qu'entre les cases, jamais sur les côtés. */
  padding: 1.4rem var(--air) 1.6rem;
}
.accueil > #se-procurer-le-livre + p + ul li { font-size: 0.9375rem; }
/* Le titre de la porte : un lien dans la première liste, un libellé dans la
   seconde. Même composition. */
.accueil > #trois-choses-a-lire-sur-ce-site + ul li strong,
.accueil > #se-procurer-le-livre + p + ul li strong { font-weight: 400; }
.accueil > #trois-choses-a-lire-sur-ce-site + ul li a,
.accueil > #se-procurer-le-livre + p + ul li strong {
  display: inline-block;
  font-variation-settings: "wdth" 72;
  font-weight: 700;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.14;
  text-decoration: none;
  margin-bottom: 0.5rem;
  color: var(--bleu);
}
.accueil > #trois-choses-a-lire-sur-ce-site + ul li a:hover { background: var(--safran); }

@media (min-width: 55rem) {
  .accueil > #trois-choses-a-lire-sur-ce-site + ul,
  .accueil > #se-procurer-le-livre + p + ul {
    grid-template-columns: 1.25fr 1fr 1fr;   /* l'asymétrie est là */
  }
  .accueil > #trois-choses-a-lire-sur-ce-site + ul li,
  .accueil > #se-procurer-le-livre + p + ul li {
    padding-left: clamp(1rem, 2vw, 1.75rem);
    padding-right: clamp(1rem, 2vw, 1.75rem);
  }
  /* Les trois cases d'achat portent la même ligne : colonnes égales, sinon la
     dernière casse sa ligne avant les autres. */
  .accueil > #se-procurer-le-livre + p + ul { grid-template-columns: 1fr 1fr 1fr; }
  .accueil > #trois-choses-a-lire-sur-ce-site + ul li:first-child,
  .accueil > #se-procurer-le-livre + p + ul li:first-child { padding-left: var(--air); }
  .accueil > #trois-choses-a-lire-sur-ce-site + ul li:last-child,
  .accueil > #se-procurer-le-livre + p + ul li:last-child  { padding-right: var(--air); }
}

/* L'auteur : le portrait à gauche, sans filet comme la couverture, la
   biographie à droite. Une seule colonne sur téléphone. */
.accueil > .auteur {
  padding: 0 var(--air);
  display: grid;
  gap: 0 clamp(1.5rem, 4vw, 3rem);
}
.accueil > .auteur > * { max-width: var(--mesure); }
.accueil > .auteur figure { margin: 0 0 1.2rem; }
.accueil > .auteur img { max-width: 15rem; }
.accueil > .auteur figure a { display: block; width: fit-content; }
.accueil > .auteur figure a:focus-visible { outline-offset: 4px; }
/* Le crédit de la photographie, petit et en gris, sous le portrait. */
.accueil > .auteur figcaption {
  max-width: 15rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #6E6C69;   /* 5,0 : 1 sur le papier, AA pour du petit texte */
}
/* Les listes à puce chevron : les liens de l'auteur sur l'accueil, et les
   extraits à lire sur la page du livre. */
.accueil > .auteur ul,
body[data-page="livre"] .corps > ul { list-style: none; padding-left: 0; }
.accueil > .auteur li,
body[data-page="livre"] .corps > ul li { margin-bottom: 0.35rem; }
.accueil > .auteur li::before,
body[data-page="livre"] .corps > ul li::before {
  content: "\203A";
  color: var(--bleu);
  font-weight: 700;
  margin-right: 0.55em;
}
@media (min-width: 55rem) {
  .accueil > .auteur {
    grid-template-columns: 15rem minmax(0, 1fr);
    /* Trois blocs de texte à droite du portrait : deux paragraphes et la
       liste. La dernière rangée absorbe la hauteur restante du portrait, sans
       quoi les blocs s'écarteraient. */
    grid-template-rows: auto auto 1fr;
  }
  .accueil > .auteur figure { grid-row: 1 / span 3; margin-bottom: 0; }
}

/* La phrase qui précède les cases d'achat n'est pas cadrée à la mesure. */
.accueil > #se-procurer-le-livre + p { max-width: none; }

/* Les autres boutiques Amazon, en plus petit sous les trois cases. */
.accueil > #se-procurer-le-livre + p + ul + p {
  font-size: 0.875rem;
  max-width: none;
  padding-right: max(var(--air), calc(100% - var(--air) - 46rem));
}

ul { padding-left: 1.15rem; }
li { margin-bottom: 0.55rem; }
.corps > * { overflow-wrap: break-word; }

/* L'état civil de l'ouvrage. Un tableau de deux colonnes, sans en-tête
   visible : la première colonne porte le libellé, la seconde la valeur.
   Il déborderait sur un petit écran, il a donc son propre défilement. */
.page > table, .corps > table {
  margin: 0 var(--air) 1.5rem;
  max-width: var(--mesure);
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.45;
}
th, td {
  text-align: left;
  vertical-align: baseline;
  padding: 0.6rem 1rem 0.6rem 0;
  border-bottom: 1px solid var(--filet);
}
tr:first-child th, tr:first-child td { border-top: 1px solid var(--filet); }
/* L'en-tête du tableau est retiré de l'œil, pas du lecteur d'écran :
   display:none le supprimerait aussi pour lui, et la colonne perdrait son
   nom. */
thead th {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
td:first-child {
  width: 9rem;
  color: var(--bleu);
  white-space: nowrap;
}
td:last-child { padding-right: 0; }
/* Dans .corps, l'enveloppe porte déjà la marge latérale : le tableau ne la
   double pas. */
.corps > table { margin-left: 0; margin-right: 0; }

/* Le dernier bloc de l'accueil, le tableau de l'ouvrage, ne colle pas au pied. */
.accueil > table:last-child { margin-bottom: clamp(3.5rem, 7vw, 6rem); }

/* Sur la page du livre, le lien de l'extrait à lire porte le poids : la
   fonte des titres, en gras, un peu plus grande ; l'étiquette reste en maigre. */
body[data-page="livre"] .corps > ul li a {
  font-variation-settings: "wdth" 72;
  font-weight: 700;
  font-size: 1.125em;
  text-decoration-thickness: 1px;
}
/* L'étiquette « Extrait à lire », en petites capitales espacées, comme les
   intertitres de section : elle se distingue de la liste des notions
   au-dessus sans ajouter une teinte à la palette. */
body[data-page="livre"] .corps > ul li { font-size: 0.9375rem; }
body[data-page="livre"] .corps > ul li .etiquette {
  font-variation-settings: "wdth" 68;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--bleu);
}

/* Sur la page du livre, un filet pâle sépare les chapitres : au-dessus de
   chaque titre de chapitre qui suit la liste du précédent. */
body[data-page="livre"] .corps > ul + h3 {
  border-top: 1px solid var(--filet);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Le lien de téléchargement du communiqué : un lien en texte, en tête. */
.telecharger { font-weight: 600; }
/* Une note, en plus petit : la mention des exemplaires de presse. */
.note { font-size: 0.875rem; }
/* La ligne de lieu et de date du communiqué : plus petite, en italique. */
.date { font-size: 0.875rem; font-style: italic; }
/* La notice biographique du communiqué, séparée du corps par un filet et de
   l'air, et détachée du tableau qui suit. */
.bio {
  /* Même filet clair que les tableaux, et le même air entre le texte et le
     filet du dessus qu'entre le texte et le filet du tableau qui suit. */
  margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--filet);
}
.bio > p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- le pied */

/* Même esprit que le bandeau : le safran de la couverture, l'encre bleue,
   et un filet fin pour l'en séparer. */
.pied {
  background: var(--safran);
  color: var(--bleu);
  border-top: 1px solid var(--bleu);
  padding: 1.75rem var(--air) 2.5rem;
  font-size: 0.875rem;
  line-height: 1.55;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
}
.pied p { margin: 0; max-width: 44rem; }
.pied p + p { margin-top: 1em; }
.pied strong { font-weight: 700; }
/* Grand : 1,35 fois le corps du titre de l'accueil, le rapport de la 1re de
   couverture. */
.pied .chevron { font-size: clamp(3.2rem, 9.45vw, 6.75rem); flex: none; }
/* Le chevron est un lien vers la page suivante du menu, l'accueil après la
   dernière. Il avance d'un cran au survol. */
a.chevron { text-decoration: none; transition: transform 0.15s ease-out; }
a.chevron:hover { transform: translateX(0.12em); }
a.chevron:focus-visible { outline-offset: 6px; }

/* ---------------------------------------------------------- impression */

/* La déclaration sera imprimée et citée par des enseignants et des
   bibliothécaires : elle doit sortir propre sur une feuille, avec l'adresse
   du site et la mention des pages 129-130. */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .bandeau, .pied, .evitement, .couverture, .chevron { display: none; }
  main, .page { padding: 0; margin: 0; }
  .page > *, .titre, .corps, .corps > *, .entree {
    background: none !important;
    color: #000 !important;
    border: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }
  h1 { font-size: 20pt; padding: 0; margin: 0 0 0.4em; }
  h2 { font-size: 11pt; display: block; }
  h2::before { content: none; }
  a { color: #000; text-decoration: none; }
  h1, h2, h3 { break-after: avoid; }
  p { orphans: 3; widows: 3; }

  body[data-page="declaration"] .corps::after {
    display: block;
    margin-top: 1.5em;
    padding-top: 0.75em;
    border-top: 1pt solid #000;
    font-size: 9pt;
    content: "Déclaration sur l’usage de l’intelligence artificielle. "
             "Texte imprimé aux pages 129 et 130 de Petit lexique vivant de "
             "l’intelligence artificielle, Stéphane Vial, "
             "ISBN 978-2-9825534-0-8. "
             "web.stephane-vial.net/lexique-ia/declaration/";
  }
}