/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("96b827fd-9375-4db3-bb57-bb1564fc1b99") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("8ed1d47e-98a5-4dd7-86e3-4ac98d1c4dfe") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("79529709-5804-47f6-b9fa-57b792bcdddb") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("c6676980-bace-497f-b75f-3d2e937042a1") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("029f4f0c-0a2b-48ac-9932-f4ef8d3d4751") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("a57eeb6d-e8f4-4f52-90bf-ec854a2bd6e1") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("ea36bdb6-9a42-472f-9ad8-6ba3fddaeb24") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("ca8c249d-b226-4963-a354-b0e3fdfdd135") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("a4bee096-5e1d-463e-9c31-6589eed19730") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("99c4fa37-a1cb-457b-b795-87e1688d2b28") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("4d2514fc-00ed-4039-b5f6-d0dbd63d0290") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("09b5aa19-52da-419f-9232-bad582e1a87e") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("a99fb653-562d-4dc0-81c5-862e28b49650") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("3013615a-17a3-4214-9771-afd376c4756e") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("43a650bf-f84e-4667-a554-b48cae78f335") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("09064dc5-a084-4558-9f0b-b1db10f670fd") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("51a5c742-3ebd-4dfe-9695-6fba85de06fe") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("68c881c2-4c56-4629-8217-fb58a8fe11e5") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("6b8e3739-099a-4552-8fb7-91c4723ba703") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("cdf30bc3-6c41-41cb-bfd4-1f5edb48f086") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("68741a65-76b0-4042-b62a-df579ecb71e6") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("a468f682-cdfa-4894-95f2-aae796724f86") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("b8eda4c1-455f-43b0-83ae-f1364a8abf21") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("e2002ec6-7e7d-4400-b2a3-410fdde95109") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("7227eb3c-8c94-4309-ab4f-61809d9ec0f6") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c3ed31fc-ba2a-4ad9-bd95-465709c6e32a") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("f4a891c8-3a38-4126-b792-ee2952bc19cc") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("7227eb3c-8c94-4309-ab4f-61809d9ec0f6") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("c3ed31fc-ba2a-4ad9-bd95-465709c6e32a") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("f4a891c8-3a38-4126-b792-ee2952bc19cc") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("7227eb3c-8c94-4309-ab4f-61809d9ec0f6") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c3ed31fc-ba2a-4ad9-bd95-465709c6e32a") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("f4a891c8-3a38-4126-b792-ee2952bc19cc") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("7227eb3c-8c94-4309-ab4f-61809d9ec0f6") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("c3ed31fc-ba2a-4ad9-bd95-465709c6e32a") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("f4a891c8-3a38-4126-b792-ee2952bc19cc") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("7227eb3c-8c94-4309-ab4f-61809d9ec0f6") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("c3ed31fc-ba2a-4ad9-bd95-465709c6e32a") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("f4a891c8-3a38-4126-b792-ee2952bc19cc") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   ATELIER ARCANE — Color & Type Foundations
   Quebec packaging & branding studio
   Brand: deep navy + warm terracotta, geometric sans display
   ------------------------------------------------------------
   FONTS
   - Display: Futura Bold (brand) → Google substitute "Jost"
     (geometric grotesque, near-Futura proportions). FLAGGED.
   - Body / UI: Barlow (exact brand match, free on Google Fonts)
   Load in HTML <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,500;1,600&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ---------- BRAND CORE ---------- */
  --navy:        #004970;   /* primary — BLEU #004970 (owl ring, wordmark, headings) */
  --terracotta:  #DC7B67;   /* accent — Orange #DC7B67 (owl eyes, tagline) */

  /* ---------- NAVY SCALE ---------- */
  --navy-900: #00263B;
  --navy-800: #003857;
  --navy-700: #004970;      /* = --navy */
  --navy-600: #005E8F;
  --navy-500: #1175A8;
  --navy-400: #4A97C0;
  --navy-300: #8BBBD6;
  --navy-200: #BFD8E8;
  --navy-100: #E3EEF5;
  --navy-050: #F1F7FB;

  /* ---------- TERRACOTTA SCALE ---------- */
  --terra-900: #8A3D2D;
  --terra-800: #A85040;
  --terra-700: #C0604C;
  --terra-600: #DC7B67;     /* = --terracotta */
  --terra-500: #E3917F;
  --terra-400: #EAA897;
  --terra-300: #F1C3B7;
  --terra-200: #F7DDD5;
  --terra-100: #FBEEE9;
  --terra-050: #FDF7F4;

  /* ---------- WARM NEUTRALS (paper) ---------- */
  --paper:    #FBF9F6;      /* page background — warm off-white */
  --paper-2:  #F4F0EA;      /* alt section / cards on paper     */
  --ink-900:  #16242E;      /* near-black, cool navy-tinted     */
  --ink-700:  #34454F;
  --ink-500:  #5C6B73;      /* secondary text                  */
  --ink-400:  #849299;
  --ink-300:  #AEB8BF;
  --line:     #E3DDD4;      /* hairline borders on paper        */
  --line-navy:#234E6B;      /* hairline borders on navy         */
  --white:    #FFFFFF;

  /* ---------- WEBSITE SECTION BANDS (from WWW mockup) ----------
     The live site rhythms full-bleed colour bands. Primary brand
     blue is the logo "sarcelle" (#134C71); bands add cyan, orange,
     bordeaux + a per-project portfolio palette. */
  --sarcelle:   #004970;   /* = brand blue BLEU #004970 (header/footer/approche) */
  --sarcelle-deep: #003857;
  --cyan:       #9FD4D0;   /* stats cards — eau / cyan clair */
  --cyan-deep:  #6FB8B2;
  --orange:     #E8743C;   /* tagline band — orange vif (punchier than logo terracotta) */
  --orange-deep:#CC5E2A;
  --bordeaux:   #A02828;   /* services band */
  --bordeaux-deep: #832020;
  --beige:      #EFE7DA;   /* hero "définition" beige */

  /* Portfolio per-project band colours */
  --pf-evernorth: #2F3A52;  /* navy */
  --pf-cotedusud: #7A7340;  /* olive / kaki */
  --pf-minizoos:  #9BB73A;  /* vert lime */
  --pf-mcal:      #E0A828;  /* jaune moutarde */
  --pf-goodbad:   #2D7A8A;  /* sarcelle moyen */

  /* ---------- SEMANTIC ---------- */
  --bg:           var(--paper);
  --bg-elevated:  var(--white);
  --bg-invert:    var(--navy-700);
  --fg1:          var(--ink-900);     /* primary text  */
  --fg2:          var(--ink-500);     /* secondary     */
  --fg3:          var(--ink-400);     /* tertiary/meta */
  --fg-invert:    #FFFFFF;
  --fg-invert-2:  #BFD4E3;            /* muted text on navy */
  --accent:       var(--terracotta);
  --accent-press: var(--terra-700);
  --link:         var(--navy-600);
  --focus:        var(--terra-600);
  --success:      #3F8F6B;
  --warning:      #C98A2E;
  --danger:       #C0503E;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, sans-serif;

  /* ---------- TYPE SCALE (1.250 major-third-ish, display-led) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;

  --leading-tight: 1.04;
  --leading-snug:  1.18;
  --leading-body:  1.6;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- RADII (restrained — packaging-print feel) ---------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (soft, warm-tinted) ---------- */
  --shadow-sm: 0 1px 2px rgba(16,40,60,.06), 0 1px 3px rgba(16,40,60,.08);
  --shadow-md: 0 4px 12px rgba(16,40,60,.08), 0 2px 4px rgba(16,40,60,.06);
  --shadow-lg: 0 16px 40px rgba(16,40,60,.12), 0 4px 10px rgba(16,40,60,.07);
  --shadow-navy: 0 18px 44px rgba(11,45,68,.28);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-in-out: cubic-bezier(.65,.05,.36,1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   Display = Jost (Futura). Headings are UPPERCASE, tight,
   heavy weight — matching the wordmark & packaging system.
   ============================================================ */

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--fg1);
  text-transform: uppercase;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--fg1);
  text-transform: uppercase;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--fg1);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--fg1);
}

