/* allonia.com: "Allonia fait désormais partie du groupe Pertimm".
   Pertimm "Obsidian Prism" identity: the tokens of pertimm.com (base.css), nothing loaded from
   elsewhere, no JavaScript. One light source (the Pertimm prism), one orchestrated moment on load
   (the ring of light is drawn from Allonia's turquoise to Pertimm's spectrum, then the light comes
   on), everything else is type and hairlines. */

/* ------------------------------------------------------------------ Fonts */
@font-face {
  font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap;
  src: url("fonts/mona-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;
}
@font-face {
  font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap;
  src: url("fonts/mona-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: "Newsreader"; font-style: italic; font-weight: 300 400; font-display: swap;
  src: url("fonts/newsreader-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: "Newsreader"; font-style: italic; font-weight: 300 400; font-display: swap;
  src: url("fonts/newsreader-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;
}

/* ------------------------------------------------------------------ Tokens */
:root {
  --ink: #05060b;
  --navy-deep: #06122d;
  --fg: #f0edf7;        /* headings, key text   17.5:1 on ink */
  --fg-2: #b4b7c9;      /* body                 10.2:1 */
  --fg-3: #8b90a7;      /* meta, captions        6.4:1 (smallest text colour) */
  --line: rgb(240 237 247 / .1);
  --line-2: rgb(240 237 247 / .18);
  --line-3: rgb(240 237 247 / .32);
  --orchid: #e49cf2;
  --iris: #a68cff;
  --glacier: #8ad4ff;
  --spectrum: linear-gradient(100deg, var(--orchid) 0%, var(--iris) 45%, var(--glacier) 100%);
  --glow: rgb(166 140 255 / .45);
  --focus: #c8b8ff;

  --font-sans: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  --gutter: clamp(1rem, .4rem + 3.2vw, 3.5rem);
  --max: 1360px;
  --header-h: clamp(4.5rem, 4.1rem + 1.4vw, 5.75rem);
  --band-pad: clamp(3.5rem, 2.6rem + 3.6vw, 6rem);

  --cut: 12px;
  --bevel: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  color-scheme: dark;
}

/* ------------------------------------------------------------------ Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: clamp(1rem, .97rem + .14vw, 1.0625rem);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgb(166 140 255 / .38); color: #fff; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute; z-index: 10; left: var(--gutter); top: .75rem;
  padding: .7rem 1.1rem; background: var(--fg); color: var(--ink);
  font-weight: 560; text-decoration: none; clip-path: var(--bevel); --cut: 8px;
  transform: translateY(-160%);
}
.skip-link:focus-visible { transform: none; outline: 2px solid var(--ink); outline-offset: -5px; }

/* ------------------------------------------------------------------ Header: Allonia by Pertimm */
.masthead { position: absolute; inset: 0 0 auto; z-index: 3; }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-h);
}
.lockup { display: flex; align-items: center; gap: .62em; font-size: clamp(.9rem, .84rem + .3vw, 1.125rem); }
.lockup__allonia { width: auto; height: .98em; }
.lockup__by {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: 1.2em; line-height: 1; color: var(--fg-3); translate: 0 -.06em;
}
.lockup__pertimm { width: auto; height: 1.72em; }

.masthead__nav { display: flex; align-items: center; gap: clamp(.75rem, .2rem + 1.6vw, 2rem); font-size: .875rem; }
.masthead__link {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem;
  color: var(--fg-2); font-weight: 520; text-decoration: none;
  transition: color .18s;
}
.masthead__link:hover { color: var(--fg); }
.masthead__link svg { width: .8rem; height: .8rem; }

.lang { display: flex; margin: 0; padding: 0; list-style: none; }
.lang a {
  position: relative; display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem;
  color: var(--fg-3); font-weight: 560; letter-spacing: .03em; text-decoration: none;
  transition: color .18s;
}
.lang a:hover { color: var(--fg); }
.lang a[aria-current="page"] { color: var(--fg); }
.lang a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: .55rem; width: 1rem; height: 1px; translate: -50% 0;
  background: var(--spectrum); box-shadow: 0 0 8px var(--glow);
}

/* ------------------------------------------------------------------ Hero */
.hero {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
  padding-top: var(--header-h);
}
.hero__grid {
  flex: 1;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, .4rem + 1.6vw, 2rem);
  align-items: center;
  padding-block: clamp(2rem, .5rem + 5vh, 5rem);
}
.hero__text { grid-column: 1 / span 7; grid-row: 1; position: relative; z-index: 1; }
.hero__visual { grid-column: 8 / -1; grid-row: 1; }

