/* Sound 41 — the public website's one stylesheet. Phone first: the base rules are the
   phone's, each media query widens. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2"); }
/* Subset to the wordmark's seven glyphs ("SOUND 41"). */
@font-face { font-family: "Michroma"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/michroma-wordmark.woff2") format("woff2"); }
/* Subset to French letters, digits and punctuation. */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/caveat-500-french.woff2") format("woff2"); }

:root {
  --ink: #06131a;
  --ink-2: #0c1e27;
  --ink-3: #132a35;
  --cream: #f4f1ea;
  --paper: #faf8f3;
  --lime: #d8ef5b;
  --lime-hover: #e6f77e;
  --text: #13202a;
  --muted: #535e68;
  --on-dark: rgb(255 255 255 / .82);
  --on-dark-soft: rgb(255 255 255 / .72);
  --line: #e3ded3;
  --line-dark: rgb(255 255 255 / .14);
  --error: #ff9d8f;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Michroma", var(--sans);
  --hand: "Caveat", "Segoe Print", cursive;

  --radius: 8px;
  --radius-lg: 12px;
  --gutter: clamp(20px, 4vw, 56px);
  --max: 1240px;
  --nav-h: 96px;
  --focus: var(--ink);
}

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font: 400 1rem/1.6 var(--sans);
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

picture, img { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong, b { font-weight: 500; }
/* No italic: Inter is only ever upright; an emphasis is marked by colour or a highlight. */
em { font-style: normal; }

/* The focus ring follows the ground: ink on light, lime on dark. */
.dark, .on-dark { --focus: var(--lime); color: #fff; }
.dark { background: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

[id] { scroll-margin-top: 24px; }

.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--lime); color: var(--ink); padding: 10px 16px; border-radius: 6px;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* Line-drawn icons. */
.i { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Type ---------- */

.eyebrow {
  font-size: .75rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  margin-bottom: 18px;
}
.eyebrow--sm { font-size: .6875rem; margin-bottom: 12px; }
.dark .eyebrow { color: var(--lime); }

/* Headlines and display text: Inter, tighter as it grows. */
.h1, .h2, .h3 { font-weight: 400; text-wrap: balance; }
.display { font-weight: 300; letter-spacing: -.015em; }
.h1 { font-size: clamp(2.375rem, 5vw, 4.25rem); line-height: 1.04; letter-spacing: -.035em; }
.h2 { font-size: clamp(1.875rem, 3.1vw, 2.65rem); line-height: 1.08; letter-spacing: -.03em; }
.h3 { font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.15; letter-spacing: -.025em; }
.dark :is(.h1, .h2) em { color: var(--lime); }
.h2 br, .h3 br { display: none; }

.hand { font-family: var(--hand); font-weight: 500; line-height: 1.05; color: var(--lime); text-shadow: 0 1px 14px rgb(6 19 26 / .9); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 44px; padding: 14px 26px;
  border-radius: 999px; border: 0;
  font: 600 .95rem/1 var(--sans);
  text-decoration: none; cursor: pointer;
  background: var(--lime); color: var(--ink);
  transition: background-color .2s;
}
.btn:hover { background: var(--lime-hover); }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-3); }
.btn--sm { padding: 11px 20px; font-size: .85rem; }

/* ---------- Header and navigation ---------- */

.site-header { position: absolute; inset: 0 0 auto; z-index: 10; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--nav-h); }

.logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; white-space: nowrap;
  font: 400 1.05rem/1 var(--display); letter-spacing: .06em;
}
.logo svg { width: 32px; height: 26px; }

.nav__cta { display: none; }
.nav__toggle {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-dark); background: transparent; color: #fff; cursor: pointer;
}
.nav__toggle svg { width: 20px; height: 20px; }

/* The phone's menu is a popover: the browser opens it, closes it on Escape or an outside tap,
   and keeps the toggle's aria-expanded right. */
.nav__links {
  position: fixed; inset: calc(var(--nav-h) - 8px) var(--gutter) auto; width: auto; height: auto; margin: 0;
  padding: 8px 20px; border: 1px solid var(--line-dark); border-radius: var(--radius-lg);
  background: var(--ink-2); color: #fff;
}
.nav__links li + li { border-top: 1px solid var(--line-dark); }
.nav__links a { display: block; padding: 14px 0; text-decoration: none; font-weight: 500; }
.nav__links a[aria-current="page"] { color: var(--lime); }

/* ---------- Hero (home) ---------- */

