@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("./fonts/archivo-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/publicsans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/plexmono-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --paper: #f2f4ee;
  --paper-deep: #e5eae1;
  --white: #fdfefc;
  --ink: #10251c;
  --body: #34483f;
  --muted: #556259;
  --line: rgba(16, 37, 28, 0.16);
  --line-light: rgba(253, 254, 252, 0.2);
  --green: #1f6a4e;
  --green-dark: #0d3527;
  --green-light: #dfeae3;
  --navy: #0c1b2a;
  --yellow: #f2d678;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-surface: 18px;
  --header-height: 68px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p,
ol,
ul,
figure {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--ink);
  font-family: var(--display);
  font-stretch: 106%;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

p,
li,
figcaption {
  text-wrap: pretty;
}

h1 {
  margin-bottom: 28px;
  font-size: clamp(3.05rem, 5.1vw, 4.5rem);
  font-weight: 780;
  line-height: 0.96;
}

h2 {
  margin-bottom: 24px;
  font-size: clamp(2.35rem, 3.8vw, 3.4rem);
  font-weight: 740;
  line-height: 1;
}

h3 {
  margin-bottom: 12px;
  font-size: clamp(1.38rem, 1.85vw, 1.75rem);
  font-weight: 700;
  line-height: 1.14;
}

.shell {
  width: min(100% - 64px, 1280px);
  margin-inline: auto;
}

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

.diagnostic :focus-visible,
.offer-complete :focus-visible,
.closing :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--yellow);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--radius-control);
  background: var(--yellow);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 160ms var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(242, 244, 238, 0.88);
  box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}

.nav-shell {
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  gap: 36px;
}

.brand {
  display: inline-flex;
  margin-right: auto;
  align-items: center;
}

.brand img {
  width: auto;
  height: 44px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-links a {
  padding: 10px 0;
  white-space: nowrap;
  background-image: linear-gradient(var(--green), var(--green));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  color: var(--body);
  font-size: 0.86rem;
  font-weight: 620;
  text-decoration: none;
  transition:
    background-size 240ms var(--ease-out),
    color 160ms ease;
}

/* Menu mobile : un dépliant sans JavaScript, la CSP interdit les scripts. */
.nav-toggle {
  display: none;
}

.nav-toggle > summary {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  cursor: pointer;
  list-style: none;
}

.nav-toggle > summary::-webkit-details-marker {
  display: none;
}

.nav-toggle > summary span,
.nav-toggle > summary span::before,
.nav-toggle > summary span::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  content: "";
  transition: transform 200ms var(--ease-out);
}

.nav-toggle > summary span::before {
  transform: translateY(-5.5px);
}

.nav-toggle > summary span::after {
  transform: translateY(4px);
}

.nav-toggle[open] > summary span {
  background: transparent;
}

.nav-toggle[open] > summary span::before {
  transform: rotate(45deg);
}

.nav-toggle[open] > summary span::after {
  transform: rotate(-45deg) translateY(0.5px);
}

/* Fermé, le panneau ne doit rien mesurer : sans cette règle, la couche
   interne de <details> le contraint à la largeur du bouton et déborde. */
.nav-toggle:not([open]) .nav-panel {
  display: none;
}

/* Le panneau passait de « display: none » à « grid » : display ne se
   transitionne pas, et l'ouverture se lisait comme un saut.

   Un seul mouvement, continu : le panneau descend de dix pixels en se
   révélant. Deux gestes ont été essayés avant et écartés. « lever » fait
   monter son contenu, donc à contresens d'un menu qui descend. Un
   déroulement par « clip-path » promenait un bord net de haut en bas, et
   une arête qui balaie se lit comme un essuyage, pas comme une apparition ;
   la cascade sur les liens ajoutait sept départs distincts par-dessus.
   Ici il n'y a qu'une accélération et une seule chose qui bouge.

   La fermeture reste instantanée : l'adoucir demande de transitionner
   « display », donc « allow-discrete », et cette combinaison laissait le
   panneau ouvert indéfiniment sur ce moteur. */
@media (prefers-reduced-motion: no-preference) {
  .nav-toggle[open] .nav-panel {
    animation: descendre 300ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
  }
}

/* Opacité et déplacement seulement : ni la hauteur ni le découpage, qui
   feraient travailler la mise en page à chaque image. */
@keyframes descendre {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
}

.nav-panel {
  position: absolute;
  z-index: 19;
  top: 100%;
  right: 0;
  left: 0;
  display: grid;
  padding: 4px 16px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 18px 30px -24px rgba(16, 37, 28, 0.5);
}

.nav-panel a {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 680;
  text-decoration: none;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--green);
  color: var(--white);
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 140ms var(--ease-out);
}

.button-small {
  min-height: 42px;
  padding: 11px 18px;
  font-size: 0.79rem;
}

.button:active {
  transform: scale(0.97);
}

.button-light {
  background: var(--white);
  color: var(--green-dark);
}

.button-outline {
  border: 1px solid rgba(253, 254, 252, 0.48);
  background: transparent;
  color: var(--white);
}

.text-link {
  display: inline-flex;
  align-items: center;
  color: var(--green);
  font-size: 0.92rem;
  font-weight: 700;
  text-underline-offset: 5px;
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover {
    background-size: 100% 2px;
    color: var(--ink);
  }

  .text-link:hover {
    color: var(--green-dark);
  }

  .button:hover {
    background: var(--green-dark);
  }

  .button-light:hover {
    background: var(--yellow);
    color: var(--navy);
  }

  .button-outline:hover {
    background: var(--white);
    color: var(--navy);
  }
}

/* Hero poster */
.hero {
  display: flex;
  align-items: center;
  padding: clamp(56px, 5.5vw, 84px) 0 clamp(72px, 6.6vw, 100px);
}

.hero-layout {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  gap: clamp(52px, 7vw, 104px);
}

.hero-copy {
  max-width: 720px;
}

@keyframes hero-copy-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes hero-art-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
}

.hero-copy > * {
  animation: hero-copy-enter 560ms var(--ease-out) both;
}

.hero-copy > :nth-child(2) {
  animation-delay: 60ms;
}

.hero-copy > :nth-child(3) {
  animation-delay: 120ms;
}

.hero-copy > :nth-child(4) {
  animation-delay: 180ms;
}

