/* ============================================================================
   Page d'accueil — feuille complémentaire
   ============================================================================

   Cette feuille ne vit jamais seule : elle se charge après « kinome.css » et ne
   fait que deux choses. Elle ajoute les quelques motifs que le reste du site n'a
   pas (en-tête en pilule flottante, hero centré, sélecteur numéroté, tuiles de
   chiffres, pied en colonnes), et elle recadre ceux qui existent déjà.

   Ce qu'elle ne fait pas, et c'est à tenir : aucun jeton de couleur, aucune
   police, aucun rayon n'est redéfini ici. Ce qui se décide dans cette feuille,
   c'est la hiérarchie des éléments — l'ordre dans lequel on les rencontre et le
   poids relatif qu'on leur donne. L'identité graphique reste entière dans
   « kinome.css », qui est la seule feuille que le blog charge : une couleur
   posée ici ne vaudrait que pour l'accueil, et le site se mettrait à parler deux
   langues selon la page où l'on entre.

   Cette page est née comme un essai en parallèle de l'accueil d'alors, sa
   hiérarchie inspirée de « hublo.com/fr » : parcours de recrutement replié dans
   un sélecteur, gratuité en preuve centrale, ressources avant les questions.
   L'essai a été tranché en sa faveur le 4 octobre 2026 — l'autre hiérarchie est
   dans « ~/Documents/kinome-archives », hors du site, avec le pourquoi.

   Le site dont la hiérarchie a servi de modèle compose ses titres dans un romain
   à empattements. On ne l'imite pas : ce serait une quatrième police à charger, et
   la marque y perdrait ce qui la rend reconnaissable. Le romain apporte là-bas de
   la gravité à un propos de soin ; ici, c'est le corps des titres et l'air autour
   qui s'en chargent.
   ============================================================================ */

:root{
  /* Les blocs de cette page sont de grandes surfaces arrondies posées sur le fond,
     et non des bandes qui vont d'un bord à l'autre. À 26 px — le rayon le plus
     large de la page d'accueil — un pavé de sept cents pixels de haut a l'air
     d'avoir les coins simplement adoucis ; il faut passer à 34 pour qu'on lise
     une forme, c'est-à-dire un objet détaché de la page. */
  --radius-xl:34px;
}

/* ============================================================================
   1. En-tête en pilule flottante
   ============================================================================
   Le balisage est celui de la page d'accueil, à la classe « pilule » près. Trois
   différences, et la troisième est une réparation.

   La barre ne touche plus les bords : elle devient un objet posé sur la page.
   Une barre pleine largeur annonce un site dont l'en-tête fait partie du décor ;
   une pilule annonce un en-tête qui flotte au-dessus du contenu, ce qui est la
   vérité ici — le hero passe dessous quand on défile.

   Les rubriques se centrent. Dans la barre pleine largeur elles sont poussées à
   droite, contre le bouton ; au centre, elles se lisent comme un sommaire plutôt
   que comme une rangée d'options accrochée à l'appel à l'action.

   Enfin, « décollée » ne peint plus de voile. Sur la page d'accueil ce voile pose
   94 % de la couleur de référence par-dessus un fond éclairé par trois lueurs :
   il éteint cet éclairage et découpe une dalle plus sombre en haut de l'écran,
   avec une arête nette. Le défaut est connu. Ici il disparaît de lui-même, parce
   que la pilule n'a plus besoin de retenir le contenu sur toute la largeur — elle
   a ses propres bords. Elle se contente de durcir son ombre quand la page a bougé. */
.entete.pilule{
  position:sticky;top:14px;
  background:transparent;
  border-bottom:0;
}
.entete.pilule.decollee{
  background:transparent;
  border-bottom-color:transparent;
}
/* Le voile pleine largeur du défilement est neutralisé ici et non plus sur « .entete » :
   depuis qu'il vit sur un pseudo-élément (voir le commentaire de « kinome.css »), c'est
   là qu'il faut l'éteindre. La pilule a son propre voile, qui suit sa forme. */
.entete.pilule.decollee::before{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
/* La pilule a été **détendue** le 5 octobre 2026 : « moins de contraste avec le fond ».

   Elle posait 88 % de blanc sur un crème à #E9E9E1, c'est-à-dire presque un objet
   blanc sur une page qui ne l'est pas — une dalle claire en haut de l'écran, qu'on
   voyait avant de lire ce qu'elle contenait. Elle descend à 52 %, et les trois autres
   réglages suivent, parce qu'un seul d'entre eux laissé en place suffirait à redessiner
   l'arête qu'on vient d'effacer :

   - le flou **monte** de 14 à 18 px. C'est ce qui remplace l'opacité perdue : moins de
     blanc laisse passer le contenu qui défile dessous, et un texte lisible en
     transparence sous la barre est pire qu'une barre trop blanche. Le flou le réduit en
     taches de couleur, qui se lisent comme un fond et non comme du texte ;
   - la bordure passe du trait plein à 55 % d'elle-même. À pleine opacité sur un fond
     devenu transparent, elle devenait la pièce la plus contrastée de l'objet — on
     aurait vu le contour d'une barre dont l'intérieur avait disparu ;
   - l'ombre descend de .07 à .05. Une ombre dit « cet objet est au-dessus » ; plus la
     barre s'efface, plus elle doit le dire doucement.

   Le « saturate » n'est pas du décor non plus. Un « blur » seul délave ce qu'il
   traverse, et sous une barre à moitié transparente le crème de la page virait au gris.
   Le relever de 18 % lui rend sa chaleur — c'est le réglage habituel des barres
   translucides, et il se voit surtout quand on l'oublie. */
/* Le fond et le flou sont sur un pseudo-élément et non sur la barre elle-même, et
   c'est une contrainte du moteur, pas une préférence.

   Un élément qui porte « backdrop-filter » devient une *backdrop root* : pour tous ses
   descendants, l'arrière-plan à filtrer n'est plus la page mais ce que cet élément a
   peint. Le menu déroulant est un descendant de la barre, et il tombe en dehors d'elle,
   au-dessus du hero — sous la barre il n'y a donc, de son point de vue, rien du tout.
   Son propre « backdrop-filter » s'appliquait à du vide et ne floutait rien : le titre
   du hero et les trois pastilles se lisaient en entier au travers du panneau, deux
   textes superposés dont aucun n'était lisible. Vérifié en retirant le filtre de la
   barre dans la console : le flou du menu réapparaît aussitôt. Aucun avertissement, et
   rien dans les valeurs calculées — « backdrop-filter » du menu vaut bien
   « blur(22px) » dans les deux cas. Cela ne se voit qu'à l'œil.

   Le filtre descend donc d'un cran, sur un « ::before » qui n'a pas de descendant. La
   barre cesse d'être une backdrop root, le menu retrouve la page comme arrière-plan, et
   la pilule a exactement le même aspect qu'avant — c'est le même fond, le même flou,
   à la même place.

   Le prix est en bas de ce bloc : il faut repositionner la barre pour ancrer le
   pseudo-élément, relever ses enfants au-dessus de lui, et corriger le panneau du
   téléphone dont le cadre de référence change au passage. */
.entete.pilule .entete-int{
  position:relative;
  height:62px;
  padding:0 10px 0 20px;
  background:transparent;
  border:1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius:999px;
  box-shadow:0 6px 24px rgba(22,35,63,.05);
  transition:box-shadow .2s ease, border-color .2s ease;
}
/* « -1px » et non « 0 » : le pseudo-élément se cale sur la boîte de remplissage, qui
   s'arrête à l'intérieur de la bordure. Avec « inset:0 », il restait un anneau d'un
   pixel non flouté sous une bordure à 55 % de transparence — un liseré net de page
   brute autour d'un objet dont tout le propos est de ne pas avoir d'arête. */
.entete.pilule .entete-int::before{
  content:"";position:absolute;inset:-1px;z-index:0;
  border-radius:inherit;
  background:color-mix(in srgb, var(--surface) 52%, transparent);
  backdrop-filter:blur(18px) saturate(1.18);
  -webkit-backdrop-filter:blur(18px) saturate(1.18);
  transition:background-color .2s ease;
}
/* Un pseudo-élément positionné se peint au-dessus du contenu non positionné de son
   parent, quel que soit son « z-index ». Sans cette ligne, le voile passerait par-dessus
   la marque et les rubriques — qui resteraient lisibles, le voile étant translucide, mais
   délavées, et le bouton plein perdrait sa couleur. */
.entete.pilule .entete-int > *{position:relative;z-index:1;}
/* Une fois la page défilée, la barre reprend un peu de corps : il passe alors du
   contenu réel dessous, et c'est le seul moment où elle a quelque chose à retenir.
   Soixante-douze pour cent, pas quatre-vingt-huit — on ne revient pas à l'état
   d'avant, on s'arrête à mi-chemin. */
.entete.pilule.decollee .entete-int{
  border-color:color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow:0 18px 44px rgba(22,35,63,.10);
}
.entete.pilule.decollee .entete-int::before{
  background:color-mix(in srgb, var(--surface) 72%, transparent);
}
/* Le bouton de la barre a eu sa propre règle de pilule ici — « cohérent avec la
   barre », demandé en toutes lettres : un rectangle à 12 px posé dans un objet à bord
   circulaire laisse entre les deux courbes un croissant qui se voit. Elle est retirée
   le 15 octobre 2026, le même jour que sa jumelle de milieu de page : « .bouton » est
   une pilule pour tout le site depuis « kinome.css », et répéter ici ce que la feuille
   commune dit déjà donnerait deux endroits à tenir d'accord pour un seul rayon. La
   raison de la forme, elle, est gardée là-bas — c'est celle-ci.
   La bascule du téléphone, en revanche, garde la sienne juste en dessous : ce n'est
   pas un « .bouton », et sa raison d'être ronde est propre à la barre. */
/* La bascule du téléphone suit, pour la même raison et pas pour la cohérence en
   général : sur un écran étroit l'en-tête se réduit à la marque et à elle, et elle
   devient donc le seul objet anguleux d'une barre ronde. Carrée à 42 px dans une
   pilule de 62, l'écart de courbure se voit à l'œil nu. Son bord lui reste — c'est
   une cible tactile, il faut qu'on sache où appuyer. */
.entete.pilule .bascule{border-radius:999px;}
/* « flex:1 » puis « center » : sans le premier, la barre se dimensionne sur ses
   rubriques et « space-between » la colle au bouton. Avec, elle prend tout le vide
   entre la marque et le bouton, et son centre est celui de la pilule. */
.entete.pilule .nav{flex:1;justify-content:center;}
/* La pilule se serre : à 1280 px de large, un en-tête à sept entrées a de l'air à
   revendre, et l'objet se lit mieux resserré que tendu d'un bord à l'autre.
   Le second terme du « min » est la gouttière : en dessous de 1152 px la limite de
   1120 ne mord plus, et la pilule reprenait toute la largeur de l'écran — sur un
   téléphone elle touchait les deux bords, ce qu'une pilule n'est précisément pas
   censée faire. Une marge n'aurait pas convenu : « .entete-int » n'a pas de largeur
   propre, elle s'ajoutait donc à sa largeur au lieu de la réduire, et débordait de
   32 px à droite. Le passer par la largeur maximale garde le centrage automatique
   et vaut à toutes les tailles, sans requête de media. */
.entete.pilule .entete-int{max-width:min(1120px, 100% - 32px);}

@media (max-width:900px){
  .entete.pilule .entete-int{padding:0 10px 0 16px;}
  /* Le panneau du téléphone était accroché à « .entete », qui va d'un bord à l'autre :
     sans ces lignes, un panneau à angles droits et pleine largeur tomberait sous une
     pilule qui n'y touche pas. On le rentre sur les mêmes marges.

     Depuis que la barre est positionnée (voir le pseudo-élément de flou plus haut),
     c'est elle le cadre de référence et non plus l'en-tête. Les seize pixels de
     décalage n'ont donc plus à être écrits : « 0 » désigne maintenant le bord intérieur
     de la pilule, qui est précisément là où on voulait le panneau. Les écrire encore
     l'aurait rentré de seize pixels de plus de chaque côté.
     « position:absolute » est répété parce que la règle qui relève les enfants de la
     barre au-dessus du voile les passe tous en « relative » : le panneau doit en être
     excepté, sans quoi il se remettrait dans le flux, au milieu de la barre. */
  .entete.pilule .nav{
    position:absolute;
    left:0;right:0;top:calc(100% + 8px);
    border:1px solid var(--border);border-radius:var(--radius-lg);
  }
}

/* ============================================================================
   2. Hero centré
   ============================================================================
   La page d'accueil met le texte à gauche et la démonstration à droite : deux
   colonnes, deux choses à regarder, et le regard choisit. Ici tout est sur un
   axe — pastilles, titre, chapeau, un bouton, puis la machine qui monte du bas.
   On ne peut rien regarder d'autre que dans cet ordre.

   Le pavé est teinté et ses coins du bas sont arrondis. C'est ce qui le détache
   du reste de la page : la couleur dit « ceci est l'entrée », les coins disent où
   elle s'arrête. Sans eux, un fond teinté pleine largeur se lirait comme une
   deuxième couleur de page, pas comme un bloc.

   « overflow:hidden » n'est pas un garde-fou ici mais le mécanisme : c'est lui qui
   coupe le socle de l'ordinateur sur l'arête basse du pavé. La machine paraît
   sortir de la page au lieu d'être posée dessus, et le hero cesse d'avoir une fin
   nette au moment précis où l'on veut que le regard continue vers le bas. */
.accueil-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(88px,9vw,124px) 0 0;
  margin-top:calc(-62px - 14px);   /* la pilule flotte au-dessus, pas à côté */
  border-bottom-left-radius:var(--radius-xl);
  border-bottom-right-radius:var(--radius-xl);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent-soft) 92%, transparent) 0%,
      color-mix(in srgb, var(--accent-soft) 46%, transparent) 52%,
      transparent 100%),
    var(--bg);
}
/* Le grain du fond est fixé au cadre et s'arrête sous les surfaces opaques : le
   pavé du hero en est une, et retomberait donc à plat au milieu d'une page qui ne
   l'est pas. On le lui rend, sur la même trame — c'est le rôle de
   « background-attachment:fixed », sans quoi le pavé repartirait de son propre coin
   de tuile et le raccord se verrait exactement sur son arête arrondie. */
.accueil-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  background-image:var(--grain);
  background-attachment:fixed;
  mix-blend-mode:overlay;
  opacity:var(--grain-surface);
}

/* Les trois pastilles nomment les métiers avant que le titre ne parle du produit.
   Le site de référence les met là pour une raison qui vaut aussi ici : son titre
   est une phrase d'intention, qui ne dit pas ce que fait le logiciel. « Trouvez le
   binôme qui vous correspond » non plus. Les pastilles répondent à la question
   qu'on se pose en arrivant — qu'est-ce que je viens faire ici — et le titre peut
   alors se permettre d'être une phrase. */
.accueil-metiers{
  display:flex;flex-wrap:wrap;justify-content:center;gap:9px;
  margin:0 0 clamp(22px,2.4vw,30px);
}
/* Le contour, enlevé puis rendu — et c'est le même enseignement dans les deux sens.

   Le 5 octobre 2026 au matin, la demande était « les rendre transparentes » : fond
   blanc et bordure sont partis, les points orangés avec. Le même jour, elles avaient
   disparu. Non effacées du balisage — toujours là, toujours lisibles — mais sans
   contour, trois groupes de mots posés à même la page au-dessus d'un titre ne se
   lisent plus comme trois objets. Ils se lisent comme une ligne de surtitre, et une
   ligne de surtitre ne se remarque pas. Le fond ne faisait donc pas que décorer : il
   **constituait** l'encart. L'enlever n'a pas rendu les pastilles transparentes, il a
   supprimé les pastilles.

   D'où ce troisième état, qui est la demande d'origine prise au mot plutôt qu'à la
   lettre : un encart qui existe, et qui est très transparent. Trente pour cent de
   blanc — contre quatre-vingt-dix avant, contre zéro ce matin. C'est assez pour que
   le bord se devine sur le crème ; trop peu pour que la pastille se lise comme un
   objet blanc. La bordure revient au même régime que celle de la barre, un trait à
   45 % de lui-même : à pleine opacité elle serait redevenue la pièce la plus
   contrastée d'un objet qu'on vient d'alléger.

   Les points, eux, ne reviennent pas : ils n'ont pas été demandés, et la couleur par
   rôle fait depuis ce matin le travail qu'ils faisaient — dire que ces trois mots-là
   sont de même nature. Le rayon circulaire est nouveau et suit la barre et les
   boutons, tous passés à « 999px » : trois pastilles à 12 px de rayon sous une barre
   ronde auraient été le seul angle restant en haut de page.

   L'écartement repart de celui des pastilles d'origine. Le « gap » de 22 px et le
   « padding » de 4 avaient été calculés pour du texte nu, où l'air doit venir du vide
   entre les mots ; dès que la pastille a des bords, c'est son « padding » qui le
   porte, et 22 px de plus entre deux bords visibles les éloignent trop pour qu'on
   voie une rangée. Quinze dedans, neuf dehors. Le réglage à deux axes tombe avec :
   il réparait le mot orphelin de la deuxième rangée sous 430 px, que le fond
   regroupe à nouveau de lui-même. */
.accueil-metiers span{
  display:inline-flex;align-items:center;
  padding:7px 15px;
  background:color-mix(in srgb, var(--surface) 30%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 45%, transparent);
  border-radius:999px;
  font-size:13.5px;font-weight:700;line-height:1.3;
  letter-spacing:.01em;
}
/* Le bleu est celui du texte courant, et c'est voulu : les deux pastilles bleues ne
   sont pas « colorées en bleu », elles sont restées à la couleur de la page pendant
   que la troisième s'en détachait. */
.accueil-metiers .metier-cabinet,
.accueil-metiers .metier-commun{color:var(--text);}
/* « --accent », le même orangé que « .lueur » dans le titre — et c'est un arbitrage
   tranché par le porteur en connaissance de cause, le 5 octobre 2026.

   La version précédente posait « --accent-ink » (#8A5A1E), la déclinaison texte du même
   ton, pour une raison de contraste : mesuré sur le crème de cette page, « --accent »
   (#E8963C) donne **1,94:1** là où la règle en demande 4,5 pour du texte de 13,5 px, et
   « --accent-ink » **4,83:1**. L'ambre passait, l'orangé ne passe pas.

   Mais l'ambre se lit brun, et surtout il se lit **autre** : la page affichait deux
   oranges différents à quinze pixels de distance, celui du titre et celui de la pastille,
   sans que rien ne justifie l'écart pour qui regarde. Une incohérence visible à l'œil nu
   contre une règle qu'on ne voit qu'au photomètre — le porteur a choisi l'œil, et c'est
   sa page.

   Noté ici pour que personne ne « corrige » ce point en le croyant oublié : il ne l'est
   pas. Si l'accessibilité doit être reprise un jour, la bonne réponse n'est pas de
   rebasculer cette seule pastille en ambre — ce serait recréer l'écart — mais de revoir
   « --accent » lui-même, qui échoue partout où il porte du petit texte. */
.accueil-metiers .metier-kine{color:var(--accent);}

.accueil-hero-texte{max-width:880px;margin:0 auto;text-align:center;}
/* Le titre reprend la pleine mesure, et c'est la raison d'être de ce hero : un titre
   centré très grand n'a pas de rival, une colonne de titre à côté d'un écran en a un.
   C'est le seul endroit du site où un élément atteint ce corps-là.
   L'ancienne page d'accueil le plafonnait à 50 px parce qu'il partageait sa ligne
   avec la machine ; cette contrainte est tombée avec elle le 4 octobre 2026, et la
   règle qui la portait a été retirée de « kinome.css ». */
.accueil-hero-texte h1{
  font-size:clamp(40px,6vw,70px);
  max-width:19ch;margin:0 auto;
}
/* Sous 400 px de large (iPhone SE, Android compacts), le plancher de 40 px ne tenait
   plus : le mot tournant passait à la ligne à chaque tour vers « cabinet » et revenait
   au tour suivant — le titre gagnait et perdait une ligne toutes les trois secondes,
   et toute la page en dessous sautait de 45 px avec lui. Constaté le 16 octobre 2026.
   La ligne « Trouvez le cabinet » mesure 7,7 em à 70 px de corps, mais plus de 8 em
   à 35 : Bricolage Grotesque a un axe de taille optique, et ses lettres s'élargissent
   quand le corps diminue. Le corps suit donc la largeur disponible (la page moins ses
   deux gouttières de 20 px) divisée par 8,3 em, marge comprise, sans jamais dépasser
   le plancher de 40 px : à partir de 372 px de large, rien ne change. */
@media (max-width:399px){
  .accueil-hero-texte h1{font-size:min(40px, calc((100vw - 40px) / 8.3));}
}

/* « balance » répartit les mots entre les lignes au lieu de remplir la première.
   C'est ce qui manque à tous les titres centrés de cette page : « Du premier échange
   à l'arrivée au cabinet. » laissait « cabinet. » seul sur la deuxième ligne, et un
   mot seul sous une ligne pleine, au centre, se lit comme une faute de composition.
   La propriété ne s'applique qu'aux blocs de quelques lignes — le navigateur y
   renonce au-delà, ce qui est exactement la limite qu'on voudrait poser à la main.
   « pretty » pour les chapeaux, qui sont plus longs : il ne rééquilibre pas tout,
   il se contente d'interdire la ligne orpheline en fin de paragraphe. */
.accueil-hero-texte h1,
.accueil-ouverture h2,
.accueil-appel h2,
.accueil-volet h3{text-wrap:balance;}
.accueil-ouverture .chapeau,
.accueil-appel .chapeau,
.accueil-hero-texte .chapeau{text-wrap:pretty;}
.accueil-hero-texte h1 .lueur{color:var(--accent);}

/* ---------- Le mot qui tourne : « kiné » / « cabinet » ----------
   Les deux mots gardent la couleur du titre, et c'est un choix contre l'évidence.
   La page a déjà une grammaire de couleurs, posée quinze pixels plus haut par les
   trois pastilles : le bleu dit ce que fait le cabinet, l'ambre ce que fait le kiné.
   L'appliquer ici donnerait un mot bleu alternant avec un mot ambre — un titre qui
   change de couleur en même temps qu'il change de mot, soit deux signaux pour une
   seule information. Tout mettre en ambre n'allait pas mieux : « qui vous correspond »
   l'est déjà, et deux taches d'ambre en diagonale sur un titre de deux lignes font une
   masse, pas un accent. Le mouvement suffit à désigner le mot ; la couleur reste au
   seul endroit qui l'avait.

   Les largeurs sont mesurées, pas estimées : à 700 de graisse, en Bricolage Grotesque,
   avec l'interlettrage de −0,02 em du titre, « kiné » fait 1,833 em et « cabinet »
   3,281. Elles sont en « em » et non en pixels parce que le corps du titre est fluide
   — clamp(40px, 6vw, 70px) — et que l'interlettrage l'est aussi ; le rapport, lui, ne
   bouge pas. À remesurer si la fonte ou la graisse du titre change : dans la console,
   la largeur d'un span portant le « font » calculé du h1, divisée par sa taille. */
.mot-tournant{
  --mot-tournant-duree:6s;
  --l-kine:1.833em;
  --l-cabinet:3.281em;
  /* Le diamètre du cylindre, c'est-à-dire l'interligne du titre : « line-height:1.12 »
     posé sur « h1 » dans kinome.css. Les faces sont dressées à cette hauteur et
     avancées de sa moitié ; c'est à cette condition que leurs arêtes se rejoignent et
     que le volume est un volume et non deux plans qui se croisent. À reprendre si
     l'interligne du titre change — une face trop haute laisse voir un jour entre les
     deux mots au milieu du tour, une face trop basse les fait s'enfoncer l'un dans
     l'autre.

     Un cube déborde de sa ligne quand il tourne, et c'est inévitable : à 45° son arête
     la plus avancée est à un demi-diamètre fois racine de deux du centre, soit 55 px
     là où la ligne n'en offre que 39. Les mots sortent donc de leur ligne de 16 px au
     plus fort du tour, vers le haut comme vers le bas, et cela a été mesuré sur la
     page plutôt que supposé : il reste 16,3 px avant les pastilles du dessus, et
     l'encre du mot qui descend passe à un pixel de celle de « qui vous correspond ».
     Tout cela est proportionnel — la hauteur est en « em », l'interligne est un
     rapport —, donc le dégagement est le même à 40 px de corps qu'à 70. Mais il tient
     à l'interligne de 1,12 du titre : le resserrer ferait se toucher les deux lignes
     pendant le tour. */
  --mot-tournant-haut:1.12em;
  position:relative;display:inline-block;white-space:nowrap;
  /* Sans perspective, « rotateX » n'est qu'un écrasement vertical : les mots
     s'aplatiraient l'un sur l'autre au lieu de tourner, et le volume n'existerait
     pas. 800 px est la distance d'où l'on regarderait un titre de ce corps — assez
     proche pour que le relief se voie, assez loin pour qu'il ne déforme pas les
     lettres. */
  perspective:800px;
  width:var(--l-kine);
  animation:mot-tournant-largeur var(--mot-tournant-duree) ease-in-out infinite;
}
/* La cale fait trois métiers d'un coup : elle donne au créneau sa hauteur et sa ligne
   de base — un « inline-block » sans contenu en flux se calerait sur son bord bas, et
   le cylindre pendrait sous la ligne —, elle porte la phrase lue par les lecteurs
   d'écran, et elle est la seule chose que ramasse un copier-coller. Largeur nulle pour
   qu'elle ne dispute pas au créneau la largeur que l'animation lui donne ; le texte
   déborde, mais il est transparent. « opacity » et non « visibility:hidden » : ce
   dernier la retirerait aussi de l'arbre d'accessibilité, c'est-à-dire de sa raison
   d'être. */
.mot-tournant-cale{display:inline-block;width:0;opacity:0;}
/* « Trouvez le » et le mot qui tourne ne se séparent jamais (18 octobre 2026) : sur un
   iPhone, « cabinet » passait seul à la ligne au moment où le créneau s'élargit, alors
   que la ligne a la place — 245 px demandés pour 350 à 390 px de large. */
.titre-insecable{white-space:nowrap;}
/* Le cylindre est la pièce qui tourne, et il ne tourne qu'une fois pour les deux mots.
   C'est toute la différence avec une relève, où chaque mot joue sa propre sortie :
   ici il n'y a qu'un seul mouvement, et les mots ne font que le subir — l'un s'en va
   par le haut pendant que l'autre arrive par le bas, dans le même geste, au même
   instant, sans qu'aucun intervalle ne puisse se glisser entre les deux.

   « preserve-3d » est la condition de tout : sans lui le navigateur aplatit les faces
   dans le plan de leur parent avant de le faire tourner, et le cylindre redevient deux
   textes superposés. */
.mot-tournant-cylindre{
  position:absolute;left:0;right:0;top:0;
  /* La hauteur est écrite alors que les faces sont posées en absolu et ne la
     réclament pas : c'est elle qui place l'axe de rotation. « transform-origin » vaut
     la moitié de la boîte, et une boîte creuse mesure zéro — le cylindre tournerait
     autour de son arête haute, les mots décriraient un arc au lieu de rouler sur
     place. */
  height:var(--mot-tournant-haut);
  transform-style:preserve-3d;
  animation:mot-tournant-cylindre var(--mot-tournant-duree) ease-in-out infinite;
}
.mot-tournant-face{
  position:absolute;left:0;right:0;top:0;
  height:var(--mot-tournant-haut);line-height:var(--mot-tournant-haut);
  text-align:center;
  /* Les faces doublent la cale dans la sélection ; les en retirer rend au titre copié
     la phrase et rien d'autre. */
  user-select:none;-webkit-user-select:none;
  /* Une face sur trois regarde toujours ailleurs — elle est derrière l'axe, à
     l'envers. La laisser visible, c'est laisser passer un mot retourné en filigrane
     derrière celui qu'on lit. */
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
/* Trois faces à 90°, et la troisième porte le même mot que la première. Le cylindre
   fait un demi-tour par cycle : au départ c'est la face 1 qui regarde le lecteur, à
   l'arrivée c'est la face 3, et il faut donc qu'elles disent la même chose pour que
   la boucle puisse se rembobiner sans se voir. Une fois le demi-tour accompli, la
   face 3 est d'aplomb et à la place exacte qu'occupait la face 1 au premier instant :
   le retour de 100 % à 0 % ne déplace alors rien du tout.

   Chaque face est écrite à **l'opposé** de l'angle auquel le cylindre la présentera,
   et c'est la seule règle à retenir ici : la face qu'on veut voir à −90° de rotation
   s'écrit à +90°, pour que les deux angles s'annulent et qu'elle revienne d'aplomb,
   face à nous, à z = 0. Le signe a d'abord été posé à l'envers, et la faute ne se
   lisait pas dans le mouvement — le tour avait l'air juste : « cabinet » arrivait
   simplement 78 px derrière la page, soit 9 % plus petit que « kiné », et du mauvais
   côté. On ne voyait pas une erreur de géométrie, on voyait un mot mal composé.
   (Pour la face 3 le signe est indifférent : à un demi-tour, +180° et −180° sont la
   même matrice.)

   L'alternative tenait en deux faces, mais le cylindre aurait dû revenir sur ses pas
   au second temps : le mot serait reparti par où il venait d'arriver. Une face en
   plus achète une rotation qui ne recule jamais. */
.mot-tournant-face-1{transform:translateZ(calc(var(--mot-tournant-haut) / 2));}
.mot-tournant-face-2{transform:rotateX(90deg) translateZ(calc(var(--mot-tournant-haut) / 2));}
.mot-tournant-face-3{transform:rotateX(180deg) translateZ(calc(var(--mot-tournant-haut) / 2));}

/* Deux quarts de tour par cycle, chacun précédé d'une pose. La pose est la plus longue
   des deux — 42 % du cycle contre 8 % — parce que c'est le mot qu'on vient lire, non
   le tour qu'on vient regarder : un titre dont le mot central ne s'arrête jamais est
   un titre qu'on ne lit pas. Huit pour cent de six secondes font un peu moins d'une
   demi-seconde de rotation, soit la durée d'un geste qu'on suit des yeux sans avoir
   à le poursuivre.
   « ease-in-out » sur une étape unique de 90° : le tour démarre lentement, prend de
   la vitesse à l'horizontale — là où les deux mots sont tous les deux de profil — et
   se repose en douceur. C'est le mouvement d'un volume qui a du poids.

   Le « translateZ » négatif qui précède chaque rotation recule l'axe du cylindre d'un
   demi-diamètre, et il n'est pas facultatif. Les faces sont avancées de cette même
   moitié pour que les arêtes se rejoignent ; sans ce recul, celle qui regarde le
   lecteur se trouve donc à 39 px devant le plan de la page, et une perspective de
   800 px grossit ce qui s'en approche de 800/(800−39), soit 5 %. Le mot au repos
   s'affichait à 73,6 px dans un titre composé à 70 — assez peu pour qu'on ne sache
   pas quoi, assez pour qu'on voie que quelque chose ne va pas. Reculé d'autant, l'axe
   passe derrière la page, la face avant revient exactement à z = 0, et le mot au repos
   mesure ce que mesure la phrase qui l'entoure. La valeur est répétée sur les trois
   étapes parce qu'une liste de transformations ne s'interpole proprement qu'entre
   listes de même forme. */
@keyframes mot-tournant-cylindre{
  0%,  42%{transform:translateZ(calc(var(--mot-tournant-haut) / -2)) rotateX(0deg);}
  50%, 92%{transform:translateZ(calc(var(--mot-tournant-haut) / -2)) rotateX(-90deg);}
  100%    {transform:translateZ(calc(var(--mot-tournant-haut) / -2)) rotateX(-180deg);}
}
/* La largeur suit le tour exactement, et elle n'a pas le choix : il n'y a plus de
   moment creux où la faire bouger en cachette. Elle s'ouvre pendant le premier quart
   de tour — « cabinet » fait 3,28 em contre 1,83 à « kiné » — et se referme pendant
   le second. Ce qui se voit alors, c'est « Trouvez le » qui glisse d'une centaine de
   pixels vers la gauche à la vitesse où le mot tourne : le créneau s'élargit pour le
   mot qui arrive, pas après lui. Les bornes sont les mêmes qu'au cylindre, au même
   « ease-in-out » — les deux animations doivent décrire un seul geste. */
@keyframes mot-tournant-largeur{
  0%,  42%{width:var(--l-kine);}
  50%, 92%{width:var(--l-cabinet);}
  100%    {width:var(--l-kine);}
}
/* Sans mouvement, le titre n'a pas à trancher entre ses deux publics : il les nomme
   tous les deux, d'un trait, et c'est exactement ce que porte déjà la cale. Le
   cylindre disparaît, la cale reprend sa largeur naturelle, et la phrase lue à voix
   haute est celle qu'on lit à l'écran. */
@media (prefers-reduced-motion:reduce){
  /* La phrase entière — « kiné ou le cabinet », 7,55 em — était rognée (« le
     cabine ») sous 345 px. Le corps du titre suit désormais la largeur sous 372 px
     (voir « Sous 400 px de large » plus haut) et la phrase tient d'un bloc : la règle
     de retour à la ligne essayée le 16 octobre 2026 a été retirée le même jour, elle
     changeait aussi la composition du titre sur ordinateur. */
  .mot-tournant{width:auto;animation:none;perspective:none;}
  .mot-tournant-cale{width:auto;opacity:1;}
  .mot-tournant-cylindre{display:none;}
  /* La phrase entière ne tient pas avec « Trouvez le » sur un téléphone : elle reprend sa ligne. */
  .titre-insecable{white-space:normal;}
}

/* Le chapeau est court — deux lignes — et c'est une contrainte, pas un hasard : la
   version longue de la page d'accueil fait quatre lignes et repousse le bouton de
   soixante pixels. Au centre, tout ce qui s'allonge écarte ce qui suit du regard. */
.accueil-hero-texte .chapeau{max-width:56ch;margin:20px auto 0;font-size:18px;}
/* Deux boutons, mais pas deux appels de même force, et la nuance est tout le
   réglage. Cette page n'a longtemps porté qu'un seul bouton, pour une raison qui
   tient toujours : deux verbes au même poids, c'est une décision à prendre avant
   d'avoir rien lu, et le visiteur qui hésite ne tranche pas, il s'en va.
   Le second bouton a donc été ajouté en retrait — « .bouton-ligne », un contour
   sans aplat — là où le premier garde l'accent plein. On voit qu'il y a deux
   chemins, on voit lequel est le nôtre.

   « Voir la démo » ne mène d'ailleurs pas ailleurs : il descend à la machine qui
   suit immédiatement. C'est un bouton qui ne coûte rien à celui qui l'ignore, et
   c'est la raison pour laquelle il peut tenir à côté de l'appel principal sans
   lui disputer la place. */
.accueil-hero-texte .accueil-action{
  display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:30px;
}
/* Les deux boutons du hero prennent le rayon plein, comme la barre et comme son
   bouton. Trois objets ronds sur le même axe vertical valent mieux qu'un rond en haut
   et deux rectangles arrondis en dessous — avec « --radius-sm » à 12 px sur un bouton
   de 48 de haut, l'œil lisait une forme hésitante, ni carrée ni ronde.

   Un rayon de 999 px sur un bouton n'est pas un demi-cercle imposé : c'est la moitié
   de la hauteur, quelle que soit celle-ci. Le réglage suit donc le « padding » et la
   taille de texte sans qu'on ait à le reprendre.

   Le « padding » horizontal passe de 24 à 30 px, et ce n'est pas un ajustement de
   goût. Arrondir un côté droit retire de la place utilisable dans les coins : le
   texte, lui, reste rectangulaire, et se retrouve visuellement plus près du bord
   qu'avant alors qu'il n'a pas bougé. Six pixels de chaque côté rendent au mot l'air
   que la courbe lui a pris. */
.accueil-hero-texte .accueil-action .bouton{
  border-radius:999px;
  padding-inline:30px;
}

/* Les deux appareils se voient entiers, et c'est un revirement qu'il faut noter
   parce que le réglage d'avant était intentionnel.

   Cette marge était négative — jusqu'à −54 px — pour faire monter la machine du bas
   et la laisser s'engager sous le pavé qui suit. L'intention était bonne : un objet
   qui sort de sa case donne de la profondeur à une page plate. Le résultat ne
   l'était pas. Le pavé suivant recouvrait le socle de l'ordinateur et le bas du
   téléphone, et le chevauchement ne se lisait pas comme de la profondeur mais comme
   un cadrage raté — d'autant plus depuis que le téléphone porte une barre d'accueil
   en bas, c'est-à-dire précisément le détail qui dit « iPhone » et qui disparaissait
   le premier.

   La leçon vaut au-delà d'ici : un appareil n'est pas une image. On peut rogner une
   photographie, parce qu'on comprend qu'elle continue hors du cadre. Un objet dont
   on reconnaît la forme, on le lit comme cassé. La marge est donc positive, et la
   profondeur se cherche ailleurs — l'ombre portée du capot la donne déjà. */
/* « display:flow-root » est ici la pièce qui tient tout le bas du hero, et elle ne se
   voit pas. « .scene » réserve la hauteur du débord du téléphone par une marge basse —
   c'est la seule façon de réserver ce qui sort d'une boîte, « kinome.css » le démontre
   à cet endroit. Or une marge basse d'enfant se fusionne avec celle de son parent dès
   que rien ne les sépare : les 31 px de la scène et les 24 px d'ici ne s'additionnent
   pas, ils se confondent en 31, et la réserve toute neuve est aussitôt mangée par la
   marge qui devait l'espacer du bandeau. Le téléphone touchait de nouveau le filet.

   Un contexte de formatage de bloc arrête la fusion. « overflow:hidden » le ferait
   aussi, et rognerait un téléphone qui déborde — exactement le défaut qu'on répare.
   « display:flow-root » ne fait que cela et rien d'autre : c'est son unique raison
   d'exister dans la spécification, et c'est exactement ce qu'on lui demande. */
.accueil-scene{
  position:relative;
  display:flow-root;
  margin-top:clamp(34px,4vw,54px);
  margin-bottom:clamp(28px,3vw,48px);
}
/* La marge haute appartient à la boîte ci-dessus, et à elle seule. « .scene » en
   porte une de son côté dans « kinome.css » — « clamp(40px,6vw,66px) » — parce
   qu'ailleurs elle est posée directement dans le flux et doit se tenir à distance
   toute seule. Ici elle est dans une boîte qui s'en charge déjà : les deux
   s'additionnent, et c'est un défaut, pas un réglage.

   Il était masqué jusqu'ici par deux rustines qui ne couvraient pas les mêmes
   largeurs. « kinome.css » annule la marge interne au-delà de 1360 px ; le montage
   photographique l'annulait de son côté au-delà de 1240. Entre les deux, et
   au-dessous, l'écart sautait de 54 px à 120 — un saut déjà relevé dans
   « kinome.css » et laissé en l'état, faute d'un endroit où le corriger qui ne
   soit pas une page en particulier.

   Cet endroit, c'est ici : la page d'accueil est justement celle où « .scene » a
   une boîte autour d'elle. Une ligne, valable à toutes les largeurs, et l'écart
   redevient ce que la boîte annonce — de 34 à 54 px, continûment. */
.accueil-scene .scene{margin-top:0;}

/* --- Le hero : l'ordinateur et le téléphone, seuls et centrés -------------

   Il y avait ici cent cinquante lignes de montage photographique, retirées le
   5 octobre 2026 au soir : « enlève la photo dans le head et remets uniquement
   l'ordinateur et le téléphone en centré ». Ce qu'elles faisaient et pourquoi
   elles ont existé est raconté dans « outils/capturer-demo.md » ; la
   photographie elle-même est archivée sous « ~/Documents/kinome-archives/
   hero-cabinet-2026-10-05.jpg ».

   Ce qui compte ici est ce qui **ne s'écrit pas**. Le réflexe serait de garder
   la boîte de repérage et d'y centrer le groupe d'appareils — un « left:50% »,
   une translation, et l'affaire semble faite. Ce serait rajouter un centrage
   par-dessus un centrage qui existe déjà et qui est meilleur.

   « kinome.css » pose en effet « .scene{width:fit-content; margin:… auto 0} » :
   le groupe se centre tout seul, à sa largeur propre. Et il fait davantage —
   « transform:translateX(calc(var(--debord) / -2)) » le décale de la moitié des
   sept pixels dont le téléphone déborde à droite, de sorte que ce soit la
   **silhouette visible** qui tombe au milieu, et non la boîte invisible qui la
   contient. C'est exactement la correction que le montage avait dû réécrire à
   la main avec « --marge-groupe » et son « + 4px ». Elle était déjà là.

   Tombent donc avec la photographie, et pour la même raison — ils n'existaient
   que pour la loger :

   - la boîte en « aspect-ratio:1400/670 », qui réservait de la hauteur sous les
     appareils pour que l'image respire au-dessus ;
   - le positionnement absolu des deux groupes, et la variable de marge qui les
     égalisait ;
   - les échelles .40/.36, montées d'un cran parce que l'image prenait la place ;
     sans elle, les .50/.43 natifs reviennent, et les appareils retrouvent la
     taille qu'ils avaient avant le montage ;
   - les deux paliers de « zoom », qui ne servaient qu'à empêcher le groupe de
     venir mordre sur la partie nette de l'image en fenêtre étroite.

   Il ne reste que la règle de marge verticale au-dessus, et c'est tout le fichier
   que cette section occupe désormais. */
/* Il y avait ici une remise à l'échelle de la machine au-delà de 1360 px, et elle
   ne faisait que défaire ce que « kinome.css » venait de faire : le côte-à-côte y
   ramenait la machine à .38/.33 pour la faire tenir dans une colonne de texte, et
   cette page, dont le hero est centré et prend toute la largeur, la remettait à
   .50/.43. Or .50/.43 est déjà la valeur de base. Les deux règles se sont donc
   annulées pour rien pendant toute la durée de l'essai à deux pages.
   Le côte-à-côte étant parti avec l'ancienne page, c'est la règle de base qui
   s'applique, et elle donne la même chose au centième près. */

/* ============================================================================
   2 bis. Le bandeau des types de poste
   ============================================================================
   Une bande pleine largeur, légèrement teintée, posée entre deux sections nues.
   C'est elle qui les sépare : le hero et « Le projet » se suivent maintenant
   sans boîte ni l'un ni l'autre, et deux sections nues de suite se lisent comme
   une seule longue page. La bande rend la respiration que les pavés donnaient.

   Le défilement n'a aucune valeur informative — on lit six mots, qu'ils bougent
   ou non. Il en a une d'attention : une liste immobile de six étiquettes se
   range avec le décor, une liste qui avance se regarde. C'est le seul argument,
   et il suffit à condition que le mouvement reste lent. Quarante secondes pour
   un quart de piste, soit un mot toutes les cinq secondes environ : on a le
   temps de lire sans suivre des yeux.

   Les bords s'effacent par un masque plutôt que par un dégradé posé par-dessus.
   Un dégradé devrait connaître la couleur du fond et la répéter — une valeur de
   plus à maintenir en double, et la première à diverger le jour où le fond
   change. Le masque, lui, ne sait rien du fond, il découpe. */
/* Les deux filets ne sont pas en « --border », et c'est la deuxième fois que la
   question se pose sur cette page. « --border » vaut #E6E5DD et le fond de page
   #E9E9E1 : trois points d'écart par canal, soit un trait qu'on ne voit pas. Il
   n'était lisible que posé sur le fond plus clair d'un pavé. La bande, elle, est
   à cheval entre les deux fonds, donc il lui faut un filet qui tienne sur l'un
   comme sur l'autre — d'où le mélange à l'encre, comme pour « --filet » dans la
   section du projet. Sans ces deux traits la bande ne se détache pas : la teinte
   seule ne suffit pas, on l'a essayée. */
.accueil-postes{
  position:relative;
  padding:clamp(30px,3.6vw,48px) 0 clamp(32px,3.8vw,52px);
  background:var(--bg);
  border-top:1px solid color-mix(in srgb, var(--text) 13%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--text) 13%, transparent);
  overflow:hidden;
}
.accueil-postes::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);
  background-attachment:fixed;
  mix-blend-mode:overlay;
  opacity:var(--grain-surface);
}
.accueil-postes-piste{
  position:relative;z-index:1;
  display:flex;width:max-content;
  animation:postes-defile 40s linear infinite;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
}
/* La piste s'arrête sous le pointeur. C'est une politesse minuscule et c'est la
   seule réponse honnête à un défilement automatique : celui qui veut lire une
   étiquette la retient, au lieu de la poursuivre. */
