@charset "UTF-8";
/* guide.css - le guide utilisateur PHP dans le monde « grue en origami ».
   Chargee APRES /assets/lbp.css, qui porte les jetons, le bandeau, le panneau
   de lecture, le pied de page et la marge. Ce fichier n'ajoute que ce qui est
   propre au guide : la marge a 14 chapitres, le fil du bandeau, les classes de
   contenu des 179 articles (.article-section, .note-box, .callout-blue,
   .articleList, .paginationButtons, tableaux, images), la fin d'article
   (impression, PDF, partage), la visionneuse d'image et le retour en haut.

   Aucun jeton n'est redefini ici : tout vient de lbp.css. */

/* --------------------------------------------------------------------------
   1. La marge du guide : recherche, 14 chapitres, « On this page »
   -------------------------------------------------------------------------- */

.guide-rail {
  grid-column: 1;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 28px 26px 30px 0;
}
.guide-rail::-webkit-scrollbar { display: none; }

/* La marge « On this page » vit dans cette colonne : elle ne colle plus
   elle-meme, c'est la colonne entiere qui colle. */
.guide-rail .rail {
  position: static;
  padding: 0;
  margin-top: 30px;
  max-height: none;
  overflow: visible;
}

.guide-search { display: flex; margin: 2px 0 24px; }
.guide-search .search-input { padding: 9px 11px; font-size: 0.875rem; }
.guide-search .search-btn { padding: 9px 13px; font-size: 0.8125rem; letter-spacing: 0.1em; }

.chapters__list { list-style: none; position: relative; }
.chapters .step { margin-left: 20px; }
.chapters__item.is-current .step { color: var(--fold); }
.chapters__item.is-current .step__n { color: var(--fold); font-weight: 700; }

/* --------------------------------------------------------------------------
   2. Le bandeau du guide : le fil d'ariane, en petites capitales
   -------------------------------------------------------------------------- */

/* Le carre de plis a quitte le bandeau pour la marge de la feuille : ces deux
   bandeaux n'ont plus qu'une colonne. */
.band--guide .band__in {
  padding-top: clamp(22px, 2.6vw, 34px);
  padding-bottom: clamp(20px, 2.4vw, 30px);
}

.band--home .band__in {
  padding-top: clamp(38px, 6vw, 74px);
  padding-bottom: clamp(34px, 5vw, 62px);
}
.band--home .lede { margin-top: 18px; color: var(--on-verm); }

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 13px;
  font-family: var(--sc);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--on-verm-2);
}
.crumb a {
  color: var(--on-verm-2);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.16s var(--ease-fold), border-color 0.16s var(--ease-fold);
}
.crumb a:hover { color: var(--fold); border-bottom-color: var(--fold); }
.crumb .crumb__cur { color: var(--fold); }
/* le separateur est un pli, pas un chevron */
.crumb__sep { width: 14px; height: 1px; background: rgba(246, 241, 233, 0.45); }

/* La note du panneau de langues : le guide n'existe qu'en anglais, les liens
   menent aux accueils du site. */
.lang-note {
  font-family: var(--sc);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--ink-fade);
  padding: 4px 20px 12px 34px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rule-fold);
}

/* --------------------------------------------------------------------------
   3. Le corps des articles
   -------------------------------------------------------------------------- */

/* Le H1 de l'article vit dans le panneau : un cran au-dessus du H2, en gras
   comme toutes les tetes de panneau, jamais en taille d'affichage. */
.panel .article-content h1 {
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.014em;
  color: var(--sumi);
  max-width: 28ch;
  text-wrap: balance;
  margin-bottom: 26px;
}

.article-content .article-section + .article-section {
  margin-top: clamp(30px, 3.6vw, 52px);
  padding-top: clamp(30px, 3.6vw, 52px);
  border-top: 1px solid var(--rule-fold);
}
.article-content .section-content > *:last-child { margin-bottom: 0; }

/* Quelques articles separent leur derniere note par un <hr> : le filet du monde,
   pas la barre en relief du navigateur. */
.article-content hr {
  border: 0;
  height: 1px;
  background: var(--rule-fold);
  margin: clamp(28px, 3.2vw, 44px) 0;
}