.eyebrow {
  margin-bottom: 32px;
  color: var(--green);
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 span {
  display: block;
}

.hero h1 mark {
  padding: 0 0.04em;
  background-color: transparent;
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-position: 0 0.52em;
  background-repeat: no-repeat;
  /* Tracé d'emblée : si l'animation ne s'applique pas, la marque est là. */
  background-size: 100% 0.38em;
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero-lead {
  max-width: 42ch;
  margin-bottom: 32px;
  color: var(--body);
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
}

.hero-art {
  position: relative;
  width: min(100%, 520px);
  margin: 0 0 0 auto;
  animation: hero-art-enter 720ms 140ms var(--ease-out) both;
}

.hero-art::before {
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 42%;
  height: 38%;
  background: var(--yellow);
  content: "";
}

.hero-art img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(420px, 46vw, 560px);
  border-radius: var(--radius-surface);
  object-fit: cover;
  box-shadow: 0 20px 48px -22px rgba(13, 53, 39, 0.35);
  transition: transform 240ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .hero-art:hover img {
    transform: translateY(-4px) scale(1.008);
  }
}

/* Diagnostic */
.diagnostic {
  padding: clamp(84px, 6.6vw, 104px) 0 clamp(64px, 5vw, 84px);
  background: var(--green-dark);
  color: #cbdad0;
}

.section-heading {
  max-width: 900px;
  margin-bottom: clamp(44px, 4.2vw, 62px);
}

.section-heading > p {
  max-width: 56ch;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(1.06rem, 1.45vw, 1.22rem);
  line-height: 1.7;
}

.section-heading-light {
  max-width: 820px;
}

.section-heading-light h2 {
  color: var(--white);
}

.section-heading-light > p {
  color: #bfd0c5;
}

.diagnostic-object {
  display: grid;
  align-items: center;
  margin-bottom: clamp(52px, 5vw, 72px);
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(52px, 9vw, 132px);
}

.diagnostic-count {
  color: var(--yellow);
  font-family: var(--display);
  font-size: clamp(7.5rem, 14vw, 12.5rem);
  font-stretch: 110%;
  font-weight: 760;
  letter-spacing: -0.1em;
  line-height: 0.66;
}

.checkpoints {
  display: grid;
  margin: 0;
  padding: 0;
  counter-reset: checks;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 52px;
  list-style: none;
}

.checkpoints li {
  position: relative;
  min-height: 46px;
  padding-left: 38px;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1rem, 1.45vw, 1.2rem);
  font-weight: 610;
  line-height: 1.3;
  counter-increment: checks;
}

.checkpoints li::before {
  position: absolute;
  top: 0.12em;
  left: 0;
  color: #7fa18f;
  content: counter(checks, decimal-leading-zero);
  font-family: var(--text);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Les trois constats et l'action forment une seule bande, refermée par un
   filet — comme la liste des dix points juste au-dessus. Auparavant les
   phrases flottaient sans structure et le bouton restait orphelin sous la
   première colonne, ce qui creusait un vide sous les deux autres. */

.diagnostic-facts {
  display: grid;
  margin-top: clamp(56px, 5vw, 78px);
  padding-top: clamp(30px, 2.8vw, 40px);
  border-top: 1px solid rgba(203, 218, 208, 0.22);
  grid-template-columns: 1.08fr 1fr 0.92fr;
  gap: clamp(42px, 7vw, 90px);
}

.diagnostic-facts p {
  margin-bottom: 0;
  color: #cbdad0;
  font-size: clamp(1.12rem, 1.75vw, 1.42rem);
  line-height: 1.45;
}

/* L'action ferme la bande à droite, en écho à l'intro de la section qui
   est elle aussi alignée à droite. Le blanc qui reste est alors du repos
   après une phrase finie, pas une case vide. */
.diagnostic .button {
  display: flex;
  width: fit-content;
  margin-top: clamp(32px, 3vw, 44px);
  margin-left: auto;
}

/* Method */
.method {
  padding: clamp(84px, 7vw, 108px) 0;
}

.method h2 {
  max-width: 20ch;
  margin-bottom: clamp(46px, 4.4vw, 66px);
}

.method-flow {
  display: grid;
  margin: 0;
  padding: 0;
  counter-reset: steps;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 72px);
  list-style: none;
}

.method-flow li {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  counter-increment: steps;
}

