/* Fiches de support — une par écran de DERFA.
   Reprend les jetons du guide (index.html) : mêmes couleurs, même thème
   système. La feuille est partagée par les 23 fiches, plutôt qu'inlinée
   23 fois. */
:root{
  --fond:#EFE9DD; --papier:#F5F1E8; --trait:#C9C0AB; --trait2:#DDD5C4;
  --encre:#15130E; --encre2:#3A352B; --encre3:#6E6757; --encre4:#9B9379;
  --vert:#1F6B3F; --ocre:#8A6A1E; --brique:#9A3324; --violet:#5B4B8A;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --fond:#14120E; --papier:#1C1915; --trait:#3A352A; --trait2:#2A251E;
    --encre:#EFE9DD; --encre2:#D6CDBA; --encre3:#A39A85; --encre4:#7C7462;
    --vert:#4E9B6B; --ocre:#C9A24A; --brique:#C86B58; --violet:#9587C4;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6;
}
a{color:var(--accent,var(--vert))}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent,var(--vert)); outline-offset:2px}

header.top{
  position:sticky; top:0; z-index:20; background:var(--fond);
  border-bottom:1px solid var(--trait); padding:12px 24px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.marque{font-size:19px; font-weight:800; letter-spacing:-.4px; color:var(--encre); text-decoration:none}
.marque span{font-weight:400; color:var(--encre3); font-size:13px; letter-spacing:0; margin-left:7px}
.retour{margin-left:auto; font-size:14px}

.page{max-width:880px; margin:0 auto; padding:28px 24px 80px}

.fil{font-size:13px; color:var(--encre3); margin:0 0 14px}
.fil a{color:var(--encre3)}
h1{font-size:30px; letter-spacing:-.5px; margin:0 0 10px; line-height:1.2}
.ou{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  font-size:13.5px; color:var(--encre3); margin:0 0 18px;
}
.puce{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; padding:2px 8px; border-radius:3px; border:1px solid currentColor;
  color:var(--accent);
}
.but{
  font-size:17px; line-height:1.55; color:var(--encre); margin:0 0 24px;
  border-left:3px solid var(--accent); padding-left:16px;
}

/* Le renvoi vers la démonstration. Un lien, pas un script. */
.demo{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  background:var(--papier); border:1px solid var(--trait); border-left:3px solid var(--accent);
  border-radius:5px; padding:12px 14px; margin:0 0 24px;
}
.demo-btn{
  display:inline-block; padding:7px 14px; border-radius:4px; text-decoration:none;
  font-size:14px; font-weight:600; color:var(--accent);
  border:1px solid var(--accent); background:transparent; white-space:nowrap;
}
.demo-btn:hover{background:var(--accent); color:var(--fond)}
.demo-dit{font-size:13px; color:var(--encre3); flex:1 1 260px; min-width:0}
.demo-note{font-size:13px; color:var(--encre2); flex:1 1 100%}
.demo-non{font-size:13.5px; color:var(--encre3); margin:0 0 24px; font-style:italic}

h2{
  font-size:13px; text-transform:uppercase; letter-spacing:1.2px; color:var(--encre3);
  margin:32px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--trait);
}
h2:first-of-type{margin-top:0}

.flux{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 4px}
.flux > div{background:var(--papier); border:1px solid var(--trait); border-radius:5px; padding:12px 14px}
.flux .l{font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--encre3); margin-bottom:4px}
.flux p{margin:0; font-size:14.5px}
@media (max-width:640px){.flux{grid-template-columns:1fr}}

.tableau{overflow-x:auto; background:var(--papier); border:1px solid var(--trait); border-radius:5px}
table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px}
th{
  text-align:left; padding:9px 14px; font-size:11px; text-transform:uppercase;
  letter-spacing:.8px; color:var(--encre3); border-bottom:1px solid var(--trait);
  white-space:nowrap; background:var(--trait2);
}
td{padding:9px 14px; border-bottom:1px solid var(--trait2); vertical-align:top}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:650; color:var(--encre)}
td.rien{color:var(--encre4)}

.piege{
  border-left:3px solid var(--ocre); background:var(--papier);
  padding:12px 16px; margin:0 0 10px; font-size:14.5px;
}
.piege.attention{border-left-color:var(--brique)}
.piege b{display:block; margin-bottom:3px; color:var(--encre)}

.aussi{display:flex; gap:8px; flex-wrap:wrap; margin:0}
.aussi a{
  display:inline-block; padding:5px 12px; background:var(--papier);
  border:1px solid var(--trait); border-radius:4px; font-size:14px; text-decoration:none;
}
.aussi a:hover{border-color:var(--accent)}

footer{border-top:1px solid var(--trait); padding:22px 24px; text-align:center;
  color:var(--encre3); font-size:13px}

/* Sommaire des fiches */
.groupes{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin:0 0 8px}
.groupe{background:var(--papier); border:1px solid var(--trait); border-top:3px solid var(--accent);
  border-radius:5px; padding:16px 18px}
.groupe h3{margin:0 0 2px; font-size:16px}
.groupe .adr{font-size:12px; color:var(--encre3); margin:0 0 10px; word-break:break-all}
.groupe ul{margin:0; padding-left:18px; font-size:14.5px}
.groupe li{margin-bottom:5px}