/* SovIA — site public. Parti pris : un document plutôt qu'une plaquette.
   Papier, encre, une seule couleur, celle du noyau du logo ; les tons secondaires sont ceux du logo.
   Aucune ressource externe. */

:root {
  --paper: #f4f2ed;
  --paper-2: #ebe8e1;
  --ink: #172024;
  --ink-2: #3f4c53;
  --ink-3: #5f6a6f;         /* au moins 4,5:1 sur les deux papiers */
  --rule: #d4d0c6;
  --teal: #277694;          /* le noyau du logo, face droite */
  --teal-ink: #1d5f78;      /* le noyau, face gauche : la même teinte, lisible en texte */
  --canard: #173e47;        /* bleu canard profond, l'ombre du bord du logo */
  --band: var(--canard);    /* le fond du périmètre et du pied de page ; en mode sombre, celui de la citation */
  --on-canard: #eef5f7;     /* le verre du logo */
  --on-canard-2: #a3c4ce;   /* le bord du logo sur fond sombre, éclairci pour la lecture */
  --on-canard-rule: rgba(143, 182, 194, 0.3);
  --teal-light: #7fc0d6;    /* le noyau du logo sur fond sombre : numéros sur fond canard */
  --bar-bg: rgba(244, 242, 237, 0.93);
  --highlight: rgba(39, 118, 148, 0.09);  /* l'alinéa visé par un lien */
  --button-bg: #173e47;     /* le bouton principal : le bleu canard, plus clair en mode sombre */
  --button-hover: #1d5f78;
  --logo-light: inline;     /* les dessins clairs du logo ; le mode sombre montre ceux du kit pour fond sombre */
  --logo-dark: none;

  --sans: "Avenir Next", "Avenir", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --serif: "Charter", "Bitstream Charter", "Iowan Old Style", "Sitka Text", Georgia, serif;

  --side: clamp(240px, 21vw, 300px);
  --measure: 720px;
  --bar-h: 80px;
  --logo-h0: clamp(220px, 34vh, 330px);  /* le logo empilé de l'ouverture ; site.js reprend ces valeurs */
  --logo-top: 16vh;
  --logo-gap: 45px;         /* sous le logo empilé, jusqu'au titre */
}

/* Mode sombre par défaut, quel que soit celui du système ; le visiteur peut choisir le clair (data-theme="light",
   posé par le script en tête de page). Les couleurs viennent du logo sur fond sombre : un fond tiré du bleu canard,
   les faces du noyau pour les accents. Le périmètre et le pied de page prennent le fond de la citation. L'impression
   reste claire. */
@media screen {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0c191c;
    --paper-2: #13242a;
    --band: #13242a;
    --ink: #e2eaec;
    --ink-2: #b3c3c8;
    --ink-3: #8a9ca2;
    --rule: #2a3d43;
    --teal: #4f97b0;
    --teal-ink: #7fc0d6;
    --bar-bg: rgba(12, 25, 28, 0.93);
    --highlight: rgba(79, 151, 176, 0.18);
    --button-bg: #2f7590;
    --button-hover: #256580;
    --logo-light: none;
    --logo-dark: inline;
  }
}

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