.method-flow li::before {
  display: block;
  margin-bottom: 22px;
  color: var(--green);
  content: counter(steps, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.method-flow h3 {
  margin-bottom: 14px;
  font-size: clamp(1.85rem, 2.6vw, 2.35rem);
}

.method-flow p {
  max-width: 31ch;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.7;
}

/* ══ LES OFFRES ═════════════════════════════════════════════════════════
   Deux cartes de la même espèce. Avant, le scan gratuit était du texte nu
   posé sur le papier à côté d'un bloc marine de sept cents pixels : la
   comparaison ne se lisait pas, on voyait une carte et du texte orphelin.

   Le scan gratuit porte maintenant les dix points qu'il vérifie. Ils
   existaient dans le scanner mais n'apparaissaient nulle part sur
   l'accueil, alors que c'est exactement ce que le visiteur veut savoir
   avant de lancer le scan. Les deux cartes ont donc chacune leur liste de
   ce qu'on reçoit, et des hauteurs comparables.

   Les deux surtitres sont des engagements de délai — dix minutes contre
   dix jours ouvrables. C'est vrai des deux côtés, et ça remplace le badge
   jaune qui flottait dans le coin de la carte marine.
   ═════════════════════════════════════════════════════════════════════ */

.offers {
  padding: clamp(84px, 7vw, 106px) 0;
  background: var(--paper-deep);
}

.offers .section-heading h2 {
  max-width: 28ch;
}

.offer-layout {
  display: grid;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.46fr);
  gap: clamp(20px, 2vw, 28px);
}

/* Gouttière de cartes, pas de gouttière de page : les cent dix-huit pixels
   d'avant séparaient deux blocs qui n'avaient aucun bord à eux. */
.offer {
  display: flex;
  flex-direction: column;
  padding: clamp(32px, 3.4vw, 52px);
  border-radius: var(--radius-surface);
}

.offer-free {
  border: 1px solid var(--line);
  background: var(--white);
}

.offer-complete {
  background: var(--navy);
  color: #c4cdd5;
}

.offer-delai {
  margin: 0 0 clamp(20px, 2vw, 28px);
  color: var(--green);
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.offer-complete .offer-delai {
  color: var(--yellow);
}

.offer-price {
  margin: 0 0 18px;
  color: var(--green);
  font-family: var(--display);
  font-size: clamp(3.4rem, 5.2vw, 4.8rem);
  font-stretch: 106%;
  font-weight: 760;
  letter-spacing: -0.05em;
  line-height: 0.82;
}

.offer-free h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
}

.offer-complete h3 {
  max-width: 16ch;
  margin: 0;
  color: var(--white);
  font-size: clamp(1.85rem, 2.6vw, 2.35rem);
}

.offer-intro {
  max-width: 46ch;
  margin: 14px 0 0;
  font-size: 1.02rem;
  line-height: 1.66;
}

.offer-free .offer-intro { color: var(--muted); }
.offer-complete .offer-intro { color: #c4cdd5; }

/* ── Les dix points du scan ──────────────────────────────────────────── */

/* Pas de filet par ligne : dix traits empilés font un tableau là où il n'y
   a qu'un index. La colonne de numéros monospace suffit à tenir la liste. */
.points-scan {
  display: grid;
  margin: clamp(28px, 2.8vw, 36px) 0 0;
  padding: 0;
  gap: 3px;
  list-style: none;
}

.points-scan li {
  display: flex;
  position: relative;
  align-items: baseline;
  margin-inline: -10px;
  padding: 5px 10px;
  border-radius: 5px;
  gap: 13px;
  color: var(--body);
  font-size: 0.92rem;
  line-height: 1.4;
}

/* Derrière le contenu, jamais devant : le libellé de chaque point est un
   nœud de texte nu, il ne peut pas être remonté au-dessus du calque. À
   z-index 0 la rangée la plus allumée effaçait son propre libellé. */
.points-scan li::before {
  position: absolute;
  z-index: -1;
  border-radius: 5px;
  content: "";
  inset: 0;
}

.points-scan li span {
  flex: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ── Ce que comprend la mise en conformité ───────────────────────────── */

.included {
  display: grid;
  margin: clamp(30px, 3vw, 40px) 0 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 36px;
  list-style: none;
}

.included li {
  position: relative;
  padding-left: 20px;
  color: #e1e6e9;
  font-size: 0.92rem;
  line-height: 1.4;
}

.included li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yellow);
  content: "";
}

/* ── Les prix ────────────────────────────────────────────────────────── */

/* subgrid aligne les trois prix sur la même ligne même quand un libellé
   passe sur deux lignes. Avant, un min-height de 46 px tenait ce rôle :
   un nombre magique qui cassait dès qu'un libellé changeait. */
.pricing {
  display: grid;
  margin-top: clamp(30px, 3vw, 40px);
  padding-top: clamp(24px, 2.4vw, 30px);
  border-top: 1px solid var(--line-light);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
}

.pricing p {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0 clamp(14px, 1.8vw, 24px);
  grid-row: span 2;
  grid-template-rows: subgrid;
  gap: 10px;
}

.pricing p:first-child { padding-left: 0; }
.pricing p + p { border-left: 1px solid var(--line-light); }

.pricing span {
  align-self: start;
  color: #aeb9c0;
  font-size: 0.76rem;
  line-height: 1.45;
}

.pricing strong {
  align-self: end;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.55rem, 2.3vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}

/* ── Le pied de carte ────────────────────────────────────────────────── */

/* margin-top auto : les deux boutons se calent au bas de leur carte, donc
   sur la même ligne, quelle que soit la longueur des deux listes. */
.offer-footer {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: clamp(32px, 3.4vw, 46px);
  gap: 28px;
}

.offer-footer p {
  max-width: 30ch;
  margin: 0;
  color: #9daab3;
  font-size: 0.76rem;
  line-height: 1.5;
}

/* Brand family */
.family {
  padding: clamp(84px, 7vw, 106px) 0;
}

.family-heading {
  max-width: 760px;
}

.family-heading h2 {
  max-width: 17ch;
}

.family-list {
  border-top: 1px solid var(--line);
}

.family-item {
  display: grid;
  min-height: 104px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr) 54px;
  gap: 38px;
  text-decoration: none;
  transition:
    color 180ms ease,
    transform 220ms var(--ease-out);
}

.family-name {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.1vw, 2.9rem);
  font-stretch: 108%;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.family-work {
  max-width: 28ch;
  color: var(--muted);
}

.family-arrow {
  color: var(--green);
  font-size: 1.8rem;
  text-align: right;
  transition: transform 180ms var(--ease-out);
}

.family-current .family-name {
  color: var(--green);
}

@media (hover: hover) and (pointer: fine) {
  .family-item:hover {
    color: var(--green);
    transform: translateX(10px);
  }

  .family-item:hover .family-arrow {
    transform: translate(3px, -3px);
  }
}

/* ══ LE FONDATEUR ET LES SOURCES ════════════════════════════════════════
   C'était deux sujets dans un seul manteau : qui est Clément d'un côté,
   les organismes de référence et le barème de sanctions de l'autre, empilés
   dans la même colonne avec un filet entre les deux. Le portrait se
   retrouvait donc posé aussi bien à côté de la présentation qu'à côté des
   citations légales, où il ne veut rien dire — et comme la présentation est
   courte, la colonne devait combler cent cinquante pixels de vide pour
   rattraper la hauteur de la photo.

   Ce sont maintenant deux bandes. Le fondateur garde le blanc et la photo,
   les sources reviennent sur le papier de la page. Le fond change de lui-
   même, plus besoin d'un filet pour dire qu'on change de sujet.

   Les trois références étaient trois liens verts soulignés noyés dans un
   paragraphe de trois lignes. Ce sont des autorités distinctes : elles sont
   listées comme telles, chacune avec ce qu'elle couvre.
   ═════════════════════════════════════════════════════════════════════ */

.credibility {
  padding: clamp(84px, 7vw, 106px) 0 0;
  background: var(--white);
}

/* ── Le fondateur ────────────────────────────────────────────────────── */

.fondateur {
  display: grid;
  align-items: center;
  grid-template-columns: clamp(220px, 24vw, 310px) minmax(0, 1fr);
  gap: clamp(36px, 4.6vw, 74px);
}

.fondateur-photo {
  margin: 0;
}

.fondateur-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-surface);
  object-fit: cover;
  object-position: center;
}

.fondateur-copie h2 {
  max-width: 20ch;
}

.fondateur-lead {
  max-width: 52ch;
  margin-bottom: clamp(28px, 3vw, 38px);
  color: var(--body);
  font-size: clamp(1.12rem, 1.7vw, 1.35rem);
  line-height: 1.65;
}

