/* Wavora · shared styles for every page: fonts, theme tokens, base, and the header with its
   language and theme switches. Each page keeps its own section styles. */
/* The fonts live on the site itself (OFL, from Google Fonts, 01/10): nothing is fetched from elsewhere.
   Each comes in two parts, the basic Latin set and the extended one, loaded only when a page needs it. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../../assets/fonts/cormorant-garamond-latin.woff2") 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; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../../assets/fonts/cormorant-garamond-latin-ext.woff2") 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; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url("../../assets/fonts/cormorant-garamond-italic-latin.woff2") 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; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url("../../assets/fonts/cormorant-garamond-italic-latin-ext.woff2") 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; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../../assets/fonts/instrument-sans-latin.woff2") 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; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../../assets/fonts/instrument-sans-latin-ext.woff2") 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; }

/* ── Theme tokens ────────────────────────────────────────────────────────── */
/* --accent draws lines and illustrations; --accent-text is the brass used for words, darker in the
   light theme so small text keeps its contrast. --sage and --clay are two supporting colours from
   the same family, for details (proposal, not in use yet). */
/* titles in Cormorant Garamond (chosen 01/10), text in Instrument Sans; both self-hosted, see @font-face above */
:root { --serif: "Cormorant Garamond", Georgia, serif; --sans: "Instrument Sans", "Segoe UI", sans-serif; --s: 0;
  --page: #070D0B; --ink: #F5F2E9; --muted: #D2D5CD; --accent: #D4BB89; --accent-text: #D9C396; --button: #E1C99E; --button-ink: #182B25; --button-hover: #EBD7B1;
  --sage: #9DB5A6; --clay: #D39373;
  /* the colour that stresses a title's key word: the water's (02/10, instead of brass) */
  --emph: #7FD0C4;
  /* one colour per service (1 Comptabilité, 2 Automatisation, 3 Stratégie et marketing, 4 Formations):
     --svc-N fills large shapes (discs), --svc-N-line draws thin lines and words on the paper,
     --svc-N-on is the colour of a drawing or a check mark set on the fill */
  --svc-1: #7EA6F2; --svc-2: #5CCB9C; --svc-3: #F28C4E; --svc-4: #F2C94C;
  --svc-1-line: var(--svc-1); --svc-2-line: var(--svc-2); --svc-3-line: var(--svc-3); --svc-4-line: var(--svc-4);
  /* each drawing on a disc takes a deep shade of that disc's own colour */
  --svc-1-on: #13295A; --svc-2-on: #093826; --svc-3-on: #4E1C05; --svc-4-on: #4F3904;
  /* the logbook: the paper the water turns into, its faint chart lines, the route and the rules */
  --paper: #0D1412; --calm: var(--paper); --chart: rgb(245 242 233 / .075); --route: rgb(245 242 233 / .32); --route-strong: rgb(245 242 233 / .8); --rule: rgb(245 242 233 / .12);
  --veil: rgb(9 16 14 / .38); --hero-veil: rgb(7 13 11 / .64); --glow: rgb(8 14 12 / .45); --curtain: #030605; --line-soft: rgb(212 187 137 / .5); color-scheme: dark; }
[data-theme="light"] {
  --page: #F2EEE5; --ink: #14322F; --muted: #34423C; --accent: #82683F; --accent-text: #6A5130; --button: #14322F; --button-ink: #F5F2EB; --button-hover: #1F4540;
  --sage: #56715F; --clay: #A2573B;
  --emph: #12726A;
  /* light: discs a little brighter so the deep shade of their own colour draws on them; the thin
     lines and words keep deeper tones for contrast on the paper */
  --svc-1: #5F8BE0; --svc-2: #34A77C; --svc-3: #E07A3E; --svc-4: #F1BE2E;
  --svc-1-line: #2D5BB9; --svc-2-line: #1C8560; --svc-3-line: #B9531D; --svc-4-line: #8F6604;
  --svc-1-on: #0F2150; --svc-2-on: #062A1C; --svc-3-on: #3F1403; --svc-4-on: #4F3904;
  --paper: #F4EFE4; --calm: var(--paper); --chart: rgb(20 50 47 / .085); --route: rgb(20 50 47 / .3); --route-strong: rgb(20 50 47 / .75); --rule: rgb(20 50 47 / .14);
  --veil: rgb(246 242 234 / .62); --hero-veil: rgb(246 242 234 / .55); --glow: rgb(246 242 234 / .85); --curtain: #E8E1D3; --line-soft: rgb(130 104 63 / .55); color-scheme: light; }
.theme-fade, .theme-fade * { transition: color .7s, background-color .7s, border-color .7s, fill .7s, stroke .7s, text-shadow .7s !important; }
/* a stored English choice hides the page for the instant it takes to swap the texts */
.i18n-wait body { visibility: hidden; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--ink); font: 400 17px/1.6 var(--sans); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* a link to skip straight to the content, shown when the keyboard reaches it */
.skip { position: fixed; z-index: 50; left: 12px; top: -64px; padding: 10px 16px; border-radius: 10px; background: var(--button); color: var(--button-ink); font-weight: 600; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }

/* the footer, the same on every page */
.site-footer { position: relative; display: grid; gap: 20px; padding: 44px 5vw 40px; border-top: 1px solid var(--rule); background: var(--paper); font-size: 15px; }
.f-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.site-footer .brand { width: 64px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer .f-book { padding-bottom: 3px; border-bottom: 1px solid var(--accent); color: var(--ink); }
/* the Instagram link (its address comes later) */
.site-footer .f-social { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; border: 1px solid var(--rule); color: var(--muted); transition: color .2s, border-color .2s; }
.site-footer .f-social:hover { color: var(--ink); border-color: var(--accent); }
.f-social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.f-social .dot { fill: currentColor; stroke: none; }
/* the contact email, beside the Instagram link */
.site-footer .f-mail { margin-left: auto; }
.site-footer .f-mail + .f-social { margin-left: 0; }
.f-small { font-size: 13.5px; color: var(--muted); }
.f-motion { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.f-motion:hover { color: var(--ink); }
@media (max-width: 760px) { .site-footer .f-social, .site-footer .f-mail { margin-left: 0; } }
/* until the Instagram account's address is known (02/10), its icon is not shown */
.site-footer .f-social[data-todo] { display: none; }

/* the key word of a title (src/shared/mot.js): one colour, the water's (--emph), or the one given in --c */
.mot { position: relative; display: inline-block; color: var(--c, var(--emph)); white-space: nowrap; }
.mot .l { display: inline-block; }
/* onde: the ripple through the letters */
.motion-on .mot[data-mot="onde"].go .l { animation: mot-onde 1.15s cubic-bezier(.3, .7, .3, 1) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes mot-onde { 0% { translate: 0 0; } 28% { translate: 0 -.13em; } 58% { translate: 0 .035em; } 100% { translate: 0 0; } }
/* plein: an outline, and the water that fills it */
.motion-on .mot[data-mot="plein"] { color: transparent; -webkit-text-stroke: 1px var(--c, var(--emph)); }
.mot .eau { position: absolute; inset: 0; color: var(--c, var(--emph)); -webkit-text-stroke: 0; clip-path: inset(100% 0 0 0); }
html:not(.motion-on) .mot .eau { display: none; }
/* verre: tinted glass full of water, the light sliding across it */
.mot[data-mot="verre"] { color: transparent; -webkit-background-clip: text; background-clip: text; filter: url(#mot-refract) drop-shadow(0 .04em .06em color-mix(in srgb, var(--c, var(--emph)) 35%, transparent));
  background-image: linear-gradient(100deg, var(--c, var(--emph)) 0 38%, color-mix(in srgb, var(--c, var(--emph)) 30%, white) 46%, #fff 49%, color-mix(in srgb, var(--c, var(--emph)) 30%, white) 52%, var(--c, var(--emph)) 60% 100%);
  background-size: 260% 100%; background-position: 0 0; }
.motion-on .mot[data-mot="verre"].go { animation: mot-lumiere 1.8s cubic-bezier(.45, 0, .25, 1) both; }
html:not(.motion-on) .mot[data-mot="verre"] { filter: none; }
@keyframes mot-lumiere { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* reflet: the reflection below the word, flipped about its middle so the two baselines meet */
.mot[data-mot="reflet"]::after { content: attr(data-t); position: absolute; left: 0; top: 54%; transform: scaleY(-1); opacity: .32; filter: url(#mot-ripple); pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 16%, #000 26%, transparent 88%); mask-image: linear-gradient(to bottom, transparent 16%, #000 26%, transparent 88%); transition: opacity 1.6s ease; }
.motion-on .mot[data-mot="reflet"]:not(.go)::after { opacity: 0; }
html:not(.motion-on) .mot[data-mot="reflet"]::after { filter: none; }
/* elec: a current runs through the letters, each flashing white-hot in turn */
.motion-on .mot[data-mot="elec"].go .l { animation: mot-elec 1s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--i) * 48ms); }
@keyframes mot-elec {
  0% { color: var(--c, var(--emph)); text-shadow: none; }
  12% { color: #FFFFFF; text-shadow: 0 0 4px #fff, 0 0 14px var(--c, var(--emph)), 0 0 30px var(--c, var(--emph)); }
  22% { color: color-mix(in srgb, var(--c, var(--emph)) 60%, #fff); text-shadow: 0 0 2px #fff, 0 0 10px var(--c, var(--emph)); }
  30% { color: #FFFFFF; text-shadow: 0 0 4px #fff, 0 0 18px var(--c, var(--emph)); }
  100% { color: var(--c, var(--emph)); text-shadow: 0 0 0 transparent; } }
/* encre: hidden until its drop of ink spreads */
.motion-on .mot[data-mot="encre"]:not(.go) { opacity: 0; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header { position: fixed; z-index: 10; inset: 0 0 auto; display: flex; align-items: center; gap: 40px; padding: 22px 5vw; color: var(--ink); transition: background-color .4s, box-shadow .4s; }
/* over the logbook the header takes the paper, so the text scrolling underneath stays out of the way */
.site-header.on-paper { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--rule); }
/* over the deep green sections the header keeps light words, whatever the theme */
.site-header.on-deep { --ink: #F5F2E9; --muted: #C9D2CC; --line-soft: rgb(245 242 233 / .4); --page: #0A1C18; --accent: #D4BB89; color: var(--ink);
  background: rgb(9 24 21 / .82); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgb(245 242 233 / .08); }
@media (max-width: 760px) { .site-header.on-deep { backdrop-filter: none; background: rgb(9 24 21 / .96); } }
.brand { display: block; width: 74px; color: var(--ink); }
.brand svg { display: block; width: 100%; height: auto; }
.site-header nav { display: flex; gap: 26px; font-size: 15px; }
.site-header nav a { text-decoration: none; padding: 4px 0; background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 1px no-repeat; transition: background-size .35s; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { background-size: 100% 1px; }
.header-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.small { font-size: 15px; text-decoration: none; padding: 9px 18px; border: 1px solid var(--line-soft); border-radius: 99px; backdrop-filter: blur(6px); }

/* FR / EN: a brass pill slides under the active language */
.lang-switch { position: relative; display: flex; height: 42px; padding: 4px; border: 1px solid var(--line-soft); border-radius: 99px; backdrop-filter: blur(6px); }
.lang-switch::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: 36px; border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 26%, transparent); transition: translate .45s cubic-bezier(.2, .7, .2, 1); }
html[lang="en"] .lang-switch::before { translate: 100% 0; }
.lang-switch button { position: relative; width: 36px; padding: 0; border: 0; border-radius: 99px; background: none; color: var(--muted);
  font: 600 12.5px/1 var(--sans); letter-spacing: .08em; cursor: pointer; transition: color .3s; }
.lang-switch button[aria-pressed="true"] { color: var(--ink); }

.theme-switch { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-soft); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); }
.theme-switch svg { width: 19px; height: 19px; grid-area: 1 / 1; transition: opacity .4s, transform .6s; }
.theme-switch .moon { opacity: 0; transform: rotate(-40deg) scale(.7); }
[data-theme="light"] .theme-switch .sun { opacity: 0; transform: rotate(40deg) scale(.7); }
[data-theme="light"] .theme-switch .moon { opacity: 1; transform: none; }

/* ── Mobile menu: ☰ turns into ✕, the panel covers the page ─────────────── */
.menu-toggle { display: none; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--line-soft); background: transparent; color: var(--ink); cursor: pointer; place-items: center; backdrop-filter: blur(6px); }
.menu-toggle span { grid-area: 1 / 1; width: 18px; height: 1.6px; border-radius: 2px; background: currentColor; transition: translate .4s cubic-bezier(.2, .7, .2, 1), rotate .4s cubic-bezier(.2, .7, .2, 1); }
.menu-toggle span:first-child { translate: 0 -3.5px; }
.menu-toggle span:last-child { translate: 0 3.5px; }
.menu-toggle[aria-expanded="true"] span:first-child { translate: 0 0; rotate: 45deg; }
.menu-toggle[aria-expanded="true"] span:last-child { translate: 0 0; rotate: -45deg; }
.menu-panel { position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; justify-content: center; gap: 44px; padding: 110px 28px 64px;
  background: radial-gradient(ellipse 80% 55% at 30% 40%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), var(--page);
  opacity: 0; transition: opacity .35s ease; }
.menu-panel[hidden] { display: none; }
.menu-panel.is-open { opacity: 1; }
.menu-panel nav { display: grid; }
.menu-panel nav a { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font: 500 44px/1.1 var(--serif); letter-spacing: -.01em; text-decoration: none; opacity: 0; translate: 0 14px;
  transition: opacity .5s ease, translate .7s cubic-bezier(.2, .7, .2, 1); }
.menu-panel nav a::after { content: "→"; font: 400 20px/1 var(--sans); color: var(--accent); }
.menu-panel nav a[aria-current="page"] { color: var(--accent); }
.menu-panel.is-open nav a { opacity: 1; translate: 0 0; }
.menu-panel.is-open nav a:nth-child(2) { transition-delay: .06s; }
.menu-panel.is-open nav a:nth-child(3) { transition-delay: .12s; }
.menu-panel .menu-cta { align-self: flex-start; display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 99px;
  background: var(--button); color: var(--button-ink); font-weight: 600; text-decoration: none; opacity: 0; transition: opacity .5s .2s ease; }
.menu-panel.is-open .menu-cta { opacity: 1; }
.menu-open, .menu-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .menu-panel nav a { translate: none; } }

@media (max-width: 760px) {
  .site-header { gap: 16px; padding: 14px 16px; }
  .brand { width: 64px; }
  .site-header nav, .small { display: none; }
  .header-end { gap: 8px; }
  /* buttons a finger can hit: 44 px */
  .lang-switch { height: 44px; }
  .lang-switch::before { width: 40px; }
  .lang-switch button { width: 40px; font-size: 13px; }
  .theme-switch, .menu-toggle { width: 44px; height: 44px; }
  .menu-toggle { display: grid; }
  /* a blur behind a fixed element is recomputed at every frame of a scroll: on a phone the header and
     its buttons get a nearly opaque ground instead, which reads the same */
  .lang-switch, .theme-switch, .menu-toggle { backdrop-filter: none; background: color-mix(in srgb, var(--page) 55%, transparent); }
  .site-header.on-paper { backdrop-filter: none; background: color-mix(in srgb, var(--paper) 97%, transparent); }
  /* the phone version (02/10): the header keeps the logo and ☰; the language and the theme move into the menu */
  .header-end > .lang-switch, .header-end > .theme-switch { display: none; }
  .menu-prefs { display: flex; align-items: center; gap: 12px; opacity: 0; transition: opacity .5s .25s ease; }
  .menu-panel.is-open .menu-prefs { opacity: 1; }
}

/* blocks that exist only on a phone, or only on a computer */
.m-only { display: none !important; }
@media (max-width: 760px) { .m-only { display: revert !important; } .d-only { display: none !important; } }