.hero__title {
  color: var(--fg);
  font-size: clamp(2.5rem, 1.15rem + 4.3vw, 5.6rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.hero__title em {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  letter-spacing: -.02em; white-space: nowrap;
}
.hero__lead {
  max-width: 43ch; margin-top: clamp(1.5rem, 1rem + 1.3vw, 2.4rem);
  font-size: clamp(1.125rem, 1.04rem + .36vw, 1.4rem); line-height: 1.5;
  text-wrap: pretty;
}
.hero__lead b { color: var(--fg); font-weight: 520; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(2rem, 1.4rem + 1.6vw, 3rem); }

/* Key facts: the acquisition in four lines, at the foot of the first screen */
.facts {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-2);
}
.facts::before {      /* the light running along the hairline */
  content: ""; position: absolute; left: 0; top: -1px; width: clamp(4rem, 12vw, 9rem); height: 1px;
  background: var(--spectrum); box-shadow: 0 0 12px var(--glow);
}
.facts__item { padding: 1.35rem 1.5rem 1.6rem; }
.facts__item:first-child { padding-left: 0; }
.facts__item + .facts__item { border-left: 1px solid var(--line); }
.facts dt { font-size: .8125rem; line-height: 1.35; color: var(--fg-3); }
.facts dd { margin-top: .45rem; color: var(--fg); font-size: 1.0625rem; font-weight: 520; line-height: 1.35; text-wrap: balance; }
.facts__note { display: block; margin-top: .2rem; color: var(--fg-3); font-size: .8125rem; font-weight: 400; }
.facts a { text-decoration: none; background: linear-gradient(var(--line-3), var(--line-3)) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-image .18s; }
.facts a:hover { background-image: var(--spectrum); }

/* ------------------------------------------------------------------ The eclipse: Pertimm's prism, Allonia's ring of light */
.eclipse { position: relative; width: min(100%, 36rem); aspect-ratio: 1; margin-inline: auto; }
.eclipse > * { position: absolute; inset: 0; margin: auto; }
.eclipse__bloom {
  inset: -18%;
  background: radial-gradient(closest-side, rgb(12 24 64 / .95), rgb(12 24 64 / .42) 55%, transparent 100%);
}
.eclipse__glow {
  width: 94%; height: 94%; border-radius: 50%;
  background:
    radial-gradient(closest-side, rgb(240 237 247 / .14), transparent 22%),
    conic-gradient(from 200deg, rgb(138 212 255 / 0), rgb(138 212 255 / .26), rgb(166 140 255 / .32), rgb(228 156 242 / .26), rgb(228 156 242 / 0) 45%, rgb(138 212 255 / 0) 70%, rgb(138 212 255 / .16) 88%, rgb(138 212 255 / 0));
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, rgb(0 0 0 / .5) 45%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 18%, rgb(0 0 0 / .5) 45%, transparent 100%);
}
.eclipse__lines {     /* diffraction lines through the hexagon's vertices */
  opacity: .7;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgb(230 225 255 / .42) 50%, transparent calc(50% + .5px)),
    linear-gradient(30deg, transparent calc(50% - .5px), rgb(200 190 255 / .3) 50%, transparent calc(50% + .5px)),
    linear-gradient(150deg, transparent calc(50% - .5px), rgb(190 220 255 / .3) 50%, transparent calc(50% + .5px));
  -webkit-mask-image: radial-gradient(closest-side, transparent 10%, #000 16%, rgb(0 0 0 / .3) 50%, transparent 92%);
  mask-image: radial-gradient(closest-side, transparent 10%, #000 16%, rgb(0 0 0 / .3) 50%, transparent 92%);
}
.eclipse__ring { width: 100%; height: 100%; overflow: visible; }
.eclipse__ring path { fill: none; stroke: url(#ring-light); }
.eclipse__ring .ring__halo { stroke-width: 5; opacity: .62; }
.eclipse__ring .ring__line { stroke-width: 1.3; }
.eclipse__prism {
  width: 38.5%; height: auto;
  filter: drop-shadow(0 0 1px rgb(200 190 255 / .55)) drop-shadow(0 0 18px rgb(166 140 255 / .38)) drop-shadow(0 0 60px rgb(228 156 242 / .16));
}

/* The one moment: the ring is drawn from Allonia's side and closes on Pertimm's, then the light comes on */
@media (prefers-reduced-motion: no-preference) {
  .eclipse__ring path { stroke-dasharray: 1; animation: ring-draw 1.9s var(--ease-in-out) .35s both; }
  .eclipse__glow, .eclipse__lines { animation: light-on 1.6s var(--ease-out) 1.75s both; }
  .eclipse__prism { animation: prism-in 1.2s var(--ease-out) .1s both; }
}
@keyframes ring-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes light-on { from { opacity: 0; scale: .9; } }
@keyframes prism-in { from { opacity: 0; scale: .94; } }

/* ------------------------------------------------------------------ Buttons (Pertimm: bevelled, light sweep) */
.btn {
  --btn-bg: transparent; --btn-fg: var(--fg); --btn-line: var(--line-3);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 3.5rem; padding: .9rem 1.6rem;
  color: var(--btn-fg); font-size: 1rem; font-weight: 560; line-height: 1.1; text-decoration: none; white-space: nowrap;
  background: var(--btn-line);
  clip-path: var(--bevel);
  transition: color .42s var(--ease-out), background-color .42s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--btn-bg); clip-path: var(--bevel); transition: background-color .42s var(--ease-out); }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .5) 48%, rgb(166 140 255 / .3) 52%, transparent 70%);
  transform: translateX(-120%); opacity: 0; transition: transform .9s var(--ease-out), opacity .3s;
}
.btn:hover::after { transform: translateX(120%); opacity: 1; }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -5px; border-radius: 0; }
.btn__icon { width: 1rem; height: 1rem; flex: none; transition: transform .42s var(--ease-out); }
.btn:hover .btn__icon { transform: translate(2px, -2px); }
.btn--primary { --btn-bg: var(--fg); --btn-fg: var(--ink); --btn-line: var(--fg); }
.btn--primary:hover { --btn-bg: #fff; --btn-line: #fff; }
.btn--primary:focus-visible { outline-color: var(--ink); }
.btn--primary::after { background: linear-gradient(105deg, transparent 32%, rgb(228 156 242 / .45) 45%, rgb(138 212 255 / .45) 55%, transparent 68%); }
.btn--ghost { --btn-bg: var(--ink); }
.btn--ghost:hover { --btn-bg: #0e1019; --btn-line: var(--fg); }

/* ------------------------------------------------------------------ Bands (contacts, about) */
.band { padding-block: var(--band-pad); border-top: 1px solid var(--line); }
.band__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, .4rem + 1.6vw, 2rem); row-gap: 2rem; }
.band__head { grid-column: 1 / span 4; }
.band__body { grid-column: 5 / -1; }
.band__title {
  color: var(--fg); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); font-weight: 500;
  line-height: 1.08; letter-spacing: -.038em; text-wrap: balance;
}
.band__intro { max-width: 34ch; margin-top: 1rem; color: var(--fg-3); }

