:root {

  --ink:        #0d141d;
  --ink-2:      #141d28;
  --ink-3:      #1e2a38;
  --ink-4:      #2a394a;

  --paper:      #ffffff;
  --surface:    #ffffff;
  --surface-2:  #f7f8f9;
  --rule:       #dcdfe4;
  --rule-soft:  #ebedf0;

  --text:       #0d141d;
  --text-2:     #56626f;

  --text-3:     #6b7480;
  --on-ink:     #edf1f5;

  --on-ink-2:   #a7b4c4;

  --on-ink-3:   #7d8b9c;

  --osyto:      #2e5aac;
  --osyto-600:  #264b91;
  --osyto-700:  #1e3d77;
  --osyto-soft: #eef2fa;
  --osyto-ring: rgba(46, 90, 172, .16);

  --go:         #17845a;
  --go-soft:    #e6f4ee;
  --go-bright:  #34c98a;
  --watch:      #b76e0e;
  --watch-soft: #fdf3e3;
  --watch-bright:#e59a3c;
  --stop:       #c0392f;
  --stop-soft:  #fbeceb;
  --stop-bright:#e8635a;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo,
          Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;

  --r-sm: 4px;
  --r:    6px;
  --r-lg: 10px;
  --r-xl: 14px;

  --t-display: clamp(2.5rem, 6.4vw, 4.25rem);
  --t-titre:   clamp(1.5rem, 3vw, 2rem);
  --t-lede:    clamp(1.0625rem, 1.6vw, 1.1875rem);
  --t-corps:   .9375rem;
  --t-menu:    .8125rem;
  --t-legende: .6875rem;

  --v-1: .5rem;
  --v-2: 1rem;
  --v-3: 1.75rem;
  --v-4: 2.75rem;
  --v-5: clamp(3.5rem, 7vw, 5.5rem);

  --shadow-sm: 0 1px 2px rgba(13, 20, 29, .04);
  --shadow:    0 2px 8px -2px rgba(13, 20, 29, .08), 0 1px 2px rgba(13, 20, 29, .04);
  --shadow-lg: 0 16px 40px -20px rgba(13, 20, 29, .30);

  --shell: 74rem;
  --ease: cubic-bezier(.22, .68, .32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, p, ul, ol, figure, dl { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; }
img, svg { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--osyto);
  outline-offset: 2px;
  border-radius: 3px;
}

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 1.5rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }

[hidden] { display: none !important; }

.legend {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-3);
}
.legend--on-ink { color: var(--on-ink-3); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.masthead__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: .8125rem; padding-bottom: .8125rem;
}
.brand { display: flex; align-items: center; gap: .625rem; text-decoration: none; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--ink); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
}
.brand__name { font-weight: 680; letter-spacing: -.018em; font-size: 1.0625rem; }
.brand__name span { color: var(--osyto); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .625rem 1.0625rem; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r);
  font-size: .875rem; font-weight: 580; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .16s var(--ease);
}
.btn:active { transform: translateY(.5px); }
.btn--primary { background: var(--osyto); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--osyto-600); }
.btn--ghost { border-color: var(--rule); color: var(--text); background: var(--surface); }
.btn--ghost:hover { border-color: var(--text-3); }
.btn--onink { background: rgba(255,255,255,.09); color: var(--on-ink); border-color: rgba(255,255,255,.15); }
.btn--onink:hover { background: rgba(255,255,255,.16); }
.btn--lg { padding: .875rem 1.5rem; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn.is-busy, .btn[disabled] { opacity: .55; pointer-events: none; }

main { flex: 1 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 0 4rem; }

.hero {
  display: grid; gap: var(--v-5) var(--v-4);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
}
@media (max-width: 62rem) { .hero { grid-template-columns: minmax(0, 1fr); gap: var(--v-4); } }

.intake { max-width: 40rem; }
.intake__eyebrow { display: block; margin-bottom: var(--v-2); }
.intake__title {
  font-family: var(--sans);
  font-size: var(--t-display);
  line-height: .96;
  letter-spacing: -.045em;
  font-weight: 800;
  margin-bottom: var(--v-2);
  text-wrap: balance;
}

.intake__title em { font-style: normal; color: var(--osyto); }
.intake__lede {
  color: var(--text-2); font-size: var(--t-lede);
  line-height: 1.55;
  margin-bottom: var(--v-3); max-width: 34rem;
}

.slot {
  display: flex; align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.slot:focus-within {
  border-color: var(--osyto);
  box-shadow: 0 0 0 4px var(--osyto-ring), var(--shadow);
}
.slot__prefix { display: grid; place-items: center; padding-left: 1rem; color: var(--text-3); flex-shrink: 0; }
.slot__field {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  padding: 1.25rem .75rem;
  font-family: var(--mono); font-size: 1.0625rem; color: var(--text);
}
.slot__field::placeholder { color: var(--text-3); }
.slot__go {
  border-left: 1px solid var(--rule);
  background: var(--ink); color: #fff;
  padding: 0 1.75rem;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-corps); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background-color .16s var(--ease);
}
.slot__go:hover { background: var(--osyto); }
.slot__go.is-busy { opacity: .6; pointer-events: none; }

@media (max-width: 34rem) {
  .slot { flex-wrap: wrap; }
  .slot__field { padding: 1rem .75rem; font-size: 1rem; }
  .slot__go { width: 100%; border-left: 0; border-top: 1px solid var(--rule); padding: .9375rem; justify-content: center; }
}

.intake__note {
  display: flex; flex-wrap: wrap; gap: .375rem .875rem;
  margin-top: 1rem; color: var(--text-3); font-size: var(--t-menu);
}
.intake__note b { color: var(--text-2); font-weight: 580; }

.piliers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem; margin-top: var(--v-3);
}
@media (max-width: 30rem) { .piliers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pilier {
  display: grid; gap: .1875rem;
  padding: .8125rem .75rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r);
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.pilier:hover { border-color: var(--osyto); transform: translateY(-1px); }
.pilier__ic { color: var(--osyto); line-height: 0; margin-bottom: .1875rem; }
.pilier__n { font-size: var(--t-menu); font-weight: 620; letter-spacing: -.008em; }
.pilier__d {
  font-family: var(--mono); font-size: var(--t-legende);
  color: var(--text-3); font-variant-numeric: tabular-nums;
}

.trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: .875rem 1.75rem;
  margin-top: var(--v-3); padding-top: var(--v-3);
  border-top: 1px solid var(--rule);
}
.trust__note {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; color: inherit;
}
.trust__score {
  font-family: var(--mono); font-size: 1.125rem; font-weight: 680;
  letter-spacing: -.02em; color: var(--text);
}
.trust__stars { color: #e8a33d; font-size: .8125rem; letter-spacing: .06em; display: block; }
.trust__avis { font-size: var(--t-legende); color: var(--text-3); display: block; }
.trust__point {
  display: inline-flex; align-items: center; gap: .4375rem;
  font-size: var(--t-menu); color: var(--text-2);
}
.trust__point svg { color: var(--go); flex-shrink: 0; }

.tally {
  display: flex; flex-wrap: wrap; gap: .5rem 1.375rem;
  margin-top: var(--v-3); padding-top: var(--v-3);

  margin-bottom: var(--v-4);
  border-top: 1px solid var(--rule);
}
.tally__item { display: flex; align-items: baseline; gap: .4375rem; }
.tally__n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 640; font-size: .9375rem; }
.tally__l { font-size: .8125rem; color: var(--text-3); }

.notice {
  display: flex; gap: .625rem; align-items: flex-start;
  padding: .8125rem .9375rem; border-radius: var(--r);
  font-size: .875rem; border: 1px solid;
}
.notice svg { flex-shrink: 0; margin-top: .1875rem; }
.notice--error { background: var(--stop-soft); border-color: #f2cdca; color: #8d2a22; }
.notice--info  { background: var(--osyto-soft); border-color: #cfe0fa; color: var(--osyto-700); }
.intake .notice { margin-top: 1.125rem; }

.progress { max-width: 34rem; margin-top: 2.5rem; }
.progress__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .625rem; font-size: .8125rem; color: var(--text-2);
}
.progress__track { height: 3px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.progress__fill {
  height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--osyto), #6f9bee);
  transition: width .4s var(--ease);
}

.rapport { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

.verdict {
  position: relative; overflow: hidden;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3.6vw, 2.25rem);
  box-shadow: var(--shadow-lg);
}

.verdict::before {
  content: ""; position: absolute; top: -30%; left: -6%;
  width: 30rem; height: 30rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(69,119,216,.16), transparent 68%);
  pointer-events: none;
}
.verdict__grid {
  position: relative;
  display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem);
  grid-template-columns: auto 1fr;
  align-items: center;
}
@media (max-width: 60rem) { .verdict__grid { grid-template-columns: 1fr; } }

