/* ip.tmktools.com — thème « dev lab » : terminal, monospace, phosphore vert.
   Trois modes : auto (préférence système, défaut), light, dark — pilotés par
   l'attribut data-theme sur <html> (absent = auto). */

/* --- Palette sombre (défaut) --- */
:root {
  color-scheme: dark;
  --bg: #0a0e12;
  --bg-grid: rgba(58, 255, 168, 0.035);
  --bg-card: #0f151b;
  --bg-term-bar: #161e26;
  --border: #1f2a35;
  --border-glow: #2a3f4d;
  --text: #c9d7d3;
  --text-dim: #5f7a72;
  --green: #3affa8;
  --green-dim: #22c55e;
  --cyan: #4dd0e1;
  --amber: #ffb454;
  --red: #ff5f56;
  --yellow: #ffbd2e;
  --glow-strong: rgba(58, 255, 168, 0.45);
  --glow-soft: rgba(58, 255, 168, 0.06);
  --glow-border: rgba(58, 255, 168, 0.04);
  --shadow-win: 0 8px 40px rgba(0, 0, 0, 0.55);
  --row-border: rgba(31, 42, 53, 0.5);
  --row-hover: rgba(58, 255, 168, 0.03);
  --radius: 8px;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace,
               SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- Palette claire --- */
/* Mode auto : appliquée si le système est en clair et sans choix explicite. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #eef1f0;
    --bg-grid: rgba(10, 143, 86, 0.05);
    --bg-card: #ffffff;
    --bg-term-bar: #e3e9e7;
    --border: #d3dcd8;
    --border-glow: #b0c2ba;
    --text: #1e2b26;
    --text-dim: #64756f;
    --green: #0a8f56;
    --green-dim: #0f7a4d;
    --cyan: #0e7490;
    --amber: #b45309;
    --glow-strong: rgba(10, 143, 86, 0.25);
    --glow-soft: rgba(10, 143, 86, 0.08);
    --glow-border: rgba(10, 143, 86, 0.05);
    --shadow-win: 0 8px 30px rgba(30, 43, 38, 0.12);
    --row-border: rgba(30, 43, 38, 0.08);
    --row-hover: rgba(10, 143, 86, 0.05);
  }
}

/* Choix explicite « light » : mêmes valeurs que le bloc ci-dessus. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f0;
  --bg-grid: rgba(10, 143, 86, 0.05);
  --bg-card: #ffffff;
  --bg-term-bar: #e3e9e7;
  --border: #d3dcd8;
  --border-glow: #b0c2ba;
  --text: #1e2b26;
  --text-dim: #64756f;
  --green: #0a8f56;
  --green-dim: #0f7a4d;
  --cyan: #0e7490;
  --amber: #b45309;
  --glow-strong: rgba(10, 143, 86, 0.25);
  --glow-soft: rgba(10, 143, 86, 0.08);
  --glow-border: rgba(10, 143, 86, 0.05);
  --shadow-win: 0 8px 30px rgba(30, 43, 38, 0.12);
  --row-border: rgba(30, 43, 38, 0.08);
  --row-hover: rgba(10, 143, 86, 0.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.mono, code { font-family: var(--font-mono); font-size: 0.92em; }
.wrap { overflow-wrap: anywhere; }

::selection { background: var(--green); color: var(--bg); }

/* --- Fenêtre de terminal (hero) --- */
.hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1rem 1.2rem;
}

.term-window {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--glow-border),
              var(--shadow-win),
              0 0 60px var(--glow-soft);
  overflow: hidden;
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-term-bar);
  border-bottom: 1px solid var(--border);
  padding: 0.55rem 0.9rem;
}

