/* Partage Facile : une page qui se lit comme un mode d'emploi. Le bleu vient du menu du programme. */

:root {
  --fond: #ffffff;
  --fond-2: #f3f4f6;
  --texte: #1c1f26;
  --doux: #5b6270;
  --trait: #d9dce3;
  --bleu: #2450c9;
  --sur-bleu: #ffffff;
  --marge: clamp(16px, 4vw, 64px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #16181d;
    --fond-2: #20232a;
    --texte: #e8eaee;
    --doux: #a3a9b5;
    --trait: #383c46;
    --bleu: #8fb0ff;
    --sur-bleu: #10131a;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 1rem/1.6 "Segoe UI", system-ui, -apple-system, "Noto Sans", sans-serif; overflow-wrap: break-word; }
body.sans-defilement { overflow: hidden; }

a { color: var(--bleu); }
img { display: block; max-width: 100%; height: auto; }
code, kbd { font: .9em ui-monospace, Consolas, Menlo, monospace; }
code { overflow-wrap: anywhere; }
kbd { padding: 0 .35em; border: 1px solid var(--trait); border-bottom-width: 2px; border-radius: 3px; background: var(--fond-2); white-space: nowrap; }

h1, h2, h3 { line-height: 1.25; margin: 0; }
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing: -.01em; margin-bottom: .5em; }
h2 { font-size: 1.6rem; padding-bottom: .35em; border-bottom: 3px solid var(--bleu); margin-bottom: 1em; }
h3 { font-size: 1.1rem; margin: 1.6em 0 .5em; }
p, ul { margin: 0 0 1em; max-width: 75ch; }
ul { padding-left: 1.2em; }
li { margin-bottom: .6em; }

/* ---------- La page : sommaire à gauche, contenu à droite ---------- */

.page { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); padding: 0 var(--marge); }
.sommaire { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; padding: 2rem 0; }
.sommaire .nom { display: flex; align-items: center; gap: .55em; font-weight: 700; color: var(--texte); text-decoration: none; margin-bottom: 1.2rem; }
.sommaire ol { list-style: none; margin: 0; padding: 0; counter-reset: partie; }
.sommaire li { counter-increment: partie; margin: 0; border-top: 1px solid var(--trait); }
.sommaire li a { display: block; padding: .45em 0; color: var(--texte); text-decoration: none; }
.sommaire li a::before { content: counter(partie) ". "; color: var(--doux); }
.sommaire li a:hover { color: var(--bleu); text-decoration: underline; }
.sommaire-version { margin: 1rem 0 0; color: var(--doux); font-size: .9rem; }

main { min-width: 0; padding: 2rem 0 0; }
section { margin-top: clamp(3rem, 6vw, 5rem); }

/* ---------- Le haut ---------- */

.haut { display: grid; grid-template-columns: minmax(0, 44ch) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.intro { font-size: 1.2rem; line-height: 1.5; }
.actions { margin: 1.4em 0 .6em; }
.petit { color: var(--doux); font-size: .92rem; }

.btn { display: inline-block; padding: .55em 1.1em; background: var(--bleu); color: var(--sur-bleu); font-weight: 600; text-decoration: none; border-radius: 4px; }
.btn:hover { text-decoration: underline; }
.btn-discret { padding: 0; background: none; color: var(--bleu); font-weight: 400; text-decoration: underline; white-space: nowrap; border-radius: 0; }

/* ---------- Les étapes et les écrans ---------- */

.etape { display: grid; grid-template-columns: minmax(0, 60ch) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; margin-bottom: 2.5rem; }
.etape h3 { margin-top: 0; }
.chiffre { display: inline-block; min-width: 1.7em; margin-right: .35em; padding: 0 .4em; background: var(--bleu); color: var(--sur-bleu); text-align: center; border-radius: 3px; }

.ecran { margin: 0; }
.ecran a { display: block; border: 1px solid var(--trait); cursor: zoom-in; }
.ecran img { width: 100%; }
figcaption { margin-top: .5em; color: var(--doux); font-size: .92rem; max-width: 75ch; }
.etape .ecran .ecran, .etape div > .ecran { margin-top: 1.2em; max-width: 34rem; }

.rangee { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.6em clamp(16px, 2vw, 32px); margin: 1.4em 0; }
.rangee.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.suite { display: grid; grid-template-columns: minmax(0, 60ch) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; margin-top: 2em; }
.telephones { display: grid; grid-template-columns: repeat(3, minmax(0, 13rem)); gap: clamp(8px, 1vw, 16px); }
.telephones a { display: block; border: 1px solid var(--trait); cursor: zoom-in; }

/* ---------- Le détail ---------- */

.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1rem clamp(24px, 3vw, 56px); align-items: start; }
.colonnes > div > h3:first-child { margin-top: 0; }

.tableau { overflow-x: auto; margin: 0 0 1em; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .5em .7em .5em 0; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
tbody th { font-weight: 600; }
thead th { border-bottom: 2px solid var(--texte); }
.touches th { white-space: nowrap; }

.menu-admin { margin-bottom: 1em; }
.menu-admin th { white-space: nowrap; padding-right: 1.2em; }

/* ---------- Questions ---------- */

.questions { max-width: 85ch; }
details { border-bottom: 1px solid var(--trait); }
summary { padding: .6em 0; font-weight: 600; cursor: pointer; }
details p { margin: 0 0 1em; }

/* ---------- Téléchargements ---------- */

.paquets small { display: block; color: var(--doux); font-weight: 400; }
.systeme-empreinte code { display: block; min-width: 18ch; font-size: .78rem; }
.paquets .recommande { background: var(--fond-2); }
.paquets .recommande th::after { content: "C'est ton ordinateur"; display: block; color: var(--bleu); font-size: .88em; }
.paquets td, .paquets th { padding-left: .5em; }

.historique th { white-space: nowrap; }
.historique td:nth-child(2) { white-space: nowrap; color: var(--doux); }

.pied { margin-top: 4rem; padding: 1.2rem 0 2rem; border-top: 1px solid var(--trait); color: var(--doux); font-size: .92rem; }
.pied p { margin: 0; }

/* ---------- Agrandir une image ---------- */

.loupe { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 3vh 3vw; background: rgb(0 0 0 / .86); cursor: zoom-out; }
.loupe[hidden] { display: none; }
.loupe img { max-width: 100%; max-height: 94vh; width: auto; cursor: default; }
.loupe button { position: absolute; top: 12px; right: 12px; padding: .3em .8em; font: inherit; color: #fff; background: #000; border: 1px solid #777; cursor: pointer; }

/* ---------- Page d'erreur ---------- */

.erreur-page { padding: 3rem var(--marge); }

/* ---------- Écrans moins larges ---------- */

@media (max-width: 1500px) {
  .haut, .etape { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .suite { grid-template-columns: minmax(0, 1fr); }
  .telephones { max-width: 40rem; }
}
@media (max-width: 1150px) {
  .page { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sommaire { position: static; max-height: none; padding: 1rem 0 0; border-bottom: 1px solid var(--trait); }
  .sommaire ol { display: flex; flex-wrap: wrap; gap: .1em 1em; padding-bottom: .8rem; }
  .sommaire li { border: 0; }
  .sommaire li a { padding: .2em 0; }
  .sommaire-version { display: none; }
  main { padding-top: 1.5rem; }
  .haut, .etape { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .rangee, .rangee.trois { grid-template-columns: minmax(0, 1fr); }
  .menu-admin th { white-space: normal; }
  .historique td:nth-child(2) { white-space: normal; }
  body { font-size: .97rem; }
}