/* Who to contact */
.contacts { border-top: 1px solid var(--line-2); }
.contacts__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .35rem 2rem;
  padding-block: 1.3rem; border-bottom: 1px solid var(--line);
}
.contacts dt { color: var(--fg-2); }
.contacts dd { justify-self: end; text-align: right; }
.contacts__value {
  color: var(--fg); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 520; letter-spacing: -.01em;
  text-decoration: none;
  background: linear-gradient(var(--line-3), var(--line-3)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: background-image .18s;
}
.contacts__value:hover { background-image: var(--spectrum); }
.contacts__value svg { display: inline-block; width: .75em; height: .75em; margin-left: .3em; vertical-align: .02em; color: var(--fg-3); }

/* About: the two companies, press-release style */
.about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 1rem + 3vw, 4rem); }
.about__item { padding-top: 1.5rem; border-top: 1px solid var(--line-2); }
.about__item h3 { display: flex; align-items: center; min-height: 2rem; }
.about__logo { width: auto; }
.about__logo--pertimm { height: 2rem; }
.about__logo--allonia { height: 1.05rem; }
.about__item p { max-width: 52ch; margin-top: 1.1rem; }
.about__item .text-link { display: inline-block; margin-top: 1rem; }
.text-link {
  color: var(--fg); font-weight: 520; text-decoration: none;
  background: linear-gradient(var(--line-3), var(--line-3)) 0 100% / 100% 1px no-repeat; padding-bottom: 2px;
  transition: background-image .18s;
}
.text-link:hover { background-image: var(--spectrum); }
.text-link svg { display: inline-block; width: .7em; height: .7em; margin-left: .3em; vertical-align: .05em; color: var(--fg-3); }