.accueil-postes-piste:hover{animation-play-state:paused;}
.accueil-postes-serie{
  display:flex;flex:none;align-items:center;
  gap:clamp(12px,1.4vw,20px);
  margin:0;padding:0 clamp(6px,.7vw,10px);list-style:none;
}
.accueil-postes-serie li{
  display:flex;align-items:center;
  padding:11px 22px;border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 2px 6px rgba(22,35,63,.05);
  font-family:var(--display);font-size:clamp(15px,1.4vw,18px);font-weight:700;
  color:var(--text);white-space:nowrap;
}
/* Il y avait ici un point ambre devant chaque étiquette, repris de la pastille que
   l'application affiche sur un type de poste coché. L'intention était bonne — faire
   reconnaître la forme à qui ouvrira l'application —, mais elle supposait qu'on ait
   déjà vu l'application, ce qui n'est le cas de personne à cet endroit de la page.
   Pour tous les autres, c'était six puces sur une bande qui n'est pas une liste à
   lire, et la répétition de l'ambre juste sous le titre lui disputait l'accent.
   Retiré le 12 octobre 2026 ; la ligne « gap » qui séparait le point du mot est
   partie avec lui, n'ayant plus rien à séparer. */

/* Une étiquette sur deux en accent. C'est la couleur qui est revenue dans la bande
   après le départ des points, mais portée par le mot au lieu d'une puce à côté de
   lui — ce qui règle au passage ce qu'on reprochait aux points : ils ajoutaient un
   objet, l'alternance n'ajoute rien, elle colore ce qui est déjà là.

   « --accent » et non « --accent-ink », et c'est la même question qu'au 5 octobre sur
   « .metier-kine », tranchée de la même façon par le porteur : l'ambre passe le
   contraste là où l'orangé échoue, mais l'ambre se lit comme une *autre* couleur, et
   la page afficherait alors deux oranges à deux cents pixels l'un de l'autre sans que
   rien ne justifie l'écart. Poser « --accent-ink » ici recréerait exactement l'écart
   qu'on a refusé là-haut. Le jour où l'accessibilité sera reprise, la bonne réponse
   reste de revoir « --accent » lui-même, qui échoue partout où il porte du petit
   texte — pas de dépareiller un endroit de plus.

   « nth-child » compte dans chaque série, pas dans la piste, et cela ne tient que
   parce que la série a un nombre **pair** de postes : six aujourd'hui, donc la
   deuxième copie reprend l'alternance là où la première l'a laissée, et la bande
   paraît continue. Ajouter un septième poste la ferait basculer à chaque raccord —
   Stage en accent dans une copie, en encre dans la suivante — sans que rien d'autre
   ne bouge. Si la liste devient impaire, il faudra compter sur la piste entière. */
.accueil-postes-serie li:nth-child(odd){color:var(--accent);}

@keyframes postes-defile{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-25%,0,0);}
}
/* Sans mouvement, la piste n'a plus de raison de dépasser l'écran : elle revient
   dans l'enveloppe, se replie sur plusieurs lignes, et les trois copies muettes
   disparaissent pour ne pas répéter la liste quatre fois à l'œil. */
@media (prefers-reduced-motion:reduce){
  .accueil-postes-piste{
    width:auto;flex-wrap:wrap;animation:none;
    -webkit-mask-image:none;mask-image:none;
    max-width:var(--largeur);margin:0 auto;padding:0 24px;
  }
  .accueil-postes-serie{flex-wrap:wrap;row-gap:12px;}
  .accueil-postes-serie[aria-hidden="true"]{display:none;}
}

/* ============================================================================
   3. Bloc arrondi : l'unité de composition de cette page
   ============================================================================
   La page d'accueil alterne des bandes pleine largeur et des sections nues, et
   sépare les unes des autres par un filet. Ici chaque chapitre est un pavé
   arrondi posé sur le fond : on compte les pavés, donc les chapitres, en faisant
   défiler vite — ce qu'un filet ne permet pas.

   Le filet se paie quand même : un pavé coûte de la gouttière à gauche et à
   droite, que la bande prenait pour son contenu. C'est le prix de la lisibilité
   de la structure, et il est payé une fois pour toute la page. */
.accueil-bloc{
  position:relative;isolation:isolate;
  border-radius:var(--radius-xl);
  background:var(--bg);
  border:1px solid var(--border);
  padding:clamp(40px,5vw,76px) clamp(22px,3.4vw,58px);
}
.accueil-bloc::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  background-image:var(--grain);
  background-attachment:fixed;
  mix-blend-mode:overlay;
  opacity:var(--grain-surface);
}
/* Un pavé blanc pour les chapitres qui montrent plutôt qu'ils n'expliquent : la
   vitrine du cabinet, les ressources. Le blanc avance d'un cran sur le fond, ce
   qui suffit à dire « regardez ici » sans ajouter de couleur. */
.accueil-bloc.clair{background:var(--surface);}
.accueil-bloc.teinte{background:var(--accent-soft);border-color:color-mix(in srgb, var(--accent) 24%, transparent);}

/* ---------- Les boutons sont des pilules, et ce n'est plus écrit ici ----------
   « .bouton{border-radius:999px;} » a vécu à cet endroit le 15 octobre 2026, le temps
   d'une demi-journée. La règle est remontée dans « kinome.css » le même jour, avec son
   commentaire : elle était posée dans une feuille que seule la page d'accueil charge,
   et la forme des boutons changeait donc en passant sur le blog. Rien à remettre ici —
   c'est précisément ce qu'on vient de défaire. */

/* Les ouvertures de chapitre sont centrées, les blocs de contenu restent à gauche.
   C'est la respiration du site de référence : le centre annonce, la gauche
   explique. Tout centrer donnerait une page de titres ; tout aligner à gauche
   ferait disparaître les articulations. */
.accueil-ouverture{max-width:720px;margin:0 auto;text-align:center;}
.accueil-ouverture .chapeau{margin-left:auto;margin-right:auto;}

/* Les surtitres qui ouvrent une section sont plus gras et un peu plus gros que la
   règle générale « .surtitre » : 700 au lieu de 500, 12,5 px au lieu de 11.

   La règle vise un rôle et pas un élément, parce que le site compte onze surtitres qui
   ne font pas tous le même travail. Sept ouvrent une section et annoncent son titre —
   « Tout en 1 », « Vous êtes de quel côté ? », « Côté cabinet », « Fini de repartir de
   zéro », « À propos », « Ressources », « Questions fréquentes ». Quatre sont des
   étiquettes intérieures qui numérotent une étape : « Temps 01 · Se trouver » et ses
   trois sœurs. Grossir celles-là aussi les mettrait en concurrence avec le h3 qu'elles
   annoncent, à une ligne de distance ; n'en grossir qu'une seule des sept laisserait
   six sœurs en retrait sans raison lisible.

   (Il y en avait huit jusqu'au 14 octobre 2026 : « Le modèle » ouvrait la section de la
   gratuité et a été retiré, parce qu'il redisait l'entrée du pied de page qui y mène.
   C'est la seconde ouverture à partir pour ce motif, après « Le projet ».)

   D'où « :has(+ h2) » plutôt qu'un conteneur. Le premier essai passait par
   « .accueil-ouverture », et il ratait deux des huit d'alors : « Côté cabinet » est dans
   une « .vitrine », « Questions fréquentes » ailleurs encore. Le conteneur décrit où
   l'étiquette se trouve, ce qui est un accident de balisage ; « suivie d'un h2 » décrit
   ce qu'elle fait, ce qui est la chose même qu'on veut styler. Vérifié sur la page :
   les sept ouvertures sont suivies d'un h2, les quatre étiquettes d'un h3, la coupure
   tombe exactement au bon endroit — et une section ajoutée demain héritera du bon poids
   sans qu'on ait à y penser.

   « :has() » manque aux Firefox antérieurs à 121. Le repli y est le dessin précédent,
   surtitres en 500 et 11 px : plus discret, pas cassé. C'est le bon sens de la panne,
   et c'est pour ça que la règle ajoute du gras au lieu d'en retirer.

   « font-size » en dur et pas en « clamp » : 1,5 px d'écart ne se partage pas en
   fonction de la fenêtre, et la règle générale qu'on surcharge n'en a pas non plus. */
.surtitre:has(+ h2){font-weight:700;font-size:12.5px;}
.accueil-section{padding:clamp(34px,4.6vw,64px) 0;}

/* L'interrupteur du profil fait 1280 px sur l'accueil, et il y tient : la section
   qui l'entoure y est une bande teintée bordée en haut et en bas, dans laquelle il
   se lit comme une pièce. Ici la section est posée à nu sur le fond, et la même
   barre blanche pleine largeur autour d'un seul petit bouton paraît vide. On lui
   rend la largeur de son propos. */
.accueil-section .veille{max-width:620px;margin-left:auto;margin-right:auto;}

/* Le lien secondaire de fin de chapitre. Le site de référence en met un à chaque
   section — « Voir tous les établissements », « Voir toutes les intégrations » —
   et c'est ce qui lui permet de n'avoir qu'un seul bouton : la sortie latérale
   existe, elle n'a simplement pas la forme d'un appel à l'action. */
.accueil-suite{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:700;color:var(--accent-ink);
  text-decoration:none;border-bottom:1.5px solid color-mix(in srgb, var(--accent) 50%, transparent);
  padding-bottom:2px;
  transition:border-color .16s ease, gap .16s ease;
}
.accueil-suite:hover{border-bottom-color:var(--accent);gap:12px;}
.accueil-suite svg{flex:none;}

/* ============================================================================
   4. Le projet : le constat, puis la réponse — et plus aucune boîte
   ============================================================================
   Cette section a d'abord été un « .accueil-bloc » contenant deux cartes blanches
   ombrées et une carte teintée. Trois épaisseurs de boîte l'une dans l'autre, et
   le pavé de la section suivante commençait quinze pixels plus bas : on ne lisait
   plus des chapitres, on comptait des encadrés. Le porteur l'a dit sans détour —
   « cela fait 2 encarts à la suite avec le suivant, c'est très lourd ».

   Elle est donc posée à nu sur le fond de la page. Elle a porté seule la classe
   « .accueil-section-nue » jusqu'au 14 octobre 2026, où la section de la gratuité
   l'a rejointe pour la même raison dite autrement : « Gratuit. Sans astérisque. »
   est l'affirmation la plus forte de la page, et une boîte la rangeait au rang des
   chapitres qui expliquent. Deux porteuses, donc, et trois pavés restants sur la
   page — assez peu des deux côtés pour que le pavé garde son sens quand il paraît.
   Ce que la boîte faisait ici, trois choses sans pixels le font maintenant :
     · un filet plein au-dessus de chaque colonne du constat, qui donne un bord
       haut à ce qui n'a plus de cadre ;
     · un filet pleine largeur avant la réponse, qui marque la bascule ;
     · un changement d'échelle du texte, la réponse parlant plus fort que le
       constat.
   Le gain ne se mesure pas qu'à l'œil : l'alternance nu / pavé redonne au pavé
   son sens, qui était d'attirer le regard et qui s'épuise quand tout en est un.

   Le constat reste en deux colonnes qui se font face, et l'écart entre elles est
   dessiné plutôt que seulement laissé vide. C'est le sujet de la section : deux
   personnes qui cherchent la même chose et ne se trouvent pas. Une gouttière
   ordinaire aurait dit « voici deux encadrés » ; le trait interrompu par un point
   d'interrogation dit « il manque quelque chose entre les deux ». Il y gagne
   d'ailleurs : entre deux cartes il séparait des objets déjà séparés, entre deux
   colonnes nues il est la seule chose qui les sépare.

   En dessous de 900 px les deux colonnes s'empilent, et c'est là que ce dessin
   deviendrait faux : empilé, il ne sépare plus rien, il fait seulement un trait
   horizontal au milieu d'un texte. Il était donc retiré, et non pas réorienté —
   une décoration qui ne porte plus son sens doit disparaître, pas se contorsionner.

   Révision du 18 octobre 2026. Le raisonnement ci-dessus tient, mais il jetait
   l'enfant avec l'eau du bain : sans rien entre les deux constats, le seul
   séparateur devenait le filet de 2 px du second, c'est-à-dire exactement « voici
   deux encadrés », la lecture qu'on voulait éviter. Ce qui est faux une fois
   empilé, ce n'est pas le point d'interrogation, ce sont les deux traits : à
   l'horizontale ils doublaient le filet du constat suivant, posé vingt pixels plus
   bas, et l'œil voyait deux règles au lieu d'une. On garde donc la pastille et on
   retire les traits — voir le chapitre 13. Le « ? » redevient ce qu'il a toujours
   été, une ponctuation entre deux manques, et il n'y a plus qu'un seul événement
   horizontal par intervalle. */
/* Une section sans pavé perd la réserve intérieure de celui-ci — 40 à 76 px en
   haut et en bas — et vient donc toucher ses voisines. Le pavé suivant commençait
   trop tôt, et la machine du hero finissait trop près. On rend cet air à la
   section elle-même, faute de quoi « enlever la boîte » reviendrait à « serrer
   la page ». */
.accueil-section-nue{padding:clamp(52px,6.6vw,96px) 0;}
.accueil-section-nue .accueil-ouverture{margin-bottom:clamp(10px,1.4vw,20px);}

/* Les filets de cette section se tracent en bleu nuit transparent, et non avec
   « --border ». La raison est mesurable : --border vaut #E6E5DD et le fond de page
   #E9E9E1 — trois points d'écart sur chaque canal, soit un filet qu'on ne voit pas.
   Sur un pavé (--bg, #F1F2ED) il se voyait tout juste, et c'est ce « tout juste »
   qui avait rendu la variable acceptable. Une couleur de bordure choisie sur un
   fond ne vaut pas sur un autre : en sortant la section de sa boîte, on a changé
   son fond, donc ses filets. */
.accueil-section-nue{--filet:color-mix(in srgb, var(--text) 15%, transparent);}
.projet-constat{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;
  gap:clamp(20px,3.4vw,54px);margin-top:clamp(28px,3.4vw,46px);
}
/* Le filet haut tient lieu de bord. Il est en « --text » et non en « --border » :
   un filet gris sur un fond crème se voit à peine, et ce qui se voit à peine ne
   remplace pas une carte — on le prend pour une rayure. Deux pixels de bleu nuit
   suffisent, et le point de vue annoncé juste en dessous l'habille. */
.projet-cote{
  border-top:2px solid var(--text);
  padding-top:clamp(14px,1.6vw,20px);
}
/* Pas de « margin-top » sur ce titre : les 10 px qu'il portait écartaient le titre
   de l'étiquette « CÔTÉ TITULAIRE » posée au-dessus. L'étiquette est partie dans le
   titre (voir index.html), donc le titre est maintenant le premier élément de la
   colonne et c'est le « padding-top » du filet qui le place. Garder la marge aurait
   ajouté ses 10 px aux 14-20 px du padding : non pas une faute visible, mais un
   titre qui décroche de son filet sans raison lisible.

   La règle « .projet-qui » qui suivait — mono, 11,5 px, petites capitales ambre —
   est retirée avec son dernier utilisateur. Une règle sans sélecteur correspondant
   ne coûte pas un pixel, mais elle coûte une hésitation au prochain qui la lira et
   cherchera ce qu'elle habille.

   Le 18 octobre 2026, « .projet-qui » est revenue une heure — étiquettes affichées
   sur téléphone seulement, masquées ailleurs — puis le porteur l'a défaite. Rien
   n'en subsiste ici, et c'est volontaire : la classe n'existe plus dans le HTML,
   donc la règle n'a pas de raison de l'attendre. Le pourquoi du retour et le pourquoi
   du retrait sont dans index.html, au-dessus du premier « .projet-cote », parce que
   c'est une décision de texte et que le texte est là-bas.

   Ce qu'il faut en retenir en lisant cette feuille : si l'étiquette revient un jour,
   elle ne reviendra pas par une règle d'adaptation au chapitre 13 mais par une ligne
   ici, contre le reste du constat — c'est l'état normal de l'élément qui se décide,
   pas son comportement sur une largeur. */
.projet-cote h3{font-size:clamp(20px,2.1vw,25px);}
/* Le même « .lueur » que dans le titre du hero, et volontairement le même nom : c'est
   la même chose — la partie du titre que la page met en avant. Deux classes pour un
   seul geste auraient fini par dériver l'une de l'autre.

   Le sélecteur reste porté par son titre plutôt que par « .lueur » seul, comme
   « .accueil-hero-texte h1 .lueur » plus haut. Une classe de couleur globale est
   commode le jour où on l'écrit et coûte cher ensuite : elle s'applique à des textes
   dont on n'a pas mesuré le fond, et elle rend impossible de changer l'accent d'un
   seul endroit. Ici on nomme les endroits qui l'emploient. « .accueil-section-nue »
   plutôt que « #projet » : ce fichier n'a pas un seul sélecteur d'identifiant.

   La classe ne désignait que cette section le jour où elle a été écrite ; depuis le
   14 octobre 2026 elle en désigne deux, et le titre de la gratuité — « Gratuit. »
   en jaune, « Sans astérisque. » en bleu nuit — est couvert par ce sélecteur sans
   qu'on ait eu à l'étendre. C'est ce qu'on attend d'une règle qui vise un rôle :
   les deux sections nues sont les deux endroits où la page pose une affirmation à
   même le fond, et ce sont exactement les deux qui ont un mot à faire ressortir.

   Contraste : « --accent » (#E8963C) sur le crème de la page donne 1,94:1, en deçà
   des 3:1 demandés même pour du grand texte. C'est le même arbitrage que le porteur a
   tranché le 5 octobre 2026 sur « .metier-kine » (voir le long commentaire là-haut),
   et que le titre du hero applique déjà à « qui vous correspond ». La réponse, si
   elle vient un jour, est de revoir « --accent » lui-même — pas d'assombrir cet
   endroit-ci, ce qui donnerait deux jaunes différents sur la même page.

   Le « nowrap » de la règle suivante est séparé, et il ne couvre que les h3. Pourquoi
   est expliqué juste en dessous. */
.projet-cote h3 .lueur,
.projet-reponse h3 .lueur,
/* Quatrième endroit depuis le 15 octobre 2026 : « vous êtes soignants ». La règle
   s'étend plutôt qu'elle ne se dédouble, et le sélecteur continue de nommer son
   endroit — « .accueil-appel » est le titre posé seul au milieu de la page, celui
   qui s'adresse au lecteur. Il n'est pas couvert par la ligne suivante : les deux
   sections nues portent une « .accueil-ouverture », celle-ci porte un « appel ». */
.accueil-appel h2 .lueur,
/* Cinquième endroit, le même jour : « ils sont partenaires de Kinôme ». Le
   sélecteur nomme encore son endroit, et il est écrit ici plutôt qu'avec le
   reste du bandeau — section 8 bis, plus bas — pour que la liste des titres qui
   portent une lueur se lise d'un seul tenant. Cinq lignes au même endroit se
   comptent ; cinq déclarations identiques éparpillées dans la feuille finissent
   par diverger, et c'est précisément ce que le commentaire du dessus dit
   vouloir éviter. */
.accueil-partenaires .partenaires-titre .lueur,
/* Sixième endroit, toujours le 15 octobre 2026 : « la même application où vous
   retrouver », titre de la section des deux cartes. « .accueil-cotes » est une
   classe posée sur la section pour cette seule règle — la section n'est pas
   « nue », elle ne porte donc pas la ligne suivante, et le fichier s'interdit les
   sélecteurs d'identifiant. Nommer l'endroit coûte une classe dans le balisage ;
   « .accueil-section .accueil-ouverture h2 .lueur » aurait coûté neuf sections
   éclairées d'avance, dont huit qu'on n'a pas regardées. */
.accueil-cotes .accueil-ouverture h2 .lueur,
.accueil-section-nue .accueil-ouverture h2 .lueur{color:var(--accent);}

/* « nowrap » parce qu'un groupe coloré coupé par un retour à la ligne ne désigne plus
   un groupe, il désigne deux morceaux. Sans lui, et contre l'intuition, c'est dans les
   fenêtres **larges** que ça cassait : à 1269-1441 px la colonne gauche tenait tout
   juste « …recruter prend un » sur sa première ligne, donc le jaune commençait par un
   « un » esseulé en bout de ligne et reprenait en dessous. Mesuré largeur par largeur
   de 300 à 1600 px : 347 largeurs fautives avant, aucune après.

   En CSS et non en «   » dans le HTML, pour trois raisons. La règle vaut pour les
   deux titres d'un coup au lieu de sept entités disséminées. Elle se lit comme ce
   qu'elle est — « une lueur tient sur une ligne » — là où une suite d'insécables oblige
   à deviner l'intention. Et elle ne met pas d'U+00A0 dans le texte, qui suivrait le
   visiteur dans son presse-papier.

   La contrepartie : une lueur trop longue déborde de sa colonne au lieu de passer à la
   ligne. Les insécables auraient exactement le même défaut — ce n'est pas un défaut du
   « nowrap », c'est le prix de l'insécabilité.

   Et c'est pour ce prix-là que le h2 de la section, « se rencontrent enfin », en est
   exclu. Il est trois fois plus gros que les h3 (42 px contre 25) dans un conteneur
   deux fois plus étroit (720 px), si bien qu'en dessous de 310 px de fenêtre le groupe
   coloré mesure 264 px pour 260 px disponibles — 101,4 %. Mesuré des deux façons de
   300 à 1600 px : avec « nowrap » il déborde sur 9 largeurs, sans « nowrap » il se
   coupe en deux sur 10. Même zone, même poignée de largeurs, mais pas la même faute :
   un titre coupé reste lisible, un titre qui déborde est rogné ou fait défiler la page
   de côté. Au-dessus de 310 px, « text-wrap:balance » place de lui-même le groupe
   entier sur la deuxième ligne — le « nowrap » n'y servirait à rien. */
.projet-cote h3 .lueur{white-space:nowrap;}
.projet-cote .chapeau{margin-top:12px;}
.projet-ecart{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;
}
.projet-trait{
  flex:1;width:2px;min-height:26px;
  background:repeating-linear-gradient(
    to bottom, var(--filet) 0 5px, transparent 5px 11px);
}
/* La pastille était une puce blanche, bordée et ombrée : un encadré de trente-quatre
   pixels, ce qui reste un encadré. Elle devient une réserve — le glyphe posé sur un
   disque de la couleur du fond, qui interrompt le pointillé sans rien poser dessus.
   Le fond est « --page-bg » et non « --bg » parce que la section n'a plus de pavé
   sous elle : c'est la page qu'elle découpe. */
.projet-pastille{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--page-bg);
  font-family:var(--display);font-size:17px;color:var(--accent);
}

/* La réponse renverse la composition. Elle n'a plus de fond teinté pour le dire —
   après deux colonnes nues, un pavé crème aurait réintroduit à lui seul le défaut
   qu'on vient de corriger. Elle le dit par un filet pleine largeur, par l'air
   au-dessus, et par un titre d'un cran plus grand que ceux du constat. */
.projet-reponse{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:clamp(24px,3.6vw,56px);
  margin-top:clamp(34px,4.4vw,62px);
  padding-top:clamp(30px,3.8vw,54px);
  border-top:1px solid var(--filet);
}
/* Le « margin-top:8px » de ce titre est parti avec le surtitre « La réponse » qu'il
   écartait, exactement comme les 10 px de « .projet-cote h3 » plus haut. Le titre est
   désormais le premier élément de sa cellule, et la grille est en « align-items:center »
   — une marge en tête y décale le bloc entier vers le bas par rapport à la jauge d'en
   face, ce qui est précisément le défaut qu'on ne voit pas et qu'on ne sait plus
   expliquer six mois après. */
.projet-reponse h3{font-size:clamp(23px,2.7vw,33px);}
.projet-reponse .chapeau{margin-top:14px;}
.projet-jauge{text-align:center;}
.projet-jauge svg{width:clamp(126px,14vw,178px);height:auto;display:block;}

/* La jauge : un arc qui se remplit et un pourcentage qui défile sous lui.

   Deux propriétés, et il faut les distinguer sous peine de ne rien comprendre à ce
   bloc. « --projet-cible » est le score d'arrivée ; il est posé par « kinome.js » sur
   l'élément, et il change à chaque passage. « --projet-score » est la valeur courante,
   celle qui défile de 0 jusqu'à la cible pendant l'animation, et c'est elle que le
   compteur affiche.

   Le nombre est écrit par un compteur CSS et non par du JavaScript, pour une raison
   simple : l'arc juste au-dessus est déjà animé par la feuille de style. Faire compter
   le nombre en JS aurait mis deux moteurs sur un seul geste — l'un dans le CSS, l'autre
   dans le JS — qu'il aurait fallu garder d'accord sur la durée, le retard et la courbe
   à chaque retouche. Le JS ne fournit donc qu'un chiffre et un signal de départ ; tout
   le mouvement est ici.

   « @property » est ce qui rend la chose possible : une propriété personnalisée non
   déclarée ne s'interpole pas, elle bascule d'un coup à mi-parcours. Déclarée avec un
   type « <integer> », elle s'anime valeur par valeur, et « counter() » la rend
   lisible. Si un navigateur ne connaissait pas « @property », le nombre sauterait de
   0 à la cible au milieu de l'animation au lieu de défiler : dégradé laid, pas cassé.

   « tabular-nums » n'est pas un détail de typographe. Sans lui, le « 1 » est plus
   étroit que les autres chiffres, et un nombre qui défile jusqu'à 80 et quelques change
   de largeur quatre-vingts fois en une seconde et demie — le bloc entier tremble. C'est
   aussi ce que fait l'application sur son propre badge. */
@property --projet-score{
  syntax:"<integer>";
  initial-value:0;
  inherits:true;
}
/* La valeur initiale de la cible sert de secours et pas de décoration : si le JS ne
   tourne pas, c'est elle qui s'affiche. 82 est un score plausible du produit, dans la
   même fourchette que ceux que le JS tire. */
@property --projet-cible{
  syntax:"<integer>";
  initial-value:82;
  inherits:true;
}
.projet-jauge-chiffre{
  font-family:var(--display);font-weight:700;
  font-size:clamp(26px,2.6vw,32px);line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--text);margin-top:10px;
}
.projet-jauge-chiffre::after{
  counter-reset:score var(--projet-score);
  content:counter(score) "%";
}
.projet-jauge-valeur{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);margin-top:6px;
}

/* 132 est la longueur du demi-cercle de rayon 42 (π × 42 ≈ 132) : c'est l'arc entier,
   donc 100 %. Un centième vaut 1,32 px, d'où le calcul du décalage d'arrivée.

   Ce calcul est le point important de tout le bloc. Avant, l'arc s'arrêtait à « 33 »
   écrit en dur et le nombre montait à « 75 » écrit en dur ailleurs : deux chiffres
   qu'il fallait penser à changer ensemble, et le jour où l'un bouge sans l'autre on
   obtient un arc aux trois quarts sous un nombre qui annonce 90 — un mensonge que le
   visiteur voit sans savoir le nommer. Maintenant l'arc est déduit du pourcentage.
   Il ne peut plus mentir : il n'a plus de valeur à lui. */
.projet-arc{stroke-dasharray:132;stroke-dashoffset:132;}

/* Les deux animations sont portées par « .projet-jauge.joue » et non par
   « .projet-reponse.visible ». C'est ce qui permet de les rejouer à chaque fois que la
   section revient à l'écran : « kinome.js » retire puis repose « .joue », ce qui
   relance l'animation depuis le début. Passer par « .visible » aurait rejoué du même
   coup le fondu d'apparition du bloc entier, qui lui ne doit se jouer qu'une fois —
   un texte qui réapparaît à chaque remontée de molette fatigue, une jauge qui se
   remplit à nouveau raconte.

   L'arc est une animation et non plus une transition, pour la même raison : une
   transition ne se « rejoue » pas, elle va d'une valeur à une autre, et repartir de
   zéro aurait demandé de forcer un aller-retour. Deux animations qui démarrent sur la
   même classe démarrent, elles, à la même frame.

   Les deux courbes diffèrent, et c'est délibéré. L'arc se pose en
   « cubic-bezier(.34,1.12,.42,1) », dont le 1,12 dépasse l'arrivée avant d'y revenir :
   sur une aiguille, ce dépassement se lit comme un ressort, c'est le geste d'un
   instrument de mesure. Sur un nombre, il afficherait 85 % avant de redescendre à
   82 %, et un pourcentage qui dépasse puis se corrige ne se lit pas comme un ressort,
   il se lit comme un bogue. Le nombre prend donc « cubic-bezier(.22,1,.36,1) », qui
   freine sans dépasser — et qui est la courbe des jauges de l'application
   (« .jauge-comp » dans app.css). Même durée, même retard : ils partent et arrivent
   ensemble, ils ne se croisent qu'au milieu. */