.verdict__left { display: flex; align-items: center; gap: 1.375rem; }

.gauge {
  flex-shrink: 0; min-width: 8.5rem;
  border-top: 2px solid rgba(255,255,255,.22);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: .875rem 0;
}
.gauge__read { display: flex; align-items: baseline; gap: .25rem; line-height: 1; }
.gauge__n {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 4.25rem; font-weight: 700; letter-spacing: -.055em; color: #fff;
}
.gauge__d { font-family: var(--mono); font-size: .75rem; color: var(--on-ink-3); }
.gauge__bar {
  height: 3px; margin-top: .8125rem; border-radius: 2px;
  background: rgba(255,255,255,.12); overflow: hidden;
}
.gauge__fill {
  display: block; height: 100%; width: 0; border-radius: 2px;
  transition: width 1.1s var(--ease), background-color .5s var(--ease);
}

.verdict__word {
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 720;
  letter-spacing: -.03em; margin: .25rem 0 .625rem; color: #fff;
}

.verdict__urgence {
  display: inline-flex; align-items: center; gap: .4375rem;
  margin: 0 0 .75rem;
  padding: .3125rem .625rem;
  border: 1px solid currentColor; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: .6875rem; font-weight: 640;
  letter-spacing: .04em; text-transform: uppercase;
}
.verdict__urgence::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.verdict__urgence--ok   { color: var(--go-bright); }
.verdict__urgence--warn { color: var(--watch-bright); }
.verdict__urgence--err  { color: var(--stop-bright); }

.verdict__meta { font-family: var(--mono); font-size: .75rem; color: var(--on-ink-2); line-height: 1.75; }
.verdict__meta a { color: var(--on-ink-2); }

.delta {
  display: inline-flex; align-items: center; gap: .3125rem;
  font-family: var(--mono); font-size: .6875rem; font-weight: 640;
  padding: .1875rem .4375rem; border-radius: 4px; margin-left: .375rem;
}
.delta--up   { background: rgba(52,201,138,.16); color: var(--go-bright); }
.delta--down { background: rgba(232,99,90,.16); color: var(--stop-bright); }
.delta--flat { background: rgba(255,255,255,.08); color: var(--on-ink-2); }

.badge-demo {
  display: inline-block; margin-top: .375rem;
  padding: .1875rem .5rem; border-radius: var(--r-sm);
  background: rgba(69,119,216,.22); color: #cddcf7;
  font-family: var(--sans); font-size: .6875rem; font-weight: 600; letter-spacing: 0;
}

.verdict__advice { min-width: 0; }
.advice { display: grid; gap: .5rem; margin-top: .75rem; }
.advice__item {
  border-left: 2px solid rgba(255,255,255,.18);
  padding: .125rem 0 .125rem .8125rem;
  font-size: .875rem; color: #cfd8e2; line-height: 1.55;
}
.advice__item--ok   { border-left-color: var(--go-bright); }
.advice__item--warn { border-left-color: var(--watch-bright); }
.advice__item--err  { border-left-color: var(--stop-bright); }
.advice__item--cta  { border-left-color: var(--osyto); color: #fff; }
.verdict__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.verdict__actions .btn { max-width: 100%; }
.verdict__actions .btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.advice:empty { display: none; }
.advice:empty + .verdict__actions { margin-top: 0; }

.subscores {
  position: relative;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.09);
}
.subscore__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .4375rem; }
.subscore__n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 660; color: #fff; }
.subscore__bar { height: 3px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.subscore__fill { height: 100%; width: 0; border-radius: 3px; transition: width .9s var(--ease); }

.subscore__dit {
  font-size: .8125rem; line-height: 1.45; color: #cfd8e2;
  margin-top: .625rem;
}
.subscore__note { font-family: var(--mono); font-size: .625rem; color: var(--on-ink-3); margin-top: .375rem; }

.subscore {
  padding: 1rem 1.0625rem 1.125rem;
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg);
  background: rgba(255,255,255,.032);
}
@media (max-width: 34rem) { .subscores { grid-template-columns: 1fr; gap: .75rem; } }

.serp { margin: .25rem 0; }

.serp__t {
  font-size: var(--t-legende); font-weight: 640; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-3); margin-bottom: .5rem;
}
.serp__carte {
  margin-top: 0; padding: 1rem 1.125rem 1.125rem;
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--surface); max-width: min(40rem, 100%);
}
.serp__site { display: flex; align-items: center; gap: .625rem; margin-bottom: .5rem; }
.serp__ico {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: .75rem; font-weight: 700; color: var(--text-3);
}
.serp__ico img { width: 100%; height: 100%; object-fit: contain; }
.serp__ico--vide img { display: none; }
.serp__adresse { min-width: 0; line-height: 1.25; }
.serp__dom { display: block; font-size: .8125rem; color: var(--text); }
.serp__chemin {
  display: block; font-size: .75rem; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.serp__titre {
  font-size: 1.25rem; line-height: 1.3; color: #1a0dab; font-weight: 400;
  max-width: min(37.5rem, 100%); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.serp__desc {
  margin-top: .3125rem; font-size: .875rem; line-height: 1.58; color: #474747;
  max-width: min(37.5rem, 100%);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden;
}

.serp__titre--absent, .serp__desc--absent {
  color: var(--text-3); font-style: italic; font-size: .875rem; white-space: normal;
}
.serp__pied {
  margin-top: .5rem; font-size: var(--t-legende); color: var(--text-3); max-width: 40rem;
}

.hn__t {
  font-size: var(--t-legende); font-weight: 640; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-3); margin-bottom: .5rem;
}

.hn { margin: .25rem 0; }
.hn__liste {
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--surface); padding: .5rem 0; max-height: 22rem; overflow-y: auto;
}
.hn__l {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .25rem .875rem; line-height: 1.4;
}
.hn__l--1 { padding-left: .875rem; font-size: 1rem; font-weight: 640; }
.hn__l--2 { padding-left: 2.375rem; font-size: .9375rem; font-weight: 600; }
.hn__l--3 { padding-left: 3.875rem; font-size: .875rem; }
.hn__l--4 { padding-left: 5.375rem; font-size: .8125rem; }
.hn__l--5 { padding-left: 6.875rem; font-size: .78125rem; }
.hn__l--6 { padding-left: 8.375rem; font-size: .75rem; }
@media (max-width: 34rem) {
  .hn__l--2 { padding-left: 1.75rem; }
  .hn__l--3 { padding-left: 2.625rem; }
  .hn__l--4 { padding-left: 3.5rem; }
  .hn__l--5 { padding-left: 4.375rem; }
  .hn__l--6 { padding-left: 5.25rem; }
}
.hn__tag {
  flex-shrink: 0; font-family: var(--mono); font-size: .625rem; font-weight: 660;
  color: var(--text-3); background: var(--surface-2);
  padding: .0625rem .3125rem; border-radius: 3px;
}
.hn__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn__l--faute { background: rgba(200, 60, 50, .05); }
.hn__l--faute .hn__tag { color: var(--stop); background: rgba(200, 60, 50, .1); }
.hn__faute {
  flex-shrink: 0; margin-left: auto; font-size: var(--t-legende); color: var(--stop);
  font-weight: 560; white-space: nowrap;
}

.parts { margin: .25rem 0; }
.parts__barre {
  display: flex; height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--surface-2);
}
.parts__seg { display: block; height: 100%; }
.parts__leg {
  display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; margin-top: .625rem;
  font-size: var(--t-menu); color: var(--text-2);
}
.parts__leg li { display: flex; align-items: center; gap: .375rem; }
.parts__leg b { font-family: var(--mono); color: var(--text); font-weight: 640; }
.parts__leg i { font-style: normal; color: var(--text-3); }
.parts__pastille { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }

