/* ─── La grille de la maison ───────────────────────────────────────────
   Une seule colonne de repère, et une seule gouttière, pour les stations
   de la méthode, les planches des mandats, les codas et l'agenda. La
   maquette hésitait entre dix-huit et vingt rem ; le site tranche pour
   dix-huit, et le propos commence partout à vingt-trois. */
:root { --colonne-repere: 18rem; --gouttiere: 5rem; }

/* Le héros de l'accueil respire. Une dérive très lente sur la pierre : on ne
   la voit pas d'un regard, on la sent si l'on reste. Elle part bien après
   l'entrée, pour ne pas la contrarier. */
@keyframes heros-deriver {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.1%, -.9%, 0); }
}
.heros-derive.est-visible {
  animation: heros-deriver 26s cubic-bezier(.37, 0, .63, 1) 2.8s infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .heros-derive.est-visible { animation: none; } }

/* ─── Le mouvement de la maison ────────────────────────────────────────
   Trois entrées, et pas une de plus : paraître, venir de la gauche, venir
   de la droite. Elles alternent d'une section à l'autre pour que la page
   se déroule au lieu de se dérouler d'un bloc.

   Le décalage latéral déborderait la page pendant la seconde où il joue :
   le corps le rogne. « clip » et non « hidden », faute de quoi la barre
   collante cesserait de coller. */
html, body { overflow-x: clip; }

.vient-de-gauche, .vient-de-droite {
  opacity: 0;
  transition: opacity 1.05s cubic-bezier(.19, 1, .22, 1),
              transform 1.05s cubic-bezier(.19, 1, .22, 1);
}
.vient-de-gauche { transform: translate3d(-1.75rem, 0, 0); }
.vient-de-droite { transform: translate3d(1.75rem, 0, 0); }
.vient-de-gauche.est-visible,
.vient-de-droite.est-visible { opacity: 1; transform: none; }

/* Sans script, tout est déjà arrivé. */
html:not(.js) .vient-de-gauche,
html:not(.js) .vient-de-droite { opacity: 1; transform: none; }

/* Au repos, pas d'entrée du tout : c'est la convention de la maquette, où
   « reveal » est simplement rendu visible. Un fondu qui attend l'observateur
   laisserait la moitié de la page en blanc pour qui demande moins de
   mouvement. */
@media (prefers-reduced-motion: reduce) {
  .vient-de-gauche, .vient-de-droite {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Kelya — la couche V2.

   Elle se pose après kelya.css, qui reste la maquette mot pour mot. Tout ce
   qui suit est ajouté ; rien n'y est défait.

   Deux règles tenues d'un bout à l'autre :
     — le bronze ne décore jamais, il ne dit que « ici, la priorité » ;
     — aucun mouvement n'existe sans que le repos soit déjà lisible.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────── Le Business Index™ */

.indice-champ {
  --or: var(--color-or-clair);
  --trait: var(--color-clair);
  --anneau: var(--color-bordure-sombre);
  --doux: var(--color-clair-doux);
}
.indice-champ--clair {
  --or: var(--color-or-fonce);
  --trait: var(--color-ardoise);
  --anneau: var(--color-bordure-forte);
  --doux: var(--color-ardoise-doux);
}
.indice-champ--clair .indice-anneau { opacity: .38; }
.indice-champ--clair .indice-rayon { opacity: .22; }

.indice {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Les quatre paliers. Ils posent le repère avant toute donnée. */
.indice-anneau { fill: none; stroke: var(--doux); stroke-width: 1; opacity: .3; vector-effect: non-scaling-stroke; }
.est-visible .indice-anneau {
  animation: indice-tracer 1.15s cubic-bezier(.19, 1, .22, 1) forwards;
  animation-delay: calc(var(--i) * .1s);
}

/* Les dix rayons. Le repère de lecture, discret. */
.indice-rayon { stroke: var(--doux); stroke-width: 1; opacity: .18; vector-effect: non-scaling-stroke; }
.est-visible .indice-rayon {
  animation: indice-tracer .85s cubic-bezier(.19, 1, .22, 1) forwards;
  animation-delay: calc(.44s + var(--i) * .04s);
}

@keyframes indice-tracer { to { stroke-dashoffset: 0; } }

/* La lecture elle-même : une graduation en travers de l'échelle, et le point. */
.indice-graduation {
  stroke: var(--trait);
  stroke-width: 3;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  transition: stroke-width .4s cubic-bezier(.19, 1, .22, 1);
}
.indice-point {
  fill: var(--trait);
  opacity: 0;
  transition: r .4s cubic-bezier(.19, 1, .22, 1);
}
.indice-prise { fill: transparent; cursor: default; }
.indice-prise:focus-visible { outline: 1px solid var(--or); outline-offset: 2px; }

.est-visible .indice-graduation,
.est-visible .indice-point {
  animation: indice-poser .7s cubic-bezier(.19, 1, .22, 1) forwards;
  animation-delay: calc(.86s + var(--i) * .072s);
}
@keyframes indice-poser { from { opacity: 0; } to { opacity: 1; } }
.est-visible .indice-graduation { animation-name: indice-poser-trait; }
@keyframes indice-poser-trait { from { opacity: 0; } to { opacity: .55; } }

/* Le bronze, et rien d'autre, pour ce qui doit être traité en premier. */
.indice-graduation.est-priorite { stroke: var(--or); stroke-width: 4; }
.indice-point.est-priorite { fill: var(--or); }
.est-visible .indice-graduation.est-priorite,
.est-visible .indice-point.est-priorite { animation-delay: calc(1.64s + var(--i) * .06s); }
.est-visible .indice-graduation.est-priorite { animation-name: indice-poser; }

/* Le fût ne part du centre que sur les priorités : il montre le chemin restant. */
.indice-fut { stroke: var(--or); stroke-width: 1; opacity: .34; vector-effect: non-scaling-stroke; }
.est-visible .indice-fut {
  animation: indice-tracer .9s cubic-bezier(.19, 1, .22, 1) forwards;
  animation-delay: calc(1.8s + var(--i) * .06s);
}

.indice-numero {
  font-family: var(--font-texte), sans-serif;
  font-size: 15px;
  letter-spacing: .16em;
  fill: var(--doux);
  opacity: 0;
  transition: fill .4s, opacity .4s;
}
.est-visible .indice-numero {
  animation: indice-numero .7s ease forwards;
  animation-delay: calc(1.08s + var(--i) * .072s);
}
@keyframes indice-numero { to { opacity: .5; } }

.indice-oeil { fill: var(--or); opacity: 0; }
.est-visible .indice-oeil { animation: indice-oeil-partir 2.9s cubic-bezier(.19, 1, .22, 1) forwards; }
@keyframes indice-oeil-partir { 0% { opacity: 0; } 14% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

.indice-valeur {
  font-family: var(--font-titre), serif;
  font-size: 92px;
  font-weight: 300;
  fill: var(--trait);
  opacity: 0;
}
.indice-sur {
  font-family: var(--font-texte), sans-serif;
  font-size: 14px;
  letter-spacing: .1em;
  fill: var(--or);
  opacity: 0;
}
.est-visible .indice-valeur,
.est-visible .indice-sur {
  animation: indice-paraitre 1.2s cubic-bezier(.19, 1, .22, 1) forwards;
  animation-delay: 2.15s;
}
@keyframes indice-paraitre { to { opacity: 1; } }

/* Le lien entre la figure et la lecture : on désigne, l'autre répond. */
.indice-graduation.est-pointe { stroke-width: 5; opacity: 1; }
.indice-point.est-pointe { r: 8; }
.indice-numero.est-pointe { opacity: 1; fill: var(--or); }

/* ─────────────────────────────────────────────── La lecture, à côté */

.indice-lecture { margin: 0; padding: 0; list-style: none; }

.indice-ligne {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0 1.1rem;
  padding: .9rem 0;
  border-top: 1px solid var(--anneau);
  transition: background-color .4s ease;
}
.indice-ligne:last-child { border-bottom: 1px solid var(--anneau); }
.indice-ligne:focus-visible { outline: 1px solid var(--or); outline-offset: 4px; }

.indice-rang {
  font-family: var(--font-texte), sans-serif;
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--doux);
  padding-top: .22rem;
  transition: color .4s;
}
.indice-ligne.est-priorite .indice-rang,
.indice-ligne.est-pointe .indice-rang { color: var(--or); }

.indice-corps { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .55rem 1.2rem; }

.indice-nom { font-size: .95rem; color: var(--trait); line-height: 1.35; }
.indice-etat {
  font-family: var(--font-texte), sans-serif;
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--doux);
  white-space: nowrap;
  transition: color .4s;
}
.indice-ligne.est-priorite .indice-etat { color: var(--or); }

.indice-jauge {
  grid-column: 1 / -1;
  position: relative;
  height: 1px;
  background: var(--anneau);
}
.indice-jauge-course {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--part);
  background: var(--trait);
  transform: scaleX(0);
  transform-origin: left;
}
.est-visible .indice-jauge-course {
  animation: indice-jauge 1s cubic-bezier(.19, 1, .22, 1) forwards;
  animation-delay: calc(.86s + var(--i) * .072s);
}
@keyframes indice-jauge { to { transform: scaleX(1); } }
.indice-ligne.est-priorite .indice-jauge-course { background: var(--or); }

.indice-note {
  grid-column: 1 / -1;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--doux);
  max-width: 42ch;
  /* au repos, seule la priorité parle ; le reste répond quand on le désigne */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s cubic-bezier(.19, 1, .22, 1), opacity .4s;
}
.indice-note > span { overflow: hidden; }
.indice-ligne.est-priorite .indice-note,
.indice-ligne.est-pointe .indice-note,
.indice-ligne:focus-within .indice-note { grid-template-rows: 1fr; opacity: 1; }
.indice-ligne.est-priorite .indice-note { color: var(--trait); }