@keyframes projet-score{
  from{--projet-score:0;}
  to{--projet-score:var(--projet-cible);}
}
@keyframes projet-arc{
  from{stroke-dashoffset:132px;}
  to{stroke-dashoffset:calc(132px - 1.32px * var(--projet-cible));}
}
/* L'aiguille balaie 180° pour 100 %, donc 1,8° par point — troisième chose déduite du
   même pourcentage, après le nombre et l'arc. Au repos elle pointe à gauche, à 0 ;
   c'est l'origine du cadran, pas une position par défaut choisie au hasard.

   « transform-box:view-box » avec une origine en unités du viewBox, et pas le réflexe
   « transform-origin:center » : le centre de la boîte du groupe est le milieu de
   l'aiguille, pas son point de pivot. Tourner autour de son milieu ferait balancer
   l'aiguille comme une balançoire au lieu de la faire pivoter sur son moyeu. Les deux
   valeurs sont donc les coordonnées exactes du moyeu dans le dessin, 60 et 86 — les
   mêmes que « .gauge-needle » dans l'application. */
@keyframes projet-aiguille{
  from{transform:rotate(0deg);}
  to{transform:rotate(calc(1.8deg * var(--projet-cible)));}
}
.projet-aiguille{transform-box:view-box;transform-origin:60px 86px;}

/* Le nombre ne s'anime plus ici mais dans kinome.js (« defiler ») : sur iPhone le
   compteur du « ::after » ne suivait pas l'animation de « --projet-score ». Les
   images clés « projet-score » restent pour qui voudrait y revenir. */
/* L'arc et l'aiguille partagent la courbe à ressort, le nombre non — c'est le même
   arbitrage qu'au-dessus, et l'aiguille est précisément ce qui le justifie : le
   dépassement de 1,12 la fait buter un demi-degré au-delà de la mesure avant de s'y
   reposer, ce que fait toute aiguille lestée. Même durée, même retard que l'arc, donc
   ils ne se décollent jamais : l'aiguille désigne à chaque instant le bout du
   remplissage. Les décaler, même de 50 ms, donnerait une aiguille qui montre le vide
   ou qui traîne derrière la couleur. */
.projet-jauge.joue .projet-arc{
  animation:projet-arc 1.4s cubic-bezier(.34,1.12,.42,1) .15s both;
}
.projet-jauge.joue .projet-aiguille{
  animation:projet-aiguille 1.4s cubic-bezier(.34,1.12,.42,1) .15s both;
}

/* Sans JavaScript, « .joue » n'arrive jamais et rien ne se déclenche : la jauge
   resterait à « 0% » sous un arc vide, c'est-à-dire sur un score de compatibilité nul
   affiché en grand à côté d'un titre qui vante la compatibilité. Le pire affichage
   possible, obtenu en ne faisant rien. On pose donc l'état d'arrivée d'emblée, et
   l'animation ne fait que le remplacer quand elle peut. */
html:not(.js) .projet-jauge{--projet-score:var(--projet-cible);}
html:not(.js) .projet-arc{stroke-dashoffset:calc(132px - 1.32px * var(--projet-cible));}
html:not(.js) .projet-aiguille{transform:rotate(calc(1.8deg * var(--projet-cible)));}

/* ---------- Le constat et la réponse, en colonne ----------
   Réécrit le 18 octobre 2026. La version précédente faisait deux choses qu'il a
   fallu défaire, et une troisième qu'elle ne faisait pas.

   Elle centrait la réponse — « justify-items:center; text-align:center » — pendant
   que les deux constats juste au-dessus restaient alignés à gauche sous leur filet.
   Sur un téléphone, les trois blocs se suivent verticalement à quelques pixels les
   uns des autres : on lisait donc deux colonnes ferrées à gauche puis un bloc centré,
   sans qu'aucune hiérarchie ne justifie le changement d'axe. Le centrage venait de la
   disposition à deux colonnes, où la cellule de texte se centrait en face de la jauge ;
   une fois la grille repliée, il ne restait que l'habitude. Les trois blocs partagent
   maintenant le même axe, et c'est tout ce que « harmoniser » voulait dire ici.

   Elle supprimait aussi l'écart — le pointillé, le « ? », le pointillé — parce qu'il
   était dessiné verticalement pour séparer deux colonnes. Mais cet écart *est* le
   propos de la section : deux recherches qui se manquent. Le retirer sur téléphone
   laissait deux constats collés l'un sous l'autre, c'est-à-dire exactement l'inverse
   de ce qu'ils racontent. Il bascule donc à l'horizontale au lieu de disparaître :
   mêmes pièces, même pointillé, même réserve ronde, tournés d'un quart de tour.

   Ce qu'elle ne faisait pas : marquer la réponse. Son filet d'un pixel en « --filet »
   se lisait sur grand écran, où il court sur toute la largeur après un demi-écran de
   blanc ; à 390 px il devient un trait gris parmi trois autres. Il passe à deux pixels
   d'accent — la même épaisseur que les filets des constats, pour rester de la même
   famille, et la seule couleur qui les distingue. La jauge, enfin, remonte en tête de
   la réponse : sur téléphone elle était en pied de page de la section, c'est-à-dire
   lue en dernier alors qu'elle est la démonstration du titre qui la précède. */
@media (max-width:900px){
  .projet-constat{grid-template-columns:1fr;}
  /* Pas de marge propre : la gouttière de « .projet-constat » s'applique déjà
     au-dessus et en dessous de cette ligne, et deux sources d'espacement pour un
     même blanc finissent toujours par être réglées chacune de leur côté. */
  .projet-ecart{flex-direction:row;gap:14px;}
  .projet-trait{width:auto;height:2px;min-height:0;min-width:26px;
    background:repeating-linear-gradient(
      to right, var(--filet) 0 5px, transparent 5px 11px);
  }
  .projet-reponse{
    grid-template-columns:1fr;
    border-top-width:2px;border-top-color:var(--accent);
  }
  /* La jauge en tête, et centrée elle seule : c'est une figure, pas une ligne de
     texte, et une figure de 126 px ferrée à gauche d'une colonne de 312 laisse un
     vide à sa droite que rien ne vient tenir. */
  .projet-jauge{order:-1;justify-self:center;margin-bottom:clamp(14px,2.6vw,22px);}
}

@media (prefers-reduced-motion: reduce){
  /* Le même piège que ci-dessus, et il mérite d'être redit parce qu'il se tend trois
     fois : couper l'animation ne suffit pas. Sans elle, « --projet-score » reste à sa
     valeur initiale, 0, « stroke-dashoffset » à 132 et l'aiguille à plat sur la gauche
     — la jauge affiche « 0% » sous un arc vide, aiguille au zéro. Supprimer un
     mouvement doit laisser l'état d'arrivée, jamais l'état de départ. On repose donc
     les trois à la main. */
  .projet-jauge.joue{animation:none;--projet-score:var(--projet-cible);}
  .projet-jauge.joue .projet-arc{
    animation:none;
    stroke-dashoffset:calc(132px - 1.32px * var(--projet-cible));
  }
  .projet-jauge.joue .projet-aiguille{
    animation:none;
    transform:rotate(calc(1.8deg * var(--projet-cible)));
  }
}

/* ============================================================================
   5. Sélecteur numéroté
   ============================================================================
   Quatre temps du recrutement, quatre volets, un seul affiché. Sur la page
   d'accueil ces quatre temps sont une frise de quatre colonnes étroites, puis les
   mêmes sujets sont repris en long dans quatre sections séparées par un demi-écran
   de défilement : on lit deux fois la même chose, à deux endroits, sans jamais
   voir que c'est la même.

   Le sélecteur règle les deux problèmes d'un coup. Les quatre temps restent
   visibles en permanence, donc la carte du parcours ne quitte jamais l'écran ; et
   le détail de chacun occupe toute la largeur au lieu d'un quart. On y gagne une
   chose qu'aucune des deux dispositions précédentes ne donnait : savoir où l'on
   est dans le parcours pendant qu'on en lit une étape.

   Ce qu'on y perd, et il faut le dire : trois quarts du contenu ne sont plus lus
   sans un geste. C'est le pari de cette hiérarchie — et c'est pourquoi les volets
   restent tous dans le balisage, dépliés à plat quand JavaScript manque. */
.accueil-choix{
  position:relative;
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px;
  width:fit-content;max-width:100%;
  margin:clamp(30px,3.4vw,44px) auto 0;
  padding:5px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  /* Le navigateur ramène de lui-même un élément dans le champ quand il reçoit le
     focus, et il ignore ce que l'en-tête collant recouvre : cliquer un bouton
     placé juste sous la pilule faisait sauter la page d'une vingtaine de pixels,
     si bien qu'un deuxième clic au même endroit tombait à côté. La marge de
     défilement lui donne la hauteur de la pilule à respecter. */
  scroll-margin-top:96px;
}
.accueil-choix button{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;
  padding:11px 20px;border:0;border-radius:999px;
  background:transparent;color:var(--text-muted);
  font-family:var(--texte);font-size:14.5px;font-weight:700;line-height:1.25;
  cursor:pointer;
  /* La couleur du texte suit le curseur au lieu de le précéder : basculer en
     0,16 s sous une pastille qui met trois fois plus longtemps à arriver donne un
     mot clair sur fond clair pendant un quart de seconde. */
  transition:background .16s ease, color .34s ease;
}
/* Pas de voile sur l'étape déjà choisie : le curseur ambre est juste derrière, et
   un second voile ambre par-dessus ne ferait que la salir. */
.accueil-choix button:not([aria-pressed="true"]):hover{background:var(--survol);color:var(--text);}
/* « aria-pressed » et non « aria-selected » : ce sont des boutons de filtre, pas un
   jeu d'onglets. Le motif est déjà celui des rubriques du blog, et il a l'avantage
   de rester honnête quand JavaScript manque — une barre d'onglets qui n'en est pas
   une annoncerait aux lecteurs d'écran des panneaux qu'on ne peut pas commuter. */
.accueil-choix button[aria-pressed="true"]{color:var(--on-accent);}

/* Le fond de l'étape active n'appartient plus au bouton : c'est un élément à part,
   posé derrière les quatre, qui glisse de l'un à l'autre. Peint par le bouton, il
   apparaissait et disparaissait d'un coup — avec un changement toutes les trois
   secondes, la pilule clignotait d'un mot à l'autre au lieu de parcourir le
   chemin. Le glissement rend le trajet lisible : on voit d'où l'on vient.
   Le curseur est créé par le script, jamais écrit dans le balisage : sans
   JavaScript il n'aurait rien à suivre et resterait une tache orange immobile. */
.accueil-curseur{
  position:absolute;top:0;left:0;z-index:0;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 4px 14px rgba(22,35,63,.12);
  pointer-events:none;
  transition:transform .34s cubic-bezier(.22,.61,.36,1),
             width .34s cubic-bezier(.22,.61,.36,1),
             height .34s cubic-bezier(.22,.61,.36,1);
}
/* Au tout premier placement il n'y a pas de position précédente : le curseur
   glisserait depuis le coin haut-gauche de la pilule à l'ouverture de la page. */
.accueil-choix:not(.curseur-pret) .accueil-curseur{transition:none;}
@media (prefers-reduced-motion: reduce){
  .accueil-curseur{transition:none;}
  .accueil-choix button{transition:background .16s ease;}
}
/* Sans script, pas de curseur : l'étape active redevient un bouton peint. */
html:not(.js) .accueil-choix button[aria-pressed="true"]{
  background:var(--accent);
  box-shadow:0 4px 14px rgba(22,35,63,.12);
}

/* ---------- Le sélecteur « Titulaire / Kiné » : où il se pose ------------------
   Ajouté le 18 octobre 2026. Son aspect n'est pas ici : il reprend celui de la
   démonstration, « .univers-comptes », et les règles sont partagées là-bas plutôt
   que recopiées — voir le commentaire qui les précède. Il avait d'abord pris la
   pilule à curseur glissant des quatre temps, « .accueil-choix » ; le porteur a
   demandé l'autre forme le jour même, et elle est plus juste : un curseur qui
   glisse figure un déplacement le long d'un parcours, et l'on ne se déplace pas
   entre deux identités.

   Ne restent ici que les réglages qui tiennent à l'endroit où il est posé — dans
   la grille des cartes, et non dans un conteneur à lui.

   « grid-column » d'abord. Le sélecteur est un enfant de « .cartes » ; sans cette
   ligne il prendrait une cellule et se rangerait à côté d'une carte. « 1 / -1 »
   le fait tenir sur toute la rangée quel que soit le nombre de colonnes — une
   avec script, deux sans — ce qui évite d'avoir à le dire deux fois.

   « justify-self » ensuite, et c'est la conséquence directe de la ligne du dessus.
   « .univers-comptes » est un « inline-flex » posé dans une colonne centrée : il
   prend la largeur de son contenu. Un élément de grille, lui, est étiré par
   défaut — « stretch » — et le même sélecteur ferait 1150 px de large à 1280 px
   de fenêtre, deux pastilles perdues au milieu d'un étui vide. On le recentre
   donc, et il retrouve la largeur de son texte. En dessous de 900 px la règle de
   la démonstration lui donne « width:100% » et ses boutons passent en « flex:1 » :
   l'étui tient alors toute la largeur, les deux boutons se partagent la place, et
   le centrage ne décide plus de rien.

   La marge haute enfin. Elle valait l'écart entre un chapeau et le sélecteur ;
   ici c'est la gouttière de la grille qui tient cet écart, et les deux
   s'ajouteraient.

   Sans script, le sélecteur disparaît. Les deux cartes sont alors dépliées
   l'une sous l'autre et les boutons ne commandent plus rien : les laisser serait
   montrer un commutateur qui ne commute pas. Le sélecteur des quatre temps,
   lui, reste affiché dans le même cas — c'est une incohérence entre les deux, et
   elle est signalée ici plutôt que recopiée. La différence tient à ce qu'il y a
   derrière : quatre volets dépliés gardent une pilule qui dit au moins de quoi la
   section parle, deux cartes dépliées n'ont rien à étiqueter. */
.accueil-choix-cotes{grid-column:1 / -1;justify-self:center;margin-top:0;}
html:not(.js) .accueil-choix-cotes{display:none;}

/* Une seule carte à la fois, donc une seule colonne — sinon la carte ouverte
   occupe la moitié gauche et laisse un vide à droite au-dessus de 880 px. La
   garde « html.js » est ce qui distingue les deux états : sans script les deux
   cartes sont là, et « .cartes.deux » reprend ses droits. */
/* Téléphone seulement (900 px et moins) : sur grand écran, la page reste celle d'avant le 18 octobre 2026. */
@media (max-width:900px){ html.js .accueil-cotes .cartes.deux{grid-template-columns:minmax(0,1fr);} }

/* ---------- Les puces des deux cartes, sur deux colonnes ----------
   Demandé le 18 octobre 2026. La carte ouverte tient maintenant toute la largeur,
   et une colonne de huit puces courtes au milieu de 1 100 px laissait une ligne de
   trois mots suivie de beaucoup de blanc : la liste se lisait comme une suite de
   restes plutôt que comme un inventaire.

   Deux colonnes fixes, et non « repeat(auto-fit, minmax(240px, 1fr)) ». L'essai a
   été fait d'abord, parce qu'il évitait d'écrire un seuil : il en donne quatre à
   1 280 px — la liste y fait 1 085 px, où quatre pistes de 240 tiennent sans
   peine — et quatre colonnes de puces ne sont plus une liste, c'est un nuage
   d'étiquettes. « auto-fit » répond à « autant de colonnes que la place permet »,
   qui n'est pas la question posée ; la question posée est « deux ».

   Le retour à une colonne se fait à 620 px, seuil déjà en service dans la page —
   voir le chapitre 13 — et non à un palier neuf.

   Relevé des deux listes, hauteur à une colonne puis à deux :
                      colonne    Titulaire (8 puces)   Kiné (6 puces)
     à  621 px ......  217 px      302 → 227  (−75)     229 → 237  (+8)
     à  760 px ......  286 px      279 → 156 (−123)     206 → 190  (−16)
     à 1100 px ......  447 px
   À 620 px la liste fait 456 px sur une colonne ; à 390 px, 246 px.

   La ligne à lire est celle du Kiné à 621 px : deux colonnes l'allongent de huit
   pixels au lieu de le raccourcir. Six puces se répartissent en 3 + 3, et deux de
   celles de droite passent à deux lignes dans 217 px alors qu'elles tenaient sur
   une ; le rang le plus haut commande, et la somme y perd. Le seuil est maintenu
   quand même, pour deux raisons : la carte « Titulaire » gagne 75 px au même
   endroit, et huit pixels sur une carte de 229 ne se voient pas. C'est un arbitrage
   et non un résultat, d'où le relevé — si la liste du Kiné s'allonge un jour, c'est
   ici qu'il faudra revenir, et le seuil de 760 px est le repli tout trouvé : à cette
   largeur les deux cartes y gagnent.

   Conséquence à connaître : sur un téléphone, la liste reste sur une colonne. Ce
   n'est pas un oubli de la demande, c'est son seul aboutissement raisonnable. À
   390 px la liste fait 246 px ; deux colonnes en donneraient 111 à chacune, où la
   puce la plus longue — « Mettez en avant vos spécialités (en indiquant si vous en
   avez une principale) », 77 signes — passerait de deux lignes à sept. Les deux
   cartes y seraient plus hautes qu'à une colonne, et non plus seulement l'une des
   deux : on n'obtiendrait ni la compacité ni la lisibilité qu'on vient chercher,
   seulement la forme.

   La gouttière reprend celle de « .aucun-frais », l'autre liste à deux colonnes de
   la page — 13 px entre les rangs, 24 entre les colonnes. L'écart vertical y est
   plus serré que l'horizontal pour qu'on lise en colonnes et non en rangs : à
   gouttières égales, l'œil apparie les puces côte à côte, qui n'ont rien à voir
   l'une avec l'autre.

   « align-items:start » parce que les deux puces d'un même rang n'ont pas le même
   nombre de lignes : étirées, leurs pastilles resteraient alignées mais le texte
   court flotterait au milieu de la hauteur du long. */
@media (max-width:900px){
  .accueil-cotes .carte-liste{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px 24px;align-items:start;
  }
}

/* ---------- Le pictogramme des deux fiches, centré ----------
   Demandé le 18 octobre 2026 : « sur les encarts "vous êtes kiné" et "vous êtes
   titulaire" en haut centrer le pictogramme ». « .carte-icone » est une boîte de
   44 px dans le flux, donc collée à gauche partout ailleurs sur le site ; deux
   marges automatiques suffisent à la centrer sans toucher à sa définition.

   Ne centre que le pictogramme, pas le titre ni la liste qui le suivent — c'est ce
   qui a été demandé, et c'est aussi ce qui se défend : ces deux fiches ne se lisent
   plus l'une à côté de l'autre mais l'une OU l'autre, derrière le sélecteur, et le
   pictogramme y est devenu l'accusé de réception du choix qu'on vient de faire.
   Centré, il se retrouve sous le bouton qu'on a pressé ; à gauche, il désignait le
   coin de la carte. Le texte, lui, reste aligné à gauche parce qu'il se lit.

   Restreint à « .accueil-cotes » : « .carte-icone » sert ailleurs sur l'accueil et
   sur les pages du blog, où les cartes sont bien côte à côte et où le pictogramme
   doit garder son alignement sur le texte.

   Restreint aussi à « html.js », et pour la même raison : sans JavaScript, le
   sélecteur ne masque rien et les deux fiches reviennent côte à côte. Le
   raisonnement du paragraphe précédent — le pictogramme comme accusé de réception
   d'un choix — n'a plus d'objet dans cet état, et un pictogramme centré au-dessus
   d'un texte à gauche n'y serait plus qu'une décoration. Le repli sans script
   retrouve donc l'alignement du reste du site. */
@media (max-width:900px){ html.js .accueil-cotes .carte-icone{margin-left:auto;margin-right:auto;} }
/* Le repli à une colonne sous 620 px a été retiré le 18 octobre 2026, à la
   deuxième demande du porteur — « pourquoi les bullet points ne sont toujours pas
   sur 2 colonnes ». Il avait été posé le matin même sur la foi du relevé ci-dessus.

   Une correction d'abord, parce qu'elle porte sur une phrase écrite ici le matin
   même et qu'elle n'était pas mesurée : il y était dit que les deux cartes
   seraient plus hautes à deux colonnes au téléphone. C'était une prévision, pas un
   relevé, et elle est fausse pour moitié. Mesuré à 390 px, colonnes de 118 px,
   gouttières ramenées à 11 / 10 :
     · Titulaire (8 puces) .... 320 → 311  (−9)
     · Kiné (6 puces) ......... 323 → 365  (+42)
   La carte du Kiné s'allonge donc bel et bien, celle du Titulaire non. La règle
   des nombres mesurés vaut aussi pour les nombres qui servent à refuser quelque
   chose, et c'est précisément là qu'on est tenté de s'en passer.

   Le reste du relevé tient : à 118 px, la puce la plus longue de la carte du
   Titulaire passe de deux lignes à sept. Deux colonnes au téléphone coûtent donc
   de la lisibilité, et de la hauteur sur une des deux cartes. Elles sont posées
   quand même : ce qu'on mesure ici est la hauteur, ce que le porteur arbitre est
   la forme, et il a redemandé la même chose après avoir vu le résultat et lu le
   coût. La gouttière horizontale tombe à 10 px pour rendre aux mots une partie de
   ce que la seconde colonne leur prend — c'est tout ce que la mise en page peut
   faire. Si la lecture au téléphone redevient le sujet, c'est le corps des puces
   qu'il faudra reprendre, ou le texte lui-même : « Mettez en avant vos spécialités
   (en indiquant si vous en avez une principale) » fait 77 signes, et aucune
   gouttière ne rattrape cela dans 118 px. */
@media (max-width:620px){
  .accueil-cotes .carte-liste{gap:11px 10px;}
}
/* Sans script, retour à une colonne quelle que soit la largeur, et le seuil de
   620 px ne suffisait pas à l'obtenir. C'est le cas qu'on oublie : sans script le
   sélecteur disparaît et les deux cartes reviennent côte à côte, si bien que la
   largeur de la fenêtre ne dit plus rien de la largeur d'une liste. Mesuré à
   1 000 px sans script — deux cartes de 434 px, listes de 368 — la règle du dessus
   donnait quatre colonnes de 172 px en travers de la page, et pour rien : la carte
   « Titulaire » y gagnait 28 px de haut (302 → 274) et celle du Kiné en perdait
   huit (276 → 284), pour des puces deux fois plus étroites.

   Une colonne par carte est d'ailleurs la bonne réponse et pas seulement la moins
   mauvaise : la page montre déjà deux colonnes à cet endroit, ce sont les deux
   cartes. En subdiviser chacune reviendrait à répondre à la demande du porteur au
   mauvais niveau — il a demandé deux colonnes de puces dans une carte qu'on lit
   seule, pas quatre colonnes de puces dans une page qu'on lit entière. */
html:not(.js) .accueil-cotes .carte-liste{grid-template-columns:minmax(0,1fr);}

.accueil-volet{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(30px,3.6vw,56px);align-items:center;
  margin-top:clamp(32px,3.8vw,52px);
  scroll-margin-top:110px;
}
/* Sans JavaScript, les quatre volets restent l'un sous l'autre : le contenu est
   entier pour un moteur de recherche comme pour un visiteur sans script, et la
   page ne dépend du sélecteur que pour son confort. */
html.js .accueil-volet[hidden]{display:none;}
.accueil-volet > :last-child{min-width:0;}
.accueil-volet h3{font-size:clamp(23px,2.5vw,30px);}
.accueil-volet .chapeau{margin-top:14px;}
/* La grille des outils est réglée sur la largeur de la fenêtre dans la feuille
   principale, où elle occupe toute la page : trois colonnes jusqu'à 880 px. Ici
   elle tient dans une demi-largeur, et ses points de rupture ne voient pas que la
   place a été prise par le texte d'à côté — à 1512 px on obtiendrait trois colonnes
   de 190 px, c'est-à-dire « Prescription d'exercice » sur trois lignes.

   La marge haute de quarante-quatre pixels est annulée du même coup. Elle sert dans la
   feuille principale, où la grille suit un paragraphe ; ici la grille est une case de
   grille centrée en face du texte, et cette marge la décalait de quarante-quatre pixels
   vers le bas sans rien séparer — elle ne faisait que décentrer.

   Neuf catégories dans deux colonnes laissent la dernière seule sur sa ligne, et on la
   laisse seule. L'étendre sur toute la largeur mettrait « Mutuelle » en vedette, ce qui
   est le contraire de ce qu'on dit — ces neuf-là sont au même rang. C'est une liste qui
   revient à la ligne, pas un tableau dont il manquerait une case. En dessous de 1100 px
   le volet n'a plus qu'une colonne, la grille en retrouve trois, et les neuf tombent en
   un carré parfait sans qu'on ait rien à demander.

   Dix-huit octobre 2026. Il y avait ici une quatrième requête, « sous 520 px, une
   colonne », et elle ne servait plus à rien depuis qu'un chapitre plus bas dans cette
   même feuille en décidait autrement — d'abord deux colonnes, maintenant un rouleau
   horizontal. Une règle morte n'est pas inoffensive : le prochain qui lit ce passage
   croit avoir trouvé le réglage du téléphone, le change, et ne voit rien bouger. Elle
   est donc supprimée plutôt que corrigée, et la série s'arrête à 880. Tout ce qui
   concerne le téléphone est au chapitre « Les neuf outils, en rouleau horizontal ». */
