/* Vitrine BÂTI — artour.ca. Direction B « Carnet de projet » : clair, éditorial, verre dépoli. */

:root {
  --ground: #E6ECEC;
  --ink: #0D1B1E;
  --ink-2: #34444A;
  --muted: #4A5A5D;
  --teal: #0F766E;
  --signal: #C2410C;
  --grid: rgba(15, 118, 110, 0.08);
  --rule: rgba(13, 27, 30, 0.14);
  --glass: rgba(255, 255, 255, 0.5);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --blur: 18px;
  --gutter: 16px;
  --chapter-gap: 96px;
  --display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; --chapter-gap: 140px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--ink); }
a:hover { color: var(--teal); }
a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: none;
}
.skip:focus { top: 12px; color: #fff; }

/* ---------- Fond : quadrillage de plan + halos de couleur ---------- */

.page {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background-color: var(--ground);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
}

.halos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.halo {
  position: absolute;
  border-radius: 50%;
}
.halo--teal   { background: radial-gradient(circle, rgba(15, 118, 110, 0.42), rgba(15, 118, 110, 0) 68%); }
.halo--orange { background: radial-gradient(circle, rgba(234, 88, 12, 0.30), rgba(234, 88, 12, 0) 68%); }
.halo--sky    { background: radial-gradient(circle, rgba(56, 140, 220, 0.30), rgba(56, 140, 220, 0) 68%); }

.halo:nth-child(1) { top: 2%;  left: 38%;   width: 720px; height: 720px; }
.halo:nth-child(2) { top: 8%;  right: -160px; width: 560px; height: 560px; }
.halo:nth-child(3) { top: 25%; left: -200px; width: 700px; height: 700px; }
.halo:nth-child(4) { top: 41%; right: 8%;   width: 760px; height: 760px; }
.halo:nth-child(5) { top: 62%; left: 4%;    width: 680px; height: 680px; }
.halo:nth-child(6) { top: 79%; right: -120px; width: 820px; height: 820px; }

.wrap {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter) 40px;
}

/* ---------- Verre dépoli ---------- */

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  box-shadow: 0 18px 44px rgba(13, 27, 30, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.glass--deep {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 30px 80px rgba(13, 27, 30, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, 0.86); }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- Typographie commune ---------- */

.mono {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.title {
  margin: 0;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 0.98;
  font-weight: 850;
  font-stretch: 115%;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.lede {
  margin: 0;
  max-width: 480px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ---------- En-tête ---------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  border-bottom: 1px solid rgba(13, 27, 30, 0.18);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.masthead__home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}

.masthead__edition { color: var(--muted); }

.masthead__tools {
  display: flex;
  align-items: center;
  gap: 18px;
}

.masthead__login {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}

.lang {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(13, 27, 30, 0.25);
  background: rgba(255, 255, 255, 0.45);
}

.lang a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}

.lang a[aria-current="page"] {
  background: var(--ink);
  color: #fff;
}

/* ---------- Ouverture ---------- */

.hero { padding-top: 48px; }

.wordmark {
  margin: 0;
  font-size: clamp(96px, 25vw, 360px);
  line-height: 0.82;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.045em;
}

.hero__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.hero__note {
  max-width: 300px;
  padding: 0 0 12px 14px;
  border-left: 2px solid var(--signal);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.hero__card {
  position: relative;
  margin-top: -150px;
  margin-left: auto;
  max-width: 600px;
  padding: 36px;
  border-radius: 26px;
}

.fig {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
}

.hero__card p {
  margin: 14px 0 0;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.25;
  font-weight: 600;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Chapitres ---------- */

.chapter { padding-top: var(--chapter-gap); }

.split {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.split__lead {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.split__body { flex: 1 1 560px; min-width: 0; }

.stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Dans une pile verticale, la base de 340 px deviendrait une HAUTEUR : on l'annule. */
.stack > .split__lead { flex: none; }

/* 01 — les outils éparpillés */

.scatter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 20px 0;
  list-style: none;
}

.scatter .chip {
  padding: 14px 20px;
  border-radius: 16px;
  font-size: 17px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 14px 30px rgba(13, 27, 30, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.scatter li:nth-child(1) { transform: rotate(-4deg); }
.scatter li:nth-child(2) { transform: rotate(3deg) translateY(10px); }
.scatter li:nth-child(3) { transform: rotate(-2deg) translateY(-8px); }
.scatter li:nth-child(4) { transform: rotate(5deg); }
.scatter li:nth-child(5) { transform: rotate(-3deg) translateY(6px); }

.scatter__arrow {
  display: flex;
  color: var(--signal);
}

.scatter__result {
  padding: 16px 26px;
  border-radius: 18px;
  font-size: 20px;
  font-weight: 800;
  font-stretch: 120%;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--teal);
  box-shadow: 0 18px 40px rgba(15, 118, 110, 0.35);
}

/* 02 — le parcours */

.steps-wrap { position: relative; }

.steps-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  border-top: 2px dashed rgba(15, 118, 110, 0.35);
}

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: 20px;
}

.step__num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal);
}

.step__name {
  font-size: 22px;
  font-weight: 800;
  font-stretch: 110%;
}

.step__text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* 03 — les règles d'ici */

.spec {
  margin: 0;
  padding: 12px 36px;
  border-radius: 26px;
}

.spec__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(13, 27, 30, 0.12);
}
.spec__row:last-child { border-bottom: 0; }

.spec dt {
  flex: 0 0 150px;
  padding-top: 3px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal);
}