html {
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--teal-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 14px;
  font-family: var(--sans); font-size: 14px;
}
.skip:focus { top: 16px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Grille : navigation | texte | références ---------- */

.row {
  display: grid;
  grid-template-columns: minmax(var(--side), 1fr) minmax(0, var(--measure)) minmax(var(--side), 1fr);
}
.row > * { grid-column: 2; }

.para { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.para > * { grid-column: 2; }
.para > .ref { grid-column: 3; grid-row: 1; }

/* ---------- En-tête : le logo reste au centre ---------- */

.masthead__bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: var(--bar-h);
  background: var(--bar-bg);
  border-bottom: 1px solid var(--rule);
  opacity: var(--bar, 1);
  pointer-events: none;
}

/* Trois parties que site.js place : le grand symbole, le petit, le nom. Sans script, le logo reste dans la barre. */
.brand { position: fixed; z-index: 30; left: 50%; top: 0; width: 0; height: 0; }
.brand > svg {
  position: absolute; left: 0; top: 0; display: block;
  width: var(--w); height: auto;
  transform-origin: 0 0;
  transform: translate(var(--x), var(--y)) scale(var(--s, 1));
  pointer-events: none;
}
.brand.is-small .brand__symbol--large, .brand:not(.is-small) .brand__symbol--small { visibility: hidden; }
.brand__light { display: var(--logo-light); }
.brand__dark { display: var(--logo-dark); }
.brand::after { /* la surface du lien et son focus : le cadre du logo */
  content: ""; position: absolute;
  left: var(--bx, -76px); top: var(--by, 20px); width: var(--bw, 152px); height: var(--bh, 40px);
}
.brand:focus-visible { outline: none; }
.brand:focus-visible::after { outline: 2px solid var(--teal); outline-offset: 8px; }

.sidenav {
  position: fixed; z-index: 40; top: 24px; left: 36px;
  width: calc(var(--side) - 56px);
  font-family: var(--sans);
}
.sidenav__current {
  display: none; margin: 0; padding: 7px 0;
  font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink);
}
.sidenav__current::before {
  content: ""; display: inline-block; width: 22px; height: 1px;
  background: var(--teal); vertical-align: middle; margin-right: 14px;
}
.sidenav__list { list-style: none; margin: 0; padding: 0; counter-reset: nav; }
.sidenav__list a {
  display: block; padding: 6px 0;
  font-size: 15px; line-height: 1.3; color: var(--ink-2);
  text-decoration: none; letter-spacing: 0.01em;
}
.sidenav__list a::before {
  counter-increment: nav; content: counter(nav, decimal-leading-zero);
  display: inline-block; width: 36px;
  font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.sidenav__list a:hover { color: var(--ink); }
.sidenav__list a[aria-current] { color: var(--ink); font-weight: 600; }
.sidenav__list a[aria-current]::before { color: var(--teal); }
/* Sous « Sur mesure », les offres, sans numéro : le retrait dit qu'elles en font partie. */
.sidenav__sub { list-style: none; margin: 0 0 4px; padding: 0 0 0 36px; }
.sidenav__list .sidenav__sub a { padding: 4px 0; font-size: 14px; color: var(--ink-3); }
.sidenav__list .sidenav__sub a::before { content: none; counter-increment: none; }
.sidenav__list .sidenav__sub a:hover, .sidenav__list .sidenav__sub a[aria-current] { color: var(--ink); }

/* Une fois la page défilée, seul le titre de la section reste ; la liste revient au survol, et au clavier dès qu'un
   de ses liens reçoit le focus : masquée sans display: none, elle reste atteignable par Tab. */
.is-scrolled .sidenav__current { display: block; }
.sidenav__current.is-hidden { visibility: hidden; } /* sur mobile, quand il toucherait le logo (site.js) */
@media (min-width: 1001px) {
  .is-scrolled .sidenav:not(:hover):not(:focus-within) .sidenav__list {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
.is-scrolled .sidenav:hover .sidenav__current,
.is-scrolled .sidenav:focus-within .sidenav__current { display: none; }
.is-scrolled .sidenav:hover .sidenav__list,
.is-scrolled .sidenav:focus-within .sidenav__list {
  display: block;
  background: var(--paper); padding: 4px 18px 10px 0; margin-left: -2px;
}

/* En haut à droite : le mode d'affichage, les langues et, sur mobile, le menu. */
.tools {
  position: fixed; z-index: 41; top: 0; right: 36px; height: var(--bar-h);
  display: flex; align-items: center; gap: 20px;
}
.theme-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--ink-2);
}
.theme-btn[hidden] { display: none; }
.theme-btn:hover { color: var(--ink); }
.theme-btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.theme-btn[data-dark="true"] .theme-btn__moon, .theme-btn:not([data-dark="true"]) .theme-btn__sun { display: none; }
.lang {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em;
  display: flex; gap: 14px;
}
.lang a { color: var(--ink-3); font-weight: 600; text-decoration: none; }
.lang a:hover, .lang a[aria-current] { color: var(--ink); }

.menu-btn { display: none; }

/* ---------- Ouverture ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 24px 34px;
}
.hero__logo-space { height: calc(var(--logo-top) + var(--logo-h0) + var(--logo-gap)); flex: none; }
.hero__title {
  margin: 0;
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(19px, 1.75vw, 25px); letter-spacing: 0.06em;
  color: var(--teal-ink); text-wrap: balance;
}
.hero__lead {
  margin: 26px auto 30px; max-width: 33ch;
  font-size: clamp(22px, 2.1vw, 28px); line-height: 1.4; color: var(--ink);
  text-wrap: balance;
}
.hero__lead span:not(.nh) { font-style: italic; color: var(--teal-ink); } /* le public ; un mot insécable reste droit */
.hero__cta { margin: 0 0 30px; }
/* Sur un écran bas, l'ouverture se resserre pour que la bande reste visible sous le bouton. */
@media (max-height: 820px) {
  .hero { padding-bottom: 24px; }
  .hero__lead { margin: 18px auto 20px; }
  .hero__cta { margin-bottom: 18px; }
  .hero__cta .button { padding: 12px 24px; }
}
@media (max-height: 730px) {
  .hero { padding-bottom: 16px; }
  .hero__lead { margin: 12px auto 14px; }
  .hero__cta { margin-bottom: 12px; }
}
/* La bande suit le texte et descend au bas de l'écran : elle ne le recouvre jamais. Le lieu au début, le
   sous-traitant à la fin, l'éditrice au milieu de la page, dans l'axe du logo, en gras et en bas de casse : en capitales,
   son nom perdrait sa graphie. Sa ligne n'est pas plus haute que celle des capitales, pour que la bande ne descende pas.
   Les deux colonnes latérales sont aussi larges que le plus long des deux : il faut 664 px de bande, qu'une fenêtre
   offre dès 1144 px ; le seuil est à 1160 px, par marge. L'anglais en demande 655 ; l'allemand, dont le sous-traitant
   est plus long, 682, dès 1176 px : son seuil est à 1190 px. En deçà, la bande ne garde que l'éditrice, centrée : son
   nom n'est nulle part ailleurs en haut de page, le périmètre redit le lieu et le sous-traitant. */
.hero__foot {
  align-self: stretch; margin: auto calc(var(--side) - 24px) 0;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px 24px; align-items: baseline;
  padding-top: 14px; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  text-align: center; text-wrap: balance; color: var(--ink-3);
}
.hero__foot > :first-child { text-align: left; }
.hero__foot > :last-child { text-align: right; }
.hero__by { font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; text-transform: none; }
@media (max-width: 1160px) {
  .hero__foot { display: block; }
  .hero__foot > :not(.hero__by) { display: none; }
}
@media (max-width: 1190px) {
  .hero__foot:lang(de) { display: block; }
  .hero__foot:lang(de) > :not(.hero__by) { display: none; }
}

/* ---------- Discrétion ---------- */

.discretion { padding: 16vh 0 15vh; }
.statement {
  margin: 0;
  font-size: clamp(28px, 3.3vw, 44px); line-height: 1.28; letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance; hyphens: manual;
}
.statement strong { font-weight: 400; font-style: italic; color: var(--teal-ink); }

/* ---------- Chapitres ---------- */

.chapter { padding: 13vh 0 11vh; border-top: 1px solid var(--rule); }
.chapter--price .label { justify-content: center; }
.chapter--price h2 { text-align: center; }
.label {
  display: flex; gap: 16px; align-items: baseline;
  margin: 0 0 30px;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.label span:not(.nh) { color: var(--teal); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }

h2 {
  margin: 0 0 38px;
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(28px, 2.9vw, 40px); line-height: 1.16; letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
h3 { font-family: var(--sans); }

p { margin: 0 0 1.1em; color: var(--ink-2); hyphens: manual; text-wrap: pretty; }
.nh { hyphens: none; white-space: nowrap; }
a[href^="mailto:"] { hyphens: none; white-space: nowrap; } /* une adresse e-mail ne se coupe jamais, pas même au trait d'union */
.lede { font-size: 22px; line-height: 1.55; color: var(--ink); }

.ref {
  align-self: start;
  display: flex; flex-direction: column; gap: 3px;
  margin: 6px 0 0 36px; padding: 2px 0 2px 18px;
  border-left: 1px solid var(--rule);
  font-family: var(--sans); font-size: 12.5px; line-height: 1.5; letter-spacing: 0.02em;
  color: var(--ink-3);
}
.ref::before {
  content: "Réf."; margin-bottom: 3px;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
}
.ref:lang(de)::before { content: "Quellen"; }
.ref:lang(en)::before { content: "Ref."; }
.ref a { text-decoration: none; }
.ref a:hover { text-decoration: underline; }

/* ---------- Le périmètre ---------- */

.band {
  margin-top: 9vh; padding: 10vh 0 11vh;
  background: var(--band); color: var(--on-canard);
}
.chapter--band { padding-bottom: 0; } /* la bande descend jusqu'au filet de la section suivante */

.perimeter { margin: 0; }
.perimeter__frame { /* le verre du cube : éclairé du haut à droite, son bord clair de ce côté */
  position: relative; padding: 20px 28px 30px;
  background: linear-gradient(225deg, rgba(61, 108, 122, 0.3), rgba(36, 79, 92, 0.12) 75%);
  border: 1px solid var(--on-canard-rule);
  border-top-color: rgba(238, 245, 247, 0.42); border-right-color: rgba(238, 245, 247, 0.42);
}
.perimeter__mark { width: 22px; height: 22px; margin: -6px 12px -6px 0; vertical-align: middle; }
.perimeter__head {
  display: flex; justify-content: space-between; gap: 16px;
  margin: 0 0 8px; padding-bottom: 14px;
  border-bottom: 1px solid var(--on-canard-rule);
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--on-canard-2);
}
.perimeter__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.perimeter__steps li {
  padding: 18px 14px 16px 0;
  border-top: 1px solid rgba(143, 182, 194, 0.16);
  font-family: var(--sans); font-size: 16px; line-height: 1.3; color: var(--on-canard);
}
.perimeter__steps li:nth-child(-n + 4) { border-top: 0; }
.perimeter__steps i {
  display: block; margin-top: 3px;
  font-family: var(--serif); font-size: 14px; color: var(--on-canard-2);
}

.perimeter__outside {
  margin: 52px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px; max-width: 560px;
}
.perimeter__outside dt {
  margin-bottom: 10px;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-canard-2);
}
.perimeter__outside dd {
  margin: 0;
  font-family: var(--sans); font-size: 30px; font-weight: 500; line-height: 1.1; color: var(--on-canard);
}

.ref--dark { border-left-color: var(--on-canard-rule); color: var(--on-canard-2); }
.ref--dark a { color: var(--on-canard); }

/* ---------- Fonctions ---------- */

.capabilities {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px;
}
.capabilities li { padding: 24px 0 18px; border-top: 1px solid var(--ink); }
.capabilities h3 { margin: 0 0 10px; font-size: 21px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); text-wrap: balance; }
.capabilities p { font-size: 17.5px; line-height: 1.55; }