.accueil-volet .outils{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0;}
@media (max-width:1100px){
  .accueil-volet .outils{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:880px){
  .accueil-volet .outils{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------- Le téléphone du premier temps ----------
   Le châssis est celui du hero, repris tel quel : mêmes cotes d'appareil, même
   tranche de métal, même dalle. Rien n'est redessiné ici, et c'est voulu — un
   second téléphone écrit à la main dériverait du premier à la première retouche.
   Trois choses seulement le gênaient.

   La première est sa position : « .cadre-tel » est posé en absolu sur le coin de
   l'écran d'ordinateur du hero. Seul dans sa colonne, il flotterait hors du flux
   et le volet s'effondrerait sur la hauteur du texte d'à côté.

   La deuxième est sa silhouette, et c'est elle qui faisait l'appareil trop long.
   L'application est posée en 412 × 880, ce qui est déjà une dalle entière ; or la
   barre d'état et la barre d'accueil sont empilées **autour** d'elle et non par-
   dessus — c'est le choix du hero, et il est bon, puisque les écrans relevés
   portent leur propre en-tête collé au bord. La dalle finissait donc à 412 × 962
   et le boîtier à 2,25 de rapport, contre 2,07 sur un vrai téléphone. Neuf pour
   cent de trop : assez peu pour qu'on ne sache pas quoi nommer, assez pour qu'on
   voie que l'objet n'en est pas un.
   On corrige par la largeur et non par la hauteur. Raccourcir l'application de
   la hauteur des deux bandes rétablissait bien le rapport, mais rognait la fiche
   du fil à quelques pixels sous son bouton — un téléphone juste qui montre un
   écran coupé. Élargie à 450, l'application rend les mêmes 2,07 au boîtier et
   2,14 à la dalle, et la fiche retrouve soixante pixels d'air sous elle : la
   largeur rendue lui profite deux fois, en place et en hauteur de texte.

   La troisième est l'échelle, et le critère n'est pas celui qu'on croit. On a
   d'abord réglé l'appareil à sa taille réelle — 450 points font environ 7 cm,
   soit un zoom de .59 sur un écran de bureau ordinaire. Grandeur nature, et
   pourtant faux : à côté d'un texte haut de 294 pixels, le téléphone en faisait
   584, deux fois le bloc qu'il est censé illustrer. Ce qui gouverne ici n'est pas
   la main du lecteur mais la colonne d'à côté ; une figure doit dépasser son
   paragraphe sans l'avaler. À .46 l'appareil tombe à 470 pixels, une fois et
   demie le texte : il domine encore la colonne, ce qui est son rôle, mais on lit
   la page avant de regarder l'objet. */
.accueil-tel{display:flex;justify-content:center;--tel:.46;}
/* Le cadre est posé en absolu dans le hero, où il déborde volontairement d'une
   bande. Ici il est seul dans sa colonne et doit la suivre : « static » défait
   l'absolu, et les deux décalages tombent d'eux-mêmes avec lui. */
.accueil-tel .cadre-tel{position:static;}
/* Trois crans de spécificité pour passer devant « .cadre-tel .appli », qui fixe
   les cotes et l'échelle du hero dans la feuille principale, et les réduit encore
   en dessous de 1020 px — une largeur de fenêtre qui ne dit rien de la place
   disponible ici, puisque le volet passe à une seule colonne bien avant. */
.accueil-tel .cadre-tel .appli{width:450px;height:880px;--appli-l:450px;--appli-h:880px;--appli-z:.46;}
/* À partir d'une colonne, le téléphone a toute la largeur de la page : il peut
   grandir d'un cinquième sans écraser le texte, qui est au-dessus et non plus à
   côté. Il redescend dans les fenêtres étroites, où il toucherait les deux bords.
   Les trois crans gardent l'écart qu'ils avaient avant la réduction — un cinquième
   puis un septième — pour que le passage d'un palier à l'autre reste un ajustement
   et ne se voie pas comme un saut. */
@media (max-width:880px){
  .accueil-tel{--tel:.55;}
  .accueil-tel .cadre-tel .appli{--appli-z:.55;}
}
@media (max-width:420px){
  .accueil-tel{--tel:.47;}
  .accueil-tel .cadre-tel .appli{--appli-z:.47;}
}

/* ---------- Le kinôme, au bout du balayage ----------
   Le fil seul racontait la moitié de la chose : on écarte, on retient, on écarte — et
   rien n'arrive jamais. Or ce que le produit promet n'est pas de balayer, c'est de
   tomber sur quelqu'un. L'écran du kinôme est donc posé derrière le fil, sur un rail à
   deux vues, et le voile du produit le dévoile.

   **Rien n'est redessiné.** L'écran relevé est celui du téléphone du hero, le voile et
   son logo viennent de « jouerIntroMatch », et les quatre mouvements reprennent une à
   une les étapes et les courbes que l'application écrit pour eux — elles sont
   commentées en détail dans kinome.css, au-dessus de « @keyframes kinome-voile ». Ce
   qui change ici, et seul, est l'horloge.

   ---- pourquoi dix-huit secondes ----
   Le fil dure neuf secondes et montre trois fiches : écartée à 2 s, retenue à 5 s,
   retenue à 8 s. Un kinôme à chaque tour en ferait une formalité — trois profils, un
   kinôme, et le produit aurait l'air de distribuer des rendez-vous. Un kinôme tous les
   deux tours laisse passer deux « retenu » sans suite avant celui qui aboutit, ce qui
   est la proportion honnête et, accessoirement, la seule qui rende le dévoilement
   intéressant. D'où dix-huit secondes, soit exactement deux tours.

   « Exactement » est ce qui fait tenir le reste. Dix-huit étant un multiple de neuf, le
   retard de l'appareil — « --decalage:-8s », hérité de « .cadre-tel » — décale les deux
   horloges du même nombre de tours, et la position p de ce cycle-ci tombe toujours sur
   la position « p modulo 9 » du fil. Les pourcentages ci-dessous se lisent donc
   directement comme des instants du fil, sans correction : 47,278 % valent 8,51 s, et
   8,51 s du fil sont bien une demi-seconde après le « retenu » de 8,01 s. Une durée qui
   ne serait pas un multiple de neuf ferait glisser le kinôme d'un tour à l'autre
   jusqu'à tomber sur un refus.

   ---- l'ordre des cinq gestes ----
   Une demi-seconde sépare le « retenu » du voile, et elle n'est pas de confort : c'est
   le temps qu'il faut pour que le bouton s'allume et que la fiche commence à s'envoler.
   Le voile levé sur le battement même du bouton aurait escamoté le geste qui déclenche
   le kinôme, c'est-à-dire sa cause.
     8,01 s  le bouton « retenu » s'allume, la fiche à 86 % part — c'est elle que
             l'écran du kinôme nomme, et ce n'est pas un hasard : la plus compatible des
             trois est celle qui aboutit.
     8,51 s  le voile monte (0,22 s)
     8,80 s  le rail glisse vers l'écran du kinôme — sous un voile plein, donc invisible
     9,30 s  le rail est arrivé
     9,45 s  l'arc se trace, l'aiguille balaie
    10,15 s  l'arc est bouclé, l'onde s'échappe du moyeu
    10,50 s  l'aiguille se pose
    11,00 s  le voile se retire (0,45 s)
    11,45 s  l'écran du kinôme est nu, et le reste 2,75 s
    14,20 s  le rail revient au fil (0,5 s)

   Les trois gestes du logo attendent que le rail soit arrivé, et cette attente est tout
   l'objet du réglage. Calqués sur le hero, ils partaient à 8,61 s : l'arc achevait son
   tracé à 9,23 s, c'est-à-dire avant que le rail n'ait fini d'amener l'écran à 9,30 s.
   Le geste se jouait donc intégralement hors cadre, et le voile entrait avec son arc
   déjà plein — on perdait le seul mouvement qui porte la marque. Le hero peut se le
   permettre, lui dont le volet entier est déjà en place quand le voile monte ; ici le
   voile voyage, et ce qui voyage ne peut pas se donner en spectacle pendant le trajet.
   D'où les 0,15 s de battement après l'arrivée : de quoi laisser l'œil se poser sur
   l'écran avant qu'il n'y commence quelque chose.

   Le voile reste ensuite une demi-seconde après l'onde. Se retirer sur le dernier geste
   aurait donné deux mouvements simultanés — le logo qui finit, le voile qui s'ouvre —
   là où la lecture demande qu'ils se succèdent. Le temps d'écran nu, lui, ne bouge pas :
   2,75 s, c'est la durée qu'il faut pour lire « Nouveau kinôme » et le nom du cabinet,
   et c'est la raison d'être de toute la séquence. Le retour du rail a donc été repoussé
   d'autant plutôt que pris sur elle.

   Ce dernier glissement-là se voit, et c'est le seul des cinq qui ne soit pas calqué
   sur le hero — qui, lui, fait son retour hors cadre. Il est pourtant juste : revenir
   au fil est ce que fait la personne qui vient de lire son kinôme et choisit
   « Continuer à explorer ». Le cacher aurait demandé un second voile, c'est-à-dire un
   geste que le produit n'a pas, pour dissimuler un mouvement qu'il a. */
.accueil-tel .appli .navigation > .nav-vue{
  animation:accueil-kinome-rail 18s cubic-bezier(.76,0,.24,1) var(--decalage, 0s) infinite;
}
@keyframes accueil-kinome-rail{
  0%,48.889%      {transform:translateX(0);}
  51.667%,78.889% {transform:translateX(-100%);}
  81.667%,100%    {transform:translateX(0);}
}
/* Le repos à opacité nulle est déclaré sur l'élément, et c'est ce qui rend l'ensemble
   sûr. Le voile de l'application compte sur « animation-fill-mode: both » pour être
   invisible avant son heure ; adossée à un cycle de dix-huit secondes, cette ruse
   laisserait l'écran couvert la moitié du temps. Pire : la feuille de l'application lui
   donne un fond plein et « inset:0 », de sorte qu'un voile dont l'animation ne prend
   pas — mouvement réduit, par exemple — masque le téléphone entier. On déclare donc
   l'état de repos, et les étapes n'ont plus qu'à ouvrir leur fenêtre. */
.accueil-tel .appli .match-intro{
  opacity:0;
  animation:accueil-kinome-voile 18s linear var(--decalage, 0s) infinite;
}
.accueil-tel .appli .mi-arc{
  animation:accueil-kinome-trace 18s linear var(--decalage, 0s) infinite;
}
.accueil-tel .appli .mi-needle{
  animation:accueil-kinome-aiguille 18s linear var(--decalage, 0s) infinite;
}
.accueil-tel .appli .mi-onde{
  animation:accueil-kinome-onde 18s linear var(--decalage, 0s) infinite;
}

/* « linear » sur le raccourci, et les vraies courbes posées étape par étape : une
   fonction de transition s'applique à chaque intervalle, y compris aux quinze secondes
   de plat où il ne se passe rien. Les étapes qui portent une courbe sont celles d'où
   part un mouvement du produit, et ce sont les mêmes courbes qu'au produit. */
@keyframes accueil-kinome-voile{
  0%,47.278%      {opacity:0;transform:none;animation-timing-function:ease-out;}
  48.500%         {opacity:1;}
  61.111%         {opacity:1;transform:none;animation-timing-function:ease-in;}
  63.611%         {opacity:0;transform:scale(1.07);}
  63.612%,100%    {opacity:0;transform:none;}
}
@keyframes accueil-kinome-trace{
  0%,52.500%      {stroke-dashoffset:70;animation-timing-function:cubic-bezier(.33,1,.68,1);}
  56.389%,100%    {stroke-dashoffset:0;}
}
@keyframes accueil-kinome-aiguille{
  0%,52.500%      {transform:rotate(-52deg);animation-timing-function:cubic-bezier(.34,1.32,.64,1);}
  54.944%         {transform:rotate(46deg);animation-timing-function:cubic-bezier(.34,1.32,.64,1);}
  56.722%         {transform:rotate(-31deg);animation-timing-function:cubic-bezier(.34,1.32,.64,1);}
  58.333%,100%    {transform:rotate(-20deg);}
}
@keyframes accueil-kinome-onde{
  0%,56.389%      {transform:scale(.45);opacity:0;animation-timing-function:cubic-bezier(.22,1,.36,1);}
  57.444%         {opacity:.55;animation-timing-function:cubic-bezier(.22,1,.36,1);}
  61.111%,100%    {transform:scale(4.4);opacity:0;}
}

/* L'extinction est ici et non dans kinome.css, et il y a une raison de cascade à cela :
   les règles qu'elle éteint sont dans ce fichier-ci, qui est chargé en dernier. Une
   extinction écrite là-bas, à spécificité égale, serait passée derrière elles sans
   rien éteindre du tout.

   Les cinq sélecteurs reprennent exactement ceux qui animent — c'est la leçon écrite en
   toutes lettres dans le bloc jumeau de kinome.css : affiner un sélecteur d'animation
   oblige à affiner son extinction du même coup. Il faut y ajouter le rail, que le
   sélecteur générique de kinome.css (« .appli .navigation > .nav-vue », trois classes)
   n'atteint plus depuis que celui qui l'anime ici en compte quatre.

   Rien n'est à reposer : le rail sans animation montre sa vue de rang 0, qui est le
   fil, et le voile sans animation reste à l'opacité nulle déclarée plus haut. Le
   visiteur qui refuse le mouvement obtient donc le téléphone sur l'écran de découverte,
   fiche et boutons en place — ce qu'on aurait choisi pour une image fixe. */
@media (prefers-reduced-motion: reduce){
  .accueil-tel .appli .navigation > .nav-vue,
  .accueil-tel .appli .match-intro,
  .accueil-tel .appli .mi-arc,
  .accueil-tel .appli .mi-needle,
  .accueil-tel .appli .mi-onde{animation:none;}
}

/* ---------- L'ordinateur du deuxième temps ----------
   Même principe que le téléphone du premier : le châssis est celui du hero, repris
   pièce par pièce, et seules l'échelle, la place et l'horloge sont refaites ici.

   ---- la place, et pourquoi le texte passe à droite ----
   Le premier temps met le texte à gauche et l'appareil à droite ; celui-ci fait
   l'inverse. Ce n'est pas une variation gratuite : deux volets qui se succèdent dans
   le même cadre, avec la même colonne illustrée, se confondent — on ne voit plus
   l'étape changer, on voit l'image changer. En alternant, le passage d'un temps à
   l'autre devient un mouvement de toute la page, et c'est précisément ce que le
   sélecteur a du mal à faire voir tout seul.

   Le texte reste pourtant le premier enfant du balisage, et c'est « order » qui le
   renvoie à droite. Replié en une colonne, le volet doit donner la phrase avant
   l'image — la règle est écrite au seuil de 1100 px, où la grille s'effondre, et elle
   vaut pour les quatre temps. Inverser le balisage l'aurait cassée pour celui-ci seul,
   et l'aurait cassée aussi pour qui lit la page sans feuille de style.

   ---- l'échelle, et les deux crans qu'elle demande ----
   Le châssis mesure **1 590 fois son échelle** : 1512 de dalle, 36 de lunette
   latérale, 42 de débord de socle. Toute la question est donc la largeur de la
   colonne, et elle a été relevée et non estimée — l'estimation donnait 620 px, la
   mesure en donne 567 à 1440 px de fenêtre. L'écart vient de l'encart qui porte le
   parcours : « .accueil-bloc » prend jusqu'à 58 px de chaque côté, en plus des 20 de
   l'enveloppe, et ce sont eux qu'on oublie en comptant sur « --largeur ».

   Le rapport des deux colonnes est donc passé de .92/1 à 1/1,15 en faveur de
   l'illustration. Une machine est un objet couché quand un téléphone est un objet
   debout : à hauteur égale elle demande deux fois plus de largeur, et le texte de ce
   temps-ci est le plus court des quatre — c'est lui qui peut céder la place.

   Restent deux crans, et c'est un de plus que le téléphone. En deux colonnes, la
   colonne de l'illustration va de 494 px — juste au-dessus du seuil de repli — à
   573 px sur les pages larges, soit un sixième d'écart sur la même mise en page. Un
   réglage unique devrait tenir dans le plus petit des deux et laisserait quarante
   pixels de vide de chaque côté dans le plus grand. On pose donc .31, qui remplit la
   colonne étroite au pixel près, et .34 au-delà de 1280 px, où la colonne a fini de
   s'ouvrir. Le cran ne déplace rien — la machine grandit sur place — et ce n'est pas
   un point de rupture de plus au sens de la mise en page : aucune grille n'y change.

   Replié en une colonne, le volet a toute la largeur et la machine remonte à .50 —
   pas au-delà : plus grande que dans le hero, elle ferait croire à un second
   produit. */
.accueil-volet.confiance{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}
.accueil-volet.confiance > :first-child{order:2;}
.accueil-ordi{
  display:flex;justify-content:center;
  --chassis:.31;
  /* « --socle-debord » est posé sur « .scene » dans la feuille principale, où il est
     la seule pièce qui sorte de sa propre boîte. Il se repose ici parce que cette
     scène-ci n'existe pas : sans lui, « calc(100% + var(--socle-debord)) » tombe en
     invalide et le socle perd son assise. */
  --socle-debord:calc(42px * var(--chassis));
}
/* Le socle fait « 100 % + débord » de la largeur du cadre, et le cadre, en enfant de
   grille, s'étire sur toute la colonne : sans cette mesure il dépasserait de la
   machine d'une centaine de pixels. Le hero s'en passe parce que « .scene » est déjà
   en « width:fit-content ». */
.accueil-ordi .cadre-ordi{width:fit-content;}
/* Trois crans pour passer devant « .cadre-ordi .appli », qui fixe l'échelle du hero
   dans la feuille principale et la réduit encore en dessous de 1020 px — une largeur
   de fenêtre qui ne dit rien de la place disponible ici, puisque le volet passe à une
   seule colonne bien avant. */
.accueil-ordi .cadre-ordi .appli{width:1512px;height:893px;--appli-l:1512px;--appli-h:893px;--appli-z:.31;}
@media (min-width:1280px){
  .accueil-ordi{--chassis:.34;}
  .accueil-ordi .cadre-ordi .appli{--appli-z:.34;}
}
/* Le repli en une colonne est écrit au chapitre des rétrécissements, sur
   « .accueil-volet » — une classe. La règle ci-dessus en compte deux, et elle est
   donc passée devant lui : le volet gardait ses deux colonnes jusqu'en bas, la
   machine se retrouvait dans une colonne de 400 px à l'échelle d'une pleine page, et
   la page entière défilait sur le côté. On repose donc le repli au même poids, et
   c'est la contrepartie de tout réglage de grille écrit sur un volet nommé :
   **ce qui est dit pour un volet doit être défait pour ce volet.** */
@media (max-width:1100px){
  .accueil-volet.confiance{grid-template-columns:1fr;}
  .accueil-volet.confiance > :first-child{order:0;}
  .accueil-ordi{--chassis:.50;}
  .accueil-ordi .cadre-ordi .appli{--appli-z:.50;}
}
/* ---------- L'ordinateur reste, même sur un téléphone ----------
   Jusqu'au 18 octobre 2026, cette ligne était « @media (max-width:900px){
   .accueil-ordi{display:none;} } », et la feuille principale en faisait autant sur
   « .cadre-ordi ». Le deuxième temps se repliait donc sur son texte seul : sur un
   téléphone, « Échanger » était le seul des quatre volets à ne rien montrer.

   La raison invoquée était bonne et reste vraie — l'application garde une bascule
   « fenêtre étroite » qui, sous 720 px de **page**, retire le rail du format bureau et
   lui rend la barre du bas. La requête média d'app.css mesure la fenêtre du navigateur,
   pas le cadre de 1512 px dans lequel la machine est dessinée : sous 720 px on verrait
   une barre de téléphone à l'intérieur d'une fenêtre d'ordinateur, un écran que le
   produit ne montre jamais.

   Mais cacher l'ordinateur n'était pas la seule façon de ne pas voir la bascule : on
   peut aussi la défaire. Elle ne tient qu'à trois déclarations — le rail qui s'éteint,
   la fenêtre qui passe en colonne, la vue qui perd sa largeur et ses filets — et toutes
   les trois sont écrites sur « .appli[data-format="bureau"] », deux classes et un
   attribut. Un cran de plus suffit à passer devant, et c'est très exactement la méthode
   que cette feuille emploie déjà trois fois plus haut. On ne touche donc pas à app.css,
   qui est régénéré : on écrit ici, pour ce cadre-ci, ce que la machine doit rester.

   Les sept autres déclarations de ce même « @media » d'app.css ne sont pas reprises —
   barre du bas, barre du haut, rangée de vues, flèches de retour, boutons d'icône,
   gouttière de la pile de fiches, étiquette de maquette. Vérifié : aucune des classes
   qu'elles visent n'existe dans la capture de ce volet, qui ne contient qu'un rail et
   une vue. Les reprendre « au cas où » aurait rendu la correction impossible à relire.

   Reste l'échelle, et elle demande une échelle par palier plutôt qu'un réglage. La
   machine mesure 1550 × --chassis de large, mesuré à deux échelles pour s'en assurer
   (.24 → 372 px, .19 → 294). La colonne, elle, vaut « largeur de page − 42 − deux fois
   la gouttière du pavé », cette gouttière étant elle-même en « clamp(18px,4.5vw,28px) ».
   Les deux courbes ne sont pas parallèles : un seul palier large laisse donc la machine
   soit perdue au milieu du vide en haut de l'intervalle, soit débordante en bas.

   Le premier essai en faisait deux — .24 puis .19 — et il était faux aux deux bouts.
   À 900 px la machine remplissait 46 % de sa colonne, ce qui ne se lit plus comme une
   illustration mais comme une vignette oubliée ; à 320 px elle mesurait 294 px pour
   242 de colonne et traversait le bord arrondi du pavé de huit pixels de chaque côté.
   Elle ne faisait pas défiler la page de côté, et c'est le piège : les gouttières de
   la page absorbaient le débord, si bien que la mesure de débordement restait à zéro
   pendant que le défaut, lui, se voyait.

   Six paliers, donc, tous pris dans les seuils déjà en service — 900, 760, 620, 520,
   420, 380. Chacun porte l'échelle qui tient à l'**extrémité basse** de son intervalle,
   puisque c'est là que la colonne est la plus étroite ; le remplissage va de 71 % à
   99 % selon l'endroit, ce qui est l'amplitude normale d'un escalier à six marches et
   reste très au-dessus de ce qu'un palier unique pouvait donner.

   À 390 px la machine fait 295 px pour 312 de colonne. L'écran y est illisible, et
   c'est assumé — à cette taille l'ordinateur n'est plus une démonstration mais une
   silhouette, et ce qu'elle dit (« ça marche aussi sur un ordinateur ») est justement
   ce que le téléphone seul ne disait pas. */
@media (max-width:900px){
  .accueil-ordi{--chassis:.42;}
  .accueil-ordi .cadre-ordi{display:flex;}
  .accueil-ordi .cadre-ordi .appli{--appli-z:.42;}
  .accueil-ordi .appli[data-format="bureau"] .rail:not(:empty){display:block;}
  .accueil-ordi .appli[data-format="bureau"] .phone{flex-direction:row;}
  .accueil-ordi .appli[data-format="bureau"] .screen{
    max-width:720px;
    border-inline:1px solid var(--border);
  }
}
@media (max-width:760px){ .accueil-ordi{--chassis:.33;}  .accueil-ordi .cadre-ordi .appli{--appli-z:.33;} }
@media (max-width:620px){ .accueil-ordi{--chassis:.27;}  .accueil-ordi .cadre-ordi .appli{--appli-z:.27;} }
@media (max-width:520px){ .accueil-ordi{--chassis:.21;}  .accueil-ordi .cadre-ordi .appli{--appli-z:.21;} }
@media (max-width:420px){ .accueil-ordi{--chassis:.19;}  .accueil-ordi .cadre-ordi .appli{--appli-z:.19;} }
@media (max-width:380px){ .accueil-ordi{--chassis:.155;} .accueil-ordi .cadre-ordi .appli{--appli-z:.155;} }

/* ---------- Les six écrans, et leur horloge ----------
   Le rail raconte le parcours dans l'ordre : le kinôme qui se crée, la discussion qui
   s'ouvre, le retour à la liste, une seconde discussion où le CV part, le CV choisi
   sur le poste, l'envoi fait et le dossier ouvert dessous.

   La feuille principale ne pose que les rangs 0 à 3 — le fil de la démonstration n'a
   jamais eu besoin de plus. Les deux crans suivants sont déclarés ici, et seulement
   pour cet ordinateur-ci : ils appartiennent à ce volet, pas au système.

   Deux secondes et demie par écran. C'était trois quand ils étaient quatre, et il a
   fallu rogner : six écrans à trois secondes font dix-huit secondes, et personne ne
   reste dix-huit secondes sur une étape qui en dure quatre. Deux et demie sont
   assez — on ne lit pas ces écrans, on les reconnaît.

   Quinze secondes restent plus long que les six que le sélecteur laisse à chaque
   étape, et c'est assumé. Le volet est caché par « hidden », donc en « display:none »,
   donc ses animations repartent de zéro à chaque ouverture, et le découpage tombe
   juste :

     — six secondes, celui qui laisse le parcours défiler. Il voit les trois premiers
       écrans — le kinôme qui se crée, la discussion qui s'ouvre et s'anime, le retour
       à la liste —, c'est-à-dire la première phrase du texte d'à côté exactement
       illustrée, et la preuve qu'il y a plusieurs discussions derrière.
     — neuf secondes, celui qui clique sur « Échanger ». Il atteint la seconde
       discussion et y voit le CV partir en pièce jointe, ce qui est le mot de la
       deuxième phrase.
     — quinze, celui qui s'arrête. Lui seul voit l'envoi depuis le poste et le dossier
       de recrutement.

   C'est le bon partage : une démonstration doit récompenser l'attention, pas l'exiger.

   Le retour au premier écran est une coupe et non un glissement, à l'inverse de la
   version à quatre écrans. Rembobiner cinq cadres en un demi-temps ne se lit plus
   comme « on recommence », cela se lit comme un sursaut. La coupe, elle, tombe sur le
   point de bouclage : l'écran de rang 0 est à sa place pendant le dernier demi-temps,
   puis la boucle repart et l'y laisse — la couture ne se voit pas. */
.accueil-ordi .appli .navigation > .nav-rang-4{left:400%;}
.accueil-ordi .appli .navigation > .nav-rang-5{left:500%;}
.accueil-ordi .appli .navigation > .nav-vue{
  animation:accueil-bureau-rail 15s cubic-bezier(.76,0,.24,1) infinite;
}
@keyframes accueil-bureau-rail{
  0%,     13.333% {transform:translateX(0);}
  16.667%,30%     {transform:translateX(-100%);}
  33.333%,46.667% {transform:translateX(-200%);}
  50%,    63.333% {transform:translateX(-300%);}
  66.667%,80%     {transform:translateX(-400%);}
  83.333%,96.666% {transform:translateX(-500%);}
  96.667%,100%    {transform:translateX(0);}
}
/* Le voile du kinôme reste baissé, et c'est délibéré.

   L'écran de rang 0 est celui que l'application dévoile : il arrive sous un voile plein
   que le logo traverse, et « .match-intro » est ce voile. Sa feuille d'origine le
   déclare au repos à opacité nulle, mais sous « .demo » — l'ordinateur de ce volet n'est
   pas dans la démonstration, et sans ce repos le voile reste opaque, « inset:0 », fond
   plein, par-dessus le kinôme : on ne voit plus que lui. Le repos est donc redéclaré
   ici, exactement comme il l'est pour le téléphone du premier temps.

   Ce qui n'est pas redéclaré, c'est la chorégraphie. Le téléphone du premier temps joue
   déjà ce dévoilement en entier, et il le joue mieux : chez lui le kinôme arrive au bout
   d'un balayage, donc avec sa cause. Le refaire deux secondes plus bas, dans un cadre
   trois fois plus petit, serait redire la même phrase moins bien. Il faudrait en plus de
   la place : le geste du produit dure près de trois secondes avant que l'écran ne soit
   nu, et cet écran-ci n'en a que deux et demie en tout.

   Les trois mouvements du logo — arc, aiguille, onde — sont laissés tels quels : ils
   sont à l'intérieur du voile, et un voile à opacité nulle n'a plus d'intérieur. */
.accueil-ordi .appli .match-intro{opacity:0;}

/* Les deux conversations finissent d'arriver pendant qu'on les regarde, et pas avant.
   La feuille principale anime déjà celle de rang 1, sur l'horloge de trente-six
   secondes du hero : laissée telle quelle, elle la jouerait deux fois par tour de
   rail, dont une fois hors du cadre. On refait donc leurs étapes sur quinze secondes.

   Ce qui monte n'est pas la même chose dans les deux. Rang 1, ce sont les deux
   dernières répliques d'Antoine : la discussion qui s'anime, soit « avoir un échange
   de deux ou trois messages ». Rang 3, c'est la pièce jointe puis la réponse qui en
   accuse réception — le CV qui part dans le fil, qui est ce que le parcours demande
   là, et que personne n'a eu à dessiner puisque le relevé le contenait déjà.

   L'arithmétique est la même des deux côtés, décalée d'un cran : un écran de rang n
   est à l'affiche de 2,5 n à 2,5 n + 2 secondes. Les répliques montent un cinquième de
   seconde après l'arrivée, et s'effacent une seconde après le départ — donc hors du
   cadre. Les rallumer plus tôt se verrait au retour du rail ; plus tard, elles
   seraient encore là quand l'écran revient. L'effacement est une coupe, pour la même
   raison : à cet instant l'écran est ailleurs, un fondu n'y serait dépensé pour
   personne.

   Le repos est déclaré sur l'élément et non laissé à « animation-fill-mode » : la
   seconde réplique a un retard, et pendant ce retard une bulle sans état de repos
   s'affiche en clair avant de disparaître pour monter à nouveau. */
.accueil-ordi .appli .navigation > .nav-rang-1[data-ecran="conversation"] .scroll > :nth-last-child(2),
.accueil-ordi .appli .navigation > .nav-rang-1[data-ecran="conversation"] .scroll > :last-child{
  opacity:0;transform:translateY(9px);
  animation:accueil-bureau-message 15s ease-out infinite;
}
.accueil-ordi .appli .navigation > .nav-rang-3[data-ecran="conversation"] .scroll > :nth-last-child(2),
.accueil-ordi .appli .navigation > .nav-rang-3[data-ecran="conversation"] .scroll > :last-child{
  opacity:0;transform:translateY(9px);
  animation:accueil-bureau-piece 15s ease-out infinite;
}
.accueil-ordi .appli .navigation > .nav-rang-1[data-ecran="conversation"] .scroll > :last-child,
.accueil-ordi .appli .navigation > .nav-rang-3[data-ecran="conversation"] .scroll > :last-child{
  animation-delay:.7s;
}
/* Rang 1 : à l'affiche de 2,5 s à 4,5 s. */
@keyframes accueil-bureau-message{
  0%,     17.333% {opacity:0;transform:translateY(9px);}
  20%,    35.999% {opacity:1;transform:none;}
  36%,    100%    {opacity:0;transform:translateY(9px);}
}
/* Rang 3 : à l'affiche de 7,5 s à 9,5 s. */
@keyframes accueil-bureau-piece{
  0%,     50.666% {opacity:0;transform:translateY(9px);}
  53.333%,69.332% {opacity:1;transform:none;}
  69.333%,100%    {opacity:0;transform:translateY(9px);}
}

/* L'extinction est ici pour la même raison de cascade que celle du téléphone, et les
   sélecteurs reprennent exactement ceux qui animent : les règles ci-dessus comptent un
   cran de plus que celles de kinome.css qu'elles remplacent, donc un cran de plus que
   l'extinction de kinome.css, qui a cessé de les atteindre du même coup.

   Le rail n'a rien à reposer — sans animation il montre sa vue de rang 0, qui est le
   kinôme qui vient de se créer, et c'est l'écran qu'on aurait choisi pour une image
   fixe : il porte le titre du volet. Les quatre bulles, elles, le demandent : leur
   état de repos est l'invisibilité, et une conversation amputée de ses deux dernières
   répliques n'est pas une image fixe, c'est un écran tronqué — à plus forte raison
   celle de rang 3, dont la pièce jointe est justement le sujet. On les rallume donc en
   même temps qu'on les arrête. */
@media (prefers-reduced-motion: reduce){
  .accueil-ordi .appli .navigation > .nav-vue{animation:none;}
  .accueil-ordi .appli .navigation > .nav-rang-1[data-ecran="conversation"] .scroll > :nth-last-child(2),
  .accueil-ordi .appli .navigation > .nav-rang-1[data-ecran="conversation"] .scroll > :last-child,
  .accueil-ordi .appli .navigation > .nav-rang-3[data-ecran="conversation"] .scroll > :nth-last-child(2),
  .accueil-ordi .appli .navigation > .nav-rang-3[data-ecran="conversation"] .scroll > :last-child{
    animation:none;opacity:1;transform:none;
  }
}

/* ============================================================================
   5 bis. Troisième temps — l'écran de signature, et le sceau
   ============================================================================
   ---- pourquoi un téléphone, et pas la machine du temps précédent ----
   Le deuxième temps a pris l'ordinateur parce qu'on y écrit et qu'on y dépose des
   pièces ; celui-ci dit « la signature s'effectue en 2 clics » et doit donc tenir dans
   la main. Les deux appareils alternent ainsi d'un temps à l'autre — téléphone,
   ordinateur, téléphone — et l'alternance n'est pas un rythme : chaque fois, c'est
   l'appareil sur lequel le geste décrit se fait vraiment.

   ---- la photo au fond, l'appareil dessus ----
   Posée le 15 octobre 2026, et c'est la seule photographie de la page d'accueil. Les sept
   autres colonnes illustrent avec des écrans relevés ou des tracés à la main ; celle-ci
   ajoute ce dont le contrat n'est que la formalité — deux soignants qui se serrent la
   main. Le produit montre le geste administratif, la photo montre ce qu'il scelle.

   Le montage est celui des pages de logiciel de garde : une photo au fond, l'écran du
   produit posé dessus et débordant d'un coin. Quatre décisions le tiennent.

   **L'appareil est en haut à gauche, la photo en bas à droite.** C'était l'inverse
   jusqu'au soir du 15 octobre, et l'inverse se lisait à l'envers. La colonne de texte est
   à gauche ; l'œil la quitte par son dernier mot, en bas, puis entre dans la case voisine
   et la parcourt de son coin haut-gauche vers son coin bas-droit. Photo en haut, il
   tombait donc d'abord sur la poignée de main — la conclusion — et remontait ensuite vers
   l'écran qui l'explique. Dans l'autre sens il lit le produit, puis ce que le produit a
   permis : l'ordre même du paragraphe qu'il vient de finir. Le recouvrement a suivi le
   retournement — c'est maintenant le coin haut-gauche de la photo que l'appareil mord,
   un mur et une épaule. Centrer l'appareil sur la photo l'aurait posé exactement sur les
   mains, c'est-à-dire sur le seul endroit de l'image qui dit quelque chose.

   **Rien n'est ajouté pour décoller l'appareil du fond.** « .cadre-tel » porte déjà sa
   tranche de métal et « --shadow-lg » ; une ombre de plus, posée ici, se lirait comme un
   calque. L'objet qui était juste sur fond uni reste juste sur une photo.

   **La photo ne s'arrête pas : elle se dissout.** Un rectangle net, si arrondi soit-il,
   remettrait une boîte dans un volet qui n'en a plus une seule, et donnerait surtout deux
   cadres à regarder — celui de la photo et celui du téléphone — là où il ne doit y en
   avoir qu'un. La sortie se fait donc en deux temps plutôt qu'en un, et c'est ce que
   demandait le « flou transparent tout autour » : le net devient flou, puis le flou
   devient rien. Trois calques empilés dans la même enveloppe y suffisent.

     « <img> » porte la photo nette, et ne remplit pas la boîte : elle est rentrée de
     neuf points sur les quatre côtés. C'est la décision qui a demandé deux essais. On
     avait d'abord masqué la photo à même son bord, en comptant sur un fondu large pour
     la dissoudre ; sauf que les deux soignants sont cadrés serré — les cheveux du kiné
     commencent à quatre points du haut de l'image —, et tout fondu assez large pour se
     voir lui mangeait le crâne. Aucun recadrage n'y pouvait rien : « cover » ne recadre
     en hauteur qu'en coupant dans la largeur, et la largeur est déjà juste. Il fallait
     donc de la marge là où l'image n'en a pas, c'est-à-dire en dehors d'elle.

     « ::before » occupe cette marge. C'est la même photographie, cadrée sur la même
     boîte que la nette, puis agrandie d'un quart : elle déborde donc tout autour d'elle,
     alignée sur elle, et floutée. Le bord de la photo nette ne tombe plus sur du vide
     mais sur la continuation floue d'elle-même — un visage qui sort de la mise au point,
     pas un visage coupé.

     L'enveloppe porte le masque extérieur, qui tombe à zéro pile sur son bord. C'est lui
     qui efface les deux calques et le grain d'un coup : rien ne survit à la limite de la
     boîte, donc rien n'y dessine d'arête.

   Les masques sont faits de deux dégradés croisés plutôt que d'un dégradé radial : un
   radial fait une ellipse, qui emporte les quatre coins et laisse les milieux de côtés à
   demi opaques, soit une image en médaillon avec des bords francs — l'inverse de ce qu'on
   cherche. Deux bandes linéaires, l'une horizontale, l'autre verticale, intersectées,
   laissent le centre plein et ne mangent que la bordure, régulièrement. Si
   « mask-composite » venait à manquer, les calques s'additionnent et la photo reparaît
   entière : on perd le fondu, pas l'image.

   **Le grain et la teinte rattachent la photo à la page.** La source est trop lisse et
   trop froide pour une palette de crème et de bleu de nuit : elle arrivait comme une
   vignette de banque d'images posée sur la maquette. Deux réglages la rapprochent. Une
   teinte, écrite une seule fois dans « --teinte » parce que la copie floutée doit porter
   exactement la même sous son flou — sans quoi le passage du flou au net change de
   couleur en route. Et un grain, un bruit fractal en « soft-light », qui rend à l'image
   la matière que les aplats de la page n'ont pas besoin d'avoir mais qu'une photographie,
   elle, doit avoir pour ne pas paraître découpée. « isolation » enferme ce mélange dans
   l'enveloppe : sans lui le « soft-light » irait chercher le fond du volet comme
   arrière-plan, et le grain déborderait sur la page.

   Le châssis est celui du premier temps, repris sans une ligne de plus : « .accueil-tel »
   porte déjà la mise à plat de l'absolu du hero, les cotes de dalle, l'échelle et ses
   deux crans de fenêtre étroite. Tout ce que la classe « .signe » ajoute tient dans ce
   bloc, et commence par une soustraction. */

/* La hauteur de la case est celle de l'appareil plus la bande que la photo prend sous
   lui : c'est ce débord qui fait le décalage en diagonale des deux. */
.montage-signe{position:relative;padding-bottom:clamp(38px,5vw,74px);}

/* Le cadrage est celui du fichier, 3/2, et n'est plus recadré du tout. Il l'a été deux
   fois dans la journée — 5/4, puis 7/5 — pour remonter le bord haut de la photo et
   refermer le vide qu'elle laissait au-dessus d'elle. Ces deux cadrages ne tiennent plus
   depuis que les bords se dissolvent sur une large bande : un recadrage en hauteur, avec
   « cover », se paie en largeur, et la largeur est précisément ce qui manque. Les deux
   personnes sont déjà aux extrémités de l'image — la kinésithérapeute à un quart du bord
   gauche, le kiné aux trois quarts —, et chaque point retiré sur les côtés les pousse
   l'un et l'autre vers le fondu. En 5/4 le kiné arrivait à 86 % du cadre, c'est-à-dire
   dans le flou. Rendue à son format, l'image garde de chaque côté la marge dont la
   dissolution a besoin ; le vide qu'elle laisse en haut à droite, lui, n'est pas un
   défaut de cadrage mais l'autre extrémité de la diagonale.

   La largeur de la case ne se choisit pas, elle se déduit — et ce qui la détermine est le
   recouvrement. Un montage ne tient que si l'appareil mord franchement dans la photo : en
   dessous d'un dixième on ne voit plus deux objets superposés mais deux images voisines,
   mesuré le 15 octobre. Or la photo est calée à droite et l'appareil à gauche ; c'est donc
   la largeur de la photo, et elle seule, qui va chercher l'appareil. Plus elle est large,
   plus son bord gauche remonte sous la dalle.

   Deux grandeurs commandent, et elles ne sont pas de même nature : la case C se mesure en
   pourcentage de la colonne, l'appareil T en pixels — il ne change pas de taille parce que
   la fenêtre rétrécit. C'est tout le problème, et c'est aussi ce qui permet de l'écrire.
   Le bord gauche de l'image nette est à C − 0,91·L (neuf points de halo retirés des cent),
   la tête de la kinésithérapeute à C − 0,689·L (vingt-sept pour cent des quatre-vingt-deux
   points nets). Imposer un recouvrement de 18 % de l'image nette donne
   T − C + 0,91·L = 0,1476·L, soit L = (C − T)/0,7624 = 1,3116·C − 1,3116·T. Avec un
   appareil de 191 px, le terme en pixels vaut 251.

   Le dégagement de la tête, qui était la contrainte à surveiller tant que l'appareil
   faisait 220 px, se trouve alors satisfait tout seul : en y réinjectant L, il vaut
   0,0968·C − 18,5, soit 36 px sur la case la plus large et 29 px sur la plus étroite —
   jamais moins de 25. Une seule règle au lieu de deux, parce que la plus exigeante des
   deux entraîne l'autre.

   Avant cette ligne il y a eu, dans l'ordre : quatre-vingts pour cent fixes, puis deux
   requêtes média bornées pour rattraper les creux de 1110 px et de 700 px où la tête
   venait à 3 px et à 7 px de la dalle, puis un « min » de deux inégalités — le
   recouvrement laissé libre et le dégagement contraint. L'appareil ayant diminué le
   15 octobre, c'est l'inverse qui gouverne : le recouvrement est devenu le terme rare et
   le dégagement le terme abondant. La formule a changé de contrainte directrice, pas de
   méthode. */
.montage-photo{
  position:absolute;bottom:0;right:0;z-index:0;
  width:calc(131.16% - 251px);aspect-ratio:3/2;
  /* La copie floutée déborde volontairement du cadre ; c'est « overflow » qui la coupe,
     et il peut couper franc puisque le masque extérieur est déjà à zéro sur cette ligne.
     « isolation » tient le « soft-light » du grain à l'intérieur de l'enveloppe. */
  overflow:hidden;isolation:isolate;
  /* Désaturer d'un cinquième, réchauffer d'un sixième de sépia, relever un peu le
     contraste : la photo garde ses couleurs mais perd le bleu-vert d'éclairage de salle
     qui la détachait du crème de la page. Variable et non valeur, parce que deux calques
     doivent la porter à l'identique. */
  --teinte:saturate(.78) contrast(1.05) sepia(.18) brightness(1.03);
  /* Les dégradés sont écrits deux fois, comme le bandeau des logos plus haut dans cette
     feuille : le préfixe d'abord, la propriété standard ensuite, pour que le moteur qui
     connaît les deux retienne la seconde. Celui-ci est le masque extérieur : il part de
     zéro exactement sur le bord et n'atteint le plein qu'à sept points, c'est-à-dire
     juste avant que la photo nette ne commence. Le halo flou monte donc en opacité sur
     toute sa largeur, et rien ne touche la limite de la boîte. */
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-composite:intersect;
}
/* Le halo flou. Même boîte que la photo nette — d'où le « inset » répété —, puis agrandi
   d'un quart : la mise à l'échelle part du centre, donc le flou reste calé sur le net et
   déborde de neuf points de chaque côté, exactement la marge laissée autour. Au-delà,
   « overflow » coupe, et il peut couper franc puisque le masque de l'enveloppe est déjà
   à zéro sur cette ligne.

   L'adresse est relative à cette feuille, donc au dossier « assets » : le fichier est le
   même que celui de la balise, au caractère près, et le navigateur ne le télécharge
   qu'une fois — les images ne reçoivent pas d'estampille « ?v= ». */
.montage-photo::before{
  content:"";position:absolute;inset:9%;z-index:0;
  background:url(poignee-de-main.jpg) center/cover no-repeat;
  /* Le flou avant la teinte : l'ordre des fonctions est l'ordre d'application, et
     flouter une image déjà teintée ou teinter une image déjà floutée ne donne pas la
     même chose sur les bords. On floute d'abord, on teinte le résultat, comme le
     calque net est teinté. */
  filter:blur(18px) var(--teinte);
  transform:scale(1.25);
}
/* La photo nette, rentrée de neuf points dans la boîte. Ses attributs « width » et
   « height » sont des indications de présentation — de vraies déclarations CSS, de poids
   nul ; les lignes ci-dessous passent devant sans difficulté, et il n'y a plus
   d'« aspect-ratio » ici pour se faire doubler par le 666, comme c'était le cas tant que
   la balise portait le cadrage. */
.montage-photo img{
  /* Quatre-vingt-deux pour cent et un décalage de neuf, et non « inset:9% » : sur un
     élément remplacé, donner les quatre décalages sans donner les dimensions ne l'étire
     pas — il reprend sa taille intrinsèque, et l'image repartait à 1000 × 666 par-dessus
     tout le volet. Les deux écritures décrivent la même boîte ; une seule la fabrique. */
  position:absolute;top:9%;left:9%;width:82%;height:82%;z-index:1;
  object-fit:cover;object-position:center;
  filter:var(--teinte);
  /* Huit points de fondu sur les quatre côtés, et huit suffisent : ce fondu-ci ne mène
     pas au vide mais au halo, qui est la même image. Il n'a donc qu'à rendre
     imperceptible le passage du net au flou, pas à faire disparaître une photo. C'est
     tout l'intérêt de la marge : les cheveux du kiné, à quatre points du bord haut,
     s'estompent dans leur propre continuation au lieu de s'effacer dans la page. */
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-composite:intersect;
}
/* Le grain. Un bruit fractal dessiné par le navigateur lui-même plutôt qu'un fichier de
   texture : trois cents octets dans la feuille contre une image de plus à télécharger,
   et il se redimensionne sans jamais se pixelliser. « stitchTiles » raccorde les pavés
   entre eux, faute de quoi la grille de 160 px se verrait en damier. « soft-light »
   plutôt que « overlay » : le grain doit se poser sur l'image, pas la contraster. */
.montage-photo::after{
  content:"";position:absolute;inset:0;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='bruit'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23bruit)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  mix-blend-mode:soft-light;opacity:.55;
}
/* En thème sombre la page passe au bleu de nuit, et le mur blanc de la salle de
   rééducation y fait une tache. Le fondu des bords ne suffit pas à la rattraper : il
   dissout le contour, pas la luminosité de ce qu'il y a dedans — et plus l'écart de
   luminosité est grand, plus la même bande de fondu paraît courte. On descend donc la
   photo d'un tiers, mesuré entre .86 et .64.

   Deux chemins ont été essayés avant celui-là. Teinter vers le bleu de la page, par
   « sepia » puis « hue-rotate », intégrait très bien le mur — et retournait les blouses,
   qui sont déjà dans le bleu de la marque, vers le kaki : une rotation de teinte tourne
   ce qui gênait comme ce qui allait. Descendre franchement à .64 marchait, mais les deux
   visages, dont l'un est déjà dans l'ombre sur la photo, s'y éteignaient. On garde donc
   la teinte chaude du thème clair, à peine atténuée, et on paie la baisse de luminosité
   par neuf points de contraste : le mur perd sa tache, le modelé des visages reste.
   C'est la seule limite par le bas, et elle n'est pas négociable — la photo est là pour
   montrer deux personnes. */
:root[data-theme="dark"] .montage-photo{
  --teinte:saturate(.66) contrast(1.09) sepia(.14) brightness(.68);
}
/* L'appareil est centré dans sa case partout ailleurs sur la page ; ici il est calé à
   gauche, au-dessus du coin de la photo. Le cran de pile le met devant elle. */
.montage-signe .accueil-tel{position:relative;z-index:1;justify-content:flex-start;}
/* Et il est plus petit ici qu'au premier temps. L'échelle de .46 a été réglée pour un
   appareil seul dans sa colonne, face au seul texte : « une figure doit dépasser son
   paragraphe sans l'avaler », dit la règle qui la pose plus haut dans cette feuille. Dans
   le montage il n'est plus seul et la comparaison a changé de terme — il n'est plus face
   au texte mais posé sur une photographie, et à .46 il en mangeait la moitié. On le
   descend d'un septième.

   Le 15 octobre au matin, l'argument inverse avait été retenu : ne pas toucher à
   l'échelle, parce qu'un appareil qui change de taille selon ce qu'il y a à côté de lui
   se verrait d'un volet à l'autre. Deux choses l'ont emporté depuis. Les deux téléphones
   de la page ne sont pas voisins — le premier temps et celui-ci sont séparés par
   l'ordinateur du deuxième, et le carrousel ne les met jamais côte à côte. Et surtout, ce
   qu'on voyait d'un volet à l'autre, ce n'était pas l'écart d'échelle mais la photo
   écrasée.

   L'échelle vit en deux endroits — « --tel » pour le châssis, « zoom » pour le contenu de
   l'écran — et les deux doivent bouger ensemble, sinon la dalle et son contenu se
   désaccordent. La requête ne vaut qu'au-dessus de 620 px, c'est-à-dire tant que la
   superposition existe : empilé, l'appareil se retrouve seul au-dessus de la photo comme
   au premier temps, et il reprend l'échelle du premier temps avec cette solitude. C'est
   aussi ce qui rend T constant sur toute la plage où la largeur de la photo se calcule —
   le palier de .55 de 880 px ne s'y applique plus, et les 251 px de la formule n'ont donc
   qu'une valeur à décrire au lieu de deux. */
@media (min-width:621px){
  .accueil-tel.signe{--tel:.40;}
  .accueil-tel.signe .cadre-tel .appli{--appli-z:.40;}
}
/* Et le calage à gauche ne suffit pas : sous 900 px, « kinome.css » rend au cadre du
   hero son « margin:0 auto » — le téléphone y sort du chevauchement avec l'ordinateur et
   se recentre tout seul. La règle ne vise que le hero mais porte sur « .cadre-tel », donc
   sur celui-ci aussi, et une marge automatique l'emporte sur l'alignement du conteneur
   flexible. Mesuré à 624 px de fenêtre : l'appareil se posait au milieu de la case, donc
   au milieu de la photo, et couvrait les deux tiers de l'image, poignée de main comprise.
   On annule la marge plutôt que l'échelle : l'appareil doit rester de la taille qu'il a
   partout ailleurs à cette largeur-là. */
.montage-signe .cadre-tel{margin-inline:0;}
/* En une seule colonne, le volet donne au montage toute la largeur de la page, et la
   diagonale s'étire jusqu'à devenir deux visuels côte à côte séparés par un trou. On
   borne donc la case à la largeur où la superposition tient encore, et on la centre.
   Mille cent pixels et non huit cent quatre-vingts : c'est le volet qui passe à une
   colonne, pas l'appareil, et les deux ne changent pas de forme à la même largeur. */
@media (max-width:1100px){
  /* Centré par « justify-self » et non par des marges automatiques. Sur un élément de
     grille, « margin-inline:auto » ne décale pas une boîte étirée : il annule
     l'étirement, la boîte retombe à la largeur de son contenu et le montage se réduisait
     au téléphone, photo comprise — 220 px de large au lieu de 560. La largeur est donc
     demandée explicitement, et le centrage confié à l'alignement de grille. */
  .montage-signe{width:100%;max-width:560px;justify-self:center;}
}
/* Huit cent quatre-vingts pixels : c'est là que l'appareil grandit d'un cinquième partout
   ailleurs sur la page, parce qu'il y passe seul au-dessus du texte. Le montage ne suit
   plus ce palier depuis qu'il tient sa propre échelle ; il garde en revanche l'élargissement
   de la case, qui n'avait pas la même raison d'être — à une seule colonne, le montage
   dispose de toute la largeur de la page et n'a aucun motif de rester dans les 560 px
   qu'il partageait avec le texte.

   La largeur de la photo, elle, n'a plus rien à redire ici : l'appareil faisant la même
   taille de 621 px à l'écran le plus large, la formule écrite plus haut vaut telle quelle
   sur toute la plage. Elle était recopiée à cet endroit avec un second terme en pixels
   tant que l'appareil changeait de taille à 880 px ; cette seconde ligne est tombée avec
   le palier qui la justifiait. */
@media (max-width:880px){
  .montage-signe{max-width:660px;}
}
/* Sous cette largeur, la photo ne peut plus être posée en diagonale sous l'appareil :
   elle le déborderait de partout. Elle repasse donc dans le flux, et le montage
   redevient une colonne — l'appareil, puis la photo.

   Dix-huit octobre 2026. Ce paragraphe disait ensuite : « il n'y a plus la place de
   superposer quoi que ce soit : la photo couvrirait l'appareil au lieu de
   l'accompagner ». C'était vrai d'une superposition fixe, et faux d'une superposition
   que le défilement fabrique. Ce qui manque au téléphone n'est pas la surface, c'est
   la simultanéité : on ne peut pas montrer les deux images en même temps, on peut les
   montrer l'une après l'autre au même endroit. L'appareil s'épingle sous l'en-tête, la
   photo continue de monter dans le flux et vient le recouvrir par le bas. C'est la
   mécanique du « projet » plus haut dans cette feuille, et pour la même raison : une
   colonne étroite n'a qu'une dimension de libre, celle du défilement. La phrase
   annulée reste écrite parce qu'elle dit juste ce qu'on a cru, et que c'est à cause
   d'elle que la version téléphone est restée plate trois jours.

   Les trois vérifications d'usage avant d'écrire « sticky », les mêmes qu'au
   « projet » :
     — aucun ancêtre de l'appareil ne porte un « overflow » autre que « visible »
       (relevé sur la page, de l'appareil à la racine : aucun) ; un seul suffirait à
       transformer l'épinglage en rien du tout, sans erreur ni avertissement ;
     — le bloc contenant est « .montage-signe », et c'est lui qui relâche l'appareil
       en bas tout seul — il n'y a pas de garde en JavaScript à écrire, et il ne faut
       pas en écrire ;
     — « top:86px » n'est pas choisi mais déduit : l'en-tête est à « top:14px » et
       mesure 62 px, son bas est donc à 76, et on lui laisse 10 px.

   La course et le recouvrement ne se règlent pas, ils se déduisent. L'appareil
   descend tant que son bas n'a pas rejoint le bas du bloc contenant, soit une course
   de « hauteur du montage − hauteur de l'appareil » = « gouttière + hauteur de la
   photo ». À l'arrivée, le bas de l'appareil et le bas de la photo sont au même point
   — c'est le même bord —, donc le recouvrement final vaut exactement la hauteur de la
   photo, quoi qu'on fasse de la gouttière. Celle-ci ne décide que du retard à
   l'allumage : vingt pixels de défilement épinglé avant que les deux boîtes ne se
   touchent. Et comme la position de l'appareil est continue de part et d'autre du
   relâchement, rien ne saute quand il se décroche : la composition se forme, puis
   tient.

   Mesuré sur la page, à 390 px de large. Le montage commence à 2 604 px de défilement.
   L'appareil s'épingle à 2 518, la photo le touche à 2 558, l'a recouvert en entier à
   2 746 — où il se décroche au même pixel —, et plus rien ne bouge ensuite : le
   recouvrement reste à 188 px jusqu'à ce que la section sorte de l'écran. L'essuyage
   dure donc 188 px de défilement, exactement la hauteur recouverte, comme au
   « projet » plus haut et par le même mécanisme : pendant que l'appareil est immobile,
   la photo avance d'un pixel par pixel de défilement. Il reste 168 px d'appareil
   visibles au-dessus de la photo — le titre de l'écran, la pièce jointe et le début
   des initiales. À 320 px, où l'appareil ne rétrécit plus mais où la photo passe à
   242 × 161, les mêmes nombres valent 2 566 et 2 754, le recouvrement 141 et
   l'appareil visible 215.

   Ce que l'épinglage coûte : rien en hauteur de page. Le montage passe de 584 à 604 px
   à cause de la marge basse ci-dessous, et le volet descend de 1 042 à 926 px parce que
   l'encadré « Bravo » quitte le flux au même moment. La page raccourcit.

   Vérifié, pas supposé — y compris le thème sombre, qui suit sans une ligne de plus :
   la photo est une image et l'appareil une capture, ni l'un ni l'autre ne dépend des
   jetons de couleur. */
@media (max-width:620px){
  .montage-signe{
    padding-bottom:0;max-width:420px;
    display:flex;flex-direction:column;align-items:center;gap:20px;
  }
  /* « order » et non un changement d'ordre dans le HTML : empilée, la photo doit se lire
     après l'appareil comme elle se lit après lui en diagonale sur grand écran, et c'est
     la seule chose qui change. « relative » et non « static » : les trois calques du
     montage sont positionnés par rapport à cette boîte, elle doit rester leur repère.
     Le cadrage, lui, ne bouge pas — il n'y en a pas.
     « z-index:2 » annule le « 0 » de la règle générale : c'est la seule ligne qui
     décide qui passe devant l'autre, l'appareil étant à 1 depuis le grand écran. En
     ordre de balisage la photo vient d'abord, donc sans cette ligne c'est l'appareil
     qui recouvrirait la photo — l'effet exactement à l'envers, et silencieux. */
  .montage-photo{position:relative;order:2;width:100%;z-index:2;}
  /* La marge basse est le seul réglage de tout le montage, et elle corrige un défaut
     qu'on ne voit qu'une fois la chose en marche : sans elle, le bas de l'appareil et
     le bas de la photo tombent au même pixel — c'est le même bord, on l'a dit plus
     haut —, or la photo s'éteint sur ses derniers points tandis que l'appareil, lui,
     a un bord franc. Le menton de l'appareil et sa barre d'accueil ressortaient donc
     sous une photo devenue transparente : une lisière sombre sous une image douce.
     C'est la contrainte d'épinglage qui porte sur la boîte *de marges* : l'appareil
     s'arrête vingt pixels plus haut, la photo le dépasse d'autant par le bas.
     Vingt et pas dix-huit ni vingt-cinq : le masque n'est plein que jusqu'à 93 %,
     soit 14,6 px au-dessus du bord à cette hauteur de photo, et il faut au moins cela
     pour que l'appareil finisse sous la partie opaque. Vingt laisse 5 px de garde, et
     se trouve être la gouttière du dessus. */
  .montage-signe .accueil-tel{
    justify-content:center;
    position:sticky;top:86px;margin-bottom:20px;
  }
  /* L'encadré « Bravo » vient se poser dans le coin de la photo ; ses règles sont
     écrites avec les siennes, plus bas dans cette feuille, et non ici. */
}

/* ---- le rail : le contrat se rédige, puis il se signe ----
   Le 15 octobre 2026 ce rail était arrêté — un seul écran n'a nulle part où aller — et
   il reçoit un second écran devant le premier : celui où le contrat se fabrique.
   « Rédaction et envoi du contrat », le type de contrat, la date de début, la
   redevance, les clauses, puis « Générer le contrat ». C'est l'écran qui manquait au
   volet : la feuille de signature seule montrait la fin d'un geste dont on n'avait pas
   vu le début, et le texte d'à côté, lui, raconte bien les deux.
   L'écran est relevé de la bande de l'ordinateur, seul endroit du site où il soit
   capturé. Il est rendu ici en format téléphone — c'est « data-format » qui en décide,
   pas le relevé —, ce qui est justement ce que l'application fait d'elle-même.
   Une seule chose a été retirée de la copie, dans le balisage et non ici : le calque
   « .texte-plein », l'aperçu du contrat généré, qui était ouvert au moment de la
   capture. Sur l'écran large d'où vient le relevé, cet aperçu est un panneau posé à
   côté du formulaire et les deux se lisent ensemble ; en format téléphone le même nœud
   est un calque plein écran, et il recouvrait la rédaction d'un mur de texte juridique
   en corps 4. Ce n'est donc pas une interface retouchée mais le même écran une seconde
   plus tôt, avant qu'on n'ouvre le document.

   Une seule horloge pour tout ce qui bouge dans cet appareil : neuf secondes, celles
   que le sélecteur laisse à un volet qu'on a demandé. Le rail et les trois temps du
   geste de signature plus bas sont écrits sur cette même table, sans retard propre, et
   partent donc ensemble — le volet est caché par « hidden », donc en « display:none »,
   donc toutes les animations repartent de zéro à chaque ouverture.

   Le découpage, en secondes de cette horloge :
     0 → 2,4 s   la rédaction, le temps de lire le titre et de voir le bouton ;
     2,4 → 3 s   le glissement ;
     3 → 8,5 s   la signature, où le geste se joue ;
     8,5 → 9 s   le retour, qui boucle.
   Le retour glisse au lieu de sauter, à l'inverse de la bande du hero : là-bas le volet
   est hors cadre au moment du rembobinage et personne ne le voit, ici l'appareil est
   sous les yeux en permanence. Un saut s'y lirait comme un raté d'affichage.

   Ce que chacun voit, selon qu'il laisse défiler ou qu'il clique : à six secondes —
   la cadence automatique — la rédaction a été lue, le glissement vu, et le paraphe est
   tracé ; à neuf — le volet demandé — le bouton s'est allumé et enfoncé par-dessus.
   La gradation est celle des autres volets, et elle est voulue : le pas automatique
   montre de quoi il s'agit, le clic donne la fin.

   Cinq crans de spécificité pour passer devant les quatre de « .accueil-tel .appli
   .navigation > .nav-vue », qui passait déjà devant les trois de kinome.css : la chaîne
   est longue mais chaque maillon est écrit là où il a sa raison d'être. */
.accueil-tel.signe .appli .navigation > .nav-vue{
  animation:accueil-signe-rail 9s cubic-bezier(.76,0,.24,1) infinite;
}
@keyframes accueil-signe-rail{
  0%,26.667%      {transform:translateX(0);}
  33.333%,94.444% {transform:translateX(-100%);}
  100%            {transform:translateX(0);}
}

/* ---- le geste, sur le second écran ----
   La feuille de signature est relevée du produit : le contrat reçu en pièce jointe, les
   initiales, la zone à signer, le bouton. Rien n'y est redessiné. Ce qui est ajouté est
   le geste que la feuille attend et que le relevé, forcément, ne contient pas — une
   capture d'écran ne contient pas le doigt.

   Le geste se joue en trois temps, qui sont les deux clics de la phrase d'à côté plus
   leur conséquence :

     — le paraphe se trace dans sa zone, et l'aide « signez ici » s'efface sous lui.
       C'est le premier clic, et le seul qui dure ;
     — le bouton « Parapher et signer », relevé éteint faute de signature, s'allume ;
     — il s'enfonce. C'est le second clic, et c'est fini.

   Les trois tables qui suivent sont écrites sur l'horloge de neuf secondes du rail, et
   non sur la leur. C'est le changement du 15 octobre 2026, et c'est ce qui coûte le
   plus cher à relire : les pourcentages ne se lisent plus comme « le tiers du geste »
   mais comme « la cinquième seconde du volet ». Le motif est qu'il n'y a plus un seul
   écran. Tant que la feuille était là dès la première image, un geste qui partait à
   zéro était juste ; maintenant elle n'arrive qu'à trois secondes, et un geste parti à
   zéro se serait joué en coulisses — le visiteur aurait trouvé un contrat déjà signé en
   arrivant dessus.
   Décaler le geste d'un « animation-delay » aurait fait la même chose et se serait lu
   plus vite, mais aurait posé deux horloges dans le même appareil : la moindre retouche
   au découpage du rail aurait demandé de recalculer le retard, sans que rien ne le
   rappelle. Une table unique oblige à relire les trois ensemble, ce qui est exactement
   ce qu'on veut avoir à faire.

   Les instants, pour mémoire : une seconde vaut 11,111 %. Le paraphe se trace de 3,15 s
   à 5,4 s, le bouton s'allume à 6 s, s'enfonce à 6,6 s, et tout s'efface pendant le
   retour du rail, après 8,4 s — un tracé encore à l'écran pendant que l'écran de
   rédaction revient se lirait comme un bogue d'affichage. */
/* Le 16 octobre 2026, la feuille de signature a été relevée sur l'application réelle :
   la zone s'appelle désormais « .zone-sign-cadre.dessin » (la signature en mode
   « Dessiner », vide) et son invite « .zone-sign-vide » (« Signez ici »). Le geste
   est le même ; seuls les deux noms ont suivi. Le tracé y est posé par
   outils/assembler-demo.py. */
.accueil-tel.signe .appli .zone-sign-cadre.dessin{position:relative;}
.accueil-tel.signe .appli .zone-sign-cadre.dessin .sig-trace{
  position:absolute;inset:14% 12% 20%;width:auto;height:auto;
}
/* « pathLength="1" » normalise la longueur du tracé : « stroke-dasharray:1 » couvre
   donc exactement le paraphe entier, quelle que soit sa forme, sans avoir à mesurer le
   chemin à la main.
   Attention : la normalisation ne vaut QUE pour les longueurs le long du tracé
   (dasharray, dashoffset). L'épaisseur reste dans les unités du « viewBox » — 220 × 60
   rendus sur environ 300 px de zone, puis le tout ramené par le zoom de l'appareil.
   Une valeur pensée dans l'espace normalisé 0–1 rendrait un trait invisible. */
.accueil-tel.signe .appli .sig-trait{
  fill:none;stroke:var(--text);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:accueil-signe-trace 9s ease-in-out infinite;
}
.accueil-tel.signe .appli .zone-sign-vide{
  animation:accueil-signe-aide 9s ease-out infinite;
}
/* Le bouton est relevé sans son extinction : « disabled » et l'opacité de .45 ont été
   retirés de la copie, et reposés ici. La raison est la branche du mouvement réduit —
   une animation passe devant un style en ligne, la cascade la place au-dessus, mais une
   règle ordinaire non : le visiteur qui refuse le mouvement se serait retrouvé avec un
   bouton éteint sous une signature tracée, c'est-à-dire l'écran qui dit que ça ne
   marche pas.
   Le sélecteur est descendu jusqu'à la vue « signature » le 15 octobre 2026, jour où
   le montage a reçu un second écran : la rédaction a elle aussi son « .btn-primary »,
   « Envoyer », que le geste de signature allumait au passage. Rien ne se voyait — ce
   bouton-là n'est à l'écran que pendant la première moitié de la boucle, où la table
   le laisse à .45 —, mais deux boutons jouaient la même animation pour un seul geste.
   Si un troisième écran arrive un jour, c'est ce « data-ecran » qui tiendra. */
.accueil-tel.signe .appli .nav-vue[data-ecran="signature"] .btn-primary{
  opacity:.45;
  animation:accueil-signe-bouton 9s ease-out infinite;
}
/* Le tracé s'efface à la fin sans se détracer : à 100 % il est opaque mais invisible,
   à 0 % il est transparent et vide — un paraphe entièrement effacé ne se distingue pas
   d'un paraphe à opacité nulle, et la couture de la boucle ne se voit pas. Le rembobinage
   d'un geste manuscrit, lui, se verrait comme une erreur. */
@keyframes accueil-signe-trace{
  0%,35%   {stroke-dashoffset:1;opacity:1;}
  60%,92%  {stroke-dashoffset:0;opacity:1;}
  97%,100% {stroke-dashoffset:0;opacity:0;}
}
@keyframes accueil-signe-aide{
  0%,35%   {opacity:1;}
  41%,93%  {opacity:0;}
  98%,100% {opacity:1;}
}
/* L'enfoncement dure un quart de seconde et vaut 3 % d'échelle. C'est peu, et c'est le
   maximum : au-delà, un bouton qui recule dans une maquette muette ressemble à un défaut
   de rendu plutôt qu'à un clic. */
@keyframes accueil-signe-bouton{
  0%,62%   {opacity:.45;transform:none;}
  67%,70%  {opacity:1;transform:none;}
  73%      {opacity:1;transform:scale(.97);}
  76%,93%  {opacity:1;transform:none;}
  98%,100% {opacity:.45;transform:none;}
}

/* ---- le sceau, sous le texte ----
   Celui-là est dessiné à la main et l'assume : ce n'est pas un écran du produit mais la
   conclusion de la page, comme les quatre tuiles d'outils du temps suivant. Il prend la
   place d'une carte « contrat » qui, elle, dessinait un document — c'est-à-dire qu'elle
   imitait le produit à vingt centimètres du vrai produit. La règle tient en une ligne :
   on ne redessine pas une interface, on peut dessiner ce qu'une interface ne montre
   jamais. Un recrutement conclu n'est pas un écran ; c'est une bonne nouvelle.

   La coche se trace une fois et reste. Pas de boucle, et c'est délibéré : le téléphone
   d'à côté boucle parce qu'il montre un geste, qui se refait ; le sceau est un état, qui
   ne se défait pas. Un sceau clignotant dirait que le recrutement se valide et s'annule
   tour à tour. L'animation est donc jouée une fois à l'ouverture du volet — « hidden »
   la remet à zéro chaque fois qu'on y revient, ce qui suffit. */
.bravo{
  display:flex;align-items:center;gap:16px;
  margin-top:34px;padding:17px 22px;max-width:520px;
  background:var(--ok-soft);
  border:1px solid color-mix(in srgb, var(--ok) 34%, transparent);
  border-radius:var(--radius-lg);
}
.bravo-sceau{
  flex:none;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--ok);color:var(--surface);
}
.bravo-sceau svg{width:24px;height:24px;}
.bravo-coche{
  fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:accueil-bravo-coche 1.1s cubic-bezier(.65,0,.35,1) .5s forwards;
}
@keyframes accueil-bravo-coche{to{stroke-dashoffset:0;}}
.bravo-dit{font-size:14px;line-height:1.5;color:var(--text-muted);}
.bravo-dit b{
  display:block;margin-bottom:3px;
  font-family:var(--display);font-weight:700;font-size:17px;color:var(--text);
}
@media (max-width:520px){
  .bravo{gap:13px;padding:15px 17px;}
  .bravo-sceau{width:38px;height:38px;}
  .bravo-sceau svg{width:21px;height:21px;}
}

/* Au téléphone, l'encadré quitte la colonne de texte et va se poser dans le coin bas
   droit de la photo du montage — voir la requête à 620 px du chapitre du montage, qui
   épingle l'appareil et fait monter la photo par-dessus. Les deux décisions n'en font
   qu'une : une fois la photo devenue le dernier plan de la composition, la bonne
   nouvelle a sa place dessus, et plus au-dessus.

   Pourquoi on peut sortir l'encadré du flux sans toucher au balisage : il est déjà
   « aria-hidden » — c'est une illustration, pas une information —, et le volet se
   termine précisément par le montage, lui-même terminé par la photo. Le bas droit du
   volet et le bas droit de la photo sont donc le même point, à ceci près que le
   montage est plafonné à 420 px et centré dès que le volet est plus large : d'où le
   demi-écart « (100% − min(100%,420px)) / 2 » qui ramène le bord droit de la photo.
   Mesuré : à 390 px de large le volet fait 312 et le montage aussi, l'écart est nul ;
   à 620 px le volet fait 522 pour un montage de 420, l'écart vaut 51.

   « bottom » ne peut pas reprendre la même expression, et c'est le piège de la chose :
   un pourcentage s'y rapporte à la hauteur du bloc contenant, pas à sa largeur —
   « min(100%,420px) » y vaudrait 420 px tout du long, puisque le volet dépasse le
   millier de pixels de haut. Le retrait du bas est donc une valeur en pixels, la même
   que celle de droite.

   Quatorze pixels des deux bords, c'est-à-dire posé sur le fondu de la photo et non à
   l'intérieur de l'image nette. La photo s'éteint sur ses neuf points extérieurs — le
   halo flou — et l'encadré est opaque : il couvre ce fondu au lieu de flotter dedans,
   et son coin retrouve un angle franc là où la photo n'en a plus. Rentrer l'encadré
   jusqu'à l'image nette aurait demandé 28 px à droite et 19 en bas à 390, 38 et 25 à
   620 — deux clamps pour gagner un alignement que personne ne peut voir, l'image
   n'ayant pas de bord visible à cet endroit.

   Ce que l'encadré perd en chemin : sa seconde phrase, « Contrat signé des deux côtés
   le 12/03, archivé et horodaté », qui reçoit pour cela une enveloppe dans le balisage
   — c'était un nœud de texte nu, et on ne cache pas un nœud de texte nu en CSS.
   Les deux hypothèses ont été mesurées sur la page avant de trancher, à 390 px, sur
   une photo de 312 × 208 : sans la phrase, l'encadré tient en 181 × 58, soit 58 % de
   la largeur de la photo et 28 % de sa hauteur — c'est le « en petit » demandé ; avec
   la phrase ramenée à 10,5 px, il lui faut 243 × 81, soit 78 % et 39 %, et il ne
   descend pas plus bas que 81 px de haut même en l'élargissant encore, la phrase
   tenant alors sur deux lignes incompressibles. Ce n'est plus un encadré posé dans un
   coin, c'est un bandeau sur toute la base de la photo.
   Le titre seul est d'ailleurs ce que la demande nommait. La phrase, elle, est la
   seule de la page à dire « archivé et horodaté » : si elle doit revenir au téléphone,
   c'est au texte du volet de la reprendre, pas à l'encadré de grossir. */
@media (max-width:620px){
  .accueil-volet:has(> .montage-signe){position:relative;}
  .accueil-volet:has(> .montage-signe) .bravo{
    position:absolute;z-index:3;
    right:calc((100% - min(100%, 420px)) / 2 + 14px);
    bottom:14px;
    width:calc(min(100%, 420px) * .58);
    max-width:none;margin-top:0;
    gap:9px;padding:9px 11px;
    border-radius:var(--radius-md);
    /* Une ombre portée, que l'encadré n'a nulle part ailleurs : posé sur la page il
       n'a rien à survoler, posé sur une photo il doit s'en détacher. Tirée de l'encre
       du thème et non d'un noir fixe, ce qui la retourne en clarté dans le thème
       sombre — l'encre y est le crème. Ce n'est plus une ombre mais un halo, et c'est
       le bon comportement : sur une photo qui garde ses valeurs propres d'un thème à
       l'autre, c'est à la page de changer de signe, pas à la photo. Vérifié à l'œil
       dans les deux thèmes. */
    box-shadow:0 10px 26px color-mix(in srgb, var(--text) 24%, transparent);
  }
  .accueil-volet:has(> .montage-signe) .bravo-sceau{width:26px;height:26px;}
  .accueil-volet:has(> .montage-signe) .bravo-sceau svg{width:15px;height:15px;}
  /* La marge sous le titre ne servait qu'à le séparer de la phrase qui le suivait ;
     la phrase partie, elle laisserait un blanc au bas de l'encadré. */
  .accueil-volet:has(> .montage-signe) .bravo-dit b{margin-bottom:0;font-size:12.5px;}
  .bravo-detail{display:none;}
}

/* L'extinction reprend mot pour mot les quatre sélecteurs qui animent au-dessus, et
   repose ce que chacun portait. Le rail n'a rien à reposer : il est déjà arrêté, c'est
   la première règle du bloc.

   L'état de repos est l'état d'arrivée et non celui de départ, et c'est le choix
   général de la page : une image fixe doit montrer l'aboutissement, pas l'attente.
   Paraphe tracé, aide effacée — elle dirait « signez ici » sous une signature déjà
   posée —, bouton allumé. La coche du sceau, elle, se repose aussi : sans animation,
   « stroke-dashoffset:1 » laisserait un disque vert vide. */
@media (prefers-reduced-motion: reduce){
  /* Le rail s'arrête sur la signature, et non sur la rédaction où le translate le
     laisserait faute d'animation. Les deux écrans sont également vrais, mais le volet
     s'appelle « Signer », le texte d'à côté annonce le contrat signé et le sceau
     « Bravo, vous êtes recruté » est trois lignes plus bas : reposer sur le brouillon
     ferait répondre l'image à côté de ce que la page affirme. C'est la règle du projet
     — éteindre une animation oblige à reposer l'état qu'elle atteignait — et l'état
     qu'elle atteint ici, c'est le second écran avec le paraphe dessus. */
  .accueil-tel.signe .appli .navigation > .nav-vue{
    animation:none;transform:translateX(-100%);
  }
  .accueil-tel.signe .appli .sig-trait{animation:none;stroke-dashoffset:0;}
  .accueil-tel.signe .appli .zone-sign-vide{animation:none;opacity:0;}
  /* Même descente de sélecteur que plus haut, et pour la même raison : sans elle, la
     pose du mouvement réduit allumerait aussi le « Envoyer » de la rédaction. Les deux
     règles doivent rester au même niveau, sinon celle-ci cesse de recouvrir l'autre. */
  .accueil-tel.signe .appli .nav-vue[data-ecran="signature"] .btn-primary{
    animation:none;opacity:1;transform:none;
  }
  .bravo-coche{animation:none;stroke-dashoffset:0;}
}

/* ============================================================================
   5 ter. Quatrième temps — la grille des catégories, à gauche
   ============================================================================
   Le texte passe à droite, comme au deuxième temps, et la raison n'est pas la même.
   Là-bas c'était un objet — une machine — et un objet se pose où il veut. Ici c'est
   une grille de neuf cases, et une grille a un coin de départ : elle se lit depuis son
   angle haut-gauche. Adossée au bord gauche du bloc, elle commence là où le regard
   arrive ; posée à droite, elle commencerait au milieu de la page.

   Le texte prend la colonne étroite et la grille la large, à l'inverse du deuxième
   temps. Deux colonnes de tuiles ont besoin d'une largeur minimale sous peine de couper
   « Prescription d'exercice » en trois ; un paragraphe, lui, se contente de la place
   qu'on lui laisse, et gagne même à ne pas dépasser la soixantaine de signes par ligne.

   Et la contrepartie de tout réglage de grille écrit sur un volet nommé, pour la
   deuxième fois de cette feuille : **ce qui est dit pour un volet doit être défait pour
   ce volet.** Les deux règles ci-dessous comptent deux classes et passent donc devant
   le repli en une colonne du chapitre « Rétrécissements », qui n'en compte qu'une. Sans
   les deux lignes du « media » qui suit, le volet garderait ses deux colonnes jusqu'aux
   petits écrans et le texte resterait à droite d'une grille écrasée. */
.accueil-volet.arrivee{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);}
.accueil-volet.arrivee > :first-child{order:2;}
@media (max-width:1100px){
  .accueil-volet.arrivee{grid-template-columns:1fr;}
  .accueil-volet.arrivee > :first-child{order:0;}
}