.zones { display: grid; gap: .375rem; margin: .25rem 0; }
.zone {
  display: flex; align-items: baseline; gap: .625rem; padding: .625rem .875rem;
  border: 1px dashed var(--rule); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-3);
}
.zone b { font-family: var(--mono); font-size: .8125rem; }
.zone span { font-size: var(--t-menu); }
.zone__etat {
  margin-left: auto; font-style: normal; font-size: var(--t-legende);
  font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}
.zone.is-la {
  border-style: solid; border-color: var(--rule); background: var(--surface);
  color: var(--text);
}
.zone.is-la .zone__etat { color: var(--go); }
.zone:not(.is-la) .zone__etat { color: var(--stop); }

.zone--main { padding-top: 1.25rem; padding-bottom: 1.25rem; }

.hotes { margin: .25rem 0; }
.hotes__liste {
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--surface); padding: .375rem 0;
}
.hotes__liste li {
  display: grid; grid-template-columns: minmax(0, 1fr) 5rem 4.5rem 1.75rem;
  align-items: center; gap: .625rem; padding: .375rem .875rem;
  font-size: var(--t-menu);
}
.hote__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hote__tiers {
  margin-left: .375rem; font-style: normal; font-size: .5625rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--watch);
  border: 1px solid currentColor; border-radius: 3px; padding: 0 .25rem;
}
.hote__barre { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.hote__barre i { display: block; height: 100%; background: var(--osyto); border-radius: 3px; }
.hote__ko, .hote__n {
  font-family: var(--mono); font-size: var(--t-legende); text-align: right;
  color: var(--text-2);
}
.hote__n { color: var(--text-3); }
@media (max-width: 34rem) {
  .hotes__liste li { grid-template-columns: minmax(0, 1fr) 4rem 1.5rem; }
  .hote__barre { display: none; }
}

.entete { display: grid; gap: .375rem; margin: .25rem 0; }
.entete__l { display: flex; align-items: baseline; gap: .625rem; min-width: 0; }
.entete__l > span {
  flex-shrink: 0; width: 5.5rem; font-size: var(--t-legende); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .03em; font-weight: 620;
}
.entete__l code {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: .6875rem;
  padding: .375rem .5rem; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text);
  overflow-x: auto; white-space: nowrap;
}
.entete__vide { color: var(--stop); }

.og { margin: .25rem 0; }
.og__carte {
  max-width: 30rem; border: 1px solid var(--rule); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface);
}
.og__img {
  display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover;
  background: var(--surface-2);
}
.og__img--vide {
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--rule); color: var(--text-3);
  font-size: var(--t-menu);
}
.og__corps { padding: .75rem .875rem .875rem; }
.og__dom {
  font-size: var(--t-legende); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3);
}
.og__titre { font-size: .9375rem; font-weight: 640; margin-top: .25rem; line-height: 1.35; }
.og__desc {
  font-size: .8125rem; color: var(--text-2); margin-top: .25rem; line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden;
}
.og__absent { color: var(--text-3); font-style: italic; font-weight: 400; }

.regle { margin: .125rem 0 .25rem; padding: 0 4px; }
.regle__barre {
  position: relative; height: 7px; border-radius: 4px; overflow: visible;
  background: var(--surface-2);
}
.regle__zones {
  position: absolute; inset: 0; border-radius: 4px; opacity: .28;
}

.regle__curseur {
  position: absolute; top: -4px; width: 3px; height: 15px; border-radius: 2px;
  background: var(--text); transform: translateX(-50%);
  box-shadow: 0 0 0 2px var(--surface);
}

.regle__curseur--hors::after {
  content: "›"; position: absolute; left: 5px; top: -2px;
  font-size: .75rem; font-weight: 700; color: var(--stop);
}
.regle__pied {
  display: flex; justify-content: space-between; gap: 1rem; margin-top: .375rem;
  font-size: var(--t-legende); color: var(--text-3);
}
.regle__pied b { font-family: var(--mono); color: var(--text); font-weight: 660; }

.versus { margin-top: var(--v-4); }
.versus__pli { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); }
.versus__ouvre {
  display: flex; align-items: center; gap: .625rem; cursor: pointer;
  padding: .875rem 1.125rem; font-weight: 600; list-style: none;
  color: var(--text);
}
.versus__ouvre::-webkit-details-marker { display: none; }
.versus__ouvre svg { color: var(--osyto); flex-shrink: 0; }
.versus__ouvre:hover { color: var(--osyto); }

.versus__ouvre::after {
  content: "›"; margin-left: auto; font-size: 1.25rem; color: var(--text-3);
  transform: rotate(90deg); transition: transform .18s var(--ease);
}
.versus__pli[open] .versus__ouvre::after { transform: rotate(-90deg); }
.versus__hint {
  font-weight: 400; font-size: var(--t-legende); color: var(--text-3);
}
.versus__form {
  display: flex; gap: .5rem; padding: 0 1.125rem 1.125rem; flex-wrap: wrap;
}
.versus__form .field {
  flex: 1 1 15rem; padding: .625rem .875rem; font-size: .9375rem;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
}
.versus__form .field::placeholder { color: var(--text-3); }
.versus__form .field:focus {
  outline: none; border-color: var(--osyto);
  box-shadow: 0 0 0 3px rgba(69, 119, 216, .16);
}

.versus__form .btn { padding: .625rem 1.125rem; font-size: .875rem; }

#versus_hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.versus__err { padding: 0 1.125rem 1rem; color: var(--stop); font-size: var(--t-menu); }

.versus__pli--mini {
  margin-top: .75rem;
  background: var(--surface-2); border-color: var(--rule-soft);
}
.versus__pli--mini .versus__ouvre {
  padding: .625rem .875rem; font-size: var(--t-menu); font-weight: 560;
}
.versus__pli--mini .versus__ouvre::after { font-size: 1rem; }
.versus__pli--mini .versus__form { padding: 0 .875rem .875rem; }

.versus__pli--mini .field {
  width: 100%; padding: .5rem .75rem; font-size: .875rem;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--surface);
}
.versus__pli--mini .field:focus {
  outline: none; border-color: var(--osyto);
  box-shadow: 0 0 0 3px rgba(69, 119, 216, .16);
}
.versus__res { margin-bottom: 1rem; }

.vs__phrase { font-size: 1.0625rem; font-weight: 640; margin-bottom: .875rem; }
.vs__phrase--ok { color: var(--go); }
.vs__phrase--err { color: var(--stop); }

.vs__duel {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 1.25rem;
  background: var(--surface);
}
.vs__col { text-align: center; min-width: 0; }
.vs__qui {
  font-size: var(--t-legende); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3); font-weight: 640;
}
.vs__dom {
  font-size: .8125rem; color: var(--text-2); margin: .25rem 0 .5rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vs__note { font-family: var(--mono); font-size: 2.25rem; font-weight: 680; line-height: 1; }
.vs__cent { font-size: .875rem; color: var(--text-3); font-weight: 500; }
.vs__verdict { font-size: .8125rem; color: var(--text-2); margin-top: .375rem; }
.vs__vs {
  font-size: var(--t-legende); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3);
}

.vs__col--mene { position: relative; }
.vs__fanion {
  display: inline-block; margin-left: .375rem; padding: .0625rem .375rem;
  border-radius: 999px; background: var(--go); color: #fff;
  font-size: .5625rem; letter-spacing: .04em; vertical-align: middle;
}
.vs__jauge {
  display: block; height: 4px; border-radius: 3px; background: var(--surface-2);
  margin: .5rem auto 0; max-width: 8rem; overflow: hidden;
}
.vs__jauge i { display: block; height: 100%; border-radius: 3px; }

.vs__mini {
  display: inline-block; width: 3.25rem; height: 4px; border-radius: 3px;
  background: var(--surface-2); overflow: hidden; vertical-align: middle;
  margin-right: .5rem;
}
.vs__mini i { display: block; height: 100%; border-radius: 3px; }
.vs__pied { margin-top: .75rem; font-size: var(--t-legende); color: var(--text-3); }

