/* ============================================================
   VITALITY ATLAS · va.css · v1.46 · 10.10.2026
   One standard for every page: tokens (day / night), header,
   language pills, day-night switch, footer line, archive quote.
   Loaded LAST in <head> so the tokens win on every page.
   Canon page: /canon/ (unlisted).
   ============================================================ */

/* ---------- 1 · TOKENS · warm paper (day) ---------- */
:root{
  --indigo:#5B51D8; --btn:#5B51D8; --deep:#3a3370;
  --gold:#C9A227; --goldtxt:#7D6210; --golddeep:#A07E12; --goldsoft:#E6D9A8;
  --paper:#F5F0E8; --card:#FCF9F3; --ivory:#FAF6EE;
  --ink:#2C2820; --soft:#6B6358;
  --line:#E6DFD0; --line2:#D9D0BE; --line3:#D9D0BE;
  --tint:#FBF6E8; --tint2:#FFF6D6; --tintn:#EFE8DA; --tintg:#FBF3DC; --tinti:#F3F1FC;
  --wash:rgba(201,162,39,.07);
  --band:#2C2820; --onband:#F1EBDD; --onband2:#D9CFBC; --ongold:#2C2820;
  --ok:#2E7D46; --bad:#C0392B; --oktint:#F1F5F1;
  --shadow:44,40,32;
  color-scheme:light;
}
/* ---------- 1b · TOKENS · night ---------- */
:root[data-theme="dark"]{
  --indigo:#8D85EC; --deep:#2A2650;
  --goldtxt:#D9B13A; --golddeep:#D9B13A; --goldsoft:#5A4A1C;
  --paper:#17140F; --card:#211D16; --ivory:#1C1913;
  --ink:#EFE8D8; --soft:#B8AE9B;
  --line:#332D21; --line2:#40382A; --line3:#40382A;
  --tint:#2A2418; --tint2:#332B18; --tintn:#211D16; --tintg:#2A2418; --tinti:#262142;
  --wash:rgba(201,162,39,.09);
  --band:#322C21; --onband:#F1EBDD; --onband2:#D9CFBC; --ongold:#17140F;
  --ok:#6FCF8F; --bad:#E07070; --oktint:#1F2E24;
  --shadow:0,0,0;
  color-scheme:dark;
}
html{background:var(--paper);}
body{background:var(--paper); color:var(--ink);}

/* cards: cream, never flashy white · slimmer */
.card{background:var(--card);}
@media (max-width:640px){ .card{padding-left:16px; padding-right:16px;} }

/* no balanced line-breaking: sentences break only where they must (Mac browsers) */
*,*::before,*::after{text-wrap:normal;}
h1,h2,h3,p,li,.sub,.intro,.lead,.hook,.kick,.kicker,.tg,.gl{text-wrap:normal;}

/* ---------- 2 · HEADER · eagle + name · Menu ▾ · path · 5 languages + switch ---------- */
nav.va{position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:16px 0 10px; margin:0 0 4px; background:transparent; border:0;
  width:min(100vw - 40px, 1120px); margin-left:calc((100% - min(100vw - 40px, 1120px)) / 2);}