/* ============================================================================
   6. Chiffres en tuiles — retirés
   ============================================================================
   Quatre tuiles chiffrées suivaient l'appel à l'action : 0 €, 1 profil, 21 spécialités,
   5 étapes. Chacune avait son fond pris dans les jetons — l'orange du prix, le vert de
   l'acquis, le gris-bleu du dénombrable — pour éviter qu'elles ne se relisent comme la
   bande de statistiques de l'ancienne page d'accueil.

   Elles sont tombées le 15 octobre 2026, et le motif n'est pas une affaire de forme :
   aucun des quatre chiffres n'était neuf à cet endroit de la page. Le prix est le sujet
   entier de la section qui précède, les cinq étapes sont le carrousel qu'on vient de
   quitter, le profil unique ouvre le hero. Répéter un chiffre ne le prouve pas deux
   fois ; cela l'affaiblit, et cela ajoutait quatre cases entre l'hésitation et le
   bouton qui la résout.

   Les règles sont retirées plutôt que commentées : « verifier-site.py » signale les
   classes du HTML sans règle, jamais l'inverse, donc une feuille morte y survivrait
   sans bruit. Si les tuiles revenaient, elles reviendraient avec un chiffre que la page
   ne dit pas encore — ce qui voudrait dire d'autres chiffres, et donc d'autres règles.
   ============================================================================
   7. Appel à l'action de milieu de page
   ============================================================================
   Le site de référence en place un au tiers de la page, et c'est ce qui lui permet
   d'avoir un hero sobre : qui n'était pas prêt à cliquer en arrivant repasse
   devant le bouton après avoir compris. La phrase est celle que la page d'accueil
   enterre au milieu de la section « Gratuit » — elle y est la meilleure de la page
   et personne ne la lit à cet endroit.

   Le 15 octobre 2026, le bouton est remonté dans « Gratuit », sous le chapeau. Ce
   bloc garde ses deux premières règles : il reste l'adresse au lecteur, centrée et
   bornée à 760 px. Il a perdu la troisième, « .accueil-appel .accueil-action », qui
   n'avait plus rien à cadrer.
   La mise en page du bouton est reprise telle quelle sous « .accueil-ouverture », et
   la valeur de 28 px ne bouge pas : c'est l'écart entre un chapeau et un bouton, pas
   l'écart propre à une section. Le hero garde la sienne — il aligne deux boutons et
   les laisse passer à la ligne —, ce que fait la règle de la section 2.

   Dix-huit octobre 2026, suite et correction du paragraphe ci-dessus. Le bouton est
   descendu sous la carte du prix et a quitté « .accueil-ouverture » ; le sélecteur
   est donc devenu « .enveloppe > .accueil-action ». Il reste unique sans
   identifiant : la page ne contient que deux « .accueil-action », celle du hero —
   qui est enfermée dans « .accueil-hero-texte » et n'est donc l'enfant direct
   d'aucune enveloppe — et celle-ci.
   Les 28 px, en revanche, ne tiennent plus. Ils mesuraient l'écart entre un chapeau
   et un bouton ; ils mesurent maintenant l'écart entre une carte et un bouton, et
   une carte a un bord. Sous la carte, « .gratuit » apporte déjà ses 44 px de
   « margin-top » au-dessus d'elle ; lui répondre 28 en dessous déséquilibre la
   section vers le bas. La valeur passe donc à 36 px : plus que l'écart à un
   paragraphe, moins que l'écart à la carte, parce qu'un bouton qui suit une carte
   doit se lire comme la conclusion de la carte et non comme le début d'autre chose. */
.accueil-appel{text-align:center;max-width:760px;margin:0 auto;}
.accueil-appel h2{font-size:clamp(28px,4vw,46px);}
.accueil-appel .chapeau{margin:20px auto 0;}
.enveloppe > .accueil-action{display:flex;justify-content:center;margin-top:36px;}
.accueil-ouverture .accueil-action{display:flex;justify-content:center;margin-top:28px;}

/* ============================================================================
   8. Questions fréquentes en deux colonnes
   ============================================================================
   La page d'accueil pose le titre au-dessus de la liste : le titre quitte l'écran
   au premier dépli, et l'on se retrouve à lire un accordéon sans savoir de quoi
   il est l'accordéon. En colonnes, le titre reste collé en haut pendant qu'on
   déroule — « position:sticky » — et c'est une section de mille pixels qui garde
   son étiquette du début à la fin. */
.accueil-faq{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,4vw,60px);align-items:start;
}
.accueil-faq-tete{position:sticky;top:110px;}
.accueil-faq-tete .chapeau{margin-bottom:24px;}
.accueil-faq .faq{margin-top:0;}

