/* vigie.ma: the public site. One stylesheet for both languages; logical properties only, so Arabic mirrors itself. */

@font-face { font-family: "Plex"; src: url("fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plex-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/plex-arabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Cedar and honey (owner choice 2026-10-29), the colors of the logo (docs/brand/make-logo.py). Names kept from the first palette. */
  --abyss: #17352b;
  --fjord: #1f5c4a;
  --lagoon: #2b7a61;
  --signal: #e8a33d;
  --ice: #f4f6f2;
  --ice-deep: #e7ede8;
  --card: #ffffff;
  --rule: #dbe4dd;
  --rule-strong: #c5d3c9;
  --ink: #17352b;
  --ink-muted: #4e5f57;
  /* Semantic: amber marks a limit, red a refusal, green a done record. */
  --beacon: #a35f00;
  --beacon-bg: #fcefd9;
  --danger: #be2530;
  --danger-bg: #fce8ea;
  --ok: #1c7246;
  --ok-bg: #e3f2ea;

  --font: "Plex", "Plex Arabic", system-ui, sans-serif;
  --text-display: clamp(2.5rem, 1.3rem + 4.8vw, 5rem);
  --text-h2: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --text-h3: 1.25rem;
  --text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --text-small: 0.875rem;
  --leading: 1.55;

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --page: 74rem;
  --section: clamp(4rem, 3rem + 5vw, 8rem);
  --radius-ui: 10px;
  --radius-phone: 34px;
  --shadow-ui: 0 1px 2px rgb(23 53 43 / 0.06), 0 10px 28px rgb(23 53 43 / 0.08);
  --shadow-phone: 0 2px 4px rgb(23 53 43 / 0.08), 0 30px 60px -12px rgb(23 53 43 / 0.32);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: 5rem; }

body {
  margin: 0;
  background: var(--ice);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: var(--leading);
  overflow-x: hidden;
}

:lang(ar) body, body:lang(ar) { font-family: "Plex Arabic", "Plex", system-ui, sans-serif; line-height: 1.75; }

h1, h2, h3 { color: var(--fjord); line-height: 1.1; margin: 0; text-wrap: balance; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { line-height: 1.35; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--lagoon); text-underline-offset: 0.2em; }
a:hover { color: var(--fjord); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
img, svg { display: block; max-inline-size: 100%; }

.wrap { inline-size: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; }
.skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; background: var(--card); padding: 0.5rem 1rem; z-index: 20; }
.skip:focus { inset-block-start: 1rem; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Header ---------- */

.top {
  position: sticky; inset-block-start: 0; z-index: 10;
  background: rgb(244 246 242 / 0.88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-block-end: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.top.is-scrolled { border-block-end-color: var(--rule); }
.top .wrap { display: flex; align-items: center; gap: 1.5rem; block-size: 4.25rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--fjord); text-decoration: none; font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; }
.brand img { inline-size: 2.25rem; block-size: 2.25rem; }
.nav { display: flex; gap: 1.5rem; margin-inline-start: auto; }
.nav a { color: var(--ink-muted); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.nav a:hover { color: var(--fjord); }
.lang { font-weight: 600; text-decoration: none; padding: 0.35rem 0.75rem; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--fjord); font-size: 0.9375rem; }
.lang:hover { border-color: var(--lagoon); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-block-size: 3rem; padding: 0.7rem 1.4rem;
  border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease), transform 150ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--fjord); color: #fff; }
.btn-primary:hover { background: var(--abyss); color: #fff; }
.btn-quiet { border-color: var(--rule-strong); color: var(--fjord); background: transparent; }
.btn-quiet:hover { border-color: var(--fjord); color: var(--fjord); background: var(--card); }
.top .btn { min-block-size: 2.5rem; padding: 0.45rem 1.1rem; font-size: 0.9375rem; }

@media (max-width: 960px) { .nav { display: none; } .top .lang { margin-inline-start: auto; } }
@media (max-width: 420px) { .top .btn { display: none; } }

/* ---------- Hero: a child's day as the parent's phone sees it ---------- */

.hero { position: relative; padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem) var(--section); overflow: hidden; }
.hero::before {
  /* The lookout's sweep: rings centred on the phone, the one decorative device of the page. */
  content: ""; position: absolute; inset-block-start: -10%; inset-inline-end: -18%;
  inline-size: 62rem; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 5.9rem, rgb(31 92 74 / 0.08) 5.9rem 6rem);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero h1 { font-size: var(--text-display); font-weight: 700; letter-spacing: -0.035em; color: var(--abyss); max-inline-size: 13ch; }
:lang(ar) .hero h1 { letter-spacing: 0; max-inline-size: 14ch; }
.hero .lead { margin-block-start: 1.5rem; font-size: var(--text-lead); color: var(--ink-muted); max-inline-size: 36rem; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 2rem; }
.hero .facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 2.25rem 0 0; padding: 0; list-style: none; color: var(--ink-muted); font-size: var(--text-small); }
.hero .facts li { display: flex; align-items: center; gap: 0.45rem; }
.hero .facts li::before { content: ""; inline-size: 0.45rem; block-size: 0.45rem; border-radius: 50%; background: var(--signal); }

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero::before { inset-block-start: 30%; inset-inline-end: -60%; }
}

