:root {
  --fond: #fbfaf8; --encre: #1a1a18; --doux: #6b6a66; --trait: #e0ddd6;
  --accent: #7a3b2e; --bloc: #f3f0ea;
  --serif: ui-serif, Georgia, "Iowan Old Style", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --fond:#141413; --encre:#eceae5; --doux:#9a9891; --trait:#2e2d2a;
          --accent:#d98b72; --bloc:#1e1d1b; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--fond); color:var(--encre);
       font-family:var(--sans); font-size:17px; line-height:1.6;
       -webkit-text-size-adjust:100%; }
.enveloppe { max-width:38rem; margin:0 auto; padding:2.5rem 1.25rem 4rem; }
a { color:inherit; }
h1,h2,h3 { line-height:1.2; letter-spacing:-0.01em; font-weight:650; }
h1 { font-size:1.9rem; margin:0 0 .4rem; }
h2 { font-size:1.15rem; margin:2.5rem 0 .75rem; }
p { margin:0 0 1rem; }
.doux { color:var(--doux); }
.petit { font-size:.85rem; }

/* En-tete */
.marque { display:block; text-decoration:none; margin-bottom:2rem; }
.marque b { display:block; font-size:1.05rem; letter-spacing:-0.01em; }
.marque span { display:block; font-size:.8rem; color:var(--doux);
               font-family:var(--mono); }

/* La distinction — signature typographique */
.distinction { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  font-family:var(--serif); font-size:1.35rem; margin:1.5rem 0 2rem;
  padding:1.1rem 1.2rem; border:1px solid var(--trait); border-radius:2px; }
.distinction i { font-style:normal; }
.distinction em { font-style:normal; color:var(--accent); font-weight:700;
                  font-family:var(--sans); font-size:1.5rem; line-height:1; }

/* Le bloc citation — l'identite visuelle de la chaine */
.source { border-left:3px solid var(--accent); background:var(--bloc);
          padding:1.1rem 1.2rem; margin:1.5rem 0; border-radius:0 2px 2px 0; }
.source .etiquette { font-family:var(--mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--doux);
  display:block; margin-bottom:.6rem; }
.source blockquote { margin:0 0 .8rem; font-family:var(--serif);
  font-size:1.05rem; line-height:1.5; }
.source .provenance { font-size:.8rem; color:var(--doux); }
.source .provenance a { text-decoration-color:var(--trait); }

table { width:100%; border-collapse:collapse; font-size:.92rem; margin:1rem 0; }
th,td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--trait); }
th { font-weight:600; font-size:.78rem; text-transform:uppercase;
     letter-spacing:.06em; color:var(--doux); }
.defilable { overflow-x:auto; }

/* Listes de liens */
.liens { list-style:none; padding:0; margin:1rem 0; }
.liens li { border-bottom:1px solid var(--trait); }
.liens a { display:flex; justify-content:space-between; gap:1rem;
  padding:.85rem 0; text-decoration:none; align-items:baseline; }
.liens a:hover { color:var(--accent); }
.liens .quoi { color:var(--doux); font-size:.85rem; text-align:right; }

.numero { font-family:var(--mono); font-size:.75rem; color:var(--doux); }

/* Formulaire */
form { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0 .5rem; }
input[type=email], input[type=number], select { flex:1 1 14rem; padding:.7rem .8rem;
  font:inherit; font-size:.95rem; border:1px solid var(--trait); border-radius:2px;
  background:var(--fond); color:var(--encre); }
/* Sans ceci, le navigateur impose un fond blanc au select en theme sombre. */
select { appearance:none; -webkit-appearance:none; padding-right:2rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--doux) 50%),
                   linear-gradient(135deg,var(--doux) 50%,transparent 50%);
  background-position:calc(100% - 1.05rem) 55%, calc(100% - .75rem) 55%;
  background-size:.35rem .35rem, .35rem .35rem; background-repeat:no-repeat; }
input[type=checkbox] { accent-color:var(--accent); margin-right:.35rem; }
button { padding:.7rem 1.1rem; font:inherit; font-size:.95rem; font-weight:600;
  border:none; border-radius:2px; background:var(--accent); color:#fff;
  cursor:pointer; }

.mention { font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--doux); border:1px solid var(--trait);
  padding:.2rem .45rem; border-radius:2px; display:inline-block; }

footer { margin-top:3.5rem; padding-top:1.25rem; border-top:1px solid var(--trait);
  font-size:.82rem; color:var(--doux); }
footer a { color:var(--doux); }

/* Le memo — fiches en serie */
.fiche { padding:1.5rem 0; border-top:1px solid var(--trait); }
.fiche h3 { font-size:1.05rem; margin:.4rem 0 .2rem; }
.fiche .distinction { font-size:1.1rem; margin:.8rem 0 1rem; padding:.7rem .9rem; }
.fiche .distinction em { font-size:1.25rem; }
.fiche .source { margin:1rem 0; }
.fiche .source blockquote { font-size:.98rem; }

@media print {
  :root { --fond:#fff; --encre:#000; --doux:#555; --trait:#bbb;
          --accent:#000; --bloc:#f4f4f4; }
  body { font-size:11pt; }
  .enveloppe { max-width:none; padding:0; }
  .marque span, .aimpression { display:none; }
  .fiche { break-inside:avoid; page-break-inside:avoid; }
  .source .provenance a::after { content:" (" attr(href) ")";
    font-size:8pt; word-break:break-all; }
  a { text-decoration:none; }
}