@font-face{font-family:'Plus Jakarta Sans';src:url('/fonts/PlusJakartaSans-Variable.woff2') format('woff2');font-weight:200 700;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('/fonts/Inter-Variable.woff2') format('woff2');font-weight:200 700;font-display:swap;unicode-range:U+2019,U+0027}
@font-face{font-family:'Inter';src:url('/fonts/Inter-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{
--ink:#14213D;--paper:#FAF8F3;--accent:#1D4ED8;
--ink-doux:rgba(20,33,61,.72);--ink-faible:rgba(20,33,61,.65);
--trait:rgba(20,33,61,.12);--voile:rgba(20,33,61,.04);
--r-carte:14px;--r-puce:999px;
/* Les chiffres en Inter, chasse tabulaire, comme dans l'application : le zéro pointé de
Plex Mono a été retiré le 2026-09-11 (décision de Vincent). Chaque règle de nombre garde
font-variant-numeric:tabular-nums, qui aligne les colonnes. */
--police-chiffres:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* ⚠️ LES CONTRÔLES HÉRITENT DE LA POLICE (audit avant lancement, 04/10) : sans cette règle, un
bouton ou un champ d'une page statique prenait la police du système (Arial, Helvetica Neue),
relevée à l'œil sur les fiches collège et école. */
button,input,select,textarea{font-family:inherit}
footer.pied{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid rgba(20,33,61,.12);font-size:13px;color:var(--ink-faible)}
.pied-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem 1.5rem}
.pied ul+.pied-t{margin-top:1rem}
@media (max-width:560px){.pied-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pied-t{margin:0 0 .4rem;font-size:12.5px;font-weight:600;color:var(--ink,#14213D)}
.pied ul{list-style:none;margin:0;padding:0}.pied li{margin:0}
.pied li a{display:inline-flex;min-height:24px;align-items:center;color:var(--ink-faible);text-decoration:none}
.pied li a:hover,.pied-conf a:hover{color:var(--accent,#1D4ED8)}
.pied-conf{margin:1.1rem 0 0;font-size:12.5px}.pied-conf a{color:var(--ink-faible)}
/* ⚠️ UNE LARGEUR DE PAGE, PARTOUT (16/10, décision de Vincent) : 72 rem, la largeur de l'en-tête —
le contenu commence au bord de la marque, sur toutes les pages. Mesuré la veille à 1 440 px :
neuf largeurs (668 à 1 112 px) et sept départs de titre différents. Seuls les paragraphes
gardent leur ligne de lecture (70 caractères, plus bas). Le classement, plein écran, est l'outil. */
main{max-width:72rem;margin:0 auto;padding:1.75rem 1.25rem 4rem}
/* Une page de lecture (méthode, mentions) : chaque bloc garde sa ligne de 46 rem, calé à gauche ;
le sommaire se fixe à droite, dans la place que la page laisse (16/10). Le pied garde la page. */
main.lecture>*:not(.pied){max-width:46rem}
/* Le sur-titre d'un palmarès (16/10) : la portée et la règle, une ligne au-dessus d'un titre court. */
.sur-titre{margin:.2rem 0 .3rem;font-size:.74rem;font-weight:700;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--accent,#1D4ED8)}
/* ── LA CHASSE À L'ESPACE, AU TÉLÉPHONE (16/10, audit de Vincent : « trop d'espace perdu ») ──
Mesuré à 390 px : le premier objet utile arrivait entre 400 et 1 170 px. Une feuille pour toutes
les familles ; « html body » passe devant les feuilles de page, posées après le socle.
Les chiffres en UNE rangée, les scènes de tête retirées, les cartes illustrées en ligne (scène à
gauche), les filtres sur une rangée qui défile, la carte géographique derrière « Carte ». */
@media (max-width:639px){
html body main{padding-top:1rem}
html body .hs-scene{display:none}
html body .hs-kpis,html body .hs-kpis.k2,html body .hs-kpis.k3,html body .hs-kpis.k4{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:.6rem 0}
html body .hs-kpis>div,html body .hs-kpis>div:nth-child(n+3){padding:.5rem .6rem;border-top:0;border-left:1px solid var(--trait,rgba(20,33,61,.1))}
html body .hs-kpis>div:first-child{border-left:0}
html body .hs-kpis.k3>div:nth-child(3){grid-column:auto}
html body .hs-kpis b{font-size:18px}
html body .hs-kpis dt{font-size:11.5px;line-height:1.25;white-space:normal}
html body .hs-kpis small{font-size:11px}
html body .hs-kpis .rep{display:none}
html body .inv-chiffres{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin:.6rem 0}
html body .inv-chiffres div{padding:.5rem .6rem}
html body .inv-chiffres b{font-size:1.1rem}
html body .inv-chiffres span{display:block;font-size:.72rem;line-height:1.25}
html body .cards{grid-template-columns:minmax(0,1fr);gap:.5rem;margin:.8rem 0 1.2rem}
html body .card{display:grid;grid-template-columns:6rem minmax(0,1fr);align-content:center}
html body .card>.sc,html body .card>.ic{grid-row:1 / span 4;width:6rem;height:100%;min-height:4.4rem}
html body .card>.cb{display:none}
html body .ld-types{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-1.25rem;padding-right:1.25rem}
html body .ld-types button{flex-shrink:0}
html body .hc-carto>.hc-carte{display:none}
html body .hc-bascule:checked~.hc-carte{display:block;max-width:none}
html body .hc-pilule{display:inline-flex}
html body main>table{display:block;max-width:100%;overflow-x:auto}
html body .hc-chiffres{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
html body .hc-chiffres li{display:block;padding:.5rem .6rem}
html body .hc-chiffres b{font-size:1.05rem}
html body .hc-chiffres span{font-size:.72rem;line-height:1.25}
html body .hc-chiffres small{display:none}
html body nav.bc,html body .crumb{display:none}
}
/* La bascule « Carte » (16/10) : au bureau, la carte est toujours là et la pilule n'existe pas. */
.hc-bascule{position:absolute;width:1px;height:1px;opacity:0}
.hc-pilule{display:none;align-items:center;gap:.4rem;justify-self:start;min-height:2.25rem;padding:0 .95rem;border-radius:999px;border:1px solid rgba(20,33,61,.16);background:#fff;font-size:.88rem;font-weight:600;color:var(--ink,#14213D);cursor:pointer}
.hc-bascule:focus-visible+.hc-pilule{outline:2px solid var(--accent,#1D4ED8);outline-offset:2px}
.hc-bascule:checked+.hc-pilule{background:var(--ink,#14213D);color:#fff;border-color:var(--ink,#14213D)}
/* ⚠️ UNE SEULE ÉCHELLE, FLUIDE. Les feuilles mélangeaient tailles fixes et clamp : selon la
page, un titre passait de 2rem à 1,5rem sur le même téléphone. */
h1,h2,h3{font-family:'Plus Jakarta Sans',Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(1.6rem,4.2vw,2.15rem);line-height:1.15;margin:.4rem 0 .5rem}
h2{font-size:clamp(1.15rem,2.4vw,1.4rem);line-height:1.25;margin:2.25rem 0 .7rem}
h3{font-size:1.05rem;line-height:1.3;margin:1.5rem 0 .4rem}
/* Le chapô : plus grand que le corps, moins appuyé que le titre. Il portait cinq traitements. */
.sub{color:var(--ink-doux);font-size:1.05rem;margin:0 0 1.25rem;max-width:62ch}
p{max-width:70ch}
a.brand{color:var(--accent);font-weight:700;text-decoration:none}
.liens{color:var(--ink-doux)}
.liens a,.sub a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.liens a:hover,.sub a:hover{border-bottom-color:currentColor}
/* ⚠️ CHIFFRES TABULAIRES PARTOUT. Une colonne de nombres qui ne s'aligne pas se lit deux fois
plus lentement — et ces pages ne servent qu'à comparer des nombres. */
table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-variant-numeric:tabular-nums;font-family:var(--police-chiffres)}
th,td{text-align:left;padding:.65rem .35rem;border-bottom:1px solid var(--trait)}
th[scope=row]{color:var(--ink-doux);font-weight:500;width:45%}
/* ── LES TABLEAUX LIBELLE / VALEUR SUR TELEPHONE (2026-09-06) ────────────────────────────
Mesure sur /verite a 375 px : la colonne des libelles faisait 90 px et coupait chaque phrase
en quatre lignes, la valeur en face en trois. Sous 560 px, chaque paire devient deux rangees
— le libelle au-dessus, la valeur dessous — comme les lignes de palmares plus bas. La regle
ne vise que les tableaux qui la demandent (class paires) : un tableau a quatre colonnes
avec en-tetes de ligne n'a rien a y gagner. Aucun accent grave ici : gabarit de chaine. */
@media (max-width:560px){
table.paires tr{display:block;padding:.55rem 0;border-bottom:1px solid var(--trait)}
table.paires th[scope=row],table.paires td{display:block;width:auto;border:0;padding:.1rem 0}
table.paires th[scope=row]{font-size:.85rem}
}
.cta{display:inline-block;margin:1.5rem 0;background:var(--accent);color:#fff;text-decoration:none;
padding:.8rem 1.35rem;border-radius:var(--r-puce);font-weight:600;
box-shadow:0 1px 2px rgba(20,33,61,.16)}
.cta:hover{filter:brightness(1.07)}
.note{color:var(--ink-faible);font-size:.85rem;margin-top:2rem;max-width:70ch}
/* ── L'EN-TÊTE STATIQUE ET SON MENU VIVENT DANS enteteActifs.mjs (2026-09-19) ─────────────
Une feuille liée par l'en-tête lui-même : les fiches, qui ne lient pas ce socle, portent aussi
l'en-tête. AUCUN ACCENT GRAVE ICI : ce socle est un gabarit de chaîne. */
/* ⚠️ UNE QUESTION DE FAQ EST UN TITRE, ET NE DOIT PAS EN AVOIR L'AIR. La spec HTML autorise un
h1–h6 comme enfant unique d'un summary ; c'est ce qui fait entrer les questions dans le plan
de la page — sans lui, un lecteur d'écran qui parcourt les titres les saute toutes. Laissé en
bloc, il pousserait le triangle de dépliement à la ligne et grossirait le texte. On lui retire
sa mise en page, pas son rôle. Vérifié dans un navigateur : summary identique au pixel, et
l'arbre d'accessibilité passe de « generic » à « heading ». */
summary h3{display:inline;font-size:inherit;font-weight:inherit;margin:0}
/* ── LES LISTES SUR TÉLÉPHONE : RANG, NOM, NOTE — PUIS LIEU, PRIX (2026-09-10) ─────────────────
« Droit au but en version mobile » (Vincent). Mesuré à 375 px : une ligne de palmarès faisait
132 px sur trois étages (le nom, puis « 77 · 22 279 hab », puis la note, sa barre et un prix
cassé en « 1 944 » / « €/m² ») — cinq communes par écran, 8,9 écrans pour trente. Material 3
fixe une ligne double à 72 dp ; le Top Charts de l App Store et Niche tiennent un classement
en deux lignes. Ici : rang, nom et note sur la premiere ; département, habitants et prix sur
la seconde. La barre disparaît (le nombre la dit), les pastilles aussi (la fiche les porte).
Règle partagée par les six gabarits de lignes : palmarès régional et national, fraîcheur,
meilleures de France, pages par critère, collèges.
⚠️ html body EN TÊTE DE CHAQUE SÉLECTEUR, ET C EST UNE MESURE : ce socle passe AVANT les
feuilles de page, qui redéfinissent .row, .score et .price à spécificité égale — sans ce
préfixe, la règle perdait au premier gabarit qui écrit sa grille.
Aucun accent grave ici : gabarit de chaîne. */
@media (max-width:560px){
html body .row{grid-template-columns:2rem minmax(0,1fr) auto;column-gap:.6rem;row-gap:0;align-items:center;padding:.6rem 0}
html body .row .rank{align-self:start}
html body .row .who{grid-column:2;grid-row:1/span 2}
html body .row .score{grid-column:3;grid-row:1;justify-self:end;margin:0;gap:0}
html body .row .price,html body .row .val{grid-column:3;grid-row:2;justify-self:end;text-align:right;margin:0}
html body .row:not(:has(.score)) .price,html body .row:not(:has(.score)) .val{grid-row:1/span 2}
html body .row .bar,html body .row .pills,html body .row .why{display:none}
html body .row .price .u,html body .row .val .u{display:inline;margin-left:.2rem}
html body .row .su,html body .row .who .sub{font-size:.82rem}
html body .rbanner,html body .eyebrow{display:none}
html body .crumb,html body .bc,html body .pickhint,html body .card>.cn{font-size:.82rem}
html body .row .who .sub{margin:0}
html body .pad{padding:1rem 1.1rem}
html body .ft{font-size:.82rem}
}
/* ── UNE VIGNETTE PAR LIGNE, UN SEUL GABARIT DU RANG 1 AU RANG 30 (2026-09-13) ─────────────────
Decision de Vincent apres audit : Niche et Livability donnent une image a chaque commune d un
classement, au telephone comme au bureau, et ne changent jamais de gabarit apres la troisieme.
La vignette est la scene peinte au build (format carte, environ 12 ko), chargee a la demande
(loading lazy) : trente lignes ne se telechargent pas d un coup.
Les lignes .dup sont les trois premieres, deja montrees par le podium : masquees partout depuis
que le podium se compacte au telephone au lieu de se masquer (17/10, podium.mjs).
Aucun accent grave : gabarit de chaine. */
.row .vg{display:block;width:4.4rem;height:2.5rem;border-radius:8px;overflow:hidden;background:rgba(20,33,61,.08);align-self:center;flex:none}
.row .vg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.row .why .faible{color:var(--muted)}
/* La lettre A a E devant la note : la seule couleur de la ligne, et elle informe. */
.row .score .sg{display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.35rem;padding:0 .25rem;border-radius:6px;font-size:.75rem;font-weight:800;line-height:1;flex:none}
html body .row.dup{display:none}
@media (max-width:560px){
html body .row:has(.vg){grid-template-columns:1.5rem 3.6rem minmax(0,1fr) auto;display:grid}
html body .row:has(.vg) .rank{grid-column:1;grid-row:1/span 2}
html body .row .vg{grid-column:2;grid-row:1/span 2;width:3.6rem;height:2.5rem}
html body .row:has(.vg) .who{grid-column:3;grid-row:1/span 2}
html body .row:has(.vg) .score{grid-column:4;grid-row:1}
html body .row:has(.vg) .price,html body .row:has(.vg) .val{grid-column:4;grid-row:2}
html body .row:has(.vg):not(:has(.score)) .price,html body .row:has(.vg):not(:has(.score)) .val{grid-row:1/span 2}
/* Le pourquoi du rang revient au telephone, en une ligne : la moitie plus faible se tait. */
html body .row .who .pills:has(.why){display:block;margin-top:.1rem}
html body .row .who .pills .why{display:inline;font-size:.8rem;color:var(--muted)}
html body .row .who .pills .why .faible{display:none}
html body .row .who .pills .why .axe{font-weight:600;color:var(--ink-doux)}
/* Les trois premieres ont le meme marqueur que les suivantes : le numero, a l encre (11/09). */
html body .row.top .rank{background:none;color:rgba(20,33,61,.65);width:auto;height:auto;line-height:1.45;font-size:1rem;justify-self:end}
html body li.row.top{background:none}
/* La note porte sa lettre de couleur au telephone aussi. */
html body .row .score .sg{display:inline-flex;margin-right:.3rem}
}
.rbanner picture{display:block}
/* Le lien retour pose par public/retour.js quand on arrive du classement ou d une fiche. */
/* La pastille de retour de l application (ui/classeRetour.ts, 30/09) : c etait un lien bleu. */
.retour{margin:.1rem 0 .6rem}
.retour a{display:inline-flex;align-items:center;gap:.35rem;min-height:30px;padding:.25rem .75rem;border:1px solid rgba(20,33,61,.15);border-radius:999px;font-size:13px;font-weight:500;color:rgba(20,33,61,.8);text-decoration:none;transition:border-color .15s,background-color .15s,color .15s}
.retour a:hover{border-color:rgba(29,78,216,.5);background:rgba(29,78,216,.05);color:var(--accent)}
/* ── LE HAUT DE PAGE AU TÉLÉPHONE : LE TITRE, UNE LIGNE, ET LE RESTE SE DEMANDE (2026-09-10) ──
Mesuré à 375 px sur un classement par critère : bandeau, fil, titre, chapô de quatre lignes,
ligne de sources, phrase de synthèse, paragraphe de méthode de cinq lignes — le n°1 à 720 pt
sur 874. Divulgation progressive (Nielsen Norman Group) : ce qu on vient chercher d abord,
ce qui explique ensuite, à la demande. Le repli est ouvert par défaut, donc sur écran large
il se lit comme avant et son titre ne s affiche pas ; repli-mobile.js le ferme sous 560 px.
Sans JavaScript il reste ouvert — rien n est jamais perdu. */
details.calcul>summary{display:none}
@media (max-width:560px){
details.calcul>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .6rem;list-style:none;cursor:pointer;font-size:.85rem;color:var(--ink-doux);margin:.1rem 0 .7rem;min-height:24px}
details.calcul>summary::-webkit-details-marker{display:none}
details.calcul>summary .lire{color:var(--accent);font-weight:600}
details.calcul>summary .lire::after{content:" +"}
details.calcul[open]>summary .lire::after{content:" −"}
details.calcul>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}
/* ── LES PAGES LONGUES ANNONCENT LEUR PLAN (2026-09-06) ──────────────────────────────────
/trajet : 986 mots, sept sections, aucun sommaire ; /a-propos : huit. Le sommaire se pose
sous le chapo, en deux colonnes sur ecran large — la table de Linear, le « Contents » d'Our
World in Data. Aucun accent grave ici : gabarit de chaine. */
.sommaire{margin:1rem 0 1.5rem;padding:.8rem 1rem .6rem;border:1px solid var(--trait);border-radius:var(--r-carte);background:#fff}
.sommaire-t{margin:0 0 .3rem;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faible)}
.sommaire-d>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem;min-height:24px}
.sommaire-d>summary::-webkit-details-marker{display:none}
.sommaire-d>summary::after{content:"";width:.4rem;height:.4rem;margin-left:auto;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.sommaire-d[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.sommaire-d:not([open])>.sommaire-t{margin:0}
.sommaire-n{font-weight:400;letter-spacing:0}
/* ⚠️ SANS NUMÉROS ET SANS MARGE DE LIGNE (05/10, capture de Vincent sur /a-propos) : la seconde
colonne commençait plus haut que la première — la marge haute d'un li se perd au saut de
colonne, pas en tête de la première. Et le sommaire de « Méthode », écran de l'application,
n'est pas numéroté : un sommaire, un dessin. */
.sommaire ol{margin:0;padding-left:0;list-style:none;font-size:.92rem;line-height:1.75;columns:2;column-gap:2rem}
.sommaire li{break-inside:avoid;margin:0}
.sommaire a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.sommaire a:hover{color:var(--accent);border-bottom-color:currentColor}
@media (max-width:560px){.sommaire ol{columns:1}}
/* Les 22 zones du calcul : des jetons qu'on balaie, plus un paragraphe gris qu'on saute. */
.jetons{list-style:none;margin:.6rem 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.jetons li{font-size:.85rem;line-height:1.3;padding:.3rem .7rem;border:1px solid var(--trait);border-radius:var(--r-puce);background:#fff;color:var(--ink)}
/* Le schema porte-a-porte : un SVG qui prend la largeur, une legende en dessous. */
.schema{margin:1.1rem 0 1.4rem;padding:.9rem 1rem .6rem;border:1px solid var(--trait);border-radius:var(--r-carte);background:#fff}
.schema svg{display:block;width:100%;height:auto}
.schema figcaption{margin-top:.4rem;font-size:.85rem;color:var(--ink-faible)}
/* ── LE PLANCHER DE 13 px, ENFIN APPLIQUÉ AUX PAGES PRÉRENDUES (2026-09-07) ────────────────
L'application pose ce plancher depuis le 05/09 : sous 640 px, aucun texte courant ne descend
sous 13 px. Les 563 palmarès, les 481 classements par critère et les 34 894 fiches ne l'ont
JAMAIS eu — leur feuille de style vit ici, et le verrou echelleTexteMobile ne lit que src/.
Le défaut est donc revenu sans que rien ne tombe.
Mesuré sur un palmarès à 390 px : 105 fragments sous 13 px, dont 54 entre 9,9 et 10,9 px —
les unités « /100 » et « €/m² », une paire par ligne de classement — plus douze à 11 px dans
le pied et dix-neuf à 12. Le plancher d'Apple est 11 pt (environ 15 px), celui de Material
14 sp ; 10 px pour l'unité d'un nombre est en dessous de tout.
ON RELÈVE, ON NE REDESSINE PAS. Ces règles vivent dans six gabarits et dans le prérendu à des
dizaines d'endroits : les corriger une par une aurait laissé passer la prochaine.
ET LE BLOC GAGNE PAR LA SPÉCIFICITÉ, PAS PAR L'ORDRE — c'est la subtilité qui aurait rendu ce
correctif silencieusement inopérant. Le socle passe AVANT les feuilles de page, et c'est voulu
(une page qui a une raison de diverger doit pouvoir l'écrire). À spécificité égale, le .price
.u de la page l'emporterait donc sur le mien. Le préfixe body porte chaque sélecteur d'un
cran : il gagne où qu'il soit placé, et il ne gagne QUE sous 640 px.
ET LA FICHE N'A JAMAIS EU DE DÉFAUT ICI, CONTRAIREMENT À CE QUE J'AI RAPPORTÉ LE 07/09. Mon
relevé comptait 38 fragments sous 13 px : ils appartiennent tous à la version IMPRIMABLE
(classe hidden print:block, tailles en points — 8pt vaut 10,67 px), invisible à l'écran. Le
script de mesure ne vérifiait pas la visibilité. À l'écran, la fiche en compte ZÉRO.
IL RESTE UN CAS QUE CE BLOC NE PEUT PAS PRENDRE : la ligne de preuve du pied, dont la taille
de 12 px est écrite en STYLE EN LIGNE dans le prérendu. Un style en ligne bat toute feuille,
media query comprise — seule la source peut le corriger, et c'est fait au même endroit que
ce bloc plutôt qu'ici.
ET J'AI RANGÉ LE TAMPON « ILLUSTRATION GÉNÉRÉE » DANS LES EXCEPTIONS SANS LES RELIRE. Le
verrou de l'application n'en nomme que deux — la classe DPE au centre d'une bande, le « i »
dans un cercle de 15 px — et sa définition dit : « Ce ne sont pas des textes : ce sont des
lettres employées comme dessins, à l'intérieur d'une forme qui ne peut pas grandir avec
elles. » Le tampon est une phrase de deux mots, à lire, sur un bandeau qui peut parfaitement
l'accueillir plus grande. Il monte donc à 13 px comme le reste : une mention de provenance
qu'on ne lit pas ne prouve rien.
ET LE SUR-TITRE « MÉTHODE » ÉTAIT PLUS PETIT QUE SON PROPRE TEXTE — 11,2 px pour un h2 au-
dessus d'un corps à 12,8. Les capitales espacées justifient un corps réduit, pas une
hiérarchie inversée. */
@media (max-width:640px){
body .price .u,body .val .u,body .su,body .p-note small,body .p-prix small,body .menu-titre,body .menu-h,body .sommaire-t,body .crumb,body .eyebrow,body .meta,body .method,body .method p,body .method h2,body .links a,body .rbanner .stamp,body .cap,body .p-pourquoi{font-size:13px;line-height:1.35}
}
/* Un dépli de référence : le résumé se lit comme un titre de section, le chevron dit qu'il
s'ouvre. Le contenu reste dans le DOM fermé — un details fermé est indexé. */
.deplie{margin:1.1rem 0 1.4rem;border:1px solid var(--trait);border-radius:var(--r-carte);background:#fff}
.deplie>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;font-weight:700;font-size:1.02rem;color:var(--ink)}
.deplie>summary::-webkit-details-marker{display:none}
.deplie>summary::before{content:"";width:.45rem;height:.45rem;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);transition:transform .12s}
.deplie[open]>summary::before{transform:rotate(45deg)}
.deplie>summary:hover{color:var(--accent)}
.deplie>*:not(summary){padding:0 1rem 1rem}
/* Une cible tactile ne descend pas sous 24 px (WCAG 2.5.8, AA) — déjà corrigé côté application. */
a{min-height:24px}
@media (prefers-reduced-motion:no-preference){a{transition:color .15s,border-color .15s}}