/* ITA temporary site. Palette follows the motivation-layer colour of the ArchiMate notation that accompanies TOGAF:
   lilac for surfaces, deeper indigo for text and bands, one sand accent borrowed from the strategy layer. */
:root {
  --indigo-deep: #1c1a4f;
  --indigo: #3a3790;
  --violet: #5b57b8;
  --lilac: #ccccff;
  --lilac-soft: #eeeeff;
  --sand: #f5deaa;
  --amber: #d99a2b;
  --bg: #f7f7ff;
  --white: #ffffff;
  --text: #1a1a3a;
  --muted: #4d4d78;
  --line: #d9d9f2;
  --radius: 12px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
}
.wrap { max-width: 920px; margin: 0 auto; padding: 0 20px; }
header.site { background: var(--indigo-deep); color: var(--white); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--white); text-decoration: none; }
.brand svg { width: 38px; height: 38px; flex: none; }
.brand .name { font-weight: 800; font-size: 1.3rem; letter-spacing: 1px; }
.brand .sub { display: block; font-size: .68rem; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lilac); }
nav a { color: var(--lilac); text-decoration: none; margin-left: 20px; font-weight: 600; }
nav a:hover, nav a:focus { color: var(--white); text-decoration: underline; }
/* The gradient runs from deep indigo at the top to the lightest lilac at the bottom edge, so the hero melts into the
   page. The headline sits in the dark upper part; the line drawing is decorative and uses a mid violet that reads on
   both ends of the gradient. */
.hero {
  background: url("../assets/architecture-lines.svg") center / cover no-repeat,
              linear-gradient(172deg, var(--indigo-deep) 0%, var(--indigo) 38%, var(--violet) 62%, #9d9be0 82%, var(--lilac) 100%);
  color: var(--white);
  padding: 76px 0 150px;
}
.hero h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.2; margin: 0 0 16px; max-width: 700px; }
.hero h1 .accent { color: var(--sand); }
.hero p { font-size: 1.1rem; max-width: 640px; margin: 0 0 8px; color: #ececff; }
main section { padding: 44px 0 6px; }
.principles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 18px; }
.principle { background: var(--white); border-left: 5px solid var(--amber); border-radius: 8px; padding: 18px 20px; }
.principle h3 { margin: 0 0 6px; color: var(--indigo); font-size: 1.05rem; }
.principle p { margin: 0; color: var(--muted); }
h2 { font-size: 1.55rem; margin: 0 0 12px; color: var(--indigo); }
h2::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--amber); margin-top: 8px; }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 18px; }
.card { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--lilac); border-radius: var(--radius); padding: 20px; }
.card h3 { margin: 0 0 6px; color: var(--violet); font-size: 1.05rem; }
.card p { margin: 0; color: var(--muted); }
a { color: var(--violet); }
.box { background: var(--white); border-left: 5px solid var(--violet); border-radius: 8px; padding: 16px 20px; margin: 18px 0; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
dl.facts dt { font-weight: 700; color: var(--indigo); }
dl.facts dd { margin: 0; }
.band { background: var(--lilac-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 44px; padding-bottom: 36px; }
footer.site { background: var(--indigo-deep); color: var(--lilac); margin-top: 0; padding: 28px 0; font-size: .95rem; }
footer.site a { color: var(--white); }
footer.site strong { color: var(--white); }
.legal { margin-top: 10px; font-size: .88rem; color: #a9a9d6; }
/* Marks a value Alexandre must confirm or fill in before publishing; remove the class once done. */
.todo { background: #fff3cd; color: #5c4400; border: 1px dashed #c79100; padding: 2px 6px; border-radius: 4px; }
@media (max-width: 560px) { nav a { margin-left: 12px; font-size: .95rem; } .hero { padding: 46px 0 56px; } dl.facts { grid-template-columns: 1fr; } }