.phone {
  justify-self: center;
  inline-size: min(100%, 22rem);
  padding: 0.7rem;
  border-radius: var(--radius-phone);
  background: var(--abyss);
  box-shadow: var(--shadow-phone);
}
.phone-screen { border-radius: calc(var(--radius-phone) - 0.7rem); background: #f7f9f6; padding: 1rem 0.85rem 1.1rem; min-block-size: 30rem; display: flex; flex-direction: column; }
.phone-bar { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 600; color: var(--ink-muted); padding-inline: 0.4rem; }
.phone-title { margin: 0.9rem 0.4rem 0.2rem; font-size: 0.8125rem; color: var(--ink-muted); }
.phone-child { margin: 0 0.4rem 0.9rem; font-weight: 700; color: var(--fjord); font-size: 1.15rem; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.note {
  display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.7rem; align-items: start;
  padding: 0.7rem 0.8rem; border-radius: 14px; background: var(--card);
  box-shadow: 0 1px 2px rgb(23 53 43 / 0.06), 0 4px 12px rgb(23 53 43 / 0.05);
  font-size: 0.875rem; line-height: 1.4;
}
.note-icon { grid-row: span 2; inline-size: 2rem; block-size: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--ice-deep); color: var(--fjord); }
.note-icon svg { inline-size: 1.05rem; block-size: 1.05rem; }
.note-head { display: flex; justify-content: space-between; gap: 0.5rem; font-weight: 600; color: var(--abyss); }
.note-head time { font-weight: 400; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.note p { color: var(--ink-muted); }
.note.is-ok .note-icon { background: var(--ok-bg); color: var(--ok); }
.phone-foot { margin-block-start: auto; padding-block-start: 0.9rem; font-size: 0.75rem; color: var(--ink-muted); text-align: center; }

/* The one orchestrated moment: the day's notifications arrive one after the other, then stay. */
.js .feed .note { opacity: 0; transform: translateY(10px) scale(0.98); }
.js .feed.is-playing .note { animation: arrive 520ms var(--ease) forwards; animation-delay: calc(var(--i, 0) * 900ms + 300ms); }
.feed .note:nth-child(2) { --i: 1; }
.feed .note:nth-child(3) { --i: 2; }
.feed .note:nth-child(4) { --i: 3; }
.feed .note:nth-child(5) { --i: 4; }
@keyframes arrive { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .feed .note, .js .feed.is-playing .note { opacity: 1; transform: none; animation: none; }
}

/* ---------- Sections ---------- */

.section { padding-block: var(--section); }
.section-head { max-inline-size: 44rem; margin-block-end: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-head h2 { font-size: var(--text-h2); letter-spacing: -0.025em; }
:lang(ar) .section-head h2 { letter-spacing: 0; }
.section-head p { margin-block-start: 1rem; font-size: var(--text-lead); color: var(--ink-muted); }
.band { background: var(--card); border-block: 1px solid var(--rule); }

/* ---------- The day: a real timeline, times as markers ---------- */

.day { list-style: none; margin: 0; padding: 0; position: relative; }
.day::before { content: ""; position: absolute; inset-block: 0.8rem 0; inset-inline-start: 4.1rem; inline-size: 2px; background: linear-gradient(var(--signal), var(--rule-strong)); }
.moment { position: relative; display: grid; grid-template-columns: 8.2rem minmax(0, 1fr) minmax(0, 23rem); gap: clamp(1.25rem, 3vw, 3rem); padding-block: 0 clamp(3rem, 2rem + 3vw, 5rem); }
.moment:last-child { padding-block-end: 0; }
.moment-time { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.moment-time b { display: block; padding: 0.15rem 0.4rem; background: var(--ice); font-size: 1.75rem; font-weight: 700; color: var(--fjord); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; direction: ltr; }
.moment-time span { display: block; background: var(--ice); color: var(--ink-muted); font-size: var(--text-small); padding-inline: 0.3rem; }
.moment h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem); letter-spacing: -0.015em; }
:lang(ar) .moment h3 { letter-spacing: 0; }
.moment-body > p { margin-block-start: 0.8rem; color: var(--ink-muted); max-inline-size: 38rem; }
.moment-body ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; max-inline-size: 38rem; }
.moment-body li { position: relative; padding-inline-start: 1.4rem; }
.moment-body li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.6em; inline-size: 0.55rem; block-size: 2px; background: var(--lagoon); }
.who { margin-block-start: 1.1rem; font-size: var(--text-small); color: var(--ink-muted); }
.who strong { color: var(--abyss); font-weight: 600; }