/* ---------- Les huit questions, sur deux colonnes ----------
   Demandé le 18 octobre 2026. Huit questions l'une sous l'autre faisaient de cette
   section la plus haute de la page après la démonstration, alors qu'elle n'est
   qu'un recours : on y descend pour une question précise, pas pour les lire toutes.
   Deux colonnes la ramènent à quatre rangs et la rendent balayable d'un regard,
   ce qui est exactement l'usage.

   « align-items:stretch » — la valeur par défaut, donc pas écrite, mais c'est elle
   qui fait tenir la chose et il faut savoir qu'on y compte. Un accordéon dans une
   grille a un défaut bien connu : ouvrir la question de gauche grandit son rang, et
   la question de droite, si elle garde sa hauteur, laisse un trou avec son filet
   suspendu en l'air au milieu. Étirée, sa boîte descend jusqu'au bas du rang et les
   deux filets se rejoignent ; il reste du blanc sous le texte court, ce qui est la
   forme normale d'un tableau à deux colonnes et non un défaut.

   « row-gap:0 » parce que le filet du bas fait déjà la séparation entre deux rangs.
   Une gouttière verticale en plus détacherait les filets de ce qu'ils soulignent.

   Ce qui n'a pas été fait : « columns:2 », le multi-colonnes typographique. Il
   répartit mieux — il équilibre les hauteurs au lieu de remplir rang par rang —
   mais il recompose toute la liste à chaque ouverture, si bien qu'une question
   qu'on déplie en déplace quatre autres d'une colonne à l'autre sous les yeux. On
   lui préfère la grille, qui ne bouge que son propre rang.

   Correction du même jour, quelques heures plus tard : la dernière phrase ci-dessus
   est devenue fausse en même temps qu'on a écrit la règle d'en dessous. La grille
   ne bouge que son propre rang tant qu'aucune question n'est ouverte ; la question
   ouverte prend désormais les deux colonnes, et une question ouverte à gauche
   renvoie bien toutes les suivantes d'une colonne à l'autre — exactement ce qu'on
   reprochait à « columns:2 ». Le départage ne tient donc plus à ce critère, il
   tient à la lecture : relevé ci-dessous. La phrase est laissée là parce qu'elle
   dit pourquoi la grille a été choisie au départ, et qu'un argument devenu caduc
   renseigne plus qu'un argument effacé. */
@media (max-width:900px){
  .accueil-faq .faq{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(18px,2.4vw,36px);row-gap:0;
  }
}

/* ---------- La question ouverte reprend les deux colonnes ----------
   Deux colonnes ont été demandées pour les questions, et c'est bien ce que la règle
   du dessus donne. Mais le pli emporte sa réponse, et la réponse n'a pas les mêmes
   besoins qu'un titre de trois mots : elle se retrouvait dans une demi-colonne,
   avec la moitié droite de la section vide en face d'elle.

   Mesuré, signes par ligne de réponse (la mesure qui décide ici, puisqu'une
   colonne de texte se juge au nombre de signes et non aux pixels) :

                       sans la règle    avec la règle
     à  320 px ......     15                33
     à  390 px ......     17                36
     à 1280 px ......     33                68

   Dix-sept signes par ligne, c'est une colonne de dictionnaire : la première
   réponse y tombait sur douze lignes hautes de 166 px de large. Trente-six, ce
   n'est pas encore confortable, mais c'est l'ordinaire d'un paragraphe sur
   téléphone. La règle s'applique donc à toutes les largeurs et pas seulement au
   téléphone : à 1280 px elle fait passer la réponse de 33 à 68 signes, et il n'y a
   pas de raison de laisser l'écran large au régime étroit. Le « max-width:78ch »
   que « .faq p » tient de kinome.css continue de borner le haut — mesuré 832 px à
   1280 px de fenêtre — donc élargir ici ne produit pas de ligne trop longue.

   Ce qu'on paie en échange : l'ordre des colonnes. Une question ouverte à gauche
   occupe un rang entier, et les suivantes se replacent toutes d'une colonne. Relevé
   des huit, « G » gauche, « D » droite :
     rien d'ouvert .... G D G D G D G D
     la 1re ouverte ... PLEIN G D G D G D G     (tout est décalé)
     la 4e ouverte .... G D G PLEIN G D G D     (un trou à droite de la 3e)
   L'ordre de lecture, lui, ne bouge pas : la grille remplit toujours rang par rang
   dans l'ordre du HTML, on lit les huit questions dans le même ordre avant et
   après. C'est le côté où se trouve une question qui change, pas son rang. Vu à
   l'écran avant d'être retenu : un accordéon déplace de toute façon tout ce qui est
   sous lui, et ce déplacement-là se remarque moins que le vide d'en face. */
@media (max-width:900px){ .accueil-faq .faq details[open]{grid-column:1/-1;} }
/* Le « + » se rapproche de son texte. Son écart de 20 px était celui d'une ligne
   qui tient toute la largeur du pavé ; dans une demi-colonne il prend sur les mots
   la place qu'il laissait au vide. Mesuré au téléphone, voir le chapitre 13. */
@media (max-width:900px){ .accueil-faq .faq summary{gap:clamp(8px,1.4vw,20px);} }

/* ============================================================================
   8 bis. Le bandeau des partenaires
   ============================================================================
   Demandé le 15 octobre 2026 : « un bandeau dans lequel les partenaires
   défileront, "Ils sont partenaires de Kinôme", avec le logo de Andrew pour le
   moment ». Le défilement est écrit, mais il ne tourne pas aujourd'hui : il n'y
   a qu'un logo, et un logo seul qui glisse d'un bord à l'autre ne dit pas
   « nos partenaires », il dit « il n'y en a qu'un, regardez comme il traverse ».
   C'est l'arbitrage retenu avec le demandeur. La mécanique attend plus bas,
   sous « .partenaires-piste.defile », et il suffira d'ajouter la classe au
   balisage le jour où la bande sera pleine.

   Le bandeau est posé juste avant la démonstration parce que c'est là qu'il
   sert : le visiteur s'apprête à juger un produit qu'il ne connaît pas, et le
   nom d'une maison qu'il connaît peut-être change ce qu'il va regarder. Placé
   plus haut, il serait passé avant qu'on sache de quoi on parle.

   Il n'est pas dans un « .accueil-bloc » : ce n'est pas un chapitre, c'est une
   respiration entre deux chapitres.

   ---- Le fond du 15 octobre 2026 -------------------------------------------
   Il a d'abord été posé à nu sur le fond de page, sans surface ni bordure,
   avec seulement deux filets portés par « .enveloppe » — donc deux filets
   larges comme le texte, pas comme la fenêtre. Le propriétaire a demandé ce
   jour-là qu'il ait « le même fond que celui des types de postes ». Il a
   raison, et pour une raison qui se voit mieux une fois les deux côte à côte :
   ce sont les deux mêmes objets. Une bande pleine largeur, une liste qui
   défile dedans, aucun propos qui ne tienne en trois mots. Deux habillages
   différents pour un même rôle, c'est le lecteur qui paie la différence — il
   cherche ce qu'elle veut dire, et elle ne veut rien dire.

   La recette est donc recopiée de « .accueil-postes », à l'identique et
   volontairement : même « var(--bg) », même calque de grain en « ::before »,
   mêmes filets. Trois choses à savoir avant d'y toucher :

     · les filets ne sont pas « var(--border) ». Ce ton-là (#E6E5DD) ne se
       distingue pas du fond de page (#E9E9E1) : le filet existerait dans la
       feuille et pas à l'écran. C'est un mélange d'encre à 13 %, qui tient sur
       les deux fonds que la bande traverse. Même raison, même valeur que chez
       les types de poste ;

     · les filets passent de « .enveloppe » à la section. Une bande teintée
       dont les traits s'arrêtent à la largeur du texte se lit comme une boîte
       mal découpée. Maintenant qu'il y a un fond, les traits en sont le bord,
       et un bord va d'un bout à l'autre ;

     · le grain est à nouveau posé parce qu'il est à nouveau caché. C'était
       l'argument du premier jet — « celle-ci n'a rien à redonner puisqu'elle
       ne cache rien » — et il tombe avec la surface opaque. La règle du site
       n'a pas changé : ce qui couvre le fond lui rend son grain. Le calque est
       sous le contenu (« z-index:0 » contre « 1 » sur l'enveloppe) et sourd
       aux clics.

   Les rembourrages fusionnent les deux qui existaient — celui de la section et
   celui de l'enveloppe, 26→40 px plus 22→32 px — en un seul porté par la
   section, du même ordre que la somme. Sans cela la bande aurait doublé de
   hauteur le jour où elle s'est teintée. */
.accueil-partenaires{
  position:relative;
  padding:clamp(30px,3.6vw,48px) 0 clamp(32px,3.8vw,52px);
  background:var(--bg);
  border-top:1px solid color-mix(in srgb, var(--text) 13%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--text) 13%, transparent);
  overflow:hidden;
}
.accueil-partenaires::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);
  background-attachment:fixed;
  mix-blend-mode:overlay;
  opacity:var(--grain-surface);
}
.accueil-partenaires .enveloppe{
  position:relative;z-index:1;
}
/* L'intitulé a d'abord été écrit en légende — mono, capitales, 11 px, encre
   atténuée, le dessin des surtitres de la page — pour qu'il passe derrière le
   logo qu'il présente. Le demandeur l'a voulu en titre le 15 octobre 2026, avec
   « partenaires » en jaune, et il a raison sur le fond : ce qui se dit ici n'est
   pas la légende d'une image, c'est une affirmation sur Kinôme. Une légende
   l'aurait fait lire comme une mention obligatoire.
   C'est donc un vrai « h2 », pas un paragraphe habillé : la section n'avait
   aucun titre dans le plan du document, et elle s'annonçait déjà par
   « aria-labelledby » qui pointait sur un « p ». Le balisage dit maintenant ce
   que la page montre.
   Plus petit que les titres de chapitre — clamp(21px, 2.4vw, 29px) contre
   clamp(28px, 3.7vw, 42px) — parce que ce bandeau n'est pas un chapitre : il
   respire entre deux sections et il est suivi, à quelques dizaines de pixels,
   par « Entrez dans Kinôme. ». À taille égale, les deux se seraient disputé le
   même rang et le second aurait perdu son entrée. */
.partenaires-titre{
  margin:0 0 clamp(18px,2vw,26px);text-align:center;
  font-size:clamp(21px,2.4vw,29px);
}
/* La piste est le cadre du défilement futur : c'est elle qui coupera ce qui
   dépasse quand la liste sera plus large qu'elle. Tant qu'un seul logo tient
   au milieu, « overflow:hidden » ne coupe rien — on la pose quand même, pour
   que le jour où la liste s'allonge il n'y ait qu'une classe à ajouter et pas
   une structure à inventer. */
.partenaires-piste{overflow:hidden;}
.partenaires-liste{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(28px,4vw,64px);
  margin:0;padding:0;list-style:none;
}
/* Les logos des partenaires ne sont pas les nôtres : on ne les recolore pas, on
   ne les met pas en gris pour les « accorder » à la page, et on ne les rogne
   pas. Ce qu'on tient, c'est la hauteur, et elle est la même pour tous — c'est
   ce qui fait que deux marques de proportions différentes pèsent pareil dans la
   bande, là où une largeur commune donnerait un timbre-poste à côté d'une
   banderole. La largeur suit donc, jamais l'inverse.
   38 px et non 30, qui est la hauteur qu'Andrew donne à son logo dans son propre
   en-tête : là-bas il sert de repère au coin d'une page, ici il est seul au
   milieu d'une bande qui lui est consacrée. Essayé à 30 — le logo flottait, et
   la bande avait l'air d'attendre son contenu.
   « max-width:46vw » n'est là que pour les très petites fenêtres : un logo très
   allongé y déborderait de l'enveloppe avant d'atteindre sa hauteur. */
.partenaires-liste img{
  display:block;height:38px;width:auto;max-width:46vw;
}
/* Le logo mène chez le partenaire (26 octobre 2026). Le lien n'ajoute aucune
   décoration autour de la marque — pas de cadre, pas de pastille, pas de
   soulignement : la même règle que pour l'image elle-même, on ne redessine pas
   le logo d'un autre. Ce qui dit qu'on peut cliquer, c'est le curseur, puis le
   léger recul de l'encre au survol. Deux centièmes d'agrandissement, pas plus :
   assez pour répondre au geste, trop peu pour que la bande bouge.
   « display:block » et non « inline » : un lien en ligne réserve sous l'image la
   place d'une ligne de texte qui n'existe pas, et le logo se serait retrouvé
   désaxé vers le haut dans une bande censée le centrer.
   Le contour de focus est celui du navigateur, comme partout sur ce site : rien
   ici ne le masque, et il est plus fiable que ce qu'on réécrirait. On lui donne
   seulement un peu d'air (« outline-offset ») pour qu'il ne colle pas au logo.
   Au clavier comme à la souris, la cible est l'image entière — c'est elle, et
   rien autour, qui est le partenaire. */
.partenaires-liste a{
  display:block;
  outline-offset:6px;
  transition:transform .18s ease;
}
.partenaires-liste a:hover{transform:scale(1.02);}
.partenaires-liste a:active{transform:scale(.99);}
@media (prefers-reduced-motion:reduce){
  .partenaires-liste a{transition:none;}
  .partenaires-liste a:hover,.partenaires-liste a:active{transform:none;}
}

/* Le défilement, écrit et dormant. Il attend un deuxième partenaire : la classe
   « defile » se pose sur « .partenaires-piste », et la liste doit alors être
   écrite deux fois de suite dans le balisage — c'est ce qui permet à la boucle
   de se refermer sans saut, puisqu'au bout de la première copie l'image est
   exactement celle du départ. La seconde copie se met en « aria-hidden » : un
   lecteur d'écran n'a pas à entendre les partenaires deux fois.
   La durée est au mouvement ce que la distance est à la lecture : 32 s pour un
   tour, c'est lent, et c'est voulu — une bande de logos qui va vite se lit comme
   une publicité. « prefers-reduced-motion » l'arrête net plutôt que de la
   ralentir : une bande immobile reste lisible, c'est le repli honnête. */
.partenaires-piste.defile .partenaires-liste{
  width:max-content;justify-content:flex-start;
  animation:partenaires-defile 32s linear infinite;
}
.partenaires-piste.defile:hover .partenaires-liste{animation-play-state:paused;}
@keyframes partenaires-defile{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion:reduce){
  .partenaires-piste.defile .partenaires-liste{animation:none;justify-content:center;}
}

/* ============================================================================
   9. L'univers de démonstration
   ============================================================================
   Posé le 15 octobre 2026. Voir le commentaire de la section 9 de « index.html »
   pour ce qu'on a voulu faire ; ici, pour ce que ça coûte en feuille de style.

   La largeur est celle de la page, pas celle de la fenêtre. La bande a d'abord
   été posée hors de l'« .enveloppe » pour aller d'un bord à l'autre ; le
   demandeur l'a refusée le 15 octobre 2026 — les marges du site se tiennent ici
   comme ailleurs. Elle est donc fille de l'« .enveloppe », qui lui donne ses
   1280 px moins 20 de chaque côté, et la feuille n'a rien à dire de sa largeur :
   une règle en moins plutôt qu'une en plus.

   Du même coup elle a repris un cadre complet et des angles arrondis. Tant
   qu'elle touchait les deux bords, deux filets horizontaux suffisaient — un
   cadre n'aurait eu nulle part où fermer ses côtés. Rentrée dans la colonne,
   elle est devenue un objet posé sur la page comme les autres cartes, et deux
   traits qui s'arrêtent dans le vide auraient eu l'air d'un cadre inachevé.
   « --radius-lg », le rayon des grandes cartes de la page, et « overflow:hidden »
   que la bande portait déjà se charge de rogner les coins de l'application.

   La hauteur est le seul nombre vraiment arbitré. L'application mesure ses zones
   défilantes en pourcentage de la sienne ; il lui faut donc une hauteur, et une
   hauteur fixe collerait mal à un écran de portable comme à un grand moniteur.
   Le plafond de 880 px n'est pas décoratif : la carte de découverte a un plancher
   mesuré à 857 px, en dessous duquel ses deux boutons de jugement passent sous le
   pli. Ici ce n'est plus rédhibitoire — la zone défile, puisqu'on peut la faire
   défiler, ce que la vitrine ne permettait pas —, mais le premier geste de
   l'univers mérite d'être visible sans qu'on ait à chercher. Le plancher de 600 px
   est l'autre bout : en dessous, l'en-tête et le pied de l'application se touchent.
   Entre les deux, « 100svh - 120 px » laisse voir que la page continue : une bande
   exactement haute comme la fenêtre ferait croire à une fin de page.
   « svh » et non « vh » : sur un téléphone, « vh » compte la barre d'adresse
   rétractée, et la bande dépasserait du pli tant qu'on n'a pas défilé. */

/* ---------- La barre de commande, au-dessus de la bande ---------- */
.univers-barre{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-top:clamp(26px,3vw,38px);
}
/* Deux boutons seulement, et pas de pastille glissante : le curseur ambre de
   « .accueil-choix » est fabriqué par le script pour ce sélecteur-là, et le
   dupliquer pour deux choix aurait été beaucoup de mécanique pour un aller-retour.
   Le fond est peint par le bouton actif, comme dans la version sans script du
   sélecteur des quatre temps.

   Dix-huit octobre 2026 : cette forme sert maintenant deux fois. Le sélecteur
   « Titulaire / Kiné » de la section « Titulaire ou kiné » la prend aussi, à la
   demande du porteur, et la raison donnée ci-dessus devient la sienne mot pour
   mot — deux choix, un aller-retour, pas de parcours à figurer. Les règles sont
   partagées plutôt que recopiées : quinze déclarations dupliquées auraient divergé
   à la première retouche.

   Le même jour, plus tard : cette mise en commun-ci est la seule qui reste. Le
   sélecteur « Titulaire / Kiné » était né d'un copier-coller de celui des quatre
   temps et avait emporté son curseur glissant avec lui ; l'appel est parti quand
   il a pris la forme d'ici, et « brancherCurseur » n'a de nouveau qu'un appelant
   dans accueil.js. Le détail vaut d'être su parce qu'il a laissé un défaut
   visible le temps d'une version — l'étui avait déjà la forme d'ici pendant que
   le script insérait encore la pastille de là-bas, laquelle, faute de boutons
   positionnés sous elle, se peignait par-dessus le mot « Titulaire ». Reprendre
   un aspect ne suffit pas : il faut aussi débrancher ce que l'ancien avait en
   propre.

   Le nom « .univers-comptes » ne couvre plus ce qu'il désigne, puisque l'autre
   sélecteur ne commande pas des comptes et n'est pas dans l'univers. Il est gardé
   tel quel : le renommer toucherait le balisage de la démonstration et son script
   pour un gain d'étiquette, et la ligne de sélecteurs ci-dessous dit de toute façon
   qui s'en sert. */
.univers-comptes,
.accueil-choix-cotes{
  display:inline-flex;gap:4px;padding:5px;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
}
/* « align-items:baseline » et « gap:8px » alignaient l'intitulé sur le nom du
   compte. Le nom est parti le 15 octobre 2026 — voir le commentaire du balisage —
   et le bouton n'a plus qu'un texte à poser. */
.univers-comptes button,
.accueil-choix-cotes button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 18px;border:0;border-radius:999px;
  background:transparent;color:var(--text-muted);
  font-family:var(--texte);font-size:14.5px;font-weight:700;line-height:1.25;
  cursor:pointer;transition:background .16s ease, color .16s ease;
}
.univers-comptes button:not([aria-pressed="true"]):hover,
.accueil-choix-cotes button:not([aria-pressed="true"]):hover{background:var(--survol);color:var(--text);}
/* Le compte choisi était peint en ambre plein, encre sombre, avec une ombre
   portée — un bouton d'action posé au milieu d'un sélecteur. Il passe au voile
   ambré le 15 octobre 2026, à la demande du propriétaire du site, et le voile
   est celui de la barre du haut : « --survol-appuye », c'est-à-dire les 26 %
   que le menu déroulant prend quand il est ouvert, quand le simple survol en
   prend 16. Les deux intensités existaient déjà pour cette raison-là — « un menu
   ouvert doit se distinguer d'un simple survol », dit le commentaire du jeton —
   et un bouton choisi est à ce sélecteur ce qu'un menu ouvert est à la barre.

   L'ombre portée part avec le fond plein : elle soulevait une pastille opaque,
   et sous un voile transparent elle ne soulève rien, elle salit. L'encre passe
   à « --accent-ink », la paire de la maison pour un fond ambré clair — la même
   que les pastilles de rubrique du blog et que les icônes des cartes. Ce
   deuxième écart tient le contraste que le voile seul ne tiendrait plus :
   16 % et 26 % d'ambre se ressemblent de loin, deux couleurs de texte non. */
.univers-comptes button[aria-pressed="true"],
.accueil-choix-cotes button[aria-pressed="true"]{
  background:var(--survol-appuye);color:var(--accent-ink);
}

/* La liste des écrans est une légende autant qu'une commande : elle dit en neuf
   mots tout ce que l'univers contient, ce qu'aucune exploration à l'aveugle ne
   ferait. Elle est aussi la seule porte d'entrée au clavier, l'application étant
   retirée de l'arbre d'accessibilité — voir plus bas. */
.univers-ecrans{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
.univers-ecrans button{
  padding:7px 14px;border:1px solid var(--border);border-radius:999px;
  background:transparent;color:var(--text-muted);
  font-family:var(--texte);font-size:13px;font-weight:600;line-height:1.2;
  cursor:pointer;transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.univers-ecrans button:not([aria-pressed="true"]):hover{background:var(--survol);color:var(--text);}
.univers-ecrans button[aria-pressed="true"]{
  background:var(--text);color:var(--page-bg);border-color:var(--text);
}
.univers-ecrans button[hidden]{display:none;}

/* ---------- La bande ---------- */
.univers-bande{
  position:relative;
  margin-top:clamp(24px,2.8vw,36px);
  height:clamp(600px, calc(100svh - 120px), 880px);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
/* « .appli » porte déjà « position:relative » et « overflow:hidden » ; il ne lui
   manque que de remplir sa bande. Surtout : aucune des deux règles d'échelle de la
   vitrine ne l'atteint, parce qu'elle n'est ni dans « .cadre-ordi » ni dans
   « .cadre-tel ». C'est tout ce qui sépare le 100 % du tiers. */
.univers-appli{width:100%;height:100%;}
/* Les écrans sont empilés, un seul visible. « position:absolute » plutôt qu'un
   rangement en « left: n×100% » comme la vitrine : celle-ci glisse d'un écran au
   suivant parce qu'elle raconte un enchaînement, alors qu'ici on saute où l'on
   veut — et un glissement de quatre écrans pour un clic sur le cinquième serait
   un trajet qui ne veut rien dire. L'application, elle, ne glisse pas non plus. */
.univers-vue{position:absolute;inset:0;}
/* Les deux étiquettes posées sur la photo d'une fiche — le statut à gauche (« Actif »,
   « Top profil »), la disponibilité à droite (« Ouvert aux profils libéraux ») — sont
   ancrées chacune à un bord, en style en ligne relevé sur le prototype. L'univers
   montre l'application à sa taille réelle, donc à la largeur du téléphone qui la
   regarde : sous 440 px, la carte n'a plus la place des deux sur une même ligne, et la
   seconde passait sur la première. Constaté le 16 octobre 2026. Sur ces largeurs, la
   disponibilité descend d'un rang, toujours calée à droite. « !important » parce que
   la position est en ligne dans le balisage généré, qu'on ne retouche pas (README, §6) ;
   « :has » pour ne rien déplacer sur une fiche qui n'a que l'étiquette de droite. */
@media (max-width:440px){
  .univers-appli .gal:has(> span[style*="left:14px"]) > span[style*="right:14px"]{top:52px !important;}
}
.univers-vue[hidden]{display:none;}

/* Les deux plafonds de largeur du format bureau, défaits. La vitrine les élargit
   — 720 → 920 et 470 → 600 — parce qu'on la regarde au tiers et qu'une colonne
   étroite au milieu d'un vide n'y est plus une colonne mais une bande. Ici on est
   à 100 % : la raison tombe, et l'application reprend ses vraies mesures. Cinq
   crans de spécificité pour passer devant les quatre de « kinome.css » ; à égalité
   l'ordre des feuilles suffirait, mais il tient à ce qu'« accueil.css » reste
   chargée après, ce qui n'est pas une chose dont une règle doit dépendre. */
.appli.univers-appli[data-format="bureau"] .screen:not(.large){
  max-width:720px;margin-left:auto;margin-right:auto;
}
.appli.univers-appli[data-format="bureau"] .swipe-zone .scroll{
  padding-inline:max(20px, calc((100% - 470px) / 2)) !important;
}

/* ---------- Ce qui répond, et ce qui ne répond pas ----------
   Le relevé contient sept entrées de rail, deux barres d'onglets et une trentaine
   de boutons ; dix-sept d'entre eux mènent quelque part, parce que le pavé de
   démonstration a capturé leur destination. Les autres n'en ont pas, et on ne va
   pas l'inventer. Reste à le dire sans l'écrire : le curseur de main est retiré à
   tout, puis rendu à ce qui bouge. C'est la convention du navigateur lui-même, et
   elle ne demande aucune phrase.
   « .appli.univers-appli * » fait deux classes, assez pour passer devant les
   « .appli button{cursor:pointer} » et « .appli .gonio-btn{cursor:pointer} » de la
   feuille de l'application, qui n'en font qu'une et un élément. */
.appli.univers-appli *{cursor:default;}
.appli.univers-appli .univers-vif{cursor:pointer;}
/* L'anneau suit les coins arrondis du bouton tout seul — les navigateurs d'aujourd'hui
   font épouser le « border-radius » par le contour. Un fond ou une ombre, à la place,
   auraient repeint des boutons que l'application dessine déjà. */
.appli.univers-appli .univers-vif:hover{outline:2px solid var(--accent);outline-offset:1px;}
/* Sauf sur les repères de la vue carte (17 octobre 2026) : l'anneau dessinait un
   rectangle autour d'une goutte, et le repère dit déjà qu'il se touche — il grossit
   quand on l'ouvre, comme dans l'application. */
.appli.univers-appli [data-action="repere"].univers-vif:hover{outline:none;}

/* ---------- Le voile du kinôme, remis sur ses pieds ----------
   Quatrième reprise du même voile, après celle du pavé (« kinome.css »), celle du
   téléphone du hero et celle de son ordinateur. Toutes les quatre pour la même
   raison, dite une fois pour toutes dans « kinome.css » : le voile du produit
   compte sur « animation-fill-mode: both » pour être invisible avant son heure, et
   hors de l'application cette ruse se retourne. Ici elle se retourne plus fort
   qu'ailleurs — les cinq « @keyframes » que la feuille de l'application lui donne
   sont écrites « .appli 0% » au lieu de « 0% », ce qui n'est pas un sélecteur
   d'étape valide : le navigateur les jette, l'animation n'a plus d'étapes, et le
   voile reste à opacité pleine pour toujours. Dans la vitrine on ne le voyait pas,
   puisque les trois autres reprises déclarent toutes leur propre repos. Ici il
   couvrait l'écran du kinôme, et avec lui les deux seules commandes qui en sortent.
   (Le défaut est dans « app.css », qui est produit par « assembler-demo.py » —
   « cloisonner_css » préfixe les étapes comme il préfixe les règles. Le réparer
   là-bas est un autre sujet, et le relevé ne peut pas être rejoué faute de
   « /tmp/capture ». On le contourne donc ici, et on le dit.)

   Les durées, les retards et les courbes sont ceux que l'application déclare,
   repris un par un : 0,22 s de montée, l'arc en 0,62 s, l'aiguille en 1,05 s,
   l'onde à 0,78 s, la sortie à 1,30 s. Rien n'est réglé pour cette page — ce n'est
   pas un mouvement de plus, c'est le sien, rendu jouable.

   « pointer-events:none » en permanence : dans l'application, ce voile se touche
   pour l'écarter, et c'est son script qui le retire. Il n'y a pas de script ici,
   et un voile invisible qui garde ses clics est exactement ce qui bloquait les
   deux boutons. Il ne reçoit donc plus rien, à aucun moment. */
.appli.univers-appli .match-intro{
  opacity:0;pointer-events:none;
  animation:univers-mi-voile .22s ease-out both,
            univers-mi-sortie .42s ease-in 1.3s forwards;
}
.appli.univers-appli .mi-arc{
  animation:univers-mi-trace .62s cubic-bezier(.33,1,.68,1) .1s forwards;
}
.appli.univers-appli .mi-needle{
  animation:univers-mi-aiguille 1.05s cubic-bezier(.34,1.32,.64,1) .1s forwards;
}
.appli.univers-appli .mi-onde{
  animation:univers-mi-onde .85s cubic-bezier(.22,1,.36,1) .78s forwards;
}
/* Les cinq animations repartent de zéro chaque fois que l'écran du kinôme revient,
   et c'est voulu : un élément en « display:none » ne joue rien, et le montrer remet
   ses animations au début. Le geste se rejoue donc à chaque arrivée — comme dans
   l'application, où l'on arrive aussi sur un kinôme à chaque fois. */
@keyframes univers-mi-voile{from{opacity:0;}to{opacity:1;}}
@keyframes univers-mi-sortie{to{opacity:0;transform:scale(1.07);}}
@keyframes univers-mi-trace{to{stroke-dashoffset:0;}}
@keyframes univers-mi-aiguille{
  0%  {transform:rotate(-52deg);}
  42% {transform:rotate(46deg);}
  72% {transform:rotate(-31deg);}
  100%{transform:rotate(-20deg);}
}
@keyframes univers-mi-onde{
  0%  {transform:scale(.45);opacity:0;}
  22% {opacity:.55;}
  100%{transform:scale(4.4);opacity:0;}
}

@media (prefers-reduced-motion: reduce){
  .univers-comptes button,
  .accueil-choix-cotes button,
  .univers-ecrans button{transition:none;}
  /* Sans animation, le voile reste à son repos et l'écran du kinôme se montre nu —
     c'est le raccourci que prennent déjà les trois autres reprises, et il tient
     parce que le repos est déclaré sur l'élément et non laissé au « fill-mode ». */
  .appli.univers-appli .match-intro,
  .appli.univers-appli .mi-arc,
  .appli.univers-appli .mi-needle,
  .appli.univers-appli .mi-onde{animation:none;}
}

@media (max-width:900px){
  /* Le format bascule en téléphone sous ce seuil — c'est le script qui change
     l'attribut, le CSS ne sait pas le faire. Dix des seize écrans y retrouvent au
     passage le format dans lequel ils ont été relevés.

     Ce plancher de 800 px est mesuré, pas choisi. On avait d'abord raccourci la
     bande à 720 px en se disant qu'un portable n'a pas 880 px à donner — c'était
     une erreur : les écrans du format téléphone ne se compriment pas tous. La
     carte de la découverte a une hauteur propre, son bouton « Voir le profil
     complet » tombe à 721 px du haut, tandis que la barre d'onglets est collée au
     bas de la bande. En dessous de 790 px les deux se recouvrent et le bouton
     devient inatteignable. On prend 800 px, et l'on plafonne à 880, la hauteur
     même à laquelle les écrans ont été relevés (la vitrine les y rend puis les
     réduit à l'échelle ; ici on ne réduit pas, on montre à taille réelle).
     Sur un écran plus court que 800 px la bande dépasse donc la fenêtre : c'est
     voulu, la page défile. Mieux vaut faire défiler qu'amputer. */
  .univers-bande{height:clamp(800px, calc(100svh - 96px), 880px);}
  .univers-comptes,
  .accueil-choix-cotes{width:100%;justify-content:center;}
  .univers-comptes button,
  .accueil-choix-cotes button{flex:1;justify-content:center;}
}
@media (max-width:560px){
  /* Une règle empilait ici le nom du compte sous son intitulé, « Côté cabinet
     Cabinet Bellevue Kiné » sur une ligne faisant se replier les deux boutons
     n'importe où. Le nom est retiré le 15 octobre 2026 et la règle avec lui :
     « Côté cabinet » tient sur une ligne à n'importe quelle largeur. */
  .univers-ecrans button{font-size:12.5px;padding:6px 11px;}
}

/* ============================================================================
   10. Ressources
   ============================================================================
   Les billets du blog, repris par la page d'accueil qui ne les montre pas :
   elle n'en a qu'un lien dans sa barre. Le site de référence consacre une section
   entière à ses contenus, juste avant les questions — à l'endroit où le visiteur
   qui n'est pas prêt à s'inscrire cherche à lire plutôt qu'à agir. C'est la seule
   sortie que la page lui offre qui ne soit pas la fermeture de l'onglet. */
.accueil-ressources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(30px,3.4vw,44px);}
/* Le blog est retombé à un article le 15 octobre 2026 (les billets du 17 et du
   24 septembre sont retirés). Une seule carte dans une grille de trois colonnes
   se range à gauche et laisse les deux tiers droits vides : le visiteur ne lit
   pas « un article », il lit « deux articles n'ont pas chargé ».
   « .seule » ramène la grille à une colonne centrée, large de 400 px — soit la
   largeur qu'une carte avait déjà quand elles étaient trois,
   (1240 − 2 × 18) / 3 ≈ 401 px. La carte garde donc exactement les proportions
   qu'on lui connaît ; c'est le vide autour d'elle qui disparaît, pas elle qui
   s'étire. Une carte étirée sur 1240 px aurait eu deux lignes de texte perdues
   dans une bande, ce qui est l'autre manière de signaler une avarie.
   La classe se retire du balisage le jour où un deuxième article paraît : la
   règle de trois colonnes au-dessus n'a pas bougé et reprend seule. */
.accueil-ressources.seule{grid-template-columns:minmax(0,400px);justify-content:center;}
.accueil-ressource{
  display:flex;flex-direction:column;gap:12px;
  padding:26px 24px 24px;border-radius:var(--radius-lg);
  background:var(--bg);border:1px solid var(--border);
  text-decoration:none;color:inherit;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.accueil-ressource:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent);}
.accueil-ressource-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.accueil-ressource-meta span{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;
  background:var(--accent-soft);color:var(--accent-ink);
}
.accueil-ressource-meta time{font-family:var(--mono);font-size:11px;color:var(--text-muted);}
.accueil-ressource h3{font-size:17.5px;line-height:1.3;}
.accueil-ressource p{margin:0;font-size:14.5px;color:var(--text-muted);}
.accueil-ressources-suite{margin:clamp(26px,3vw,36px) 0 0;text-align:center;}

/* ============================================================================
   11. Pied en colonnes
   ============================================================================
   Le pied de la page d'accueil est une seule rangée de sept liens. Il convient à
   une page dont la barre de navigation couvre déjà tout ; il ne convient pas à
   celle-ci, où quatre chapitres sont pliés derrière un sélecteur. Les colonnes
   rendent en bas de page la carte complète du site — c'est le rôle que le site de
   référence leur donne, et c'est pour cela qu'elles portent des titres.

   Dix-huit octobre 2026, demande du porteur : « sur tout le pied de page, tout
   mettre beaucoup plus petit niveau taille de police ». Les cinq corps du pied
   descendent donc — la marque de 19 à 14 px (elle est posée dans le balisage, voir
   index.html), son paragraphe et les liens de 14,5 à 11, les titres de colonne de
   12,5 à 10, la mention du bas de 11 à 9.

   Le pied est le seul endroit de la page où cela se fait sans rien coûter, et la
   raison vaut d'être écrite parce qu'elle ne vaut que là : on ne lit pas un pied
   de page, on y cherche un mot qu'on connaît déjà. Le corps n'y sert pas à rendre
   la lecture confortable mais à rendre le repérage possible, et un plan de site en
   petit se balaie mieux qu'en grand — il tient dans un regard au lieu de deux.
   Le même geste appliqué à une section du corps de page serait une faute.

   Premier essai du même jour, et ce qu'il a appris : les corps étaient descendus à
   12 / 10,5 / 9,5 et « gap:10px » avait été laissé tel quel, au motif écrit ici que
   « à 12 px le lien fait environ 17 px de haut, et les 10 px d'écart portent le pas
   à 27 ». Les deux nombres étaient prédits, aucun n'était mesuré, et les deux
   étaient faux. Mesuré ensuite à 390 px : le lien faisait 14,5 px de haut et le pas
   36,7. L'écart ne venait pas de « gap » mais du « li », haut de 26,7 px à lui seul.
   Surtout, la mesure a montré ce que le raisonnement avait manqué : « a » était
   « display:inline », donc sa boîte cliquable ne faisait que la hauteur des lettres
   et que la largeur du mot — bien pire que ce que la phrase laissait croire, et
   le raisonnement sur « l'écart qui rend la surface de touche » ne tenait pas,
   puisqu'un écart entre deux boîtes n'appartient à aucune des deux.

   D'où la forme retenue : « display:block » et « padding:6px 0 » sur le lien, et
   « gap » ramené de 10 à 4 px pour que la hauteur totale n'augmente pas. Mesuré à
   390 px :

                              avant        après
     corps du lien .......    12 px        11 px
     boîte cliquable .....    14,5 px      29,8 px   (et 350 px de large, tout le rang)
     pas entre deux liens     36,7 px      33,8 px
     hauteur du pied .....    743 px       722 px

   La boîte cliquable double donc pendant que le corps diminue, ce qui est l'inverse
   du compromis annoncé au premier essai. Elle reste sous les 44 px recommandés —
   le pied n'y est toujours pas conforme — mais il s'en approche au lieu de s'en
   éloigner, et c'est maintenant le « gap » de 4 px qui sépare deux cibles au lieu
   de 10 px de vide pris à l'intérieur d'aucune. Le sujet général est ouvert
   ailleurs.

   Troisième passage du même jour, et c'est le plus efficace des trois : « en pied
   de page mettre "le parcours", "vous êtes" et "en savoir plus" sur 3 colonnes
   l'une à côté de l'autre ». La règle est au chapitre 12, à 980 px ; la gouttière
   resserrée qui l'accompagne est au même endroit, à 560. Mesuré à 390 px :

                              empilé       sur trois colonnes
     colonnes du plan ....    350 px        107 px chacune
     gouttière ...........     26 px         14 px
     hauteur du pied .....    722 px        439 px

   Deux cent quatre-vingt-trois pixels rendus, soit un tiers d'écran de téléphone,
   et c'est ce que les trois demandes de la journée cherchaient ensemble sans que
   celle-ci le dise : le pied pesait deux écrans à lui seul. Quatre libellés sur
   dix passent à deux lignes dans 107 px — « 04 · Arriver au cabinet », les deux
   premiers de « Vous êtes », « Questions fréquentes ». Vu à l'écran et accepté :
   un plan de site se balaie par colonnes, et un libellé sur deux lignes dans sa
   colonne se retrouve mieux qu'un libellé sur une ligne dans une liste de dix.

   Ce qui n'a pas été fait : réduire encore le corps pour que tout tienne sur une
   ligne. Il faudrait descendre vers 8 px, et le pied serait illisible pour gagner
   quatre retours à la ligne qui ne gênent personne. */
.accueil-pied{border-top:1px solid var(--border);padding:clamp(44px,5vw,66px) 0 34px;}
.accueil-pied-grille{
  display:grid;grid-template-columns:1.5fr repeat(3,1fr);
  gap:clamp(26px,3vw,46px);
}
.accueil-pied-marque p{
  margin:16px 0 0;max-width:34ch;
  font-size:14.5px;color:var(--text-muted);
}
.accueil-pied-col h2{
  font-family:var(--texte);font-size:12.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text);
  margin-bottom:14px;
}
.accueil-pied-col ul{display:flex;flex-direction:column;gap:10px;}
.accueil-pied-col a{font-size:14.5px;color:var(--text-muted);text-decoration:none;}
.accueil-pied-marque .marque{font-size:19px;}
.accueil-pied-marque .marque svg{width:22px;height:22px;}
/* Téléphone seulement (900 px et moins) : le pied resserré du 18 octobre 2026. */
@media (max-width:900px){
  .accueil-pied-col ul{gap:4px;}
  .accueil-pied-col a{font-size:11px;display:block;padding:6px 0;}
  .accueil-pied-marque .marque{font-size:14px;}
  .accueil-pied-marque .marque svg{width:17px;height:17px;}
  .accueil-pied-marque p{font-size:11px;}
  .accueil-pied-col h2{font-size:10px;}
  .accueil-pied .accueil-pied-bas small{font-size:9px;}
  .accueil-pied .accueil-pied-legal{gap:4px 16px;}
  .accueil-pied .accueil-pied-legal a{font-size:11px;}
}
.accueil-pied-col a:hover{color:var(--text);}
.accueil-pied-bas{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  margin-top:clamp(34px,4vw,52px);padding-top:22px;
  border-top:1px solid var(--border);
}
/* « space-between » répartit le copyright à gauche et les trois textes légaux à
   droite (17 octobre 2026). Ils sont dans la rangée du bas et non dans une colonne :
   les colonnes font la carte du site, ces liens-là sont attendus en bas de page, et
   c'est là qu'on les cherche. Sur téléphone, la rangée passe à la ligne d'elle-même. */
