/* La page docs emprunte l'identité de la carte sans en emprunter la mise en
   scène : ici on lit, on ne navigue pas. Colonne étroite, fond papier, une
   seule voix. */
body.docs{
  background:var(--wpx-paper); color:var(--wpx-ink);
  font-family:var(--wpx-font); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.doc{ max-width:760px; margin:0 auto; padding:0 24px 96px; }

.doc-barre{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 0 0; margin-bottom:56px;
}
.doc-retour{
  font-size:14px; font-weight:600; color:var(--wpx-muted-strong);
  text-decoration:none; display:inline-flex; align-items:center; gap:7px;
}
.doc-retour:hover{ color:var(--wpx-ink); }
.doc-retour svg{ width:15px; height:9px; fill:none; stroke:currentColor; stroke-width:1.7; }
.doc-langue{ font-size:13px; color:var(--wpx-muted); }

.doc h1{
  font-size:clamp(34px,5.2vw,48px); line-height:1.1; font-weight:800;
  letter-spacing:-.022em; margin:0 0 18px;
}
.doc-chapo{ font-size:20px; line-height:1.5; color:var(--wpx-muted-strong); margin:0 0 8px; }

.doc h2{
  font-size:26px; line-height:1.25; font-weight:700; letter-spacing:-.015em;
  margin:64px 0 16px; padding-top:26px; border-top:var(--wpx-stroke) solid rgba(26,24,20,.13);
}
.doc h3{ font-size:19px; font-weight:700; margin:34px 0 10px; letter-spacing:-.01em; }
.doc p{ margin:0 0 16px; }
.doc ul{ margin:0 0 16px; padding-left:22px; }
.doc li{ margin-bottom:7px; }
.doc a{ color:var(--wpx-ocean); text-underline-offset:3px; }
.doc strong{ font-weight:650; }

/* Les outils. Un bloc par outil, le nom en machine, le reste en français. */
.outil{
  border:var(--wpx-stroke) solid rgba(26,24,20,.15); border-radius:var(--wpx-radius);
  padding:22px 24px; margin:0 0 18px; background:rgba(255,255,255,.42);
}
.outil-nom{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:15.5px; font-weight:600;
  margin:0 0 4px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.outil-sceau{
  font-family:var(--wpx-font); font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 9px; border-radius:var(--wpx-radius-pill);
  background:rgba(44,92,116,.12); color:var(--wpx-ocean);
}
.outil-sceau--lecture{ background:rgba(126,94,0,.13); color:var(--wpx-gold-text); }
.outil p{ margin:0 0 12px; font-size:16px; }
.outil p:last-child{ margin-bottom:0; }
.outil dl{ margin:0; font-size:15px; }
.outil dt{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:600;
  margin-top:10px; font-size:14px;
}
.outil dd{ margin:2px 0 0; color:var(--wpx-muted-strong); }
.outil dd em{ font-style:normal; color:var(--wpx-noise-text); font-size:13px; }

pre.exemple{
  background:var(--wpx-lacquer); color:#E8E2D4; border-radius:var(--wpx-radius);
  padding:18px 20px; overflow-x:auto; font-size:13.5px; line-height:1.55;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; margin:0 0 16px;
}
pre.exemple b{ color:var(--wpx-gold); font-weight:600; }

.doc-avis{
  border-left:3px solid var(--wpx-ocean); padding:2px 0 2px 18px;
  margin:0 0 16px; color:var(--wpx-muted-strong);
}

.doc-pied{
  margin-top:72px; padding-top:26px;
  border-top:var(--wpx-stroke) solid rgba(26,24,20,.13);
  font-size:15px; color:var(--wpx-muted-strong);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px;
}
.doc-pied a{ font-weight:600; }
/* Le nom du produit est un logo, pas un libellé : même règle que sur la carte. */
.doc-marque{ width:104px; color:var(--wpx-muted-strong); }
.doc-retour:hover .doc-marque{ color:var(--wpx-ink); }

/* Le sommaire. Une documentation de référence se consulte par entrées, pas en
   la lisant du début à la fin : il faut voir tout de suite ce qu'elle couvre. */
.doc-sommaire{
  display:flex; flex-wrap:wrap; gap:8px 10px; margin:26px 0 8px;
  padding:20px 0 0; border-top:var(--wpx-stroke) solid rgba(26,24,20,.13);
}
.doc-sommaire a{
  font-size:14px; text-decoration:none; color:var(--wpx-muted-strong);
  border:var(--wpx-stroke) solid rgba(26,24,20,.18); border-radius:var(--wpx-radius-pill);
  padding:6px 14px;
}
.doc-sommaire a:hover{ color:var(--wpx-ink); border-color:var(--wpx-ocean); background:rgba(255,255,255,.6); }

/* Les gestes à faire dans Notion : numérotés, parce que l'ordre compte. */
.doc-etapes{ margin:0 0 16px; padding-left:22px; }
.doc-etapes li{ margin-bottom:9px; }
.doc-etapes li::marker{ color:var(--wpx-ocean); font-weight:700; }

/* Les problèmes fréquents : la question en gras, la réponse en dessous. */
.doc-qr{ margin:0 0 16px; }
.doc-qr dt{ font-weight:650; margin-top:18px; }
.doc-qr dd{ margin:5px 0 0; color:var(--wpx-muted-strong); }

/* Ce qu'on écrit à un agent, présenté comme on l'écrirait. */
.doc-prompts{ list-style:none; margin:0 0 16px; padding:0; }
.doc-prompts li{
  margin-bottom:9px; padding:11px 16px; font-size:16px; line-height:1.45;
  background:var(--wpx-ocean); color:var(--wpx-paper);
  border-radius:var(--wpx-radius) var(--wpx-radius) var(--wpx-radius) 4px;
  display:inline-block; max-width:100%;
}

/* Une cible d'ancre ne doit pas se coller au bord haut de la fenêtre. */
.doc h2[id], .doc h3[id]{ scroll-margin-top:24px; }

/* Dans la barre de la documentation, la pastille se pose dans le flux. */
.doc-barre .wpx-lang{ position:static; }

/* ---------- Le sommaire vivant ----------
   Porté du site (grand-hall) : même géométrie, même pilote. Les nombres sont
   recalés sur cette colonne, qui fait 760px et non 704 : demi-colonne 380,
   plus 44 d'écart, d'où le décalage et la largeur disponible.

   En dessous de 1200px il n'y a pas de marge où le poser : il disparaît, et
   les pastilles du haut de page reprennent seules le travail. */
.doc-somm{ display:none; }

@media (min-width:1200px){
  .doc-somm{
    display:block; position:fixed; z-index:40;
    top:50%; transform:translateY(-50%);
    left:calc(50% + 380px + 44px);
    width:min(228px, calc(50vw - 428px));
    opacity:0; visibility:hidden;
    transition:opacity .45s ease, visibility .45s ease;
  }
  /* posé par le script quand le corps de la page occupe l'écran */
  .doc-somm.is-on{ opacity:1; visibility:visible; }

  .doc-somm__titre{
    margin:0 0 12px; font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--wpx-muted);
  }
  .doc-somm__corps{ position:relative; padding-left:24px; }
  .doc-somm__rail{
    position:absolute; left:4px; top:7px; bottom:7px; width:1px;
    background:rgba(26,24,20,.16);
  }
  /* LE PILOTE : le même disque de 9px que sur les éditions et les cas
     clients, rouge bruit, qui vire à l'or sur la dernière section.
     top:5px le centre sur une ligne de 18,85px (13px x 1,45). */
  .doc-somm__pastille{
    position:absolute; left:0; top:5px;
    width:9px; height:9px; border-radius:50%;
    background:var(--wpx-noise);
    transition:transform .38s cubic-bezier(.4,0,.2,1), background-color .38s ease;
  }
  .doc-somm__pastille[data-bout="fin"]{ background:var(--wpx-gold); }

  .doc-somm__liste{ list-style:none; margin:0; padding:0; }
  .doc-somm__i{ margin:0 0 11px; }
  .doc-somm__i:last-child{ margin-bottom:0; }
  .doc-somm__i a{
    display:block; font-size:13px; line-height:1.45;
    color:var(--wpx-ink); text-decoration:none;
    border:0; opacity:.62; transition:opacity .25s ease;
  }
  .doc-somm__i a:hover{ opacity:1; }
  .doc-somm__i.is-on a{ opacity:1; font-weight:500; }

  /* l'ancre ne colle pas au bord haut de la fenêtre */
  .doc h2{ scroll-margin-top:24px; }
}

@media (prefers-reduced-motion:reduce){
  .doc-somm{ transition:none; }
  .doc-somm__pastille{ transition:none; }
}