/* pf-dsi.css — feuille de la page publique /dsi (dsi.html), fiche technique pour les DSI.
   Reprise de la maquette validée le 06/11/2026 (_proto-landing-stripe/style.css) : seules
   les règles que la page utilise. Autonome : aucune dépendance aux feuilles de la vitrine.
   La CSP de /dsi interdit tout style inline : les anciens style="" de la maquette sont
   devenus des règles ici (sprite, barre du haut, largeur 1320 px, lien actif, icônes, h1).
   Chargée par empreinte ?v= (verrou [DSI-02], tests/regression/dsi-page-publique.test.js).
   07/11 : couleurs et police de la charte commune (pf-marque.css, chargée AVANT) ; les
   jetons ci-dessous ne font que pointer sur les --pf-*. Mona Sans remplacée par Plus
   Jakarta Sans (verrou [CHARTE-03/04], tests/regression/charte-commune.test.js). */

:root{
  --ink:var(--pf-texte); --ink-2:var(--pf-texte-2); --ink-3:var(--pf-texte-3);
  --line:var(--pf-trait); --line-2:color-mix(in srgb,var(--pf-trait) 70%,var(--pf-encre-3));
  --ground:var(--pf-fond); --ground-2:var(--pf-fond-2); --navy:var(--pf-texte); --card:var(--pf-surface);
  --accent:var(--pf-lien); --accent-soft:var(--pf-accent-fond);
  --logo:var(--pf-logo);
  --sans:var(--pf-police); --mono:var(--pf-mono);
}
*{box-sizing:border-box;margin:0}
html{color:var(--ink);background:var(--ground);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 32px}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* barre de navigation */
.nav{position:relative;z-index:3;border-bottom:1px solid var(--line)}
/* filet du haut, dégradé du logo, partagé avec .aside */
.nav::before,.aside::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--logo)}
.nav .wrap{display:flex;align-items:center;gap:36px;height:76px}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:18px;letter-spacing:-.01em}
.brand img{width:30px;height:30px;border-radius:8px;object-fit:cover;object-position:50% 46%;background:var(--pf-encre)}
.nav ul{display:flex;gap:28px;list-style:none;padding:0;font-size:15px;font-weight:500;color:var(--ink-2)}
.nav ul a:hover{color:var(--ink)}
.nav ul a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav .right{margin-left:auto;display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font:600 15px/1 var(--sans);border:1px solid transparent;cursor:pointer;transition:background .2s,box-shadow .2s;white-space:nowrap}
.btn.primary{background:var(--pf-bouton-fond);color:var(--pf-bouton-texte)}
.btn.primary:hover{background:var(--pf-bouton-survol)}
.btn.ghost{color:var(--ink);background:transparent}
.btn.ghost:hover{background:var(--ground-2)}