.hero { position: relative; overflow: hidden; padding-top: var(--nav-h); }
.hero__media { position: absolute; inset: 0 0 auto; height: min(62vh, 560px); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 30%; }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(6 19 26 / .55) 0%, rgb(6 19 26 / 0) 22%),
    linear-gradient(0deg, var(--ink) 0, var(--ink) calc(100% - min(62vh, 560px)), rgb(6 19 26 / 0) calc(100% - min(62vh, 560px) + 45%));
}
.hero__body { position: relative; padding-block: calc(min(62vh, 560px) - 210px) 64px; }
.hero__content { max-width: 640px; }
.hero__title { margin-bottom: 28px; }
.hero__lead { color: rgb(255 255 255 / .86); line-height: 1.65; max-width: 470px; margin-bottom: 36px; }
.hero__note { display: none; }

/* ---------- Inner pages' head ---------- */

.page-head { position: relative; overflow: hidden; padding-top: var(--nav-h); }
.page-head::after {
  content: ""; position: absolute; right: -10%; top: -30%; width: 60%; height: 140%;
  background: radial-gradient(closest-side, rgb(216 239 91 / .12), transparent);
  pointer-events: none;
}
.page-head .container { position: relative; z-index: 1; padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 110px); }
.page-head .h1 { max-width: 900px; }
/* In the column, under the title, its right end on the column's right edge. */
.page-head__wave { display: block; width: min(320px, 60%); height: auto; margin: 20px 0 calc(20px - clamp(56px, 8vw, 110px)) auto; color: var(--lime); opacity: .8; stroke-width: 2; }

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

.section { padding-block: clamp(56px, 8vw, 104px); }
.section:not(.dark) + .section:not(.dark) { border-top: 1px solid var(--line); }
.section-head { margin-bottom: clamp(32px, 4vw, 48px); max-width: 720px; }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); }

.grid { display: grid; gap: 18px; }

/* Stakes (home) */
.card { overflow: hidden; border-radius: var(--radius); }
.thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 20px 20px 26px; }
.card h3 { font-size: 1.0625rem; font-weight: 400; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 10px; }
.card p { font-size: .9rem; color: var(--muted); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card { transition: transform .25s, box-shadow .25s; }
  .card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgb(6 19 26 / .35); }
  .thumb img { transition: transform .6s ease; }
  .card:hover .thumb img { transform: scale(1.03); }
}

/* Method (home) */
.method { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
.method__intro .h2 { margin-bottom: 22px; }
.method__intro p:last-child { color: var(--on-dark); font-size: .95rem; max-width: 560px; }
.steps { display: grid; gap: 40px 32px; }
.step .thumb { border-radius: 6px; margin-bottom: 20px; }
.step__num {
  display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 14px;
  border-radius: 50%; background: var(--lime); color: var(--ink);
  font-size: .7rem; font-weight: 700;
}
.step h3 { font-size: 1.05rem; font-weight: 300; line-height: 1.3; margin-bottom: 12px; }
.step p { font-size: .875rem; line-height: 1.55; color: var(--on-dark-soft); }

/* Innovations and the enriched experience (home) */
.innov { display: grid; padding-block: 0; }
.innov__visual { position: relative; overflow: hidden; min-height: 300px; background: var(--ink); }
.innov__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.innov__visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgb(6 19 26 / .88) 0%, rgb(6 19 26 / .55) 22%, rgb(6 19 26 / 0) 45%);
}
.innov__hand {
  position: absolute; z-index: 1; left: 9%; bottom: 7%;
  font-size: clamp(1.35rem, 1.8vw, 1.65rem);
  transform: rotate(-8deg); transform-origin: left bottom;
}
.innov__hand svg { position: absolute; left: calc(100% + 6px); bottom: 70%; width: 46px; height: 40px; stroke-width: 2; }
.innov__main { padding: 56px var(--gutter) 40px; }
.innov__main .h3 { margin-bottom: 18px; }
/* The innovations paragraph and the vision article share one body text. */
.innov__text, .article p { font-size: .95rem; line-height: 1.7; color: var(--muted); }
.innov__text { max-width: 560px; margin-bottom: 36px; }
.innov__text strong { color: var(--text); }
/* Equal columns of at most 200 px, no padding: the gap holds the space, and each divider sits in
   its middle, so every column starts at the same distance from the divider before it. The
   layout follows the width the text column gives, not the viewport: four in a row once each
   column gets 120 px (« Personnalisation » needs about 104), otherwise two by two. */
.innov__main { container-type: inline-size; }
.features { --gap: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 28px var(--gap); }
.features li { position: relative; font-size: .8125rem; line-height: 1.4; color: var(--muted); }
.features li:nth-child(even)::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); border-left: 1px solid var(--line); }
@container (min-width: 576px) {
  .features { grid-template-columns: repeat(4, minmax(0, 200px)); }
  .features li + li::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); border-left: 1px solid var(--line); }
}
.features svg { display: block; width: 34px; height: 34px; margin-bottom: 14px; stroke: var(--text); stroke-width: 1.4; }