/* Là où l'on ne peut pas survoler, tout est dit d'emblée. */
@media (hover: none) {
  .indice-note { grid-template-rows: 1fr; opacity: 1; }
}

/* ─────────────────────────────────────────────── Silence demandé */

@media (prefers-reduced-motion: reduce) {
  .indice-anneau, .indice-rayon, .indice-fut { stroke-dashoffset: 0 !important; animation: none !important; }
  .indice-point, .indice-valeur, .indice-sur { opacity: 1 !important; animation: none !important; }
  .indice-oeil { opacity: 0 !important; animation: none !important; }
  .indice-graduation { opacity: .55 !important; animation: none !important; }
  .indice-graduation.est-priorite { opacity: 1 !important; }
  .indice-numero { opacity: .62 !important; animation: none !important; }
  .indice-jauge-course { transform: scaleX(1) !important; animation: none !important; }
}

.indice-cle { display: inline-block; width: 1.4rem; height: 1px; flex: none; transform: translateY(-.32em); background: var(--anneau); }
.indice-cle--or { background: var(--or); height: 2px; }
.indice-invite { font-size: .62rem; letter-spacing: .13em; }
@media (hover: none) { .indice-invite { display: none; } }
.indice-figure { position: relative; }
@media (min-width: 1024px) { .indice-figure { position: sticky; top: 7rem; } }

/* ─────────────────────────────────────────────── La mise en page de l'indice
   Écrite ici plutôt qu'en utilitaires : kelya.css est du Tailwind compilé,
   il ne contient que les classes que la maquette employait. */

.indice-tete { max-width: 46rem; }

.indice-plan { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) {
  .indice-plan { grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: 5rem; align-items: start; }
}

.indice-figure { margin: 0; min-width: 0; }
.indice-cles { display: grid; gap: .65rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--anneau); }
.indice-cles > span { display: flex; align-items: baseline; gap: .85rem; }

.indice-volet { min-width: 0; }
.indice-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.indice-mention { margin-top: 1.75rem; max-width: 44rem; }

/* ─────────────────────────────────────────────── L'instrument, en vignette
   À l'accueil, la figure paraît seule : elle signe, elle n'explique pas. */
.indice-vignette { margin: 0; min-width: 0; }
.indice-vignette-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-bottom: .9rem; margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--anneau);
}
.indice-vignette-note { margin-top: 1.5rem; max-width: 34rem; color: var(--doux); }

/* ─────────────────────────────────────────────── L'accueil : le Business Assessment */

.accueil-assessment { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .accueil-assessment { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 5rem; align-items: center; }
}
.indice-vignette-prix {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--color-or);
}

/* ─────────────────────────────────────────────── L'accueil : Les Mandats
   Un registre, pas une grille. Les trois rangs n'ont ni la même hauteur ni la
   même mesure : rien n'invite à les comparer colonne à colonne. */

/* « margin: 0 » écrasait le mt-14 de la maquette et le filet venait toucher
   la dernière ligne du chapeau. L'écart est posé ici, une bonne fois. */
.mandat-registre {
  margin: 3.75rem 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--color-bordure-forte);
}
@media (min-width: 768px) { .mandat-registre { margin-top: 4.75rem; } }

.mandat-rang {
  display: grid;
  gap: .9rem 2rem;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--color-bordure);
}
@media (min-width: 768px) {
  .mandat-rang {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
    align-items: start;
    padding: 2.6rem 0;
  }
}
.mandat-verbe { margin-top: .55rem; }
.mandat-situation { font-size: 1.06rem; line-height: 1.5; max-width: 34ch; }
.mandat-portee { margin-top: .7rem; font-size: .88rem; line-height: 1.55; color: var(--color-ardoise-doux); max-width: 46ch; }
.mandat-montant { white-space: nowrap; }
@media (min-width: 768px) { .mandat-montant { text-align: right; padding-top: .35rem; } }

/* ─────────────────────────────────────────────── L'accueil : Nos expertises
   Une respiration. Le métier à gauche, ce qui l'entoure à droite, et rien
   d'autre : pas de second cercle pour disputer le regard à l'instrument. */

.expertise-plan { display: grid; gap: 3.5rem; }
@media (min-width: 900px) {
  .expertise-plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: start; }
}
.expertise-coeur-nom { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.01em; }
.expertise-autour { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-bordure); }
.expertise-autre {
  display: flex; align-items: baseline; gap: 1.15rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--color-bordure);
  font-size: 1.02rem;
}
.expertise-filet { display: block; width: 1.7rem; height: 1px; flex: none; background: var(--color-bordure-forte); transform: translateY(-.34em); }
.expertise-coeur, .mandat-dit, .mandat-nom { min-width: 0; }

/* ─────────────────────────────────────────────── Le héros
   Le filet se tire à l'entrée, le repère de bronze s'y pose : c'est le même
   trait que la graduation de l'instrument, posé ici comme une promesse. */

/* ── Le tempo.
   Chaque élément du héros porte son heure en millisecondes (--t, posé dans
   le HTML par refondre_accueil.py) ; la section porte le facteur qui les
   étire ou les resserre. Sur téléphone on lit plus vite et on décide plus
   vite de partir : la séquence entière se joue au trois quarts, sans qu'un
   seul retard ait été réécrit ailleurs.

   Une seule échelle pour toute la scène, donc : il n'existe pas d'endroit
   où deux réglages puissent se contredire. */
.heros-scene { --tempo: 1; }
@media (max-width: 767px) { .heros-scene { --tempo: .74; } }
.heros-scene .tempo { transition-delay: calc(var(--t, 0ms) * var(--tempo)); }

/* ── L'entrée d'un bloc de texte.
   Le voile de la maquette monte de seize pixels en 1,2 s : juste pour une
   section qu'on découvre en défilant, trop ample pour un héros qui doit être
   lisible tout de suite. Celle-ci monte de dix et dure un peu plus d'une
   demi-seconde — le mouvement se remarque, l'attente non. */
.leve, .leve-dit {
  opacity: 0;
  transition: opacity .56s cubic-bezier(.19, 1, .22, 1),
              transform .56s cubic-bezier(.19, 1, .22, 1);
  transform: translateY(10px);
}
/* La phrase vient de plus bas et prend plus de temps : c'est le seul endroit
   du héros où l'on s'arrête pour lire une ligne entière. */
.leve-dit {
  transition-duration: .72s;
  transform: translateY(15px);
}
.entree .leve, .entree .leve-dit { opacity: 1; transform: none; }
html:not(.js) .leve, html:not(.js) .leve-dit { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .leve, .leve-dit { opacity: 1; transform: none; transition: none; }
}

/* ── Le surtitre.
   Le français nomme l'enseigne en quatre mots ; l'anglais nomme le métier
   en sept, et sur un téléphone la ligne se casserait en trois. Elle se
   resserre donc — un point de corps et deux centièmes de cadratin —, mais
   sur la version anglaise seulement : la ligne française est juste comme
   elle est, et rien ne justifierait de la toucher. */
   Aucune largeur n'est imposée : une largeur en « ch » posée pour l'anglais
   cassait la ligne française en deux, et la ligne française n'avait rien
   demandé. Seul l'équilibrage est partagé — il ne fait rien sur une ligne
   qui tient déjà. */
.hero-sur { text-wrap: balance; }
@media (max-width: 767px) {
  html[lang="en"] .hero-sur { font-size: .6rem; letter-spacing: .11em; }
}

/* ── Le titre.
   Six mots au lieu de trois : sur téléphone, la taille d'affiche de la
   maquette les jetterait sur quatre lignes, dont une ne porterait qu'un mot.
   Le héros garde donc son échelle sur grand écran et se resserre en dessous,
   où « Donner au dirigeant » et « une longueur d'avance. » tiennent chacun
   sur sa ligne. */
@media (max-width: 767px) {
  .heros-scene .hero-titre { font-size: clamp(2.35rem, 9.2vw, 3.25rem); }
}