.accueil-pied-legal{display:flex;flex-wrap:wrap;gap:8px 22px;}
.accueil-pied-legal a{font-size:13px;color:var(--text-muted);text-decoration:none;}
.accueil-pied-legal a:hover{color:var(--text);}
.accueil-pied-bas small{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--text-muted);
}

/* ============================================================================
   12. Rétrécissements
   ============================================================================
   Les seuils sont ceux de la page d'accueil, repris volontairement : 980 px là où
   les grilles de trois passent à une, 900 px là où l'en-tête se replie, 720 et
   560 pour les grilles de quatre. Inventer d'autres points de rupture ferait deux
   pages qui ne se comparent plus — on ne saurait pas si une différence vient de la
   hiérarchie ou du seuil. */
@media (max-width:1100px){
  .accueil-volet{grid-template-columns:1fr;gap:30px;}
  /* L'illustration passe sous le texte, pas au-dessus : en une colonne, c'est la
     phrase qui doit arriver la première. L'ordre du balisage est déjà celui-là. */
  .accueil-faq{grid-template-columns:1fr;}
  .accueil-faq-tete{position:static;}
}
@media (max-width:980px){
  .accueil-ressources{grid-template-columns:1fr;}
  /* Dix-huit octobre 2026 : « en pied de page mettre "le parcours", "vous êtes" et
     "en savoir plus" sur 3 colonnes l'une à côté de l'autre ». La grille de deux
     qui tenait ici coupait justement ces trois colonnes en deux rangs — la marque
     et « Le parcours » en haut, les deux autres en dessous — c'est-à-dire qu'elle
     séparait les trois rubriques du plan du site, qui se lisent ensemble, et
     appariait la première avec la marque, qui n'est pas une rubrique.

     La marque prend donc son rang à elle, et les trois rubriques le leur. Même
     règle jusqu'en bas de la gamme : il n'y a plus de repli à une colonne sous
     560 px, c'est lui que la demande visait. */
  .accueil-pied-grille{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .accueil-pied-grille{grid-template-columns:repeat(3,minmax(0,1fr));}
  .accueil-pied-marque{grid-column:1/-1;}
}
@media (max-width:760px){
  .accueil-bloc{padding:clamp(30px,6vw,44px) clamp(18px,4.5vw,28px);}
}
@media (max-width:560px){
  /* « .accueil-pied-grille{grid-template-columns:1fr;} » est partie d'ici le
     18 octobre 2026 : c'était elle qui empilait les trois rubriques du pied sur le
     téléphone, et la demande était de les mettre côte à côte. La gouttière, en
     revanche, ne peut pas rester celle du grand écran — « clamp(26px,3vw,46px) »
     donnait 26 px, soit 52 px de vide sur les 350 px disponibles à 390. Elle se
     resserre donc le temps que trois colonnes tiennent dans la largeur d'un
     téléphone. Mesuré après coup, voir le relevé au chapitre 11. */
  .accueil-pied-grille{gap:22px 14px;}
  /* Le sélecteur n'est plus réglé ici : il l'est au chapitre 13, où il passe à quatre
     colonnes au lieu de deux. La grille de deux a vécu du 5 au 18 octobre 2026 — elle
     corrigeait bien la pilule, qui ne veut rien dire sur deux rangs, mais elle gardait
     les deux rangs. Voir le chapitre suivant pour ce qu'on y a gagné et perdu. */
}

/* Le mouvement réduit n'a rien à retirer ici : les apparitions et les boucles sont
   déjà coupées par la feuille principale, et le sélecteur n'anime que des couleurs.
   Seul le décalage du lien secondaire au survol est un mouvement, et il est assez
   petit pour ne gêner personne — mais il ne coûte rien de l'arrêter. */
@media (prefers-reduced-motion: reduce){
  .accueil-suite:hover{gap:8px;}
  .accueil-ressource:hover{transform:none;}
}

/* ============================================================================
   13. Le téléphone
   ============================================================================
   Écrit le 18 octobre 2026, après un relevé complet de la page à 390 × 844.

   Ce chapitre n'est pas un treizième lot de rétrécissements : les douze premiers
   décrivent une page qui rétrécit, celui-ci décrit une page qui se recompose. La
   différence se mesurait au relevé — la page passait de 11,0 écrans sur un portable
   à 15,1 sur un téléphone, soit 28 % de pixels en plus pour le même texte. Une page
   qui ne fait que rétrécir ne grandit pas de 28 % : ce qui grandissait, ce sont les
   rangs supplémentaires pris par tout ce qui se repliait en colonne. Le pied passait
   de une à quatre hauteurs, le sélecteur de un rang à deux, les neuf outils de trois
   rangs à neuf. Chaque repli pris isolément était raisonnable ; leur somme faisait
   une page qu'on ne finit pas.

   Le chapitre est donc écrit dans l'autre sens — remettre côte à côte ce qui peut
   l'être, et réduire ce qui occupe sans rien montrer de plus en grand. Il se range
   après les rétrécissements et non parmi eux, parce qu'il les contredit par endroits
   et qu'il vaut mieux que cela se voie.

   Deux seuils, tous deux déjà en service dans la page : 760 px, celui de la gouttière
   des pavés, et 620 px, celui du montage de la signature. Aucun seuil nouveau, pour
   la raison écrite au chapitre 12.
   ---------------------------------------------------------------------------- */

/* ---------- Le sélecteur des quatre temps, sur un seul rang ----------
   « Les étapes doivent être les unes à côté des autres », et c'est plus qu'une
   préférence de mise en page : ce sélecteur est la seule chose qui dise au visiteur
   que les quatre volets forment un parcours. Sur deux rangs, il n'en dit plus rien —
   deux rangs de deux se lisent comme quatre vignettes, et l'étape qu'on regarde n'a
   plus de rang dans une suite. C'était le défaut le plus coûteux du relevé, parce
   qu'il touchait la seule section de la page qui raconte un ordre.

   Quatre colonnes à 390 px laissent 72 px par bouton, dont 64 pour le texte. Trois
   des quatre libellés y tiennent sur une ligne ; « Arriver au cabinet » y tient sur
   deux, à 11,5 px — mesuré « Arriver au » à 57 px. Les quatre boutons gardent la même
   hauteur sans qu'on l'écrive, la grille les étirant sur la plus haute : c'est ce qui
   permet de garder le libellé long tel quel, alors qu'il avait été arbitré par le
   porteur le 15 octobre 2026 et qu'on ne va pas le raccourcir sur téléphone pour
   des raisons de place.

   Le curseur suit sans retouche : « placerCurseur() » lit « offsetLeft / offsetTop /
   offsetWidth / offsetHeight » du bouton actif, qui ne disent rien de la disposition
   qui les a produits, et il est déjà rappelé au redimensionnement. */
@media (max-width:760px){
  .accueil-choix{
    display:grid;grid-template-columns:repeat(4,1fr);gap:5px;
    width:100%;padding:4px;
  }
  .accueil-choix button{
    justify-content:center;text-align:center;
    padding:11px 7px;font-size:13px;line-height:1.2;
  }
}
/* Les arrondis de ce palier ont été retirés le 18 octobre 2026, à la demande du
   porteur : « la forme de la sélection doit être ovale et pas rectangle arrondi ».
   Il y en avait quatre — l'étui à « --radius-md », les boutons, le curseur et le
   bouton actif sans script à « --radius-sm » —, et les supprimer suffit : les
   règles de base rendent alors leurs 999 px, c'est-à-dire la forme qu'a déjà le
   sélecteur au-dessus de 760 px. La demande revient donc à ne plus rien dire de
   particulier au téléphone.

   Ce qui est écrit juste en dessous est l'ancienne raison, et elle est gardée
   parce qu'elle reste exacte : elle explique pourquoi l'arrondi du curseur avait
   été aligné sur celui des boutons, pas pourquoi les boutons étaient carrés.
   « Le curseur reprend l'arrondi des boutons. Il gardait ses 999 px pendant que la
   pilule devenait une grille, ce qui donnait un stade orange de 72 px de large
   derrière un bouton carré — et comme le bouton est transparent, c'est le curseur
   qu'on voit : la case active n'avait pas la forme des trois autres. Le défaut
   existait déjà avec la grille de deux, où il se remarquait moins parce que les
   cases étaient plus larges. »

   L'accord qu'elle demandait tient toujours, par l'autre bout : les quatre arrondis
   valent de nouveau 999 px ensemble, donc le curseur a encore la forme du bouton
   qu'il remplit. Et comme un arrondi de 999 px est en réalité plafonné à la moitié
   du plus petit côté, la géométrie reste concentrique — mesuré à 390 px, l'étui
   fait 312 × 58 et s'arrondit à 29, le bouton 72 × 48 et s'arrondit à 24, pour
   4 px de rembourrage entre les deux : 29 − 4 = 25, à un pixel du compte. C'est
   ce qui fait qu'une pilule dans une pilule ne montre pas de croissant aux coins,
   et c'est aussi pourquoi l'étui devait repasser à 999 px avec les boutons : laissé
   à 16 px, il aurait été moins arrondi que ce qu'il contient.

   À 320 px la forme change de caractère et il vaut mieux le savoir avant de croire
   à un défaut : les cases y font 54 × 58, donc plus hautes que larges, et l'arrondi
   plafonné à 27 px les rend presque rondes. « Se trouver » y tient sur deux lignes
   dans un ovale vertical. C'est la même règle qui produit les deux aspects, et
   c'est voulu — un arrondi plafonné suit la case au lieu de lui imposer une forme. */
/* Le corps et la gouttière sont fluides, et c'est ce qui évite un palier de plus.
   Quatre colonnes se partagent la largeur intérieure du pavé, mais « 1fr » vaut
   « minmax(auto,1fr) » : une colonne ne descend pas sous la taille de son plus long
   mot insécable. À 320 px, « Échanger » demandait 60 px pour 54 de part, prenait les
   six pixels aux trois autres, et les quatre cases n'avaient plus la même largeur —
   un sélecteur dont les cases diffèrent sans raison n'est plus un sélecteur.
   La correction par palier marchait, mais il aurait fallu l'inventer : 11,5 px tient
   jusqu'à 360 et pas plus bas. En « clamp », le corps descend à 10,5 px à 320 px et
   remonte à 11,5 px dès 383, « Échanger » mesure 54 px pour 54 de part, et les quatre
   cases restent égales sur tout l'intervalle sans qu'aucun seuil n'ait été ajouté. */
@media (max-width:620px){
  .accueil-choix button{
    padding:10px clamp(3px,1.2vw,4px);
    font-size:clamp(10.5px,3vw,11.5px);
    letter-spacing:0;
  }
}

/* ---------- Les trois métiers de l'en-tête, en un seul objet ----------
   Les trois pastilles posaient deux problèmes à la fois, et le second est la raison
   pour laquelle on ne pouvait pas se contenter de corriger le premier.

   Elles se cassaient en 2 + 1 : « Recruter un kiné » et « Trouver un cabinet » sur le
   premier rang, « Préparer l'arrivée » seule en dessous. Trois éléments d'égale
   importance dont un est rejeté sur un rang à lui se lisent comme deux plus un, et
   c'est faux — ce sont les trois entrées du produit.

   Elles se lisaient surtout comme trois boutons. Fond, contour, rayon de 999 px et
   graisse 700 : tout ce qui distingue une pastille d'un bouton dans cette page, c'est
   qu'on ne peut pas cliquer dessus. Sur un portable, la souris tranche en une seconde
   — pas de curseur en main, pas de bouton. Sur un téléphone il n'y a pas de survol :
   la seule façon de savoir est d'appuyer, et de ne rien obtenir. Trois faux boutons
   dans les trois cents premiers pixels de la page, c'est la première chose que le
   visiteur apprend du site, et elle est fausse.

   Ce qu'on ne peut pas faire, et c'est écrit en entier au chapitre 2 : retirer le fond.
   Essayé le 5 octobre 2026, et le constat de l'époque vaut toujours — « le fond ne
   faisait pas que décorer, il constituait l'encart ; l'enlever n'a pas rendu les
   pastilles transparentes, il a supprimé les pastilles. » Les trois rôles redevenaient
   une ligne de surtitre que personne ne remarquait.

   La sortie est de déplacer l'encart au lieu de l'enlever : le fond, le contour et le
   rayon passent du bouton au groupe. Il reste un objet — l'œil voit toujours un encart
   sous le titre, c'est ce que le 5 octobre avait démontré indispensable — mais un seul,
   et les trois rôles y deviennent trois colonnes séparées par un filet. Un objet unique
   divisé par des filets n'est le dessin d'aucun bouton ; c'est le dessin d'un tableau,
   et il se lit comme ce qu'il est : trois choses qu'on peut faire ici.

   Trois colonnes égales de 104 px à 390 px, et les libellés passent naturellement sur
   deux lignes — « Recruter / un kiné », « Trouver / un cabinet », « Préparer /
   l'arrivée ». Les trois ont la même forme, ce qui est encore une façon de dire qu'ils
   sont du même ordre. L'orangé de « .metier-kine » reste l'orangé : c'est l'arbitrage
   du 5 octobre, et il est documenté au chapitre 2 avec ses chiffres de contraste. */
@media (max-width:760px){
  /* Dix-huit pixels de dégagement sous l'en-tête, et ils sont nécessaires. Le hero
     remonte de 76 px pour passer sous la barre flottante puis se rembourre de 88 :
     son premier élément commence donc à 74 px, pour une barre qui descend à 76. Les
     anciennes pastilles chevauchaient déjà l'en-tête de deux pixels, mais c'étaient
     trois petites puces espacées — on ne lisait pas la collision. Un bandeau large de
     350 px sous une barre large de 354, les deux arrondis et à deux pixels l'un de
     l'autre, se lit comme un deuxième étage de l'en-tête. */
  .accueil-metiers{
    display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    width:100%;margin-top:18px;
    background:color-mix(in srgb, var(--surface) 30%, transparent);
    border:1px solid color-mix(in srgb, var(--border) 45%, transparent);
    border-radius:var(--radius-md);
    overflow:hidden;
  }
  .accueil-metiers span{
    display:flex;align-items:center;justify-content:center;text-align:center;
    padding:9px 6px;
    background:none;border:0;border-radius:0;
    font-size:12.5px;line-height:1.25;
    text-wrap:balance;
  }
  /* Le filet est porté par les deuxième et troisième cases, et pas par un
     « + span » : l'enfant d'indice 1 n'existe que s'il y a trois rôles, et le jour
     où il y en aura quatre la règle suivra sans qu'on y pense. */
  .accueil-metiers span + span{
    border-left:1px solid color-mix(in srgb, var(--border) 45%, transparent);
  }
}

/* ---------- Les deux appels à l'action, côte à côte ----------
   Empilés, ils prenaient 118 px de haut pour deux liens, et surtout ils mettaient
   « Voir la démo » sous « Créer mon profil Kinôme » au lieu d'à côté : un choix entre
   deux options devient une option suivie d'une autre, et la seconde se lit comme un
   repli. Côte à côte, ils redeviennent ce qu'ils sont — deux portes d'entrée, dont
   une est colorée.

   Les cotes sont tenues par la mesure et pas par l'œil. À 15 px, les deux libellés
   font 165 et 85 px de texte ; avec la gouttière intérieure de 30 px héritée du hero,
   le couple demande 382 px pour 350 disponibles, et c'est pour cela qu'ils se
   cassaient. À 13,5 px et 14 px de gouttière, ils demandent 292 px — 275 sur un écran
   de 360. La hauteur reste au-dessus du seuil de la pulpe du doigt : 13 px de
   gouttière verticale et une ligne de 16 font 45 px, pour 44 demandés. Baisser encore
   le corps ferait passer les boutons sous ce seuil avant de les faire déborder, et
   c'est donc la gouttière qu'il faudrait reprendre, pas la police.

   « nowrap » sur la rangée et sur chaque libellé : sans le second, un bouton coupé en
   deux lignes grandirait en hauteur et désalignerait le couple — ce qui est pire que
   le débord, puisque ça ne se voit pas tout de suite. S'ils ne tiennent plus un jour,
   c'est un libellé qu'il faut raccourcir, pas un retour à la ligne qu'il faut
   autoriser. */
@media (max-width:620px){
  .accueil-hero-texte .accueil-action{
    flex-wrap:nowrap;gap:10px;margin-top:24px;
  }
  /* Corps et gouttière fluides, pour la même raison qu'au sélecteur : à 320 px — le
     plancher qu'on se donne — le couple demandait 290 px pour 280, et « flex-shrink »
     rognait les deux boîtes de deux pixels chacune sans que le texte, en « nowrap »,
     rétrécisse avec elles. Un libellé qui dépasse de sa pastille de deux pixels ne se
     voit pas en relisant la règle, seulement en mesurant. Le « clamp » ramène le
     couple à 271 px pour 280 à cette largeur-là — neuf pixels de jeu, ce qu'il faut
     pour qu'une police rendue un peu plus large qu'attendu ne recasse pas la rangée —
     et rend les 13,5 px pleins dès 397. */
  .accueil-hero-texte .accueil-action .bouton{
    flex:0 1 auto;min-width:0;justify-content:center;
    padding:13px clamp(9px,3.4vw,14px);
    font-size:clamp(12px,3.4vw,13.5px);
    white-space:nowrap;
  }
}

/* ---------- Le téléphone du hero, à sa mesure ----------
   La feuille principale lui rend l'échelle de la pleine largeur dès que l'ordinateur
   s'en va — 0,76 sous 900 px, 0,70 sous 460, 0,62 sous 380 — et la raison y est écrite :
   laisser l'échelle de la cohabitation donnerait un téléphone de 136 px au milieu d'une
   page de 900. Le raisonnement est juste à 900 px et se retourne à 390 : l'appareil
   occupait alors 288 px de large pour 600 de haut, soit les trois quarts de la largeur
   et les deux tiers du premier écran, avant même que la page ait commencé.

   Le hero d'un téléphone ne doit pas montrer un téléphone grandeur nature ; il doit
   montrer qu'il y en a un, et laisser voir le début de ce qui suit. On le ramène donc
   à 0,56 — 231 px, un peu moins de la moitié de la largeur — ce qui rend 115 px au
   premier écran. La règle est écrite ici et non dans la feuille principale parce
   qu'elle ne vaut que pour cette scène-ci : « .cadre-tel » sert aussi aux volets plus
   bas, qui ont leur propre réglage, et aux autres pages. Trois crans de spécificité
   pour passer devant « .cadre-tel .appli », qui en compte deux. */
@media (max-width:620px){
  .accueil-scene .scene{--tel:.56;}
  .accueil-scene .cadre-tel .appli{--appli-z:.56;}
}
@media (max-width:400px){
  .accueil-scene .scene{--tel:.50;}
  .accueil-scene .cadre-tel .appli{--appli-z:.50;}
}

/* ---------- Les téléphones des volets ----------
   Même correction, autre endroit, et pour une raison de plus : dans un volet, le
   téléphone n'est pas seul en scène. Il arrive sous un titre, deux chapeaux et parfois
   une liste, et il est la dernière chose qu'on voit d'une étape avant de passer à la
   suivante. À 0,47 il mesurait 211 px de large pour 414 de haut — un demi-écran par
   volet, pour une capture dont on ne lit déjà plus le texte à cette taille.

   0,40 puis 0,36 : 180 et 162 px. On ne perd rien de lisible, puisqu'il n'y avait
   plus rien de lisible, et on rend un tiers d'écran à chacun des trois volets qui en
   contiennent un. */
@media (max-width:620px){
  .accueil-tel{--tel:.40;}
  .accueil-tel .cadre-tel .appli{--appli-z:.40;}
}
@media (max-width:400px){
  .accueil-tel{--tel:.36;}
  .accueil-tel .cadre-tel .appli{--appli-z:.36;}
}

/* ---------- L'interrupteur du profil, sur une seule ligne ----------
   Demandé le 18 octobre 2026 : « l'encart "profil en veille - recherche" : tout
   doit tenir sur une ligne ». Il n'y tenait pas — mesuré à 390 px, le contenu
   demandait 322,8 px pour 288 disponibles, et « flex-wrap:wrap » renvoyait le
   second mot sous les deux autres : la boîte faisait 129,8 px de haut et le
   troisième enfant se posait 43 px sous les deux premiers. L'encart y perdait tout
   son sens : un interrupteur se lit « état de gauche — bouton — état de droite »,
   et une fois le second état passé à la ligne, le bouton ne bascule plus entre deux
   choses mais pointe dans le vide.

   Les 34,8 px manquants sont pris sur quatre postes à la fois, parce qu'aucun ne
   les rendait à lui seul sans se voir. Relevé après coup sur la page, à 390 px
   puis à 320 — l'encart fait 350 et 280 px de large, bordure comprise :

                             390 px        320 px
     cadre intérieur .....   316,8 px      252,4 px
     padding (×2) ........    31,2          25,6
     gouttière (×2) ......    17,9          14,7
     corps des mots ......    10,5 px        8,8 px
     les deux mots .......   197,5 px      165,1 px
     la piste ............    62 px         62 px   (inchangée)
     — demandé ...........   277,5         241,8
     — il reste ..........    39,3          10,6

   Les bornes basses des trois « clamp() » ont été desserrées une fois : au premier
   essai (gouttière 8 px, padding 14, corps 9) il ne restait rien du tout à 320 px
   — 0,0 px de libre, c'est-à-dire un encart qui tient par miracle et qui déborde
   au premier mot traduit ou à la première police de repli. Les trois valeurs sont
   descendues à 7, 12 et 8,8 px pour rendre les 10,6 px ci-dessus, soit 5,3 de part
   et d'autre puisque le contenu est centré. C'est peu, mais c'est une marge.

   L'interlettrage descend de 0,08 à 0,02 em, et c'est lui qui rend le plus : sur
   28 signes capitales il valait 18 px à lui tout seul, pour un effet qui sert une
   étiquette isolée et non deux mots qu'on compare. La piste, elle, ne bouge pas :
   sa course est écrite en dur dans « @keyframes bouton » de kinome.css
   — « translateX(30px) », soit 62 − 8 de padding − 24 de bouton — et la rétrécir
   ici ferait sortir le bouton de son rail sans que rien ne le signale.

   « flex-wrap:nowrap » et « white-space:nowrap » ensemble : le premier empêche les
   trois enfants de se répartir sur deux rangs, le second empêche chaque mot de se
   couper en deux lignes à l'intérieur de son rang. Sans le second, « tout sur une
   ligne » serait vrai de la boîte et faux de ce qu'on y lit. */
@media (max-width:620px){
  .accueil-section .veille{
    flex-wrap:nowrap;
    gap:clamp(7px,2.3vw,18px);
    padding:clamp(12px,4vw,30px);
  }
  .accueil-section .veille .veille-mot{
    font-size:clamp(8.8px,2.7vw,11px);
    letter-spacing:.02em;
    white-space:nowrap;
  }
}

/* ---------- Les neuf outils, en rouleau horizontal ----------
   « .outils » tombait à une colonne sous 520 px, dans la feuille principale comme
   ici : neuf rangs de 62 px plus huit gouttières, soit 670 px — un écran entier de
   liste à puces pour neuf mots. Deux colonnes en font cinq rangs.

   Deux colonnes demandent de redessiner la tuile, et pas seulement de changer le
   nombre de colonnes. À 390 px, deux colonnes font 149 px ; la tuile horizontale
   actuelle y laisse 64 px au libellé une fois la pastille et les gouttières déduites,
   et « Prescription d'exercice » y part en quatre lignes. La pastille passe donc
   au-dessus du mot : le libellé récupère toute la largeur intérieure, 123 px, où
   « administrative » (88 px à 13 px) tient d'un bloc et où le plus long des neuf tient
   sur deux lignes. La tuile y gagne aussi d'être carrée plutôt qu'en bandeau, ce qui
   est la forme d'une vignette d'outil partout ailleurs. Ces deux paragraphes décrivent
   la tuile, et la tuile n'a pas changé ; leurs largeurs, en revanche, sont celles de la
   grille. Dans le rouleau la colonne fait 117 px et non 149, et le libellé 91 et non
   123 — la pastille au-dessus du mot n'en est que plus nécessaire.

   Dix-huit octobre 2026. Ce chapitre se terminait sur « la hauteur finale est mesurée
   et non estimée : 99 px par tuile, cinq rangs, quatre gouttières — 551 px contre
   670 ». La phrase avait raison et ses chiffres avaient tort, ce qui est la pire
   combinaison : les tuiles ne font pas toutes 99 px — quatre libellés tiennent sur une
   ligne et donnent des rangs de 83 px, cinq en prennent deux et donnent des rangs de
   100 —, et la grille relevée aujourd'hui fait 489 px à 390 px de large, 505 à 320.
   Le reproche qu'elle adressait à la colonne unique tient quand même, et c'est lui
   qu'on retourne contre elle : 489 px de vignettes, c'est plus de la moitié de l'écran
   pour un inventaire qui n'est pas le sujet du volet. Le texte au-dessus raconte
   l'arrivée au cabinet ; les neuf noms ne font que l'énumérer.

   Deux rangs de hauteur sont le plancher d'une grille : en dessous, il faut rapetisser
   les tuiles. Un rouleau n'a pas ce plancher — il tient sur un rang quel que soit le
   nombre d'outils, et c'est la seule disposition qui absorbe les catégories à venir
   (« les outils s'ajouteront au fur et à mesure », dit la note juste au-dessus) sans
   que le volet grandisse d'un pixel. Relevé : la bande passe de 489 à 130 px et le
   volet de 919 à 530 à 390 px ; de 505 à 130 et de 995 à 589 à 320 px.

   Pas de pleine largeur. Le rouleau vit dans « .accueil-bloc », une carte arrondie à
   34 px posée à 20 px du bord de l'écran ; des tuiles qui sortiraient par sa tranche
   auraient l'air cassées et non généreuses. Le débordement s'arrête donc à la carte.

   « calc((100% - 20px) / 2.5) » montre deux tuiles et demie. La demie est l'indication :
   elle dit qu'il y a une suite sans qu'on ait à l'écrire. Deux tuiles pleines
   laisseraient croire à une paire, trois à un rang de trois.

   Cette base n'est pas toujours tenue, et on laisse faire. « min-width:auto » interdit
   à une tuile de descendre sous son contenu minimum, c'est-à-dire sous son plus long
   mot ; relevés, ces minimums valent 78, 96, 76, 76, 110, 107, 110, 121 et 84 px. La
   base vaut 116,8 à 390 px, donc seule « Gestion administrative » dépasse, de quatre
   pixels, et personne ne le verra. Elle passe sous 121 px en dessous de 400 px de
   fenêtre, et alors quatre tuiles s'élargissent : à 320 px on relève 89, 96, 89, 89,
   110, 107, 110, 121, 89. Les forcer à l'égalité demanderait « min-width:0 », et
   « administrative » sortirait de son cadre. Des vignettes à la taille de leur mot
   sont une forme connue ; un mot qui déborde est une faute.

   Le balisage donne à la bande « tabindex="0" », un rôle et un nom : une zone
   défilante doit pouvoir se parcourir au clavier, et ses tuiles ne contiennent rien de
   focalisable qui le permettrait. Le prix est un arrêt de tabulation mort au-dessus de
   520 px, là où la grille ne défile plus. On le paie : un arrêt nommé « Catégories de
   services » coûte moins cher qu'un rouleau qu'on ne peut pas atteindre.

   Une marche subsiste au seuil, et elle est assumée : à 520 px la bande fait 100 px et
   le volet 446, à 521 px la grille à deux colonnes fait 379 et le volet 756. Au-dessus
   de 520 px il y a la place de montrer les neuf d'un coup, ce qui reste préférable
   quand on peut se le permettre.

   Dix-huit octobre 2026, une heure plus tard. Le porteur a demandé que le rouleau
   avance tout seul, et trois réglages écrits ci-dessus sont tombés avec cette demande.
   Ils sont rapportés ici au lieu d'être effacés, parce que chacun redeviendrait le bon
   si le tapis s'arrêtait un jour.

     · « scroll-snap-type:x mandatory » et « scroll-snap-align:start ». L'accroche et
       le tapis se battent : le navigateur ramène à un point d'accroche après chaque
       écriture de « scrollLeft », et une écriture par image donne un rouleau qui
       tremble sur place. Le paragraphe effacé disait, mesures à l'appui, que la
       neuvième tuile restait atteignable malgré un point d'accroche hors course
       (1 014 px pour 823 de course) — c'était vrai et c'est toujours vrai ; cela ne
       sert simplement plus.
     · « padding-block:9px 21px » et la marge négative qui l'annulait. Ils donnaient
       de l'air à la levée de 4 px et à l'ombre « 0 10px 30px » de « @keyframes outil »,
       que l'« overflow-y » calculé à « auto » aurait rasées. La respiration est
       coupée dans le rouleau — deux mouvements à la fois, dont un qui soulève les
       tuiles pendant qu'elles glissent, font une bande agitée et non vivante. Sans
       levée ni ombre, plus rien à protéger : la bande passe de 130 px de boîte à 100,
       et n'occupe toujours que 100 px puisque la marge rendait déjà les 30 autres.
     · La barre de défilement, qu'on avait laissée visible. Une barre flottante
       s'efface une seconde après le dernier mouvement ; un tapis qui ne s'arrête
       jamais la laisse allumée en permanence, et c'est un trait gris qui glisse sous
       les tuiles pendant toute la visite. Elle est donc cachée — mais seulement là où
       le tapis tourne : la requête « prefers-reduced-motion: no-preference » la rend à
       qui a demandé l'arrêt des animations, et pour qui le repère de défilement reste
       utile. Le repère principal, lui, n'a pas changé de nature : c'est la demi-tuile
       de droite, et le mouvement la redouble.

   Le tapis lui-même est dans « accueil.js » : il double les tuiles pour que la boucle
   soit sans couture, et c'est pourquoi la mesure de la course relevée plus haut (823 px
   à 390) ne vaut plus telle quelle une fois le script passé. */
@media (max-width:520px){
  .accueil-volet .outils{
    display:flex;gap:10px;
    overflow-x:auto;overscroll-behavior-x:contain;
  }
  .accueil-volet .outil{
    flex:0 0 calc((100% - 20px) / 2.5);
    flex-direction:column;align-items:flex-start;gap:9px;
    padding:12px 13px;
    animation:none;
  }
  .accueil-volet .outil-ico{width:32px;height:32px;border-radius:10px;}
  .accueil-volet .outil b{font-size:13px;}
}
/* Cachée seulement là où le tapis tourne — voir le dernier point du chapitre
   ci-dessus. Pas de pseudo-élément « ::-webkit-scrollbar » en renfort : il faudrait
   le rallumer ici, et une barre qu'on cache d'un côté pour la rendre de l'autre est
   une paire de règles qui se contredisent à la lecture. « scrollbar-width » suffit
   partout depuis Chrome 121 et Safari 18.2 ; les versions d'avant garderont la barre,
   ce qui est une dégradation et non une panne. */
@media (max-width:520px) and (prefers-reduced-motion: no-preference){
  .accueil-volet .outils{scrollbar-width:none;}
}

/* ---------- Le corps du texte, à la mesure du téléphone ----------
   Mesuré le 18 octobre 2026 : sur les 12 387 px de la page à 390 px de large,
   environ 8 000 px sont du texte. Le réglage typographique ne décore donc pas
   cette page, il la dimensionne.

   Le défaut n'est pas que les titres soient grands, c'est qu'ils ne diminuent
   plus. Les trois règles qui les portent sont des « clamp() » dont le plancher
   est atteint bien avant le téléphone :

     h1 du hero    clamp(40px, 6vw,   70px)  → figé à 40 px sous 667 px
     h2            clamp(28px, 3.7vw, 42px)  → figé à 28 px sous 757 px
     .chapeau      17,5 px fixe              → jamais réduit, nulle part

   Autrement dit la page large et la page étroite portent le même corps de
   titre, à ceci près que l'une a 1 200 px pour le poser et l'autre 312. Un
   titre de 40 px dans 312 px, c'est trois lignes ; le chapeau de 17,5 px à
   1,62 d'interligne, c'est sept mots par ligne et quatorze lignes pour le
   paragraphe du quatrième volet.

   Ce qui est écrit ici n'est pas un nouveau palier mais la *suite de la
   courbe* : chaque valeur est une droite qui passe exactement par la taille
   actuelle à 620 px, puis continue de descendre au lieu de s'arrêter. Le
   maximum du « clamp() » vaut la valeur de la règle d'origine à ce point, si
   bien qu'il n'y a aucune marche à la traversée du seuil — on peut balayer la
   largeur de 1 280 à 320 px sans voir le texte sauter. C'est la raison de ces
   « calc() » d'apparence biscornue : ce sont des équations de droite, pas des
   valeurs choisies à l'œil.

   Ce que ça donne aux trois largeurs qui comptent :

                        620 px   390 px   320 px     (avant, partout)
     h1 du hero          40       30       27          40
     chapeau du hero     18       14,5     13,4        18
     h2 de section       28       21       18,9        28
     .chapeau            17,5     14,5     13,6        17,5
     h3 de volet         23       17,5     15,8        23
     h3 de volet du
       constat           20       15,5     14,1        20

   Second passage, 18 octobre 2026, demandé par le porteur : « réduire les champs
   de texte encore un peu de 2 pts ». Les colonnes 390 et 320 ci-dessus sont
   celles d'après ; le premier passage donnait 32 / 16,5 / 23 / 16 / 19,5 / 17,5 à
   390. Les maximums à 620 n'ont pas bougé d'un point — c'est tout l'intérêt
   d'écrire des droites plutôt que des valeurs : pour retrancher deux points à
   390, on ne déplace pas le palier, on incline davantage la pente, et la
   continuité au seuil est préservée sans y penser.

   Le « 0 € » du bandeau gratuit reste à son corps : c'est un chiffre-affiche, pas
   du texte courant.

   Les textes déjà petits — « .carte p » à 15,5, « .etape p » et « .temps p » à
   15, les listes à 14,5 — avaient été laissés tels quels au premier passage, au
   motif qu'ils étaient à la limite du confort de lecture et que la hiérarchie
   avec le chapeau à 16 px tenait encore. Ce motif ne tient plus tel quel : avec
   le chapeau descendu à 14,5, ces textes-là lui passeraient *au-dessus*, ce qui
   inverserait la hiérarchie au lieu de la resserrer. Ils descendent donc eux
   aussi, mais de 1,5 point et non de 2 — juste assez pour rester sous le chapeau,
   pas assez pour tomber plus bas que nécessaire. C'est la seule entorse à la
   consigne « 2 pts », et elle est volontaire : la consigne porte sur la taille
   du texte, pas sur l'ordre des tailles entre elles.

   Sélecteurs d'élément nus : vérifié le 18 octobre, la démonstration capturée
   ne contient aucun « h1 », « h2 », « h3 » ni « .chapeau » — ils sont tous dans
   la vitrine. Écrire « h2 » ici ne peut donc pas atteindre l'application, et
   « accueil.css » n'étant chargée que par « index.html », le blog n'est pas
   concerné non plus. C'est la seule raison pour laquelle on se permet ici ce
   qu'on s'interdit ailleurs.

   L'interligne du chapeau descend de 1,62 à 1,55. Un interligne se règle avec
   le corps et non après lui : 1,62 est juste pour 17,5 px sur une colonne
   large, trop aéré pour 16 px sur 312 px de large, où la ligne est courte et
   où l'œil n'a pas besoin d'autant d'aide pour retrouver la suivante. */
@media (max-width:620px){
  /* Droite passant par (620 px ; 40 px) et (390 px ; 30 px). */
  .accueil-hero-texte h1{font-size:clamp(27px, calc(13.04px + 4.35vw), 40px);}
  /* Droite passant par (620 px ; 18 px) et (390 px ; 14,5 px). */
  .accueil-hero-texte .chapeau{font-size:clamp(13.4px, calc(8.57px + 1.52vw), 18px);}
  /* Droite passant par (620 px ; 28 px) et (390 px ; 21 px). */
  h2,
  .accueil-appel h2{font-size:clamp(18.9px, calc(9.13px + 3.04vw), 28px);}
  /* Droite passant par (620 px ; 17,5 px) et (390 px ; 14,5 px). */
  .chapeau{font-size:clamp(13.6px, calc(9.41px + 1.3vw), 17.5px);line-height:1.55;}
  /* Droite passant par (620 px ; 23 px) et (390 px ; 17,5 px). */
  .accueil-volet h3,
  .projet-reponse h3{font-size:clamp(15.8px, calc(8.17px + 2.39vw), 23px);}
  /* Droite passant par (620 px ; 20 px) et (390 px ; 15,5 px). */
  .projet-cote h3{font-size:clamp(14.1px, calc(7.87px + 1.96vw), 20px);}

  /* Les petits textes, descendus de 1,5 point pour rester sous le chapeau — voir
     le raisonnement en tête de chapitre. Ces classes appartiennent à « kinome.css »
     et servent toutes les pages ; elles ne sont rabaissées qu'ici, donc seulement
     sur « index.html », parce que cette feuille n'est chargée que par elle. Le
     blog garde ses corps d'origine, et c'est voulu : un article se lit autrement
     qu'une vitrine. */
  /* Droite passant par (620 px ; 15,5 px) et (390 px ; 14 px). */
  .carte p,
  .faq p,
  .aucun-frais li{font-size:clamp(13.5px, calc(11.46px + 0.65vw), 15.5px);}
  /* Droite passant par (620 px ; 15 px) et (390 px ; 13,6 px). « .temps p » part
     du même corps dans kinome.css et aurait sa place ici, mais « .temps » ne
     figure pas sur « index.html » : la règle serait morte, on ne l'écrit pas. */
  .etape p{font-size:clamp(13.2px, calc(11.23px + 0.61vw), 15px);}
  /* Droite passant par (620 px ; 14,5 px) et (390 px ; 13,2 px). */
  .carte-liste li,
  .accueil-ressource p{font-size:clamp(12.8px, calc(11px + 0.57vw), 14.5px);}

  /* Trois corps que le premier passage n'avait pas vus, repérés en mesurant les
     feuilles de texte de la page après coup et non en relisant la feuille de
     style — c'est la seule méthode qui les trouve, parce qu'aucun ne vient d'une
     règle nommée : le h3 de carte tombe du « h3{font-size:19px} » de kinome.css,
     et le paragraphe de « .final » hérite simplement du corps de la page.

     Les trois perdent 2 points comme le reste, et comme ils partent tous d'un
     corps fixe sur un même intervalle, ils partagent la même pente : 0,87vw.
     Deux d'entre eux réparaient une inversion franche — à 19 px le titre de carte
     serait passé au-dessus du titre de volet descendu à 17,5 alors qu'il était en
     dessous à 19 contre 19,5, et le paragraphe de « .final » serait resté deux
     points au-dessus du chapeau. Le troisième, la question de FAQ, n'inversait
     rien : à 17 px contre un chapeau à 16,5 elle était à peine au-dessus, elle se
     serait retrouvée à trois points, et une question de FAQ n'est pas un titre de
     section. */
  /* Droite passant par (620 px ; 19 px) et (390 px ; 17 px). */
  .carte h3{font-size:clamp(16.4px, calc(13.61px + 0.87vw), 19px);}
  /* Droite passant par (620 px ; 17 px) et (390 px ; 15 px). */
  .faq summary{font-size:clamp(14.4px, calc(11.61px + 0.87vw), 17px);}
  /* Droite passant par (620 px ; 16,5 px) et (390 px ; 14,5 px). */
  .final p{font-size:clamp(13.9px, calc(11.11px + 0.87vw), 16.5px);}
}

/* ---------- « Deux recherches qui se rencontrent », sur un téléphone ----------
   La section était déjà empilée sous 900 px, mais empiler n'est pas composer.
   Deux défauts restaient, tous deux mesurés à 390 px le 18 octobre 2026.

   1. Deux règles horizontales pour un seul intervalle. L'écart couché laissait
      un trait pointillé de 140 px de chaque côté du « ? », et le filet de 2 px
      du constat suivant arrivait vingt pixels plus bas. Entre deux colonnes le
      trait était la seule chose qui les séparait ; empilé il doublait un filet
      déjà là. On retire donc les traits et on garde la pastille — l'argument
      long est au chapitre du constat, plus haut dans ce fichier.

      La pastille passe au fond « --accent-soft ». Son fond était « --page-bg »
      pour percer un trou dans le trait ; sans trait à percer, un disque de la
      couleur du fond n'est plus un disque, c'est un « ? » qui flotte. Même
      geste qu'ailleurs : quand le décor disparaît, l'objet qu'il portait doit
      retrouver un corps à lui.

   2. La jauge, posée debout au milieu d'une colonne de 312 px, faisait un îlot
      de 126 × 166 px centré au-dessus d'un texte ferré à gauche — soit 166 px
      de hauteur pour un dessin de 96, et deux alignements différents dans un
      bloc qui n'en veut qu'un. Couchée, elle fait 58 px de haut : l'arc à
      gauche, le score et son étiquette à droite. On y gagne 108 px.

      Correction du 18 octobre 2026, demandée par le porteur. Ce paragraphe
      concluait « le tout calé sur le même bord gauche que le titre et les
      paragraphes », et comptait l'alignement retrouvé comme le second gain. La
      jauge est désormais centrée dans sa colonne : « justify-self:center » et
      deux colonnes en « auto » au lieu de « stretch » et d'un « 1fr » qui
      tirait le bloc sur toute la largeur. Le raisonnement de 2. tenait pour la
      jauge debout, qui était un îlot centré dans un bloc de texte ; couchée,
      elle n'est plus un îlot dans le texte mais une figure posée au-dessus de
      lui, sous le filet ambre qui ouvre la réponse — et une figure se centre
      sous son filet. Ce qui restait faux de la version debout, c'était la
      hauteur morte, pas le centrage ; on a corrigé les deux d'un coup et l'un
      des deux n'avait pas à l'être.

      Le « text-align:left » reste, et il n'est pas contradictoire : il ne
      ferre plus la jauge sur la colonne, il tient « 88 % » et
      « COMPATIBILITÉ » sur un même bord à l'intérieur du groupe. Deux lignes
      de largeurs très différentes, centrées l'une sur l'autre, se liraient
      comme deux objets.

   Le « margin-top:-22px » de l'arc n'est pas un réglage à l'œil, c'est de la
   géométrie. Le dessin est en « viewBox="0 0 120 100" » et son arc a pour centre
   (60, 86), pour rayon 42, pour épaisseur 11 avec des bouts ronds. L'encre va
   donc de 86 − 42 − 5,5 = 38,5 à 86 + 5,5 = 91,5, c'est-à-dire que le tiers
   supérieur de la boîte est vide par construction. À 96 px de large la boîte
   fait 80 px de haut et ce vide en occupe 30,8. Debout, ce vide servait de
   respiration ; couché, il décalait le texte de onze pixels vers le haut par
   rapport au centre optique de l'arc. On remonte la boîte de 22 px — pas de
   30,8, pour laisser 8,8 px d'air au-dessus de l'encre — et les deux centres
   tombent alors sur le même pixel. Vérifié : 474 et 474.

   Ne pas « corriger » ce nombre sans refaire le calcul : il dépend de la
   largeur de l'arc, donc toucher au « width:96px » oblige à toucher à l'autre.
   Et ne pas non plus recadrer le « viewBox » dans index.html pour s'en
   débarrasser — ce sont les mesures du goniomètre de la marque, les mêmes que
   dans l'application, et elles valent aussi pour la page large. */
@media (max-width:620px){
  .projet-trait{display:none;}
  /* Le « gap:0 » qui tenait cette place a été retiré le 18 octobre 2026 : l'écart
     n'est plus une rangée en « flex », c'est le pli du dépliant — voir la section
     suivante, qui le repose en « display:block » et y suspend la pastille. */
  .projet-pastille{width:30px;height:30px;background:var(--accent-soft);font-size:16px;}

  /* « justify-self » et « margin-bottom » reprennent la main sur la règle de
     900 px, à spécificité égale et par l'ordre d'écriture : ce bloc est plus bas
     dans le fichier. Le déplacer au-dessus du chapitre du constat casserait la
     mise en page sans rien signaler. */
  .projet-jauge{
    justify-self:center;
    display:grid;grid-template-columns:auto auto;
    align-items:center;column-gap:16px;
    text-align:left;
    margin-bottom:18px;
  }
  .projet-jauge svg{grid-row:1 / span 2;width:96px;margin-top:-22px;}
  .projet-jauge-chiffre{grid-column:2;align-self:end;margin-top:0;}
  .projet-jauge-valeur{grid-column:2;align-self:start;margin-top:5px;}

  /* Le « padding-top:20px » qui tenait cette place — 30 px de réserve au-dessus
     d'une figure déjà précédée de son filet ambre faisaient un blanc de 64 px
     avant le premier trait d'encre — est repris par le « padding » complet de la
     feuille, deux sections plus bas. Le raisonnement n'a pas changé, c'est le
     bloc qui en a hérité : la réponse a maintenant quatre côtés. */
}

/* ---------- Le constat devient un dépliant à deux volets ----------------------
   Suite de la section précédente, le 18 octobre 2026, et cette fois ce n'est plus
   un réglage : c'est une décision de contenu, prise par le porteur après avoir vu
   trois propositions chiffrées.

   Ce qui n'allait toujours pas. Une fois les traits retirés et la jauge couchée, la
   section restait haute de 1 255 px à 390 px de large — deux écrans et demi pour
   une idée qui tient en une phrase. Le détail mesuré, ligne à ligne :

     titre .................................  52
     chapeau d'introduction (5 lignes) ..... 124
     constat, premier côté ................. 192   (titre 39 + texte 124)
     l'écart ...............................  30
     constat, second côté .................. 192   (titre 39 + texte 124)
     la réponse ............................ 442   (jauge 58 + titre 44 + 248)
     gouttières et marges de section ....... 223
                                            -----
                                            1 255

   620 de ces 1 255 px sont de la prose de soutien : le chapeau d'introduction et
   les deux paragraphes du constat. Trois registres se succédaient — un chapeau qui
   annonce, deux constats jumeaux qui développent, une réponse qui conclut — et sur
   une colonne de 312 px le lecteur traversait les trois au même rythme, sans
   hiérarchie puisque tout était empilé à la même largeur.

   Ce qu'on en fait. Le problème devient une figure : un cadre, deux moitiés, le
   « ? » sur le pli. La réponse garde sa prose. Deux registres au lieu de trois, et
   le contraste entre les deux — une figure muette, puis du texte courant — fait
   enfin la hiérarchie que l'empilement ne faisait pas.

   Ce qui disparaît sur téléphone, et seulement là :

     — le chapeau d'ouverture de cette section-ci. Il raconte en cinq lignes ce que
       le titre dit en six mots et ce que la figure montre en deux moitiés. C'est
       une redite sur page large aussi, mais là elle coûte 60 px et donne de l'air ;
       ici elle coûte un cinquième de l'écran.
     — les deux paragraphes du constat. Ils détaillent une peine que le titre nomme
       déjà (« recruter prend un temps que l'on n'a pas »). Ce sont les seuls
       paragraphes de la page dont le titre contient entièrement l'argument.

   Ils sont masqués, pas supprimés : le texte reste dans index.html, donc dans le
   document servi, donc indexé. Ne pas « nettoyer » le HTML en les retirant — on
   perdrait la page large, où ils portent leur part, et on perdrait l'indexation.

   Pourquoi masquer est ici légitime alors que c'est en général une faute. Parce que
   l'information n'est pas perdue : chaque paragraphe masqué a un titre visible qui
   contient sa thèse. Le test est celui-là, et pas « est-ce que ça tient à
   l'écran » — si le jour vient où l'on veut masquer un bloc dont le titre ne dit
   pas la même chose, la réponse est non.

   Le cadre et le pli. Le cadre est un filet de 1 px en « --text », et le pli à
   l'intérieur un filet de 1 px en « --filet ». Deux poids, deux rôles : le trait
   plein ferme l'objet, le trait pâle le partage. Les anciens filets de 2 px posés
   sur chaque moitié sont retirés — c'étaient eux qui disaient « voici deux
   encadrés », la lecture exacte qu'on veut défaire. Et pas de fond sous le cadre :
   la section est « nue » par construction (voir le chapitre du constat), un pavé
   crème ici réintroduirait la carte qu'on lui a retirée en octobre.

   La pastille est suspendue au pli, en absolu, remontée de la moitié de sa hauteur.
   Son fond « --accent-soft » est opaque et mange le filet derrière elle : c'est la
   réserve d'origine, qui perçait le pointillé entre deux colonnes, rendue à son
   rôle — séparer deux moitiés d'un même objet. Le « .projet-ecart » passe donc de
   « flex » à une rangée de hauteur nulle ; ses marges, et non la gouttière de la
   grille, tiennent l'écart, parce qu'une gouttière ne se centre pas sur un filet.

   Résultat mesuré à 390 px : la section passe de 1 255 à 805 px, dont 154 pour le
   dépliant — 2 de cadre, 36 de padding, 39 par moitié, 36 d'écart et 1 de pli. Elle
   tient dans un écran de 844 px, ce qui était la cible. À 320 px elle fait 890, les
   deux titres passant à trois lignes ; c'est la seule largeur où elle déborde encore
   un peu, et d'un demi-écran, pas de deux.

   (Les 39 px par moitié sont le titre seul. Un premier jet y ajoutait une étiquette
   « CÔTÉ CABINET » / « CÔTÉ KINÉ » et montait à 64, donc la section à 855 ; les
   étiquettes ont été retirées le jour même — voir index.html pour la raison, qui
   n'est pas la hauteur.)

   Le pli est à un demi-pixel près : « top:0 » sur la pastille vise le bord interne
   de la bordure, donc le centre du disque tombe à 1 px sous le haut du filet au lieu
   de 0,5. Le disque est opaque et haut de 30 px, il recouvre le filet sur toute sa
   largeur de toute façon — le noter ici évite qu'on le « corrige » un jour avec un
   « top:-0.5px » qui ne se verrait pas davantage et se lirait moins bien. */
@media (max-width:620px){
  /* Le chapeau de « #projet » seul, sans sélecteur d'identifiant : « .accueil-ouverture »
     sert sept sections et six d'entre elles gardent le leur. C'est l'idiome déjà
     employé plus haut pour « .surtitre:has(+ h2) » — on nomme le voisin qui rend
     l'endroit unique, ici la figure qui suit. Un commentaire HTML entre les deux ne
     gêne pas « + » : le combinateur ignore tout ce qui n'est pas un élément. */
  .accueil-ouverture:has(+ .projet-constat) .chapeau{display:none;}

  .projet-constat{
    gap:0;
    border:1px solid var(--text);
    border-radius:var(--radius-md);
    padding:clamp(16px,4.6vw,20px);
    margin-top:clamp(18px,5vw,26px);
  }
  .projet-cote{border-top:0;padding-top:0;}
  .projet-cote .chapeau{display:none;}

  /* Le pli. « position:relative » sert d'ancre à la pastille, « height:0 » empêche
     le « align-items:stretch » de la grille de lui donner une hauteur, et les marges
     remplacent la gouttière : 18 px de part et d'autre, soit 36 px entre les deux
     moitiés avec le filet au milieu, et la pastille de 30 px tient dans cet
     intervalle sans toucher le texte. */
  .projet-ecart{
    position:relative;display:block;height:0;
    margin:18px 0;
    border-top:1px solid var(--filet);
  }
  .projet-pastille{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);}
}