.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-r { background: var(--red); }
.dot-y { background: var(--yellow); }
.dot-g { background: #27c93f; }

.term-title {
  margin-left: 0.6rem;
  color: var(--text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}

/* Bouton de bascule du thème, dans la barre de titre */
.theme-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border-glow);
  border-radius: 4px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.theme-btn:hover { color: var(--green); border-color: var(--green); }
.theme-btn:active { transform: scale(0.95); }

.term-body { padding: 1.4rem 1.6rem 1.6rem; }

.cmd { margin: 0 0 0.8rem; color: var(--text); }

.prompt { color: var(--green); font-weight: 700; }

.comment { color: var(--text-dim); font-weight: 400; font-size: 0.82em; }

.ip-line {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.ip {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 5.5vw, 3rem);
  font-weight: 700;
  color: var(--green);
  text-shadow: 0 0 18px var(--glow-strong);
  overflow-wrap: anywhere;
}

/* Curseur clignotant façon terminal */
.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.15em;
  background: var(--green);
  transform: translateY(0.18em);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.copy-btn {
  background: transparent;
  border: 1px solid var(--border-glow);
  border-radius: 4px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.25rem 0.55rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.copy-btn:hover { color: var(--green); border-color: var(--green); }
.copy-btn:active { transform: scale(0.95); }

/* Commandes CLI cliquables (copie dans le presse-papiers) */
.cmd-copy {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--text);
  font: inherit;
  text-align: inherit;
  cursor: copy;
  position: relative;
  transition: color 0.15s ease;
}
.cmd-copy code {
  font-size: inherit;
  border-bottom: 1px dashed var(--border-glow);
  transition: border-color 0.15s ease;
}
.cmd-copy:hover, .cmd-copy:focus-visible { color: var(--green); outline: none; }
.cmd-copy:hover code, .cmd-copy:focus-visible code { border-bottom-color: var(--green); }
.cmd-copy::after {
  content: "[copier]";
  margin-left: 0.6em;
  color: var(--text-dim);
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cmd-copy:hover::after, .cmd-copy:focus-visible::after, .cmd-copy.copied::after { opacity: 1; }
.cmd-copy.copied::after { content: "[copié ✓]"; color: var(--green); }
.cmd-copy.copied { color: var(--green); }
.cmd-copy.copied code { border-bottom-color: var(--green); }

.hero-sub { margin: 0.9rem 0 0; }

.badge {
  display: inline-block;
  color: var(--amber);
  font-size: 0.85rem;
  margin-right: 0.7rem;
}

/* --- Grille de cartes --- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.1rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.6rem 1rem 2rem;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem 1.3rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
              background-color 0.25s ease;
}

.card:hover {
  border-color: var(--border-glow);
  box-shadow: 0 0 24px var(--glow-soft);
}

.card-wide { grid-column: 1 / -1; }

.card h2 {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px dashed var(--border-glow);
  padding-bottom: 0.6rem;
  overflow-wrap: anywhere;
}

dl { margin: 0; }

.row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--row-border);
}
.row:last-child { border-bottom: none; }

dt { color: var(--text-dim); flex-shrink: 0; }
dt::before { content: "> "; color: var(--border-glow); }
dd { margin: 0; text-align: right; overflow-wrap: anywhere; color: var(--text); }

details { margin-top: 0.7rem; }
summary { cursor: pointer; color: var(--text-dim); font-size: 0.85rem; }
summary:hover { color: var(--cyan); }
details code {
  display: block;
  margin-top: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--cyan);
}

.note {
  margin: 0.8rem 0 0;
  color: var(--text-dim);
  font-size: 0.78rem;
}
.note::before { content: "# "; color: var(--border-glow); }

/* --- Tableau des en-têtes --- */
.table-scroll { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

th, td {
  text-align: left;
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th { color: var(--text-dim); font-weight: 600; text-transform: lowercase; }
tr:hover td { background: var(--row-hover); }
tr:last-child td { border-bottom: none; }
td:first-child { white-space: nowrap; color: var(--green-dim); }
td:last-child { color: var(--text); }

/* --- Pied de page --- */
footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.5rem 1rem 3rem;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
}

.stats { color: var(--text); }
.stats strong { color: var(--green); text-shadow: 0 0 12px var(--glow-strong); }

.privacy {
  max-width: 760px;
  margin: 1rem auto;
  padding: 0.9rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-dim);
  border-radius: var(--radius);
  font-size: 0.8rem;
  text-align: left;
}
.privacy strong { color: var(--green); }

.credits { font-size: 0.75rem; letter-spacing: 0.05em; }