/* Les images d'article : meme traitement que les captures du site, un filet
   d'encre a 16 % et l'ombre decalee. */
.article-content img {
  max-width: min(100%, 780px);
  border: 1px solid rgba(26, 26, 26, 0.16);
  box-shadow: 8px 11px 28px rgba(26, 26, 26, 0.16);
  cursor: zoom-in;
  margin: 4px 0;
}
.article-content p > img { margin: 0; }

/* Encadres : papier washi cream, un filet vermillon FIN en haut, angles vifs.
   Ni bordure gauche epaisse, ni bleu, ni ombre : rien n'est empile ici. */
.article-content .note-box,
.article-content .callout-blue {
  background: var(--cream);
  border-top: 1px solid var(--vermilion);
  padding: 18px 22px 20px;
  margin: 26px 0;
  max-width: var(--measure);
}
.article-content .note-box > *:last-child,
.article-content .callout-blue > *:last-child { margin-bottom: 0; }

/* Le sommaire d'un chapitre : une liste numerotee en chiffres tabulaires,
   la meme colonne que les 32 etapes de la marge de l'accueil. */
.article-content .articleList {
  list-style: none;
  counter-reset: al;
  margin: 30px 0;
  max-width: var(--measure);
}
.article-content .articleList li {
  counter-increment: al;
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-fold);
}
.article-content .articleList li:first-child { border-top: 1px solid var(--rule-fold); }
/* Les 14 chapitres de l'accueil du guide : deux colonnes des que la page en a
   la place, sinon la liste laisse la moitie du panneau vide. */
@media (min-width: 901px) {
  .article-content .articleList--chapters {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(7, auto);
    column-gap: clamp(28px, 3.4vw, 56px);
    max-width: none;
  }
  /* 1 a 7 dans la colonne de gauche, 8 a 14 dans celle de droite : la 8e ouvre
     la seconde colonne et reprend donc le filet du haut. */
  .article-content .articleList--chapters li:nth-child(8) { border-top: 1px solid var(--rule-fold); }
}
.article-content .articleList li::before {
  content: counter(al);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--ink-fade);
  text-align: right;
}
.panel .article-content .articleList a {
  color: var(--vermilion-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(174, 51, 42, 0.38);
}
.panel .article-content .articleList a:hover { color: var(--sumi); border-bottom-color: var(--sumi); }

/* Les articles annonces au sommaire mais jamais publies : leur <li> n'a pas de
   lien, guide.js le marque et lui ajoute la mention. Le titre reste lisible,
   en gris de marge (5,7:1 sur le fold white du panneau), numero compris ; rien
   d'autre ne change, ni filet, ni fond, ni icone. */
.article-content .articleList li.is-unpublished { color: var(--ink-fade); }
/* guide.js reunit le titre et la mention dans un seul enfant : la colonne de
   droite de la grille ne compte qu'une cellule, la mention reste sur la ligne
   du titre au lieu de tomber sous le numero. */
.article-content .articleList .unpublished-title { grid-column: 2; }
.article-content .articleList .unpublished-note { white-space: nowrap;
  font-family: var(--sc);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--ink-fade);
}
.article-content .articleList .unpublished-note::before {
  content: '\00b7';
  margin: 0 0.5em 0 0.55em;
  letter-spacing: 0;
}

/* Pagination d'un chapitre : petites capitales, la page courante en fold white
   sur vermillon. */
.article-content .paginationButtons {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 20px;
  margin-top: clamp(30px, 3.6vw, 46px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--rule-fold);
}
.panel .article-content .pageButton {
  font-family: var(--sc);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--sumi);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule-fold);
  transition: border-color 0.16s var(--ease-fold);
}
.panel .article-content .pageButton:hover { border-bottom-color: var(--sumi); }
.panel .article-content .pageButton.active {
  color: var(--fold);
  background: var(--vermilion-deep);
  padding: 6px 15px;
  border-bottom-color: transparent;
}

/* Tableaux : les memes regles que le site. guide.js les enveloppe dans un
   .table-wrapper pour le defilement horizontal ; sans JavaScript le tableau
   garde sa mise en forme. */
