/* ============================================================================
   BIBLIOTHEQUE UI JABS  -  type.css
   Depend de : theme.css

   La typographie est le seul poste qui distingue vraiment deux sites au meme
   budget. Une palette se copie en dix minutes ; une composition typographique,
   non.

   Regles tenues partout dans ce fichier :
   1. Une seule famille par projet, exploitee a fond (graisses, echelle,
      interlettrage), plutot que deux familles employees a moitie.
   2. Les titres sont fluides : clamp() plutot que des points de rupture.
      Un titre qui saute de 40 a 28 px a 768 px se voit.
   3. La mesure du texte courant reste entre 45 et 75 caracteres. Au-dela,
      l'oeil perd la ligne suivante.
   4. Aucune police distante n'est imposee : tout fonctionne en pile systeme,
      et les couples proposes sont facultatifs.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   PILES TYPOGRAPHIQUES
   Chacune tient sans telechargement. Ajouter une police distante est un choix,
   pas un prealable : la variante TYP-C4 donne le code d'integration.
   ------------------------------------------------------------------------ */
.ty-sys    { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ty-serif  { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
.ty-times  { font-family: "Times New Roman", Times, serif; }
.ty-mono   { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.ty-rond   { font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; }
.ty-etroit { font-family: "Helvetica Neue", "Arial Narrow", Helvetica, sans-serif; font-stretch: condensed; }

/* ===========================================================================
   FAMILLE A  -  ECHELLE ET COMPOSITION
   ======================================================================== */

/* @v TYP-A1
@nom Titre demesure
@usage L'ouverture d'un site vitrine. La taille est fluide entre 34 et 104 px, l'interlettrage se resserre a mesure que le corps grossit : sans cela un grand titre parait delave.
@large
@html
<div class="ty-demo">
  <h1 class="ty-geant">Chauffagiste<br>depuis 2009</h1>
  <p class="ty-legende">clamp(34px, 9vw, 104px) &mdash; interlettrage -0.045em &mdash; interligne 0.94</p>
</div>
@tw text-[clamp(34px,9vw,104px)] leading-[.94] tracking-[-.045em] font-extrabold
@end */
.ty-geant {
  margin: 0;
  font-size: clamp(34px, 9vw, 104px);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.045em;
  color: var(--c-text);
  text-wrap: balance;
}
.ty-legende { margin: var(--sp-4) 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--c-text-muted); }
.ty-demo { width: 100%; }
/* @endv */

/* @v TYP-A2
@nom Echelle typographique
@usage Six corps, un seul rapport. L'echelle suit une progression constante (facteur 1,25) : c'est elle qui donne la coherence, pas le choix des valeurs prises une a une.
@large
@html
<div class="ty-echelle">
  <div><b>96 px</b><span class="ty-geant" style="font-size:96px">Aa</span><small>Titre de banniere &mdash; clamp fluide</small></div>
  <div><b>48 px</b><span style="font-size:48px;font-weight:800;letter-spacing:-.03em">Aa</span><small>Titre de section</small></div>
  <div><b>28 px</b><span style="font-size:28px;font-weight:700;letter-spacing:-.02em">Aa</span><small>Sous-titre</small></div>
  <div><b>18 px</b><span style="font-size:18px;font-weight:600">Aa</span><small>Chapo, intertitre</small></div>
  <div><b>15 px</b><span style="font-size:15px">Aa</span><small>Texte courant</small></div>
  <div><b>12 px</b><span style="font-size:12px;color:var(--c-text-muted)">Aa</span><small>Legende, mention</small></div>
</div>
@tw un rapport de 1,25 entre chaque cran, arrondi au pixel
@end */
.ty-echelle { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }
.ty-echelle > div { display: flex; align-items: baseline; gap: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border); }
.ty-echelle b { width: 62px; flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--c-text-muted); }
.ty-echelle > div > span { line-height: 1; color: var(--c-text); }
.ty-echelle small { margin-left: auto; font-size: var(--fs-xs); color: var(--c-text-muted); }
/* @endv */