.vs__table { width: 100%; margin-top: 1rem; border-collapse: collapse; font-size: .875rem; }
.vs__table th, .vs__table td { padding: .5rem .625rem; border-bottom: 1px solid var(--rule-soft); }
.vs__table thead th {
  font-size: var(--t-legende); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3); text-align: right;
}
.vs__table thead th:first-child, .vs__table tbody th { text-align: left; font-weight: 560; }
.vs__table td { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.vs__delta--up { color: var(--go); }
.vs__delta--down { color: var(--stop); }
.vs__delta--flat { color: var(--text-3); }

@media (max-width: 34rem) {
  .vs__duel { grid-template-columns: 1fr; gap: .75rem; }
  .vs__note { font-size: 1.875rem; }

  .vs__vs { text-align: center; }

  .vs__mini { display: none; }
  .vs__table th, .vs__table td { padding: .5rem .375rem; }
}

.etape {
  margin-top: var(--v-4);
  padding-left: .875rem;
  border-left: 3px solid var(--osyto);
}
.etape__no {
  display: inline-block; margin-bottom: .5rem;
  padding: .25rem .5625rem;
  border: 0; border-radius: var(--r-sm);
  background: var(--osyto); color: #fff;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}

.etape--suite { border-left-color: var(--go); }
.etape--suite .etape__no { background: var(--go); }

.etape__no--on-ink {
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08);
  color: #fff;
}
.etape__t {
  font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: 700;
  letter-spacing: -.024em; margin-bottom: .1875rem;
}
.etape__l { font-size: var(--t-menu); color: var(--text-2); }

.toolbar {
  position: sticky; top: 3.5rem; z-index: 30;
  display: flex; flex-wrap: wrap; gap: .75rem;
  align-items: center; justify-content: space-between;
  padding: .625rem 0;
  min-width: 0;
  background: rgba(247,248,250,.9);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
}

.tabs {
  display: flex; gap: .25rem; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab { scroll-snap-align: start; }
.tab {
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .5rem .8125rem; border-radius: var(--r);
  border: 1px solid transparent;
  font-size: .8125rem; font-weight: 580; color: var(--text-2);
  cursor: pointer; white-space: nowrap;
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.tab:hover { background: var(--surface); border-color: var(--rule); color: var(--text); }
.tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.tab__n {
  font-family: var(--mono); font-size: .6875rem; font-weight: 700;
  padding: .0625rem .3125rem; border-radius: 4px;
  background: var(--rule); color: var(--text-2);
}
.tab.is-active .tab__n { background: rgba(255,255,255,.18); color: #fff; }
.tab__n--clean { background: var(--go-soft); color: var(--go); }
.tab__n--bad   { background: var(--stop-soft); color: var(--stop); }
.tab.is-active .tab__n--clean,
.tab.is-active .tab__n--bad { background: rgba(255,255,255,.18); color: #fff; }

.segmented {
  display: inline-flex; padding: 2px;
  background: var(--rule-soft); border: 1px solid var(--rule);
  border-radius: var(--r); flex-shrink: 0;
}
.segmented button {
  padding: .375rem .75rem; border-radius: 4px;
  font-size: .75rem; font-weight: 580; color: var(--text-2); cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
  white-space: nowrap;
}
.segmented button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.group {
  background: var(--surface);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.group + .group { margin-top: var(--v-4); }
.group__head {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .875rem 0 .8125rem;
  border-bottom: 1px solid var(--rule);
}
.group__icon { color: var(--osyto); display: grid; place-items: center; }
.group__title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.024em; flex: 1; }
.group__score { font-family: var(--mono); font-size: .8125rem; font-weight: 660; }

.check { border-bottom: 1px solid var(--rule-soft); }
.check:last-child { border-bottom: 0; }

.check__row {
  display: flex; align-items: center; gap: .5rem;
  padding-right: 0;
  transition: background-color .14s var(--ease);
}
.check__row:hover { background: var(--surface-2); }
.check__row:has(> [aria-expanded="true"]) { background: var(--surface-2); }
.check__toggle {
  display: flex; align-items: center; gap: .875rem;
  flex: 1; min-width: 0;
  padding: .8125rem .5rem .8125rem 0;
  text-align: left; cursor: pointer;
}
.check--static .check__toggle { cursor: default; }
.check--static .check__row:hover { background: transparent; }

.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot--ok { background: var(--go); }
.dot--warn { background: var(--watch); }
.dot--err { background: var(--stop); }
.dot--na { background: var(--text-3); opacity: .5; }

.check__label { flex: 1; min-width: 0; font-size: .875rem; font-weight: 500; }
.check__value {
  font-family: var(--mono); font-size: .75rem; font-weight: 640;
  white-space: nowrap; flex-shrink: 0;
}
.check__value--ok { color: var(--go); }
.check__value--warn { color: var(--watch); }
.check__value--err { color: var(--stop); }
.check__value--na { color: var(--text-3); }
.check__chevron { color: var(--text-3); flex-shrink: 0; transition: transform .2s var(--ease); }
.check__toggle[aria-expanded="true"] .check__chevron { transform: rotate(90deg); }

@media (max-width: 34rem) {
  .check__toggle {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .25rem .75rem; align-items: center;
    padding: .75rem .5rem .75rem 0;
  }
  .check__toggle .dot { grid-row: 1 / span 2; }
  .check__label { grid-column: 2; }
  .check__value { grid-column: 2; justify-self: start; white-space: normal; }
  .check__chevron { grid-column: 3; grid-row: 1 / span 2; }
  .check__row { padding-right: 0; }
  .check__body { padding-left: 1.1875rem; }
}

.check__body { padding: 0 0 1.125rem 1.4375rem; display: grid; gap: .75rem; }

.check__body > * { min-width: 0; }
.check__why { font-size: .8125rem; color: var(--text-2); line-height: 1.6; }
.check__fix {
  font-size: .8125rem; color: var(--text); line-height: 1.6;
  padding: .625rem .75rem; background: var(--osyto-soft);
  border-radius: var(--r-sm); border-left: 2px solid var(--osyto);
}
.check__fix b { font-weight: 620; }

.check__concerne {
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  overflow: hidden;
}
.check__concerne-t {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-legende); font-weight: 640;
  letter-spacing: .03em; text-transform: uppercase; color: var(--text-3);
}
.check__concerne .check__items {
  margin: 0; padding: .375rem 0; max-height: 13rem; overflow-y: auto;
}
.check__concerne .check__items li {
  padding: .3125rem .75rem;
  font-family: var(--mono); font-size: var(--t-legende);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.check__concerne .check__items a {
  color: var(--osyto); display: inline-flex; align-items: center; gap: .3125rem;
}
.check__concerne .check__items a svg { flex-shrink: 0; opacity: .55; }

.check__concerne .check__items li.item--img {
  display: flex; align-items: center; gap: .625rem; white-space: normal;
}
.item__vign {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-sm);
  border: 1px solid var(--rule); background: var(--surface);
  object-fit: cover;
}
.item__vign--vide { background: var(--surface-2); }
.item__corps {
  min-width: 0; flex: 1; display: flex; align-items: baseline; gap: .5rem;
  justify-content: space-between; overflow: hidden;
}
.item__corps > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.item__note {
  flex-shrink: 0; font-weight: 660; color: var(--text);
  font-variant-numeric: tabular-nums;
}

.mesure { margin-top: .5rem; }
.mesure__t {
  display: block; margin-bottom: .25rem;
  font-family: var(--mono); font-size: var(--t-legende);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}

.toolbar__aide {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: var(--t-legende); color: var(--text-3); white-space: nowrap;
  max-width: 100%;
}
@media (max-width: 34rem) {
  .toolbar__aide { white-space: normal; }
}

.check__tech {
  font-family: var(--mono); font-size: .6875rem; color: var(--text-2);
  padding: .625rem .75rem; background: var(--ink); color: var(--on-ink-2);
  border-radius: var(--r-sm); overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}
.check__items {
  font-family: var(--mono); font-size: .6875rem;
  max-height: 11rem; overflow-y: auto;
  border: 1px solid var(--rule-soft); border-radius: var(--r-sm);
  padding: .5rem .625rem; display: grid; gap: .25rem;
}
.check__items li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.check__items a { color: var(--text-2); text-decoration: none; }
.check__items a:hover { color: var(--osyto); text-decoration: underline; }

.tip { display: inline-flex; align-items: center; flex-shrink: 0; margin-left: .3125rem; }

.tip__btn {
  padding: 0; cursor: pointer; color: var(--text-3);
  display: inline-grid; place-items: center;
  min-width: 24px; min-height: 24px;
  margin: -5px 0;
}
.tip__btn:hover, .tip__btn[aria-expanded="true"] { color: var(--osyto); }
.tip__box {
  position: fixed; margin: 0; inset: auto;
  width: max-content; max-width: min(19rem, calc(100vw - 2rem));
  background: var(--ink-2); color: #d5dde6; border: 0;
  font-family: var(--sans); font-size: .75rem; font-weight: 400;
  line-height: 1.6; letter-spacing: 0; text-transform: none; text-align: left;
  padding: .6875rem .8125rem; border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(3px);
  transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.tip__box:popover-open { opacity: 1; transform: translateY(0); }
.tip__box::backdrop { background: transparent; }

.tip__box::after {
  content: ""; position: absolute; top: 100%; left: var(--fleche, 50%);
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink-2);
}
.tip__box[data-sous]::after {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: var(--ink-2);
}
.tip__box b { color: #fff; font-weight: 600; }
.tip__box .src {
  display: block; margin-top: .4375rem; padding-top: .4375rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-family: var(--mono); font-size: .625rem; color: var(--on-ink-3);
}

.plan {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.plan__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.plan__title { font-size: 1rem; font-weight: 660; letter-spacing: -.015em; }
.plan__sub { font-size: .8125rem; color: var(--text-2); margin-top: .1875rem; }
.plan__list { padding: .375rem 1.25rem 1.25rem; }

.step {
  display: flex; gap: .875rem; padding: .875rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.step:last-child { border-bottom: 0; }
.step__no {
  font-family: var(--mono); font-size: .75rem; font-weight: 700;
  width: 1.5rem; height: 1.5rem; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 5px;
  background: var(--ink); color: #fff;
}
.step__no--warn { background: var(--watch); }
.step__no--err { background: var(--stop); }
.step__title { font-size: .875rem; font-weight: 600; }
.step__cat { font-family: var(--mono); font-size: .625rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.step__why { font-size: .8125rem; color: var(--text-2); margin-top: .25rem; }
.step__do { font-size: .8125rem; color: var(--text); margin-top: .3125rem; }
.step__do b { font-weight: 620; }

.plan__peek { padding: .25rem 1.25rem 1rem; }
.peek {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .625rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.peek:last-child { border-bottom: 0; padding-bottom: 0; }
.peek__t { font-size: .8125rem; font-weight: 600; line-height: 1.35; }
.peek .step__cat { display: block; margin-top: .125rem; }

.peek__bar { display: grid; gap: .3125rem; margin-top: .4375rem; }
.peek__bar i {
  display: block; height: .4375rem; border-radius: 3px;
  background: linear-gradient(90deg, var(--rule) 0%, var(--rule-soft) 100%);
}
.peek__bar i:first-child { width: 100%; }
.peek__bar i:last-child  { width: 62%; }
.peek--plus .step__no { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--rule); }
.peek--plus .peek__t { color: var(--text-2); font-weight: 500; }

.plan--locked {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-bottom: 0;
  box-shadow: none;
}

.consult {
  background: var(--ink); color: var(--on-ink);
  border-radius: var(--r-xl); padding: clamp(1.75rem, 4.5vw, 2.75rem);
  text-align: center; position: relative; overflow: hidden;
}
.consult::before {
  content: ""; position: absolute; bottom: -50%; right: -10%;
  width: 26rem; height: 26rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(69,119,216,.15), transparent 70%);
}
.consult > * { position: relative; }

.consult__title {
  font-size: clamp(1.25rem, 5.6vw, 1.625rem);
  font-weight: 740; letter-spacing: -.028em; margin-bottom: .625rem; color: #fff;
  text-wrap: balance;
}
.consult__lede { color: var(--on-ink-2); font-size: .9375rem; max-width: 36rem; margin: 0 auto 1.625rem; }
.consult__frame { margin-top: 1.5rem; border-radius: var(--r); overflow: hidden; background: #fff; }
.consult__frame iframe { display: block; width: 100%; height: 660px; border: 0; }
.consult__fallback { margin-top: .875rem; font-size: .8125rem; color: var(--on-ink-3); }
.consult__fallback a { color: var(--on-ink-2); text-decoration: underline; }
.consult__fallback a:hover { color: #fff; }

.consult--hs .consult__frame { display: none; }
.consult--hs .consult__fallback {
  margin-top: 1.25rem; padding: .875rem 1.125rem;
  border: 1px solid var(--on-ink-3); border-radius: var(--r);
  font-size: var(--t-menu); color: var(--on-ink);
}
.consult--hs .consult__fallback a { color: #fff; font-weight: 620; }
@media (max-width: 640px) { .consult__frame iframe { height: 780px; } }

.scope {
  background: var(--ink); color: var(--on-ink);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.scope__chrome {
  display: flex; align-items: center; gap: .375rem;
  padding: .6875rem .875rem;
  background: var(--ink-2); border-bottom: 1px solid var(--ink-4);
}
.scope__pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.scope__adresse {
  margin-left: .625rem; padding: .1875rem .625rem;
  background: var(--ink); border-radius: 999px;
  font-family: var(--mono); font-size: var(--t-legende); color: var(--on-ink-3);
}

.scope__page { padding: 1.25rem 1.25rem 1rem; display: grid; gap: 1.125rem; }

.scope__bloc--barre { display: flex; align-items: center; gap: .5rem; }
.scope__marque { width: 34px; height: 9px; border-radius: 2px; background: rgba(255,255,255,.28); }
.scope__nav { width: 22px; height: 5px; border-radius: 2px; background: rgba(255,255,255,.1); margin-left: auto; }
.scope__nav + .scope__nav { margin-left: 0; }

.scope__zone, .scope__media, .scope__pied { position: relative; display: grid; gap: .5rem; }
.scope__titre { height: 15px; width: 72%; border-radius: 3px; background: rgba(255,255,255,.34); }
.scope__ligne { height: 6px; width: 100%; border-radius: 3px; background: rgba(255,255,255,.11); }
.scope__ligne--courte { width: 56%; }
.scope__ligne--fine { height: 5px; width: 40%; }

.scope__media { grid-template-columns: 1fr 1fr; gap: .5rem; }
.scope__img {
  height: 52px; border-radius: var(--r-sm);
  background:
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.07);
}

.scope__pin {
  position: absolute; right: 0;
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .25rem .5rem .25rem .25rem;
  background: rgba(46, 90, 172, .92);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  font-size: var(--t-legende); color: #fff; white-space: nowrap;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.6);
}
.scope__pin b {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; color: var(--osyto);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
}
.scope__pin--titre { top: -6px; }
.scope__pin--img   { top: -10px; right: -4px; }
.scope__pin--code  { bottom: -4px; }

.scope__pied-txt {
  padding: .875rem 1.25rem 1.125rem;
  border-top: 1px solid var(--ink-4);
  font-size: var(--t-legende); color: var(--on-ink-3); line-height: 1.6;
}

@media (max-width: 24rem) {
  .scope__pin span { display: none; }
}

.impact { display: inline-flex; align-items: center; gap: .375rem; }
.impact__plots { display: inline-flex; gap: 2px; }
.impact__plot {
  width: 4px; height: 10px; border-radius: 1px;
  background: var(--rule);
}
.impact__plot.is-on { background: var(--text-3); }
.check__value--err ~ .impact .impact__plot.is-on,
.impact--err .impact__plot.is-on { background: var(--stop); }
.impact--warn .impact__plot.is-on { background: var(--watch); }
.impact__mot {
  font-family: var(--mono); font-size: var(--t-legende);
  color: var(--text-3); letter-spacing: .02em;
}

.bareme {
  margin-top: var(--v-2); padding: .875rem 1rem;
  background: var(--surface-2); border: 1px solid var(--rule-soft);
  border-radius: var(--r); font-size: var(--t-menu); color: var(--text-2);
  line-height: 1.6;
}
.bareme b { color: var(--text); font-weight: 620; }

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(13, 20, 29, .97);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--ink-4);
  transform: translateY(110%);
  transition: transform .24s var(--ease);
}
.actionbar.is-shown { transform: translateY(0); }
.actionbar__read { min-width: 0; }
.actionbar__score {
  font-family: var(--mono); font-size: 1rem; font-weight: 680; color: #fff;
  display: block; line-height: 1.2;
}
.actionbar__label {
  font-size: var(--t-legende); color: var(--on-ink-2);
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.actionbar .btn { flex-shrink: 0; }
@media (max-width: 48rem) {
  .actionbar { display: flex; }

  .actionbar[hidden] { display: none; }
  body.has-actionbar { padding-bottom: 5.5rem; }
  body.has-actionbar.has-rgpd { padding-bottom: 13rem; }
}

.faq { margin-top: var(--v-5); }
.faq__head { max-width: 52rem; margin-bottom: var(--v-3); }
.faq__title {
  font-size: var(--t-titre); font-weight: 780;
  letter-spacing: -.032em; margin-bottom: var(--v-1); text-wrap: pretty;
}
.faq__lede { color: var(--text-2); font-size: var(--t-corps); }
.faq__list {
  border-top: 1px solid var(--rule);
}
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.125rem 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 620; letter-spacing: -.016em;
  color: var(--text); transition: color .14s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--osyto); }
.faq__q:focus-visible { outline: 2px solid var(--osyto); outline-offset: 3px; border-radius: var(--r-sm); }
.faq__q span { flex: 1; min-width: 0; text-wrap: balance; }
.faq__q svg { flex-shrink: 0; margin-top: .1875rem; color: var(--text-3); transition: transform .2s var(--ease); }
.faq__item[open] .faq__q svg { transform: rotate(90deg); }
.faq__item[open] .faq__q { color: var(--osyto); }
.faq__a {
  padding: 0 3rem 1.25rem 0; color: var(--text-2);
  font-size: var(--t-corps); line-height: 1.65; max-width: 46rem;
}
.faq__a p + p { margin-top: .75rem; }
.faq__a a { color: var(--osyto); }
@media (max-width: 34rem) { .faq__a { padding-right: 0; } }

.step-pane { display: none; }
.step-pane.is-active { display: block; }

.field { margin-bottom: .875rem; }
.field__label { display: block; font-size: .8125rem; font-weight: 580; margin-bottom: .375rem; }
.field__label span { color: var(--text-3); font-weight: 400; }
.field__input {
  width: 100%; padding: .75rem .875rem;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface); font-family: var(--sans); font-size: .875rem; color: var(--text);
  outline: 0; transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field__input:focus { border-color: var(--osyto); box-shadow: 0 0 0 3px var(--osyto-ring); }

.field__input::placeholder { color: var(--text-3); opacity: 1; }
.consent { display: flex; gap: .625rem; align-items: flex-start; margin: 1.125rem 0; }

.consent input, .publier input, .opt input {
  width: 17px; height: 17px; margin-top: .125rem;
  accent-color: var(--osyto); flex-shrink: 0; cursor: pointer;
}
.consent label { font-size: .75rem; color: var(--text-2); line-height: 1.6; }

.footer { background: var(--ink); color: var(--on-ink-2); padding: 3rem 0 1.75rem; margin-top: 4.5rem; }
.footer__grid { display: grid; gap: 2.25rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer__title { color: #fff; font-weight: 580; font-size: .875rem; margin-bottom: .875rem; }
.footer a { color: var(--on-ink-2); text-decoration: none; font-size: .8125rem; }
.footer a:hover { color: #fff; }
.footer li + li { margin-top: .5rem; }
.footer__note { font-size: .8125rem; line-height: 1.75; }
.footer__bar {
  border-top: 1px solid rgba(255,255,255,.09);
  margin-top: 2.25rem; padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
  justify-content: space-between; align-items: center; font-size: .75rem;
}
.review {
  display: inline-flex; align-items: center; gap: .75rem;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r); padding: .75rem .9375rem; text-decoration: none;
  transition: background-color .16s var(--ease); margin-top: 1.125rem;
}
.review:hover { background: rgba(255,255,255,.08); }
.review__score { font-family: var(--mono); font-size: 1.125rem; font-weight: 700; color: #fff; }
.stars { color: var(--watch-bright); letter-spacing: .1em; font-size: .75rem; }

body.has-rgpd { padding-bottom: 9rem; }
@media (min-width: 48rem) { body.has-rgpd { padding-bottom: 6rem; } }
.rgpd {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--ink-2); border-top: 1px solid var(--ink-4); padding: 1rem 0;
}
.rgpd__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.rgpd p { color: var(--on-ink-2); font-size: .75rem; line-height: 1.65; max-width: 48rem; }
.rgpd b { color: #fff; display: block; font-size: .8125rem; margin-bottom: .1875rem; }
.rgpd a { color: var(--on-ink); }

@media (max-width: 34rem) {
  .masthead__in .btn { padding: .5rem .6875rem; font-size: .8125rem; }
  .brand__name { font-size: .9375rem; }
  .slot { flex-wrap: wrap; }
  .slot__go { width: 100%; border-left: 0; border-top: 1px solid var(--rule); padding: .875rem; justify-content: center; }
  .verdict__left { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .toolbar { top: 3.375rem; }
  .check__body { padding-left: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .masthead, .rgpd, .leadbox, .consult, .footer, .intake, .toolbar,
  .verdict__actions, .plan__peek { display: none !important; }
  body { background: #fff; }
  .group, .plan, .verdict { break-inside: avoid; box-shadow: none; }
  .check__body { display: block !important; }
}

.podium {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .75rem; align-items: end; margin-top: var(--v-4);
}
.podium__place { position: relative; display: flex; flex-direction: column; }

.podium__place--1 { order: 2; }
.podium__place--2 { order: 1; }
.podium__place--3 { order: 3; }
.podium__medaille {
  position: absolute; z-index: 2; top: -.6875rem; left: 50%;
  transform: translateX(-50%);
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .8125rem; font-weight: 700;
  color: var(--ink); border: 2px solid var(--paper);
}
.podium__place--1 .podium__medaille { background: #e3b341; }
.podium__place--2 .podium__medaille { background: #c2c9d1; }
.podium__place--3 .podium__medaille { background: #cf9366; }
.podium__place .vcarte { height: 100%; padding-top: 1.5rem; }

.podium__place--1 .vcarte {
  border-color: #e3b341; box-shadow: 0 6px 24px rgba(227, 179, 65, .18);
}
.podium__place--1 { margin-top: -1.25rem; }
.podium__place--1 .vcarte__note { font-size: 2rem; }
@media (max-width: 44rem) {

  .podium { grid-template-columns: 1fr; align-items: stretch; }
  .podium__place--1, .podium__place--2, .podium__place--3 { order: 0; }
  .podium__place--1 { margin-top: 0; }
}

.vitrine__ticket {
  margin-top: 1rem; margin-bottom: 1.25rem; padding: .75rem 1rem;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface-2);
  font-size: var(--t-menu); color: var(--text-2);
}

.vcarte__rang {
  font-family: var(--mono); font-size: var(--t-legende); font-weight: 660;
  color: var(--text-3); margin-right: auto;
}

.vitrine {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin-top: var(--v-4);
}
.vcarte {
  position: relative; display: block;
  padding: 1.125rem 1.25rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); text-decoration: none; color: inherit;
  transition: border-color .16s var(--ease), transform .16s var(--ease),
              box-shadow .16s var(--ease);
}
a.vcarte:hover {
  border-color: var(--osyto); transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.vcarte__haut { display: flex; align-items: baseline; gap: .25rem; }
.vcarte__note {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.875rem; font-weight: 700; letter-spacing: -.045em;
}
.vcarte__note--ok { color: var(--go); }
.vcarte__note--warn { color: var(--watch); }
.vcarte__sur { font-family: var(--mono); font-size: var(--t-legende); color: var(--text-3); }
.vcarte__hote {
  margin-top: .375rem; font-weight: 620; letter-spacing: -.014em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vcarte__bas {
  display: flex; justify-content: space-between; gap: .75rem;
  margin-top: .5rem; padding-top: .5rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: var(--t-legende); color: var(--text-3);
}
.vcarte__fleche { position: absolute; top: 1.125rem; right: 1.125rem; color: var(--text-3); }
a.vcarte:hover .vcarte__fleche { color: var(--osyto); }
.vitrine__vide { margin-top: var(--v-4); color: var(--text-2); max-width: 34rem; }

.publier {
  display: flex; align-items: flex-start; gap: .625rem;
  margin-top: var(--v-2); padding: .875rem 1rem;
  background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: var(--r);
}
.publier label { font-size: var(--t-menu); color: var(--text-2); line-height: 1.55; cursor: pointer; }
.publier label b { color: var(--text); font-weight: 620; }

.footer__grid a,
.footer__bar a,
.rgpd a,
.check__concerne .check__items a,
.consult__fallback a,
.faq__a a {
  display: inline-block;
  min-height: 24px;
  padding-block: 2px;
}
.footer__grid li { line-height: 1.9; }

.opt {
  display: flex; align-items: flex-start; gap: .625rem;
  margin-top: .75rem; padding: .6875rem .875rem;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface-2);
  font-size: var(--t-menu); color: var(--text-2); cursor: pointer;
  transition: border-color .16s var(--ease);
}
.opt:hover { border-color: var(--text-3); }
.opt b { color: var(--text); font-weight: 620; }

.showcase { margin-top: var(--v-5); }
.showcase__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: var(--v-3);
  padding-bottom: var(--v-2); border-bottom: 1px solid var(--rule);
}
.showcase__titre {
  font-size: var(--t-titre); font-weight: 780; letter-spacing: -.032em;
  margin: .375rem 0 .25rem;
}
.showcase__lede { color: var(--text-2); font-size: var(--t-corps); }
.showcase__tout {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: var(--t-menu); font-weight: 600; color: var(--osyto);
  text-decoration: none; white-space: nowrap; min-height: 24px;
}
.showcase__tout:hover { text-decoration: underline; }

.showcase__grille {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) { .showcase__grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .showcase__grille { grid-template-columns: 1fr; } }

.showcase__suite {
  display: flex; flex-wrap: wrap; gap: .375rem;
  margin-top: .75rem;
}
.spuce {
  display: inline-flex; align-items: baseline; gap: .4375rem;
  padding: .3125rem .625rem;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface);
  font-size: .75rem; color: var(--text-2); text-decoration: none;
  transition: border-color .12s;
}
a.spuce:hover { border-color: var(--osyto); }
.spuce__n {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 640; color: var(--go);
}
.spuce__h { color: var(--text-2); }
.svit {
  display: grid; gap: .375rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color .16s var(--ease);
}
.svit:hover { border-color: var(--text-3); }
.svit__haut { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.svit__note {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-legende); font-weight: 700; letter-spacing: .01em;
  padding: .1875rem .4375rem; border-radius: var(--r-sm);
  background: var(--go-soft); color: var(--go);
}
.svit__date { font-family: var(--mono); font-size: var(--t-legende); color: var(--text-3); }
.svit__hote {
  font-weight: 640; letter-spacing: -.014em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.svit__titre {
  font-size: var(--t-menu); color: var(--text-2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.svit__bas {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: .25rem; padding-top: .625rem; border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: var(--t-legende); color: var(--text-3);
}
.svit__lien {
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--osyto); font-weight: 600; text-decoration: none;
}
.svit__lien:hover { text-decoration: underline; }

.vign {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--rule-soft);
  margin-bottom: .625rem;
}
.vign img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vign--vide { display: grid; place-items: center; }
.vign__lettre {
  font-family: var(--mono); font-size: 1.5rem; font-weight: 700;
  color: var(--text-3); letter-spacing: -.03em;
}

.verdict__apercu { flex-shrink: 0; width: 8.75rem; }
.verdict__apercu .vign {
  margin-bottom: 0;
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}
.verdict__apercu .vign__lettre { color: var(--on-ink-3); }
@media (max-width: 48rem) { .verdict__apercu { display: none; } }

.vign--logo { display: grid; place-items: center; padding: 1rem; }
.vign--logo img { width: auto; height: 100%; max-width: 60%; object-fit: contain; }

.resultat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: var(--v-4);

  align-items: stretch;
}
.resultat__gauche { min-width: 0; }

.resultat__rail { min-width: 0; align-self: stretch; }
.rail {
  position: sticky;

  top: 7.5rem;
  display: grid; gap: .75rem;

  max-height: calc(100vh - 9rem);
  overflow-y: auto;
  scrollbar-width: thin;
}

.leadbox {
  margin-top: -.75rem;
  padding: 1.125rem;
  border: 1px solid var(--rule); border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--surface);
}

.leadbox__ask {
  margin: 0 0 .875rem; padding-top: .125rem;
  font-size: .9375rem; font-weight: 660; letter-spacing: -.012em;
}

.leadbox__preuve {
  display: flex; align-items: center; gap: .4375rem;
  margin: 0 0 .875rem;
  font-size: .75rem; color: var(--text-3);
}
.leadbox__preuve::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--go); flex-shrink: 0;
}

.leadbox__plus {
  display: inline-block; margin: 0 0 .875rem; padding: 0;
  border: 0; background: none; font: inherit;
  font-size: .75rem; color: var(--osyto); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.leadbox__plus:hover { color: var(--osyto-700); }

.leadbox .field:last-of-type { margin-bottom: 0; }
.leadbox .consent { margin: .9375rem 0 1rem; }
.leadbox__seal {
  display: flex; align-items: center; justify-content: center; gap: .375rem;
  margin-top: .625rem; font-size: .6875rem; color: var(--text-3);
}
.leadbox__done { display: flex; gap: .625rem; font-size: var(--t-menu); color: var(--text-2); line-height: 1.55; }
.leadbox__mark {
  width: 1.625rem; height: 1.625rem; border-radius: 50%; flex-shrink: 0;
  background: var(--go-soft); color: var(--go); display: grid; place-items: center;
}

.leadbox.is-called { box-shadow: 0 0 0 3px var(--osyto-ring); border-color: var(--osyto); }

.rail__rdv {
  padding: 1.125rem;
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--surface);
}
.rail__rdvT { font-size: 1rem; font-weight: 700; letter-spacing: -.022em; margin: .375rem 0 .375rem; }
.rail__rdvL { font-size: var(--t-menu); color: var(--text-2); line-height: 1.55; margin-bottom: .875rem; }

@media (max-width: 64rem) {
  .resultat { grid-template-columns: minmax(0, 1fr); gap: var(--v-3); }
  .rail { position: static; max-height: none; overflow: visible; }
}

.check__fix--lock {
  display: grid; gap: .5rem;
  position: relative;
}

.retenu { display: grid; gap: .3125rem; }
.retenu i {
  display: block; height: .4375rem; border-radius: 3px;
  background: linear-gradient(90deg, var(--rule) 0%, var(--rule-soft) 100%);
}
.check__unlock {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .4375rem;
  min-height: 28px; padding: .3125rem .75rem;
  border: 1px solid var(--osyto); border-radius: var(--r-sm);
  background: var(--surface); color: var(--osyto);
  font-size: var(--t-legende); font-weight: 640; cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.check__unlock:hover { background: var(--osyto); color: #fff; }

.intake {
  max-width: 44rem; margin-left: auto; margin-right: auto; text-align: center;

  min-height: min(44rem, calc(100svh - 11rem));
  display: flex; flex-direction: column; justify-content: center;
}

.intake--court { min-height: 0; padding: var(--v-4) 0 0; }

.consult__actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }

.masthead__nav { display: flex; align-items: center; gap: 1.25rem; }
.masthead__nav > a:not(.btn) {
  font-size: var(--t-menu); font-weight: 560; color: var(--text-2);
  text-decoration: none;
}
.masthead__nav > a:not(.btn):hover { color: var(--osyto); }
@media (max-width: 30rem) {

  .masthead__nav > a:not(.btn) { display: none; }
}

.vitrine__cta {
  display: flex; align-items: center; justify-content: center;
  gap: .875rem; flex-wrap: wrap; margin-top: 1.25rem;
}
.vitrine__cta-note { font-size: var(--t-legende); color: var(--text-3); }

.vitrine__mention {
  margin-top: var(--v-4); font-size: var(--t-legende); color: var(--text-3);
  max-width: 44rem;
}

main { padding-top: clamp(1.5rem, 4svh, 4.5rem); }
.intake__title {

  font-size: min(var(--t-display), 9.5svh);
  margin-bottom: clamp(.5rem, 1.8svh, var(--v-2));
}
.intake__lede { margin-bottom: clamp(.875rem, 2.6svh, var(--v-3)); }
.piliers { margin-top: clamp(.625rem, 2.2svh, var(--v-3)); }
.trust {
  margin-top: clamp(.75rem, 2.4svh, var(--v-3));
  padding-top: clamp(.75rem, 2.4svh, var(--v-3));
}
.tally {
  margin-top: clamp(.625rem, 2svh, var(--v-3));
  padding-top: clamp(.625rem, 2svh, var(--v-3));
}

@media (max-height: 44rem) {
  .pilier { padding: .5rem .625rem; }
  .pilier__ic { margin-bottom: 0; }
}

@media (max-width: 30rem) {
  .tally__item + .tally__item { display: none; }

  .pilier { padding: .5rem .625rem; }
  .pilier__ic { margin-bottom: 0; }
  .piliers { gap: .375rem; }
  .opt { padding: .5rem .75rem; }
  .trust { gap: .5rem 1.25rem; }
}

body { position: relative; }
body::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; left: 0; right: 0; height: 46rem;
  background:

    radial-gradient(32rem 15rem at 50% 11rem, var(--paper) 45%, transparent 78%),
    radial-gradient(46rem 26rem at 50% -7rem, var(--osyto-ring), transparent 70%),
    linear-gradient(var(--rule-soft) 1px, transparent 1px) 0 0 / 2.75rem 2.75rem,
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px) 0 0 / 2.75rem 2.75rem;

  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 92%);
  pointer-events: none;
}

@media (prefers-contrast: more) { body::before { display: none; } }
.intake__lede { margin-left: auto; margin-right: auto; }
.intake .slot { text-align: left; }
.opt { text-align: left; }
.piliers { text-align: left; }
.trust { justify-content: center; }
.tally { justify-content: center; }

.progress {
  max-width: 34rem; margin: 1.25rem auto 0; text-align: left;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.progress__head { font-size: var(--t-corps); font-weight: 600; margin-bottom: .75rem; }
.progress__head .mono { font-variant-numeric: tabular-nums; color: var(--osyto); }
.progress__track { height: 8px; border-radius: 99px; background: var(--rule-soft); }
.progress__fill { border-radius: 99px; }

.adminbar {
  background: var(--ink); color: var(--on-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.adminbar__in {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .4375rem 1.25rem;
  font-size: .75rem;
}
.adminbar__tag {
  font-family: var(--mono); font-size: .625rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .1875rem .4375rem; border-radius: var(--r-sm);
  background: var(--osyto); color: #fff;
}
.adminbar__txt { color: var(--on-ink-2); }

.adminbar__act { margin-left: auto; display: flex; gap: .875rem; }
.adminbar__lien {
  display: inline-flex; align-items: center; min-height: 24px;
  background: none; border: 0; padding: 0;
  color: #fff; font: inherit; text-decoration: underline; cursor: pointer;
}
.adminbar__lien:hover { color: var(--osyto-bright, #8ab4f8); }

@media (max-width: 40rem) {
  .adminbar__txt { display: none; }
}

.prospect {
  margin-top: -.75rem;
  padding: 1.125rem;
  border: 1px solid var(--rule); border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--surface);
}
.prospect__t {
  margin: 0 0 .875rem;
  font-size: .9375rem; font-weight: 660; letter-spacing: -.012em;
}
.prospect__deja {
  margin-bottom: .875rem; padding: .5rem .625rem;
  border-radius: var(--r-sm); background: var(--watch-soft, #fff6e5);
  font-size: .75rem; color: var(--text-2); line-height: 1.45;
}

.masq {
  display: flex; align-items: center; gap: .75rem;
  padding: .8125rem 1.125rem;
  border-top: 1px solid var(--rule-soft);
}
.masq:first-of-type { border-top: 0; }
.masq__corps { flex: 1; min-width: 0; display: grid; gap: .3125rem; }
.masq__barres { display: grid; gap: .3125rem; }
.masq__barres i {
  display: block; height: .5rem; border-radius: 3px;
  background: linear-gradient(90deg, var(--rule) 0%, var(--rule-soft) 100%);
}
.masq__barres i:first-child { width: 62%; }
.masq__barres i:last-child  { width: 38%; }
.masq__mot {
  font-family: var(--mono); font-size: var(--t-legende);
  letter-spacing: .03em; text-transform: uppercase; color: var(--text-3);
}
.masq__cout {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-legende); color: var(--text-3); flex-shrink: 0;
}

.masqbox {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.masqbox__liste {
  max-height: min(28rem, 52svh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.masqbox__liste .group { border: 0; border-radius: 0; }
.masqbox__liste .group + .group { border-top: 1px solid var(--rule-soft); }
.masqbox__pied {
  padding: .875rem 1.125rem 1rem;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
}
.masqbox__note {
  margin: .5rem 0 0; text-align: center;
  font-size: .6875rem; color: var(--text-3);
}

.etape--suite { margin-top: var(--v-5); }

.verdict__actions {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.verdict__actions .btn { flex: 0 1 auto; }
@media (max-width: 40rem) {
  .verdict__actions .btn { flex: 1 1 100%; justify-content: center; }
}

.trouve { margin-top: .5rem; }
.trouve__t {
  display: block; margin-bottom: .375rem;
  font-size: .6875rem; font-weight: 620; letter-spacing: .01em;
  color: var(--text-3);
}
.trouve__l { display: flex; flex-wrap: wrap; gap: .375rem; }
.trouve__b, .trouve__tel {
  padding: .3125rem .5rem;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--surface-2);
  font: inherit; font-size: .75rem; color: var(--text-2);
  cursor: pointer; word-break: break-all; text-align: left;
  transition: border-color .12s, color .12s;
}
.trouve__b:hover, .trouve__b:focus-visible { border-color: var(--osyto); color: var(--text); }

.trouve__b--gen {
  border-color: var(--osyto); background: var(--osyto-soft);
  font-weight: 600; color: var(--osyto-700);
}
.trouve__tel { text-decoration: none; }
.trouve__tel:hover { border-color: var(--osyto); }

.prospect__mot { resize: vertical; min-height: 4.5rem; font-family: inherit; }
.prospect__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.prospect__actions .btn { flex: 1 1 auto; justify-content: center; }
.prospect__vue {
  margin-top: 1rem; padding: .875rem;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface-2);
}
.prospect__objet {
  margin: 0 0 .625rem; padding-bottom: .625rem;
  border-bottom: 1px solid var(--rule);
  font-size: .8125rem; font-weight: 640;
}

.prospect__corps {
  margin: 0; font-family: inherit; font-size: .75rem; line-height: 1.55;
  color: var(--text-2); white-space: pre-wrap; word-break: break-word;
  max-height: 22rem; overflow-y: auto;
}

.avis {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: 1rem; font-size: .8125rem;
}
.avis__etoiles { display: inline-flex; gap: 1px; color: #e8b53f; }
.avis__txt { color: var(--on-ink-2); }
.avis__txt b { color: #fff; font-weight: 640; }
.avis__txt a { text-decoration: underline; }

.apercu { display: flex; gap: .875rem; align-items: center; margin-bottom: 1.125rem; }
.apercu__page {
  flex: 0 0 4.75rem; height: 6.5rem; padding: .5rem;
  background: #fff; border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: .3125rem;
}
.apercu__tete { display: flex; align-items: baseline; justify-content: space-between; gap: .25rem; }
.apercu__marque { font-size: 5px; font-weight: 800; letter-spacing: .04em; color: var(--ink); }
.apercu__note { font-family: var(--mono); font-size: 7px; font-weight: 700; color: var(--ink); }
.apercu__site {
  margin: 0; font-size: 4.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apercu__barres { display: grid; gap: 2px; }
.apercu__b { display: block; height: 3px; border-radius: 1px; background: var(--rule-soft); }
.apercu__b i { display: block; height: 100%; border-radius: 1px; }

.apercu__lignes { display: grid; gap: 2.5px; margin-top: auto; }
.apercu__lignes i { display: block; height: 2px; border-radius: 1px; background: var(--rule-soft); }
.apercu__lignes i:nth-child(2) { width: 82%; }
.apercu__lignes i:nth-child(4) { width: 64%; }
.apercu__lignes i:last-child   { width: 45%; }
.apercu__l { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--text-2); }

.opt__note { display: block; margin-top: .1875rem; font-size: .6875rem; color: var(--text-3); }

.vitrine__filtres { margin-bottom: 1rem; }
.vcarte .vign { margin-bottom: .75rem; }
.vcarte__titre {
  margin-top: .25rem; font-size: .8125rem; color: var(--text-2); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.rgpd__choix { display: flex; gap: .5rem; flex-shrink: 0; flex-wrap: wrap; }
@media (max-width: 40rem) {
  .rgpd__choix { width: 100%; }
  .rgpd__choix .btn { flex: 1 1 0; justify-content: center; }
}