.hero-filet { position: relative; height: 1px; margin-top: 3.5rem; }
@media (min-width: 768px) { .hero-filet { margin-top: 4.5rem; } }
.hero-filet-course {
  position: absolute; inset: 0; background: rgba(203, 169, 122, .34);
  transform: scaleX(0); transform-origin: left;
}
.entree .hero-filet-course,
html:not(.js) .hero-filet-course {
  transform: scaleX(1);
  transition: transform 1.5s cubic-bezier(.19, 1, .22, 1)
              calc(1.28s * var(--tempo, 1));
}
.hero-filet-tic {
  position: absolute; top: -5px; left: 34%; width: 1px; height: 11px;
  background: var(--color-or-clair); opacity: 0;
}
.entree .hero-filet-tic,
html:not(.js) .hero-filet-tic {
  opacity: 1;
  transition: opacity .8s ease calc(2.05s * var(--tempo, 1));
}

.hero-marche { margin-top: 1.15rem; font-size: .62rem; letter-spacing: .2em; }

.hero-bas { margin-top: 2.6rem; display: grid; gap: 2.4rem; }
@media (min-width: 900px) {
  .hero-bas {
    margin-top: 3.2rem;
    grid-template-columns: minmax(0, 34rem) auto;
    align-items: end;
    justify-content: space-between;
    gap: 4rem;
  }
}
.hero-dit { max-width: 34rem; }
.hero-actes { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
@media (min-width: 640px) { .hero-actes { flex-direction: row; align-items: center; gap: 2.25rem; } }

/* ── Le passage d'une langue à l'autre.

   Deux documents, un seul geste. Au départ, les quatre blocs du héros
   s'effacent ensemble : le fond et la barre ne bougent pas, seul le texte
   s'en va, et l'on comprend que c'est lui qu'on remplace.

   À l'arrivée, « relais » remplace l'ouverture. Les retards tombent à zéro
   et les durées se resserrent : le héros se lève d'un bloc en un tiers de
   seconde au lieu de se dérouler en deux et demie. Le filet, lui, ne se
   retrace pas — il était déjà là avant le clic.

   Ces règles se lisent après celles du héros : à poids égal, c'est la
   dernière écrite qui l'emporte, et « relais » doit l'emporter. */
.heros-part .hero-sur,
.heros-part .hero-titre,
.heros-part .hero-dit,
.heros-part .hero-actes {
  opacity: 0;
  transition: opacity .17s ease;
}

.relais .heros-scene .tempo { transition-delay: 0s; }
.relais .leve, .relais .leve-dit { transition-duration: .3s; }
.relais .masque-mot > span { transition-duration: .34s; }
.relais .mot-or-clair { transition-duration: .34s; }
.relais .hero-filet-course { transition: transform .5s cubic-bezier(.19, 1, .22, 1); }
.relais .hero-filet-tic { transition: opacity .35s ease .18s; }

@media (prefers-reduced-motion: reduce) {
  .hero-filet-course { transform: scaleX(1) !important; transition: none !important; }
  .hero-filet-tic { opacity: 1 !important; transition: none !important; }
  .heros-part .hero-sur, .heros-part .hero-titre,
  .heros-part .hero-dit, .heros-part .hero-actes { opacity: 1; transition: none; }
}

/* ─────────────────────────────────────────────── À propos : les deux parcours */

.parcours { margin: 0; padding: 0; list-style: none; }
.parcours-entree {
  display: grid; gap: 1.4rem 3rem;
  padding: 2.4rem 0;
  border-top: 1px solid var(--color-bordure-sombre);
}
.parcours-entree:last-child { border-bottom: 1px solid var(--color-bordure-sombre); }
@media (min-width: 900px) {
  .parcours-entree { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 3rem 5rem; padding: 3rem 0; }
}
.parcours-dit { min-width: 0; max-width: 58ch; display: grid; gap: 1.5rem; }
.parcours-amorce { font-size: .64rem; letter-spacing: .14em; }
.parcours-detail { font-size: 1.02rem; line-height: 1.6; margin-top: -.9rem; }

/* ─────────────────────────────────────────────── Sans JavaScript
   L'observateur pose « est-visible » ; s'il ne s'exécute pas, rien ne le
   pose, et l'instrument resterait un cercle vide. La feuille le rend donc
   entièrement au repos, exactement comme lorsque le mouvement est refusé.
   La règle porte sur « html:not(.js) » : le script ajoute « js » à la racine
   dès sa première ligne, ces règles cessent alors de s'appliquer. */

html:not(.js) .indice-anneau,
html:not(.js) .indice-rayon,
html:not(.js) .indice-fut { stroke-dashoffset: 0; animation: none; }
html:not(.js) .indice-point,
html:not(.js) .indice-valeur,
html:not(.js) .indice-sur { opacity: 1; animation: none; }
html:not(.js) .indice-oeil { opacity: 0; animation: none; }
html:not(.js) .indice-graduation { opacity: .55; animation: none; }
html:not(.js) .indice-graduation.est-priorite { opacity: 1; }
html:not(.js) .indice-numero { opacity: .5; animation: none; }
html:not(.js) .indice-jauge-course { transform: scaleX(1); animation: none; }
html:not(.js) .indice-note { grid-template-rows: 1fr; opacity: 1; }

/* ─────────────────────────────────────────────── Le logotype
   La barre porte le logotype horizontal, en deux exemplaires superposés :
   l'un pour le fond sombre du haut de page, l'autre pour la barre claire
   qui prend sa place au défilement. La bascule suit exactement celle que le
   script pose déjà sur l'en-tête, sans un octet de plus. */

.marque-lien { position: relative; display: block; line-height: 0; }
.marque-logo {
  display: block; width: auto;
  height: 1.55rem;
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1);
}
@media (min-width: 768px) { .marque-logo { height: 1.75rem; } }
.marque-logo--sombre { position: absolute; inset: 0 auto auto 0; }

/* Sur fond sombre (« barre-claire » désigne l'encre claire de la barre) :
   le logotype clair. Dès que la barre s'opacifie, le sombre prend le relais. */
header.barre-claire .marque-logo--clair { opacity: 1; }
header.barre-claire .marque-logo--sombre { opacity: 0; }
header:not(.barre-claire) .marque-logo--clair { opacity: 0; }
header:not(.barre-claire) .marque-logo--sombre { opacity: 1; }

.menu-logo { display: block; width: auto; height: 1.75rem; }
.pied-logo { display: block; width: auto; max-width: 15rem; height: auto; }

/* ─────────────────────────────────────────────── Le plan des expertises
   Le même vocabulaire que l'instrument, à une autre échelle : un anneau,
   cinq graduations, le même point. Ce n'est pas une mesure, c'est un plan —
   d'où l'anneau unique. */

.plan-champ { --trait: var(--color-ardoise); --anneau: var(--color-bordure-forte);
              --doux: var(--color-ardoise-doux); --or: var(--color-or-fonce); }
.plan { display: block; width: 100%; height: auto; max-width: 60rem; margin: 0 auto; overflow: visible; }

/* La roue mettait deux secondes et demie à livrer son propos. L'anneau seul
   prenait 1,3 s, les rayons attendaient qu'il ait fini, et le dernier nom de
   discipline n'était lisible qu'à 2,35 s — c'est-à-dire après que le lecteur
   a fait défiler. Une figure qui se dessine pendant qu'on ne la regarde plus
   n'a rien dessiné.

   La séquence garde son ordre — l'anneau, les rayons, les graduations, les
   noms — mais chaque temps chevauche le suivant au lieu de l'attendre. Les
   cinq disciplines sont toutes lisibles à 0,88 s. */

.plan-anneau { fill: none; stroke: var(--anneau); stroke-width: 1; vector-effect: non-scaling-stroke; }
.est-visible .plan-anneau { animation: indice-tracer .8s cubic-bezier(.19, 1, .22, 1) forwards; }

.plan-rayon { stroke: var(--anneau); stroke-width: 1; opacity: .5; vector-effect: non-scaling-stroke; }
.est-visible .plan-rayon {
  animation: indice-tracer .45s cubic-bezier(.19, 1, .22, 1) forwards;
  animation-delay: calc(.1s + var(--i) * .04s);
}

.plan-graduation { stroke: var(--trait); stroke-width: 3; opacity: 0; vector-effect: non-scaling-stroke; }
.plan-point { fill: var(--trait); opacity: 0; }
.est-visible .plan-graduation { animation: indice-poser-trait .38s cubic-bezier(.19,1,.22,1) forwards; animation-delay: calc(.22s + var(--i) * .05s); }
.est-visible .plan-point { animation: indice-poser .38s cubic-bezier(.19,1,.22,1) forwards; animation-delay: calc(.22s + var(--i) * .05s); }

.plan-nom {
  font-family: var(--font-texte), sans-serif;
  font-size: 25px; fill: var(--trait); opacity: 0;
}
/* Le nom arrive presque avec sa graduation : on lit le rayon, puis ce qu'il
   porte, sans intervalle où l'œil attend. */
.est-visible .plan-nom { animation: indice-paraitre .42s ease forwards; animation-delay: calc(.26s + var(--i) * .05s); }