/* ---------- La réponse recouvre le constat au défilement ----------------------
   Demandé par le porteur le 18 octobre 2026, et arbitré par lui après une première
   lecture fausse de ma part : j'avais compris « inverser l'ordre de lecture » et
   réécrit la section à l'envers, ce qui a été annulé. Ce n'est pas l'ordre qui
   change, c'est la profondeur. Le dépliant s'épingle sous l'en-tête, la réponse
   monte et passe devant lui.

   Le mécanisme tient en deux déclarations et n'a besoin d'aucun JavaScript :
   « position:sticky » sur le constat, un rang d'empilement au-dessus pour la
   réponse. Trois choses rendent cela sûr ici, toutes vérifiées avant d'écrire.

   1. Aucun ancêtre du constat n'a d'« overflow » autre que « visible ». C'est la
      panne classique de « sticky » : un seul « overflow:hidden » quelque part dans
      la chaîne et l'élément cesse de coller, sans erreur et sans message.
   2. Le bloc de collage est « .enveloppe », qui s'arrête au bas de la réponse. Le
      constat ne peut donc pas réapparaître sous elle une fois dépassée : il est
      décollé par le bas de son parent exactement quand la réponse finit. C'est
      gratuit, et c'est ce qui évite une garde en JavaScript.
   3. L'en-tête est en « position:sticky » à « top:14px » pour 62 px de haut, donc
      son bord bas est à 76. Le constat s'épingle dix pixels plus bas. Si la pilule
      de l'en-tête change de hauteur ou de retrait, ce 86 est à refaire — c'est la
      seule valeur en dur de ce bloc, et elle est dérivée, pas choisie.

   Pourquoi la réponse devient une feuille. Pour recouvrir, il faut être opaque.
   Or le fond de cette page n'est pas une couleur : ce sont quatre nappes fixes en
   « z-index:-1 » — le fond, deux lueurs, le nuage, le grain — posées derrière tout
   le contenu. Un bloc rempli de « --page-bg » y ferait un rectangle plat : il
   masquerait les lueurs, qui ne sont pas discrètes (11 % d'ambre et 62 % de
   « --select-soft »). Deux issues : rejouer les quatre nappes sur la réponse, ou
   assumer une surface. Le porteur a choisi la surface, et l'argument qui l'a
   emporté est un argument de lecture, pas de technique — un recouvrement ne se
   lit que si la chose qui recouvre ressemble à une chose. Avec un fond invisible,
   l'œil ne voit pas « ça passe devant », il voit « ça a disparu ».

   Cela renverse, sur téléphone seulement, la décision du 14 octobre qui avait
   retiré son pavé à la réponse (voir le commentaire du chapitre du constat : « un
   pavé crème aurait réintroduit à lui seul le défaut qu'on vient de corriger »).
   Le renversement se défend, et il faut savoir pourquoi avant de le défaire : ce
   défaut-là était « deux pavés jumeaux qui se font face ». Ici il n'y a pas de
   jumeau — un cadre vide et une feuille pleine, l'un derrière l'autre, qui ne se
   ressemblent pas et ne sont jamais vus côte à côte. Sur page large, où les deux
   seraient bien côte à côte, la réponse reste nue : ce bloc ne descend pas sous
   620 px par hasard.

   Le grain de la feuille suit l'idiome de « .bandeau », « .fait » et « .final »
   dans kinome.css : « isolation:isolate » pour autoriser le rang « -1 » à
   l'intérieur, et « background-attachment:fixed » pour que la tuile reparte de la
   même trame que la nappe du fond au lieu de son propre coin. Sans cela le raccord
   se verrait, et il se verrait d'autant plus que la feuille bouge.

   Mesuré sur la page, à 390 px de large : le constat s'épingle à 1 115 px de
   défilement, la feuille le rejoint à 1 148, l'a entièrement couvert à 1 302, et
   le constat n'est décollé par le bas de l'enveloppe qu'à 1 652. L'essuyage dure
   donc 154 px — très exactement la hauteur du dépliant, et ce n'est pas un réglage
   mais une conséquence : la feuille avance dans le flux pendant que le constat ne
   bouge plus, donc la course vaut la hauteur couverte. Suivent 350 px où la
   réponse est seule à l'écran avant que le constat ne s'en aille. À 320 px les
   mêmes nombres valent 184 et 353. Rien ici n'est à régler ; si l'essuyage paraît
   trop bref, la grandeur à changer est la hauteur du dépliant, pas une durée.

   Ce que la feuille coûte : la section passe de 805 à 867 px à 390 (de 890 à 926
   à 320). Les quatre côtés du « padding » en prennent 36, le reste vient du texte
   qui se replie dans une colonne rétrécie de 36 px. On ne récupère pas ces 62 px
   en rognant le « padding » — une feuille sans marge intérieure cesse de se lire
   comme une feuille, et c'était tout l'objet du choix.

   Le thème sombre suit sans une ligne de plus, parce que la feuille est peinte en
   jetons et non en couleurs : « --bg » y vaut #16233F contre un « --page-bg » à
   #0E1526, soit le même écart de valeur qu'en clair (#F1F2ED contre #E9E9E1), et
   « --grain-surface » y monte de .4 à .55 tout seul. Vérifié, pas supposé. */
@media (max-width:620px){
  .projet-constat{position:sticky;top:86px;z-index:1;}

  .projet-reponse{
    position:relative;z-index:2;isolation:isolate;
    background:var(--bg);
    border-radius:var(--radius-md);
    /* Le filet ambre devient le bord d'attaque de la feuille. Il était déjà là
       — c'est le « border-top » de la règle de 900 px — et il n'a pas été mis
       pour cet effet ; il se trouve qu'une barre de 2 px en tête d'un bloc qui
       monte est exactement ce qu'il faut pour qu'on voie par où il passe. */
    padding:clamp(16px,4.6vw,20px);
  }
  .projet-reponse::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    border-radius:inherit;
    background-image:var(--grain);
    background-attachment:fixed;
    mix-blend-mode:overlay;
    opacity:var(--grain-surface);
  }
}

/* ---------- La carte du prix recouvre son titre -------------------------------
   Demandé le 18 octobre 2026, dans le même message que la descente du bouton sous
   la carte, et les deux demandes se tiennent : « mettre le bouton créer mon profil
   sous l'encart 0 € », puis « quand on scroll, faire que l'encart 0 € vienne en
   superposition du texte au dessus ».

   C'est le deuxième recouvrement de la page, après celui du projet cent lignes
   plus haut, et il est délibérément écrit de la même main : « position:sticky » sur
   le bloc du dessus, un rang d'empilement au-dessus pour le bloc du dessous, aucun
   JavaScript. Ce qui se répète dans une feuille de style doit se répéter à
   l'identique, sinon le lecteur suivant croit à deux mécanismes différents et
   cherche la différence.

   Trois vérifications, les mêmes que pour le projet, refaites ici et non recopiées.

   1. Aucun ancêtre de « .accueil-ouverture » n'a d'« overflow » autre que
      « visible » — ni l'enveloppe, ni la section, ni le corps. Relevé sur la page,
      pas déduit du balisage.
   2. Le bloc de collage est la première « .enveloppe », et son dernier enfant est
      la carte : son bas est donc le bas de la carte, au pixel près. L'ouverture ne
      peut pas réapparaître sous elle. C'est ce qui a imposé la deuxième enveloppe
      pour le bouton, et la raison détaillée est dans index.html, au-dessus de cette
      deuxième enveloppe.
   3. Le 86 de « top » est dérivé de l'en-tête — pilule à « top:14px », 62 px de
      haut, bord bas à 76 — et non choisi. Il est en dur aux deux endroits ; si la
      pilule change, les deux sont à refaire.

   Un supplément de sécurité que le projet n'avait pas. « .accueil-section-nue
   .accueil-ouverture » porte un « margin-bottom » de clamp(10px,1.4vw,20px), soit
   10 px au téléphone, et la contrainte de collage s'applique à la boîte des marges.
   L'ouverture est donc relâchée dix pixels plus haut que le bas de la carte : même
   à l'instant exact du décollage, son dernier mot est encore derrière la carte. Il
   n'y a pas une image où une demi-ligne dépasse.

   Ce bloc ne fait pas ce que fait celui du projet. Là-bas il a fallu repeindre la
   réponse — fond, rayon, grain rapporté — parce qu'elle était nue et qu'un bloc
   transparent ne recouvre rien. Ici la carte est déjà une carte : « --surface »
   plein, bord, rayon de 26, depuis toujours. Elle n'avait qu'un défaut pour ce
   rôle, celui de n'être pas positionnée, et un élément non positionné se fait
   peindre dessous par un frère collé même quand il vient après lui dans le flux.
   D'où « position:relative » — qui ne la déplace pas d'un pixel — et le rang 2.
   C'est la seule chose que ce bloc ajoute à la carte, et c'est voulu : la règle la
   plus sûre est celle qui ne touche à rien.

   Relevé sur la page. Le chapitre du projet donne ses mesures en positions de
   défilement absolues ; ici ce serait faux, et il faut dire pourquoi plutôt que
   recopier la forme. Au-dessus de « Gratuit » il y a le sélecteur à quatre volets,
   qui tourne tout seul toutes les six secondes et dont les volets n'ont pas la même
   hauteur : la section entière monte et descend de quelques centaines de pixels
   selon le volet ouvert. Une position absolue notée ici serait vraie pour un volet
   et fausse pour les trois autres — je m'y suis laissé prendre une fois, en relisant
   une capture qui ne correspondait pas au nombre attendu. Les trois distances qui
   suivent, elles, ne dépendent que de cette section.

   À 390 px de large — ouverture 131,25 px de haut, carte 299,31 :
     · de l'épinglage au contact ............  44 px
     · du contact au recouvrement total .... 131 px
     · du recouvrement au décollage ........ 158 px
   À 320 px — ouverture 144,55, carte 312,75 : 44, puis 145, puis 158.

   Aucun de ces nombres n'est un réglage, et c'est le point à retenir avant de
   vouloir en changer un. Les 44 sont l'écart de flux entre l'ouverture et la carte,
   c'est-à-dire le « margin-top » de 44 px de « .gratuit » dans kinome.css, qui
   absorbe par fusion le « margin-bottom » de 10 px de l'ouverture — d'où la même
   valeur aux deux largeurs. L'essuyage vaut exactement la hauteur de l'ouverture,
   parce que la carte avance dans le flux pendant que l'ouverture ne bouge plus.
   La traversée qui suit vaut « hauteur de carte moins hauteur d'ouverture moins
   10 » — 299,31−131,25−10 et 312,75−144,55−10 font 158,06 et 158,20, ce qui est une
   coïncidence arithmétique et non une constante. Si l'essuyage paraît trop bref,
   la grandeur à toucher est la hauteur du titre et du chapeau, pas une durée :
   il n'y a pas de durée dans ce bloc.

   Deux pièges de mesure, pour qui voudra refaire ces relevés.
   « offsetTop » d'un élément collé renvoie sa position courante, décalage de collage
   compris, et non sa position de flux. Toute mesure de ce genre est donc à prendre
   après un retour à zéro du défilement, sinon on lit la section à deux endroits à la
   fois et l'on obtient un « contact » situé avant l'« épinglage ».
   Et « offsetTop » est un entier arrondi : il donnait 45 px d'écart de flux à 390 et
   43 à 320 pour une seule et même marge de 44, ce qui envoie chercher une cause de
   variation qui n'existe pas. Les hauteurs ci-dessus viennent toutes de
   « getBoundingClientRect », qui garde les décimales.

   Pas de « .accueil-section-nue » en tête du sélecteur : « :has(+ .gratuit) » suffit
   à désigner cette ouverture-là, la carte du prix étant unique dans la page. */
@media (max-width:620px){
  .accueil-ouverture:has(+ .gratuit){position:sticky;top:86px;z-index:1;}
  .gratuit{position:relative;z-index:2;}
}

/* ---------- La grille des deux côtés recouvre son titre -----------------------
   Demandé le 18 octobre 2026, avec le sélecteur « Cabinet / Kiné » : « faire en
   sorte que l'encart Titulaire ou kiné, la même app vienne en superposition quand
   on scroll ». Troisième recouvrement de la page, même idiome que les deux
   précédents — collage du bloc du dessus, rang d'empilement au-dessus pour celui
   du dessous, aucun JavaScript.

   Les trois vérifications d'usage, refaites ici.

   1. Aucun ancêtre de l'ouverture n'a d'« overflow » autre que « visible ».
      « .accueil-bloc » porte « isolation:isolate », qui crée un contexte
      d'empilement mais pas de bloc de formatage : le collage traverse, et les
      deux rangs ci-dessous se comparent bien à l'intérieur du pavé.
   2. Le bloc de collage est « .accueil-bloc », dont le dernier enfant est la
      grille : le bas de sa boîte de contenu est le bas de la grille, et le
      remplissage du pavé est au-delà. L'ouverture est relâchée là, et dix pixels
      plus tôt grâce à la marge basse ajoutée ci-dessous.
   3. Le 86 vient de l'en-tête — pilule à « top:14px », 62 px de haut. Troisième
      endroit où ce nombre est écrit en dur ; si la pilule change, les trois sont
      à refaire.

   La marge basse de 10 px ne coûte rien et vaut la même sécurité qu'à « Gratuit ».
   Elle est absorbée par la marge haute de 44 px de « .cartes », qui est plus
   grande et l'emporte à la fusion : l'écart à l'écran ne bouge pas d'un pixel,
   et la contrainte de collage, qui porte sur la boîte des marges, relâche
   l'ouverture dix pixels avant le bas de la grille.

   Ce qui est particulier à cette section-ci : le panneau qui recouvre n'est pas
   une carte, c'est une grille, et une grille ne se peint pas. Entre la pilule du
   sélecteur et la carte il y a 22 px de gouttière, et sans fond le titre épinglé
   se verrait au travers pendant toute la traversée — une ligne de texte prise en
   sandwich entre deux objets opaques, ce qui se lit comme un défaut d'affichage
   et non comme une superposition. La grille reçoit donc le fond du pavé qui la
   contient, « --bg », et le grain qui va avec, selon l'idiome de « .bandeau »,
   « .fait » et « .final » dans kinome.css. Sur « --bg » posé sur « --bg » il n'y
   a aucune couture à voir ; c'est un volet roulant de la couleur du mur.

   Le grain n'est pas doublé pour autant, bien que « .accueil-bloc::before » en
   pose déjà un : celui du pavé passe derrière le fond opaque de la grille et
   disparaît, celui de la grille le remplace à la même opacité. Les deux sont en
   « background-attachment:fixed » et repartent donc de la même trame — sans quoi
   le raccord se verrait, et d'autant plus que la grille bouge.

   Le bord d'attaque est le haut de la pilule du sélecteur, puisque la marge est
   portée par la grille et reste au-dehors. C'est le bon bord : ce qui monte sur
   le titre est le commutateur, c'est-à-dire la seule chose de la section sur
   laquelle on peut agir.

   Relevé. Comme à « Gratuit », ce sont des distances et non des positions : le
   sélecteur des quatre temps, plus haut dans la page, tourne tout seul toutes les
   six secondes et ses volets n'ont pas la même hauteur, donc l'abscisse absolue de
   la section change d'un relevé à l'autre. Les trois écarts, eux, ne bougent pas.
   À 390 px de large, carte « Cabinet » ouverte — ouverture 132,31 px de haut,
   grille 712,30 :
     · de l'épinglage au contact ............  44 px
     · du contact au recouvrement total .... 132 px
     · du recouvrement au décollage ........ 570 px
   À 320 px — ouverture 165,80, grille 822,02 : 44, puis 166, puis 646.

   Le premier écart est la marge haute de la grille et ne dépend pas de la largeur,
   d'où les 44 aux deux mesures. Le deuxième est la hauteur de l'ouverture, par
   construction : le volet doit parcourir le titre pour le couvrir. Le troisième
   est le seul qui dépende de la carte ouverte, puisque c'est elle qui fait la
   hauteur de la grille — à 390 px, 570 px côté « Cabinet » et 600 côté « Kiné ».
   C'est à contre-sens de ce qu'on attend : « Cabinet » a huit puces contre six,
   mais le chapeau de « Kiné » est plus long de deux lignes et l'emporte. La valeur
   n'a de toute façon aucune conséquence ; elle n'est notée que pour qu'on sache,
   en relisant, pourquoi deux mesures du même écart ne concordent pas.

   Contrôle au défilement réel, aux deux largeurs : « découvert » — la part du
   titre encore visible sous la grille — tombe à 0 au recouvrement total et y
   reste, et « dépasse » — l'écart du haut de l'ouverture à ses 86 px — reste nul
   jusqu'au décollage puis devient négatif sans jamais repasser au-dessus. Le titre
   ne reparaît donc à aucun moment entre les deux. */
@media (max-width:620px){
  .accueil-cotes .accueil-ouverture{position:sticky;top:86px;z-index:1;margin-bottom:10px;}

  .accueil-cotes .cartes{
    position:relative;z-index:2;isolation:isolate;
    background:var(--bg);
  }
  .accueil-cotes .cartes::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-image:var(--grain);
    background-attachment:fixed;
    mix-blend-mode:overlay;
    opacity:var(--grain-surface);
  }
}

/* ============================================================================
   14. Le grand écran, inchangé
   La recomposition pour le téléphone (chapitre 13 et passes du 18 octobre 2026)
   ne vaut qu'à 900 px et moins, le seuil où la barre passe à la bascule. Au-delà,
   la page reste celle d'avant : les deux cartes « Titulaire » et « Kiné » côte à
   côte sans sélecteur, le bouton « Créer mon profil » sous le chapeau de
   « Gratuit », la FAQ sur une colonne, le pied de page à son corps d'origine.
   ============================================================================ */
@media (min-width:901px){
  html .accueil-choix-cotes{display:none;}
  #gratuit .gratuit-action-bas{display:none;}
}
@media (max-width:900px){
  #gratuit .accueil-ouverture .accueil-action{display:none;}
}