.xp { margin: 0 var(--gutter) 64px; padding: clamp(24px, 3vw, 36px); }
.xp .h3 { margin-bottom: 24px; }
.xp__list { display: grid; gap: 14px; }
.xp__list li { display: flex; align-items: center; gap: 16px; }
.xp__ico { flex: none; display: grid; place-items: center; width: 64px; height: 46px; border-radius: 6px; background: var(--ink); color: var(--lime); }
.xp__ico svg { width: 22px; height: 22px; stroke-width: 1.6; }
.xp__list p > * { display: block; line-height: 1.45; }
.xp__list strong { font-size: .875rem; }
.xp__list span { font-size: .8125rem; color: var(--muted); }

/* Contact (home) */
.contact { position: relative; overflow: hidden; }
.contact::before {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 70%; pointer-events: none;
  background: radial-gradient(55% 70% at 30% 100%, rgb(232 128 58 / .30), rgb(150 70 60 / .10) 50%, transparent 75%);
}
.contact .container { position: relative; display: grid; gap: clamp(36px, 6vw, 96px); align-items: start; }
.contact__intro .h2 { margin-bottom: 24px; }
.contact__intro p { max-width: 460px; }
.contact__intro p:not([class]) { color: var(--on-dark); }
.contact__intro p + p { margin-top: 14px; }
.contact__lead { font-size: 1.3rem; font-weight: 300; line-height: 1.35; letter-spacing: -.015em; }
.contact__hand { display: none; }