.plan-coeur-nom {
  font-family: var(--font-titre), serif;
  font-size: 52px; font-weight: 300; fill: var(--trait); opacity: 0;
}
.plan-coeur-dit {
  font-family: var(--font-texte), sans-serif;
  font-size: 19px; letter-spacing: .14em; text-transform: uppercase;
  fill: var(--or); opacity: 0;
}
.est-visible .plan-coeur-nom,
.est-visible .plan-coeur-dit { animation: indice-paraitre .6s cubic-bezier(.19,1,.22,1) forwards; animation-delay: .06s; }

@media (prefers-reduced-motion: reduce) {
  .plan-anneau, .plan-rayon { stroke-dashoffset: 0 !important; animation: none !important; }
  .plan-point, .plan-nom, .plan-coeur-nom, .plan-coeur-dit { opacity: 1 !important; animation: none !important; }
  .plan-graduation { opacity: .55 !important; animation: none !important; }
}
html:not(.js) .plan-anneau,
html:not(.js) .plan-rayon { stroke-dashoffset: 0; animation: none; }
html:not(.js) .plan-point,
html:not(.js) .plan-nom,
html:not(.js) .plan-coeur-nom,
html:not(.js) .plan-coeur-dit { opacity: 1; animation: none; }
html:not(.js) .plan-graduation { opacity: .55; animation: none; }

/* ─────────────────────────────────────────────── La matière
   Le marbre passe derrière l'encre, sous un voile qui rétablit le contraste.
   À cette force on le devine plus qu'on ne le voit, et c'est le but : une
   matière qui se remarque cesse d'être une matière et devient un motif. */

/* La section devient son propre contexte d'empilement, et la matiere y
   descend d'un cran. Surtout : on ne touche pas au position des autres
   enfants. Une regle .matiere > * qui imposait position:relative a suffi a
   remettre dans le flux un SVG decoratif pose en absolute, et la section
   avait gagne 1328 px de vide. */
.matiere { position: relative; isolation: isolate; }

.matiere-fond {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.matiere-fond img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .52;
}
.matiere--marbre .matiere-fond::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(128% 96% at 12% 4%, rgba(36, 39, 43, .12), rgba(36, 39, 43, .74) 76%),
    linear-gradient(176deg, rgba(36, 39, 43, .28), rgba(36, 39, 43, .66));
}

/* La couture : un seuil de métal entre deux salles. */
.couture { position: relative; height: 3px; overflow: hidden; }
.couture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }

/* ─────────────────────────────────────── Les planches des mandats
   Un mandat tient sur un écran. Ce qui décide se lit debout — le rang, le
   nom, la promesse, les domaines pris en charge, ce que cela change, le
   montant. Le périmètre complet attend derrière une tirette : il rassure
   celui qui le demande sans écraser celui qui ne le demande pas. */

.planche { padding: 5rem 1.5rem; }
.planche-tete { display: grid; gap: 1.75rem; }
/* Sans cela, un poste long force la colonne a s'elargir et la planche deborde. */
.planche-identite, .planche-propos { min-width: 0; }
.planche-rang { display: flex; align-items: center; gap: .9rem; }
.planche-rang-chiffre { color: var(--color-or-fonce); font-size: .95rem; letter-spacing: .12em; }
.planche-rang-filet { display: block; height: 1px; width: 2rem; flex: none; background: var(--color-or); }
.planche-rang-verbes { color: var(--color-ardoise-doux); }
.planche-nom {
  margin-top: 1.1rem;
  font-size: clamp(2.05rem, 3.4vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--color-encre);
}
.planche-mention { margin-top: 1.1rem; display: flex; align-items: center; gap: .85rem; }
.planche-mention-filet { display: block; height: 1px; width: 1.5rem; flex: none; background: var(--color-or); }

.planche-promesse { font-size: clamp(1.2rem, 1.8vw, 1.55rem); line-height: 1.32; color: var(--color-encre); }
/* Le rôle vit sous la tirette : il répétait la promesse quand il était au-dessus. */
.planche-role { grid-column: 1 / -1; }
.planche-role-dit { margin-top: .6rem; max-width: 62ch; font-size: .9375rem; line-height: 1.65; color: var(--color-ardoise-doux); }

/* Les domaines : trois ou quatre mots, le seul niveau que la plupart des
   lecteurs auront besoin de lire. */
.planche-corps { margin-top: 2.75rem; }
.planche-domaines { margin-top: 1.25rem; display: grid; border-bottom: 1px solid var(--color-bordure); }
.planche-domaine {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1rem 0; border-top: 1px solid var(--color-bordure);
}
.planche-domaine-rang { flex: none; font-size: .8125rem; color: var(--color-or-fonce); letter-spacing: .1em; }
.planche-domaine-nom { font-family: var(--font-titre); font-size: 1.3rem; line-height: 1.25; color: var(--color-encre); }

/* La tirette. Elle n'est pas un bouton : c'est une invitation, et elle a le
   poids d'une mention, pas celui d'un appel. */
.planche-detail { margin-top: 1.25rem; }
.planche-detail-tirette {
  display: inline-flex; align-items: center; gap: .85rem;
  padding: .55rem 0; cursor: pointer; list-style: none;
  color: var(--color-ardoise-doux);
  transition: color .4s ease;
}
.planche-detail-tirette::-webkit-details-marker { display: none; }
.planche-detail-tirette:hover { color: var(--color-encre); }
.planche-detail-signe { display: inline-block; font-size: .9rem; color: var(--color-or-fonce); transition: transform .3s ease; }
.planche-detail[open] .planche-detail-signe { transform: rotate(45deg); }
.planche-detail-corps { display: grid; gap: 2rem; padding-top: 1.5rem; }
.planche-liste { min-width: 0; }
.planche-puces { margin-top: .8rem; display: grid; gap: .4rem; }
.planche-puces li {
  position: relative; padding-left: 1.15rem;
  font-size: .9375rem; line-height: 1.55; color: var(--color-ardoise-doux);
}
.planche-puces li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: .35rem; height: 1px; background: var(--color-or);
}

.planche-duree { display: grid; gap: .5rem; }
.planche-duree-dit { font-size: .9375rem; line-height: 1.65; max-width: 62ch; }

.planche-pied { margin-top: 2.75rem; display: grid; gap: 1.75rem; }
.planche-effet { border-left: 2px solid var(--color-or); padding-left: 1.35rem; }
.planche-effet-dit { margin-top: .55rem; max-width: 52ch; font-size: .9375rem; line-height: 1.6; }
.planche-montant { font-size: clamp(1.15rem, 1.7vw, 1.5rem); color: var(--color-encre); white-space: nowrap; }

/* La phrase du héros descend ici, là où l'on parle vraiment de calibrage. */
.planche-amorce {
  font-family: var(--font-titre);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.35; color: var(--color-encre);
  margin-bottom: 1.35rem;
}

@media (min-width: 768px) {
  .planche { padding: 6.5rem 2.5rem; }
  .planche-detail-corps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 4rem; }
  .planche-detail-corps .planche-duree {
    grid-column: 1 / -1; border-top: 1px solid var(--color-bordure); padding-top: 1.35rem;
  }
  .planche-detail-corps .planche-role {
    border-bottom: 1px solid var(--color-bordure); padding-bottom: 1.35rem;
  }
}

@media (min-width: 1024px) {
  .planche { padding: 7.5rem 3.5rem; }
  /* Une seule colonne de repère tient toute la planche : le nom, le titre
     des domaines et ce que cela change commencent tous au même endroit. */
  .planche-tete,
  .planche-corps {
    grid-template-columns: minmax(0, var(--colonne-repere)) minmax(0, 1fr);
    column-gap: var(--gouttiere);
  }
  .planche-tete { align-items: start; row-gap: 1.75rem; }
  /* La gouttière sépare les colonnes, jamais les rangées : sinon cinq rem
     de vide s'ouvrent entre les domaines et la tirette. */
  .planche-corps { display: grid; row-gap: 1.5rem; }
  .planche-domaines-nom { grid-column: 1; padding-top: .3rem; }
  .planche-domaines, .planche-detail { grid-column: 2; }
  .planche-domaines { margin-top: 0; }
  .planche-detail { margin-top: 0; }
  .planche-pied { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4rem; }
  .planche-montant { text-align: right; }
}

/* ─────────────────────────────────────────────── L'agenda
   Le calendrier de la Maison, posé dans la page. C'est un cadre tiers :
   il est chargé paresseusement, doublé d'un lien pour les navigateurs
   qui le refusent, et tenu dans une plaque ivoire pour qu'il appartienne
   à la page plutôt que d'y flotter. */

.agenda-salle { padding: 5rem 1.5rem; }
.joindre-salle { padding: 5rem 1.5rem; }
.agenda-plan, .joindre-plan { display: grid; gap: 3rem; }
.agenda-dit, .agenda-cadre, .joindre-ecrire { min-width: 0; }

.agenda-titre { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.1; color: var(--color-encre); }

