/* ==========================================================================
   Page /documentation. Se charge APRES home.css et tech.css, dont elle reprend
   l'en-tete, l'ouverture (tk-hero), le sommaire (tk-plan) et les sections (tk).
   Ici : les captures d'ecran, leurs legendes, la galerie et la loupe.
   ========================================================================== */

.dc-demo {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 28px 0 0; padding: 10px 16px;
  border: 1px solid rgba(180, 242, 26, 0.35); border-radius: 12px;
  background: rgba(180, 242, 26, 0.08);
  font-size: 0.9375rem; color: #d9e8cf;
}
.dc-demo svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--citron); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Sur cette page, tout s'aligne sur la largeur du corps (arborescence + contenu). */
.tete .cadre, .tk-hero .cadre, .appel .cadre, .pied .cadre { max-width: 1400px; }

/* Le corps : l'arborescence a gauche, fixe pendant la lecture ; le contenu a droite. */
.dc-corps { max-width: 1400px; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 48px; align-items: start; }
.dc-arbre { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; padding: 36px 4px 24px 0; scrollbar-width: thin; }
.dc-arbre summary {
  list-style: none; cursor: default; margin: 0 0 12px;
  font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vert-fonce);
}
.dc-arbre summary::-webkit-details-marker { display: none; }
.dc-arbre ol { margin: 0; padding: 0; list-style: none; counter-reset: arbre; }
.dc-arbre > details > nav > ol > li { counter-increment: arbre; margin: 2px 0; }
.dc-arbre a {
  display: block; padding: 6px 10px; border-radius: 8px; border-left: 3px solid transparent;
  font-size: 0.9375rem; font-weight: 700; line-height: 1.35; text-decoration: none; color: var(--encre);
}
.dc-arbre > details > nav > ol > li > a::before { content: counter(arbre) ". "; color: var(--vert-fonce); }
.dc-arbre ol ol { margin: 2px 0 8px 14px; padding-left: 8px; border-left: 1px solid var(--bord); }
.dc-arbre ol ol a { padding: 4px 10px; font-size: 0.875rem; font-weight: 500; color: var(--doux); }
.dc-arbre a:hover { background: var(--brume); color: var(--encre); }
.dc-arbre a.est-actif { border-left-color: var(--vert); background: var(--brume); color: var(--foret); }
.dc-arbre ol ol a.est-actif { font-weight: 700; }

.dc-contenu { min-width: 0; }
.dc-sec { padding: 56px 0; }
.dc-sec + .dc-sec { border-top: 1px solid var(--bord); }
.dc-contenu [id] { scroll-margin-top: 84px; }

/* Une section : le texte, puis la capture principale. */
.dc-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; align-items: start; margin-top: 36px; }
.dc-duo--inverse > :first-child { order: 2; }
.dc-duo h3 { margin: 0 0 10px; font-size: 1.1875rem; }
.dc-duo p { margin: 0 0 14px; color: var(--doux); }

.dc-etapes { margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.dc-etapes li { position: relative; margin: 0 0 16px; padding-left: 44px; color: var(--doux); counter-increment: etape; }
.dc-etapes li::before {
  content: counter(etape);
  position: absolute; top: 0; left: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--vert); color: #fff;
  font-size: 0.8125rem; font-weight: 800;
}
.dc-etapes b, .dc-points b { color: var(--encre); }

.dc-points { margin: 0; padding: 0; list-style: none; }
.dc-points li { position: relative; margin: 0 0 12px; padding-left: 22px; color: var(--doux); }
.dc-points li::before { content: ""; position: absolute; top: 0.62em; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--vert); }

/* La capture : cadre de navigateur leger, ombre, legende. */
.dc-capture { margin: 0; }
.dc-capture button {
  display: block; width: 100%; padding: 0; border: 1px solid var(--bord); border-radius: 14px;
  overflow: hidden; background: var(--brume); cursor: zoom-in;
  box-shadow: 0 18px 40px -22px rgba(10, 36, 16, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dc-capture button:hover, .dc-capture button:focus-visible { transform: translateY(-2px); box-shadow: 0 24px 48px -22px rgba(10, 36, 16, 0.55); }
.dc-capture button:focus-visible { outline: 3px solid var(--citron); outline-offset: 3px; }
.dc-capture img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 900; }
.dc-capture figcaption { margin-top: 10px; font-size: 0.875rem; line-height: 1.45; color: var(--doux); }

.dc-galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; margin-top: 40px; }
.dc-galerie--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dc-galerie h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.dc-galerie p { margin: 0 0 14px; font-size: 0.9375rem; color: var(--doux); }

/* Les adresses des developpeurs. */
.dc-adresses { margin: 18px 0 0; padding: 0; list-style: none; border: 1px solid var(--bord); border-radius: 14px; overflow: hidden; }
.dc-adresses li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 12px 18px; border-top: 1px solid var(--bord); font-size: 0.9375rem; }
.dc-adresses li:first-child { border-top: 0; }
.dc-adresses span { color: var(--doux); }
.dc-adresses code { overflow-wrap: anywhere; font-family: var(--mono); font-size: 0.8125rem; color: var(--foret); }

/* La loupe. */
.dc-loupe {
  position: fixed; inset: 0; z-index: 50;
  display: none; align-items: center; justify-content: center;
  padding: 24px; background: rgba(7, 26, 11, 0.86); cursor: zoom-out;
}
.dc-loupe.est-ouverte { display: flex; }
.dc-loupe figure { margin: 0; max-width: min(1440px, 100%); }
.dc-loupe img { display: block; max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.dc-loupe figcaption { margin-top: 12px; text-align: center; font-size: 0.9375rem; color: #d9e8cf; }
.dc-loupe-fermer {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}

@media (max-width: 1280px) {
  .dc-duo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .dc-duo--inverse > :first-child { order: 0; }
}
/* Ecran etroit : l'arborescence passe en haut, repliee, et ne suit plus la lecture. */
@media (max-width: 960px) {
  .dc-corps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dc-arbre { position: static; max-height: none; overflow: visible; margin-top: 20px; padding: 0;
              border: 1px solid var(--bord); border-radius: 14px; background: var(--brume); }
  .dc-arbre summary { cursor: pointer; margin: 0; padding: 14px 18px; display: flex; justify-content: space-between; }
  .dc-arbre summary::after { content: "+"; font-size: 1.125rem; line-height: 1; }
  .dc-arbre details[open] summary::after { content: "−"; }
  .dc-arbre nav { padding: 0 10px 14px; }
  .dc-sec { padding: 40px 0; }
  .dc-duo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .dc-duo--inverse > :first-child { order: 0; }
  .dc-galerie--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dc-galerie, .dc-galerie--trois { grid-template-columns: minmax(0, 1fr); }
  .dc-adresses li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dc-demo { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-capture button { transition: none; }
}