nav.va .brand{display:inline-flex; align-items:center; gap:9px; text-decoration:none; border:0; color:var(--goldtxt); order:1; flex-shrink:0;}
nav.va .brand img{width:52px; height:auto; display:block;}
:root[data-theme="dark"] nav.va .brand img{filter:brightness(1.15);}
nav.va .brand b{font-family:'Newsreader',Georgia,serif; font-weight:600; letter-spacing:.14em; font-size:13px; color:var(--goldtxt); white-space:nowrap;}
nav.va .mb{order:2; appearance:none; -webkit-appearance:none; border:1.5px solid var(--line2); background:transparent; color:var(--ink); font-family:'Poppins',system-ui,sans-serif; font-size:12.5px; font-weight:500; padding:3px 10px 3px 9px; border-radius:99px; cursor:pointer; min-height:26px; line-height:1.2; margin:0 2px 0 0; white-space:nowrap;}
nav.va .mb::after{content:"\25BE"; margin-left:6px; font-size:11px; color:var(--soft);}
nav.va .mb[aria-expanded="true"]{border-color:var(--gold); color:var(--indigo); background:var(--card);}
nav.va .mb[aria-expanded="true"]::after{content:"\25B4";}
nav.va .mp{position:absolute; left:0; top:calc(100% - 4px); z-index:60; min-width:260px; max-width:min(92vw,360px); background:var(--card); border:1px solid var(--line2); border-radius:14px; padding:10px 8px; box-shadow:0 14px 34px rgba(var(--shadow),.18); font-family:'Poppins',system-ui,sans-serif; font-size:14.5px;}
nav.va .mp[hidden]{display:none;}
nav.va .mp ul{list-style:none; margin:0; padding:0;}
nav.va .mp ul.lv1{margin-left:14px; border-left:1.5px solid var(--line); padding-left:8px;}
nav.va .mp ul.lv2{margin-left:12px; border-left:1.5px solid var(--line); padding-left:8px; font-size:13.5px;}
nav.va .mp .row{display:flex; align-items:center; justify-content:space-between; gap:8px;}
nav.va .mp a{display:block; flex:1; padding:7px 10px; border-radius:8px; color:var(--ink); text-decoration:none; border:0;}
nav.va .mp ul.lv0 > li > .row > a{font-weight:600;}
nav.va .mp a:hover{background:var(--tinti); color:var(--indigo);}
nav.va .mp a[aria-current="page"]{color:var(--indigo); background:var(--tintg);}
nav.va .mp .tg{appearance:none; border:1px solid var(--line2); background:transparent; color:var(--soft); width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:15px; line-height:1; padding:0; flex-shrink:0;}
nav.va .mp .tg:hover{border-color:var(--gold); color:var(--indigo);}
nav.va .crumb{order:3; display:flex; align-items:center; flex-wrap:wrap; gap:2px 6px; list-style:none; margin:0 auto; padding:0; font-family:'Poppins',system-ui,sans-serif; font-size:13px; color:var(--soft);}
nav.va .crumb li{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; max-width:46vw; overflow:hidden; text-overflow:ellipsis;}
nav.va .crumb li a, nav.va .crumb li span{overflow:hidden; text-overflow:ellipsis;}
nav.va .crumb li + li::before{content:"\203A"; color:var(--line2); font-size:15px;}
nav.va .crumb a{color:var(--soft); text-decoration:none; border-bottom:1px solid transparent;}
nav.va .crumb a:hover{color:var(--indigo); border-bottom-color:var(--gold);}
nav.va .crumb span[aria-current]{color:var(--indigo); font-weight:500;}
nav.va .langs{order:4; display:flex; align-items:center; gap:2px; flex-wrap:nowrap; margin-left:auto; flex-shrink:0;}
nav.va .langs button{appearance:none; -webkit-appearance:none; border:0; border-bottom:1.5px solid transparent; border-radius:0; background:transparent; color:var(--soft); font-family:'Poppins',system-ui,sans-serif; font-size:12.5px; font-weight:500; letter-spacing:.04em; padding:3px 6px 2px; cursor:pointer; min-height:26px; line-height:1.2; margin:0; box-shadow:none;}
nav.va .langs button:hover{color:var(--indigo);}
nav.va .langs button.on{color:var(--indigo); font-weight:600; border-bottom-color:var(--gold); background:transparent;}
nav.va .langs button.tt,nav.va .langs .tt{position:relative; width:44px; height:24px; min-height:24px; border:1.5px solid var(--line2); background:var(--card); border-radius:99px; cursor:pointer; margin-left:4px; padding:0; flex-shrink:0;}
nav.va .tt .k{position:absolute; left:2px; top:2px; width:17px; height:17px; border-radius:50%; background:var(--gold); color:#2C2820; font-size:11px; line-height:17px; text-align:center; font-family:Georgia,serif; transition:transform .2s; transform:none;}
nav.va .tt .k::after{content:"\2600";}
:root[data-theme="dark"] nav.va .tt .k{transform:translateX(20px); background:var(--indigo); color:#fff;}
:root[data-theme="dark"] nav.va .tt .k::after{content:"\263E";}
nav.va .langnote{display:none;}
/* phone: row 1 · eagle + name · Menu · languages + switch — row 2 · the path */
@media (max-width:760px){
  nav.va{width:auto; margin-left:0; gap:6px 8px; padding:12px 0 8px;}
  nav.va .brand{order:1; margin-right:auto; gap:8px;}
  nav.va .brand img{width:40px;}
  nav.va .brand b{font-size:10.5px; letter-spacing:.1em;}
  nav.va .langs{order:2; gap:0; margin-left:auto;}
  nav.va .langs button{font-size:11.5px; padding:3px 5px 2px; min-height:23px;}
  nav.va .langs button.tt,nav.va .langs .tt{width:38px; height:21px; min-height:21px; margin-left:2px;}
  nav.va .tt .k{width:14px; height:14px; font-size:10px; line-height:14px; top:2px;}
  :root[data-theme="dark"] nav.va .tt .k{transform:translateX(17px);}
  nav.va .brk{display:block; order:3; flex-basis:100%; width:100%; height:0;}
  nav.va .mb{order:4; margin:0; font-size:12px; padding:3px 8px; min-height:24px;}
  nav.va .crumb{order:5; flex:1 1 0; min-width:0; margin:0; font-size:12.5px; flex-wrap:nowrap; overflow:hidden;}
  nav.va .mp{left:0; right:0; max-width:none; top:calc(100% - 2px);}
}
@media (max-width:340px){ nav.va .brand b{display:none;} }
/* IT / ES pages: the watch-out line — exchanges with Marc happen in EN · FR · DE */
.va-watch{margin:4px 0 18px; padding:10px 14px; background:var(--tintg); border-left:6px solid var(--gold); border-radius:12px; font-family:'Poppins',system-ui,sans-serif; font-size:14px; line-height:1.5; color:var(--ink);}
.va-watch b{margin-right:4px;}

/* ---------- 3 · FOOTER LINE · same on every page ---------- */
.vfoot.va{margin-top:56px; padding-top:16px; border-top:1px solid var(--line2); font-family:'Poppins',system-ui,sans-serif; font-size:13.5px; line-height:1.6; color:var(--soft); display:flex; justify-content:space-between; gap:6px 18px; flex-wrap:wrap; text-align:left;}
.vfoot.va a{color:var(--indigo); text-decoration:none; border-bottom:1px solid transparent;}
.vfoot.va a:hover{border-bottom-color:var(--gold);}
.vfoot.va .soc{display:inline-flex; gap:10px; margin-left:8px;}
.vfoot.va .soc:empty{display:none;}
footer .vfoot.va{margin-top:18px;}

/* ---------- 3b · SYMBOL DISC · pale emoji stay visible (05.10.2026) ---------- */
.va-sym{display:inline-flex; align-items:center; justify-content:center; width:1.5em; height:1.5em; border-radius:50%; background:#E4D8BC; box-shadow:inset 0 0 0 1px rgba(160,126,18,.22); vertical-align:middle; line-height:1; margin:0 .08em 0 0; font-style:normal; position:relative; top:-.06em;}
:root[data-theme="dark"] .va-sym{background:#3E3526; box-shadow:inset 0 0 0 1px rgba(217,177,58,.28);}
nav.va .mp .va-sym{width:1.45em; height:1.45em;}
a.cta .va-sym, .btn .va-sym, button .va-sym, .navgate .va-sym{background:rgba(255,255,255,.26); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);}

/* ---------- 4 · ARCHIVE QUOTE · card (d) · text centered · author right (canon 05.10.2026) ---------- */
.arch{position:relative; display:block; max-width:430px; margin:58px auto 52px; padding:20px 20px 18px; color:var(--ink);
  background:linear-gradient(135deg,#FBF6EA 0%,#F3E9D4 100%); border:1px solid rgba(160,126,18,.38); border-radius:10px;
  box-shadow:0 14px 30px rgba(var(--shadow),.16), inset 0 0 0 6px rgba(255,253,246,.9), inset 0 0 0 7px rgba(160,126,18,.28), inset 0 0 48px rgba(160,126,18,.10);
  transform:rotate(-9deg); font-family:'Newsreader',Georgia,serif; font-size:20px; line-height:1.4; font-style:italic; font-weight:400;}
.arch::before{content:""; position:absolute; inset:0; border-radius:10px; pointer-events:none; opacity:.55; background-image:radial-gradient(rgba(160,126,18,.10) .6px, transparent .7px); background-size:5px 5px;}
.arch .in{display:block; text-align:center; position:relative; z-index:1; padding:18px 20px; border-radius:6px; background:linear-gradient(135deg,#FFFDF7 0%,#F8F1E1 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 22px rgba(120,90,20,.10), 0 1px 2px rgba(var(--shadow),.06);}
.arch cite{display:block; position:relative; z-index:1; margin:12px 4px 0; text-align:right; font-family:'Poppins',system-ui,sans-serif; font-size:12px; font-weight:500; font-style:normal; color:var(--goldtxt); letter-spacing:.14em; text-transform:uppercase;}
.arch cite::before{content:"\2014\00a0";}
.arch .pc{position:absolute; width:26px; height:26px; background:linear-gradient(135deg, rgba(201,162,39,.55), rgba(160,126,18,.75)); opacity:.9; z-index:2;}
.arch .pc.tl{left:-1px; top:-1px; clip-path:polygon(0 0,100% 0,0 100%); border-top-left-radius:10px;}
.arch .pc.br{right:-1px; bottom:-1px; clip-path:polygon(100% 0,100% 100%,0 100%); border-bottom-right-radius:10px;}
.arch.r{transform:rotate(8deg);}
.arch p{margin:0; text-align:center;}
.arch .ln, .arch .in .s{display:block; text-wrap:balance;}
.arch .in h1 .s{display:block;}
.arch .flow{text-wrap:balance;} .arch .flow .ln{display:inline;} .arch .flow .ln+.ln::before{content:' ';}
:root[data-theme="dark"] .arch{background:linear-gradient(135deg,#2B2519 0%,#231E14 100%); border-color:rgba(217,177,58,.35);
  box-shadow:0 14px 30px rgba(0,0,0,.45), inset 0 0 0 6px rgba(40,34,24,.9), inset 0 0 0 7px rgba(217,177,58,.3), inset 0 0 48px rgba(0,0,0,.25);}
:root[data-theme="dark"] .arch .in{background:linear-gradient(135deg,#352D1F 0%,#2C2518 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 22px rgba(0,0,0,.25);}
@media (max-width:640px){ .arch{font-size:18px; transform:rotate(-7deg); margin:50px auto 46px; max-width:330px;} .arch.r{transform:rotate(6deg);} .arch .in{padding:16px 16px;} }

/* wide screens: the archive card steps aside, text flows next to it; alternate side with .r · phones: between the blocks */
@media (min-width:1100px){
  .arch{float:right; width:360px; max-width:360px; margin:48px -110px 84px 60px; transform:rotate(8deg);}
  .arch.r{float:left; margin:48px 60px 84px -110px; transform:rotate(-9deg);}
  h2,h3,section,.bleed,.band,footer,.band,.card,table,.tablewrap,footer,.vfoot{clear:both;}
}
@media (min-width:760px) and (max-width:1099px){ .arch{max-width:460px;} }
@media print{ .arch{transform:none; box-shadow:none;} nav.va .langs{display:none;} }

/* ---------- 5 · LANDSCAPE · a wide screen uses its width: larger type, wider column, names on one row (canon 06.10.2026) ---------- */
@media (min-width:1100px){
  body{zoom:1.08;}
  body .wrap, body .page{max-width:960px;}
  .scroll table.t td:first-child, .scroll table.t th:first-child{max-width:none; white-space:nowrap;}
  table.t td, table.t th{white-space:nowrap;}
}
@media (min-width:1440px){
  body{zoom:1.16;}
  body .wrap, body .page{max-width:1040px;}
  .arch{margin-right:-150px;} .arch.r{margin-right:60px; margin-left:-150px;}
}
/* ---------- 6 · WIDE SCREENS · sentences flow into paragraphs, cards pair up (canon 10.10.2026) ----------
   Only where the shell has marked the page (html.va-wide). Phones keep the short lines. */
@media (min-width:820px){
  html.va-wide br.fl{display:none;}
  html.va-wide .fls{margin-right:.16em;}
}
@media (min-width:1100px){
  /* a comfortable measure for running text (about 85 characters) */
  html.va-wide :is(.wrap,.page) :is(p,.lead,.lead2,.intro){max-width:48em;}
  html.va-wide :is(.hero,.sendbox,footer,.arch,.va-grid,.eng,.icf,.steps,.strip,.b4head,.pn) :is(p,.lead,.lead2,.intro){max-width:none;}
  html.va-wide :is(.wrap,.page) > div > ul.pts{max-width:48em;}
  html.va-wide :is(.b4read,.bis,.saveline) > span[data-l]{display:block; max-width:48em;}
  /* runs of cards: two by two (the shell wraps them in .va-grid) */
  html.va-wide .va-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 28px; margin:26px 0; clear:both; align-items:stretch;}
  html.va-wide .va-grid > *{margin:0 !important; max-width:none;}
  html.va-wide .va-grid > :last-child:nth-child(odd){grid-column:1 / -1;}
  /* Ethics: the commitments and the data lines, two columns */
  html.va-wide .eng{display:block; column-count:2; column-gap:40px;}
  html.va-wide .eng > div{break-inside:avoid;}
  /* Wind Rose result: the rose on the left, the reading and the four zones beside it */
  html.va-wide section#result #rw{float:left; width:min(464px,46%); margin:2px 36px 22px 0;}
  html.va-wide section#result > .card.reading, html.va-wide section#result > .card:has(> #rfam){display:flow-root; clear:none; margin-top:0;}
  html.va-wide section#result > #ravg, html.va-wide section#result > #rleg{text-align:left;}
  html.va-wide section#result > #prio{clear:both; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 22px; align-items:stretch;}
  html.va-wide section#result > #prio > *{grid-column:1 / -1;}
  html.va-wide section#result > #prio > button.pk.add{grid-column:auto;}
}
html,body{overflow-x:hidden;}