/* Eyebrow / kicker — terracotta, wide-tracked, the brand's signature label */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
}

p, .p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg2);
}
.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--fg2);
}
.small { font-size: var(--text-sm); color: var(--fg3); }

/* Tagline lockup — italic Barlow, the "ANALYSER. CRÉER. PRODUIRE." voice */
.tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--terracotta);
}

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

.mono {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--text-sm);
}



  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--paper); overflow-x: hidden; color: var(--ink-900); }
  #root { overflow-x: clip; }
  section[id] { scroll-margin-top: 80px; }
  img { max-width: 100%; }
  ::selection { background: var(--terra-200); color: var(--navy-900); }
  [data-lucide] svg { width: 1em; height: 1em; }
  i[data-lucide] { align-items: center; justify-content: center; }
  .aa-reveal { opacity: 1; }
  @keyframes aaFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes aaPop { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes aaMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* editorial text link */
  .aa-link { position: relative; color: var(--navy-700); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; }
  .aa-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1.5px; background: var(--terracotta); transition: right 280ms var(--ease-out); }
  .aa-link:hover::after { right: 0; }
  .aa-link .aa-arrow { transition: transform 240ms var(--ease-out); }
  .aa-link:hover .aa-arrow { transform: translateX(4px); }

  /* work index row */
  .aa-workrow { transition: background 240ms var(--ease-out); }
  .aa-workrow .aa-thumb img { transition: transform 460ms var(--ease-out); }
  .aa-workrow:hover { background: var(--paper-2); }
  .aa-workrow:hover .aa-thumb img { transform: scale(1.05); }
  .aa-workrow:hover .aa-rowarrow { transform: translateX(5px); color: var(--terracotta); }
  .aa-rowarrow { transition: transform 240ms var(--ease-out), color 240ms var(--ease-out); }
  .aa-catstage:hover .aa-zoom { opacity: 1 !important; }
  .aa-catstage:hover { border-color: var(--navy-300); }

  /* underline form fields */
  .aa-field { width: 100%; border: none; border-bottom: 1.5px solid var(--line); background: transparent; padding: 12px 2px; font-family: var(--font-body); font-size: 16px; color: var(--ink-900); outline: none; transition: border-color 200ms var(--ease-out); border-radius: 0; }
  .aa-field::placeholder { color: var(--ink-300); }
  .aa-field:focus { border-color: var(--terracotta); }

  /* filter text tabs */
  .aa-tab { position: relative; background: none; border: none; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); padding: 6px 0; transition: color 200ms var(--ease-out); }
  .aa-tab:hover { color: var(--navy-700); }
  .aa-tab[data-active="true"] { color: var(--navy-700); }
  .aa-tab[data-active="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--terracotta); }

  /* ===== Tablet (≤980) ===== */
  @media (max-width: 980px) {
    .aa-desktop-nav { display: none !important; }
    .aa-burger { display: inline-flex !important; }
    .aa-3grid { grid-template-columns: 1fr 1fr !important; }
    .aa-hero-grid, .aa-mv-grid, .aa-terrain-grid, .aa-contact-grid, .aa-footer-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
    .aa-container { padding-left: 28px !important; padding-right: 28px !important; }
  }

  /* ===== Large phone / small tablet (≤720) ===== */
  @media (max-width: 720px) {
    .aa-3grid { grid-template-columns: 1fr !important; }
    .aa-modal { grid-template-columns: 1fr !important; max-height: 92vh !important; overflow-y: auto !important; }
    section { padding-top: 60px !important; padding-bottom: 60px !important; }
    .aa-hero-img { height: 300px !important; }
    .aa-workrow { grid-template-columns: 1fr !important; gap: 16px !important; }
    .aa-workrow .aa-rowarrow { display: none !important; }
    .aa-workrow .aa-thumb { order: -1; height: 200px !important; }
    .aa-catrow { grid-template-columns: 1fr !important; gap: 18px !important; }
    .aa-catrow > span:first-child { display: none !important; }
    .aa-catrow .aa-catstage { order: -1; height: 220px !important; }
    .aa-svc-row { grid-template-columns: 1fr !important; gap: 6px !important; }
    .aa-svc-row h3 { margin-top: 4px !important; }
    .aa-svc-items { grid-template-columns: 1fr !important; margin-top: 10px !important; }
    .aa-metabar { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
    .aa-metabar .aa-metadiv { display: none !important; }
  }

  /* ===== Small phone (≤430) ===== */
  @media (max-width: 430px) {
    .aa-container { padding-left: 20px !important; padding-right: 20px !important; }
  }

  @media (prefers-reduced-motion: reduce) { *, .aa-marquee-track { animation: none !important; transition: none !important; } }