/* ------------------------------------------------------------------ Footer: legal notice */
.footer { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem; border-top: 1px solid var(--line); font-size: .875rem; line-height: 1.6; color: var(--fg-3); }
.footer__title { color: var(--fg); font-size: 1rem; font-weight: 560; letter-spacing: -.01em; }
.legal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 2rem; margin-top: 1.5rem; }
.legal dt { color: var(--fg-2); font-weight: 540; }
.legal dd { margin-top: .4rem; }
.legal a { color: var(--fg-2); text-decoration-color: var(--line-3); text-underline-offset: .2em; }
.legal a:hover { color: var(--fg); text-decoration-color: currentColor; }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.footer__logo { width: auto; height: 1.9rem; }

/* ------------------------------------------------------------------ Responsive */
@media (max-width: 1100px) {
  .hero__text { grid-column: 1 / span 8; }
  .hero__visual { grid-column: 8 / -1; }
  .facts__item { padding-inline: 1.1rem; }
  .legal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts__item:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts__item:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .hero { min-height: 0; }
  .hero__grid { padding-block: 0 clamp(2.5rem, 2rem + 3vw, 3.5rem); }
  .hero__visual { grid-column: 1 / -1; grid-row: 1; margin-bottom: clamp(.5rem, -1rem + 5vw, 1.5rem); }
  .hero__text { grid-column: 1 / -1; grid-row: 2; }
  .eclipse { width: min(62vw, 21rem); }
  .band__head, .band__body { grid-column: 1 / -1; }
  .about { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .masthead__link { display: none; }
  .facts { grid-template-columns: 1fr; }
  .facts__item, .facts__item:first-child, .facts__item:nth-child(3), .facts__item + .facts__item { padding: 1rem 0 1.1rem; border-left: 0; }
  .facts__item + .facts__item { border-top: 1px solid var(--line); }
  .facts__item { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
  .facts dd { margin-top: 0; }
  .hero__actions .btn { flex: 1 1 100%; }
  .contacts__row { grid-template-columns: 1fr; }
  .contacts dd { justify-self: start; text-align: left; }
  .legal { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .facts__item { grid-template-columns: 1fr; gap: .3rem; }
}
@media (max-width: 359px) {     /* 320px: WCAG reflow width (1280px at 400 % zoom) */
  .lockup { font-size: .75rem; }
  .hero__title { font-size: 2.25rem; }
}

/* ------------------------------------------------------------------ Print: a clean one-page notice */
@media print {
  :root { --fg: #07102b; --fg-2: #3a4360; --fg-3: #58617d; --line: #d9d8e2; --line-2: #c9c8d4; --line-3: #a3a8bb; }
  body { background: #fff; }
  .hero { min-height: 0; }
  .hero__visual, .hero__actions, .lang, .masthead__link, .skip-link { display: none; }
  .hero__text { grid-column: 1 / -1; }
  .masthead { position: static; }
  .lockup__allonia, .lockup__pertimm, .about__logo, .footer__logo { filter: invert(1) hue-rotate(180deg); }
  .facts::before { display: none; }
  .hero__grid { padding-block: 2rem 1.5rem; }
  .hero__title { font-size: 2.75rem; }
  .band, .footer { padding-block: 1.75rem; }
  .band__grid { row-gap: 1rem; }
  .contacts__row, .about__item, .legal > div, .footer__bottom { break-inside: avoid; }
  a { text-decoration: none; }
}