.spec dd {
  flex: 1 1 280px;
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}

/* 04 — journal de construction */

.log {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0 0 0 28px;
  list-style: none;
  border-left: 2px solid rgba(15, 118, 110, 0.35);
}

.log__item {
  position: relative;
  padding: 20px 24px;
  border-radius: 18px;
}

.log__item::before {
  content: "";
  position: absolute;
  left: -38px;
  top: 26px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ground);
  border: 3px solid var(--teal);
}
.log__item:last-child::before { background: var(--teal); }

.log__date {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--signal);
}

.log__text {
  margin: 6px 0 0;
  font-size: 17px;
  line-height: 1.5;
}

/* 05 — contact */

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-top: var(--chapter-gap);
  padding: 56px;
  border-radius: 30px;
}

.contact__text {
  flex: 1 1 520px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact .title {
  font-size: clamp(32px, 3.8vw, 54px);
  line-height: 1;
  font-stretch: 112%;
}

.contact .lede { max-width: 560px; }

.byline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
}

.byline__photo {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 800;
  font-stretch: 120%;
  color: var(--teal);
  background: rgba(15, 118, 110, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.9);
}

.byline__name { font-size: 17px; font-weight: 700; }
.byline__role { font-size: 15px; color: var(--muted); }

.contact__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: var(--teal);
  box-shadow: 0 16px 36px rgba(15, 118, 110, 0.32);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.button:hover { color: #fff; background: #0B5F58; }
.button:active { transform: translateY(1px); }

.contact__email {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ---------- Pied de page ---------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 24px;
  margin-top: 80px;
  padding-top: 20px;
  border-top: 1px solid rgba(13, 27, 30, 0.18);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

/* ---------- Téléphone ---------- */

@media (max-width: 860px) {
  .hero__card { margin-top: 20px; }
  .hero__note,
  .masthead__edition,
  .masthead__login,
  .steps-wrap::before { display: none; }
  .spec { padding: 4px 22px; }
  .contact { padding: 28px; }
}

@media (max-width: 480px) {
  .hero { padding-top: 32px; }
  .hero__card { padding: 24px; }
  .masthead__tools { gap: 10px; }
  .spec dt { flex-basis: 100%; }
  .log { padding-left: 22px; }
  .log__item { padding: 16px 18px; }
  .log__item::before { left: -32px; }
}