/* 3 — SKEUOMORPHISME : la page imite des objets réels. Papier crème posé sur
   du métal brossé, boutons vernis, tampons débossés, ombres de studio. */

[data-style="skeuo"] {
  --bg: #B4B9C1;
  --surface: #FCF9F1;
  --ink: #2C271F;
  --ink-soft: #4E463A; /* le texte court aussi sur le métal, pas seulement sur le papier */
  --accent: #0B5CB8;
  --accent-2: #A6511F;
  --line: #D6CBB6;
  --radius: 6px;
  --shadow: 0 20px 28px -16px rgba(0, 0, 0, .55);
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: Georgia, "Times New Roman", serif;
  --font-mono: "Courier New", ui-monospace, monospace;
  --code-k: #0B5CB8;
  --code-f: #2C271F;
  --code-s: #A6511F;
  --code-n: #6B3FA0;
  --code-c: #9A9080;
}

[data-style="skeuo"] body {
  background-color: #B4B9C1;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 1px, rgba(0, 0, 0, .04) 1px 3px),
    linear-gradient(180deg, #C6CAD1, #9CA2AC);
}

[data-style="skeuo"] .eyebrow { color: var(--accent-2); }

[data-style="skeuo"] h1 {
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
}
[data-style="skeuo"] h1 em { font-style: italic; color: var(--accent); }

[data-style="skeuo"] .masthead { border-bottom: 1px solid rgba(0, 0, 0, .25); box-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
[data-style="skeuo"] .masthead nav a { color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
[data-style="skeuo"] .masthead nav a:hover { color: var(--accent); }

[data-style="skeuo"] .section {
  border-top: 1px solid rgba(0, 0, 0, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}

[data-style="skeuo"] .card,
[data-style="skeuo"] .step,
[data-style="skeuo"] .specimen {
  background: linear-gradient(180deg, #FFFDF7, #F6F0E2);
  border: 1px solid #CDC2AC;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 22px 30px -18px rgba(0, 0, 0, .6);
}
[data-style="skeuo"] .card:hover {
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 26px 34px -18px rgba(0, 0, 0, .65);
}

[data-style="skeuo"] .specimen-bar {
  background: linear-gradient(180deg, #E8E2D4, #D2CAB6);
  border-bottom: 1px solid #B9AE97;
  color: #4A4235;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

[data-style="skeuo"] .btn {
  background: linear-gradient(180deg, #4E93E0, #0B5CB8);
  border: 1px solid #06427F;
  border-radius: 9px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 8px 14px -8px rgba(0, 0, 0, .7);
}
[data-style="skeuo"] .btn:hover {
  background: linear-gradient(180deg, #5EA2EA, #1568C9);
  transform: translateY(-1px);
}
[data-style="skeuo"] .btn-ghost {
  background: linear-gradient(180deg, #F7F3E9, #E5DDCC);
  color: var(--ink);
  border-color: #B9AE97;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
[data-style="skeuo"] .btn-ghost:hover { background: linear-gradient(180deg, #FFFDF7, #EDE6D6); }

[data-style="skeuo"] .tag {
  background: linear-gradient(180deg, #F6F1E5, #E6DDC9);
  border: 1px solid #C6BAA3;
  border-radius: 4px;
  color: #574C3C;
  font-weight: 700;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .25);
}

[data-style="skeuo"] .band {
  background: linear-gradient(180deg, #3B414A, #23272E);
  border: 1px solid #12151A;
  color: #EDE8DD;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 18px 26px -16px rgba(0, 0, 0, .7);
}
[data-style="skeuo"] .band-label { color: #E0BC72; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }

[data-style="skeuo"] .step-n { color: var(--accent); }
[data-style="skeuo"] .step .meta { color: var(--accent-2); }

[data-style="skeuo"] .inspector {
  background: linear-gradient(180deg, #EFEBDF, #E2DCCB);
  border: 1px solid #C6BAA3;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .22), 0 1px 0 #fff;
  color: #4A4235;
}

[data-style="skeuo"] .note { border-left: 4px double var(--accent-2); color: #4A4235; }

[data-style="skeuo"] .reasons div { border-top: 3px solid #8A7C66; }

[data-style="skeuo"] .dock {
  background: linear-gradient(180deg, #EEF0F3, #D2D6DD);
  border: 1px solid #8F959F;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 16px 24px -14px rgba(0, 0, 0, .7);
}
[data-style="skeuo"] .dock button {
  border-radius: 7px;
  color: #3B3F46;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
[data-style="skeuo"] .dock button:hover { background: rgba(255, 255, 255, .7); }
[data-style="skeuo"] .dock button[aria-pressed="true"] {
  background: linear-gradient(180deg, #4E93E0, #0B5CB8);
  border-color: #06427F;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45);
}

[data-style="skeuo"] kbd,
[data-style="skeuo"] .lede code,
[data-style="skeuo"] .foot code {
  background: linear-gradient(180deg, #F6F1E5, #E9E1CF);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2), 0 1px 0 #fff;
}