/* Livret « Vertical drama » — lecture web.
 *
 * Le PDF est compose en A5 : ses mesures ne valent rien ici. Cette feuille part
 * du telephone, parce que le lien arrivera par LinkedIn et s'ouvrira dans le
 * navigateur integre de l'application, sur un ecran de 390 px. Le bureau est le
 * cas facile, traite ensuite.
 */

/* Les variables du livret vivent sur :root, pas sur .livret : le rail, la
   navigation et la porte sont hors de l'article et les utilisent aussi.
   ATTENTION aux noms : legacy-override.css remappe --cream et --navy-deep avec
   !important, et les INVERSE (--navy-deep y vaut le creme). Ce pont de migration
   sert les pages dessinees sombres. Le livret consomme donc les tokens
   canoniques --color-*, jamais les noms de la palette du PDF. */
:root{
  --lv-mesure: 34rem;           /* ~66 caracteres, la ligne qui se lit sans effort */
  --lv-ink:    var(--color-ink, #1B2D3A);
  --lv-paper:  var(--color-paper, #F0E4D0);
  --lv-sombre: var(--color-navy-deep, #0F1C26);
  --lv-terre:  var(--color-accent-deep, #8F4A24);
  --lv-accent: var(--color-accent, #A65D37);
  --lv-filet:  rgba(27,45,58,.16);
}
.livret{
  color: var(--lv-ink);
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 17.5px;
  line-height: 1.66;
  max-width: var(--lv-mesure);
  margin: 0 auto;
  padding: 8px 20px 72px;
  /* Les ideogrammes chinois du livret retombaient sur la police systeme dans le
     PDF, deux fois. Sur le web, on nomme la pile explicitement. */
  font-synthesis: none;
}
.livret .cjk{ font-family: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
  "Microsoft YaHei", sans-serif; }

.livret p{ margin: 0 0 1.05em; }
.livret h1{ font-size: 1.72rem; line-height: 1.18; letter-spacing: -.015em;
  font-weight: 600; margin: 0 0 .5em; }
.livret h2{ font-size: 1.28rem; line-height: 1.26; font-weight: 600;
  margin: 2.1em 0 .55em; letter-spacing: -.008em; }
.livret h3{ font-size: 1.06rem; font-weight: 600; margin: 1.7em 0 .45em; }

/* L'encadre d'ouverture porte les faits du chapitre : c'est ce qui se cite, et
   sur telephone c'est souvent tout ce qui sera lu. Il ne se distingue pas par
   une bordure discrete, il se distingue franchement. */
.livret blockquote.tldr{
  margin: 0 0 2em; padding: 1.1em 1.15em;
  background: var(--lv-sombre); color: var(--lv-paper);
  font-size: .97rem; line-height: 1.58; border: 0;
}
.livret blockquote.tldr p{ margin: 0 0 .75em; }
.livret blockquote.tldr p:last-child{ margin: 0; }
.livret blockquote{ margin: 1.4em 0; padding: .9em 1.1em;
  background: rgba(27,45,58,.05); border-left: 3px solid var(--lv-accent); }

.livret ul, .livret ol{ margin: 0 0 1.05em; padding-left: 1.15em; }
.livret li{ margin: 0 0 .45em; }
.livret hr{ border: 0; height: 1px; background: var(--lv-filet); margin: 2.2em 0; }
.livret strong{ font-weight: 600; }
.livret em{ font-style: italic; }

/* ── Tableaux ──────────────────────────────────────────────────────────
   Le livret aligne des tableaux a trois colonnes larges. Sur telephone, un
   defilement horizontal se rate : le lecteur ne voit pas qu'il y a une suite.
   Sous 600 px, chaque ligne devient donc un bloc etiquete par l'intitule de
   colonne, repris en attribut data-th par le generateur. */
.livret .tw{ margin: 1.5em 0; }
.livret table{ width: 100%; border-collapse: collapse; font-size: .93rem; }
.livret thead th{
  text-align: left; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 500; color: var(--lv-terre); padding: 0 .8em .5em 0;
  border-bottom: 1.5px solid var(--lv-filet); vertical-align: bottom;
}
.livret tbody td{ padding: .7em .8em .7em 0; border-bottom: 1px solid var(--lv-filet);
  vertical-align: top; }
.livret th:first-child, .livret td:first-child{ padding-left: 0; }

/* ── Figures ─────────────────────────────────────────────────────────── */
.livret figure.fig{ margin: 1.8em 0; }
.livret figure.fig svg{ width: 100%; height: auto; display: block; }

/* ── Fil de progression et navigation ────────────────────────────────── */
/* Le rail et la navigation vivent hors de .livret : sans cette regle ils
   retombent sur la serif du navigateur, et la page parle deux typographies. */
.livret-rail, .livret-nav, .livret-porte{
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.livret-rail{ max-width: var(--lv-mesure); margin: 0 auto; padding: 14px 20px 0;
  display: flex; align-items: center; gap: 12px;
  font: 500 .7rem/1 ui-monospace, Menlo, monospace; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(27,45,58,.55); }
.livret-rail .jauge{ flex: 1; height: 2px; background: var(--lv-filet); position: relative; }
.livret-rail .jauge i{ position: absolute; inset: 0 auto 0 0; background: var(--lv-accent); }

.livret-nav{ max-width: var(--lv-mesure); margin: 0 auto; padding: 0 20px 64px;
  display: grid; gap: 10px; }
.livret-nav a{
  display: block; padding: 15px 18px; text-decoration: none;
  border: 1px solid var(--lv-filet); background: rgba(255,255,255,.4);
  color: var(--lv-ink); line-height: 1.35;
}
.livret-nav a:hover{ border-color: var(--lv-accent); }
.livret-nav .sens{ display: block; font: 500 .66rem/1 ui-monospace, Menlo, monospace;
  letter-spacing: .1em; text-transform: uppercase; color: var(--lv-terre); margin-bottom: 6px; }
.livret-nav .titre{ font-weight: 600; font-size: .98rem; }

/* ── Porte d'entree ──────────────────────────────────────────────────── */
.livret-porte{ max-width: var(--lv-mesure); margin: 2.5em auto; padding: 1.5em 1.3em;
  border: 1.5px solid var(--lv-accent); background: rgba(255,255,255,.5); }
/* La page du site ne pose pas box-sizing sur les champs : sans cette regle, un
   champ a 100 % plus son padding deborde de son cadre. Vu le 04/09/2026. */
.livret-porte *, .livret-porte *::before, .livret-porte *::after{ box-sizing: border-box; }
.livret-porte h2{ margin-top: 0; }
.livret-porte form{ display: grid; gap: 10px; margin: 1.1em 0 0; }
/* Les trois champs, pas seulement l'adresse : ne styler que [type=email]
   laissait « nom » et « societe » avec le cadre par defaut du navigateur, et le
   formulaire avait l'air a moitie fini. */
.livret-porte input[type=email],
.livret-porte input[type=text]{
  width: 100%; padding: 14px 15px; font-size: 16px;  /* 16px : sous ce seuil, iOS zoome */
  border: 1px solid var(--lv-filet); background: #fff; color: var(--lv-ink);
  border-radius: 0; -webkit-appearance: none; font-family: inherit;
}
.livret-porte input::placeholder{ color: rgba(27,45,58,.45); }
.livret-porte input:focus{ outline: 2px solid var(--lv-accent); outline-offset: -2px; }
/* shell.css style les boutons du site : sans cette specificite, le bouton du
   livret sortait en creme sur creme, donc invisible. */
/* shell.css et legacy-override stylent les boutons du site avec une specificite
   qui l'emporte : sans !important, le bouton sortait creme sur creme, donc
   invisible. Constate a l'ecran le 04/09/2026, pas devine. */
.livret-porte form button{ display: block; width: 100%; padding: 15px 18px;
  font-size: 16px; font-weight: 600; line-height: 1.2; border: 0 !important;
  border-radius: 0 !important;
  background: var(--lv-sombre) !important; color: var(--lv-paper) !important;
  cursor: pointer; -webkit-appearance: none; appearance: none; text-align: center; }
.livret-porte form button:hover{ background: var(--lv-accent) !important; }
.livret-porte form button:disabled{ opacity: .6; cursor: default; }
.livret-porte .fine{ font-size: .82rem; color: rgba(27,45,58,.62); margin: .8em 0 0; }

/* ── Telephone ───────────────────────────────────────────────────────── */
@media (max-width: 600px){
  .livret{ font-size: 17px; padding: 6px 18px 64px; }
  .livret h1{ font-size: 1.5rem; }
  .livret h2{ font-size: 1.16rem; }
  .livret blockquote.tldr{ margin-left: -18px; margin-right: -18px; padding: 1.1em 18px; }

  /* Le tableau devient une liste de blocs etiquetes. */
  .livret table, .livret thead, .livret tbody, .livret tr, .livret th, .livret td{ display: block; }
  .livret thead{ position: absolute; left: -9999px; }
  .livret tbody tr{ border-bottom: 1px solid var(--lv-filet); padding: .9em 0; }
  .livret tbody tr:last-child{ border-bottom: 0; }
  .livret tbody td{ padding: 0 0 .5em; border: 0; }
  .livret tbody td:last-child{ padding-bottom: 0; }
  .livret tbody td::before{
    content: attr(data-th); display: block;
    font: 500 .64rem/1.3 ui-monospace, Menlo, monospace; letter-spacing: .1em;
    text-transform: uppercase; color: var(--lv-terre); margin-bottom: 3px;
  }
  .livret tbody td:empty{ display: none; }

  /* La premiere cellule est le sujet de la ligne — « Portugal », « Chine » : elle
     se lit comme un titre de bloc, pas comme une valeur etiquetee. */
  .livret tbody td:first-child{ font-weight: 600; font-size: 1.02rem; padding-bottom: .35em; }
  .livret tbody td:first-child::before{ display: none; }
  /* Et dans une table a deux colonnes, la seconde EST la valeur : son intitule,
     repete a chaque bloc, ne dit rien de plus que le titre du tableau. */
  .livret table.duo tbody td:last-child::before{ display: none; }
}

@media (min-width: 900px){
  .livret{ font-size: 18px; padding-top: 16px; }
  .livret h1{ font-size: 2rem; }
}

/* Impression : le lecteur qui imprime a droit a un texte propre, sans navigation. */
@media print{
  .livret-rail, .livret-nav, .livret-porte{ display: none; }
  .livret{ max-width: none; font-size: 11pt; }
  .livret blockquote.tldr{ background: none; color: inherit; border: 1px solid #999; }
}