/* ---------- Questions ---------- */

.qa { width: 100%; border-collapse: collapse; margin-top: 8px; }
.qa thead th {
  padding: 0 16px 12px 0; text-align: left;
  border-bottom: 1px solid var(--ink);
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}
.qa tbody th, .qa td { padding: 20px 16px 20px 0; vertical-align: top; border-bottom: 1px solid var(--rule); text-align: left; }
.qa tbody th { width: 46%; font-weight: 400; font-size: 18px; line-height: 1.45; color: var(--ink); }
.qa td { font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.qa td:last-child { padding-right: 0; text-align: right; white-space: nowrap; font-size: 12.5px; letter-spacing: 0.04em; }
.qa td:last-child a { text-decoration: none; }

/* ---------- FAQ ---------- */

.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 22px 48px 22px 0;
  font-family: var(--sans); font-size: 19px; font-weight: 500; line-height: 1.35; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 18px;
  font-size: 24px; font-weight: 300; color: var(--teal);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 10px; max-width: 62ch; }

/* ---------- Conviction ---------- */

.conviction { padding: 15vh 0; border-top: 1px solid var(--rule); background: var(--paper-2); }
.conviction blockquote { margin: 0; }
.conviction blockquote p {
  margin: 0;
  font-style: italic; font-size: clamp(24px, 2.5vw, 33px); line-height: 1.42; color: var(--ink);
  text-indent: -0.55em; text-wrap: balance; hyphens: manual;
}
.conviction blockquote p::before { content: "«\202F"; }
.conviction blockquote p::after { content: "\202F»"; }
/* Les guillemets de chaque langue, le premier dans la marge : «…» sans espace en suisse allemand, “…” en anglais. */
.conviction blockquote p:lang(de) { text-indent: -0.44em; }
.conviction blockquote p:lang(de)::before { content: "«"; }
.conviction blockquote p:lang(de)::after { content: "»"; }
.conviction blockquote p:lang(en) { text-indent: -0.4em; }
.conviction blockquote p:lang(en)::before { content: "“"; }
.conviction blockquote p:lang(en)::after { content: "”"; }