.agenda-faits { margin-top: 2.75rem; border-top: 1px solid var(--color-bordure); }
.agenda-fait { padding: 1.05rem 0; border-bottom: 1px solid var(--color-bordure); }
.agenda-fait-dit { margin-top: .35rem; color: var(--color-encre); }
/* Le lien vers l'onglet séparé est un recours, pas une invitation : il avait
   le corps du reste de la salle et se lisait comme une seconde porte. */
.agenda-ailleurs {
  display: inline-block; margin-top: 2rem; padding: .45rem 0;
  font-size: .8125rem; letter-spacing: .04em;
  color: var(--color-clair-doux);
}
.agenda-ailleurs:hover { color: var(--color-ardoise); }

/* Le cadre garde un mot derriere lui : si le calendrier ne charge pas,
   la plaque n'est pas une boite vide. */
.agenda-cadre {
  position: relative;
  border: 1px solid var(--color-bordure);
  background: var(--color-ivoire);
  padding: .5rem;
}
.agenda-attente { position: absolute; inset: 0; display: grid; place-items: center; }
.agenda-vue { position: relative; display: block; width: 100%; height: 1040px; border: 0; }

@media (min-width: 768px) {
  .agenda-salle, .joindre-salle { padding: 7rem 2.5rem; }
  .agenda-vue { height: 760px; }
  .joindre-plan { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--gouttiere); }
}

@media (min-width: 1024px) {
  .agenda-salle, .joindre-salle { padding: 8rem 3.5rem; }
  .agenda-plan { grid-template-columns: minmax(0, var(--colonne-repere)) minmax(0, 1fr); gap: var(--gouttiere); align-items: start; }
  .agenda-vue { height: 720px; }
}

/* Sans JavaScript, le bouton ne peut rien envoyer. On montre alors
   l'adresse, plutot que de promettre pour rien.

   Le meme lien reparait, avec JavaScript cette fois, quand l'envoi n'a pas
   abouti : la page ne laisse jamais quelqu'un devant un message qui ne
   part pas sans lui donner l'autre chemin. */
.ecrire-sans-js { display: none; }
html:not(.js) .ecrire-sans-js { display: inline-block; margin-top: 1.75rem; padding: .4rem 0; }
/* « table » plutot que « inline-block » : le lien passe a la ligne sous le
   bouton au lieu de se ranger a cote de lui, et le trait continue de
   s'arreter a la fin du mot. */
.ecrire-sans-js.est-offerte { display: table; margin-top: 1.75rem; padding: .4rem 0; }
html:not(.js) #ecrire button[type="submit"],
html:not(.js) #ecrire .legende { display: none; }

/* ──────────────────────────────────────────── La séquence de la méthode
   Quatre temps qui se suivent, et qui se voient se suivre. Une colonne
   vertébrale se trace au défilement, quatre stations sont posées dessus,
   et le dernier nœud est plein : la décision est atteinte. */

.sequence { position: relative; padding-left: 2.5rem; }
.sequence::before {
  content: ""; position: absolute; left: .3125rem; top: 2.6rem; bottom: 2.6rem;
  width: 1px; background: var(--color-bordure-forte);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.5s cubic-bezier(.19, 1, .22, 1) .15s;
}
.sequence.est-visible::before { transform: scaleY(1); }

.station { position: relative; display: grid; gap: .9rem; padding: 2.4rem 0; border-top: 1px solid var(--color-bordure); }
.station:first-child { border-top: 0; padding-top: 1rem; }
.station::before {
  content: ""; position: absolute; left: -2.5rem; top: 3.05rem;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--color-or); background: var(--color-blanc);
}
.station:first-child::before { top: 1.65rem; }
.station--terme::before { background: var(--color-or); }

.station-rang { display: flex; align-items: baseline; gap: .85rem; }
.station-chiffre { color: var(--color-or); font-size: .8125rem; letter-spacing: .12em; }
.station-phase { color: var(--color-ardoise-doux); }
.station-nom { margin-top: .85rem; font-size: clamp(1.5rem, 2.4vw, 2.05rem); line-height: 1.15; color: var(--color-encre); }
.station-dit { line-height: 1.65; }

@media (min-width: 768px) {
  .sequence { padding-left: 3.5rem; }
  /* La phase tient toute la largeur ; le nom et sa description partagent
     la ligne suivante et s'alignent sur la meme ligne de base. */
  .station { grid-template-columns: minmax(0, var(--colonne-repere)) minmax(0, 1fr); gap: 0 var(--gouttiere); align-items: baseline; padding: 2.9rem 0; }
  .station-rang { grid-column: 1 / -1; }
  .station-nom { margin-top: 1.1rem; }
  .station-dit { margin-top: 1.1rem; }
  .station::before { left: -3.5rem; top: 3.55rem; }
  .station:first-child::before { top: 1.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sequence::before { transform: none; transition: none; }
}
html:not(.js) .sequence::before { transform: none; }

/* ─────────────────────────────────────────────────────── La coda
   Les fins de page tenaient dans une colonne de trente-huit rem centrée
   au milieu d'une page qui travaille sur quatre-vingt-deux : ni alignées
   ni centrées, simplement flottantes. Elles prennent la grille de la
   maison, la meme colonne de repere que les stations et les planches. */

.coda { padding: 4.5rem 1.5rem; }
.coda-plan { display: grid; gap: 1.75rem; }
.coda-titre, .coda-corps { min-width: 0; }
.coda-corps > p { max-width: 62ch; }
.coda-filet { display: block; height: 1px; width: 2.5rem; background: var(--color-or); margin-bottom: 1.5rem; }

@media (min-width: 768px) {
  .coda { padding: 6rem 2.5rem; }
  .coda-plan { grid-template-columns: minmax(0, var(--colonne-repere)) minmax(0, 1fr); gap: var(--gouttiere); align-items: start; }
}

@media (min-width: 1024px) { .coda { padding: 7rem 3.5rem; } }

/* Les sept exigences : la description commençait là où le terme finissait,
   donc jamais deux fois au même endroit. Une colonne fixe la tient.

   Le sélecteur passe par le dl, parce que la FAQ porte la même classe sur un
   details. Il ne doit surtout pas attraper autre chose : ce registre-ci a
   deux enfants, celui des trois niveaux en avait trois, et deux colonnes
   imposées à trois enfants rejetaient le troisième à la ligne, dans un quart
   de la largeur. C'est pourquoi les niveaux ont désormais leur propre classe
   et ne s'appellent plus « registre ». */
@media (min-width: 640px) {
  dl .registre {
    display: grid;
    grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
    align-items: baseline;
    column-gap: 1.75rem;
  }
}

/* ─────────────────────────────────── Les trois niveaux, en registre
   Le nom et son verbe dans la colonne de repère, la glose dans celle du
   propos, et le lien vers le mandat au bout de la ligne : le rang va
   jusqu'au bord, il n'abandonne pas les deux tiers droits de la page. */

/* L'amorce de la séquence : la phrase qui ouvrait la page la précède ici. */
.sequence-amorce {
  margin-bottom: 3.5rem;
  max-width: 46ch;
  font-family: var(--font-titre);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.35;
  color: var(--color-encre);
}

.niveaux { margin-top: 3rem; border-top: 1px solid var(--color-bordure); }
.niveau {
  display: grid; gap: .7rem;
  padding: 1.65rem 0;
  border-bottom: 1px solid var(--color-bordure);
}
.niveau-identite { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1.1rem; }
.niveau-nom { font-size: 1.5rem; line-height: 1.15; color: var(--color-encre); }
.niveau-dit { font-size: .9375rem; line-height: 1.65; color: var(--color-ardoise-doux); max-width: 62ch; }
.niveau-lien {
  display: inline-flex; align-items: center; gap: .85rem;
  color: var(--color-ardoise-doux);
  transition: color .45s cubic-bezier(.16, 1, .3, 1);
}
.niveau-lien:hover { color: var(--color-encre); }
.niveau-fleche {
  height: .5rem; width: 1.15rem; flex: none;
  transition: transform .6s cubic-bezier(.19, 1, .22, 1);
}
.niveau-lien:hover .niveau-fleche { transform: translateX(.25rem); }

@media (min-width: 768px) {
  .niveau {
    grid-template-columns: minmax(0, var(--colonne-repere)) minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--gouttiere);
    padding: 1.9rem 0;
  }
  .niveau-identite { display: block; }
  .niveau-verbe { display: block; margin-top: .55rem; }
}

/* ────────────────────────────────────────────── Les dix dimensions
   Elles portent ici le numéro qu'elles portent dans l'instrument, trois
   cents pixels plus bas. On lit les dix noms, puis on les retrouve un par
   un sur la figure : la liste et l'Indice deviennent une seule chose. */

.dimensions {
  margin-top: 3rem;
  border-top: 1px solid var(--color-or);
}
.dimension {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: baseline;
  padding: .95rem 0;
  border-bottom: 1px solid var(--color-bordure);
}
.dimension-rang { color: var(--color-or-fonce); font-size: .8125rem; letter-spacing: .12em; }
.dimension-nom { color: var(--color-encre); }