/* ── Les sources ─────────────────────────────────────────────────────── */

.sources-bande {
  margin-top: clamp(76px, 7vw, 104px);
  padding: clamp(58px, 5.4vw, 80px) 0 clamp(84px, 7vw, 106px);
  background: var(--paper);
}

/* Le drapeau flottait à quarante-huit pixels dans le coin du bloc, sans
   rien à quoi se rattacher. Ici il tient le rôle d'une icône devant son
   libellé, ce qui est le seul emploi qu'il sait remplir. */
.sources-etiquette {
  display: flex;
  align-items: center;
  margin: 0 0 clamp(16px, 1.6vw, 22px);
  gap: 11px;
  color: var(--green);
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.sources-etiquette img {
  width: 30px;
  height: auto;
  border-radius: 2px;
}

.sources-titre {
  max-width: 19ch;
  margin: 0;
}

.sources-lead {
  max-width: 58ch;
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Les bords supérieurs se rejoignent en un seul filet continu : la liste
   se lit comme un tableau de références, ce qu'elle est. */
.sources-liste {
  display: grid;
  margin: clamp(34px, 3.4vw, 46px) 0 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.sources-liste a {
  display: grid;
  padding: clamp(18px, 1.8vw, 22px) clamp(22px, 2.4vw, 32px) clamp(20px, 2vw, 24px) 0;
  border-top: 1px solid var(--line);
  gap: 8px;
  text-decoration: none;
}

.sources-liste li + li a {
  padding-left: clamp(22px, 2.4vw, 32px);
  box-shadow: inset 1px 0 0 var(--line);
}

.source-domaine {
  color: var(--muted);
  font-size: 0.84rem;
  letter-spacing: 0;
}

.source-nom {
  color: var(--green);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 640;
  letter-spacing: -0.012em;
  line-height: 1.35;
}

@media (hover: hover) and (pointer: fine) {
  .sources-liste a:hover .source-nom {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/* ── Les sanctions ───────────────────────────────────────────────────── */

/* C'est l'enjeu de toute la page, et c'était une ligne repliée sous un
   filet. Les trois montants remontent donc à la surface, sur une carte
   blanche qui se détache du papier de la bande.

   La nuance reste visible et non repliée : le site promet d'expliquer la
   conformité « sans faire peur », afficher les plafonds sans dire qu'ils
   ne sont pas automatiques serait exactement le contraire. Le détail par
   régime, lui, reste dans le dépliant. */
.sanctions-apercu {
  --carte-marge: clamp(28px, 3vw, 40px);

  margin-top: clamp(38px, 3.8vw, 52px);
  padding: var(--carte-marge);
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--white);
}

.sanctions-etiquette {
  margin: 0 0 clamp(22px, 2.2vw, 30px);
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: -0.005em;
}

/* subgrid : les trois montants, leurs cadres et leurs notes s'alignent
   entre colonnes même quand un libellé passe sur deux lignes. */
.sanctions-chiffres {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: 0 clamp(24px, 2.6vw, 40px);
  list-style: none;
}

/* Le filet sépare deux moitiés de carte : il va donc d'un bord à l'autre.
   Les marges négatives annulent le rembourrage de la carte, le rembourrage
   horizontal le rétablit pour le contenu — la même mesure des deux côtés,
   tenue par une seule variable. */
.sanctions-chiffres {
  margin-inline: calc(-1 * var(--carte-marge));
  padding: 0 var(--carte-marge) clamp(24px, 2.4vw, 32px);
  border-bottom: 1px solid var(--line);
}

.sanctions-chiffres li {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: 9px;
}

.sanctions-chiffres li + li {
  padding-left: clamp(24px, 2.6vw, 40px);
  margin-left: calc(-1 * clamp(24px, 2.6vw, 40px) / 2);
  border-left: 1px solid var(--line);
}

.chiffre {
  align-self: end;
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.chiffre-cadre {
  margin: 0;
  color: var(--body);
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.4;
}

.chiffre-note {
  align-self: start;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.sanctions-nuance {
  max-width: 76ch;
  margin: clamp(24px, 2.4vw, 32px) 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.65;
}

.sanctions-nuance strong {
  color: var(--ink);
  font-weight: 700;
}

.sanctions {
  margin-top: clamp(22px, 2.2vw, 30px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.sanctions summary {
  padding: 22px 0;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
}

.sanctions summary::marker {
  color: var(--green);
}

.sanctions-content {
  padding: 6px 0 32px;
}

.sanctions-content > p {
  max-width: 74ch;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.65;
}

.sanctions table {
  width: 100%;
  margin: 28px 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.sanctions th,
.sanctions td {
  padding: 18px 18px 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: left;
  vertical-align: top;
}

.sanctions thead th {
  color: var(--muted);
  font-size: 0.67rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sanctions th:first-child {
  width: 18%;
}

.sanctions th:nth-child(2) {
  width: 29%;
}

.sanctions tbody th,
.sanctions td strong {
  color: var(--ink);
}

/* Conclusion */
.closing {
  padding: clamp(84px, 7.2vw, 108px) 0 clamp(78px, 6.6vw, 100px);
  background: var(--navy);
  color: #c4cdd5;
}

.closing-inner {
  display: grid;
  align-items: end;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(60px, 10vw, 150px);
}

.closing h2 {
  margin-bottom: 0;
  color: var(--white);
  font-size: clamp(2.6rem, 4.4vw, 3.9rem);
}

.closing-inner > div > p {
  max-width: 32ch;
  margin-bottom: 30px;
  font-size: 1.1rem;
  line-height: 1.65;
}

.site-footer {
  padding: 0 0 38px;
  background: var(--navy);
  color: #aeb9c0;
}

.footer-main {
  display: grid;
  padding: 58px 0 68px;
  border-top: 1px solid rgba(253, 254, 252, 0.16);
  grid-template-columns: 1.1fr 0.9fr 0.75fr;
  gap: clamp(44px, 6vw, 88px);
}

.footer-identity > a {
  color: var(--white);
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.footer-identity p {
  max-width: 27ch;
  margin: 18px 0 0;
}

.site-footer address {
  font-style: normal;
  line-height: 1.8;
}

.site-footer nav {
  display: grid;
  align-content: start;
  gap: 12px;
}

.site-footer address a,
.site-footer nav a {
  color: #ccd5dc;
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer address a:hover,
  .site-footer nav a:hover {
    color: var(--white);
    text-decoration: underline;
  }
}

.footer-legal {
  display: flex;
  padding-top: 28px;
  border-top: 1px solid rgba(253, 254, 252, 0.1);
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  color: #9aa8b2;
  font-size: 0.78rem;
  line-height: 1.6;
}

.footer-legal p {
  max-width: 74ch;
  margin: 0;
}

/* Au-delà de la tablette, le chapeau tient sur deux colonnes : le titre
   garde sa force, l'intro comble le vide de droite. */
@media (min-width: 961px) {
  .section-heading,
  .section-heading-light,
  .family-heading {
    display: grid;
    max-width: none;
    align-items: end;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: clamp(44px, 4.5vw, 82px);
  }

  .section-heading h2 {
    margin-bottom: 0;
  }

  .section-heading > p {
    padding-bottom: 0.4em;
  }
}

/* Large tablets */
@media (max-width: 1180px) {
  h1 {
    font-size: clamp(4rem, 7vw, 5.5rem);
  }

  .hero-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: 50px;
  }

  .hero-art img {
    height: min(64dvh, 600px);
  }

  .offer-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  }
}

/* Tablet composition */
@media (max-width: 960px) {
  .shell {
    width: min(100% - 48px, 1280px);
  }

  .hero {
    padding: 64px 0 88px;
  }

  .hero-layout {
    grid-template-columns: 1fr;
    gap: 76px;
  }

  .hero-copy {
    max-width: 760px;
  }

  .hero-art {
    width: min(100%, 650px);
    margin-left: 0;
  }

  .hero-art img {
    height: auto;
    aspect-ratio: 16 / 11;
    object-position: 50% 58%;
  }

  .diagnostic-object {
    grid-template-columns: 0.72fr 1.28fr;
    gap: 46px;
  }

  .diagnostic-count {
    font-size: clamp(10rem, 25vw, 14rem);
  }

  /* Sous 960px, trois colonnes réduisent chaque phrase à cinq lignes.
     Une seule colonne, avec un filet par constat pour garder la structure
     de la bande. */
  .diagnostic-facts {
    gap: 0;
    grid-template-columns: 1fr;
  }

  .diagnostic-facts p {
    padding: 18px 0;
    border-bottom: 1px solid rgba(203, 218, 208, 0.16);
  }

  .diagnostic-facts p:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  /* Une action alignée à droite n'a pas de sens sur un écran étroit :
     elle redevient pleine largeur, donc facile à atteindre au pouce. */
  .diagnostic .button {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .offer-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .offer-footer {
    padding-top: clamp(28px, 3vw, 38px);
  }

  .family-item {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.62fr) 40px;
  }

  /* Trois montants côte à côte sous 960 px réduisent chaque colonne à une
     colonne de mots. Ils s'empilent, le filet passe à l'horizontale. */
  .sanctions-chiffres {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 0;
  }

  .sanctions-chiffres li {
    display: grid;
    grid-row: auto;
    grid-template-rows: none;
    padding: clamp(18px, 2.4vw, 22px) 0;
  }

  .sanctions-chiffres li + li {
    margin-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .sanctions-chiffres li:first-child { padding-top: 0; }
  .sanctions-chiffres li:last-child { padding-bottom: 0; }
}

/* Mobile */
@media (max-width: 720px) {
  :root {
    --header-height: 68px;
  }

  body {
    font-size: 16px;
  }

  .shell {
    width: min(100% - 32px, 1280px);
  }

  h1 {
    margin-bottom: 24px;
    font-size: clamp(2.55rem, 10.5vw, 3.15rem);
    line-height: 1;
  }

  h2 {
    font-size: clamp(2rem, 8.4vw, 2.55rem);
  }

  .nav-shell {
    gap: 14px;
  }

  .brand img {
    height: 38px;
  }

  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .button-small {
    min-height: 44px;
    padding-inline: 14px;
    font-size: 0.73rem;
  }

  .hero {
    padding: 44px 0 76px;
  }

  .hero-layout {
    gap: 52px;
  }

  .eyebrow {
    margin-bottom: 26px;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
  }

  .hero-lead {
    margin-bottom: 30px;
    font-size: 1.06rem;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 17px;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-actions .text-link {
    align-self: flex-start;
  }

  .hero-art::before {
    right: -8px;
    bottom: -10px;
  }

  .hero-art img {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-surface);
    object-position: center;
  }

  .diagnostic,
  .offers,
  .family,
  .credibility {
    padding-block: 76px;
  }

  .section-heading {
    margin-bottom: 44px;
  }

  .diagnostic-object {
    grid-template-columns: 1fr;
    gap: 62px;
  }

  .diagnostic-count {
    font-size: clamp(5.5rem, 30vw, 8rem);
  }

  .checkpoints {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  .checkpoints li {
    min-height: 0;
    font-size: 1rem;
  }

  .diagnostic-facts {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .diagnostic-facts p {
    max-width: 27ch;
  }

  .method {
    padding-block: 80px;
  }

  .method h2 {
    margin-bottom: 46px;
  }

  .method-flow {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .method-flow li::before {
    margin-bottom: 16px;
  }

  .method-flow h3 {
    margin-bottom: 12px;
    font-size: 1.95rem;
  }

  .offer-price {
    font-size: 3.7rem;
  }

  .offer {
    padding: 32px 24px;
  }

  .offer-complete h3 {
    font-size: 1.85rem;
  }

  .offer-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .included {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .pricing {
    grid-template-columns: 1fr;
  }

  .pricing p,
  .pricing p:first-child {
    padding: 17px 0;
  }

  .pricing p + p {
    border-top: 1px solid var(--line-light);
    border-left: 0;
  }

  .pricing span {
    min-height: 0;
  }

  .pricing strong {
    margin-top: 4px;
  }

  .offer-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .offer-footer .button {
    width: 100%;
  }

  .family-item {
    min-height: 0;
    padding: 30px 0;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 16px;
  }

  .family-name {
    font-size: clamp(1.7rem, 7vw, 2.15rem);
  }

  .family-work {
    grid-column: 1;
    grid-row: 2;
  }

  .family-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .fondateur {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Une colonne : les trois références s'empilent, le filet supérieur
     de chacune devient son séparateur. */
  .sources-liste {
    grid-template-columns: 1fr;
  }

  .sources-liste a,
  .sources-liste li + li a {
    padding-right: 0;
    padding-left: 0;
    box-shadow: none;
  }

  .sources-liste li:last-child a {
    border-bottom: 1px solid var(--line);
  }

  .fondateur-photo {
    width: min(82%, 340px);
  }

  .fondateur-copie h2 {
    max-width: 14ch;
  }

  .sources-titre {
    font-size: 1.45rem;
  }

  .sanctions table,
  .sanctions thead,
  .sanctions tbody,
  .sanctions tr,
  .sanctions th,
  .sanctions td {
    display: block;
    width: 100%;
  }

  .sanctions thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sanctions tr {
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
  }

  .sanctions th,
  .sanctions td {
    padding: 6px 0;
    border: 0;
  }

  .sanctions td::before {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    content: attr(data-label);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .closing {
    padding-block: 80px 74px;
  }

  .closing-inner {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .closing h2 {
    font-size: clamp(2.25rem, 9vw, 2.85rem);
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .footer-legal {
    flex-direction: column;
    gap: 18px;
  }
}

@media (max-width: 390px) {
  .shell {
    width: min(100% - 24px, 1280px);
  }

  .brand img {
    height: 34px;
  }

  .button-small {
    padding-inline: 11px;
    font-size: 0.7rem;
  }
}

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

  .button,
  .family-item,
  .family-arrow,
  .nav-links a,
  .nav-panel,
  .nav-toggle > summary span,
  .nav-toggle > summary span::before,
  .nav-toggle > summary span::after,
  .skip-link {
    transition-duration: 0.01ms;
  }

  .hero-copy > *,
  .hero-art {
    animation: none;
  }

  .hero-art img,
  .hero-art:hover img {
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(16, 37, 28, 0.38);
    --line-light: rgba(253, 254, 252, 0.46);
    --muted: #40534a;
  }

  .site-header {
    background: var(--paper);
  }
}

/* ══ LE RAPPORT ═════════════════════════════════════════════════════════
   Le produit n'est pas un document : c'est un courriel qui arrive. La carte
   est donc bâtie comme un message — bandeau expéditeur et objet, puis le
   corps — et non comme une feuille posée sur la page.

   Deux gestes portent la section. La note sur 100 prend l'échelle qu'elle
   mérite : c'est la première chose qu'on lit dans le vrai rapport. Et le
   nombre d'écarts est surligné au jaune de la marque, le même tracé que le
   titre d'accueil — sur un rapport, le surligneur ne décore pas, il fait
   exactement ce qu'on fait à la main sur un document.

   L'état de chaque point est porté par un filet vertical coloré, doublé
   d'un libellé écrit : la couleur seule ne dirait rien à qui ne la voit pas.
   ═════════════════════════════════════════════════════════════════════ */

.rapport {
  padding: clamp(72px, 6vw, 104px) 0;
  background: var(--paper-deep);
}

.rapport-grid {
  display: grid;
  align-items: stretch;
  grid-template-columns: 0.76fr 1fr;
  gap: clamp(44px, 6vw, 92px);
}

.rapport-copy {
  display: flex;
  flex-direction: column;
}

/* Coupe fixée dans le balisage : laissée libre, la mesure isolait
   « vous » sur sa propre ligne. */
.rapport .section-heading h2 {
  max-width: none;
  text-wrap: nowrap;
}

.rapport-lead {
  max-width: 40ch;
  margin: 0;
  color: var(--body);
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  line-height: 1.62;
}

/* Pas de filet pleine largeur entre les points : quatre traits horizontaux
   empilés hachent la colonne sans rien hiérarchiser. Un tiret court suffit
   à marquer le départ de chaque item. */
.rapport-points {
  display: grid;
  margin: clamp(34px, 3.2vw, 46px) 0 clamp(36px, 4vw, 52px);
  padding: 0;
  gap: clamp(20px, 2vw, 26px);
  list-style: none;
}

.rapport-points li {
  display: grid;
  position: relative;
  padding-left: 22px;
  gap: 3px;
}

.rapport-points li::before {
  position: absolute;
  top: 0.66em;
  left: 0;
  width: 11px;
  height: 2px;
  background: var(--green);
  content: "";
}

.rapport-points b {
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 640;
  letter-spacing: -0.012em;
}

.rapport-points span {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.56;
}

/* La colonne s'étire à la hauteur du courriel : le bouton se cale en bas,
   aligné sur le pied de la carte, au lieu de laisser un vide. */
.rapport-cta {
  align-self: start;
  margin-top: auto;
}

/* ── Le courriel ─────────────────────────────────────────────────────── */

.courriel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(16, 37, 28, 0.04), 0 20px 48px -30px rgba(16, 37, 28, 0.3);
}

.courriel-tete {
  padding: clamp(18px, 2vw, 24px) clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--line);
  background: var(--green-light);
}

.courriel-meta {
  display: flex;
  justify-content: space-between;
  margin: 0 0 9px;
  gap: 16px;
  color: #2c5443;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.courriel-objet {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  font-weight: 640;
  letter-spacing: -0.018em;
}

.courriel-corps {
  padding: clamp(26px, 3vw, 36px) clamp(22px, 2.6vw, 34px) clamp(28px, 3vw, 38px);
}

/* ── La note ─────────────────────────────────────────────────────────── */

.note {
  padding-bottom: clamp(22px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
}

.note-libelle {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.note-chiffre {
  display: flex;
  align-items: baseline;
  margin: 8px 0 0;
  gap: 4px;
  font-family: var(--display);
}

.note-chiffre strong {
  color: var(--ink);
  font-size: clamp(3.1rem, 5.6vw, 4.4rem);
  font-weight: 780;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.note-chiffre span {
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 600;
}

.note-detail {
  margin: 15px 0 0;
  color: var(--body);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* Le surligneur du titre d'accueil, retracé pour du texte courant : à
   100 px la bande du hero passe sous les lettres, à 16 px elle ressemble à
   un texte barré. Elle est donc remontée sur le corps du mot. */
.note-detail mark {
  padding: 0 0.06em;
  background: linear-gradient(transparent 26%, var(--yellow) 26%, var(--yellow) 88%, transparent 88%);
  color: inherit;
  font-weight: 600;
}

/* ── Les constats ────────────────────────────────────────────────────── */

/* Une liste ordonnée parce que l'ordre est une information : les écarts
   sont classés par priorité, le point conforme vient en dernier. */
.constats {
  display: grid;
  margin: clamp(24px, 2.6vw, 32px) 0 0;
  padding: 0;
  gap: clamp(22px, 2.4vw, 28px);
  list-style: none;
}

.constat {
  padding-left: clamp(15px, 1.5vw, 20px);
  border-left: 3px solid var(--line);
}

.constat-ecart { border-left-color: #e0bd4a; }
.constat-conforme { border-left-color: var(--green); }

.ligne-ref {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0 0 9px;
  gap: 7px 12px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 640;
  letter-spacing: -0.012em;
}

.ligne-num {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.etat {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.etat-ecart { color: #7d5f06; }
.etat-conforme { color: var(--green); }

.ligne-constat,
.ligne-action {
  margin: 0;
  color: var(--body);
  font-size: 0.95rem;
  line-height: 1.6;
}

.ligne-action {
  margin-top: 7px;
  color: var(--muted);
}

.ligne-action strong {
  color: var(--ink);
  font-weight: 700;
}

/* Phrase, pas étiquette : en capitales monospace elle avait l'air d'un
   label du rapport alors qu'elle parle de la page. */
.feuille-mention {
  margin: 15px 0 0;
  padding-left: 2px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

@media (max-width: 960px) {
  .rapport-grid { grid-template-columns: 1fr; }
  .rapport-points { margin-bottom: clamp(30px, 4vw, 40px); }
  .rapport-cta { margin-top: 0; }
}

/* En dessous de 520 px, l'état passe sous le titre pour tous les constats :
   laissé au flux, il restait en ligne ou basculait selon la longueur du
   titre, ce qui cassait l'alignement d'un point à l'autre. */
@media (max-width: 520px) {
  .etat {
    flex-basis: 100%;
    margin-left: 0;
  }
}


/* ══ MOUVEMENT ══════════════════════════════════════════════════════════
   Trois gestes, pas un de plus, et chacun porte une information.

   Le surligneur se trace comme un vrai coup de marqueur. Le procédé vient
   du scanner, où il existait déjà : ici il remplace un dégradé figé, si
   bien que la famille partage enfin le même geste.

   La note du rapport se compte. C'est la première chose qu'on lit dans le
   vrai rapport, la voir se poser dit ce qu'elle est.

   Les dix points du scan se lèvent en cascade courte, 45 ms d'écart :
   assez pour qu'on voie une liste se remplir, trop court pour attendre.

   Tout est en CSS. Aucun script sur ce site, et l'état d'arrivée est
   toujours celui du repos : si rien ne s'applique, la page est complète.
   ═════════════════════════════════════════════════════════════════════ */

@keyframes tracer-marque {
  from { background-size: 0% 0.38em; }
  to   { background-size: 100% 0.38em; }
}

@keyframes lever {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

@property --note {
  syntax: "<integer>";
  inherits: false;
  initial-value: 70;
}

@keyframes compter {
  from { --note: 0; }
  to   { --note: 70; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Au chargement : le titre est déjà lisible, le trait arrive après. */
  .hero h1 mark {
    animation: tracer-marque 760ms var(--ease-out) 620ms backwards;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .points-scan li {
      animation: lever auto linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 58%;
    }

    /* La cascade est portée par le rang, pas par une classe par ligne. */
    .points-scan li:nth-child(1)  { animation-delay: 0ms; }
    .points-scan li:nth-child(2)  { animation-range: entry 12% entry 60%; }
    .points-scan li:nth-child(3)  { animation-range: entry 14% entry 62%; }
    .points-scan li:nth-child(4)  { animation-range: entry 16% entry 64%; }
    .points-scan li:nth-child(5)  { animation-range: entry 18% entry 66%; }
    .points-scan li:nth-child(6)  { animation-range: entry 20% entry 68%; }
    .points-scan li:nth-child(7)  { animation-range: entry 22% entry 70%; }
    .points-scan li:nth-child(8)  { animation-range: entry 24% entry 72%; }
    .points-scan li:nth-child(9)  { animation-range: entry 26% entry 74%; }
    .points-scan li:nth-child(10) { animation-range: entry 28% entry 76%; }

    /* Le chiffre reste dans le balisage et sert de repli : il n'est masqué
       que là où le compteur peut réellement le remplacer. */
    .note-chiffre strong {
      position: relative;
      color: transparent;
    }

    .note-chiffre strong::after {
      position: absolute;
      inset: 0;
      color: var(--ink);
      content: counter(note);
      counter-reset: note var(--note);
      animation: compter auto linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 80%;
    }
  }
}


/* ══ MOUVEMENT CONTINU ══════════════════════════════════════════════════
   Une animation qui tourne en permanence doit dire quelque chose, sinon
   elle fatigue à la deuxième minute. Celle-ci dit le produit : le scan
   passe sur dix points, l'un après l'autre, sans arrêt.

   La tête de lecture est portée par les numéros. Chacun s'éclaire au vert
   de la marque quand le passage l'atteint, puis retombe. Dix décalages
   négatifs répartissent la vague sur un cycle de cinq secondes : la boucle
   est déjà en cours quand on arrive, elle n'a pas d'ouverture.

   Rien ne bouge de place et rien ne change de taille : sur une liste de
   dix lignes, un déplacement rendrait le texte illisible. Seule la couleur
   du numéro voyage. Le libellé, lui, ne bouge jamais.
   ═════════════════════════════════════════════════════════════════════ */

/* La tête de lecture éclaire la ligne entière, pas seulement son numéro.
   Un chiffre de dix pixels qui change de teinte pendant trois cents
   millisecondes ne se voit pas : il faut que la rangée s'allume. */
@keyframes passage-scan {
  0%, 26%, 100% {
    background-color: transparent;
    box-shadow: inset 2px 0 0 transparent;
  }
  6% {
    background-color: var(--green-light);
    box-shadow: inset 2px 0 0 var(--green);
  }
  16% {
    background-color: var(--green-light);
    box-shadow: inset 2px 0 0 var(--green);
  }
}

@keyframes passage-numero {
  0%, 26%, 100% { color: var(--muted); }
  6%, 16%       { color: var(--green); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Sans script, la boucle tourne comme avant. Avec, elle attend d'être à
     l'écran : « tourne » est posée par l'observateur. */
  /* La teinte est portée par un calque, pas par la rangée elle-même. La
     rangée a déjà une animation de révélation liée au défilement : lui
     poser un second animation-name laissait la boucle héritée de
     animation-timeline: view(), donc pilotée par le défilement au lieu du
     temps. Une fois la liste à l'écran la timeline est à 100 % et la
     boucle passait à « finished » sans jamais tourner.

     Propriétés longues, jamais la forme raccourcie : « animation: ... »
     remet animation-delay à zéro, et les décalages par rang ont une
     spécificité plus faible. */
  .points-scan li::before {
    animation-name: passage-scan;
    animation-duration: 4200ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-timeline: auto;
  }

  .points-scan li span,
  .js-mouvement .points-scan.tourne li span {
    animation-name: passage-numero;
    animation-duration: 4200ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .js-mouvement .points-scan li::before,
  .js-mouvement .points-scan li span {
    animation-name: none;
  }

  .js-mouvement .points-scan.tourne li::before {
    animation-name: passage-scan;
  }

  .js-mouvement.onglet-cache .points-scan li::before,
  .js-mouvement.onglet-cache .points-scan li span {
    animation-play-state: paused;
  }

  .points-scan li:nth-child(1)::before,
  .points-scan li:nth-child(1) span { animation-delay: -4200ms; }
  .points-scan li:nth-child(2)::before,
  .points-scan li:nth-child(2) span { animation-delay: -3780ms; }
  .points-scan li:nth-child(3)::before,
  .points-scan li:nth-child(3) span { animation-delay: -3360ms; }
  .points-scan li:nth-child(4)::before,
  .points-scan li:nth-child(4) span { animation-delay: -2940ms; }
  .points-scan li:nth-child(5)::before,
  .points-scan li:nth-child(5) span { animation-delay: -2520ms; }
  .points-scan li:nth-child(6)::before,
  .points-scan li:nth-child(6) span { animation-delay: -2100ms; }
  .points-scan li:nth-child(7)::before,
  .points-scan li:nth-child(7) span { animation-delay: -1680ms; }
  .points-scan li:nth-child(8)::before,
  .points-scan li:nth-child(8) span { animation-delay: -1260ms; }
  .points-scan li:nth-child(9)::before,
  .points-scan li:nth-child(9) span { animation-delay: -840ms; }
  .points-scan li:nth-child(10)::before,
  .points-scan li:nth-child(10) span { animation-delay: -420ms; }
}


/* ══ REPLI POUR LES NAVIGATEURS SANS animation-timeline ═════════════════
   Firefox ne connaît pas view() : la cascade des dix points et le compteur
   de la note ne s'y jouaient jamais. Le script pose « sans-vue-native » et
   « est-vu » ; les mêmes images-clés sont rejouées ici, déclenchées par un
   observateur au lieu du défilement.

   Le reste du temps ces règles n'existent pas : un navigateur qui gère
   view() ne voit jamais « sans-vue-native ». */

@media (prefers-reduced-motion: no-preference) {
  .sans-vue-native .points-scan.est-vu li {
    animation: lever 460ms var(--ease-out) backwards;
  }

  .sans-vue-native .points-scan.est-vu li:nth-child(1)  { animation-delay: 0ms; }
  .sans-vue-native .points-scan.est-vu li:nth-child(2)  { animation-delay: 45ms; }
  .sans-vue-native .points-scan.est-vu li:nth-child(3)  { animation-delay: 90ms; }
  .sans-vue-native .points-scan.est-vu li:nth-child(4)  { animation-delay: 135ms; }
  .sans-vue-native .points-scan.est-vu li:nth-child(5)  { animation-delay: 180ms; }
  .sans-vue-native .points-scan.est-vu li:nth-child(6)  { animation-delay: 225ms; }
  .sans-vue-native .points-scan.est-vu li:nth-child(7)  { animation-delay: 270ms; }
  .sans-vue-native .points-scan.est-vu li:nth-child(8)  { animation-delay: 315ms; }
  .sans-vue-native .points-scan.est-vu li:nth-child(9)  { animation-delay: 360ms; }
  .sans-vue-native .points-scan.est-vu li:nth-child(10) { animation-delay: 405ms; }

  /* Le compteur se rejoue à chaque retour à l'écran, ce que le défilement
     ne fait qu'en remontant. Le chiffre du balisage reste le repli : il
     n'est masqué que dans la règle qui le remplace effectivement. */
  .js-mouvement .note-chiffre.est-vu strong {
    position: relative;
    color: transparent;
  }

  .js-mouvement .note-chiffre.est-vu strong::after {
    position: absolute;
    inset: 0;
    color: var(--ink);
    content: counter(note);
    counter-reset: note var(--note);
    animation: compter 1100ms var(--ease-out) both;
  }
}


/* ══ DEUX BOUCLES DE PLUS ═══════════════════════════════════════════════
   Le surligneur du titre ne se traçait qu'une fois, au chargement. Il se
   retrace toutes les neuf secondes : c'est le geste signature de la
   marque, il a le droit de se répéter. Il s'efface par la gauche pour ne
   jamais paraître sauter d'un état à l'autre.

   La feuille de rapport reçoit une ligne de lecture qui descend en
   continu. C'est exactement ce que fait le produit : passer sur le
   document. Elle est fine et voilée — assez pour se voir, pas assez pour
   gêner la lecture du texte qu'elle traverse.
   ═════════════════════════════════════════════════════════════════════ */

@keyframes retracer-marque {
  0%            { background-size: 0% 0.38em; background-position-x: 0; }
  14%, 68%      { background-size: 100% 0.38em; background-position-x: 0; }
  86%, 100%     { background-size: 0% 0.38em; background-position-x: 100%; }
}

@keyframes ligne-de-lecture {
  from { transform: translateY(-8%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  to   { transform: translateY(1100%); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero h1 mark {
    animation-name: retracer-marque;
    animation-duration: 9s;
    animation-delay: 620ms;
    animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
    animation-iteration-count: infinite;
  }

  .courriel-corps {
    position: relative;
    overflow: hidden;
  }

  .courriel-corps > * {
    position: relative;
    z-index: 1;
  }

  .courriel-corps::after {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 34px;
    background: linear-gradient(
      to bottom,
      transparent,
      rgb(31 106 78 / 9%) 45%,
      rgb(31 106 78 / 55%) 50%,
      rgb(31 106 78 / 9%) 55%,
      transparent
    );
    content: "";
    pointer-events: none;
    animation: ligne-de-lecture 6s linear infinite;
  }

  .js-mouvement.onglet-cache .hero h1 mark,
  .js-mouvement.onglet-cache .courriel-corps::after {
    animation-play-state: paused;
  }
}