/* ---------- Sur mesure ---------- */

.range { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.range li {
  display: grid; grid-template-columns: minmax(0, 15em) 1fr; grid-template-rows: auto 1fr; gap: 6px 40px;
  padding: 24px 0 22px; border-top: 1px solid var(--rule);
}
.range h3 { grid-row: 1; margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.005em; text-wrap: balance; }
.range h3 a { color: var(--ink); text-decoration: none; }
.range h3 a:hover { color: var(--teal-ink); }
.range h3 a::after { content: "→"; content: "→" / ""; margin-left: 0.3em; color: var(--teal); } /* le titre est un lien ; la flèche n'est pas lue */
.range__state {
  grid-column: 1; grid-row: 2; margin: 0;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}
.range__text { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 17.5px; line-height: 1.55; }

/* ---------- Tarif ---------- */

.price {
  justify-self: center; width: min(100%, 520px);
  margin: 6px 0 0; padding: 46px 52px 42px;
  border: 1px solid var(--ink);
  text-align: center; background: var(--paper);
}
.price__amount {
  margin: 0;
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(66px, 7.4vw, 100px); line-height: 1; letter-spacing: -0.035em;
  color: var(--ink); font-variant-numeric: lining-nums; white-space: nowrap;
}
.price__cur { font-size: 0.2em; letter-spacing: 0.18em; vertical-align: 2em; margin-right: 0.45em; color: var(--ink-3); }
.price__unit { margin: 16px 0 30px; font-family: var(--sans); font-size: 15px; color: var(--ink-2); }
.price__terms { margin: 0 0 34px; text-align: left; border-top: 1px solid var(--rule); }
.price__terms div { display: flex; justify-content: space-between; gap: 24px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.price__terms dt { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.price__terms dd { margin: 0; font-family: var(--sans); font-size: 15px; color: var(--ink); text-align: right; }
.price__more { margin: 26px 0 0; font-family: var(--sans); font-size: 15px; line-height: 1.45; color: var(--ink-2); }

.button {
  display: inline-block; cursor: pointer;
  padding: 15px 28px; border: 0; border-radius: 0;
  background: var(--button-bg); color: var(--on-canard);
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0.02em;
  text-decoration: none;
}
.button:hover { background: var(--button-hover); color: var(--on-canard); }

/* ---------- Contact ---------- */

.contact { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; }
.contact__card { font-style: normal; font-family: var(--sans); font-size: 15.5px; line-height: 1.6; }
.contact__card p { color: var(--ink-2); margin: 0 0 18px; }
.contact__name { font-weight: 600; color: var(--ink) !important; margin-bottom: 6px !important; }
.contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide, .contact__notice, .contact__status { grid-column: 1 / -1; }
.field label { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.field label span { letter-spacing: 0.04em; text-transform: none; }
.field input, .field textarea, .field select {
  width: 100%; padding: 8px 0 9px;
  border: 0; border-bottom: 1px solid var(--ink-3); border-radius: 0;
  background: transparent; color: var(--ink);
  font-family: var(--serif); font-size: 18px;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field select {
  appearance: none; cursor: pointer; padding-right: 24px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 11px) 55%, calc(100% - 6px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom: 2px solid var(--teal); padding-bottom: 8px; }
.contact__notice { margin: 0; font-family: var(--sans); font-size: 13.5px; color: var(--ink-3); }
.contact__form .button { justify-self: start; }
.contact__status { margin: 0; font-family: var(--sans); font-size: 14px; color: var(--teal-ink); }
.contact__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* un champ que seul un robot remplit */

/* ---------- Pages secondaires ---------- */

.product-head { padding: calc(var(--bar-h) + 12vh) 0 11vh; }
.product-head h1 {
  margin: 0 0 34px;
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(34px, 4.2vw, 56px); letter-spacing: -0.015em; line-height: 1.1; color: var(--ink);
  text-wrap: balance;
}
.product-head .lede { margin-bottom: 40px; }
.product-head__price { margin: -14px 0 30px; font-family: var(--sans); font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.row > .button { justify-self: start; }

/* Le graphe de l'automatisation agentique, qu'anime agents-graph.js : sur le fond du
   périmètre dans les deux modes, le droit suisse en losanges, dans le bleu du noyau éclairé, et le chemin d'un agent
   en blanc. */
.kg-band { padding: 9vh 0 10vh; background: var(--band); color: var(--on-canard); --lit: #fff; --law: var(--teal-light); }
.kg { grid-column: 1 / -1; justify-self: center; width: min(100% - 48px, 1180px); margin: 0; }
.kg__legend {
  margin: 0 0 10px;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-canard-2);
}
.kg__key { display: inline-block; margin-left: 1.4em; color: var(--law); white-space: nowrap; text-transform: none; letter-spacing: 0.02em; font-size: 13px; }
.kg__key::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; vertical-align: 1px;
  background: var(--law); transform: rotate(45deg);
}
.kg__svg { display: block; width: 100%; height: auto; overflow: visible; }
.kg__svg--tall { display: none; }
.kg__links line { stroke: var(--on-canard-rule); stroke-width: 1; }
.kg__node circle { fill: var(--on-canard-2); }
.kg__node--hub circle { fill: var(--on-canard); }
.kg__node--leaf circle { fill: var(--on-canard-rule); }
.kg__node--out circle { fill: var(--band); stroke: var(--on-canard-2); stroke-width: 1.5; }
.kg__node text {
  fill: var(--on-canard-2); font-family: var(--sans);
  paint-order: stroke; stroke: var(--band); stroke-width: 3px; stroke-linejoin: round; /* un liseré : les liens passent sous les noms */
}
.kg__node--hub text { fill: var(--on-canard); font-weight: 600; }
.kg__node--law polygon { fill: var(--law); }
.kg__node--law text { fill: var(--law); }
.kg__links line, .kg__node { transition: opacity 0.7s var(--d, 0s), stroke 0.5s, stroke-width 0.5s; }
.kg__node circle, .kg__node polygon, .kg__node text { transition: fill 0.5s, stroke 0.5s; }
.kg.is-hidden .kg__links line, .kg.is-hidden .kg__node { opacity: 0; }
.kg.is-working .kg__links line:not(.is-lit) { opacity: 0.4; }
.kg.is-working .kg__node:not(.is-lit) { opacity: 0.5; }
.kg__links line.is-lit { stroke: var(--lit); stroke-width: 2.2; }
.kg__node.is-lit circle { fill: var(--lit); stroke: var(--lit); }
.kg__node.is-lit polygon { fill: var(--law); stroke: var(--lit); stroke-width: 2; }
.kg__node.is-lit text { fill: #fff; }
.kg__tasks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.kg__tasks li {
  padding: 14px 0 0; border-top: 1px solid var(--on-canard-rule);
  font-size: 15.5px; line-height: 1.5; color: var(--on-canard-2); transition: border-color 0.5s, color 0.5s;
}
.kg__tasks b { display: block; margin-bottom: 4px; font-family: var(--sans); font-weight: 600; color: var(--on-canard); }
.kg__tasks li.is-active { border-top-color: var(--lit); color: var(--on-canard); }
.kg__pause {
  margin-top: 22px; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--on-canard-rule); background: none; color: var(--on-canard);
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.02em;
}
.kg__pause:hover { border-color: var(--on-canard); }
.kg__pause[hidden] { display: none; }

.doc { padding: calc(var(--bar-h) + 9vh) 0 14vh; }
.doc-body { grid-column: 2; }
.doc-toc {
  grid-column: 3; grid-row: 1;
  position: sticky; top: calc(var(--bar-h) + 32px); align-self: start;
  max-height: calc(100vh - var(--bar-h) - 64px); overflow: auto;
  margin-left: 36px; padding-left: 18px; border-left: 1px solid var(--rule);
  font-family: var(--sans); font-size: 12.5px; line-height: 1.45;
}
.doc-toc .label { margin-bottom: 12px; font-size: 10.5px; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; }
.doc-toc li { margin-bottom: 7px; text-wrap: balance; }
.doc-toc a { color: var(--ink-3); text-decoration: none; }
.doc-toc a:hover { color: var(--teal-ink); }

.doc-title {
  margin: 0 0 22px;
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(22px, 2.1vw, 28px); line-height: 1.25; letter-spacing: 0.07em;
  color: var(--ink);
}
.doc-meta { margin-bottom: 44px; padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
.doc-meta p { margin: 0 0 4px; font-family: var(--sans); font-size: 14.5px; color: var(--ink-3); }
.doc h2 { margin: 52px 0 16px; font-size: 20px; font-weight: 600; letter-spacing: 0; line-height: 1.35; scroll-margin-top: calc(var(--bar-h) + 28px); }
.doc-num { margin-right: 10px; color: var(--teal); font-weight: 500; font-variant-numeric: tabular-nums; }
.doc-body p, .doc-body li { font-size: 17.5px; line-height: 1.62; color: var(--ink-2); hyphens: auto; hyphenate-limit-chars: 8 4 4; }
.alineas { margin: 0 0 1em; padding-left: 2em; }
.alineas > li { margin-bottom: 12px; padding-left: 4px; scroll-margin-top: calc(var(--bar-h) + 28px); }
.alineas > li::marker { font-family: var(--sans); font-size: 0.82em; color: var(--teal); }
.lettres { margin: 10px 0 0; padding-left: 1.6em; }
.lettres li { margin-bottom: 6px; }
.doc-body ul { padding-left: 1.4em; }
.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-end { margin-top: 52px; font-family: var(--sans); font-size: 13px !important; color: var(--ink-3) !important; }
.alineas > li:target, .doc h2:target {
  background: var(--highlight);
  box-shadow: 0 0 0 12px var(--highlight);
}
.proto-note { margin: 24px 0 36px; padding: 14px 18px; border-left: 3px solid var(--teal); background: var(--paper-2); }
.proto-note p { margin: 0; font-family: var(--sans); font-size: 15px !important; }

/* ---------- Pied de page ---------- */

.colophon { padding: 76px 0 44px; border-top: 1px solid var(--rule); background: var(--band); color: var(--on-canard); }
.legal-links { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.legal-links a {
  padding: 12px 18px; border: 1px solid var(--on-canard-rule);
  font-family: var(--sans); font-size: 13.5px; color: var(--on-canard); text-decoration: none;
}
.legal-links a:hover { border-color: var(--on-canard); color: #fff; }
.colophon p { margin: 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.65; color: var(--on-canard-2); }
.colophon a { color: var(--on-canard); }
.colophon__terms { margin-bottom: 52px !important; }
.colophon__id { display: flex; gap: 22px; align-items: flex-start; }
.colophon__mark { flex: none; width: 56px; height: 56px; margin-top: -2px; }
.colophon__brand { margin-bottom: 8px !important; font-size: 15px !important; font-weight: 600; color: var(--on-canard) !important; }
.colophon__note { margin-top: 36px !important; padding-top: 20px; border-top: 1px solid var(--on-canard-rule); }
.colophon__copy { margin-top: 6px !important; }

/* ---------- Page d'entrée : le choix de la langue ---------- */

.root {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 22px; font-family: var(--sans); text-align: center;
}
.root__logo { width: auto; height: clamp(150px, 28vh, 240px); margin-bottom: 56px; }
.root__langs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 56px; }
.root__langs a { display: block; padding: 8px 4px; color: var(--ink-2); text-decoration: none; }
.root__langs b { display: block; font-size: 21px; font-weight: 600; color: var(--ink); }
.root__langs a > span { display: block; margin-top: 6px; font-size: 15px; }
.root__langs a:hover b { color: var(--teal-ink); }

/* ---------- Écrans étroits ---------- */

@media (max-width: 1000px) {
  :root { --side: 22px; --bar-h: 64px; --logo-h0: clamp(180px, 30vh, 280px); --logo-top: 14vh; --logo-gap: 40px; }

  .para > .ref, .doc-toc { grid-column: 2; grid-row: auto; }
  .doc-toc { position: static; max-height: none; overflow: visible; margin: 0 0 44px; padding-left: 12px; }
  .ref {
    flex-direction: row; flex-wrap: wrap; gap: 2px 14px;
    margin: 0 0 26px; padding-left: 12px;
  }
  .ref::before { margin: 2px 4px 0 0; }

  .sidenav { top: 0; left: 18px; height: var(--bar-h); width: auto; display: flex; align-items: center; }
  .sidenav__current { display: block; font-size: 14px; }
  .sidenav__current::before { width: 14px; margin-right: 10px; }
  .sidenav__list, .is-scrolled .sidenav__list { display: none; }
  .is-scrolled .sidenav:hover .sidenav__current { display: block; }
  .is-scrolled .sidenav:hover .sidenav__list { display: none; }
  .menu-open .sidenav__list, .menu-open.is-scrolled .sidenav__list {
    display: block; position: fixed; inset: var(--bar-h) 0 0 0;
    padding: 28px 22px; background: var(--paper);
  }
  .menu-open .sidenav__list a { font-size: 22px; padding: 12px 0; }
  .menu-open .sidenav__list .sidenav__sub a { font-size: 18px; padding: 7px 0; }
  .tools { right: 16px; gap: 10px; }
  /* La barre est pleine (section, logo, menu) : les langues passent en haut à droite du menu ouvert, en face de sa
     première entrée, et le mode d'affichage à son bas, avec son libellé. */
  .lang { display: none; }
  .menu-open .lang {
    display: flex; position: fixed; top: calc(var(--bar-h) + 36px); right: 18px; height: 44px;
    align-items: center; gap: 6px; font-size: 14px;
  }
  .menu-open .lang a { padding: 12px 6px; }
  .theme-btn { display: none; }
  .menu-open .theme-btn:not([hidden]) {
    display: flex; position: fixed; left: 22px; bottom: 28px;
    width: auto; height: 44px; gap: 12px;
    font-family: var(--sans); font-size: 16px; color: var(--ink);
  }
  .menu-open .theme-btn::after { content: attr(aria-label); }
  .menu-btn {
    display: block;
    padding: 8px 12px; border: 1px solid var(--rule); background: var(--paper);
    font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  }

  .hero__foot { font-size: 10.5px; letter-spacing: 0.1em; }

  .perimeter__frame { padding: 16px 18px 24px; }
  .perimeter__head { flex-direction: column; gap: 4px; }
  .perimeter__steps { grid-template-columns: 1fr 1fr; }
  .perimeter__steps li:nth-child(-n + 4) { border-top: 1px solid rgba(143, 182, 194, 0.16); }
  .perimeter__steps li:nth-child(-n + 2) { border-top: 0; }
  .perimeter__outside { grid-template-columns: 1fr 1fr; gap: 28px; }
  .para > .ref { margin-top: 14px; }
  .perimeter__outside dt { min-height: 2.9em; }

  .capabilities, .contact, .contact__form { grid-template-columns: 1fr; }
  .range li { grid-template-columns: 1fr; }
  .kg { grid-column: 2; width: 100%; }
  .kg__svg--wide { display: none; }
  .kg__svg--tall { display: block; }
  .kg__tasks { grid-template-columns: 1fr; gap: 14px; }
  .range__text { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .qa thead { display: none; }
  .qa, .qa tbody, .qa tr, .qa th, .qa td { display: block; width: auto !important; }
  .qa tr { padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .qa tbody th, .qa td { border: 0; padding: 0 0 6px; text-align: left !important; }
  .price { padding: 36px 24px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media print {
  .masthead, .menu-btn, .lang, .legal-links, .doc-toc, .colophon__note, .colophon__mark { display: none !important; }
  html, body { background: #fff; }
  .doc { padding-top: 0; }
  .colophon { background: none; color: #000; padding-top: 24px; }
  .colophon p { color: #000; }
}

/* Le logo dans la barre, tant que site.js ne l'a pas placé : d'après le kit du logo. */
.brand__symbol { --x: -94.29px; --y: 15.8px; --w: 48.4px; }
.brand__name { --x: -30.37px; --y: 9.86px; --w: 123.29px; }