@media (min-width: 768px) {
  /* En colonnes : 01 à 05 à gauche, 06 à 10 à droite. Un numéro qui saute
     d'une colonne à l'autre à chaque ligne ne se suit pas. */
  .dimensions {
    margin-top: 3.5rem;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gouttiere);
  }
  .dimension { padding: 1.15rem 0; }
}

/* ─────────────────────────────────────────────── Le poinçon
   Une maison genevoise ne poinçonne une pièce qu'après l'avoir vérifiée : le
   poinçon est le contraire d'une promesse, c'est ce qui reste quand le travail
   est fait. Ses lignes de construction restent visibles, parce que la Maison
   affirme deux blocs plus bas que la simplicité est le résultat d'un travail.
   Les graduations sont celles de l'Indice, et la seule marque de bronze est
   celle du haut : le bronze ne décore pas, il désigne. */

/* La colonne qui reçoit le poinçon : sans plancher de largeur, la figure
   force la grille à s'élargir et la déclaration se casse à gauche. */
.poincon-champ { min-width: 0; }
.poincon { margin: 0; }
.poincon-dessin {
  display: block; width: 100%; max-width: 20rem; height: auto;
  margin: 0 auto 3rem;
}
.poincon-dessin rect,
.poincon-dessin circle,
.poincon-dessin path { fill: none; }

.poincon-guides { stroke: var(--color-clair-doux); stroke-width: 1; opacity: 0; }
.poincon-losange {
  stroke: var(--color-clair); stroke-width: 1.25;
  stroke-dasharray: 872; stroke-dashoffset: 872;
}
.poincon-cercle {
  stroke: var(--color-clair-doux); stroke-width: 1;
  stroke-dasharray: 528; stroke-dashoffset: 528;
}
.poincon-graduation { stroke: var(--color-clair-doux); stroke-width: 1.5; opacity: 0; }
.poincon-marque {
  stroke: var(--color-or-clair); stroke-width: 3;
  stroke-dasharray: 28; stroke-dashoffset: 28;
}
.poincon-oeil { fill: var(--color-or-clair); opacity: 0; }

@keyframes poincon-tracer { to { stroke-dashoffset: 0; } }
@keyframes poincon-paraitre { to { opacity: 1; } }
@keyframes poincon-guides-paraitre { to { opacity: .16; } }

.est-visible .poincon-guides { animation: poincon-guides-paraitre 1s ease forwards; }
.est-visible .poincon-losange { animation: poincon-tracer 1.5s cubic-bezier(.19, 1, .22, 1) .35s forwards; }
.est-visible .poincon-cercle { animation: poincon-tracer 1.2s cubic-bezier(.19, 1, .22, 1) 1.05s forwards; }
.est-visible .poincon-graduation {
  animation: poincon-paraitre .55s ease forwards;
  animation-delay: calc(1.5s + var(--i) * .11s);
}
.est-visible .poincon-marque { animation: poincon-tracer .7s cubic-bezier(.19, 1, .22, 1) 2.05s forwards; }
.est-visible .poincon-oeil { animation: poincon-paraitre .6s ease 2.3s forwards; }

/* Au repos et sans script, le poinçon est déjà frappé. */
html:not(.js) .poincon-losange,
html:not(.js) .poincon-cercle,
html:not(.js) .poincon-marque { stroke-dashoffset: 0; }
html:not(.js) .poincon-guides { opacity: .16; }
html:not(.js) .poincon-graduation,
html:not(.js) .poincon-oeil { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .poincon-losange, .poincon-cercle, .poincon-marque { stroke-dashoffset: 0; }
  .poincon-guides { opacity: .16; }
  .poincon-graduation, .poincon-oeil { opacity: 1; }
  .est-visible .poincon-guides,
  .est-visible .poincon-losange,
  .est-visible .poincon-cercle,
  .est-visible .poincon-graduation,
  .est-visible .poincon-marque,
  .est-visible .poincon-oeil { animation: none; }
}

/* ───────────────────────────────── Notre manière de travailler
   Quatre affirmations séparées par un filet se lisent comme quatre points
   sans rapport : on en retient un, et c'est le premier. Or ce que la Maison
   décrit là n'est pas une liste de qualités, c'est le déroulé d'une
   relation — comprendre, s'ajuster, regarder plus large, rester.

   Un fil de bronze les traverse donc, et se trace de haut en bas quand la
   section entre ; chaque moment paraît au passage du fil. Les filets qui
   découpaient la liste en quatre ont disparu : ils disaient le contraire.

   Le fil ne s'arrête pas sous « Rester ». Il s'efface en dégradé et sort du
   cadre, parce que c'est exactement ce que la dernière ligne promet. */

.manieres {
  position: relative;
  margin-top: 2.75rem;
  padding-left: 3rem;
  display: grid; gap: 2.1rem;
}
/* La liste ne porte « reveal » que pour être observée par le script : son
   entrée, c'est le fil et les quatre moments. Un fondu de bloc par-dessus
   retarderait tout d'une seconde pour ne rien ajouter. */
.manieres.reveal { opacity: 1; transform: none; transition: none; }

.manieres::before {
  content: ""; position: absolute;
  left: .5rem; top: .6rem; bottom: -2.25rem; width: 1px;
  background: linear-gradient(to bottom,
              var(--color-or) 0%, var(--color-or) 72%, rgba(176, 141, 87, 0) 100%);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.1s cubic-bezier(.19, 1, .22, 1) .05s;
}
.manieres.est-visible::before { transform: none; }

/* Les quatre moments n'attendent pas que le fil les ait rejoints : le fil
   les accompagne. Le dernier est lu à une seconde — au-delà, le lecteur a
   déjà fait défiler, et l'entrée s'est jouée pour personne. */
.maniere {
  position: relative;
  opacity: 0; transform: translate3d(0, .55rem, 0);
  transition: opacity .55s ease, transform .55s cubic-bezier(.19, 1, .22, 1);
  transition-delay: calc(.12s + var(--i) * .13s);
}
.manieres.est-visible .maniere { opacity: 1; transform: none; }

/* Le nœud est posé sur le fil, et le halo de fond laisse croire que le fil
   passe derrière lui. */
.maniere-noeud {
  position: absolute; left: -2.75rem; top: .5rem;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--color-or);
  box-shadow: 0 0 0 .3rem var(--color-blanc);
}
.maniere-rang {
  display: block; margin-bottom: .25rem;
  font-size: .8125rem; color: var(--color-or-fonce); letter-spacing: .1em;
}
.maniere-dit { display: block; }
.maniere-nom {
  display: block; font-family: var(--font-titre);
  font-size: 1.3rem; line-height: 1.25; color: var(--color-encre);
}
.maniere-glose {
  display: block; margin-top: .3rem;
  font-size: .9rem; line-height: 1.55; color: var(--color-ardoise-doux);
}

@media (min-width: 768px) {
  .manieres { margin-top: 3rem; padding-left: 3.5rem; gap: 2.4rem; }
  .maniere-noeud { left: -3.25rem; }
  .maniere-nom { font-size: 1.45rem; }
}

/* Sur grand écran, le fil se couche. La colonne de droite fait neuf cents
   pixels et le texte n'en occupait que trois cent cinquante : la section se
   lisait comme une page à moitié vide. Les quatre moments s'alignent donc
   sur une seule ligne, et le fil les traverse de gauche à droite avant de
   sortir du cadre. La lecture reste la même — on va de « Comprendre » à
   « Rester » — mais elle se fait d'un regard. */