@media (max-width: 1020px) {
  .moment { grid-template-columns: 6rem minmax(0, 1fr); }
  .moment .ui { grid-column: 2; }
  .day::before { inset-inline-start: 3rem; }
}
@media (max-width: 560px) {
  .day::before { display: none; }
  .moment { grid-template-columns: 1fr; gap: 1rem; }
  .moment .ui { grid-column: 1; }
  .moment-time { flex-direction: row; gap: 0.6rem; align-items: baseline; }
  .moment-time b { padding: 0; font-size: 1.5rem; }
}

/* Small product fragments: drawn from the real screens, each in its own form, not one card kit. */
.ui { align-self: start; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-ui); box-shadow: var(--shadow-ui); font-size: 0.875rem; line-height: 1.4; overflow: hidden; }
.ui-head { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem; border-block-end: 1px solid var(--rule); font-weight: 600; color: var(--fjord); background: linear-gradient(#e3efe8, #e3efe8); }
.ui-head small { font-weight: 400; color: var(--ink-muted); font-size: 0.8125rem; }
.ui-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.9rem; border-block-end: 1px solid var(--rule); }
.ui-row:last-child { border-block-end: 0; }
.tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.tag-ok { background: var(--ok-bg); color: var(--ok); }
.tag-wait { background: var(--ice-deep); color: var(--fjord); }
.tag-warn { background: var(--beacon-bg); color: var(--beacon); }
.tag-no { background: var(--danger-bg); color: var(--danger); }
.marks { display: inline-flex; gap: 0.25rem; }
.marks span { inline-size: 1.75rem; block-size: 1.75rem; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--rule-strong); font-weight: 600; font-size: 0.75rem; color: var(--ink-muted); }
.marks .on-p { background: var(--ok); border-color: var(--ok); color: #fff; }
.marks .on-a { background: var(--danger); border-color: var(--danger); color: #fff; }
.marks .on-r { background: var(--beacon); border-color: var(--beacon); color: #fff; }

.ui-alert { margin: 0.8rem; padding: 0.8rem; border-radius: 8px; background: var(--danger-bg); border-inline-start: 4px solid var(--danger); }
.ui-alert strong { display: block; color: var(--danger); }
.ui-alert p { margin-block-start: 0.3rem; color: var(--ink); }
.ui-alert .pair { display: flex; gap: 0.5rem; margin-block-start: 0.7rem; flex-wrap: wrap; }
.ui-alert .pair span { padding: 0.4rem 0.8rem; border-radius: 999px; font-weight: 600; font-size: 0.8125rem; }
.pair .p-yes { background: var(--card); border: 1px solid var(--danger); color: var(--danger); }
.pair .p-no { background: var(--danger); color: #fff; }

.tt { display: grid; grid-template-columns: 3.2rem repeat(3, 1fr); font-size: 0.75rem; }
.tt > * { padding: 0.45rem 0.4rem; border-block-end: 1px solid var(--rule); border-inline-end: 1px solid var(--rule); min-block-size: 2.3rem; }
.tt .h { font-weight: 600; color: var(--fjord); background: #f3f7f4; }
.tt .t { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.tt .closed { grid-row: span 3; display: grid; place-items: center; text-align: center; color: var(--beacon); font-weight: 600;
  background: repeating-linear-gradient(-45deg, var(--beacon-bg) 0 6px, #fff8ec 6px 12px); }

.receipt { padding: 1rem 1.1rem 1.1rem; }
.receipt-top { display: flex; justify-content: space-between; gap: 1rem; padding-block-end: 0.7rem; border-block-end: 1px dashed var(--rule-strong); }
.receipt-top b { color: var(--fjord); }
.receipt-top [lang="ar"] { font-family: "Plex Arabic", sans-serif; color: var(--ink-muted); }
.receipt dl { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; margin: 0.8rem 0 0; }
.receipt dt { color: var(--ink-muted); }
.receipt dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.receipt .total { font-weight: 700; color: var(--abyss); padding-block-start: 0.4rem; border-block-start: 1px solid var(--rule); }

.toggle { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 999px; overflow: hidden; font-size: 0.75rem; font-weight: 600; }
.toggle span { padding: 0.3rem 0.65rem; color: var(--ink-muted); }
.toggle .on { background: var(--fjord); color: #fff; }

/* ---------- Roles ---------- */

.roles { inline-size: 100%; border-collapse: collapse; font-size: 0.9875rem; }
.roles th, .roles td { text-align: start; vertical-align: top; padding: 1rem 1rem 1rem 0; border-block-end: 1px solid var(--rule); }
:lang(ar) .roles th, :lang(ar) .roles td { padding: 1rem 0 1rem 1rem; }
.roles thead th { font-size: var(--text-small); color: var(--ink-muted); font-weight: 600; border-block-end: 2px solid var(--rule-strong); }
.roles tbody th { color: var(--fjord); font-weight: 700; inline-size: 13rem; }
.roles td.where { inline-size: 9rem; color: var(--ink-muted); white-space: nowrap; }
@media (max-width: 720px) {
  .roles thead { display: none; }
  .roles, .roles tbody, .roles tr, .roles th, .roles td { display: block; inline-size: auto; }
  .roles tr { padding-block: 1rem; border-block-end: 1px solid var(--rule); }
  .roles th, .roles td { border: 0; padding: 0; }
  .roles td.where { margin-block: 0.15rem 0.4rem; }
}

/* ---------- Data: the dark band ---------- */

.deep { background: var(--abyss); color: #cfe0d7; }
.deep h2, .deep h3 { color: #fff; }
.deep .section-head p { color: #a9c3b6; }
.deep a { color: #f0c071; }
.facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-block-start: 1px solid rgb(255 255 255 / 0.14); }
.facts-grid > div { padding: 1.6rem 1.6rem 1.6rem 0; border-block-end: 1px solid rgb(255 255 255 / 0.14); }
:lang(ar) .facts-grid > div { padding: 1.6rem 0 1.6rem 1.6rem; }
.facts-grid dt { color: #fff; font-weight: 600; font-size: 1.0625rem; }
.facts-grid dd { margin: 0.5rem 0 0; color: #a9c3b6; font-size: 0.9375rem; }
.facts-grid dd b { color: var(--signal); font-weight: 600; }
@media (max-width: 900px) { .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .facts-grid { grid-template-columns: 1fr; } }
.deep .small { margin-block-start: 2rem; font-size: var(--text-small); color: #8fae9f; max-inline-size: 48rem; }

/* ---------- Offline ---------- */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split .section-head { margin-block-end: 0; }
.split ul { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; color: var(--ink-muted); }
.split li::before { content: "·"; color: var(--lagoon); font-weight: 700; margin-inline-end: 0.6rem; }
.queue .ui-row span:first-child { color: var(--abyss); }
.queue-bar { padding: 0.7rem 0.9rem; background: var(--beacon-bg); color: var(--beacon); font-weight: 600; font-size: 0.8125rem; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- Start: a real sequence, so numbered ---------- */

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
.steps li { counter-increment: step; padding-block-start: 1rem; border-block-start: 2px solid var(--fjord); }
.steps li::before { content: counter(step); display: block; font-size: 2.25rem; font-weight: 700; color: var(--fjord); line-height: 1; margin-block-end: 0.75rem; }
.steps h3 { font-size: 1.0625rem; color: var(--abyss); }
.steps p { margin-block-start: 0.4rem; color: var(--ink-muted); font-size: 0.9375rem; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */

.faq { max-inline-size: 52rem; border-block-start: 1px solid var(--rule-strong); }
.faq details { border-block-end: 1px solid var(--rule-strong); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.15rem; font-weight: 600; font-size: 1.0625rem; color: var(--abyss); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; inline-size: 0.7rem; block-size: 0.7rem; border-inline-end: 2px solid var(--lagoon); border-block-end: 2px solid var(--lagoon); transform: rotate(45deg) translateY(-25%); transition: transform 200ms var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.faq details p { padding-block-end: 1.25rem; color: var(--ink-muted); max-inline-size: 46rem; }

/* ---------- Contact ---------- */

.contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.channels { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.channels a { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border-radius: var(--radius-ui); border: 1px solid var(--rule-strong); background: var(--card); text-decoration: none; color: var(--abyss); font-weight: 600; transition: border-color 150ms var(--ease); }
.channels a:hover { border-color: var(--lagoon); color: var(--abyss); }
.channels svg { inline-size: 1.4rem; block-size: 1.4rem; color: var(--lagoon); flex: none; }
.channels small { display: block; font-weight: 400; color: var(--ink-muted); direction: ltr; text-align: start; }
:lang(ar) .channels small { text-align: end; }
.form { padding: clamp(1.25rem, 3vw, 2rem); background: var(--card); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow-ui); }
.form h3 { font-size: var(--text-h3); }
.form .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block-start: 1.25rem; }
.form .full { grid-column: 1 / -1; }
.form label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.9375rem; color: var(--abyss); }
.form input, .form select, .form textarea {
  font: inherit; font-weight: 400; color: var(--ink); background: var(--ice); border: 1px solid var(--rule-strong); border-radius: 8px;
  padding: 0.65rem 0.8rem; min-block-size: 2.9rem; inline-size: 100%;
}
.form textarea { min-block-size: 6.5rem; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid rgb(232 163 61 / 0.45); outline-offset: 0; border-color: var(--lagoon); }
.form .send { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.25rem; }
.form .hint { margin-block-start: 1rem; font-size: var(--text-small); color: var(--ink-muted); }
.form .error { margin-block-start: 0.75rem; color: var(--danger); font-weight: 600; font-size: 0.9375rem; }
.form .error:empty { display: none; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form .grid { grid-template-columns: 1fr; } }

/* ---------- Public page: what Vigie covers, and the way to the private presentation ---------- */

.covers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; }
.covers li { padding-block: 1.4rem; border-block-start: 2px solid var(--fjord); }
.covers h3 { font-size: var(--text-h3); color: var(--abyss); }
.covers p { margin-block-start: 0.4rem; color: var(--ink-muted); }
@media (max-width: 900px) { .covers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .covers { grid-template-columns: 1fr; } }
.private { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-block-start: 3rem; padding: 1.5rem; border-radius: 16px; background: var(--abyss); color: #cfe0d7; }
.private p { flex: 1 1 22rem; }
.private strong { color: #fff; }
.private .btn-primary { background: #fff; color: var(--fjord); }
.private .btn-primary:hover { background: var(--ice); color: var(--abyss); }
.private small { color: #8fae9f; }

/* ---------- Footer and the legal page ---------- */

.foot { padding-block: 3rem; background: var(--ice-deep); color: var(--ink-muted); font-size: var(--text-small); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot a { color: var(--ink-muted); }

.prose { max-inline-size: 46rem; padding-block: 3rem var(--section); }
.prose h1 { font-size: var(--text-h2); margin-block-end: 1.5rem; }
.prose h2 { font-size: 1.3rem; margin-block: 2.25rem 0.6rem; }
.prose p, .prose li { color: var(--ink-muted); }
.prose p + p { margin-block-start: 0.8rem; }
.prose ul { padding-inline-start: 1.2rem; }