/* @v TYP-A3
@nom Titre avec accent typographique
@usage Un mot traite differemment du reste : italique, serif, ou simple changement de graisse. C'est la maniere la moins couteuse de donner un ton, et la plus solide dans le temps.
@large
@html
<div class="ty-demo ty-accents">
  <h2>Une pompe a chaleur posee <em>proprement</em>.</h2>
  <h2>Le devis en <b>24 heures</b>, pas en trois semaines.</h2>
  <h2>Nos equipes sont <u>salariees</u>.</h2>
</div>
@tw [&_em]:font-serif [&_em]:italic / [&_b]:font-extrabold / [&_u]:decoration-2 [&_u]:underline-offset-4
@end */
.ty-accents h2 {
  margin: 0 0 var(--sp-5);
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--c-text);
  text-wrap: balance;
}
.ty-accents em { font-family: "Iowan Old Style", Georgia, serif; font-style: italic; font-weight: 400; }
.ty-accents b  { font-weight: 800; }
.ty-accents u  {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  text-decoration-color: var(--c-primary);
}
/* @endv */

/* @v TYP-A4
@nom Titre masque par une image
@usage Le titre laisse voir une texture a travers ses lettres. Tres visible, donc a reserver a un seul titre par page ; le repli affiche simplement le titre en couleur pleine.
@large
@html
<h1 class="ty-masque">RENOVATION</h1>
@tw bg-clip-text text-transparent bg-[radial-gradient(...)]
@end */
.ty-masque {
  margin: 0;
  font-size: clamp(40px, 13vw, 150px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
  text-align: center;
  color: var(--c-primary);
  background-image:
    radial-gradient(circle at 20% 30%, #e8913c 0 22%, transparent 55%),
    radial-gradient(circle at 78% 65%, #3f7ea8 0 24%, transparent 58%),
    linear-gradient(120deg, #2f4858, #6b4a72 55%, #8a4a3c);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ty-masque { background: none; -webkit-text-fill-color: currentColor; }
}
/* @endv */

/* @v TYP-A5
@nom Titre contourne
@usage Lettres evidees, en contour seul. Sert a superposer un titre sur une image sans l'assombrir, ou a poser un second niveau de titre derriere le premier.
@large
@html
<div class="ty-superpose">
  <span class="ty-contour" aria-hidden="true">2026</span>
  <h2>Bilan de l'annee</h2>
</div>
@tw [-webkit-text-stroke:2px_currentColor] text-transparent
@end */
.ty-superpose { position: relative; display: grid; place-items: center; padding: var(--sp-8) 0; }
.ty-contour {
  font-size: clamp(70px, 18vw, 190px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--c-border-strong);
  user-select: none;
}
.ty-superpose h2 {
  position: absolute;
  margin: 0;
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--c-text);
}
/* @endv */

/* ===========================================================================
   FAMILLE B  -  MISE EN PAGE EDITORIALE
   ======================================================================== */

/* @v TYP-B1
@nom Lettrine
@usage Ouverture d'un article. La lettrine occupe trois lignes exactement : au-dela elle decroche du paragraphe et devient un ornement isole.
@large
@html
<div class="ty-article">
  <p class="ty-lettrine">Le remplacement d'une chaudiere fioul par une pompe a chaleur air/eau reste, en 2026, l'operation la plus subventionnee du parc residentiel. Le montant de MaPrimeRenov depend du revenu fiscal de reference du foyer et de la zone climatique du logement, ce qui explique des ecarts importants d'un dossier a l'autre.</p>
  <p>Les certificats d'economie d'energie s'ajoutent a cette aide et sont verses par le fournisseur d'energie, le plus souvent sous forme de deduction directe sur le devis.</p>
</div>
@tw [&::first-letter]:float-left [&::first-letter]:text-[3.4em] [&::first-letter]:leading-[.82]
@end */
.ty-article { max-width: 68ch; }
.ty-article p { margin: 0 0 var(--sp-4); font-size: var(--fs-lg); line-height: 1.72; color: var(--c-text-soft); }
.ty-lettrine::first-letter {
  float: left;
  margin: .06em .1em 0 0;
  font-size: 3.4em;
  line-height: .82;
  font-weight: 800;
  color: var(--c-primary);
}
/* @endv */

/* @v TYP-B2
@nom Colonnes de magazine
@usage Un texte long sur ecran large. Les colonnes se reduisent a une seule sous 700 px, sinon la ligne devient trop courte et la lecture hache.
@large
@html
<div class="ty-colonnes">
  <p>Le remplacement d'une chaudiere fioul par une pompe a chaleur air/eau reste l'operation la plus subventionnee du parc residentiel francais.</p>
  <p>Le montant de MaPrimeRenov depend du revenu fiscal de reference et de la zone climatique, ce qui explique des ecarts importants d'un dossier a l'autre.</p>
  <p>Les certificats d'economie d'energie s'ajoutent a cette aide et sont verses par le fournisseur, generalement sous forme de deduction directe sur le devis.</p>
  <p>La TVA a taux reduit de 5,5 % s'applique aux travaux d'amelioration de la performance energetique, a condition que l'attestation soit signee avant le debut du chantier.</p>
</div>
@tw columns-2 gap-10 max-md:columns-1
@end */
.ty-colonnes {
  columns: 2;
  column-gap: var(--sp-10);
  column-rule: 1px solid var(--c-border);
  max-width: 100%;
}
.ty-colonnes p { margin: 0 0 var(--sp-4); font-size: var(--fs-md); line-height: 1.7; color: var(--c-text-soft); break-inside: avoid; }
@media (max-width: 700px) { .ty-colonnes { columns: 1; } }
/* @endv */

/* @v TYP-B3
@nom Citation mise en scene
@usage Un temoignage sorti du flux. Le guillemet ouvrant est decoratif et n'entre pas dans la mesure du texte : il deborde a gauche.
@large
@html
<figure class="ty-citation">
  <blockquote>Intervention rapide et proprete irreprochable. La pompe a chaleur a ete posee en deux jours et le dossier MaPrimeRenov monte par leurs soins.</blockquote>
  <figcaption><b>Marie D.</b><span>Neuilly-sur-Marne, aout 2026</span></figcaption>
</figure>
@tw relative before:absolute before:-left-8 before:text-[6rem] before:content-['\201C']
@end */
.ty-citation { position: relative; margin: 0; padding-left: var(--sp-10); max-width: 62ch; }
.ty-citation::before {
  content: "\201C";
  position: absolute;
  left: 0; top: -.18em;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 92px;
  line-height: 1;
  color: var(--c-primary);
  opacity: .32;
}
.ty-citation blockquote {
  margin: 0 0 var(--sp-4);
  font-size: clamp(19px, 2.6vw, 26px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.015em;
  color: var(--c-text);
  text-wrap: pretty;
}
.ty-citation figcaption { display: flex; flex-direction: column; gap: 2px; }
.ty-citation b { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.ty-citation span { font-size: var(--fs-sm); color: var(--c-text-muted); }
/* @endv */

/* @v TYP-B4
@nom Numerotation editoriale
@usage Une liste d'etapes ou d'arguments. Le numero est en gros, pale, et sort dans la marge : il rythme la page sans concurrencer les titres.
@large
@html
<ol class="ty-numeros">
  <li><b>01</b><div><strong>Visite technique</strong><p>Releve sur place et etude thermique offerte, sous cinq jours.</p></div></li>
  <li><b>02</b><div><strong>Devis et aides</strong><p>Devis detaille, aides deduites, dossier monte par nos soins.</p></div></li>
  <li><b>03</b><div><strong>Pose</strong><p>Par nos equipes salariees, en une a trois journees.</p></div></li>
</ol>
@tw [&_b]:text-6xl [&_b]:font-extrabold [&_b]:text-slate-200
@end */
.ty-numeros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.ty-numeros li { display: flex; align-items: flex-start; gap: var(--sp-5); }
.ty-numeros b {
  flex: none;
  width: 78px;
  font-size: 54px;
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--c-surface-3);
}
.ty-numeros strong { display: block; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--c-text); }
.ty-numeros p { margin: 5px 0 0; font-size: var(--fs-md); line-height: 1.6; color: var(--c-text-soft); max-width: 56ch; }
/* @endv */

/* @v TYP-B5
@nom Intertitre en marge
@usage Sur ecran large, l'intertitre se place a gauche du paragraphe plutot qu'au-dessus. Le texte garde sa mesure et la page respire.
@large
@html
<div class="ty-marge">
  <div><h4>Aides</h4><p>MaPrimeRenov, les certificats d'economie d'energie et la TVA a 5,5 % se cumulent. Nous montons le dossier et deduisons les aides du devis.</p></div>
  <div><h4>Delais</h4><p>Trois semaines en moyenne entre la signature et la pose, selon la disponibilite du materiel et la saison.</p></div>
  <div><h4>Garantie</h4><p>Cinq ans pieces et main d'oeuvre sur l'ensemble de l'installation, entretien annuel inclus la premiere annee.</p></div>
</div>
@tw grid grid-cols-[140px_1fr] gap-x-10 max-md:grid-cols-1
@end */
.ty-marge { display: flex; flex-direction: column; gap: var(--sp-6); }
.ty-marge > div { display: grid; grid-template-columns: 150px 1fr; gap: var(--sp-8); align-items: start; }
.ty-marge h4 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-text-muted);
  padding-top: 5px;
}
.ty-marge p { margin: 0; font-size: var(--fs-lg); line-height: 1.65; color: var(--c-text); max-width: 60ch; }
@media (max-width: 700px) { .ty-marge > div { grid-template-columns: 1fr; gap: var(--sp-2); } }
/* @endv */

/* @v TYP-B6
@nom Texte et image imbriques
@usage L'image est enroulee par le texte au lieu d'etre posee a cote. shape-outside suit la forme reelle plutot que le rectangle, ce qui evite le trou blanc habituel.
@large
@html
<div class="ty-imbrique">
  <div class="ty-imbrique__forme"></div>
  <p>Le remplacement d'une chaudiere fioul par une pompe a chaleur air/eau reste, en 2026, l'operation la plus subventionnee du parc residentiel. Le montant depend du revenu fiscal de reference du foyer et de la zone climatique du logement.</p>
  <p>Les certificats d'economie d'energie s'ajoutent a cette aide et sont verses par le fournisseur d'energie, le plus souvent sous forme de deduction directe sur le devis remis au client.</p>
</div>
@tw float-right [shape-outside:circle(50%)] [clip-path:circle(50%)]
@end */
.ty-imbrique { max-width: 70ch; }
.ty-imbrique__forme {
  float: right;
  width: 190px;
  height: 190px;
  margin: 0 0 var(--sp-3) var(--sp-5);
  shape-outside: circle(50%);
  clip-path: circle(50%);
  background: linear-gradient(150deg, #4a6fa5, #8a6a4a 60%, #a8643c);
}
.ty-imbrique p { margin: 0 0 var(--sp-4); font-size: var(--fs-md); line-height: 1.72; color: var(--c-text-soft); }
@media (max-width: 560px) { .ty-imbrique__forme { float: none; margin: 0 auto var(--sp-4); } }
/* @endv */

/* ===========================================================================
   FAMILLE C  -  CHOIX DE POLICES
   ======================================================================== */

/* @v TYP-C1
@nom Piles systeme
@usage Six piles qui ne telechargent rien. Elles suffisent a la majorite des projets, et restent le repli obligatoire de toute police distante.
@large
@html
<div class="ty-piles">
  <div class="ty-sys"><b>Systeme</b><span>Neutre, moderne, disponible partout</span><em>system-ui, -apple-system, Segoe UI, Roboto</em></div>
  <div class="ty-serif"><b>Serif classique</b><span>Editorial, cabinet, haut de gamme</span><em>Iowan Old Style, Palatino, Georgia</em></div>
  <div class="ty-times"><b>Times</b><span>Institutionnel, juridique, assume</span><em>Times New Roman, Times</em></div>
  <div class="ty-mono"><b>Monospace</b><span>Technique, donnees, references</span><em>ui-monospace, SF Mono, Menlo</em></div>
  <div class="ty-rond"><b>Humaniste</b><span>Chaleureux, services, sante</span><em>Avenir Next, Avenir, Segoe UI</em></div>
  <div class="ty-etroit"><b>Etroite</b><span>Dense, sportif, signaletique</span><em>Helvetica Neue condensed, Arial Narrow</em></div>
</div>
@tw font-sans / font-serif / font-mono avec des piles explicites
@end */
.ty-piles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-4); }
.ty-piles > div { padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.ty-piles b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--c-text); }
.ty-piles span { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--c-text-soft); }
.ty-piles em { display: block; margin-top: var(--sp-3); font-family: var(--font-mono); font-size: 10.5px; font-style: normal; color: var(--c-text-muted); line-height: 1.4; }
/* @endv */