/* titres et textes */
h1{font-size:64px;line-height:1.02;letter-spacing:-.035em;font-weight:700;text-wrap:balance;color:var(--navy)}
.lede{margin-top:22px;font-size:20px;line-height:1.5;color:var(--ink-2);max-width:34ch}
h2{font-size:40px;line-height:1.1;letter-spacing:-.03em;font-weight:680;color:var(--navy);text-wrap:balance;max-width:22ch}
code{font:13.5px var(--mono);background:var(--ground-2);border:1px solid var(--line);padding:1px 6px;border-radius:5px;color:var(--ink)}
pre{font:12.5px/1.65 var(--mono);background:var(--pf-code-fond);color:#cfe0f2;border-radius:10px;padding:16px 18px;overflow:hidden;position:relative}
.pre-k{color:#8fd3ff}.pre-s{color:#b8f2c6}

/* page : trois colonnes (sommaire, texte, résumé) */
.doc{display:grid;grid-template-columns:230px minmax(0,1fr) 300px;gap:56px;padding-top:40px;padding-bottom:80px}
.toc{position:sticky;top:24px;align-self:start;font-size:14.5px}
.toc p{font-size:12.5px;font-weight:650;color:var(--ink-3);margin:22px 0 8px}
.toc p:first-child{margin-top:0}
.toc a{display:block;padding:5px 10px;margin-left:-10px;border-radius:6px;color:var(--ink-2)}
.toc a.on{background:var(--accent-soft);color:var(--pf-accent);font-weight:600}
.doc h1{font-size:46px;max-width:20ch;margin-top:14px}
.doc .lede{max-width:58ch;font-size:18.5px}
.doc h2{font-size:26px;margin-top:60px;padding-top:4px;max-width:none}
.doc h2:first-of-type{margin-top:48px}
.doc p.t{margin-top:12px;color:var(--ink-2);max-width:68ch}
.crumb{font-size:14px;color:var(--ink-3);display:flex;gap:8px;align-items:center}
.crumb a{color:var(--accent);font-weight:600}
.crumb svg.i{width:15px;height:15px;vertical-align:-3px}
.meta{display:flex;gap:18px;margin-top:20px;font-size:13.5px;color:var(--ink-3)}
.meta span{display:flex;gap:6px;align-items:center}
.meta svg.i{width:15px;height:15px}

/* schéma du trajet */
.path{margin-top:22px;border:1px solid var(--line);border-radius:14px;padding:26px;background:linear-gradient(180deg,var(--ground-2),color-mix(in srgb,var(--pf-turquoise) 8%,var(--pf-fond)))}
.path svg{width:100%;height:auto;display:block}
/* couleurs du schéma : classes plutôt qu'attributs fill/stroke, pour suivre la charte */
.path svg g{font-family:var(--sans);fill:var(--ink)}
.path .n{fill:var(--card);stroke:var(--line-2)}
.path .f{fill:color-mix(in srgb,var(--pf-lien) 12%,var(--pf-fond));stroke:var(--pf-lien)}
.path .ft{fill:var(--pf-lien)}
.path .fs{fill:var(--ink-2)}
.path .s{fill:var(--ink-3)}
.path .l{stroke:var(--ink-3)}
.path marker .l{fill:var(--ink-3);stroke:none}
.path .d{fill:var(--pf-encre)}
.path .dt{fill:var(--pf-blanc)}
.path .ds{fill:var(--pf-lilas)}

/* tableaux de faits */
table.facts{margin-top:18px;width:100%;border-collapse:collapse;font-size:14.5px}
table.facts th{text-align:left;font-size:12.5px;font-weight:650;color:var(--ink-3);padding:10px 14px;border-bottom:1px solid var(--line-2)}
table.facts td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
table.facts td:first-child{color:var(--ink);font-weight:560}
.yes,.no{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13.5px}
.yes{color:var(--pf-accent)}.no{color:var(--ink-3)}
td,dd{font-variant-numeric:tabular-nums}

/* commande à vérifier */
.check{margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.check .h{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.check pre{border-radius:0;white-space:pre-wrap;word-break:break-all}

/* limites connues */
.limits{margin-top:16px;display:grid;gap:12px}
.limits div{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.limits svg{color:var(--pf-alerte);margin-top:2px}
.limits strong{display:block;color:var(--ink);font-weight:620}
.limits span{color:var(--ink-2);font-size:15px}

/* résumé pour la revue */
.aside{position:sticky;top:24px;align-self:start;border:1px solid var(--line);border-top:0;overflow:hidden;border-radius:14px;padding:22px;background:var(--card);box-shadow:0 18px 40px -26px color-mix(in srgb,var(--pf-encre) 30%,transparent)}
.aside h3{font-size:15px;color:var(--navy)}
.aside dl{margin-top:14px;display:grid;gap:12px;font-size:14px}
.aside dt{color:var(--ink-3);font-size:12.5px}
.aside dd{color:var(--ink);font-weight:560}
.aside .btn{margin-top:18px;width:100%;justify-content:center}
.aside small{display:block;margin-top:10px;color:var(--ink-3);font-size:12.5px;text-align:center}

/* pied de page */
footer{border-top:1px solid var(--line);padding:34px 0 46px;font-size:14px;color:var(--ink-3)}
footer .wrap{display:flex;gap:28px;align-items:center}
footer .wrap span:first-child{margin-right:auto}

/* téléphone */
@media (max-width:760px){
  .wrap{padding:0 20px}
  .nav ul,.nav .btn.ghost{display:none}
  .nav .wrap{height:64px}
  .lede{font-size:17.5px}
  h2{font-size:30px}
  footer .wrap{flex-wrap:wrap;gap:14px 20px}
  .doc{grid-template-columns:1fr;gap:28px}
  .toc{position:static}
  .aside{position:relative;top:0}
  .doc h1{font-size:34px}
}

/* impression (Ctrl+P) : la fiche seule, sans navigation */
@media print{
  .nav,.toc,.aside .btn,.aside small,footer{display:none}
  .doc{display:block;padding:0}
  .aside{position:relative;top:0;box-shadow:none;margin-top:32px;break-inside:avoid}
  .limits div,table.facts tr,.check{break-inside:avoid}
}