@media (min-width: 1100px) {
  .manieres {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 1.75rem;
    margin-top: 3.25rem;
    padding-left: 0; padding-top: 2.6rem;
  }
  .manieres::before {
    left: 0; right: -7%; top: .3rem; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(to right,
                var(--color-or) 0%, var(--color-or) 74%, rgba(176, 141, 87, 0) 100%);
    transform: scaleX(0); transform-origin: left;
  }
  .maniere { padding-right: .5rem; }
  .maniere-noeud { left: 0; top: -2.55rem; }
  .maniere-nom { font-size: 1.22rem; }
  .maniere-glose { font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .manieres::before { transform: none; transition: none; }
  .maniere { opacity: 1; transform: none; transition: none; }
}
html:not(.js) .manieres::before { transform: none; }
html:not(.js) .maniere { opacity: 1; transform: none; }

/* ───────────────────────────────────────── Ce qui nous engage
   Quatre cartes blanches sur l'ivoire, chacune ouverte par une amorce de
   bronze au coin. Une carte est un objet qu'on prend séparément : c'est
   juste, ici, parce que ces quatre-là ne se déduisent pas l'une de l'autre
   — on les tient toutes les quatre, en même temps, tout le temps.

   C'est précisément l'inverse des manières deux sections plus haut, qui
   sont un déroulé et portent un fil. Deux idées différentes, deux figures
   différentes : la page ne se répète pas. */

.exigences { margin-top: 2.5rem; display: grid; gap: 1rem; }
.exigence {
  position: relative;
  padding: 1.65rem 1.5rem 1.75rem;
  background: var(--color-blanc);
  border: 1px solid var(--color-bordure);
  transition: border-color .7s cubic-bezier(.19, 1, .22, 1);
}
.exigence::before {
  content: ""; position: absolute; top: -1px; left: -1px;
  height: 2px; width: 3rem; background: var(--color-or);
}
.exigence:hover { border-color: var(--color-bordure-forte); }
.exigence-nom { font-size: 1.4rem; line-height: 1.2; color: var(--color-encre); }
.exigence-dit {
  margin-top: .6rem;
  font-size: .875rem; line-height: 1.55; color: var(--color-ardoise-doux);
}

@media (min-width: 768px) {
  .exigences { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 3rem; }
}
@media (min-width: 1100px) {
  .exigences { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .exigence { padding: 1.85rem 1.5rem 2rem; }
}

/* ──────────────────────────────────────────────── Les trois faits
   Vingt ans, une trentaine de maisons, un taux de satisfaction. Aucune
   phrase autour : ce sont eux qui portent, et une glose sous chacun les
   affaiblirait. Seul celui du milieu en garde une, parce que le chiffre
   sans elle se lirait comme une limite subie et non choisie. */

.chiffres {
  display: grid; gap: 0;
  border-top: 1px solid var(--color-bordure-forte);
}
.chiffre-fait {
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-bordure);
}
/* Le chiffre est en bronze, et il monte. Le bronze employé est le foncé et
   non le clair : sur l'ivoire, le clair passe sous le seuil de contraste dès
   qu'on l'agrandit, et un chiffre qu'on n'arrive pas à lire ne prouve rien.

   La montée est celle du héros, à une autre échelle : le nombre est composé
   sous un masque et remonte depuis sa propre hauteur. Le compteur du script
   fait le reste ; sans lui, le chiffre est simplement là, déjà juste. */
.chiffre-valeur {
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1; letter-spacing: -.015em;
  color: var(--color-or-fonce);
  overflow: hidden;
  padding-bottom: .08em;
}
.chiffre-monte {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1.15s cubic-bezier(.19, 1, .22, 1);
}
/* Chiffres à chasse fixe : pendant que le compteur passe de 8 à 9 puis à 10,
   la ligne ne doit pas tressauter. */
.chiffre-nombre { font-variant-numeric: tabular-nums; }
.est-visible .chiffre-monte { transform: none; }
html:not(.js) .chiffre-monte { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .chiffre-monte { transform: none; transition: none; }
}
.chiffre-dit {
  margin-top: .9rem;
  font-size: 1.0625rem; line-height: 1.4;
  color: var(--color-ardoise);
  max-width: 26ch;
}
.chiffre-glose {
  margin-top: .8rem;
  font-size: .875rem; line-height: 1.55;
  color: var(--color-ardoise-doux);
  max-width: 34ch;
}

@media (min-width: 768px) {
  .chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3.5rem; }
  .chiffre-fait { padding: 2.5rem 0 2.75rem; }
}

/* ────────────────────────────────────────────────────────────── L'épreuve
   L'accueil savait dire ce que la Maison fait. Il ne donnait aucune raison
   de l'appeler aujourd'hui plutôt que dans six mois.

   Dix questions — les dix dimensions de l'Indice retournées vers celui qui
   lit. Elles ne vendent rien : elles se répondent en silence, et le silence
   fait le reste. */

.epreuve { padding: 5.5rem 1.5rem; }
.questions {
  margin-top: 3rem;
  display: grid; gap: 0;
  border-top: 1px solid var(--color-bordure-forte);
}
.question {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: baseline; gap: 0 .5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--color-bordure);
}
.question-rang { font-size: .8125rem; color: var(--color-or-fonce); letter-spacing: .1em; }
.question-dit {
  font-family: var(--font-titre);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.3;
  color: var(--color-encre);
}

.epreuve-issue { margin-top: 3rem; display: grid; gap: 2rem; justify-items: start; }
.epreuve-verdict {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.32;
  max-width: 26ch;
  color: var(--color-encre);
}

@media (min-width: 768px) {
  .epreuve { padding: 7rem 2.5rem; }
  .questions { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; }
  .epreuve-issue {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 3rem;
    margin-top: 3.5rem;
  }
}
@media (min-width: 1024px) { .epreuve { padding: 8rem 3.5rem; } }

/* La roue tenait treize cents pixels, dont la moitié en blanc, pour six mots.
   Sa taille baisse d'un quart et la salle se resserre. On ne la met pas en
   colonne à côté du titre : les noms des disciplines sont dessinés hors du
   cadre du dessin, et déborderaient la page dès qu'on serre. */
.expertises-salle { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.expertises-salle .plan { max-width: 45rem; }
@media (min-width: 768px) { .expertises-salle { padding-top: 6rem; padding-bottom: 6rem; } }

/* ───────────────────────────────────────── Le parcours
   Cinq travées entre l'instrument et les mandats : comprendre, mesurer,
   structurer, piloter, décider. C'est le seul endroit de l'accueil où
   l'ordre des choses est dit une fois, dans l'ordre.

   La section a deux états, et le premier ne demande rien : les travées
   descendent le long d'un fil de bronze, comme les manières. Le second est
   posé par v2.js — « parcours--rail » — sur écran large et si le mouvement
   est le bienvenu : la section devient haute, sa vue se colle, et le
   parcours traverse l'écran pendant qu'on descend. On avance dans le temps
   de l'entreprise en avançant dans la page.

   Sans script, sans largeur ou sans envie de mouvement, la classe n'est
   jamais posée et il ne reste que l'empilement — qui se lit très bien. */

.parcours { color: var(--color-ivoire); padding: 5rem 1.5rem; }
@media (min-width: 768px) { .parcours { padding: 7rem 2.5rem; } }
@media (min-width: 1024px) { .parcours { padding: 7rem 3.5rem; } }

.parcours-vue { margin: 0 auto; width: 100%; max-width: 82rem; }
.parcours-titre { margin-top: 1.25rem; max-width: 20ch; color: var(--color-ivoire); }

.parcours-rail {
  position: relative;
  margin-top: 3rem;
  padding-left: 3rem;
  display: grid; gap: 2.6rem;
}
/* Comme la liste des manières : « reveal » n'est là que pour être observé.
   L'entrée, c'est le fil et les cinq travées. */
.parcours-rail.reveal { opacity: 1; transform: none; transition: none; }

.parcours-rail::before {
  content: ""; position: absolute;
  left: .5rem; top: .7rem; bottom: 0; width: 1px;
  background: linear-gradient(to bottom,
              var(--color-or) 0%, var(--color-or) 76%, rgba(176, 141, 87, 0) 100%);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.2s cubic-bezier(.19, 1, .22, 1) .05s;
}
.parcours-rail.est-visible::before { transform: none; }

.travee {
  position: relative;
  opacity: 0; transform: translate3d(0, .6rem, 0);
  transition: opacity .55s ease, transform .55s cubic-bezier(.19, 1, .22, 1);
  transition-delay: calc(.14s + var(--i) * .12s);
}
.parcours-rail.est-visible .travee { opacity: 1; transform: none; }

/* Le halo du nœud est de la couleur du fond : le fil paraît passer derrière. */
.travee-noeud {
  position: absolute; left: -2.75rem; top: .6rem;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--color-or);
  box-shadow: 0 0 0 .3rem var(--color-encre);
}
.travee-rang {
  display: block; margin-bottom: .4rem;
  font-size: .8125rem; letter-spacing: .1em; color: var(--color-or-clair);
}
.travee-nom {
  font-size: 1.85rem; line-height: 1.1; color: var(--color-ivoire);
}
.travee-dit {
  margin-top: .6rem; font-size: .95rem; line-height: 1.6;
  color: var(--color-clair-doux); max-width: 34ch;
}
.travee-objet {
  display: block; margin-top: 1rem;
  font-size: .6875rem; color: var(--color-or-clair);
}

@media (min-width: 768px) {
  .parcours-rail { padding-left: 3.5rem; gap: 3rem; }
  .travee-noeud { left: -3.25rem; }
  .travee-nom { font-size: 2.1rem; }
}

/* ── L'état en rail. La piste porte la hauteur, la vue s'y colle. */
.parcours--rail { padding-top: 0; padding-bottom: 0; }
.parcours--rail .parcours-piste { position: relative; height: 260vh; }
.parcours--rail .parcours-vue {
  position: sticky; top: 0; height: 100svh; max-width: none;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  padding: 0 3.5rem;
}
.parcours--rail .parcours-tete { margin: 0 auto; width: 100%; max-width: 82rem; }
.parcours--rail .parcours-rail {
  display: flex; width: max-content; gap: 0;
  margin-top: 4rem; padding-left: 0; padding-top: 3.2rem;
  will-change: transform;
}
/* Le fil se couche et court sous les cinq travées : c'est la ligne qu'on
   traverse, elle voyage donc avec elles. */