/* @v TYP-C2
@nom Couples de polices
@usage Huit associations qui fonctionnent. La regle : contraster franchement (serif avec sans) ou ne pas contraster du tout (une seule famille en deux graisses). L'entre-deux fait accident.
@large
@html
<div class="ty-couples">
  <div><b class="ty-serif">Iowan Old Style</b><i class="ty-sys">system-ui</i><small>Cabinet, bureau d'etudes, artisan premium</small></div>
  <div><b class="ty-sys" style="font-weight:800">system-ui 800</b><i class="ty-sys">system-ui 400</i><small>Produit logiciel, outil interne</small></div>
  <div><b class="ty-etroit">Helvetica condensed</b><i class="ty-sys">system-ui</i><small>Signaletique, chantier, sportif</small></div>
  <div><b class="ty-times">Times New Roman</b><i class="ty-mono">ui-monospace</i><small>Editorial, revue, institutionnel</small></div>
  <div><b class="ty-rond">Avenir Next</b><i class="ty-rond">Avenir Next 400</i><small>Sante, services a la personne</small></div>
  <div><b class="ty-mono">ui-monospace</b><i class="ty-sys">system-ui</i><small>Technique, supervision, donnees</small></div>
</div>
@tw titre en une famille, texte courant en une autre, jamais trois
@end */
.ty-couples { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-4); }
.ty-couples > div { padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.ty-couples b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.015em; color: var(--c-text); }
.ty-couples i { display: block; margin-top: 5px; font-style: normal; font-size: var(--fs-md); color: var(--c-text-soft); }
.ty-couples small { display: block; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.4; }
/* @endv */