.form {
  padding: clamp(22px, 3vw, 36px);
  background: rgb(12 30 39 / .82); border: 1px solid var(--line-dark); border-radius: 14px;
}
.form__grid { display: grid; gap: 16px; }
.form__note { font-size: .8125rem; color: var(--on-dark-soft); margin-bottom: 16px; }
.form__note a { color: #fff; }
noscript .form__note { margin: 18px 0 0; }
.field { display: grid; gap: 7px; }
.field label { font-size: .8125rem; font-weight: 500; color: var(--on-dark); }
.field label span { color: var(--lime); }
.field input, .field textarea {
  width: 100%; padding: 13px 14px;
  font: 400 1rem/1.4 var(--sans); color: #fff;
  background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .4); border-radius: var(--radius);
}
.field textarea { min-height: 110px; resize: vertical; }
.field ::placeholder { color: rgb(255 255 255 / .6); }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-color: var(--lime); background: rgb(255 255 255 / .07); }
.field input:user-invalid { border-color: var(--error); }
.form__privacy { margin-top: 14px; font-size: .8125rem; line-height: 1.5; color: var(--on-dark-soft); }
.form__privacy a { color: #fff; }
.form__turnstile iframe { margin-top: 18px; }
.form .btn { width: 100%; margin-top: 22px; padding: 18px; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; }
.form .btn:disabled { opacity: .6; cursor: wait; }
.form__status { margin-top: 14px; font-size: .875rem; min-height: 1.3em; color: var(--lime); }
.form__status.is-error { color: var(--error); }
.sprite { position: absolute; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--line); }
.footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding-block: 24px 28px;
  font-size: .8125rem; color: var(--muted);
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 0 22px; }
.footer__legal a { display: inline-block; padding-block: 6px; text-decoration: none; }
.footer__legal a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
/* « Gérer les cookies » is a button that reads as the links beside it. */
.footer__button { padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.footer__button:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

/* The consent banner: a labelled region at the bottom of the screen, never a modal. Refuse and
   accept are the same button, side by side, so neither choice is easier than the other. */
[hidden] { display: none !important; }
.consent {
  position: fixed; inset: auto 0 0; z-index: 20;
  background: var(--ink-2); border-top: 1px solid var(--line-dark);
  box-shadow: 0 -12px 32px -16px rgb(0 0 0 / .5);
}
.consent__inner { display: grid; gap: 16px; padding-block: 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
.consent__title { font-size: 1rem; font-weight: 500; margin-bottom: 6px; }
.consent__text p { font-size: .875rem; line-height: 1.55; color: var(--on-dark); max-width: 640px; }
.consent__text a { color: #fff; }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn--choice { background: var(--cream); color: var(--ink); }
.btn--choice:hover { background: #fff; }

/* ---------- Vision ---------- */

/* One reading column, long-form. */
.article { max-width: 700px; margin-inline: auto; }
/* A container whose content box is the article's column: the page head aligns on it. */
.container--reading { max-width: calc(700px + var(--gutter) * 2); }
.article h2 { margin: 52px 0 14px; }
.article h2:first-child { margin-top: 0; }
.article p + p { margin-top: 1em; }
/* Pull quotes: a step above the body, behind a large quotation mark. */
.article blockquote { position: relative; margin: 40px 0; padding-left: 60px; }
.article blockquote p { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.45; letter-spacing: -.015em; color: var(--text); }
.article__quote-mark { position: absolute; left: 0; top: 4px; width: 40px; height: 34px; fill: var(--lime); }

.closing { text-align: center; }
.closing .h2 { margin-bottom: 30px; }

/* ---------- Legal ---------- */

.legal { max-width: 820px; }
.legal h2 { font-size: 1.4rem; font-weight: 400; letter-spacing: -.02em; margin: 44px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1rem; font-weight: 400; margin: 22px 0 6px; }
.legal h4 { font-size: .9375rem; font-weight: 500; margin: 18px 0 4px; }
.legal strong { color: var(--text); }
.legal__date { font-size: .875rem; margin-bottom: 28px; }
.legal p, .legal li { color: var(--muted); line-height: 1.75; }
.legal ul { list-style: disc; padding-left: 1.2em; }
.legal ol { list-style: decimal; padding-left: 1.4em; }
.legal :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 12px; }
/* A value still to be confirmed, shown as such on the page. */
.legal code { font-size: .9em; color: var(--text); }
.legal .todo { background: rgb(216 239 91 / .45); color: var(--text); padding: 0 4px; border-radius: 3px; }

/* ---------- Appearing on scroll: CSS only, where the browser supports view timelines ---------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } }

/* =========================================================
   Wider screens
   ========================================================= */

@media (min-width: 600px) {
  .logo { font-size: 1.3rem; gap: 12px; }
  .logo svg { width: 40px; height: 32px; }
  .h2 br, .h3 br { display: inline; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(even) { position: relative; }
  .step:nth-child(even)::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; border-left: 1px solid var(--line-dark); }
  .form__grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
  .form .btn { letter-spacing: .12em; font-size: .86rem; }
}

@media (min-width: 900px) {
  .consent__inner { grid-template-columns: 1fr auto; align-items: center; gap: 32px; }
  .consent__actions { grid-template-columns: repeat(2, 140px); }
  .nav__toggle { display: none; }
  .nav__cta { display: inline-flex; }
  .nav__links {
    position: static; display: flex; gap: clamp(20px, 2.6vw, 40px);
    padding: 0; border: 0; background: none; color: inherit; overflow: visible;
  }
  .nav__links li + li { border: 0; }
  .nav__links a { position: relative; padding: 6px 0; font-size: .875rem; }
  .nav__links a[aria-current="page"] { color: inherit; }
  .nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--lime); transition: right .25s; }
  .nav__links a:hover::after, .nav__links a[aria-current="page"]::after { right: 0; }

  .hero { min-height: min(100vh, 900px); display: flex; flex-direction: column; }
  .hero__media { inset: 0 0 0 auto; width: 70%; height: auto; }
  .hero__media img { object-position: 55% 30%; }
  .hero__shade {
    background:
      radial-gradient(30% 45% at 100% 0%, rgb(6 19 26 / .55), rgb(6 19 26 / 0) 70%),
      linear-gradient(90deg, var(--ink) 30%, rgb(6 19 26 / .82) 40%, rgb(6 19 26 / .25) 56%, rgb(6 19 26 / 0) 70%),
      linear-gradient(0deg, rgb(6 19 26 / .85) 0%, rgb(6 19 26 / 0) 22%),
      linear-gradient(180deg, rgb(6 19 26 / .6) 0%, rgb(6 19 26 / 0) 18%);
  }
  .hero__body { flex: 1; display: flex; align-items: center; padding-block: 32px 56px; }

  .innov { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); padding-right: var(--gutter); gap: clamp(28px, 3.5vw, 52px); }
  .innov__visual { min-height: 420px; }
  .innov__main { padding: clamp(48px, 5vw, 64px) 0; }
  .xp { grid-column: 1 / -1; margin: 0 0 clamp(48px, 6vw, 72px) var(--gutter); }

  .contact .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .contact__hand { display: inline-block; padding-top: 26px; font-size: 1.6rem; transform: rotate(-6deg); transform-origin: left; }

}

@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .method { grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr); }
  .method__intro p:last-child { max-width: 380px; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .step { position: relative; }
  .step + .step::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; border-left: 1px solid var(--line-dark); }
  .innov { grid-template-columns: minmax(0, 27%) minmax(0, 1fr) minmax(0, 31%); }
  .xp { grid-column: auto; align-self: center; margin: clamp(32px, 4vw, 48px) 0; }
}

@media (min-width: 1200px) {
  .hero__note {
    display: block; position: absolute; z-index: 2; top: 17%; right: 3vw;
    font-size: clamp(1.4rem, 1.9vw, 1.75rem); text-align: center; transform: rotate(-10deg);
  }
  .hero__note svg { display: block; width: 54px; height: 50px; margin: 6px auto 0; stroke-width: 2; }
}