.article-content table {
  width: 100%;
  margin: 30px 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.article-content .table-wrapper table { margin: 0; min-width: 620px; }
.article-content th,
.article-content td {
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(26, 26, 26, 0.13);
}
.article-content th {
  background: var(--sumi);
  color: var(--fold);
  font-family: var(--sc);
  font-weight: 400;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.article-content tbody tr:last-child td { border-bottom: 0; }
.article-content tbody tr:hover { background: rgba(174, 51, 42, 0.055); }

/* --------------------------------------------------------------------------
   4. Fin d'article : impression, PDF, partage
   -------------------------------------------------------------------------- */

.article-end {
  margin-top: clamp(34px, 4vw, 54px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--rule-fold);
}

.article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  max-width: none;
  margin-bottom: 30px;
}
.panel .article-actions a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sc);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--sumi);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--rule-fold);
  transition: border-color 0.16s var(--ease-fold);
}
.panel .article-actions a:hover { color: var(--sumi); border-bottom-color: var(--sumi); }
.article-actions .ic { flex: 0 0 auto; }

.share__title {
  font-family: var(--sc);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--ink-fade);
  margin-bottom: 13px;
}
.share__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  max-width: none;
  margin: 0;
}
.panel .share__links a {
  display: inline-flex;
  color: var(--ink-fade);
  text-decoration: none;
  transition: color 0.16s var(--ease-fold);
}
.panel .share__links a:hover { color: var(--sumi); }

.copy-notification {
  display: none;
  margin-top: 14px;
  font-family: var(--sc);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--vermilion-deep);
}
.copy-notification.show { display: block; }

/* --------------------------------------------------------------------------
   5. Visionneuse d'image et retour en haut
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 5vw, 64px);
  background: rgba(26, 26, 26, 0.9);
  cursor: zoom-out;
}
.lightbox[data-open] { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border: 10px solid var(--fold);
  background: var(--fold);
  box-shadow: 12px 16px 46px rgba(0, 0, 0, 0.5);
}

.to-top {
  position: fixed;
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fold);
  color: var(--sumi);
  font-family: var(--sc);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  padding: 9px 14px;
  text-decoration: none;
  box-shadow: 6px 8px 22px rgba(26, 26, 26, 0.3);
  transition: background-color 0.16s var(--ease-fold);
}
.to-top:hover { background: #fff; }
.to-top[hidden] { display: none; }

/* --------------------------------------------------------------------------
   6. Mobile et tablette
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* La marge passe sous le bandeau : la recherche pleine largeur, puis les 14
     chapitres en bande defilable, comme la marge des 32 etapes du site. */
  .guide-rail {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 14px var(--gutter) 12px;
    border-bottom: 1px solid var(--rule-verm);
  }
  .guide-search { margin: 0 0 12px; max-width: 430px; }
  .chapters {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
  }
  .chapters::-webkit-scrollbar { display: none; }
  .chapters__list { display: flex; width: max-content; gap: 0; }
  .chapters .step {
    margin-left: 0;
    grid-template-columns: auto auto;
    gap: 7px;
    padding: 6px 16px 6px 0;
    margin-right: 12px;
  }
  .chapters .step__label { max-width: 22ch; }
  .guide-rail .rail.toc { display: none; }

  .band--guide .band__in { gap: 18px; }

  .to-top { font-size: 0.6875rem; padding: 8px 12px; }
}

@media (max-width: 560px) {
  .article-content .articleList li { grid-template-columns: 2em minmax(0, 1fr); gap: 10px; }
  .article-content table { font-size: 0.875rem; }
  .to-top span { display: none; }
  .to-top { padding: 10px; }
}

/* --------------------------------------------------------------------------
   7. Impression
   -------------------------------------------------------------------------- */

@media print {
  .guide-rail, .article-end, .to-top, .lightbox, .crease-aside { display: none; }
  .crumb { color: #000; }
  .article-content img { box-shadow: none; }
  .article-content .note-box,
  .article-content .callout-blue { background: none; border-top: 1px solid #000; }
  .article-content th { background: none; color: #000; }
}