/* @v TYP-C3
@nom Reglages fins
@usage Ce qui separe un texte compose d'un texte pose. Cinq reglages, tous natifs, tous a appliquer par defaut sur un site editorial.
@large
@html
<div class="ty-reglages">
  <div><code>text-wrap: balance</code><p class="ty-eq">Un titre dont les lignes sont equilibrees plutot que coupees au hasard</p><small>Sur les titres uniquement, jusqu'a 6 lignes.</small></div>
  <div><code>text-wrap: pretty</code><p class="ty-jolie">Un paragraphe dont la derniere ligne ne se reduit jamais a un seul mot orphelin en bas du bloc.</p><small>Sur les paragraphes.</small></div>
  <div><code>font-variant-numeric: tabular-nums</code><p class="ty-tab">4 280,00<br>1 890,00<br>12 400,00</p><small>Sur tous les montants et les tableaux.</small></div>
  <div><code>hyphens: auto</code><p class="ty-cesure" lang="fr">Un texte justifie sans cesures produit des rivieres blanches particulierement disgracieuses.</p><small>Avec text-align: justify, et l'attribut lang.</small></div>
  <div><code>font-feature-settings</code><p class="ty-liga">Affiche &mdash; office &mdash; final</p><small>Ligatures et chiffres elzeviriens quand la police les porte.</small></div>
</div>
@tw text-balance / text-pretty / tabular-nums / hyphens-auto
@end */
.ty-reglages { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-4); }
.ty-reglages > div { padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.ty-reglages code { display: block; margin-bottom: var(--sp-3); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--c-primary-ink); }
.ty-reglages p { margin: 0 0 var(--sp-3); font-size: var(--fs-md); line-height: 1.5; color: var(--c-text); }
.ty-reglages small { font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.4; }
.ty-eq    { text-wrap: balance; font-weight: 700; font-size: var(--fs-lg) !important; }
.ty-jolie { text-wrap: pretty; }
.ty-tab   { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.ty-cesure{ hyphens: auto; text-align: justify; }
.ty-liga  { font-feature-settings: "liga" 1, "dlig" 1; font-family: "Iowan Old Style", Georgia, serif; }
/* @endv */

/* @v TYP-C4
@nom Ajouter une police distante
@usage Quand la pile systeme ne suffit pas. Trois precautions : preconnexion, affichage immediat avec la police de repli, et un repli metriquement proche pour que le texte ne saute pas au chargement.
@large
@html
<div class="mv-code">
  <pre><code>&lt;!-- 1. Preconnexion : gagne 100 a 300 ms --&gt;
&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;

&lt;!-- 2. display=swap : le texte s'affiche tout de suite avec le repli --&gt;
&lt;link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;600;800&amp;display=swap"&gt;

/* 3. Le repli reste declare, et la pile complete est portee par un jeton */
:root {
  --font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* 4. Ajuster le repli pour que le texte ne saute pas a l'arrivee
      de la police : les trois valeurs se mesurent une fois. */
@font-face {
  font-family: "Instrument Sans repli";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
}</code></pre>
  <p class="mv-note">Sans <code>display=swap</code>, le texte reste invisible jusqu'a 3 secondes. Sans repli ajuste,
  la page saute a l'arrivee de la police : c'est le defaut le plus visible d'un site par ailleurs soigne.
  Tout le catalogue fonctionne sans aucune police distante, ce n'est donc jamais un prealable.</p>
</div>
@tw preconnect + display=swap + un jeton --font-ui qui porte la pile complete
@end */
/* @endv */