.parcours--rail .parcours-rail::before {
  left: 0; right: 0; top: .5rem; bottom: auto;
  width: auto; height: 1px;
  background: linear-gradient(to right,
              var(--color-or) 0%, var(--color-or) 82%, rgba(176, 141, 87, 0) 100%);
  transform: scaleX(0); transform-origin: left;
}
/* Même poids que la règle d'ouverture plus haut, mais écrite plus bas : sans
   cette ligne, le fil couché resterait replié sur lui-même. */
.parcours--rail .parcours-rail.est-visible::before { transform: none; }

.parcours--rail .travee {
  flex: 0 0 min(72vw, 24rem);
  padding: 0 2.5rem;
  border-left: 1px solid var(--color-bordure-sombre);
}
.parcours--rail .travee:first-child { border-left: 0; padding-left: 0; }
.parcours--rail .travee-noeud { left: 2.5rem; top: -2.95rem; }
.parcours--rail .travee:first-child .travee-noeud { left: 0; }
.parcours--rail .travee-nom { font-size: 2.4rem; }

@media (prefers-reduced-motion: reduce) {
  .parcours-rail::before { transform: none; transition: none; }
  .travee { opacity: 1; transform: none; transition: none; }
}
html:not(.js) .parcours-rail::before { transform: none; }
html:not(.js) .travee { opacity: 1; transform: none; }

/* ───────────────────────────────────────── Le grain du papier
   L'ivoire de la Maison devient du papier : une trame répétable de six cent
   quarante pixels, posée en « multiply » par-dessus la couleur et non à sa
   place. Réglée à vingt-deux centièmes, elle déplace l'ivoire d'un point de
   rouge et lui en rend deux de bleu : la teinte reste chaude, et le grain
   se sent plus qu'il ne se voit. Au-delà, la trame grisaille la palette et
   sa symétrie commence à se lire — mesuré, pas deviné.

   Le chemin de la trame est relatif à cette feuille, et non aux pages : la
   version anglaise, d'un dossier plus bas, la trouve au même endroit.

   Le grain passe derrière le contenu par « isolation », qui enferme le
   plan négatif dans la section : sans elle, la trame plongerait derrière le
   fond de la page et l'on ne verrait rien. */
.grain { position: relative; isolation: isolate; }
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: url("./media/grain.jpg");
  background-repeat: repeat;
  background-size: 17rem;
  mix-blend-mode: multiply;
  opacity: .22;
  pointer-events: none;
}
/* Le papier ne s'imprime pas : à l'impression, l'ivoire redevient une teinte
   plate, et l'encre reste où elle est. */
@media print { .grain::before { display: none; } }

/* ═══ Le formulaire de contact ════════════════════════════════════════════
   Le champ-piège. Il n'est ni visible, ni annonçable, ni atteignable au
   clavier : un humain ne le rencontre jamais. Un robot qui remplit tous les
   champs le remplit aussi, et se désigne. On ne l'escamote pas par
   « display:none », que certains robots savent lire comme un piège. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Ce que le formulaire dit de lui-même pendant et après l'envoi. La zone
   existe toujours, vide : elle ne fait pas sauter la page en apparaissant. */
.etat-envoi {
  margin-top: 1.6rem;
  min-height: 1.4em;
  transition: color .3s ease;
}
.etat-envoi.est-parti { color: var(--color-or-fonce); }
.etat-envoi.a-echoue  { color: var(--color-ardoise); }

/* ═══ Les paroles de dirigeants ═══════════════════════════════════════════
   Quatre témoignages sur l'encre. Deux colonnes à partir du grand écran :
   à quatre de front, chaque parole devient une vignette et se lit comme un
   argument ; à deux, elle garde la longueur d'une phrase dite.

   La citation est en Cormorant, à la taille d'un objet et non d'un titre :
   c'est quelqu'un qui parle, pas la maison qui proclame. L'attribution vit
   sous elle, en bronze clair, séparée par un trait court — la même mesure
   que les sur-titres, pour que l'œil reconnaisse la famille. */
.paroles {
  display: grid;
  gap: 3.5rem 4.5rem;
}
@media (min-width: 62rem) {
  .paroles { grid-template-columns: 1fr 1fr; gap: 4.5rem 6rem; }
}
/* La parole elle-même : un élément de la grille, et rien de plus. La classe
   existe pour que le balisage se lise, et pour tenir les mots longs — un nom
   d'entreprise sans espace ne doit pas pousser la colonne. */
.parole { min-width: 0; overflow-wrap: break-word; }

.parole-dit {
  font-size: clamp(1.32rem, 1.05rem + 0.85vw, 1.72rem);
  line-height: 1.5;
  font-weight: 300;
  font-style: italic;
  text-wrap: pretty;
}
/* Les guillemets appartiennent à la citation, pas au texte : posés ici, ils
   ne se copient pas avec la phrase et n'entrent pas dans la sélection. */
.parole-dit::before { content: "\00AB\00A0"; }
.parole-dit::after  { content: "\00A0\00BB"; }
[lang="en"] .parole-dit::before { content: "\201C"; }
[lang="en"] .parole-dit::after  { content: "\201D"; }

.parole-qui {
  margin-top: 1.6rem;
  padding-top: 1.15rem;
  border-top: 1px solid color-mix(in srgb, var(--color-or-clair) 34%, transparent);
  display: inline-block;
}

/* ═══ La porte du calendrier ══════════════════════════════════════════════
   Le cadre de Calendly ne se charge qu'au clic. Ce qui l'attend n'est donc
   pas un espace vide mais une porte : ce qui va se passer, qui le fait, et
   le moyen de ne pas le faire. Elle occupe la place du calendrier pour que
   la page ne saute pas à l'ouverture.

   Le bouton reprend la forme des appels de la Maison — filet de bronze,
   fond d'encre qui monte au survol — parce que c'est un appel, et non un
   avertissement. La mention légale se lit en dessous, à la taille des
   légendes : elle informe, elle n'effraie pas. */
/* Tant que le cadre porte « data-src », il n'a rien à montrer : il garderait
   pourtant sa hauteur de calendrier et creuserait un vide sous la porte. Il
   ne reprend sa place qu'une fois chargé. */
.agenda-vue[data-src] { display: none; }

.agenda-porte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.6rem;
  min-height: 26rem;
  padding: clamp(1.8rem, 4vw, 3.2rem);
}
.agenda-porte[hidden] { display: none; }
.agenda-porte-dit {
  max-width: 46ch;
  color: var(--color-ardoise);
}
.agenda-porte-sinon { max-width: 44ch; }

.agenda-ouvrir {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--color-bronze);
  padding: 1.05rem 2rem;
  color: var(--color-bronze-fonce);
  background: transparent;
  cursor: pointer;
  transition: color .5s cubic-bezier(.16, 1, .3, 1);
}
.agenda-ouvrir::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleY(0);
  transform-origin: bottom;
  background: var(--color-ardoise);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.agenda-ouvrir > * { position: relative; }
.agenda-ouvrir:hover { color: var(--color-blanc); }
.agenda-ouvrir:hover::before { transform: scaleY(1); }

/* Sans JavaScript le bouton n'ouvrirait rien : c'est le lien qui sert, et
   il emmène chez Calendly plutôt que de charger le tiers dans cette page. */
.agenda-sans-js { display: none; }
html:not(.js) .agenda-sans-js { display: inline-block; }
html:not(.js) .agenda-ouvrir { display: none; }

@media (prefers-reduced-motion: reduce) {
  .agenda-ouvrir, .agenda-ouvrir::before { transition: none; }
}

/* ─────────────────────────────────────────────────── Ce qui a changé
   Quatre resultats obtenus chez des maisons accompagnees, entre les
   paroles des dirigeants et les expertises.

   La bande des faits de la Maison — vingt ans, trente maisons, 97 % —
   est en trois colonnes et parle d'elle. Celle-ci parle de ses clients,
   et se tient en deux colonnes larges : le nombre y est plus grand, et
   chacun porte sous lui le perimetre et la duree, sans quoi il ne
   prouverait rien.

   Le bronze employe est le fonce : sur l'ivoire, le clair passe sous le
   seuil de contraste des qu'on l'agrandit. */

.resultats {
  margin: 0; padding: 0; list-style: none;
  margin-top: 3rem;
  display: grid; gap: 0;
  border-top: 1px solid var(--color-bordure-forte);
}
.resultat {
  padding: 2.15rem 0;
  border-bottom: 1px solid var(--color-bordure);
}
.resultat-valeur {
  font-size: clamp(3rem, 6.5vw, 5.25rem);
  line-height: 1; letter-spacing: -.02em;
  color: var(--color-or-fonce);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  padding-bottom: .08em;
}
.resultat-dit {
  margin-top: .85rem;
  font-size: 1.125rem; line-height: 1.35;
  color: var(--color-encre);
  max-width: 24ch;
}
.resultat-precision {
  margin-top: .65rem;
  font-size: .8125rem; line-height: 1.55;
  color: var(--color-ardoise-doux);
  max-width: 32ch;
}
.resultats-mention { margin-top: 2.25rem; max-width: 46ch; }

@media (min-width: 768px) {
  .resultats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4.5rem; }
  .resultat { padding: 2.6rem 0 2.9rem; }
}