/* Site Les Solutions Kova — page styles on top of the Broadsheet design system.
   The system's tokens and component classes live in ds/styles.css and are
   the source of truth; nothing here redefines a token. */

html, body { margin: 0; padding: 0; }
body { background: var(--color-bg); }
* { box-sizing: border-box; }

a { color: var(--color-accent-700); text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); }
a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
a.btn, a.plain { border-bottom: none; }
a.plain { color: var(--color-text); }
a.plain:hover { color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
h1, h2, h3, p { text-wrap: pretty; }

/* ── the sheet ─────────────────────────────────────────────────────── */
.sheet { width: 100%; max-width: 1240px; margin: 0 auto; padding: 44px 56px 88px; }

/* ── masthead ──────────────────────────────────────────────────────── */
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.wordmark { font-family: var(--font-heading); font-weight: 600; font-size: 27px; letter-spacing: -0.015em; }
.wordmark span { color: var(--color-accent); }
.masthead nav { display: flex; align-items: center; gap: 22px; }
.masthead nav a { font-size: 14px; }

.rule-heavy { height: 5px; background: var(--color-text); margin-top: 24px; }
.rule-thin { height: 1px; background: var(--color-text); }
.dateline {
  display: flex; justify-content: space-between; gap: 20px; padding: 8px 0;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}

/* ── hero ──────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 60px; margin-top: 56px; }
.hero h1 { font-size: 80px; line-height: 0.97; letter-spacing: -0.03em; margin: 0; }
.hero h1 em { font-weight: 400; }
.hero-aside { padding-top: 8px; }
.hero-lede { font-size: 17px; line-height: 1.6; margin: 0 0 24px; }

/* ── stats ─────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; margin-top: 76px; }
.stat-value {
  font-family: var(--font-heading); font-weight: 600; font-size: 46px;
  line-height: 1; letter-spacing: -0.02em;
}
.stat-label { font-size: 13px; line-height: 1.45; margin-top: 10px; color: var(--color-neutral-800); max-width: 22ch; }

/* ── section furniture ─────────────────────────────────────────────── */
.section { margin-top: 120px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.kicker { margin: 0; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }
.section-count { font-size: 13px; color: var(--color-neutral-700); }
.section-title {
  font-size: 34px; line-height: 1.2; letter-spacing: -0.02em;
  font-family: var(--font-heading); font-weight: 600; margin: 20px 0 0; max-width: 26ch;
}

/* ── portfolio entries ─────────────────────────────────────────────── */
.entry {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: 56px; align-items: start; padding-top: 88px;
}
.entry-num { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 54px; margin-bottom: 26px; }
.entry h3 { font-size: 38px; line-height: 1.02; letter-spacing: -0.025em; margin: 0; }
.entry-link { display: inline-block; margin-top: 8px; font-size: 13px; letter-spacing: 0.04em; }
.entry-desc { font-size: 16px; line-height: 1.6; margin: 18px 0 0; max-width: 42ch; }
.entry-note { font-size: 14px; line-height: 1.55; margin: 24px 0 0; max-width: 38ch; color: var(--color-neutral-800); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* Le filet : chaque capture est cadrée d'un trait fin, à l'encre du
   système (16 % de l'encre du texte), pour la détacher du papier. */
.shot {
  aspect-ratio: 16 / 10; background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
}
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* A slot whose capture is not in hand yet — a ruled sheet holding the
   domain, so the column reads as set type rather than a broken image. */
.shot-empty {
  display: grid; place-content: center; gap: 6px; text-align: center;
  background: var(--color-surface);
}
.shot-empty b {
  font-family: var(--font-heading); font-weight: 600; font-size: 28px;
  letter-spacing: -0.02em; color: var(--color-neutral-700);
}
.shot-empty small { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-neutral-600); }

.caption {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-neutral-700); margin-top: 10px;
}

/* The mobile product shows its screen, not a web page — a narrower
   figure at the handset's own aspect, on the page's paper. */
.entry-phone figure { display: flex; flex-direction: column; align-items: flex-start; }
/* min() plutôt que width + max-width : une largeur fixe imposerait 300px
   comme contenu minimal de la colonne, et une piste 1fr ne descend pas
   sous le minimum de son contenu. */
.shot-phone {
  width: min(300px, 100%); aspect-ratio: 414 / 868; background: var(--color-bg);
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
}
.shot-phone img { width: 100%; height: 100%; object-fit: contain; }

/* ── contact ───────────────────────────────────────────────────────── */
.contact {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px; margin-top: 132px; align-items: start;
}
.contact-title {
  font-size: 46px; line-height: 1.05; letter-spacing: -0.025em;
  font-family: var(--font-heading); font-weight: 600; margin: 20px 0 0;
}
.contact-lede { font-size: 16px; line-height: 1.6; margin: 20px 0 0; max-width: 40ch; }
.contact form { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.contact form .btn { align-self: flex-start; }
.form-note { margin: 0; font-size: 13px; line-height: 1.5; min-height: 1.5em; }
.form-note[data-state="ok"] { color: var(--color-accent-700); }
.form-note[data-state="err"] { color: var(--color-accent-2-700); }

/* ── colophon ──────────────────────────────────────────────────────── */
.colophon {
  display: flex; justify-content: space-between; gap: 20px; margin-top: 104px;
  font-size: 12px; color: var(--color-neutral-700);
}

/* ── the sheet folds ───────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero h1 { font-size: 64px; }
  .entry, .contact { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .entry { padding-top: 72px; }
  .contact { margin-top: 104px; }
  .contact-title { font-size: 38px; }
  .entry-desc, .entry-note, .contact-lede { max-width: 60ch; }
}

@media (max-width: 720px) {
  .sheet { padding: 28px 22px 64px; }
  /* Sous ~340 px, un titre ou un domaine peut être plus large que sa
     colonne. break-word ne coupe que dans ce cas, et laisse les mots
     entiers partout ailleurs. */
  .entry h3, .entry-link, .entry-desc, .entry-note, .hero h1 { overflow-wrap: break-word; }
  .masthead { gap: 16px; }
  .wordmark { font-size: 23px; }
  .masthead nav { gap: 16px; flex-wrap: wrap; }
  .dateline { flex-wrap: wrap; gap: 6px 18px; font-size: 10px; letter-spacing: 0.12em; }
  .hero { margin-top: 40px; }
  .hero h1 { font-size: 44px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 56px; }
  .stat-value { font-size: 38px; }
  .section { margin-top: 88px; }
  .section-head { flex-direction: column; gap: 8px; }
  .section-title { font-size: 27px; }
  .entry h3 { font-size: 30px; }
  .entry-num { font-size: 42px; margin-bottom: 20px; }
  .colophon { flex-direction: column; gap: 6px; margin-top: 72px; }
}