@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-v1-latin.woff2) format("woff2")}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:100 800;font-stretch:87.5%;font-display:swap;src:url(fonts/martian-mono-v1-w875-latin.woff2) format("woff2")}
:root{
--bg:#0A0E10;--chrome:#0C1114;--surface:#0F1518;--row-hover:#10171A;--raise:#141C20;
--line-soft:#161F23;--track:#1A2327;--bar:#3A474C;--line:#1E282C;--line-strong:#2B373C;
--text:#E6ECEA;--text-p:#C5D0D2;--text-2:#9AA7AB;--text-3:#788588;--text-col:#7B888C;--disabled:#4A575B;
--accent:#C8F36B;--accent-ink:#C8F36B;--accent-hover:#D6F88A;--on-accent:#0A0E10;--accent-wash:rgba(200,243,107,.10);--brand-slate:#6A7980;
--warn:#F08262;--warn-wash:rgba(240,130,98,.10);--amber:#F0BE4C;--blue:#5F96EC;--teal:#62D8C2;--green:#8FD06C;--violet:#B58CF2;
--sso-bg:#131314;--sso-line:#8E918F;--sso-ink:#E3E3E3;
--hdr:rgba(10,14,16,.94);--shd:rgba(0,0,0,.9);
/* Panneaux sans ombre (valeur neutre, utilisable dans une liste d'ombres) ; menus et bulles : --shadow-menu */
--shadow:0 0 0 0 transparent;--shadow-menu:0 1.125rem 2.5rem -1rem var(--shd);
--sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--mono-stretch:87.5%;
--r-ctl:0;--r-chip:0;--r-panel:0;
--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);
--t-press:140ms;--t-ui:200ms;--t-reveal:640ms;
/* Rythme vertical commun (retour de Didier sur l'espace) : entre grandes sections, puis entre blocs secondaires */
--gap-section:clamp(2.5rem,4.5vw,4rem);--gap-sub:clamp(2rem,3.5vw,3rem);
--z-header:20;
color-scheme:dark}
/* Thème clair : choisi (data-theme=light), ou thème du système quand le visiteur a choisi « Système ».
   Sans choix, le sombre (identité de la marque) : data-theme=dark écrit par le serveur. */
:root[data-theme=light]{
--bg:#FFFFFF;--chrome:#F8F9FA;--surface:#F2F4F6;--row-hover:#F4F6F8;--raise:#EDF0F2;
--line-soft:#EEF0F2;--track:#E8EBEE;--bar:#B5BCC4;--line:#E2E6EA;--line-strong:#CDD3D9;
--text:#0E1216;--text-p:#2B3138;--text-2:#48515A;--text-3:#666E77;--text-col:#5F6870;--disabled:#9AA2AA;
--accent:#15803D;--accent-ink:#157D3C;--accent-hover:#166534;--on-accent:#FFFFFF;--accent-wash:rgba(21,128,61,.08);--brand-slate:#6A7980;
--warn:#C2410C;--warn-wash:rgba(194,65,12,.08);--amber:#B05109;--blue:#2563EB;--teal:#0D7B6A;--green:#387B29;--violet:#7447D6;
--sso-bg:#FFFFFF;--sso-line:#747775;--sso-ink:#1F1F1F;
--hdr:rgba(255,255,255,.94);--shd:rgba(15,23,30,.14);
color-scheme:light}
@media (prefers-color-scheme:light){:root[data-theme=system]{
--bg:#FFFFFF;--chrome:#F8F9FA;--surface:#F2F4F6;--row-hover:#F4F6F8;--raise:#EDF0F2;
--line-soft:#EEF0F2;--track:#E8EBEE;--bar:#B5BCC4;--line:#E2E6EA;--line-strong:#CDD3D9;
--text:#0E1216;--text-p:#2B3138;--text-2:#48515A;--text-3:#666E77;--text-col:#5F6870;--disabled:#9AA2AA;
--accent:#15803D;--accent-ink:#157D3C;--accent-hover:#166534;--on-accent:#FFFFFF;--accent-wash:rgba(21,128,61,.08);--brand-slate:#6A7980;
--warn:#C2410C;--warn-wash:rgba(194,65,12,.08);--amber:#B05109;--blue:#2563EB;--teal:#0D7B6A;--green:#387B29;--violet:#7447D6;
--sso-bg:#FFFFFF;--sso-line:#747775;--sso-ink:#1F1F1F;
--hdr:rgba(255,255,255,.94);--shd:rgba(15,23,30,.14);
color-scheme:light}}
@media (prefers-reduced-motion:no-preference){html.theme-fade,html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,fill 200ms ease,stroke 200ms ease,box-shadow 200ms ease,transform var(--t-press) var(--ease-out)!important}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:4.5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:0.90625rem;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.025em;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--accent-ink);text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration:underline}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:0}
::selection{background:var(--accent);color:var(--on-accent)}
code,pre,.mono,.num{font-family:var(--mono);font-stretch:var(--mono-stretch);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Un tableau ignore width:1px : un tableau pour lecteurs d'écran va dans un conteneur .sr (sinon il élargit la page mobile) */
.skip{position:absolute;left:-624.9375rem}
.skip:focus{left:0.75rem;top:0.625rem;z-index:60;background:var(--surface);border:1px solid var(--accent-ink);color:var(--accent-ink);padding:0.5rem 0.75rem;border-radius:var(--r-ctl)}
.wrap{max-width:82.5rem;margin:0 auto;padding-inline:clamp(1rem,3vw,2rem)}
.muted{color:var(--text-2)}
.ico{width:1.1em;height:1.1em;flex:none;vertical-align:-.18em}
.preview{margin:0;padding:0.375rem 1rem;background:var(--warn-wash);border-bottom:1px solid var(--line);color:var(--warn);text-align:center;font-size:0.8125rem}
/* Bandeau au-dessus de l'en-tête (accueil) : heure de la dernière vérification, puis des liens sur une ligne. Par défaut rien ne bouge :
   la ligne se fait défiler à la main et la copie qui ferme la boucle n'existe pas. Le défilement, la copie et la pause ne viennent
   qu'avec un pointeur qui survole, un écran large et sans réduction des animations ; survol, focus clavier et pause l'arrêtent.
   Ligne discrète : étiquettes en texte avec un carré de couleur, une seule valeur en accent (le prix le plus bas). Fond opaque */
.tk{display:flex;align-items:stretch;height:2rem;border-bottom:1px solid var(--line);background:var(--chrome);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.03em;color:var(--text-2)}
.tk-live{flex:none;display:flex;align-items:center;gap:0.5rem;margin:0;padding:0 0.875rem 0 1rem;border-inline-end:1px solid var(--line);color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.tk-live:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px}
.tk-dot{flex:none;width:0.375rem;height:0.375rem;border-radius:50%;background:var(--text-3)}
.tk-k{letter-spacing:.06em;text-transform:uppercase}.tk-k::after{content:"·";margin-inline-start:0.5rem;color:var(--text-3)}
.tk-view{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent)}.tk-view::-webkit-scrollbar,.tk::-webkit-scrollbar{display:none}
.tk-run{display:flex;width:max-content;height:100%}
.tk-seg{display:flex;flex:none;align-items:center}
.tk-seg[inert]{display:none}
.tk-lab{display:inline-flex;align-items:center;gap:0.5rem;height:100%;padding:0 0.375rem 0 1.375rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--text)}
.tk-lab::before{content:"";flex:none;width:0.375rem;height:0.375rem;background:var(--text-3)}
.tk-lab.g-promo::before{background:var(--warn)}.tk-lab.g-ix::before{background:var(--text)}
.tk-lab-x{font-weight:400;letter-spacing:.03em;text-transform:none;color:var(--text-3)}
.tk-it{display:inline-flex;align-items:center;gap:0.5rem;height:100%;padding:0 0.75rem;white-space:nowrap;color:inherit}
.tk-it:hover{background:var(--row-hover);color:var(--text);text-decoration:none}
.tk-it:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px}
.tk-s,.tk-v{color:var(--text)}
.tk-u{color:var(--text-3)}
.tk-x{color:var(--text-2)}.tk-it.g-promo .tk-x{color:var(--warn)}
.tk-pause{display:none}
@media (max-width:40em),(hover:none){.tk{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 3rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 3rem),transparent)}.tk-view{flex:none;overflow:visible;-webkit-mask-image:none;mask-image:none}.tk-live{padding-inline-start:0.75rem}}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (min-width:40.0625em){
.tk-view{overflow:hidden}
.tk-seg[inert]{display:flex}
.tk-run{animation:tk-run 80s linear infinite}
.tk-n6 .tk-run{animation-duration:36s}.tk-n7 .tk-run{animation-duration:42s}.tk-n8 .tk-run{animation-duration:48s}.tk-n9 .tk-run{animation-duration:54s}.tk-n10 .tk-run{animation-duration:60s}.tk-n11 .tk-run{animation-duration:66s}.tk-n12 .tk-run{animation-duration:72s}.tk-n13 .tk-run{animation-duration:78s}.tk-n14 .tk-run{animation-duration:84s}.tk-n15 .tk-run{animation-duration:90s}.tk-n16 .tk-run{animation-duration:96s}.tk-n17 .tk-run{animation-duration:102s}.tk-n18 .tk-run{animation-duration:108s}.tk-n19 .tk-run{animation-duration:114s}.tk-n20 .tk-run{animation-duration:120s}.tk-n21 .tk-run{animation-duration:126s}.tk-n22 .tk-run{animation-duration:132s}.tk-n23 .tk-run{animation-duration:138s}.tk-n24 .tk-run{animation-duration:144s}.tk-n25 .tk-run{animation-duration:150s}.tk-n26 .tk-run{animation-duration:156s}.tk-n27 .tk-run{animation-duration:162s}.tk-n28 .tk-run{animation-duration:168s}.tk-n29 .tk-run{animation-duration:174s}.tk-n30 .tk-run{animation-duration:180s}.tk-n31 .tk-run{animation-duration:186s}.tk-n32 .tk-run{animation-duration:192s}.tk-n33 .tk-run{animation-duration:198s}.tk-n34 .tk-run{animation-duration:204s}.tk-n35 .tk-run{animation-duration:210s}.tk-n36 .tk-run{animation-duration:216s}.tk-n37 .tk-run{animation-duration:222s}.tk-n38 .tk-run{animation-duration:228s}.tk-n39 .tk-run{animation-duration:234s}.tk-n40 .tk-run{animation-duration:240s}
.tk:hover .tk-run,.tk:focus-within .tk-run,.tk:has(.tk-pause input:checked) .tk-run{animation-play-state:paused}
.tk-pause{position:relative;order:3;flex:none;display:grid;place-items:center;width:2rem;border-inline-start:1px solid var(--line);cursor:pointer}
.tk-pause input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tk-pause-i{box-sizing:border-box;width:0.5625rem;height:0.625rem;border-inline:3px solid var(--text-2)}
.tk-pause:hover .tk-pause-i{border-color:var(--text)}
.tk-pause:has(input:checked) .tk-pause-i{width:0;height:0;border-style:solid;border-width:0.3125rem 0 0.3125rem 0.5625rem;border-color:transparent transparent transparent var(--accent-ink)}
.tk-pause:has(input:focus-visible){outline:2px solid var(--accent-ink);outline-offset:-2px}
}
@keyframes tk-run{to{transform:translateX(-50%)}}
@media print{.tk{display:none}}

/* Mouvement : apparition au défilement (site.js ajoute .is-in), tout reste visible sans JS */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
.reveal{opacity:0;transform:translateY(0.875rem);transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out);transition-delay:calc(var(--i,0) * 60ms);animation:reveal-safety 0s 2.5s forwards}
.reveal.is-in{opacity:1;transform:none;animation:none}
}
@keyframes reveal-safety{to{opacity:1;transform:none}}
/* Papier : aucune animation d'apparition. À l'impression elles repartent de leur première image : le bloc du haut de l'accueil sortait
   presque vide (phrase, recherche et graphique à opacité nulle), et le tracé d'un graphique restait masqué */
@media print{.reveal,.hero .rise,.dp-reveal{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important;transition:none!important}}

/* Contrôles */
.btn{display:inline-flex;align-items:center;gap:0.5rem;height:2.5rem;padding:0 1rem;border:1px solid var(--line-strong);background:transparent;color:var(--text);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.71875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:transform var(--t-press) var(--ease-out),background-color var(--t-ui) ease,border-color var(--t-ui) ease}
.btn:hover{text-decoration:none;color:var(--text);border-color:var(--text-3)}
.btn:active{transform:scale(0.97)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{color:var(--on-accent);border-color:var(--accent-hover);background:var(--accent-hover)}
.btn .ico{transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover .ico-go{transform:translateX(3px)}}
.chip{display:inline-flex;align-items:center;gap:0.3125rem;height:1.5rem;padding:0 0.5625rem;border-radius:var(--r-chip);font-size:0.75rem;font-weight:500;white-space:nowrap;border:1px solid var(--line);color:var(--text-2);background:transparent}
.chip.accent{border-color:transparent;background:var(--accent-wash);color:var(--accent-ink)}
.chip.warn{border-color:transparent;background:var(--warn-wash);color:var(--warn)}
.chip.mono{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem}
.panel{background:var(--bg);border:1px solid var(--line)}
.label{font-size:0.8125rem;color:var(--text-2)}
/* Composants communs de la maquette B (toutes les pages) : en-tête de panneau, libellé mono en capitales, badge plein,
   étiquette à contour, point « en direct », touche de clavier. Les boutons restent .btn et .btn.primary */
.panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.375rem 1rem;padding:0.75rem 1rem;border-bottom:1px solid var(--line);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.panel-head :is(h2,h3,strong){margin:0;font:inherit;font-weight:600;letter-spacing:inherit;color:var(--text)}
.cap{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase}
.badge{display:inline-flex;align-items:center;padding:2px 0.4375rem;background:var(--accent);color:var(--on-accent);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.badge.warn{background:var(--warn)}
.promos .badge{font-size:0.6875rem;padding:2px 0.4375rem}
.tag{display:inline-flex;align-items:center;padding:2px 0.375rem;border:1px solid var(--line-strong);color:var(--text-2);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.04em;white-space:nowrap}
.live-dot{display:inline-block;flex:none;width:0.375rem;height:0.375rem;border-radius:50%;background:var(--accent-ink)}
@media (prefers-reduced-motion:no-preference){.live-dot{animation:live-pulse 2s ease-in-out infinite}}
@keyframes live-pulse{50%{opacity:.35}}
kbd{padding:1px 0.3125rem;border:1px solid var(--line-strong);color:var(--text-3);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem}

/* En-tête */
.top{position:sticky;top:0;z-index:var(--z-header);background:var(--hdr);backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;column-gap:clamp(1rem,2.6vw,1.875rem);min-height:3.75rem}
.brand{display:flex;align-items:center;gap:0.625rem;color:var(--text);font-weight:600;letter-spacing:-.02em;font-size:1.0625rem}
.brand:hover{text-decoration:none;color:var(--text)}
.brand img{width:1.75rem;height:1.75rem;border-radius:0;display:block;outline:1px solid var(--line-strong)}
.nav{display:flex;align-items:center;gap:clamp(0.875rem,2vw,1.625rem);margin:0;padding:0;list-style:none;white-space:nowrap;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.71875rem;letter-spacing:.05em;text-transform:uppercase}
.nav a{display:block;padding:0.3125rem 0;color:var(--text-2);transition:color var(--t-ui) ease}
.nav a:hover{text-decoration:none;color:var(--text)}
/* Rubrique active : texte principal et trait d'accent de 2 px sous le mot */
.nav a[aria-current]{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent-ink)}
/* Tiroir sous « Indice » : les six familles. <details> natif à côté du lien (le lien mène toujours à l'indice, le chevron ouvre la liste),
   même panneau que les tiroirs de langue ; sans script, au clavier et au toucher */
.nav-ix{position:relative;display:flex;align-items:center;gap:1px}
/* position:relative : le texte pour lecteur d'écran du bouton (absolu) reste dans le bouton ; sans cela, sous la navigation défilante, il se
   plaçait contre la rangée de l'en-tête, hors de la zone qui défile, et élargissait la page sur téléphone */
.nav-sub summary{position:relative;display:grid;place-items:center;width:1.5rem;height:1.5rem;cursor:pointer;list-style:none}
.nav-sub summary::-webkit-details-marker{display:none}
.nav-sub summary::marker{content:""}
.nav-sub summary:hover .caret,.nav-sub[open] .caret{border-top-color:var(--text)}
.nav-sub[open] .caret{transform:rotate(180deg)}
.nav-sub-panel{inset-inline:-0.625rem auto;width:max-content;min-width:14.375rem;margin:0;list-style:none;font-family:var(--sans);font-size:0.875rem;letter-spacing:0;text-transform:none}
.nav .nav-sub-panel a{display:flex;padding:0 0.625rem;color:var(--text)}
.nav .nav-sub-panel a[aria-current]{box-shadow:none}
.nav-sub-panel .ix-tk{flex:none;width:1.875rem}
/* Tiroirs « Analyses ▾ » et « API ▾ » : une seule page voisine, un panneau à sa mesure */
.nav-sub:not([data-prefs="index"]):not([data-prefs="models"]) .nav-sub-panel{min-width:10rem}
@media (pointer:coarse){.nav-sub summary{width:2rem;height:2.75rem}}
.spacer{flex:1}
.seg{display:flex;padding:3px;gap:2px;border-radius:0;background:var(--raise)}
/* L'élément actif porte un fond ET une ombre. Le fond passait déjà en fondu, l'ombre non : elle sautait d'un segment à
   l'autre alors que le reste glissait. Une seule propriété ajoutée à la liste, aucun script */

/* Recherche */
.search{display:flex;align-items:center;gap:0.625rem;max-width:38.75rem;height:3.25rem;padding:0 0.375rem 0 1rem;background:var(--surface);border:1px solid var(--line);border-radius:0;transition:border-color var(--t-ui) ease,box-shadow var(--t-ui) ease}
.search:focus-within{border-color:var(--accent-ink);box-shadow:0 0 0 0.25rem var(--accent-wash)}
.search>.ico{font-size:1.1875rem;color:var(--text-3)}
.search input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;font-size:1rem}
.search input::placeholder{color:var(--text-3);opacity:1}
.search .btn{height:2.5rem}
/* Suggestions de la recherche (site.js, combo) : la liste du comparateur (.cmp-listbox), posée sous le champ, bord à bord avec
   son cadre (-1px : le cadre du formulaire est hors de la boîte de référence) */
.search,.top-search{position:relative}
.search .cmp-listbox{left:-1px;right:-1px;width:auto}

/* Structure des pages */
.page{padding-top:clamp(1.75rem,4vw,3rem);padding-bottom:var(--gap-section)}
.narrow{max-width:55rem}
/* Aide « (i) » : bouton rond discret, bulle au-dessus ; survol (pointeur fin), focus et toucher sans script ; Échap et clic
   avec le script. Apparition courte (fréquente), sans déplacement si l'utilisateur réduit les animations */
.info{position:relative;display:inline-flex;vertical-align:middle;margin-inline-start:2px}
.info-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:-0.25rem 0;padding:0;border:0;border-radius:50%;background:none;color:var(--text-3);cursor:help;transition:color var(--t-ui) ease}
.info-btn .ico{width:0.9375rem;height:0.9375rem}
/* Toucher : zone de 44 px autour du bouton, invisible, sans changer la mise en page (relecture de Zuri) */
@media (pointer:coarse){.info-btn{position:relative}.info-btn::before{content:"";position:absolute;inset:-0.625rem}}
.info-btn:hover,.info.is-open .info-btn{color:var(--text)}
.info-tip{position:absolute;z-index:30;bottom:calc(100% + 0.375rem);left:50%;width:max-content;max-width:min(17.5rem,calc(100vw - 1rem));padding:0.5rem 0.625rem;border-radius:0;background:var(--raise);border:1px solid var(--line);box-shadow:var(--shadow-menu);color:var(--text);font-family:var(--sans);font-size:0.8125rem;font-weight:400;line-height:1.45;letter-spacing:0;text-align:start;text-transform:none;white-space:normal;display:none;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,0.25rem);transition:opacity 120ms ease,transform 120ms var(--ease-out),visibility 0s linear 120ms,display 120ms allow-discrete}
/* Bulle masquée hors de la mise en page (display:none) : une bulle fermée n'élargit jamais la page ; ouverte, elle entre en
   fondu depuis son état de départ (@starting-style) et le script la recadre dans la fenêtre (propriété translate) */
/* Ouverture retardée au SURVOL seulement : sur l'en-tête du tableau des offres, cinq boutons (i) se suivent à 106-123 px.
   Un pointeur qui longe la ligne passe sur quatre d'entre eux en ~345 px, soit 70 à 150 ms chacun : sans délai, les quatre
   bulles s'ouvraient au passage. 250 ms laissent passer le survol de transit et n'ouvrent que sur un arrêt volontaire.
   Le focus clavier et le clic gardent 0 s : ce sont des gestes délibérés, ils doivent répondre tout de suite */
@media (hover:hover) and (pointer:fine){.info:hover .info-tip{display:block;opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:250ms}}
.info:focus-within .info-tip,.info.is-open .info-tip{display:block;opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
@starting-style{.info .info-tip{opacity:0}}
@media (prefers-reduced-motion:no-preference){@starting-style{.info .info-tip{transform:translate(-50%,0.25rem)}.info .info-tip.start,.info .info-tip.end{transform:translate(0,0.25rem)}}}
.info.is-dismissed .info-tip{display:none;opacity:0;visibility:hidden}
.info-tip.end{left:auto;right:-0.25rem;transform:translate(0,0.25rem)}
.info-tip.start{left:-0.25rem;transform:translate(0,0.25rem)}
@media (hover:hover) and (pointer:fine){.info:hover .info-tip.start{transform:none}}
.info:focus-within .info-tip.start,.info.is-open .info-tip.start{transform:none}
/* Dans un tableau à défilement horizontal, le conteneur couperait une bulle ouverte vers le haut : elle s'ouvre vers le bas */
.table-wrap .info-tip{bottom:auto;top:calc(100% + 0.375rem)}
@media (hover:hover) and (pointer:fine){.info:hover .info-tip.end{transform:none}}
.info:focus-within .info-tip.end,.info.is-open .info-tip.end{transform:none}
/* Mouvement réduit : la règle du site est « aucun DÉPLACEMENT », pas « aucune transition ». Le bloc ci-dessous est le
   seul de toute la feuille à neutraliser quelque chose sous prefers-reduced-motion:reduce, et il ne neutralise que des
   transform. Les fondus de couleur, de fond et d'ombre restent actifs sous mouvement réduit : ils ne déplacent rien, et
   c'est délibéré. À l'inverse, tout ce qui bouge est en opt-in sous prefers-reduced-motion:no-preference. Écrit ici
   pour que la règle se lise, au lieu de se déduire d'une seule ligne. */
@media (prefers-reduced-motion:reduce){.info-tip{transform:translate(-50%,0)}.info-tip.end,.info-tip.start{transform:none}}
/* Clés d'API (demande et gestion) : une colonne étroite, un champ, un bouton, et UN endroit pour l'état (.key-status,
   piloté par data-state ; le script ne pose aucun style). Pas de panneau dans un panneau : la page ne doit pas se lire
   comme un mur d'inscription devant une API qui reste libre sans clé */
.key-page{max-width:34rem}
.key-page .lead{max-width:none}
/* .btn pose display:inline-flex, qui l'emporte sur l'attribut hidden : sans cette règle, les boutons masqués par le
   script (Révoquer, les confirmations, les lignes d'action en display:flex) resteraient à l'écran. Vaut pour les
   deux conteneurs : la colonne étroite et le tableau de bord */
.key-page [hidden],.acct [hidden]{display:none!important}
.key-form,.key-manage{margin-top:1.75rem}
.key-form label{display:block;font-size:0.875rem;font-weight:500}
.key-form input{display:block;width:100%;height:3rem;margin-top:0.5rem;padding:0 0.875rem;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);color:var(--text);font-size:1rem;transition:border-color var(--t-ui) ease,box-shadow var(--t-ui) ease}
.key-form input:focus-visible{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 0.25rem var(--accent-wash)}
/* Adresse invalide : la bordure ET un message relié au champ, jamais la couleur seule */
.key-form input[aria-invalid="true"]{border-color:var(--warn)}
.key-form input[aria-invalid="true"]:focus-visible{border-color:var(--warn);box-shadow:0 0 0 0.25rem var(--warn-wash)}
.key-field-error{margin-top:0.5rem;font-size:0.84375rem;color:var(--warn)}
/* Le widget de vérification est une iframe de 300 × 65 px : sa place est réservée, pour que la page ne saute pas à son
   chargement. À 320 px de large la colonne n'en fait que 288 : le widget déborde alors de 6 px de chaque côté dans la
   gouttière, sans faire défiler la page */
/* 71 px : hauteur du widget mesurée en production (case à cocher, pleine largeur) ; réservée pour que la page ne bouge pas à son chargement */
.key-turnstile{min-height:4.4375rem;margin-top:1rem}
@media (max-width:20.6875em){.key-turnstile{margin-inline:-0.375rem}}
/* Le bouton principal de la page : pleine largeur, 48 px. Jamais désactivé ; pendant l'envoi il le dit (aria-busy) */
.key-form .key-submit{width:100%;height:3rem;min-height:3rem;margin-top:1rem;justify-content:center;background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-size:0.9375rem}
.key-submit:hover{color:var(--on-accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 88%,white)}
.key-page .btn[aria-busy="true"]{cursor:progress;opacity:.72}
/* L'état. La zone reste dans la page même vide (une zone aria-live masquée puis affichée n'est pas toujours annoncée) :
   vide, elle ne prend simplement aucune place. Registre : neutre pour ce qui s'est bien passé, avertissement pour ce
   qui demande une action de la personne. « Connexion indisponible » est neutre aussi : c'est une information sur le
   service, pas une erreur de la personne, et elle n'a rien à corriger */
.key-status{margin-top:1rem;font-size:0.90625rem;color:var(--text-2)}
.key-status:empty{margin-top:0}
.key-status[data-state="loading"]{color:var(--text-3)}
.key-status[data-state="sent"],.key-status[data-state="revoked"],.key-status[data-state="unavailable"]{padding:0.875rem 1rem;border:1px solid var(--line);border-inline-start:3px solid var(--accent-ink);border-radius:var(--r-chip);background:var(--surface);color:var(--text)}
.key-status[role="alert"]{padding:0.75rem 0.875rem;border-radius:var(--r-chip);background:var(--warn-wash);color:var(--warn)}
/* La clé : deux lignes libellé / valeur dans une seule carte */
.key-info{margin:0;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--surface)}
.key-info>div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:0.875rem 1rem}
.key-info>div+div{border-top:1px solid var(--line-soft)}
.key-info dt{font-size:0.875rem;color:var(--text-2)}
.key-info dd{margin:0;text-align:end;overflow-wrap:anywhere}
.key-actions{margin-top:1rem}
.key-actions .btn{height:2.75rem}
/* Révocation en deux temps, sur place. La couleur d'avertissement est réservée à cette confirmation : c'est le seul
   geste irréversible de la page */
.key-confirm{padding:1rem;border:1px solid var(--warn);border-radius:var(--r-chip);background:var(--warn-wash);display:flex;flex-wrap:wrap;gap:0.5rem}
.key-confirm p{flex:1 0 100%;margin:0 0 0.25rem;font-size:0.90625rem;color:var(--text)}
.key-revoke-final{background:var(--warn);border-color:var(--warn);color:var(--bg)}
.key-revoke-final:hover{color:var(--bg);border-color:var(--warn);background:color-mix(in srgb,var(--warn) 88%,var(--text))}
.key-page>.fine{margin-top:1.5rem}
/* Connexion en carte centrée. Retour de Didier : la première carte était bien trop longue (684 px), celle de
   Cloudflare est bien plus petite. Elle doit tenir entière, sans défiler, sur un écran de 768 px de haut et sur un
   téléphone de 667 px : pas de logo (l'en-tête le porte déjà), titre et texte plus petits, champs et boutons de 40 px,
   espacements resserrés, et le contrôle Turnstile qui ne prend de place que s'il doit demander un geste. La carte porte
   la demande de lien, « regardez votre boîte », la page du lien et « connexion indisponible » */
.key-card{max-width:24rem;margin:clamp(0px,2vh,1.5rem) auto 0;padding:1.5rem;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--surface);text-align:center}
.key-card .page-title{font-size:1.375rem;line-height:1.25}
.key-card .lead{max-width:none;margin-top:0.375rem;font-size:0.875rem;line-height:1.5}
.key-card .key-form{margin-top:1rem;text-align:start}
.key-card .key-form label{font-size:0.8125rem}
/* Le champ est posé sur la surface de la carte : il prend le fond de page pour rester lisible comme un champ */
.key-card .key-form input{height:2.5rem;margin-top:0.375rem;background:var(--bg)}
/* Turnstile en « interaction-only » : rien à l'écran tant qu'il ne demande rien, donc aucune hauteur réservée. Ses
   deux marges fusionnent en une seule tant que le bloc est vide (12 px entre le champ et le bouton) et l'encadrent
   quand il s'affiche (12 px au-dessus, 12 px au-dessous). Le bouton, lui, ne porte pas de marge */
.key-card .key-turnstile{min-height:0;margin:0.75rem 0}
.key-card .key-form .key-submit{height:2.5rem;min-height:2.5rem;margin-top:0;font-size:0.875rem}
.key-card .key-status{margin-top:0.75rem;text-align:start}
.key-card .key-status:empty{margin-top:0}
/* La carte est déjà le cadre : un message neutre encadré dedans ferait une boîte dans une boîte. Seuls les
   avertissements (role=alert) gardent leur fond */
.key-card .key-status[data-state="sent"],.key-card .key-status[data-state="unavailable"]{margin-top:1rem;padding:0;border:0;background:none;text-align:center;font-size:0.90625rem}
.key-card .key-or{margin-top:0.875rem}
.key-card>.fine{max-width:none;margin-top:1rem;padding-top:0.75rem;border-top:1px solid var(--line-soft);text-align:center}
.key-card .key-actions{display:flex;justify-content:center}
/* Page de demande de connexion (maquette B) : la carte et, à côté, le panneau « ce que la clé change ». La carte garde
   son contenu ; seuls le surtitre, l'alignement à gauche et la taille du titre viennent de la maquette. Les pages du
   lien reçu et du tableau de bord ne sont pas dans .key-duo : elles ne changent pas */
.key-duo{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center;align-items:stretch;margin-top:clamp(0px,2vh,1.5rem)}
.key-duo>.key-card{flex:1 1 22.5rem;max-width:28.75rem;min-width:0;margin:0;padding:1.75rem 1.625rem 1.375rem;display:flex;flex-direction:column;border-color:var(--line-strong);background:var(--chrome);text-align:start}
.key-eyebrow{margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.key-duo .key-card .page-title{margin:0.625rem 0 0;font-size:2.75rem;line-height:1;letter-spacing:-.04em}
.key-duo .key-card .lead{margin:0.75rem 0 0;font-size:0.9375rem;line-height:1.5;color:var(--text-2)}
.key-duo .key-card .key-form{margin-top:1.375rem}
.key-duo .key-card .key-form label{font-size:0.84375rem;font-weight:500}
.key-duo .key-card .key-form input{height:2.625rem;border-color:var(--line-strong);background:var(--surface)}
.key-duo .key-card .key-form .key-submit{height:2.625rem;min-height:2.625rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.key-duo .key-card .key-status[data-state="sent"],.key-duo .key-card .key-status[data-state="unavailable"]{text-align:start}
.key-duo .key-card .sso-btn{height:2.625rem}
.key-duo .key-card>.fine{margin-top:auto;padding-top:1.375rem;border-top:0;text-align:start;font-size:0.8125rem}
.key-duo .key-card>.fine[data-request-again]{margin-top:1rem;padding-top:0}
.key-why{flex:1 1 22.5rem;max-width:28.75rem;min-width:0;padding:1.5rem 1.375rem;border:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;gap:0.875rem}
.key-why-head{display:flex;justify-content:space-between;align-items:baseline;gap:0.625rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.key-why-head h2{margin:0;font:inherit;font-weight:600;letter-spacing:inherit;color:var(--text)}
.key-why dl{margin:0}
.key-why-note{margin:0.25rem 0 0;font-size:0.84375rem;line-height:1.55;color:var(--text-2)}
.key-why-link{margin:0;font-size:0.84375rem}
@media (pointer:coarse){.key-why-link a{display:inline-flex;align-items:center;min-height:2.75rem}.key-duo .key-card .key-form input,.key-duo .key-card .key-form .key-submit,.key-duo .key-card .sso-btn{height:2.75rem;min-height:2.75rem}}
@media (pointer:coarse){.key-card .key-form input,.key-card .key-form .key-submit,.sso-btn{height:2.75rem;min-height:2.75rem}}
/* Sous 420 px, plus de cadre : le contrôle Turnstile, quand il s'affiche, a besoin de 300 px de large, et une carte
   avec son remplissage ne lui en laisserait pas assez sur un écran de 320 px. La structure centrée reste */
@media (max-width:26.1875em){.key-card{margin-top:0;padding:0;border:0;background:none}.key-card .key-form input{background:var(--surface)}}
/* Espace client (clés d'API gratuites) : quatre écrans. Demande de lien, « regardez votre boîte » et page du bouton
   tiennent dans la colonne étroite .key-page ; le tableau de bord (.acct) est un peu plus large pour le graphique.
   Une section = un titre et son contenu, séparés par de l'espace : aucune carte dans une carte */
.acct{max-width:46rem}
.acct-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:0.75rem 1.5rem}
.acct-who{margin-top:0.5rem;font-size:0.875rem;color:var(--text-2);overflow-wrap:anywhere}
.acct-head .btn{height:2.75rem}
.acct-section{margin-top:var(--gap-block,2.5rem)}
.acct-section>h2{font-size:1.25rem}
.acct-section>h2+*{margin-top:0.875rem}
/* La clé affichée UNE fois : le seul moment où la page demande quelque chose avant qu'on la quitte. Bordure d'accent
   et texte, jamais la couleur seule ; la valeur se sélectionne d'un clic et se replie sans déborder à 320 px */
.key-once{padding:1.125rem;border:1px solid var(--accent-ink);border-radius:var(--r-panel);background:var(--accent-wash)}
.key-once h2{font-size:1.0625rem}
.key-once p{margin-top:0.375rem;font-size:0.90625rem;color:var(--text)}
.key-value{display:block;margin-top:0.875rem;padding:0.75rem 0.875rem;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.875rem;overflow-wrap:anywhere;user-select:all}
.key-once-actions{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.75rem;margin-top:0.875rem}
.key-once-actions .btn{height:2.75rem}
.key-once-actions .btn.primary{min-width:9.5rem;justify-content:center}
.key-copied{font-size:0.875rem;color:var(--text-2)}
/* Consommation : un chiffre, la limite, et trente barres. Une seule série, donc pas de légende ; les barres portent
   --accent-ink pour rester lisibles dans les deux thèmes, et le tableau en dessous donne les mêmes valeurs en texte */
.acct-stats{display:flex;flex-wrap:wrap;gap:0.5rem 2rem}
.acct-stats div{min-width:9rem}
.acct-stats dt{font-size:0.8125rem;color:var(--text-3)}
.acct-stats dd{margin:2px 0 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1.375rem;font-variant-numeric:tabular-nums}
.acct-chart{margin-top:1rem;padding:1rem 1rem 0.625rem;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--surface)}
.acct-chart svg{display:block;width:100%;height:6rem;overflow:visible}
.acct-chart rect{fill:var(--accent-ink)}
.acct-chart .base{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.acct-axis{display:flex;justify-content:space-between;margin-top:0.375rem;font-size:0.75rem;color:var(--text-3)}
.acct-table{margin-top:0.625rem;font-size:0.84375rem}
.acct-table summary{width:max-content;padding:0.75rem 0;min-height:2.75rem;color:var(--text-2);cursor:pointer}
.acct-table table{width:100%;max-width:22rem;border-collapse:collapse}
.acct-table th,.acct-table td{padding:0.375rem 0;border-top:1px solid var(--line-soft);text-align:start;font-weight:400}
.acct-table td{text-align:end;font-family:var(--mono);font-stretch:var(--mono-stretch)}
/* Actions : une ligne par geste, son effet dit en une phrase, le bouton à droite. Régénérer, révoquer et supprimer
   ouvrent la même confirmation sur place (.key-confirm) ; se déconnecter, sans conséquence, vit dans l'en-tête */
.acct-actions{margin:0;padding:0;list-style:none}
.acct-actions>li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.625rem 1.5rem;padding:1rem 0;border-top:1px solid var(--line-soft)}
.acct-actions>li:last-child{border-bottom:1px solid var(--line-soft)}
.acct-actions h3{font-size:0.9375rem;font-weight:500}
.acct-actions p{margin-top:2px;max-width:34rem;font-size:0.84375rem;color:var(--text-2)}
.acct-actions .btn{height:2.75rem}
.acct-actions .key-confirm{flex:1 0 100%}
/* Pas encore de clé : une phrase et le bouton, pas un écran vide décoré */
.acct-empty p{max-width:34rem;color:var(--text-2)}
.acct-empty .btn{height:3rem;margin-top:1rem;padding:0 1.25rem}
/* Geste destructeur (révoquer, supprimer le compte) : bordure et texte d'avertissement, en plus d'un libellé qui dit
   ce qu'il fait. Régénérer reste neutre : il remplace la clé, il ne retire rien */
.btn.danger{color:var(--warn);border-color:var(--warn)}
.btn.danger:hover{color:var(--warn);border-color:var(--warn);background:var(--warn-wash)}
/* Supprimer le compte : à part et en dernier, jamais au milieu des gestes sur la clé */
.acct-actions>li.acct-delete{margin-top:1.5rem;border-top:1px solid var(--line-soft)}
/* Liste de suivi (/account/<lang>/watch) : le tableau et les alertes portent le fond de la page (pleine largeur, ils
   passent sur la zone du décor) ; le tableau prend toute la largeur de la page, une rangée = une ligne. Sur un
   écran étroit, c'est le tableau qui défile dans son cadre (position:relative : les .sr absolus restent dedans), jamais la page */
.acct.watch{max-width:none}
.watch-scroll{position:relative;overflow-x:auto;margin-top:0.875rem;background:var(--bg)}
.watch-table{width:100%;border-collapse:collapse;font-size:0.84375rem}
.watch-table th,.watch-table td{padding:0.625rem 0.5rem 0.625rem 0;border-bottom:1px solid var(--line-soft);text-align:start;white-space:nowrap;vertical-align:middle}
.watch-table thead th{font-size:0.78125rem;font-weight:500;color:var(--text-3);border-bottom-color:var(--line)}
.watch-table tbody th{font-weight:500}
.watch-table .r,.watch-table .num{text-align:end}
.watch-table .num{font-family:var(--mono);font-stretch:var(--mono-stretch);font-variant-numeric:tabular-nums}
.watch-io{color:var(--text-3);font-weight:400}
.watch-act{display:flex;gap:0.5rem;justify-content:flex-end;padding-inline-end:0}
/* Gestes de la rangée : boutons compacts dans la police du texte (les capitales à chasse fixe de .btn faisaient
   déborder le tableau de 121 px à 1440 en français) */
.watch-act .btn{height:2rem;padding:0 0.625rem;font-family:var(--sans);font-size:0.8125rem;font-weight:500;letter-spacing:0;text-transform:none}
@media (pointer:coarse){.watch-act .btn{height:2.75rem}}
.watch-empty{margin-top:0.875rem;color:var(--text-2)}
.watch-alerts{margin:0.875rem 0 0;padding:0;list-style:none;background:var(--bg)}
.watch-alerts>li{padding:0.75rem 0;border-top:1px solid var(--line-soft)}
.watch-alerts>li:last-child{border-bottom:1px solid var(--line-soft)}
.watch-a-head{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem 0.75rem;font-size:0.875rem}
.watch-a-head time{color:var(--text-3);font-size:0.8125rem}
.watch-a-model{font-weight:500}
.watch-a-head .num{font-family:var(--mono);font-stretch:var(--mono-stretch);font-variant-numeric:tabular-nums}
.watch-notice{margin-top:0.375rem;font-size:0.84375rem}
.watch-notice summary{width:max-content;min-height:2rem;padding:0.375rem 0;color:var(--text-2);cursor:pointer}
.watch-notice blockquote{margin:0.375rem 0;padding-inline-start:0.75rem;border-inline-start:2px solid var(--line);color:var(--text-2);max-width:60rem}
.watch-notice a{text-decoration:underline}
/* Ajout : modèle, offre, puis les quatre valeurs de la charge sur une rangée quand la place le permet */
.watch-add{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:1rem 1.5rem;margin-top:1.75rem;padding:1.25rem;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--surface)}
.watch-load{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:0.75rem 1.5rem;margin:0;padding:0;border:0}
.watch-load legend{padding:0;margin-bottom:0.625rem;font-size:0.875rem;font-weight:500}
.watch-field label{display:block;font-size:0.8125rem;color:var(--text-2)}
.watch-field select,.watch-input input{width:100%;height:2.75rem;margin-top:0.375rem;padding:0 0.75rem;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--bg);color:var(--text);font-size:1rem}
.watch-field select:disabled{opacity:.6}
.watch-input{display:flex;align-items:center;gap:0.5rem}
.watch-input span{margin-top:0.375rem;color:var(--text-3)}
.watch-input input{font-variant-numeric:tabular-nums}
.watch-field select:focus-visible,.watch-input input:focus-visible{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 0.25rem var(--accent-wash)}
.watch-field [aria-invalid="true"]{border-color:var(--warn)}
/* Choix du modèle et de l'offre de la liste de suivi, et entrée du tableau de bord (maquette de Zuri du 26/10/2026). Préfixe wp- ;
   la liste des modèles reprend .cmp-listbox, celle du comparateur */
.wp-dash{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:0.875rem;padding:1.125rem 1.25rem;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--surface)}
.wp-dash dl{display:flex;flex-wrap:wrap;gap:0.5rem 2.25rem;margin:0}
.wp-dash dt{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-col)}
.wp-dash dd{display:flex;align-items:center;gap:0.5rem;margin:0.25rem 0 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.wp-dash dd .chip{font-family:var(--sans);font-weight:500}
.wp-dash .btn{height:2.75rem;padding:0 1.25rem}
.wp-model{position:relative;grid-column:1/-1;max-width:35rem}
.wp-model .wp-in{position:relative;display:block;margin-top:0.375rem}
.wp-model input{width:100%;height:2.75rem;padding:0 2.5rem 0 0.75rem;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--bg);color:var(--text);font-size:1rem}
.wp-model input:focus-visible{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 0.25rem var(--accent-wash)}
.wp-model input:disabled{opacity:.6}
.wp-model input::placeholder{color:var(--text-3);opacity:1}
.wp-model input::-webkit-search-cancel-button{display:none}
.wp-model.has-logo input{padding-inline-start:2.625rem}
.wp-model .wp-lab{position:absolute;left:0.75rem;top:50%;width:1.25rem;height:1.25rem;transform:translateY(-50%);pointer-events:none}
.wp-model .wp-glass{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:var(--text-3);pointer-events:none}
.wp-model .cmp-listbox{width:100%;max-height:min(26.25rem,60vh)}
.wp-model .cmp-lb-meta b{font-weight:500;color:var(--text-2)}
.wp-offers{grid-column:1/-1;container:wp-offers/inline-size;margin:0;padding:0;border:0;min-width:0}
.wp-offers>legend{padding:0;margin-bottom:0.375rem;font-size:0.8125rem;color:var(--text-2)}
.wp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 1rem}
.wp-filter{position:relative;flex:1 1 13.75rem;max-width:20rem}
.wp-filter input{width:100%;height:2.5rem;padding:0 0.75rem 0 2.125rem;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--bg);color:var(--text);font-size:1rem}
.wp-filter input:focus-visible{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 0.25rem var(--accent-wash)}
.wp-filter input::-webkit-search-cancel-button{display:none}
.wp-filter svg{position:absolute;left:0.6875rem;top:50%;width:0.9375rem;height:0.9375rem;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.wp-count{margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;color:var(--text-3)}
.wp-box{max-width:51.25rem;margin-top:0.625rem;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--bg);overflow:hidden}
.wp-row{display:grid;grid-template-columns:1.25rem 1.25rem minmax(0,1fr) 5.25rem 5.25rem;align-items:center;gap:0 0.75rem;padding:0 0.875rem}
.wp-head{min-height:2.25rem;border-bottom:1px solid var(--line);background:var(--surface)}
.wp-sort{display:inline-flex;align-items:center;justify-content:flex-end;gap:0.25rem;width:100%;min-height:2.25rem;padding:0;border:0;background:none;color:var(--text-3);font:inherit;font-size:0.78125rem;font-weight:500;cursor:pointer;white-space:nowrap}
.wp-sort[aria-pressed=true]{color:var(--text)}
.wp-sort:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px}
.wp-sort .wp-arrow{font-family:var(--mono);visibility:hidden}
.wp-sort[aria-pressed=true] .wp-arrow{visibility:visible;color:var(--accent-ink)}
.wp-list{max-height:min(27.5rem,58vh);overflow-y:auto;overscroll-behavior:contain;margin:0;padding:0.25rem 0}
.wp-o{position:relative;min-height:3rem;cursor:pointer;border-inline-start:3px solid transparent}
.wp-o:hover{background:var(--raise)}
.wp-o input{position:absolute;opacity:0;width:1px;height:1px}
.wp-o .wp-dot{width:1rem;height:1rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong);background:var(--bg)}
.wp-o:has(input:checked){background:var(--raise);border-inline-start-color:var(--accent-ink)}
.wp-o:has(input:checked) .wp-dot{box-shadow:inset 0 0 0 0.3125rem var(--accent-ink)}
.wp-o:has(input:focus-visible){outline:2px solid var(--accent-ink);outline-offset:-2px}
.wp-o:has(input:disabled){cursor:default}
.wp-o .logo{width:1.25rem;height:1.25rem}
.wp-who{display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0.625rem;min-width:0}
.wp-pname{min-width:0;font-size:0.875rem;font-weight:500;color:var(--text);overflow-wrap:anywhere}
.wp-chips{display:flex;flex-wrap:wrap;gap:0.375rem}
.wp-chips .chip{height:1.375rem;padding:0 0.5rem;font-size:0.71875rem;background:var(--bg)}
.wp-num{text-align:end;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.84375rem;font-variant-numeric:tabular-nums;color:var(--text)}
.wp-none{margin:0;padding:1.25rem 0.875rem;font-size:0.84375rem;color:var(--text-2)}
/* Libellé « Input » / « Output » d'une case : lu par les lecteurs d'écran dans le cadre large (la colonne le dit à l'écran), écrit dans le cadre étroit */
.wp-k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@container wp-offers (max-width:560px){
.wp-head{grid-template-columns:minmax(0,1fr) auto auto;gap:0 1rem}
.wp-head>span{display:none}
.wp-head .wp-sort{width:auto;justify-content:flex-start}
.wp-head>:nth-child(4){grid-column:2}.wp-head>:nth-child(5){grid-column:3}
.wp-o{grid-template-columns:1.25rem 1.25rem minmax(0,1fr);grid-template-rows:auto auto;row-gap:0.25rem;padding-block:0.5625rem}
.wp-o .wp-dot{grid-row:1/3}
.wp-o .wp-pr{grid-column:3;grid-row:2;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:2px 0.875rem}
.wp-o .wp-num{text-align:start;font-size:0.8125rem;white-space:nowrap}
.wp-row{padding:0 0.625rem;gap:0 0.625rem}
.wp-k{position:static;width:auto;height:auto;overflow:visible;clip:auto;margin-inline-end:0.375rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-col)}
}
@container wp-offers (min-width:561px){.wp-o .wp-pr{display:contents}}
@media (pointer:coarse){.wp-o{min-height:3.25rem}}
.watch-submit{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0.5rem}
.watch-submit .btn{height:2.75rem;padding:0 1.25rem}
.watch-submit .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.watch-clear{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin-top:1.5rem}
.watch-clear .btn{height:2.75rem}
.watch-clear .key-confirm{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0}
@media (max-width:40em){.watch-add{grid-template-columns:minmax(0,1fr);padding:1rem}}
/* Pire cas (nom de 52 lettres, offre en quatre parties, charge maximale) : le tableau tient dans son cadre. Modèle et offre
   coupés avec points de suspension, entiers dans la bulle (règle des tableaux larges du 10/10) ; les nombres ne se coupent
   jamais. Mesuré le 19/10 : 1 354 px pour un cadre de 1 130 avant.
   Nom plafonné à 14.5rem (24/10/2026) : le cadre ne dépasse pas 1 130 px, mais à 15rem, sur un écran de 2 000 px et plus, le
   tableau en demandait 1 132 à 1 134 (rendu local, « Retrait non suivi » compris).
   Tableau ou cartes selon la place réelle de la section (requête de conteneur), pas selon l'écran : le pire cas demande
   1 058 px ; sous 1 060 px de cadre (tablette, petit portable, téléphone, papier), une carte par offre. Seuil en px CSS :
   scaleCss ne met pas à l'échelle les seuils @container */
.watch-items{container:watch/inline-size}
@container watch (min-width:1060px){.watch-name,.watch-offer-t{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.watch-name{max-width:clamp(11rem,12vw,14.5rem)}.watch-offer-t{max-width:clamp(9rem,10vw,13rem)}}
/* Charge : la forme courte dans le tableau (sa forme entière en bulle), la forme entière en carte et sur papier */
.watch-ld-f{display:none}
/* Cartes : une par offre suivie, sur le modèle des offres de la fiche fournisseur. Le nom en tête (entier, à la ligne
   s'il le faut), le coût par mois en grand à sa droite, puis libellé et valeur sur une rangée, les deux boutons en bas */
@container watch (max-width:1059.98px){
.watch-ld-s{display:none}.watch-ld-f{display:inline}
.watch-scroll{overflow:visible;background:none}
.watch-table,.watch-table tbody{display:block}
.watch-table thead{display:none}
.watch-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0.375rem 1rem;margin-top:0.625rem;padding:0.75rem;border:1px solid var(--line);background:var(--bg)}
.watch-table tbody tr:first-child{margin-top:0}
.watch-table tbody th,.watch-table tbody td{padding:0;border:0;white-space:normal;text-align:start}
.watch-table tbody tr>*{grid-column:1/-1}.watch-table tbody tr>th{grid-column:1;font-size:0.9375rem}
.watch-name,.watch-offer-t{overflow-wrap:anywhere}
/* Le coût à droite du nom, sur la même rangée de la grille (dans le flux : il ne recouvre jamais la rangée suivante) ; puis,
   dans l'ordre de la maquette, prix, charge, vérifié le, état, offre, et les boutons */
.watch-table td.watch-cost{grid-row:1;grid-column:2;display:block;text-align:end;font-size:1.125rem}
.watch-table tbody tr>:nth-child(5){order:1}.watch-table tbody tr>:nth-child(3){order:2}.watch-table tbody tr>:nth-child(6){order:3}.watch-table tbody tr>:nth-child(7){order:4}.watch-table tbody tr>:nth-child(2){order:5}.watch-table tbody tr>:nth-child(8){order:6}
.watch-table td.watch-cost::before{display:block;margin-bottom:2px}
/* Libellé et valeur sur une rangée ; sans la place, la valeur passe dessous (jamais coupée, la carte ne déborde pas) */
.watch-table td[data-l]:not(.watch-cost){display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 0.75rem;font-size:0.78125rem}
.watch-table td[data-l]::before{content:attr(data-l);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-col)}
.watch-table td.num{white-space:nowrap}
.watch-table td[data-l]>.watch-offer-t{text-align:end}
.watch-act{justify-content:flex-start;margin-top:0.375rem}
}
/* Cartes sur un cadre large (tablette, petit portable) : deux par rangée, le libellé reste près de sa valeur */
@container watch (min-width:640px) and (max-width:1059.98px){.watch-table tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.625rem}.watch-table tbody tr{margin-top:0}}
/* Connexion par un fournisseur : zéro, un ou deux boutons selon ce que le serveur active. L'adresse e-mail reste en
   premier (elle marche pour tout le monde), les fournisseurs viennent ensuite, à poids égal entre eux */
.key-or{display:flex;align-items:center;gap:0.75rem;margin-top:1.375rem;font-size:0.8125rem;color:var(--text-3)}
.key-or::before,.key-or::after{content:"";flex:1;height:1px;background:var(--line)}
.key-sso{display:grid;gap:0.5rem;margin-top:0.75rem}
/* Boutons Google et GitHub : la vraie marque et les règles de marque de Google pour le bouton (fond, filet d'1 px,
   texte 14/20 en graisse moyenne, 12 px à gauche du « G », 10 px entre le « G » et le texte, 12 px à droite ; clair :
   #FFFFFF, #747775, #1F1F1F ; sombre : #131314, #8E918F, #E3E3E3). Le « G » garde ses quatre couleurs et sa taille de
   20 px. GitHub suit la même boîte, pour un poids égal entre les deux. Écart assumé : la police est celle du site, pas
   Google Sans (aucune police chargée chez un tiers) */
.sso-btn{display:flex;align-items:center;justify-content:center;gap:0.625rem;height:2.5rem;padding:0 0.75rem;border:1px solid var(--sso-line);border-radius:var(--r-ctl);background:var(--sso-bg);color:var(--sso-ink);font-size:0.875rem;line-height:1.25rem;font-weight:500;white-space:nowrap;transition:background-color var(--t-ui) ease}
.sso-btn:hover{text-decoration:none;color:var(--sso-ink);background:color-mix(in srgb,var(--sso-bg) 92%,var(--sso-ink))}
.sso-mark{flex:none;width:1.25rem;height:1.25rem}
/* « vs » : proportionnel au titre, jamais sous 12 px (8 px dans la liste des comparaisons) */
.vs{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:max(0.75rem,.55em);font-weight:500;letter-spacing:.04em;color:var(--text-3);vertical-align:.18em;margin-inline:.2em}
/* Pages labo et fournisseur : annuaire en grille de liens, bandeau de chiffres, tableau dense (colonnes secondaires
   masquées sur petit écran, le prix mixte et les conditions restent) */
.dir-page .crumbs{margin-bottom:0.875rem}
.dir-cross{margin-top:0.875rem;font-size:0.90625rem;font-weight:500}.dir-cross a{display:inline-flex;align-items:center;gap:0.375rem;min-height:2.75rem}
.dir-grid{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(13.75rem,1fr));gap:0 1.75rem;border-top:1px solid var(--line-soft)}
.dir-grid a{display:flex;flex-direction:column;gap:3px;min-height:3.5rem;padding:0.75rem 2px;border-bottom:1px solid var(--line-soft);color:var(--text)}
.dir-grid a:hover{text-decoration:none}.dir-grid a:hover .dir-name{color:var(--accent-ink)}
.dir-name{font-weight:500;transition:color var(--t-ui) ease}
.dir-meta{font-size:0.8125rem;color:var(--text-3)}
.dir-stats{margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:0.75rem 2.5rem}
.dir-stats div{display:flex;flex-direction:column-reverse;gap:2px}
.dir-stats dt{font-size:0.8125rem;color:var(--text-3)}
.dir-stats dd{margin:0;font-size:clamp(1.25rem,2.2vw,1.625rem);font-weight:500;letter-spacing:-.02em}
.dir-stats dd a{color:var(--text)}.dir-stats dd .num{font-size:.8em;color:var(--accent-ink)}
.dir-page .table-wrap{margin-top:1.75rem;overflow-x:auto}
.dir-table tbody th a{display:block;color:var(--text);font-weight:500;overflow-wrap:anywhere}
/* Toute la ligne mène à la page du modèle ; les autres liens de la ligne (fournisseur) et l'identifiant d'API restent
   au-dessus, cliquables ou sélectionnables */
.dir-table tbody tr{position:relative}.dir-table tbody th a::after{content:"";position:absolute;inset:0}
.dir-table tbody td :is(a,button,summary),.dir-table tbody th code{position:relative;z-index:1}.dir-table tbody th code{cursor:text;user-select:all}
.dir-table tbody th a:hover{color:var(--accent-ink);text-decoration:none}
.dir-table tbody th code{display:block;margin-top:2px;font-size:0.75rem;font-weight:400;color:var(--text-3);white-space:normal;overflow-wrap:anywhere}
/* .table.dir-table : passe devant .table tbody th{white-space:nowrap}, défini plus loin */
.table.dir-table tbody th{white-space:normal;min-width:11.25rem}
/* Tableau dans un conteneur défilant : en-tête non collant (sa référence serait le conteneur, il couvrirait la 1re ligne) */
.dir-table thead th{position:static}
.dir-table .lowest{color:var(--accent-ink);font-weight:500}
.dir-table .muted{color:var(--text-3)}
.dir-table .verify{display:inline-flex;align-items:center;gap:0.25rem;font-size:0.8125rem;white-space:nowrap}
@media (max-width:56.25em){.dir-table .hide-md{display:none}}
/* Page fournisseur : 10 colonnes ne tiennent qu'au-delà de 1200 px (1 209 px de tableau dans 941 px à 1024) ; en dessous,
   entrée, sortie, précision, contexte et page de tarifs se lisent sur la page du modèle. Sur mobile, les conditions passent
   à la ligne au lieu d'imposer 180 px (423 px de tableau dans 324 px à 375) */
.dir-table .verify{min-height:1.5rem}
@media (pointer:coarse){.dir-table .verify{min-height:2.75rem}}
@media (max-width:38.75em){.dir-table .hide-sm{display:none}.dir-table th,.dir-table td{padding-inline:0.625rem}.table.dir-table tbody th{min-width:0}.dir-table thead th{white-space:normal}}
/* Pages d'erreur : code discret, recherche, modèles suivis (nom et prix le plus bas), liens vers les pages principales */
.err{max-width:55rem;padding-block:var(--gap-section)}
.err-code{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.78125rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.err .page-title{margin-top:0.625rem}
.err .search{margin-top:1.75rem;max-width:37.5rem}
.err-retry{margin-top:1.75rem}
.err-suggest{margin-top:2.5rem}
.err-suggest ul{list-style:none;margin:0.75rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem;border-top:1px solid var(--line-soft)}
.err-suggest a{display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;min-height:3rem;padding:0.75rem 2px;border-bottom:1px solid var(--line-soft);color:var(--text)}
.err-suggest a:hover{text-decoration:none;color:var(--accent-ink)}
.err-suggest .num{font-size:0.875rem;color:var(--text-2);white-space:nowrap}
.err-links ul{list-style:none;margin:2.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem}
.err-links a{display:inline-flex;align-items:center;gap:0.375rem;min-height:2.75rem;font-weight:500}
.err-links .ico{transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.err-links a:hover .ico{transform:translateX(3px)}}
@media (max-width:38.75em){.err-suggest ul{grid-template-columns:minmax(0,1fr)}}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.crumbs a{display:inline-flex;align-items:center;min-height:1.5rem;color:var(--text-2)}
/* Fiche fournisseur (maquette B) : en-tête à pastilles, quatre chiffres, panneau des offres avec l'écart au prix le plus bas */
.pv-head{padding-bottom:1.375rem;border-bottom:1px solid var(--line)}
.pv-head .page-title{margin-top:1rem;font-size:clamp(2.125rem,4vw,3.25rem);line-height:1;letter-spacing:-.04em}
.pv-head .lead{margin:0.875rem 0 0;max-width:64ch;font-size:0.9375rem;line-height:1.55;color:var(--text-2)}
.pv-chips{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin:0.875rem 0 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.03em;text-transform:uppercase}
.pv-chip{display:inline-flex;align-items:center;gap:0.5rem;min-height:1.625rem;padding:0 0.5rem;border:1px solid var(--line);background:var(--bg);color:var(--text-2)}
a.pv-chip:hover{border-color:var(--line-strong);color:var(--text);text-decoration:none}
.pv-chip[title]{cursor:help}
.pv-dot{flex:none;width:0.4375rem;height:0.4375rem;background:var(--disabled)}
.pv-dot.on,.pv-ok{color:var(--accent-ink)}
.pv-dot.on{background:var(--accent-ink)}
@media (pointer:coarse){a.pv-chip{min-height:2.75rem}}
.pv-stats{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(9.375rem,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.pv-stats div{padding:0.875rem 1rem;background:var(--bg)}
.pv-stats div:first-child{padding-inline-start:0}
.pv-stats dt{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.pv-stats dd{margin:0.25rem 0 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1.375rem;font-weight:500}
.pv-stats dd.all{color:var(--accent-ink)}
.pv-stats dd span{font-size:0.75rem;color:var(--text-col)}
.provider-offers{margin-top:1.375rem}
.pv-tools{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem}
.pv-tools .showing{font-size:inherit;color:var(--text-col)}
.pv-filter{display:flex;align-items:center;gap:0.5rem;width:18.75rem;max-width:100%;height:1.875rem;margin:0;padding:0 0.625rem;border:1px solid var(--line-strong);background:var(--surface);box-shadow:none;letter-spacing:0;text-transform:none}
.pv-filter:focus-within{border-color:var(--accent-ink);box-shadow:none}
.pv-filter input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;font-family:var(--sans);font-stretch:normal;font-size:0.8125rem;color:var(--text);outline:none}
.pv-filter input::placeholder{color:var(--text-3)}
.pv-filter input::-webkit-search-cancel-button{display:none}
@media (pointer:coarse){.pv-filter{height:2.75rem}}
/* Téléphone : le filtre prend la largeur du panneau (300 px fixes faisaient déborder la page à 320 px) ; sous 360 px le
   chevron décoratif s'efface pour que « Filtrer les modèles de ce fournisseur » tienne en entier */
@media (max-width:37.5em){.pv-filter{width:100%}}
@media (max-width:22.4375em){.pv-filter .top-search-mark{display:none}}
.pv-via{display:block;font-size:0.71875rem;color:var(--text-3)}
.gap{display:inline-flex;align-items:center;gap:0.625rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.71875rem;white-space:nowrap;cursor:help}
.gap-l{font-weight:600;color:var(--text)}
.gap.best .gap-l{color:var(--accent-ink)}
.gap-gauge{flex:none;overflow:visible}
.gap-gauge line{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:2 2}
.gap-gauge .from{fill:var(--accent-ink)}
.gap-gauge .run{fill:var(--text-2)}
.gap-gauge .at{fill:var(--bg);stroke:var(--text);stroke-width:2}
.gap-gauge.best .at{fill:var(--accent-ink);stroke:var(--accent-ink)}
.pv-more{margin:0;padding:0.625rem 1rem}
.pv-more .btn{height:1.875rem;padding:0 0.75rem;font-size:0.65625rem}
@media (pointer:coarse){.pv-more .btn{height:2.75rem}}
.pv-note{margin:0;padding:0.625rem 1rem;font-size:0.75rem;color:var(--text-col)}
.provider-page [data-hide],.labs-page [data-hide]{display:none}
/* Liste des labos (maquette B) : tri et légende, puis une carte par labo */
.labs-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.625rem 1rem;margin:1.375rem 0 0.75rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-col)}
.labs-sort{display:flex;align-items:center;gap:0.625rem}
.labs-legend{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem 1rem;min-width:0;letter-spacing:.02em;text-transform:none}
/* Une entrée de la légende passe à la ligne : sur une ligne, la plus longue (340 px) élargissait la page à 320 px */
.labs-legend>span{display:inline-flex;align-items:center;gap:0.4375rem;min-width:0}
.lg-unit{display:inline-block;width:0.4375rem;height:0.4375rem;background:var(--text-col)}
.lab-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.75rem;margin:0;padding:0;list-style:none}
.lab-cards>li{display:flex;min-width:0}
.lab-card{display:flex;flex:1;flex-direction:column;gap:0.875rem;min-width:0;padding:0.875rem 1rem;border:1px solid var(--line);background:var(--bg);color:var(--text);transition:border-color 150ms ease,background-color 150ms ease}
.lab-card:hover{border-color:var(--disabled);background:var(--surface);color:var(--text);text-decoration:none}
.lab-card-top{display:flex;align-items:center;gap:0.625rem;min-width:0}
.lab-card-top .logo,.lab-card-top .lab-badge{width:1.75rem;height:1.75rem;font-size:0.75rem}
/* Aucun texte tronqué sur le site : un nom trop long passe à la ligne (au milieu d'un mot s'il le faut), jamais de
   points de suspension */
.lab-card-name{flex:1;min-width:0;font-size:0.9375rem;font-weight:600;line-height:1.25;letter-spacing:-.01em;overflow-wrap:anywhere}
.lab-card-name b{font-weight:600;color:var(--accent-ink)}
.lab-card-n{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;white-space:nowrap}
.lab-card-n span{color:var(--text-3)}
.lab-units{display:flex;flex-wrap:wrap;gap:3px;min-height:0.4375rem}
/* Un carré par modèle : un lien vers sa page, avec une bulle (nom et prix le plus bas) au survol et au focus clavier.
   La carte entière reste cliquable par le lien du nom du labo, étendu à la carte ; les carrés passent devant */
.lab-card{position:relative}
.lab-card-name{color:inherit}.lab-card-name:hover{color:inherit;text-decoration:none}
.lab-card-name::after{content:"";position:absolute;inset:0}
.lab-card:focus-within{border-color:var(--accent-ink)}
/* La bulle se pose sous la rangée de carrés, calée à gauche et jamais plus large que la carte : accrochée au carré
   lui-même, elle sortait de l'écran pour les carrés du bord droit ; au-dessus, elle cachait le nom du labo. Le carré
   survolé change de couleur */
.lab-units{position:relative}
.lab-unit{z-index:1;display:block;width:0.4375rem;height:0.4375rem;background:var(--text-col)}
.lab-unit:hover,.lab-unit:focus-visible{background:var(--accent-ink);outline:2px solid var(--accent-ink);outline-offset:2px}
.lab-unit:hover::after,.lab-unit:focus-visible::after{content:attr(aria-label);position:absolute;z-index:5;top:calc(100% + 0.5rem);left:0;width:max-content;max-width:100%;padding:0.5625rem 0.6875rem;background:var(--text);color:var(--bg);font-family:var(--sans);font-size:0.78125rem;font-weight:400;line-height:1.45;letter-spacing:0;text-transform:none;white-space:normal;pointer-events:none;box-shadow:0 0.625rem 1.875rem -0.75rem var(--shd)}
/* Colonnes de la carte, sous les carrés : le modèle désigné par son critère et le modèle le moins cher du labo, côte à côte, séparés
   par un filet ; une seule colonne prend toute la largeur. Les deux colonnes partagent leurs quatre rangées (libellé, nom avec son
   rang ou sa date, cases de prix, vendeur) : les cases restent sur la même ligne quand un nom passe sur deux lignes ou qu'une colonne
   n'a pas de rang. Seuls les liens, les cases de prix et les libellés à bulle passent devant le lien de la carte */
.lab-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);column-gap:1rem;padding-top:0.75rem;border-top:1px solid var(--line-soft)}
.lab-cols[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.lab-col{display:grid;grid-row:span 4;grid-template-rows:subgrid;justify-items:start;min-width:0}
.lab-col+.lab-col{padding-inline-start:1rem;border-inline-start:1px solid var(--line-soft)}
.lab-col-k{grid-row:1;display:flex;flex-wrap:wrap;gap:3px 0.375rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.lab-col-k [data-tip]{position:relative;z-index:1;cursor:help}
.lab-col-m{grid-row:2;display:grid;justify-items:start;align-content:start;gap:3px;margin-top:0.25rem;min-width:0}
.lab-col-n{position:relative;z-index:1;font-size:0.875rem;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--text);overflow-wrap:anywhere}
.lab-col-n:hover{color:var(--accent-ink);text-decoration:none}
.lab-col-r{font-size:0.71875rem;line-height:1.3;color:var(--text-3);overflow-wrap:anywhere}
/* Les deux prix de l'offre : deux petites cases côte à côte, le mot au-dessus, le chiffre dessous avec son symbole (la forme des
   cartes de la page modèle) ; les mêmes dans les deux colonnes et sur toutes les cartes. La paire porte la bulle du prix mixte */
.lab-col-p{position:relative;z-index:1;grid-row:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-self:stretch;margin-top:0.5rem;border:1px solid var(--line-soft);background:var(--surface)}
.lab-col-p[data-tip]{cursor:help}
.lab-io{display:grid;gap:3px;min-width:0;padding:0.375rem}
.lab-io+.lab-io{border-inline-start:1px solid var(--line-soft)}
.lab-io-k{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.59375rem;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.lab-io-v{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.78125rem;font-weight:500;line-height:1.2;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.lab-col.low .lab-io-v{font-weight:700;color:var(--accent-ink)}
/* Le vendeur, sous les cases : ses repères (logo, filet, passerelle ; noms en bulle et lus) ; son nom n'est écrit que sur le papier */
.lab-col-at{grid-row:4;margin-top:0.5rem;font-size:0.75rem;line-height:1.3;color:var(--text-2);overflow-wrap:anywhere}
.lab-col-st{display:none}
/* Téléphone : une demi-carte est plus étroite, un chiffre gras à trois décimales touchait le bord de sa case */
@media (max-width:30em){.lab-io{padding:0.375rem 0.3125rem}.lab-io-v{font-size:0.71875rem}}
/* Écran très étroit : les deux colonnes s'empilent, les cases gardent la largeur de leurs chiffres */
@media (max-width:22.4375em){.lab-cols{grid-template-columns:minmax(0,1fr);grid-template-rows:none}.lab-col{grid-row:auto;grid-template-rows:none}.lab-col+.lab-col{margin-top:0.75rem;padding:0.75rem 0 0;border-inline-start:0;border-top:1px solid var(--line-soft)}}
/* Trois cartes par rangée sur grand écran (le bloc à deux colonnes ne tient pas à quatre), deux de 900 à 1179 px (à trois, une case
   de prix était plus étroite que son chiffre), une seule sous 900 px */
@media (max-width:73.6875em){.lab-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:56.1875em){.lab-cards{grid-template-columns:minmax(0,1fr)}}
/* Papier : deux cartes par rangée, jamais coupées entre deux feuilles ; sans la marge basse de la section, qui poussait
   une feuille vide quand la dernière rangée finissait près du bas de la feuille */
/* Unité des prix de la liste : dite une fois, par une phrase d'unité à droite de la légende des carrés, sans pastille et à
   distance d'elle (collée à « un modèle », elle se lisait comme une propriété du modèle) ; sur le papier, où il n'y a pas de bulle, le prix mixte
   s'écrit avec son unité sous les deux cases de chaque colonne (le texte pour lecteurs d'écran devient visible) */
.labs-unit{position:relative;color:var(--text-3)}
/* Un filet sépare la légende des carrés de la phrase d'unité sur écran large ; sous 620 px la phrase est FORCÉE sur sa
   propre ligne, au même bord (à 375 px les deux tenaient encore côte à côte, sans rien pour les séparer : « un modèle
   prix en… ») */
@media (max-width:38.6875em){.labs-legend{row-gap:0.25rem}.labs-unit{flex-basis:100%}}
@media (min-width:38.75em){.labs-unit{padding-inline-start:1rem}.labs-unit::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:1px;height:0.75rem;margin-top:-0.375rem;background:var(--line-strong)}}
@media print{.lab-col-sm{display:none}.lab-col-st{display:inline}.lab-col-p .lab-bl{position:static;grid-column:1/-1;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;padding:0 0.375rem 0.375rem;font-family:var(--sans);font-size:0.65625rem;font-weight:400;letter-spacing:0;color:var(--text-3)}}
@media print{.lab-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.lab-cards>li,.lab-card{break-inside:avoid}.wrap.page.labs-page{min-height:0;margin-bottom:0;padding-bottom:0}}
.lab-card-rank{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;color:var(--text-3);white-space:nowrap}
.labs-page .mdl-none{padding:1.75rem 0;font-size:0.875rem;color:var(--text-2)}
/* Fiche labo (maquette B) : trois chiffres, l'échelle des prix, le tableau des modèles */
/* Trois chiffres : en rangée souple, pour que le dernier prenne toute la fin de sa rangée quand ils passent sur deux
   rangées (en grille, une case restait vide et montrait le fond des filets) */
.lab-stats{display:flex;flex-wrap:wrap;container-type:inline-size}
.lab-stats>div{flex:1 1 10.625rem;min-width:0}
/* Une tuile qui commence une rangée colle au bord gauche, comme la première : la troisième quand elles passent sur
   deux rangées (moins de 3 × 170 px et deux filets), toutes quand elles s'empilent (moins de 2 × 170 px et un filet).
   Seuils écrits en rem : la feuille servie convertit les 170 px de la base en rem, la requête doit suivre la même unité */
@container (max-width:31.99rem){.lab-stats>div:nth-child(3):last-child{padding-inline-start:0}}
@container (max-width:21.3rem){.lab-stats>div{padding-inline-start:0}}
.lab-stats dd b{font-weight:500;color:var(--accent-ink)}
/* Le nom à côté du chiffre : un bloc en ligne à son propre interligne (sur deux lignes, il prenait celui du chiffre de 22 px) */
/* Chiffre et nom en rangée souple : l'écart entre eux est un espacement de rangée, pas une marge du nom, pour que le
   nom passé seul à la ligne reparte du bord gauche du chiffre */
.lab-stats dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0.5rem}
.lab-stats dd a{display:inline-block;max-width:100%;font-family:var(--sans);font-stretch:normal;font-size:0.8125rem;font-weight:400;line-height:1.25;color:var(--text-2);overflow-wrap:anywhere;vertical-align:baseline}
.lab-stats dd a:hover{color:var(--text)}
.lab-ladder,.lab-models{margin-top:1.375rem}
.ladder{padding:1rem 1rem 0.875rem}
.ladder-ticks{display:block;margin-inline-start:14.375rem;width:calc(100% - 14.375rem);overflow:visible}
.ladder-ticks text{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;fill:var(--text-3)}
/* Graduations écrites : en production elles se chevauchaient de 640 à 760 px (neuf libellés) et sous 414 px (cinq).
   À partir de 840 px : les neuf libellés, le dernier centré sur son trait comme les autres. En dessous, le dernier est
   ancré à droite (centré, il arrivait au ras du cadre), ce qui lui prend de la place à gauche : les seuils sont ceux
   où, mesurés, deux libellés voisins gardent au moins 8 px entre eux. Une sur deux jusqu'à 839 px ; une sur quatre
   plus la dernière jusqu'à 469 px ; la première et la dernière sous 340 px. Tous les traits restent, et tous les
   libellés restent dans le balisage */
@media (max-width:52.4375em){.ladder-ticks .lt-alt{display:none}.ladder-ticks text:last-of-type{text-anchor:end}}
@media (max-width:29.3125em){.ladder-ticks text:not(:nth-of-type(4n+1)):not(:last-of-type){display:none}}
@media (max-width:21.1875em){.ladder-ticks text:not(:first-of-type):not(:last-of-type){display:none}}
.ladder ol{margin:0;padding:0;list-style:none}
.ladder li{display:grid;grid-template-columns:14.375rem minmax(0,1fr);align-items:center;min-height:1.625rem;transition:background-color 120ms ease}
.ladder li:hover{background:var(--row-hover)}
.ladder li a{padding:3px 0.875rem 3px 0;font-size:0.8125rem;line-height:1.25;color:var(--text-p);overflow-wrap:anywhere}
.ladder li a:hover{color:var(--accent-ink);text-decoration:none}
.ladder li svg{display:block;overflow:visible}
.ladder .tick{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
.ladder .run{fill:color-mix(in srgb,var(--accent-ink) 45%,transparent)}
.ladder .mark rect{fill:var(--accent-ink);stroke:var(--bg);stroke-width:3;paint-order:stroke}
.ladder .val{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;fill:var(--accent-ink)}
@media (max-width:40em){.ladder-ticks{margin-inline-start:7.5rem;width:calc(100% - 7.5rem)}.ladder li{grid-template-columns:7.5rem minmax(0,1fr)}}
.lab-models .table-wrap{overflow-x:auto;overflow-y:hidden}
/* Papier : rien ne défile, donc rien n'est coupé ni doublé d'une barre de défilement ; et le tableau n'a plus de largeur
   minimale (720 px, plus que la feuille) : il tient dans la page, ses cellules passent à la ligne */
@media print{.lab-models .table-wrap{overflow:visible}.lab-models .lab-table{min-width:0}}
.lab-table{width:100%;min-width:45rem;border-collapse:collapse}
.lab-page .lab-table th,.lab-page .lab-table td{padding:0.625rem 0.5625rem;border:0;border-bottom:1px solid var(--line-soft);text-align:start;vertical-align:middle;background:none}
.lab-table tr>:first-child{padding-inline-start:1rem}
.lab-table tr>:last-child{padding-inline-end:1rem}
.lab-table tbody tr:last-child>*{border-bottom:0}
.lab-page .lab-table thead th{position:static;padding-block:0.75rem 0.5625rem;border-bottom-color:var(--line);vertical-align:bottom;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col);white-space:nowrap}
.lab-table thead .sort{letter-spacing:inherit;text-transform:inherit}
.lab-table thead th[aria-sort]{color:var(--text)}
.lab-table thead th[aria-sort] .sort .ico{opacity:1;color:var(--accent-ink)}
.lab-table .r{text-align:end}
.lab-table tbody tr{position:relative;transition:background-color 120ms ease}
.lab-table tbody tr:hover{background:var(--row-hover)}
.lab-table tbody th{font-weight:400;white-space:normal}
.lab-table tbody th a{display:block;font-size:0.90625rem;font-weight:500;color:var(--text)}
.lab-table tbody th a::after{content:"";position:absolute;inset:0}
.lab-table tbody th a:hover{color:var(--accent-ink);text-decoration:none}
.lab-table tbody th code{display:block;margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;font-weight:400;color:var(--text-3);white-space:normal;overflow-wrap:anywhere}
/* Une rangée = une ligne : en tableau à l'écran, l'identifiant du modèle est en bulle sur le nom (et lu avec lui) ; il reste écrit
   sous le nom dans les cartes du téléphone et sur le papier, où il n'y a pas de bulle */
@media screen and (min-width:37.5625em){.lab-table tbody th code{display:none}}
@media (max-width:37.5em),print{.lab-table tbody th a>.sr{display:none}}
/* Le vendeur de l'offre la moins chère : ses repères (logo du vendeur, filet, logo de la passerelle ; noms en bulle et lus) dans le
   tableau, son nom écrit dans les cartes et sur le papier. Le prix : nombre seul dans la case, unité sous le libellé de l'en-tête ;
   le symbole revient dans les cartes et sur le papier */
/* Unité d'une colonne de prix, sous le libellé de son en-tête (fiches labo et fournisseur) : l'en-tête peut faire deux lignes, pas la rangée */
.th-u{display:block;margin-top:1px;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.5625rem;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--text-3);white-space:nowrap}
.lab-table .lab-at-m{display:none}
@media screen and (min-width:37.5625em){.lab-table .lab-at-t{display:none}.lab-table .lab-at-m{display:inline-flex;vertical-align:middle}}
@media (max-width:37.5em),print{.lab-table .cur{display:inline}.lab-table .th-u{display:none}}
.lab-table td.num{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.78125rem;color:var(--text-2)}
.lab-table td.lowest{font-size:0.84375rem;font-weight:600;color:var(--accent-ink)}
/* Vendeur et chemin : à la ligne s'ils ne tiennent pas (sur une ligne forcée, le bord du tableau les coupait, à l'écran
   étroit comme sur le papier) */
.lab-table td.at{font-size:0.84375rem;line-height:1.3;color:var(--text-2);overflow-wrap:anywhere}
.lab-table td.at a{position:relative;z-index:1;color:var(--text-2)}
.lab-table td.at a:hover{color:var(--text)}
@media (pointer:coarse){.crumbs a{min-height:2.75rem}}
.page-title{font-size:clamp(2rem,4.4vw,3.25rem)}
.lead{margin-top:0.875rem;max-width:62ch;font-size:1.0625rem;color:var(--text-2)}
.note{margin-top:1rem;padding:0.75rem 0.875rem;border-radius:var(--r-chip);background:var(--warn-wash);color:var(--warn);font-size:0.84375rem}
/* Nouveau modèle en vérification : même forme et même place que .note, registre NEUTRE. L'orange est réservé à ce qui
   change ce que l'on paie (points, prix agrégé, revente sous le prix du labo, promotion échue), et la pastille la plus
   proche, « pas revérifié récemment », est neutre ; le vert lirait « bonne nouvelle » (relecture de Zuri) */
.note.new-listing{background:var(--surface);border:1px solid var(--line);color:var(--text-2)}
/* Les petites lignes héritaient de la largeur du corps de texte : à 13 px, 820 px font 126 caractères par ligne, l'œil
   perd la ligne suivante. La borne est en ch, elle suit donc la taille de police partout où la classe sert */
.fine{margin-top:0.875rem;max-width:72ch;font-size:0.8125rem;color:var(--text-3)}

/* Accueil (maquette B) : le héros est une grille de deux cellules séparées par un filet de 1 px (titre et recherche à gauche, graphique de
   profondeur des offres d'un modèle à droite), puis le tableau des tendances, les promotions et le bloc « interroger InferIndex ».
   Aucun style en ligne : tout est ici. Sans JavaScript, la cellule de droite montre le premier modèle et le sélecteur est une liste de liens. */
/* Au-dessus des sections qui suivent : la liste du sélecteur de modèle descend sur le tableau, et sans ce rang elle passait dessous (entrées du bas couvertes sous 1000 px) */
.hero{position:relative;z-index:2;padding-top:clamp(1.25rem,3vw,2rem)}
/* Cadre du héros : bordure extérieure, séparateur par ombre portée des cases (jamais un fond plein : le fond en réseau doit rester visible) */
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,32.5rem),1fr));border:1px solid var(--line)}
.hero-grid.solo{grid-template-columns:minmax(0,1fr)}
.hero-copy{display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;min-width:0;padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,3.4vw,3rem)}
.hero h1{margin:0;font-size:clamp(2.625rem,5vw,4.25rem);font-weight:600;line-height:.98;letter-spacing:-.04em}
.hero h1 span{display:block}
.hero h1 .r1{color:var(--accent-ink)}
.hero-sub{margin-top:1.5rem;max-width:42ch;font-size:1.0625rem;line-height:1.55;color:var(--text-2);text-wrap:pretty}
.hero .search{max-width:none;margin-top:0;height:3.375rem;padding:0 0.375rem 0 1rem;border:1px solid var(--line-strong);border-radius:0;background:var(--surface);box-shadow:none}
.hero .search:focus-within{border-color:var(--accent-ink);box-shadow:none}
.hero .search>.ico{display:none}
.hero .search::before{content:"›";font-family:var(--mono);font-size:0.9375rem;color:var(--accent-ink)}
.hero .search input{font-size:1.03125rem;text-overflow:ellipsis}
.hero .search .btn{height:2.5rem;padding:0 1.125rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
/* Téléphone étroit : le bouton passe sous le champ, qui prend toute la largeur (à 320 px il ne restait que 64 px au texte d'aide ; 16/10) */
@media (max-width:26.25em){.hero .search{flex-wrap:wrap;height:auto;row-gap:0.375rem;padding:0.375rem 0.375rem 0.375rem 1rem}.hero .search input{flex:1 1 0;min-height:2.625rem}.hero .search .btn{flex:1 1 100%}}
.hero-facts{display:flex;flex-wrap:wrap;gap:0.375rem 1.25rem;margin-top:0.875rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-col)}
/* Le reveal (.rise, animation tenue) laisse une transformation sur chaque bloc du titre : chacun peint à part, et la ligne de
   chiffres, venue après, passait par-dessus les suggestions du champ. Le bloc du champ passe devant */
.hero-search{position:relative;z-index:1}
.hero-facts>*{white-space:nowrap}
.hero-facts a{display:inline-flex;align-items:center;min-height:2.75rem;margin:-0.875rem 0}
/* Cellule de droite : « Toutes les offres pour [modèle] », graphique de profondeur, trois statistiques qui débordent jusqu'aux bords */
.hero-depth{display:flex;flex-direction:column;min-width:0;padding:1.25rem clamp(1rem,2vw,1.5rem);background:var(--bg);box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}
/* Fond en réseau : canvas fixe derrière la page, estompé aux bords ; body crée le contexte d'empilement pour qu'il reste au-dessus du fond de page */
body{isolation:isolate}
.net-bg{position:fixed;left:0;top:0;width:100%;height:100vh;z-index:-1;pointer-events:none;display:block;-webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 42%,rgba(0,0,0,.5),rgba(0,0,0,.8) 55%,#000);mask-image:radial-gradient(ellipse 85% 75% at 50% 42%,rgba(0,0,0,.5),rgba(0,0,0,.8) 55%,#000)}
@media print{.net-bg{display:none}}
.hd-head{min-height:3.6875rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.625rem 1rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.hd-pick{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem 0.625rem;min-width:0}
.hd-pick-label{flex:none}
.hd-count{color:var(--text-3)}
/* Largeur minimale en longueur fixe, portée par le bloc : en pourcentage elle se résolvait sur un parent dimensionné par son contenu, et un nom court laissait le bouton étroit. Sous 421 px le bloc prend toute la ligne */
.model-pick{position:relative;flex:0 1 auto;min-width:18.75rem;max-width:100%}
@media (max-width:26.25em){.hd-pick{flex:1 1 100%}.model-pick{flex:1 1 100%;min-width:0}}
.model-pick-btn{display:flex;align-items:center;gap:0.75rem;width:100%;min-height:3.25rem;padding:0 1rem;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-family:var(--sans);font-size:1.125rem;font-weight:600;letter-spacing:-.01em;text-transform:none;white-space:normal;cursor:pointer;list-style:none;transition:border-color var(--t-ui) ease}
.model-pick-btn::-webkit-details-marker{display:none}
.pick-tile{flex:none;display:inline-flex}.pick-tile[hidden]{display:none}.pick-tile .logo,.pick-tile .lab-badge{width:1.75rem;height:1.75rem}
.model-pick-btn::after{content:"";flex:none;border-inline:0.25rem solid transparent;border-top:0.3125rem solid var(--accent-ink)}
.model-pick-btn>span{min-width:0}.model-pick-btn>span[data-pick-name]{flex:1}
@media (hover:hover) and (pointer:fine){.model-pick-btn:hover{border-color:var(--accent-ink)}}
.model-pick[open] .model-pick-btn{border-color:var(--accent-ink)}
.model-pick-list{position:absolute;inset-inline-start:0;top:calc(100% + 0.5rem);z-index:40;width:min(22.5rem,calc(100vw - 3rem));padding:0.25rem;border:1px solid var(--line-strong);background:var(--surface);box-shadow:var(--shadow-menu)}
.model-pick-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 0.625rem;align-items:center;min-height:2.75rem;padding:0.375rem 0.625rem;color:var(--text);letter-spacing:0;text-transform:none}
.model-pick-list a:hover{background:var(--raise);text-decoration:none}
.model-pick-list a[aria-current]{background:var(--raise)}
.mp-name{font-size:0.84375rem;font-weight:500}
.mp-meta{grid-column:1;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.03em;color:var(--text-3)}
.mp-low{grid-row:1 / 3;grid-column:2;color:var(--accent-ink);font-size:0.75rem;white-space:nowrap}
.hd-panel{display:flex;flex-direction:column;flex:1}
.hd-panel[hidden]{display:none}
.hd-chart{display:flex;flex:1;margin-top:0.875rem;min-height:19rem}
/* Modèle sans tracé : ses vendeurs en liste, une ligne chacun, le prix à droite sur une même colonne. Les lignes se partagent la
   page : 54 px par ligne sur écran large, 40 px en dessous, et une ligne grandit avec son contenu (vendeur et passerelle sur deux ou trois lignes) */
.hd-flat{list-style:none;display:flex;flex-direction:column;flex:1;margin:0.875rem 0 0;padding:0;min-width:0}
.hd-flat>li{flex:0 0 auto;min-height:2.5rem;padding:0.375rem 0;display:flex;align-items:center;justify-content:space-between;gap:0.75rem;min-width:0;border-top:1px solid var(--line-soft);font-size:0.90625rem}
.hd-flat>li:first-child{border-top:0}
.hd-flat .prov-name{gap:0.5rem;min-width:0;overflow-wrap:anywhere}
.hd-flat-who{display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0.5rem;flex:1 1 0;min-width:0}.hd-flat-who .sm-marks{flex:0 1 auto;min-width:0;gap:0.5rem}.hd-flat-who .sm-mark{flex:0 1 auto;min-width:0}.hd-flat-who .sm-name{white-space:normal;overflow-wrap:anywhere}
@media (min-width:68.75em){.hd-flat>li{min-height:3.375rem}}
.hd-flat .num{flex:none;font-family:var(--mono);font-stretch:var(--mono-stretch);font-variant-numeric:tabular-nums;color:var(--text)}
.depth-wrap{position:relative;height:100%;min-height:19rem;width:100%}
.dp-cap{position:absolute;left:0;top:2px;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.dp-plot{position:absolute;left:0;right:0;top:2.5rem;bottom:1.5rem;cursor:crosshair}
.dp-grid,.dp-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dg-half,.dg-top{fill:none;stroke:var(--line-soft);stroke-width:1;vector-effect:non-scaling-stroke}
.dg-list{fill:none;stroke:var(--text-col);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.dg-base{fill:none;stroke:var(--line-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.depth-area{fill:color-mix(in srgb,var(--accent-ink) 8%,transparent);stroke:none}
.depth-line{fill:none;stroke:var(--accent-ink);stroke-width:1.75;vector-effect:non-scaling-stroke}
.depth-line-x{stroke:var(--text-3);stroke-width:1.5;stroke-dasharray:5 4}
.dp-tip em{display:block;max-width:16.25rem;margin-top:0.25rem;font-style:normal;font-size:0.6875rem;white-space:normal;opacity:.85}
.dp-others{margin:0.625rem 0 0;padding:0 2px;font-size:0.78125rem;color:var(--text-col)}.dp-others summary{display:inline-flex;align-items:center;min-height:2.75rem;cursor:pointer;color:var(--text-2)}.dp-others summary::before{content:"▸";margin-right:0.5rem;font-size:0.6875rem;color:var(--text-3)}.dp-others[open] summary::before{content:"▾"}.dp-others p{margin:0.25rem 0 0.5rem}.dp-others ul{margin:0;padding:0 0 0.25rem 1.125rem}.dp-others li{margin:0 0 0.25rem}
.dp-y{position:absolute;left:0;margin-top:0.25rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;color:var(--text-3);pointer-events:none}
.dp-reveal{position:absolute;inset:0}
@media (prefers-reduced-motion:no-preference){.dp-reveal{animation:depth-reveal 1.5s cubic-bezier(.65,0,.35,1) backwards}}
@keyframes depth-reveal{from{clip-path:inset(0 100% 0 0)}}
/* Mouvements communs. Survol : les lignes de la liste des modèles et du tableau de l'indice s'éclairent avec le même filet d'accent à gauche que le tableau de l'accueil et
   celui des offres (aucun déplacement, donc valable aussi quand le système réduit les animations). Tracé : les mini-courbes de
   l'indice se dessinent une fois de gauche à droite, comme le graphique des offres */
.mdl-pop .models-table tbody tr:hover{box-shadow:inset 2px 0 0 var(--accent-ink)}
@media (hover:hover) and (pointer:fine){.ix-table tbody tr:hover{box-shadow:inset 2px 0 0 var(--accent-ink)}}
@media (prefers-reduced-motion:no-preference){.ix-spark{animation:depth-reveal 900ms cubic-bezier(.65,0,.35,1) backwards}}
@media print{.ix-spark{animation:none!important;clip-path:none!important}}
.dm{position:absolute;pointer-events:none}
.dm-sq{position:absolute;width:0.4375rem;height:0.4375rem;margin:-0.21875rem 0 0 -0.21875rem;background:currentColor}
.dm-low{color:var(--accent-ink)}.dm-mid,.dm-high{color:var(--text)}.dm-t:has(>.dm-in){display:flex;flex-direction:column-reverse;gap:3px}
/* Deux rendus des repères quand leurs groupes diffèrent selon la largeur du tracé : l'étroit par défaut, le large dès 600 px de tracé */
/* Le carré d'un autre repère ne couvre jamais un texte : l'étiquette concernée est écrite sous son point (dm-b) ou, faute de place, par-dessus le
   carré sur un fond opaque (dm-c). Suffixe n : seulement sur un tracé étroit (la règle par défaut) ; suffixe w : seulement dès 600 px de tracé */
.dm-t.dm-b,.dm-t.dm-bn{bottom:auto;top:0.5625rem}
.dm-t.dm-c,.dm-t.dm-cn{z-index:1;margin:0 -0.25rem;padding:1px 0.25rem;background:var(--bg)}
.dm-w{display:none}
/* Trait de l'escalier dans le texte d'une étiquette (dm-cv ; suffixe n ou w : à cette largeur de tracé seulement) : un cache sous le texte, de la
   taille du bloc, montre le fond de la page et, à sa place exacte, une copie de l'aire du tracé (alignée sur le tracé par les unités du
   conteneur) : le trait s'interrompt sous les mots, aucune teinte ne déborde de l'aire. Sans ces unités : pas de cache, le rendu d'avant */
.dm-k{display:none}
/* Papier : pas de cache (le rendu PDF laisse un filet au bord du cache) ; le graphique s'imprime comme avant */
@media print{.dm-k{display:none!important}}
@supports (width:1cqh){.dm-sq{z-index:2}.dm-t.dm-cv,.dm-t.dm-cvn,.dm-t.dm-cvw{z-index:1}.dm-cv>.dm-k,.dm-cvn>.dm-k{display:block;position:absolute;inset:0 -3px;z-index:-1;overflow:hidden;background:var(--bg)}.dm-ka{position:absolute;display:block;width:100cqw;height:100cqh;bottom:calc(-1 * ((100 - var(--dy,0)) * 1cqh + 0.5625rem))}.dm-l .dm-ka{left:calc(-1 * (var(--dx,0) * 1cqw + 0.3125rem))}.dm-r .dm-ka{right:calc(-1 * ((100 - var(--dx,0)) * 1cqw + 0.3125rem))}.dm-b .dm-ka,.dm-bn .dm-ka{bottom:auto;top:calc(-1 * (var(--dy,0) * 1cqh + 0.5625rem))}.dm-ka path{fill:color-mix(in srgb,var(--accent-ink) 8%,transparent)}.dp-list.dp-list-cv{z-index:1}.dp-list-cv>.dm-k{display:block;position:absolute;inset:0 -3px;z-index:-1;overflow:hidden;background:var(--bg)}.dp-list .dm-ka{bottom:auto;top:-0.25rem;left:calc(-1 * (var(--dx,0) * 1cqw + 3px))}.dp-list-low .dm-ka,.dp-list-lown .dm-ka{top:-1.625rem}.dp-list-r .dm-ka,.dp-list-rn .dm-ka{left:auto;right:calc(-1 * ((100 - var(--dx,0)) * 1cqw + 3px))}@container (min-width:600px){.dp-list-lown .dm-ka{top:-0.25rem}.dp-list-loww .dm-ka{top:-1.625rem}.dp-list-rn .dm-ka{right:auto;left:calc(-1 * (var(--dx,0) * 1cqw + 3px))}.dp-list-rw .dm-ka{left:auto;right:calc(-1 * ((100 - var(--dx,0)) * 1cqw + 3px))}.dm-cvn>.dm-k{display:none}.dm-cvw>.dm-k{display:block;position:absolute;inset:0 -3px;z-index:-1;overflow:hidden;background:var(--bg)}.dm-bn .dm-ka{top:auto;bottom:calc(-1 * ((100 - var(--dy,0)) * 1cqh + 0.5625rem))}.dm-bw .dm-ka{bottom:auto;top:calc(-1 * (var(--dy,0) * 1cqh + 0.5625rem))}}}
/* Étiquette du prix de liste : de l'autre côté de son trait (r) ou une ligne plus bas (low) quand un carré tomberait sur son texte ; n et w comme ci-dessus */
.dp-list.dp-list-rn{margin-left:0;transform:translateX(calc(-100% - 0.375rem))}.dp-list.dp-list-low,.dp-list.dp-list-lown{top:1.625rem}
@supports (width:1cqw){.dm-t[class*=" mw-"]{max-width:calc(var(--mw) * 1cqw - 1.5rem)}.dp-list.dp-list-rn{max-width:calc(var(--dx,100) * 1cqw - 0.5rem)}@container (min-width:600px){.dp-list.dp-list-rn{margin-left:0.375rem;transform:none;max-width:calc((100 - var(--dx,0)) * 1cqw - 0.5rem)}.dp-list.dp-list-rw{margin-left:0;transform:translateX(calc(-100% - 0.375rem));max-width:calc(var(--dx,100) * 1cqw - 0.5rem)}.dp-list.dp-list-lown{top:0.25rem}.dp-list.dp-list-loww{top:1.625rem}.dm-w{display:block}.dm-n{display:none}.dm-t.dm-bn{bottom:0.5625rem;top:auto}.dm-t.dm-cn{z-index:auto;margin:0;padding:0;background:none}.dm-t.dm-bw{bottom:auto;top:0.5625rem}.dm-t.dm-cw{z-index:1;margin:0 -0.25rem;padding:1px 0.25rem;background:var(--bg)}}}
.dm-t{position:absolute;bottom:0.5625rem;white-space:nowrap;line-height:1.35}
.dm-l{left:0.5rem;text-align:left}.dm-r{right:0.5rem;text-align:right}
/* Une étiquette ne sort jamais du tracé : sa largeur est bornée à la place qui reste de son côté du point (unités du conteneur), et elle passe
   à la ligne au besoin. Sans ces unités, la règle est ignorée et l'étiquette garde sa ligne unique */
.dp-plot{container-type:size}
@supports (width:1cqw){.dm-t{white-space:normal;overflow-wrap:anywhere}.dm-l{width:max-content;max-width:calc((100 - var(--dx,0)) * 1cqw - 0.625rem)}.dm-r{width:max-content;max-width:calc(var(--dx,100) * 1cqw - 0.625rem)}}
/* Téléphone : l'étiquette du point le plus haut, bornée en largeur, passe sur deux ou trois lignes et montait sur la légende de l'axe
   (« Offres ↑ ») ; le tracé descend de 30 px pour lui laisser sa place et la boîte grandit d'autant (le tracé garde sa hauteur) */
@media (max-width:40em){.dp-plot{top:4.375rem}.hd-chart,.depth-wrap{min-height:20.875rem}}
.dm-l1{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.04em;text-transform:uppercase}
.dm-l2{font-family:var(--sans);font-size:0.75rem;color:var(--text-2)}
.dp-list{position:absolute;top:0.25rem;margin-left:0.375rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;text-transform:uppercase;color:var(--text-col);white-space:nowrap;pointer-events:none}
/* Étiquette du prix de liste : comme les autres, elle ne sort jamais du tracé. Au-delà de 60 % de l'axe elle s'écrit à gauche de son trait ; sa
   largeur est bornée à la place qui reste de son côté (elle élargissait l'accueil sur téléphone quand le prix de liste tombait à droite) */
.dp-list-r{margin-left:0;transform:translateX(calc(-100% - 0.375rem))}
@supports (width:1cqw){.dp-list{white-space:normal;overflow-wrap:anywhere;width:max-content;max-width:calc((100 - var(--dx,0)) * 1cqw - 0.5rem)}.dp-list-r{max-width:calc(var(--dx,100) * 1cqw - 0.5rem)}}
.dp-x{position:absolute;bottom:-1.25rem;transform:translateX(-50%);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;color:var(--text-3)}
.dp-x0{transform:none}
@media (max-width:32.5em){.dp-x-alt{display:none}}
.dp-cross{position:absolute;top:0;bottom:0;width:1px;background:rgba(230,236,234,.45);pointer-events:none}
.dp-dot{position:absolute;width:0.5625rem;height:0.5625rem;margin:-0.28125rem 0 0 -0.28125rem;background:var(--accent-ink);box-shadow:0 0 0 3px var(--bg);pointer-events:none}
.dp-tip{position:absolute;top:0.5rem;z-index:2;padding:0.4375rem 0.625rem;line-height:1.45;white-space:nowrap;background:var(--text);color:var(--bg);pointer-events:none;transform:translateX(0.75rem)}
.dp-tip.dp-tip-l{transform:translateX(calc(-100% - 0.75rem))}
.dp-tip b{display:block;font-family:var(--sans);font-size:0.8125rem;font-weight:600}
.dp-tip span{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem}
.dp-cross[hidden],.dp-dot[hidden],.dp-tip[hidden]{display:none}
.hd-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:1rem calc(-1 * clamp(1rem,2vw,1.5rem)) -1.25rem;border-top:1px solid var(--line);background:var(--line)}
.hd-stats>div{padding:0.75rem clamp(0.75rem,2vw,1.5rem);background:var(--surface)}
.hd-stats dt{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.hd-stats dd{margin:0.25rem 0 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1.125rem;font-weight:500;white-space:nowrap}
.hd-stats .low dd{color:var(--accent-ink)}
@media (prefers-reduced-motion:no-preference){
.hero .rise{animation:hero-rise 700ms var(--ease-out) both}
.hero h1 .rise{animation-name:hero-rise-y}
.hero .r1{animation-delay:70ms}.hero .r2{animation-delay:140ms}.hero .r3{animation-delay:210ms}.hero .r4{animation-delay:280ms}
}
@keyframes hero-rise{from{opacity:0;transform:translateY(0.75rem)}}
@keyframes hero-rise-y{from{transform:translateY(0.625rem)}}

.home-board{padding-top:1.75rem}
.home-board .panel{overflow-x:auto}
/* Tableau des tendances (maquette B) : cellules en grille de 772 px au minimum dans un cadre qui défile en travers sous cette largeur */
.board-scroll{overflow-x:auto;overflow-y:hidden}
.board{min-width:37.5rem}
.board-row{position:relative;display:grid;grid-template-columns:minmax(9.375rem,2fr) minmax(5.625rem,.8fr) minmax(8.125rem,1.4fr) 5.5rem 5.5rem 0.625rem;gap:0 0.875rem;align-items:center;padding:0.75rem;border-bottom:1px solid var(--line-soft);transition:background-color var(--t-ui) ease}
.board-head{align-items:end;padding:0.625rem 0.75rem 0.5rem;border-bottom-color:var(--line);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
/* Téléphone et petite tablette (< 720 px, depuis la colonne « Chez » du 16/10) : le tableau tient dans son cadre au lieu de défiler (le prix et l'entrée / sortie étaient hors de vue) : le modèle sur sa ligne,
   puis « le moins cher » et « entrée / sortie » côte à côte avec leur titre ; les titres de colonnes (et leurs tris) disparaissent */
@media (max-width:45em){
.board{min-width:0}
.board-scroll{overflow-x:hidden}.b-out::before{inset:-0.875rem 0 -0.875rem -0.625rem}
.board-head{display:none}
/* Téléphone : les deux prix ne prennent que leur largeur, la colonne du moins cher (prix + vendeur) prend tout le reste : un nom de vendeur
   d'un seul mot (« Consensusprotocol ») tenait dans 100 px et se coupait au milieu du mot */
.board-row{grid-template-columns:minmax(0,1fr) max-content max-content;gap:0.5rem 1rem;align-items:start;padding:0.75rem 0.875rem}
.b-model{grid-column:1/-1}
/* Le vendeur sur sa ligne, sous les prix (order), sans titre : son logo et son nom suffisent */
.b-sel{grid-column:1/-1;order:1;flex-wrap:wrap}
.b-go{display:none}
.board .cur{display:inline}.home-board .ph-unit{display:none}
.b-lo[data-l]::before,.b-io[data-l]::before{content:attr(data-l);display:block;margin-bottom:2px;white-space:normal;overflow-wrap:anywhere;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
}
/* Très étroit : le moins cher prend toute la largeur, entrée et sortie passent dessous, côte à côte */
@media (max-width:21.25em){.board-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.board-row .b-lo{grid-column:1/-1}.board-row .b-io{text-align:start}}

/* Cases de prix : le nombre seul, l'unité est dite une fois dans l'en-tête du tableau (.ph-unit) ; le symbole (.cur) ne s'affiche que
   lorsque la ligne devient une carte (téléphone, règle ci-dessus), où chaque prix est seul sous son libellé */
.cur{display:none}
.ph-end{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0.25rem 1rem}
.ph-unit{color:var(--text-3)}
/* Une rangée = une ligne. Repères de vendeur (cote commune à tous les tableaux) : logo de 22 px, vendeur puis passerelle séparés par
   un filet, nom en bulle ; chaque repère mène à la page du fournisseur chez nous quand elle existe. Cible étendue à 44 px de haut sans
   grandir la rangée ; posé au-dessus du lien qui couvre la rangée */
.sm-marks{display:inline-flex;align-items:center;flex:none;white-space:nowrap}
.sm-mark{position:relative;z-index:1;display:inline-flex;flex:none}
.sm-mark::before{content:"";position:absolute;inset:-0.6875rem -3px}
a.sm-mark:hover .logo,a.sm-mark:hover .lab-badge{outline-color:var(--accent-ink)}
.sm-mark:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
/* Vendeur sans vrai logo : son nom écrit à la place du repère (jamais une initiale). Même corps que les noms de la rangée */
.sm-txt{font-size:0.78125rem;line-height:1.2}.sm-pre{font-weight:400;color:var(--text-3)}
/* La passerelle est le second fait de la case : son nom écrit pèse moins que celui du vendeur */
.sm-via+.sm-txt .sm-name,.cmp-via+.cmp-seller.txt .sm-name{font-weight:500;color:var(--text-2)}
/* Carte de labo : une colonne étroite (147 px sur téléphone) ne tient pas toujours un logo et un nom de passerelle sur une ligne ;
   la carte n'est pas une rangée de tableau, le nom passe alors à la ligne au lieu de sortir de sa colonne */
.lab-col-sm .sm-marks{flex-wrap:wrap;row-gap:0.25rem;max-width:100%}
/* et un nom plus large que la colonne passe à la ligne, coupé dans le mot s'il n'a pas d'espace : jamais de points de suspension dans
   une carte, jamais de défilement de côté */
.lab-col-sm .sm-txt{min-width:0;max-width:100%}.lab-col-sm .sm-name{white-space:normal;overflow-wrap:anywhere}
/* Rangée de tableau (une rangée = une ligne) : un nom de vendeur écrit trop long est coupé par des points de suspension. Son nom
   entier est dans la bulle qu'il porte déjà (« chez X », « via X »), et il reste écrit en entier dans les blocs du téléphone et sur
   le papier. Même exception que pour le nom du modèle dans un tableau large (décision du 10/10) */
table .sm-txt{min-width:0;max-width:100%}
@media screen{table .sm-name{display:inline-block;max-width:16ch;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}}
/* La coupe n'existe qu'à l'écran : sur le papier un tableau qui imprime ses repères écrit le nom en entier, sur autant de lignes qu'il faut */
@media print{table .sm-name{white-space:normal;overflow-wrap:anywhere}}
a.sm-txt{color:inherit}a.sm-txt:hover .sm-name{color:var(--accent-ink)}
.sm-gw{align-items:center;justify-content:center;width:1.375rem;height:1.375rem;background:var(--raise);outline:1px solid var(--line-strong);color:var(--text-2)}
.sm-gw .ico{width:0.8125rem;height:0.8125rem}
.sm-via{flex:none;width:1px;height:0.75rem;margin:0 0.25rem;background:var(--line-strong)}
/* Tableau de l'accueil en rangées (au-delà de 560 px) : nom du modèle, repères du vendeur au bout de la cellule juste avant le prix,
   montant seul avec son badge éventuel ; le vendeur en texte ne s'écrit plus que dans les cartes du téléphone et sur papier */
@media (min-width:45.0625em){
.board-row{padding-block:0.6875rem}
.b-who{flex:1}
.b-lo{display:flex;align-items:center;gap:0.5rem}
.board .b-id{display:none}}
/* Prix : au-dessus du lien étiré du nom (.b-name::after) à toutes les largeurs, cartes du téléphone comprises ; sinon, sous 721 px,
   le pointeur ouvrait la bulle de l'identifiant et le toucher la page du modèle au lieu de la bulle du prix (Imani, 29/10) */
.b-lo-v{position:relative;z-index:1}
/* Cartes du téléphone plus courtes (16/10) : l'identifiant du modèle reste en bulle du nom et sur le papier */
@media screen and (max-width:45em){.board .b-id{display:none}.board-row{padding-block:0.625rem}
}
@media (max-width:45em){.b-chg{margin-top:2px}}
/* Papier : pas de bulle, donc le vendeur s'écrit, sur la ligne du prix ; les repères ne sont pas imprimés (le texte les dit) */
@media print{.board .b-id{display:block}}
.chip.b-chg{position:relative;z-index:1;flex:none;white-space:nowrap}
.board-head .th{white-space:nowrap}
.board-head .r{text-align:end}
.board-head .th.r.is-sort{justify-content:flex-end}
.board-head .th.is-sort{display:flex;align-items:center;justify-content:flex-start;gap:0.375rem;cursor:pointer;min-height:2.75rem;margin:-0.875rem 0 -0.75rem}
.board-head .th.r.is-sort{justify-content:flex-end}
.board-head .th.is-sort:hover,.board-head .th.is-on{color:var(--text)}
.board-head .th-ar{color:var(--text-3)}
.board-head .th.is-on .th-ar{color:var(--accent-ink)}
.board-head .th.is-sort:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.board-body .board-row:hover,.board-body .board-row:focus-within{background:var(--row-hover);box-shadow:inset 2px 0 0 var(--accent-ink)}
.board-body .board-row:hover .b-go,.board-body .board-row:focus-within .b-go{color:var(--accent-ink)}
.b-model{display:flex;align-items:center;gap:0.6875rem;min-width:0}
.b-model .logo,.b-model .lab-badge{flex:none;width:1.375rem;height:1.375rem}
.b-who{min-width:0;line-height:1.3}
.b-name{display:block;font-size:0.90625rem;font-weight:500;color:var(--text)}
.b-name::after{content:"";position:absolute;inset:0}
.b-name:hover{color:var(--text);text-decoration:none}
/* Aucun texte coupé par des points de suspension (règle du 10/10) : un identifiant ou un vendeur trop long passe à la ligne */
.b-id{display:block;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;color:var(--text-3);overflow-wrap:anywhere}
.b-lo{min-width:0;line-height:1.3}
.b-lo-v{display:block;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.84375rem;font-weight:600;color:var(--accent-ink);white-space:pre}
/* Tableau large : le prix à droite d'une case de six chiffres (« 150,00 ») posée au bord gauche de la colonne, sous son titre ; avec les
   décimales complétées (figureColumn), la virgule tombe sur la même verticale et la pastille « changé » qui suit aussi (règle du 28/10) */
@media (min-width:45.0625em){.b-lo-v{min-width:6ch;text-align:end}}
/* Colonne « Chez » (critique du 16/10 : le vendeur ne se voyait qu'en logo, au survol) : logo et nom du vendeur (lien vers sa page), repère de la passerelle,
   flèche vers l'offre. La même écriture que les autres pages (providerName, sellerMark) */
.b-sel{position:relative;z-index:1;display:flex;align-items:flex-start;gap:0.375rem 0.5rem;min-width:0;font-size:0.8125rem;line-height:1.3}
.b-sel .prov-name{gap:0.5rem;min-width:0;overflow-wrap:anywhere}.b-sel .sm-marks{flex:0 1 auto;min-width:0;white-space:normal}
/* Étiquette « le moins cher » du graphique de l'accueil : le vendeur est un lien vers son offre (les repères du graphique ne prennent pas le pointeur, ce lien si) */
.dm-l2 .seller-link{pointer-events:auto;color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.dm-l2 .seller-link:hover{color:var(--accent-ink);text-decoration-color:var(--accent-ink)}
/* Flèche vers le vendeur : juste après une zone du nom de largeur fixe, donc sur la même verticale à chaque rangée (règle du 28/10) et
   lue avec le nom, pas avec la colonne Input ; le repère de la passerelle vient après la flèche. Un nom plus long que la zone la pousse */
.b-sel .prov-name{flex:none;min-width:10em}.b-sel .sm-marks{order:2}
.b-out{flex:none;order:1;position:relative;z-index:1;display:inline-flex;align-items:center;min-height:1.3em;color:var(--text-3)}
.b-out::before{content:"";position:absolute;inset:-0.875rem -0.625rem}
.b-out:hover{color:var(--accent-ink);text-decoration:none}
.b-out .ico{width:0.75rem;height:0.75rem}
.b-io{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.78125rem;font-variant-numeric:tabular-nums;color:var(--text-p);white-space:pre;text-align:end}
.b-go{text-align:right;font-family:var(--mono);color:var(--text-3)}
/* Papier : la colonne du moins cher prend la place que les deux colonnes de prix n'emploient pas. Sur une feuille elle ne faisait que
   145 px : le vendeur passait sur trois lignes et un nom long se coupait au milieu d'un mot. Le lien sortant et le chevron, qui ne
   servent à rien sur papier, ne sont pas imprimés ; une ligne ne se coupe pas entre deux feuilles. Chaque prix imprime son symbole (.cur) :
   l'en-tête du panneau, qui dit l'unité à l'écran, reste sur la feuille d'avant quand le tableau passe à la suivante. Le tableau tient sur une feuille quand il le peut, et
   son titre comme sa rangée d'en-tête ne restent jamais seuls en bas d'une feuille */
@media print{.board{min-width:0}.board-row{grid-template-columns:minmax(0,1.15fr) minmax(0,.8fr) minmax(0,1fr) 5.25rem 5.25rem;break-inside:avoid}.b-out,.b-go,.board-head>[role=presentation],.home-board .ph-unit{display:none}.board .cur{display:inline}.home-board .panel{break-inside:avoid}.home-board .panel-head,.board-head{break-after:avoid}}
/* Bulle d'explication (data-tip) : texte inversé, posée au-dessus de l'élément (sous lui près du haut de l'écran) ; sans pointeur propre */
[data-tip]{cursor:help}
.tip{position:fixed;z-index:100;max-width:17.5rem;padding:0.5625rem 0.6875rem;background:var(--text);color:var(--bg);font-size:0.78125rem;line-height:1.45;pointer-events:none;box-shadow:0 0.625rem 1.875rem -0.75rem var(--shd)}
.tip[hidden]{display:none}
.board-fresh{display:flex;align-items:center;gap:0.375rem;margin:0;padding:0.375rem 1rem 0.75rem;font-size:0.78125rem;color:var(--text-2)}
/* « Méthode → » au bout de la ligne de fraîcheur du tableau, à côté des prix qu'elle explique (16/10 : plus de lien isolé en bas de page) */
.board-method{display:inline-flex;align-items:center;gap:0.375rem;margin-inline-start:auto;font-weight:500;white-space:nowrap}
.board-fresh{flex-wrap:wrap}
.board-fresh .ico{color:var(--accent-ink)}

.section-sub{margin-top:0.625rem;max-width:58ch;font-size:1rem;color:var(--text-2)}
/* Sections de l'accueil (10/10) : indice, comparaisons, labos, fournisseurs. Chiffres, logos et liens, aucune phrase ; une forme par section */
.home-more{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.25rem;padding-top:1.75rem}
.hm{grid-column:span 12;margin:0;min-width:0}
/* Panneaux secondaires (indice, comparaisons, labos, fournisseurs) plus discrets que le tableau, les promotions et les nouveaux modèles : filets légers, titre en gris */
.hm{border-color:var(--line-soft)}.hm .panel-head{border-bottom-color:var(--line-soft)}.hm .panel-head h2{color:var(--text-2)}
.hm-labs{grid-column:span 7;display:flex;flex-direction:column}.hm-prov{grid-column:span 5}
/* Fournisseurs les moins chers (28/10) : quatre colonnes de deux rangées, une ligne par fournisseur (rang, logo, nom, écart), l'écart en
   chasse fixe calé à droite : les virgules sont sur une verticale dans chaque colonne (une décimale partout) */
.hd-cheap{display:inline-flex;align-items:center;gap:0.375rem}
.hm-cheap-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.hm-cheap-grid>li{min-width:0;border-top:1px solid var(--line-soft);border-inline-start:1px solid var(--line-soft)}
.hm-cheap-grid>li:nth-child(-n+4){border-top:0}.hm-cheap-grid>li:nth-child(4n+1){border-inline-start:0}
.hm-cheap-row{position:relative;display:flex;align-items:center;gap:0.625rem;min-width:0;height:100%;padding:0.6875rem 1rem}
/* Le nom va à la ligne plutôt que de passer sous l'écart quand la place manque (Imani, #1224) ; les colonnes passent à deux puis
   à une avant que cela n'arrive avec les noms réels */
.hm-cheap-row a{min-width:0;color:inherit;text-decoration:none}.hm-cheap-row a::after{content:"";position:absolute;inset:0}
.hm-cheap-grid b{display:block;min-width:0;font-weight:600;font-size:0.90625rem;line-height:1.25;overflow-wrap:break-word}
.hm-cheap-row a:hover b{color:var(--accent-ink)}
/* L'écart porte la bulle « mesuré sur N modèles » et passe au-dessus du lien de rangée : au toucher, la bulle s'ouvre sans
   ouvrir la fiche (même correctif que la colonne « Source des prix » des Fournisseurs, #1222) */
.hm-gap[data-tip]{position:relative;z-index:1}
.hm-rk{flex:none;min-width:1.5ch;font-size:0.6875rem;color:var(--text-3);text-align:end}
.hm-gap{flex:none;margin-inline-start:auto;font-size:0.8125rem;font-variant-numeric:tabular-nums;color:var(--accent-ink);text-align:end;white-space:nowrap}
.hm .panel-head h2{white-space:nowrap}
.hm .ph-end{display:flex;align-items:center;gap:0.875rem;margin-inline-start:auto;white-space:nowrap}
.hm-cells{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.hm-cell{display:flex;flex-direction:column;gap:0.375rem;min-width:0;padding:0.875rem 1rem;border-inline-start:1px solid var(--line);color:inherit;text-decoration:none}
.hm-cell:first-child{border-inline-start:0}
.hm-cell:hover .hm-k{color:var(--accent-ink)}
.hm-k{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col);white-space:nowrap}
.hm-v{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1.625rem;font-weight:500;letter-spacing:-.03em;line-height:1}
.hm-n{display:flex;justify-content:space-between;gap:0.5rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;color:var(--text-2)}
.hm-pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.hm-pair{display:grid;grid-template-columns:1.375rem minmax(0,1fr) auto;align-items:center;gap:0.5rem 0.625rem;padding:0.875rem 1rem;border-inline-start:1px solid var(--line);color:inherit;text-decoration:none}
.hm-pair:first-child{border-inline-start:0}
.hm-pair b,.hm-labs-grid b{font-weight:600;font-size:0.90625rem;overflow-wrap:anywhere}
.hm-pair:hover b,.hm-labs-grid a:hover b{color:var(--accent-ink)}
.hm-p{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.84375rem;text-align:end;color:var(--text-2)}
.hm-p.win{font-weight:600;color:var(--accent-ink)}
.hm-labs-grid{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr}
.hm-labs-grid a{display:flex;align-items:center;gap:0.625rem;min-width:0;padding:0.6875rem 1rem;border-top:1px solid var(--line-soft);border-inline-start:1px solid var(--line-soft);color:inherit;text-decoration:none}
.hm-labs-grid a:nth-child(-n+4){border-top:0}.hm-labs-grid a:nth-child(4n+1){border-inline-start:0}
.hm-labs-grid .num{margin-inline-start:auto;font-size:0.75rem;color:var(--text-2)}
@media screen{.hm-labs{container:hm-labs/inline-size}.hm-labs-grid a{container-type:inline-size;--lo:3.625rem}.hm-labs-grid b[class*=lf-]{overflow-wrap:normal}
.hm-labs-grid b.lf-7{font-size:max(0.625rem,min(0.90625rem,calc((100cqi - var(--lo)) / 4.34)))}.hm-labs-grid b.lf-8{font-size:max(0.625rem,min(0.90625rem,calc((100cqi - var(--lo)) / 4.96)))}.hm-labs-grid b.lf-9{font-size:max(0.625rem,min(0.90625rem,calc((100cqi - var(--lo)) / 5.58)))}.hm-labs-grid b.lf-10{font-size:max(0.625rem,min(0.90625rem,calc((100cqi - var(--lo)) / 6.20)))}.hm-labs-grid b.lf-11{font-size:max(0.625rem,min(0.90625rem,calc((100cqi - var(--lo)) / 6.82)))}.hm-labs-grid b.lf-12{font-size:max(0.625rem,min(0.90625rem,calc((100cqi - var(--lo)) / 7.44)))}.hm-labs-grid b.lf-13{font-size:max(0.625rem,min(0.90625rem,calc((100cqi - var(--lo)) / 8.06)))}.hm-labs-grid b.lf-14{font-size:max(0.625rem,min(0.90625rem,calc((100cqi - var(--lo)) / 8.68)))}.hm-labs-grid b.lf-15{font-size:max(0.625rem,min(0.90625rem,calc((100cqi - var(--lo)) / 9.30)))}.hm-labs-grid b.lf-16{font-size:max(0.625rem,min(0.90625rem,calc((100cqi - var(--lo)) / 9.92)))}
@container hm-labs (max-width:629px){.hm-labs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hm-labs-grid a:nth-child(-n+4){border-top:1px solid var(--line-soft)}.hm-labs-grid a:nth-child(-n+3){border-top:0}.hm-labs-grid a:nth-child(4n+1){border-inline-start:1px solid var(--line-soft)}.hm-labs-grid a:nth-child(3n+1){border-inline-start:0}}
@container hm-labs (max-width:469px){.hm-labs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hm-labs-grid a:nth-child(-n+4){border-top:1px solid var(--line-soft)}.hm-labs-grid a:nth-child(-n+2){border-top:0}.hm-labs-grid a:nth-child(4n+1){border-inline-start:1px solid var(--line-soft)}.hm-labs-grid a:nth-child(odd){border-inline-start:0}}
@media (max-width:25em){.hm-labs-grid a{padding-inline:0.75rem;gap:0.5rem;--lo:3.375rem}}}
/* Mur des fournisseurs : le nom écrit sous chaque logo (critique du 16/10 : un logo seul ne se reconnaît pas toujours) */
.hm-wall{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0.875rem 0.5rem;padding:0.875rem 1rem}
.hm-wall a{display:flex;flex-direction:column;align-items:center;gap:0.375rem;min-width:0;color:var(--text-2);text-align:center;text-decoration:none}
.hm-wall .logo.sm{width:2.25rem;height:2.25rem}
.hm-wall-n{max-width:100%;font-size:0.6875rem;line-height:1.25;overflow-wrap:anywhere}
@media screen{.hm-prov{container:hm-prov/inline-size}.hm-wall a{container-type:inline-size}.hm-wall-n[class*=wf-]{overflow-wrap:normal;white-space:nowrap}.hm-wall-n.wf-10{font-size:max(0.625rem,min(0.6875rem,16.13cqi))}.hm-wall-n.wf-11{font-size:max(0.625rem,min(0.6875rem,14.66cqi))}.hm-wall-n.wf-12{font-size:max(0.625rem,min(0.6875rem,13.44cqi))}
@container hm-prov (max-width:695px){.hm-wall{grid-template-columns:repeat(6,minmax(0,1fr))}}@container hm-prov (max-width:527px){.hm-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}@container hm-prov (max-width:359px){.hm-wall{grid-template-columns:repeat(3,minmax(0,1fr))}}}
.hm-wall a:hover{color:var(--text)}
.hm-wall a:hover .logo{outline-color:var(--accent-ink)}
@media (max-width:56.25em){.hm-labs,.hm-prov{grid-column:span 12}
.hm-cells{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}.hm-cell:nth-child(odd){border-inline-start:0}.hm-cell:nth-child(n+3){border-top:1px solid var(--line)}
.hm-pairs{grid-template-columns:minmax(0,1fr)}.hm-pair{border-inline-start:0;border-top:1px solid var(--line-soft)}.hm-pair:first-child{border-top:0}
.hm-labs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hm-labs-grid a:nth-child(-n+4){border-top:1px solid var(--line-soft)}.hm-labs-grid a:nth-child(-n+2){border-top:0}.hm-labs-grid a:nth-child(4n+1){border-inline-start:1px solid var(--line-soft)}.hm-labs-grid a:nth-child(odd){border-inline-start:0}
.hm-k{white-space:normal;margin-bottom:auto}
.hm .panel-head{flex-wrap:wrap;gap:0.375rem 0.75rem}}
/* Fournisseurs sous le prix du marché : deux colonnes sous 1 100 px (en quatre, de 901 à 1 000 px, le nom passait sous l'écart),
   une seule au téléphone (Imani, #1224) */
@media (max-width:68.75em){.hm-cheap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hm-cheap-grid>li:nth-child(-n+4){border-top:1px solid var(--line-soft)}.hm-cheap-grid>li:nth-child(-n+2){border-top:0}.hm-cheap-grid>li:nth-child(4n+1){border-inline-start:1px solid var(--line-soft)}.hm-cheap-grid>li:nth-child(odd){border-inline-start:0}}
@media (max-width:35em){.hm-wall a:nth-child(n+13){display:none}
.hm-cheap-grid{grid-template-columns:minmax(0,1fr)}.hm-cheap-grid>li,.hm-cheap-grid>li:nth-child(odd){border-inline-start:0}.hm-cheap-grid>li:nth-child(-n+2){border-top:1px solid var(--line-soft)}.hm-cheap-grid>li:first-child{border-top:0}}
/* Papier : un bloc ne se coupe pas entre deux feuilles ; le mur devient la liste des noms (un logo seul ne dit pas son nom sur
   une feuille) ; le vendeur d'une promotion s'écrit, avec sa position, à la place de son logo */
@media print{.hm{break-inside:avoid}.hm .panel-head{break-after:avoid}
.hm-wall{display:block;padding:0.625rem 1rem}.hm-wall a{display:inline;color:inherit}.hm-wall-n{font-size:0.75rem}.hm-wall a .logo,.promo-provider .sm-mark .logo,.promo-provider .sm-mark .lab-badge{display:none}
.hm-wall a .sr,.promo-provider>.sm-mark .sr,.promo-provider .sm-more .sr,.promo-provider>.sm-name .sr{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;font-size:0.75rem;color:var(--text-2)}
.hm-wall a+a::before{content:" · ";color:var(--text-3)}
.promo-provider .sm-out .sm-mark .sr,.promo-provider .sm-marks .sm-name .sr,.promo-provider .sm-more [aria-hidden]{display:none}
/* (sélecteurs préfixés par .promos : ces règles sont écrites avant celles de l'écran et doivent les emporter) */
.promos .promo-provider .sm-marks,.promos .promo-provider .sm-out,.promos .promo-provider .sm-more{display:inline}.promos .promo-provider,.promos .promo-provider .sm-marks{white-space:normal}.promos .promo-rows .promo-prices{margin-inline-start:auto}
.promos .promo-provider .sm-more{width:auto;height:auto;background:none;outline:0;font:inherit;color:inherit}.promos .promo-provider .sm-more .sr{white-space:nowrap}.promos .promo-provider .sm-marks>.sm-out~.sm-out::before,.promos .promo-provider .sm-marks>.sm-more::before{content:"\00a0· "}.promos .promo-provider .sm-gate{display:none}.promos .promo-provider{display:block}
.promos .promo-rows .promo-who{flex:1 1 100%}
/* Une promotion ne se coupe pas entre deux feuilles, et le nom du modèle ne reste pas seul en bas d'une feuille */
.promos .promo-rows>li{break-inside:avoid}.promos .promo-boxhead{break-after:avoid}
.promo-cols{display:none!important}.promo-rows .promo-k{position:static;width:auto;height:auto;overflow:visible;clip-path:none}}
/* Nouveaux modèles : une ligne par modèle, colonnes fixes pour que dates, pastilles et prix s'alignent d'une rangée à l'autre ;
   l'unité dans l'en-tête. Sur téléphone, la forme de carte des autres blocs de l'accueil (tableau des tendances, promotions) : le nom et le prix sur la première ligne,
   la date et la pastille dessous ; le prix seul y garde son « $ » */
.newm{padding-top:1.75rem}
.newm-panel h2{display:flex;align-items:baseline;gap:0.625rem}
.newm-n{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;font-weight:500;color:var(--text-3)}
.newm-list{list-style:none;margin:0;padding:0}
.newm-list>li{display:grid;grid-template-columns:minmax(0,1fr) 5.25rem 9.375rem 6rem;align-items:center;column-gap:1rem;min-height:3.25rem;padding:0.5rem 1rem;border-top:1px solid var(--line-soft)}
.newm-list>li:first-child{border-top:0}
.newm-nochip .newm-list>li{grid-template-columns:minmax(0,1fr) 5.25rem 6rem}
.newm-who{display:flex;align-items:center;gap:0.625rem;min-width:0}
.newm-who .logo,.newm-who .lab-badge{flex:none;width:1.375rem;height:1.375rem}
.newm-name{min-width:0;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.newm-at{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;color:var(--text-2);white-space:nowrap;cursor:help}
.newm-st{min-width:0}.newm-st .chip{white-space:nowrap}
.newm-p{text-align:end;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.875rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.newm-more{margin:0;padding:0.625rem 1rem;border-top:1px solid var(--line-soft)}
.newm-more a{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;font-weight:600;letter-spacing:.04em;color:var(--accent-ink)}
@media (max-width:37.5em){.newm-list>li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who p" "at st";row-gap:0.25rem;justify-content:start}.newm-who{grid-area:who}.newm-p{grid-area:p}.newm-at{grid-area:at;justify-self:start}.newm-st{grid-area:st;justify-self:end}.newm-nochip .newm-list>li{grid-template-columns:minmax(0,1fr) auto}.newm .cur{display:inline}.newm .ph-unit{display:none}}
@media print{.newm .cur{display:inline}.newm .ph-unit{display:none}.newm-list>li{break-inside:avoid}.newm-more{display:none}}
.promos{padding-top:1.75rem}
.use-home h2{font-size:1.875rem;line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.hd-promos{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem}
.promos .ph-note{margin:0;font-family:var(--sans);font-size:0.78125rem;letter-spacing:.02em;text-transform:none;color:var(--text-3)}
.promo-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.promo-list>li{flex:0 1 30rem;min-width:0;border-inline-end:1px solid var(--line)}
.promo-box{display:flex;flex-direction:column}
.promo-boxhead{margin:0;padding:1rem 1rem 0.25rem}
.promo-boxhead .promo-model{display:inline-block;color:var(--text)}
.promo-rows{list-style:none;margin:0;padding:0}
.promo-rows>li{padding:0.75rem 1rem 0.875rem;border-top:1px solid var(--line-soft)}
.promo-rows>li:first-child{border-top:0}
.promo-rows .promo-main{margin-top:0.625rem}
.hd-promos .info{align-self:center}
/* Promotions en lignes alignées : remise, vendeur, prix sur des colonnes communes à toutes les lignes ; empilées sous 1000 px (en
   dessous, modèle + remise + vendeurs + deux colonnes de prix ne tiennent pas dans la case : les prix en sortaient) */
@media (min-width:62.5em){
.promo-list>li.promo-box{flex:1 1 100%;border-inline-end:0;border-top:1px solid var(--line)}
.promo-list>li.promo-box:first-child{border-top:0}
/* Une case = une ligne : le nom du modèle à gauche (colonne commune à toutes les cases), ses promotions à droite, une par ligne ;
   cinq cases ne font pas un écran */
.promo-list>li.promo-box{display:grid;grid-template-columns:minmax(0,17.5rem) minmax(min-content,1fr);align-items:center}
.promo-box .promo-boxhead{padding:0 1rem}.promo-box .promo-model{font-size:1.0625rem}
/* La remise d'abord, dans une colonne de largeur fixe (alignée d'une case à l'autre quel que soit le vendeur), puis le vendeur, puis les prix */
.promo-rows>li{display:grid;grid-template-columns:9.375rem minmax(6rem,1fr) auto;align-items:center;column-gap:0.875rem;padding:0.625rem 1rem 0.625rem 0}
.promo-rows .promo-main{margin-top:0}
/* « Input » et « Output » dits UNE fois, en en-tête de colonne ; dans chaque rangée le libellé reste lu, plus affiché */
.promo-cols{display:grid;grid-template-columns:repeat(2,7.5rem);column-gap:1.25rem;margin-inline-start:auto;text-align:end;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.promo-rows .promo-k{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.promo-rows .promo-top{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px}
.promo-rows .promo-main{display:contents}
.promo-rows /* Prix d'une promotion : deux colonnes, entrée et sortie, chiffres alignés à droite (jamais « a / b » dans une même cellule) */
.promo-prices{display:grid;grid-template-columns:repeat(2,7.5rem);justify-content:end;column-gap:1.25rem;text-align:end;font-variant-numeric:tabular-nums}
.promo-px{display:grid;justify-items:end;gap:1px}
.promo-k{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.promo-rows .promo-facts{grid-column:1/-1}
}
/* Rangée large : un nom de vendeur ou de passerelle plus long que sa colonne est coupé par « … » (sa bulle le donne en entier) ;
   insécable et sans limite, il se posait sur la mention du prix habituel à 1000 px. Cartes sous 1000 px et papier : le nom entier */
@media screen and (min-width:62.5em){.promo-rows .promo-who,.promo-rows .promo-provider,.promo-rows .sm-gate,.promo-rows .sm-gate>.sm-mark{min-width:0;max-width:100%}.promo-rows .sm-gate>.sm-mark{flex:0 1 auto}.promo-rows .promo-provider>.sm-name,.promo-rows .sm-gate .sm-name{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.ix-value .ix-change{margin-inline-start:auto}
/* Nombre impair de promotions : la dernière occupe toute la largeur (jamais une carte seule dans une demi-colonne), sans
   retirer de promotion (relecture de Kofi) ; sans effet en une colonne */

.promo{display:block;padding:1rem;color:var(--text);transition:background-color var(--t-ui) ease}
.promo:hover{text-decoration:none;color:var(--text);background:var(--surface)}
.promo-top{display:flex;justify-content:space-between;gap:0.75rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase}
.promo-off{font-weight:600;color:var(--warn)}
.promo-tag{color:var(--text-col)}
.promo-main{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1rem}
.promo-model{display:block;font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.promo-provider{display:block;font-size:0.8125rem;color:var(--text-2)}
.sm-name{font-weight:600;color:var(--text);white-space:nowrap}
/* Dans une promotion, un nom de vendeur long revient à la ligne plutôt que de sortir de sa case (cartes étroites, colonne du vendeur) */
.promo-provider .sm-name{white-space:normal;overflow-wrap:anywhere}
.sm-out{display:inline-flex}
/* Passerelle d'une promotion, à côté du vendeur (filet « via » puis son repère) */
.sm-gate{display:inline-flex;align-items:center;flex:none}
.promo-provider{display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0;min-width:0;max-width:100%}.promo-who{min-width:0;max-width:100%}.promo-provider .sm-marks{flex-wrap:wrap;white-space:normal;flex:0 1 auto;gap:0.25rem 0.375rem}
.promo-provider .sm-marks{display:inline-flex;align-items:center;gap:0.375rem}
.sm-more{display:inline-flex;align-items:center;justify-content:center;width:1.375rem;height:1.375rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.875rem;line-height:1;color:var(--text-2);background:var(--raise);outline:1px solid var(--line-strong);text-decoration:none}
.sm-more:hover{color:var(--accent-ink);outline-color:var(--accent-ink);text-decoration:none}
@media (max-width:62.4375em){.promo-cols{display:none}}
/* Précisions de la promotion (heures creuses, prix habituel au tarif de pointe, fin) : sous la carte, en retrait */
.promo-facts{display:flex;flex-wrap:wrap;gap:0.25rem 0.875rem;margin-top:0.625rem;font-size:0.78125rem}
.promo-note{color:var(--text-3)}
/* Indice de marché de l'accueil : six familles en grille de 3, filets de 1 px (maquette B) */
.ix-chg{font-size:0.78125rem;color:var(--text-2)}
.hx-corr{color:var(--warn);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase}
.fl{position:relative;flex:none;display:inline-block;width:1em;height:1em;font-size:1.125rem}
.fl i,.fl-q{position:absolute;box-sizing:border-box;display:block}
.fl-q{left:.16em;top:.16em;width:.68em;height:.68em;transform:rotate(45deg);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.fl-q i{position:static}.fl-q i:nth-child(1){background:#F8A58F}.fl-q i:nth-child(2){background:#F2927B}.fl-q i:nth-child(3){background:#A9675C}.fl-q i:nth-child(4){background:#84504A}
.fl-cmp .fl-a{left:.06em;top:.1em;width:.56em;height:.56em;background:linear-gradient(135deg,#8E7337,#5E4A22);box-shadow:inset 0 0 0 1px rgba(214,176,90,.45)}
.fl-cmp .fl-b{left:.38em;top:.34em;width:.56em;height:.56em;background:linear-gradient(135deg,#F8CD5E,#E2A53A);box-shadow:inset 0 0 0 1px rgba(255,236,170,.4)}
.fl-cod{--t:max(1.5px,.09em)}
.fl-l,.fl-r{top:.38em;width:.24em;height:.24em;transform:rotate(45deg)}
.fl-l{left:.12em;border-left:var(--t) solid var(--violet);border-bottom:var(--t) solid var(--violet)}
.fl-r{right:.12em;border-right:var(--t) solid var(--violet);border-top:var(--t) solid var(--violet)}
.fl-s{left:calc(50% - var(--t) / 2);top:.1em;width:var(--t);height:.8em;background:#CBA6F8;border-radius:var(--t);transform:rotate(18deg)}
.fl-owl .fl-a{left:.02em;top:.02em;width:.96em;height:.96em;border-radius:50%;border:1.25px solid var(--green);opacity:.85}
.fl-owl .fl-b{left:.17em;top:.17em;width:.66em;height:.66em;border-radius:50%;border:1.25px solid var(--green)}
.fl-owl .fl-c{left:.31em;top:.31em;width:.38em;height:.38em;border-radius:50%;background:radial-gradient(circle at 38% 34%,#C2F2A2,#5E9F48);box-shadow:0 0 .2em rgba(143,208,108,.5)}
.fl-owm .fl-a,.fl-ows .fl-a{left:.02em;width:.6em;height:.6em;border-radius:50%;opacity:.95}
.fl-owm .fl-b,.fl-ows .fl-b{left:.38em;width:.6em;height:.6em;border-radius:50%;border:1.25px solid}
.fl-owm .fl-a{top:.34em;background:radial-gradient(circle at 35% 32%,#5DB7A0,#2A6A5B)}.fl-owm .fl-b{top:.06em;border-color:var(--teal)}
.fl-ows .fl-a{top:.24em;background:radial-gradient(circle at 35% 32%,#82B6F8,#3A70CF)}.fl-ows .fl-b{top:.14em;border-color:var(--blue)}

.rate-row{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);align-items:center;gap:0.75rem;margin-top:0.75rem}
.rate-row dt{font-size:0.8125rem;color:var(--text-p)}
.rate-row dd{margin:0;display:grid;grid-template-columns:minmax(0,1fr) 2.75rem;align-items:center;gap:0.75rem}
.rate-bar{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:2px;height:0.75rem}
.rate-bar i{background:var(--raise)}
.rate-bar i.on{background:var(--text)}
.rate-row[data-key] .rate-bar i.on{background:var(--accent-ink)}
.rate-row .num{font-size:0.875rem;font-weight:600;text-align:end}
.rate-row[data-key] .num{color:var(--accent-ink)}

.promos-none{display:flex;gap:0.625rem;align-items:flex-start;max-width:70ch;margin:0;padding:1rem;color:var(--text-2)}
.promos-none .ico{flex:none;width:1.125rem;height:1.125rem;margin-top:2px;color:var(--text-3)}

/* Bloc « interroger InferIndex » de l'accueil (maquette B) : texte à gauche (1), terminal à droite (2), l'un sous l'autre quand ils ne tiennent pas */
.use-home{padding-top:1.75rem;display:flex;flex-wrap:wrap;gap:1.75rem;align-items:flex-start}
.use-copy{flex:1 1 20rem;min-width:0;padding-top:0.25rem}
.use-home .term{flex:2 1 32.5rem;min-width:0}
.use-home .section-sub{margin-top:0.75rem;max-width:40ch;font-size:inherit}
/* Papier : le bloc « API · MCP » reste entier sur une feuille, son titre avec lui (le titre restait seul en bas de la feuille d'avant) */
@media print{.use-home{display:block;break-inside:avoid}.use-home h2{break-after:avoid}}
.use-key{margin:1rem 0 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-col)}
.use-links{margin:0.625rem 0 0;display:flex;flex-wrap:wrap;gap:0 1.25rem;font-size:0.84375rem}
.use-links a,.use-key a{display:inline-flex;align-items:center;min-height:2.75rem}
/* Incitation à créer un compte : une ligne de texte secondaire, pas une bannière. Son lien est dans une phrase, donc
   souligné : la couleur seule ne le distinguerait pas du texte */
.acct-nudge{margin-top:1rem;max-width:52ch;font-size:0.875rem;color:var(--text-2)}
.acct-nudge a{text-decoration:underline;white-space:nowrap}
.acct-nudge a:hover{text-decoration-thickness:2px}
/* Bloc « interroger InferIndex » : un terminal à onglets (API, Claude Code, Cursor) */
.term{min-width:0;background:var(--chrome);border:1px solid var(--line-strong);border-radius:var(--r-panel);box-shadow:var(--shadow);overflow:hidden}
/* Papier : le bloc de code de l'API reste entier sur une feuille (un saut le coupait et laissait deux lignes seules sur la suivante) */
@media print{.term{break-inside:avoid}}
.term-bar{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.term-tabs{display:flex;flex:1;min-width:0;gap:0;padding:0;overflow-x:auto;scrollbar-width:none}
.term-tabs::-webkit-scrollbar{display:none}
.term-tabs button{flex:none;height:2.5rem;padding:0 1rem;border:0;border-inline-end:1px solid var(--line);border-radius:0;background:none;color:var(--text-2);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;font-weight:400;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.term-tabs button:hover{color:var(--text)}
.term-tabs button[aria-selected=true]{background:var(--surface);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent-ink)}
.term-copy{flex:none;min-height:2.5rem;padding:0 1rem;border:0;background:none;color:var(--accent-ink);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.term-copy:hover{color:var(--accent-hover)}
.term-panel{padding:0.875rem 1rem 1rem}
.term-h{margin:0 0 0.625rem;font-size:0.875rem;font-weight:600}
.term-panel+.term-panel{border-top:1px solid var(--line-soft)}
@media (scripting:enabled){.term-panel+.term-panel{border-top:0}.term-panel[hidden]{display:none}}
.term .term-line{margin:0}
.term .term-line pre{margin:0;padding:0.25rem 0;white-space:pre;overflow-wrap:normal;overflow-x:auto;font-size:0.8125rem;line-height:1.75;color:var(--text)}
.term-cap{margin:0.875rem 0 0.375rem;font-size:0.78125rem;color:var(--text-3)}
.term-file{margin-top:0.75rem;font-family:var(--mono);font-stretch:var(--mono-stretch)}
.term-json{margin:0;max-height:18.75rem;overflow:auto;white-space:pre;padding:0.25rem 0 0;border:0;background:none;font-size:0.8125rem;line-height:1.75;color:var(--text-3)}
.tk-key{color:var(--text)}.tk-str{color:var(--accent-ink)}.tk-num{color:var(--warn)}.tk-lit,.tk-more{color:var(--text-3)}
pre{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.promo-prices{text-align:end}
.promo-now{display:block;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1.25rem;font-weight:500;color:var(--accent-ink)}
.promo-was{display:block;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;color:var(--text-col)}
.promo-was s{text-decoration-color:var(--text-3);text-decoration-thickness:1px}
.prompt{color:var(--text-3);user-select:none}

@media (pointer:coarse){.term-tabs button,.copy,.board-method,.term-copy{min-height:2.75rem}.term-tabs button{height:2.75rem}}

/* Mouvement de l'accueil : seulement si le lecteur n'a pas demandé moins de mouvement, et jamais sans JS */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
.reveal.d1{--i:1}.reveal.d2{--i:2}.reveal.d3{--i:3}
.board .bar{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:transform 800ms var(--ease-out)}
.board.is-in .bar{transform:none}
.board .row-1 .bar{transition-delay:50ms}.board .row-2 .bar{transition-delay:100ms}.board .row-3 .bar{transition-delay:150ms}
.board .row-4 .bar{transition-delay:200ms}.board .row-5 .bar{transition-delay:250ms}
.promo-list li:nth-child(2){--i:1}.promo-list li:nth-child(3){--i:2}.promo-list li:nth-child(4){--i:3}.promo-list li:nth-child(5){--i:4}.promo-list li:nth-child(6){--i:5}
}

@media (max-width:60em){
.hero-grid{grid-template-columns:minmax(0,1fr)}
.promo-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:32.5em){
/* Sélecteur de modèle du héros : la liste prend la largeur de l'en-tête du graphique, jamais plus large que l'écran */
.hd-head{position:relative}.model-pick{position:static}.model-pick-list{inset-inline:0;width:auto}
.hero-copy{gap:1.75rem}
}
@media (max-width:22.5em){
}

.px-0{left:0%;--dx:0}.py-0{top:0%;--dy:0}.mw-0{--mw:0}.px-1{left:0.5%;--dx:0.5}.py-1{top:0.5%;--dy:0.5}.mw-1{--mw:0.5}.px-2{left:1%;--dx:1}.py-2{top:1%;--dy:1}.mw-2{--mw:1}.px-3{left:1.5%;--dx:1.5}.py-3{top:1.5%;--dy:1.5}.mw-3{--mw:1.5}.px-4{left:2%;--dx:2}.py-4{top:2%;--dy:2}.mw-4{--mw:2}.px-5{left:2.5%;--dx:2.5}.py-5{top:2.5%;--dy:2.5}.mw-5{--mw:2.5}.px-6{left:3%;--dx:3}.py-6{top:3%;--dy:3}.mw-6{--mw:3}.px-7{left:3.5%;--dx:3.5}.py-7{top:3.5%;--dy:3.5}.mw-7{--mw:3.5}.px-8{left:4%;--dx:4}.py-8{top:4%;--dy:4}.mw-8{--mw:4}.px-9{left:4.5%;--dx:4.5}.py-9{top:4.5%;--dy:4.5}.mw-9{--mw:4.5}.px-10{left:5%;--dx:5}.py-10{top:5%;--dy:5}.mw-10{--mw:5}.px-11{left:5.5%;--dx:5.5}.py-11{top:5.5%;--dy:5.5}.mw-11{--mw:5.5}.px-12{left:6%;--dx:6}.py-12{top:6%;--dy:6}.mw-12{--mw:6}.px-13{left:6.5%;--dx:6.5}.py-13{top:6.5%;--dy:6.5}.mw-13{--mw:6.5}.px-14{left:7%;--dx:7}.py-14{top:7%;--dy:7}.mw-14{--mw:7}.px-15{left:7.5%;--dx:7.5}.py-15{top:7.5%;--dy:7.5}.mw-15{--mw:7.5}.px-16{left:8%;--dx:8}.py-16{top:8%;--dy:8}.mw-16{--mw:8}.px-17{left:8.5%;--dx:8.5}.py-17{top:8.5%;--dy:8.5}.mw-17{--mw:8.5}.px-18{left:9%;--dx:9}.py-18{top:9%;--dy:9}.mw-18{--mw:9}.px-19{left:9.5%;--dx:9.5}.py-19{top:9.5%;--dy:9.5}.mw-19{--mw:9.5}.px-20{left:10%;--dx:10}.py-20{top:10%;--dy:10}.mw-20{--mw:10}.px-21{left:10.5%;--dx:10.5}.py-21{top:10.5%;--dy:10.5}.mw-21{--mw:10.5}.px-22{left:11%;--dx:11}.py-22{top:11%;--dy:11}.mw-22{--mw:11}.px-23{left:11.5%;--dx:11.5}.py-23{top:11.5%;--dy:11.5}.mw-23{--mw:11.5}.px-24{left:12%;--dx:12}.py-24{top:12%;--dy:12}.mw-24{--mw:12}.px-25{left:12.5%;--dx:12.5}.py-25{top:12.5%;--dy:12.5}.mw-25{--mw:12.5}.px-26{left:13%;--dx:13}.py-26{top:13%;--dy:13}.mw-26{--mw:13}.px-27{left:13.5%;--dx:13.5}.py-27{top:13.5%;--dy:13.5}.mw-27{--mw:13.5}.px-28{left:14%;--dx:14}.py-28{top:14%;--dy:14}.mw-28{--mw:14}.px-29{left:14.5%;--dx:14.5}.py-29{top:14.5%;--dy:14.5}.mw-29{--mw:14.5}.px-30{left:15%;--dx:15}.py-30{top:15%;--dy:15}.mw-30{--mw:15}.px-31{left:15.5%;--dx:15.5}.py-31{top:15.5%;--dy:15.5}.mw-31{--mw:15.5}.px-32{left:16%;--dx:16}.py-32{top:16%;--dy:16}.mw-32{--mw:16}.px-33{left:16.5%;--dx:16.5}.py-33{top:16.5%;--dy:16.5}.mw-33{--mw:16.5}.px-34{left:17%;--dx:17}.py-34{top:17%;--dy:17}.mw-34{--mw:17}.px-35{left:17.5%;--dx:17.5}.py-35{top:17.5%;--dy:17.5}.mw-35{--mw:17.5}.px-36{left:18%;--dx:18}.py-36{top:18%;--dy:18}.mw-36{--mw:18}.px-37{left:18.5%;--dx:18.5}.py-37{top:18.5%;--dy:18.5}.mw-37{--mw:18.5}.px-38{left:19%;--dx:19}.py-38{top:19%;--dy:19}.mw-38{--mw:19}.px-39{left:19.5%;--dx:19.5}.py-39{top:19.5%;--dy:19.5}.mw-39{--mw:19.5}.px-40{left:20%;--dx:20}.py-40{top:20%;--dy:20}.mw-40{--mw:20}.px-41{left:20.5%;--dx:20.5}.py-41{top:20.5%;--dy:20.5}.mw-41{--mw:20.5}.px-42{left:21%;--dx:21}.py-42{top:21%;--dy:21}.mw-42{--mw:21}.px-43{left:21.5%;--dx:21.5}.py-43{top:21.5%;--dy:21.5}.mw-43{--mw:21.5}.px-44{left:22%;--dx:22}.py-44{top:22%;--dy:22}.mw-44{--mw:22}.px-45{left:22.5%;--dx:22.5}.py-45{top:22.5%;--dy:22.5}.mw-45{--mw:22.5}.px-46{left:23%;--dx:23}.py-46{top:23%;--dy:23}.mw-46{--mw:23}.px-47{left:23.5%;--dx:23.5}.py-47{top:23.5%;--dy:23.5}.mw-47{--mw:23.5}.px-48{left:24%;--dx:24}.py-48{top:24%;--dy:24}.mw-48{--mw:24}.px-49{left:24.5%;--dx:24.5}.py-49{top:24.5%;--dy:24.5}.mw-49{--mw:24.5}.px-50{left:25%;--dx:25}.py-50{top:25%;--dy:25}.mw-50{--mw:25}.px-51{left:25.5%;--dx:25.5}.py-51{top:25.5%;--dy:25.5}.mw-51{--mw:25.5}.px-52{left:26%;--dx:26}.py-52{top:26%;--dy:26}.mw-52{--mw:26}.px-53{left:26.5%;--dx:26.5}.py-53{top:26.5%;--dy:26.5}.mw-53{--mw:26.5}.px-54{left:27%;--dx:27}.py-54{top:27%;--dy:27}.mw-54{--mw:27}.px-55{left:27.5%;--dx:27.5}.py-55{top:27.5%;--dy:27.5}.mw-55{--mw:27.5}.px-56{left:28%;--dx:28}.py-56{top:28%;--dy:28}.mw-56{--mw:28}.px-57{left:28.5%;--dx:28.5}.py-57{top:28.5%;--dy:28.5}.mw-57{--mw:28.5}.px-58{left:29%;--dx:29}.py-58{top:29%;--dy:29}.mw-58{--mw:29}.px-59{left:29.5%;--dx:29.5}.py-59{top:29.5%;--dy:29.5}.mw-59{--mw:29.5}.px-60{left:30%;--dx:30}.py-60{top:30%;--dy:30}.mw-60{--mw:30}.px-61{left:30.5%;--dx:30.5}.py-61{top:30.5%;--dy:30.5}.mw-61{--mw:30.5}.px-62{left:31%;--dx:31}.py-62{top:31%;--dy:31}.mw-62{--mw:31}.px-63{left:31.5%;--dx:31.5}.py-63{top:31.5%;--dy:31.5}.mw-63{--mw:31.5}.px-64{left:32%;--dx:32}.py-64{top:32%;--dy:32}.mw-64{--mw:32}.px-65{left:32.5%;--dx:32.5}.py-65{top:32.5%;--dy:32.5}.mw-65{--mw:32.5}.px-66{left:33%;--dx:33}.py-66{top:33%;--dy:33}.mw-66{--mw:33}.px-67{left:33.5%;--dx:33.5}.py-67{top:33.5%;--dy:33.5}.mw-67{--mw:33.5}.px-68{left:34%;--dx:34}.py-68{top:34%;--dy:34}.mw-68{--mw:34}.px-69{left:34.5%;--dx:34.5}.py-69{top:34.5%;--dy:34.5}.mw-69{--mw:34.5}.px-70{left:35%;--dx:35}.py-70{top:35%;--dy:35}.mw-70{--mw:35}.px-71{left:35.5%;--dx:35.5}.py-71{top:35.5%;--dy:35.5}.mw-71{--mw:35.5}.px-72{left:36%;--dx:36}.py-72{top:36%;--dy:36}.mw-72{--mw:36}.px-73{left:36.5%;--dx:36.5}.py-73{top:36.5%;--dy:36.5}.mw-73{--mw:36.5}.px-74{left:37%;--dx:37}.py-74{top:37%;--dy:37}.mw-74{--mw:37}.px-75{left:37.5%;--dx:37.5}.py-75{top:37.5%;--dy:37.5}.mw-75{--mw:37.5}.px-76{left:38%;--dx:38}.py-76{top:38%;--dy:38}.mw-76{--mw:38}.px-77{left:38.5%;--dx:38.5}.py-77{top:38.5%;--dy:38.5}.mw-77{--mw:38.5}.px-78{left:39%;--dx:39}.py-78{top:39%;--dy:39}.mw-78{--mw:39}.px-79{left:39.5%;--dx:39.5}.py-79{top:39.5%;--dy:39.5}.mw-79{--mw:39.5}.px-80{left:40%;--dx:40}.py-80{top:40%;--dy:40}.mw-80{--mw:40}.px-81{left:40.5%;--dx:40.5}.py-81{top:40.5%;--dy:40.5}.mw-81{--mw:40.5}.px-82{left:41%;--dx:41}.py-82{top:41%;--dy:41}.mw-82{--mw:41}.px-83{left:41.5%;--dx:41.5}.py-83{top:41.5%;--dy:41.5}.mw-83{--mw:41.5}.px-84{left:42%;--dx:42}.py-84{top:42%;--dy:42}.mw-84{--mw:42}.px-85{left:42.5%;--dx:42.5}.py-85{top:42.5%;--dy:42.5}.mw-85{--mw:42.5}.px-86{left:43%;--dx:43}.py-86{top:43%;--dy:43}.mw-86{--mw:43}.px-87{left:43.5%;--dx:43.5}.py-87{top:43.5%;--dy:43.5}.mw-87{--mw:43.5}.px-88{left:44%;--dx:44}.py-88{top:44%;--dy:44}.mw-88{--mw:44}.px-89{left:44.5%;--dx:44.5}.py-89{top:44.5%;--dy:44.5}.mw-89{--mw:44.5}.px-90{left:45%;--dx:45}.py-90{top:45%;--dy:45}.mw-90{--mw:45}.px-91{left:45.5%;--dx:45.5}.py-91{top:45.5%;--dy:45.5}.mw-91{--mw:45.5}.px-92{left:46%;--dx:46}.py-92{top:46%;--dy:46}.mw-92{--mw:46}.px-93{left:46.5%;--dx:46.5}.py-93{top:46.5%;--dy:46.5}.mw-93{--mw:46.5}.px-94{left:47%;--dx:47}.py-94{top:47%;--dy:47}.mw-94{--mw:47}.px-95{left:47.5%;--dx:47.5}.py-95{top:47.5%;--dy:47.5}.mw-95{--mw:47.5}.px-96{left:48%;--dx:48}.py-96{top:48%;--dy:48}.mw-96{--mw:48}.px-97{left:48.5%;--dx:48.5}.py-97{top:48.5%;--dy:48.5}.mw-97{--mw:48.5}.px-98{left:49%;--dx:49}.py-98{top:49%;--dy:49}.mw-98{--mw:49}.px-99{left:49.5%;--dx:49.5}.py-99{top:49.5%;--dy:49.5}.mw-99{--mw:49.5}.px-100{left:50%;--dx:50}.py-100{top:50%;--dy:50}.mw-100{--mw:50}.px-101{left:50.5%;--dx:50.5}.py-101{top:50.5%;--dy:50.5}.mw-101{--mw:50.5}.px-102{left:51%;--dx:51}.py-102{top:51%;--dy:51}.mw-102{--mw:51}.px-103{left:51.5%;--dx:51.5}.py-103{top:51.5%;--dy:51.5}.mw-103{--mw:51.5}.px-104{left:52%;--dx:52}.py-104{top:52%;--dy:52}.mw-104{--mw:52}.px-105{left:52.5%;--dx:52.5}.py-105{top:52.5%;--dy:52.5}.mw-105{--mw:52.5}.px-106{left:53%;--dx:53}.py-106{top:53%;--dy:53}.mw-106{--mw:53}.px-107{left:53.5%;--dx:53.5}.py-107{top:53.5%;--dy:53.5}.mw-107{--mw:53.5}.px-108{left:54%;--dx:54}.py-108{top:54%;--dy:54}.mw-108{--mw:54}.px-109{left:54.5%;--dx:54.5}.py-109{top:54.5%;--dy:54.5}.mw-109{--mw:54.5}.px-110{left:55%;--dx:55}.py-110{top:55%;--dy:55}.mw-110{--mw:55}.px-111{left:55.5%;--dx:55.5}.py-111{top:55.5%;--dy:55.5}.mw-111{--mw:55.5}.px-112{left:56%;--dx:56}.py-112{top:56%;--dy:56}.mw-112{--mw:56}.px-113{left:56.5%;--dx:56.5}.py-113{top:56.5%;--dy:56.5}.mw-113{--mw:56.5}.px-114{left:57%;--dx:57}.py-114{top:57%;--dy:57}.mw-114{--mw:57}.px-115{left:57.5%;--dx:57.5}.py-115{top:57.5%;--dy:57.5}.mw-115{--mw:57.5}.px-116{left:58%;--dx:58}.py-116{top:58%;--dy:58}.mw-116{--mw:58}.px-117{left:58.5%;--dx:58.5}.py-117{top:58.5%;--dy:58.5}.mw-117{--mw:58.5}.px-118{left:59%;--dx:59}.py-118{top:59%;--dy:59}.mw-118{--mw:59}.px-119{left:59.5%;--dx:59.5}.py-119{top:59.5%;--dy:59.5}.mw-119{--mw:59.5}.px-120{left:60%;--dx:60}.py-120{top:60%;--dy:60}.mw-120{--mw:60}.px-121{left:60.5%;--dx:60.5}.py-121{top:60.5%;--dy:60.5}.mw-121{--mw:60.5}.px-122{left:61%;--dx:61}.py-122{top:61%;--dy:61}.mw-122{--mw:61}.px-123{left:61.5%;--dx:61.5}.py-123{top:61.5%;--dy:61.5}.mw-123{--mw:61.5}.px-124{left:62%;--dx:62}.py-124{top:62%;--dy:62}.mw-124{--mw:62}.px-125{left:62.5%;--dx:62.5}.py-125{top:62.5%;--dy:62.5}.mw-125{--mw:62.5}.px-126{left:63%;--dx:63}.py-126{top:63%;--dy:63}.mw-126{--mw:63}.px-127{left:63.5%;--dx:63.5}.py-127{top:63.5%;--dy:63.5}.mw-127{--mw:63.5}.px-128{left:64%;--dx:64}.py-128{top:64%;--dy:64}.mw-128{--mw:64}.px-129{left:64.5%;--dx:64.5}.py-129{top:64.5%;--dy:64.5}.mw-129{--mw:64.5}.px-130{left:65%;--dx:65}.py-130{top:65%;--dy:65}.mw-130{--mw:65}.px-131{left:65.5%;--dx:65.5}.py-131{top:65.5%;--dy:65.5}.mw-131{--mw:65.5}.px-132{left:66%;--dx:66}.py-132{top:66%;--dy:66}.mw-132{--mw:66}.px-133{left:66.5%;--dx:66.5}.py-133{top:66.5%;--dy:66.5}.mw-133{--mw:66.5}.px-134{left:67%;--dx:67}.py-134{top:67%;--dy:67}.mw-134{--mw:67}.px-135{left:67.5%;--dx:67.5}.py-135{top:67.5%;--dy:67.5}.mw-135{--mw:67.5}.px-136{left:68%;--dx:68}.py-136{top:68%;--dy:68}.mw-136{--mw:68}.px-137{left:68.5%;--dx:68.5}.py-137{top:68.5%;--dy:68.5}.mw-137{--mw:68.5}.px-138{left:69%;--dx:69}.py-138{top:69%;--dy:69}.mw-138{--mw:69}.px-139{left:69.5%;--dx:69.5}.py-139{top:69.5%;--dy:69.5}.mw-139{--mw:69.5}.px-140{left:70%;--dx:70}.py-140{top:70%;--dy:70}.mw-140{--mw:70}.px-141{left:70.5%;--dx:70.5}.py-141{top:70.5%;--dy:70.5}.mw-141{--mw:70.5}.px-142{left:71%;--dx:71}.py-142{top:71%;--dy:71}.mw-142{--mw:71}.px-143{left:71.5%;--dx:71.5}.py-143{top:71.5%;--dy:71.5}.mw-143{--mw:71.5}.px-144{left:72%;--dx:72}.py-144{top:72%;--dy:72}.mw-144{--mw:72}.px-145{left:72.5%;--dx:72.5}.py-145{top:72.5%;--dy:72.5}.mw-145{--mw:72.5}.px-146{left:73%;--dx:73}.py-146{top:73%;--dy:73}.mw-146{--mw:73}.px-147{left:73.5%;--dx:73.5}.py-147{top:73.5%;--dy:73.5}.mw-147{--mw:73.5}.px-148{left:74%;--dx:74}.py-148{top:74%;--dy:74}.mw-148{--mw:74}.px-149{left:74.5%;--dx:74.5}.py-149{top:74.5%;--dy:74.5}.mw-149{--mw:74.5}.px-150{left:75%;--dx:75}.py-150{top:75%;--dy:75}.mw-150{--mw:75}.px-151{left:75.5%;--dx:75.5}.py-151{top:75.5%;--dy:75.5}.mw-151{--mw:75.5}.px-152{left:76%;--dx:76}.py-152{top:76%;--dy:76}.mw-152{--mw:76}.px-153{left:76.5%;--dx:76.5}.py-153{top:76.5%;--dy:76.5}.mw-153{--mw:76.5}.px-154{left:77%;--dx:77}.py-154{top:77%;--dy:77}.mw-154{--mw:77}.px-155{left:77.5%;--dx:77.5}.py-155{top:77.5%;--dy:77.5}.mw-155{--mw:77.5}.px-156{left:78%;--dx:78}.py-156{top:78%;--dy:78}.mw-156{--mw:78}.px-157{left:78.5%;--dx:78.5}.py-157{top:78.5%;--dy:78.5}.mw-157{--mw:78.5}.px-158{left:79%;--dx:79}.py-158{top:79%;--dy:79}.mw-158{--mw:79}.px-159{left:79.5%;--dx:79.5}.py-159{top:79.5%;--dy:79.5}.mw-159{--mw:79.5}.px-160{left:80%;--dx:80}.py-160{top:80%;--dy:80}.mw-160{--mw:80}.px-161{left:80.5%;--dx:80.5}.py-161{top:80.5%;--dy:80.5}.mw-161{--mw:80.5}.px-162{left:81%;--dx:81}.py-162{top:81%;--dy:81}.mw-162{--mw:81}.px-163{left:81.5%;--dx:81.5}.py-163{top:81.5%;--dy:81.5}.mw-163{--mw:81.5}.px-164{left:82%;--dx:82}.py-164{top:82%;--dy:82}.mw-164{--mw:82}.px-165{left:82.5%;--dx:82.5}.py-165{top:82.5%;--dy:82.5}.mw-165{--mw:82.5}.px-166{left:83%;--dx:83}.py-166{top:83%;--dy:83}.mw-166{--mw:83}.px-167{left:83.5%;--dx:83.5}.py-167{top:83.5%;--dy:83.5}.mw-167{--mw:83.5}.px-168{left:84%;--dx:84}.py-168{top:84%;--dy:84}.mw-168{--mw:84}.px-169{left:84.5%;--dx:84.5}.py-169{top:84.5%;--dy:84.5}.mw-169{--mw:84.5}.px-170{left:85%;--dx:85}.py-170{top:85%;--dy:85}.mw-170{--mw:85}.px-171{left:85.5%;--dx:85.5}.py-171{top:85.5%;--dy:85.5}.mw-171{--mw:85.5}.px-172{left:86%;--dx:86}.py-172{top:86%;--dy:86}.mw-172{--mw:86}.px-173{left:86.5%;--dx:86.5}.py-173{top:86.5%;--dy:86.5}.mw-173{--mw:86.5}.px-174{left:87%;--dx:87}.py-174{top:87%;--dy:87}.mw-174{--mw:87}.px-175{left:87.5%;--dx:87.5}.py-175{top:87.5%;--dy:87.5}.mw-175{--mw:87.5}.px-176{left:88%;--dx:88}.py-176{top:88%;--dy:88}.mw-176{--mw:88}.px-177{left:88.5%;--dx:88.5}.py-177{top:88.5%;--dy:88.5}.mw-177{--mw:88.5}.px-178{left:89%;--dx:89}.py-178{top:89%;--dy:89}.mw-178{--mw:89}.px-179{left:89.5%;--dx:89.5}.py-179{top:89.5%;--dy:89.5}.mw-179{--mw:89.5}.px-180{left:90%;--dx:90}.py-180{top:90%;--dy:90}.mw-180{--mw:90}.px-181{left:90.5%;--dx:90.5}.py-181{top:90.5%;--dy:90.5}.mw-181{--mw:90.5}.px-182{left:91%;--dx:91}.py-182{top:91%;--dy:91}.mw-182{--mw:91}.px-183{left:91.5%;--dx:91.5}.py-183{top:91.5%;--dy:91.5}.mw-183{--mw:91.5}.px-184{left:92%;--dx:92}.py-184{top:92%;--dy:92}.mw-184{--mw:92}.px-185{left:92.5%;--dx:92.5}.py-185{top:92.5%;--dy:92.5}.mw-185{--mw:92.5}.px-186{left:93%;--dx:93}.py-186{top:93%;--dy:93}.mw-186{--mw:93}.px-187{left:93.5%;--dx:93.5}.py-187{top:93.5%;--dy:93.5}.mw-187{--mw:93.5}.px-188{left:94%;--dx:94}.py-188{top:94%;--dy:94}.mw-188{--mw:94}.px-189{left:94.5%;--dx:94.5}.py-189{top:94.5%;--dy:94.5}.mw-189{--mw:94.5}.px-190{left:95%;--dx:95}.py-190{top:95%;--dy:95}.mw-190{--mw:95}.px-191{left:95.5%;--dx:95.5}.py-191{top:95.5%;--dy:95.5}.mw-191{--mw:95.5}.px-192{left:96%;--dx:96}.py-192{top:96%;--dy:96}.mw-192{--mw:96}.px-193{left:96.5%;--dx:96.5}.py-193{top:96.5%;--dy:96.5}.mw-193{--mw:96.5}.px-194{left:97%;--dx:97}.py-194{top:97%;--dy:97}.mw-194{--mw:97}.px-195{left:97.5%;--dx:97.5}.py-195{top:97.5%;--dy:97.5}.mw-195{--mw:97.5}.px-196{left:98%;--dx:98}.py-196{top:98%;--dy:98}.mw-196{--mw:98}.px-197{left:98.5%;--dx:98.5}.py-197{top:98.5%;--dy:98.5}.mw-197{--mw:98.5}.px-198{left:99%;--dx:99}.py-198{top:99%;--dy:99}.mw-198{--mw:99}.px-199{left:99.5%;--dx:99.5}.py-199{top:99.5%;--dy:99.5}.mw-199{--mw:99.5}.px-200{left:100%;--dx:100}.py-200{top:100%;--dy:100}.mw-200{--mw:100}
/* Page modèle : en-tête, bandeau de chiffres, cartes du moins cher, historique, offres triables, estimateur */
@media (scripting:none){.js-only{display:none!important}}
@media (scripting:enabled){.no-js{display:none!important}}
/* Papier : l'en-tête d'un tableau se répète en haut de chaque feuille, et le navigateur n'y redessine pas le texte d'un
   bouton (il ne restait que les flèches de tri). Le libellé simple, écrit à côté du bouton pour le site sans script,
   prend sa place */
@media print{thead button.sort{display:none!important}thead button.sort+.no-js{display:inline!important}}
/* En-tête de la page modèle (maquette B) : tuile 40 px, titre et pastilles à gauche ; à droite le prix le plus bas, sa variation sur 7 jours et sa légende */
/* Tête de la page modèle : à gauche le titre puis les chiffres du marché, à droite UN objet, la carte de l'offre la moins chère ; les deux colonnes finissent à la même ligne.
   Sous 901 px une colonne, dans l'ordre titre, carte, chiffres (la réponse avant le marché) */
.head{margin-top:1rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(21.25rem,28.75rem);gap:1rem 1.5rem;align-items:stretch}
.head-left{display:flex;flex-direction:column;justify-content:space-between;gap:1rem;min-width:0}
.head-pick{display:flex;flex-direction:column;gap:0.625rem;min-width:0}.head-pick>.panel{flex:1;min-width:0;margin:0}
/* Chiffres du marché dans la colonne de gauche : tous sur une rangée, ou deux par deux quand la largeur manque ; jamais trois et un */
.head-left .stats{margin:0;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
@media (max-width:73.75em){.head-left .stats{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:56.25em){.head{grid-template-columns:minmax(0,1fr)}.head-left{display:contents}.head-pick{order:1}.head-left .stats{order:2;grid-template-columns:none;grid-auto-flow:column}}
@media (max-width:38.75em){.head-left .stats{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}}
.head-id{display:flex;align-items:center;gap:1rem;min-width:0}
.head-tile .logo,.head-tile .lab-badge{width:2.5rem;height:2.5rem;flex:none}
.head-main{min-width:0}
/* Retrait annoncé du modèle : sur la ligne du titre, à droite du nom ; sur un téléphone, juste sous le nom */
.head-title{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem 0.875rem}.head-title h1{margin:0}
.chip-out{display:inline-flex;align-items:center;gap:0.25rem;white-space:nowrap;text-decoration:none}.chip-out .ico{width:0.6875rem;height:0.6875rem;flex:none}.chip-out:hover{text-decoration:underline}
.rel-next{margin:0 0 0.75rem;display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0.625rem}.rel-next .ico{width:0.8125rem;height:0.8125rem;flex:none}
@media print{.chip-out .ico{display:none}}
.head h1{font-size:clamp(1.75rem,3.4vw,2.5rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;overflow-wrap:anywhere}
.head .chips{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:0.625rem;max-width:100%}
.head .chip{height:1.625rem;padding:0 0.625rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);border-color:var(--line-strong)}
/* Identifiant très long : la pastille passe à la ligne au lieu de dépasser (320 px, noms de 36 caractères et plus) */
.head .chip.mono{max-width:100%;height:auto;min-height:1.625rem;padding:0.25rem 0.625rem;line-height:1.3;white-space:normal;overflow-wrap:anywhere;text-transform:none}
.head a.chip:hover{border-color:var(--accent-ink);color:var(--text);text-decoration:none}
.head .copy-id{position:relative;flex:none;white-space:nowrap;overflow-wrap:normal;margin-inline-start:0.5rem;padding:0;border:0;background:none;color:var(--accent-ink);font:inherit;letter-spacing:inherit;text-transform:uppercase;cursor:pointer}
.head .copy-id::after{content:"";position:absolute;inset:-0.5625rem -0.375rem}
.head .chip-link{color:var(--accent-ink)}
/* Phrase de fraîcheur : longue, elle passe à la ligne (sinon la page déborde à 320 et 375 px) */
.head .chip.updated{margin:0;height:auto;min-height:1.625rem;padding:0.25rem 0.625rem;line-height:1.3;white-space:normal;text-transform:none;gap:0.4375rem}
.live-dot{flex:none;width:0.375rem;height:0.375rem;background:var(--accent-ink)}
.hp-week{display:inline-flex;align-items:center;gap:0.375rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.8125rem;color:var(--text-2)}
.hp-week.down{color:var(--accent-ink)}.hp-week.up{color:var(--warn)}.hp-week .ico{font-size:.8em}
.hp-7d{color:var(--text-col);font-size:0.6875rem}
.hp-word{font-size:0.78125rem;color:var(--text-3)}
.updated{display:flex;align-items:center;gap:0.375rem;font-size:0.8125rem;color:var(--text-3);margin-inline-start:auto}
/* Phrase de réponse (src/site/pages.ts, modelAnswer) : du texte courant sous le titre, en texte plein (la réponse, pas une légende), sans cadre ;
   mesure limitée pour rester lisible d'un trait */
.ix-lead,.cmp-lead{margin:0.875rem 0 0;max-width:70ch;font-size:clamp(0.96875rem,1.4vw,1.0625rem);line-height:1.55;color:var(--text);text-wrap:pretty}
.model-answer{margin:1rem 0 0;max-width:80ch;font-size:0.90625rem;line-height:1.55;color:var(--text-2);text-wrap:pretty}
/* Une seule règle pour les trois phrases de réponse (page modèle, page de l'indice, comparaison de deux modèles) : texte
   courant, en texte plein, sans cadre, ni gras ni couleur ; les dates ne se coupent pas */
.model-answer time,.ix-lead time,.cmp-lead time{white-space:nowrap}
/* Bandeau de chiffres (maquette B) : cellules de 150 px au moins, filets de 1 px, étiquette mono 10 px, valeur mono 22 px */
.stats{margin:1.25rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(9.375rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stats div{padding:0.875rem 1rem;background:var(--bg)}
.stats dt{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.stats dd{margin:0.375rem 0 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1.375rem;font-weight:500;letter-spacing:-.02em}
/* Deux colonnes (maquette B) : profondeur des offres à gauche (2), les deux meilleures offres à droite (1), l'une sous l'autre quand elles ne tiennent pas */
.model-cols{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:1.25rem;align-items:stretch}
.depth-panel{flex:2 1 35rem;min-width:0;display:flex;flex-direction:column}
.depth-box{flex:1;padding:0.5rem 1rem 0.75rem}
.depth-box .depth-wrap{min-height:14.75rem}@media (max-width:40em){.depth-box .depth-wrap{min-height:16.625rem}}
.depth-mx{display:flex;flex-direction:column;height:100%}.depth-mx .depth-wrap{flex:1 1 auto;height:auto}.depth-mx .dp-others{flex:none}
/* Note sous le graphique de la page modèle : ce qu'il trace (les offres comparables), pour que l'écart avec le compteur
   d'offres du bandeau et le tableau dessous ne surprenne pas */
.depth-note{margin:0;padding:0 1rem 0.75rem;font-size:0.78125rem;line-height:1.45;color:var(--text-col);text-wrap:pretty}
.dp-legend{display:flex;flex-wrap:wrap;gap:0.25rem 1rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.04em;color:var(--text-col)}
.dp-legend span::before{content:"";display:inline-block;width:1rem;margin-inline-end:0.375rem;vertical-align:middle}
.lg-line::before{border-top:1.75px solid var(--accent-ink)}.lg-list::before{border-top:1px dashed var(--text-col)}.lg-dash::before{border-top:1.5px dashed var(--text-3)}
.picks{flex:1 1 21.25rem;min-width:0;display:flex;flex-direction:column;gap:0.75rem}
/* Sur un écran étroit les deux colonnes s'empilent : les cartes (vendeur, prix, bouton) passent AVANT le graphique */
@media (max-width:56.25em){.picks{order:-1}}
.pick{padding:0.75rem 0.875rem}
.picks>.pick:only-child{flex:1;display:flex;flex-direction:column}
.picks>.pick:only-child .offer-row{margin-top:auto;padding-top:0.625rem}
/* Meilleure offre du moment (maquette B) : bordure lime, fond relevé ; étiquette et heure en tête, fournisseur et prix sur une ligne, trois cases, pastilles, bouton */
.pick.main{border-color:var(--accent-ink);background:var(--surface)}
.pick-top{display:flex;justify-content:space-between;gap:0.75rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.06em;text-transform:uppercase}
.pick-top .label{margin:0;flex:1 1 auto;min-width:0;font:inherit;letter-spacing:inherit;font-weight:600;color:var(--text)}
@media (min-width:35.0625em){.pick-top .label{white-space:nowrap}}
.pick.main .pick-top .label{color:var(--accent-ink)}
.pick-top time{color:var(--text-col);white-space:nowrap}
.pick-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:0.75rem;margin-top:0.5rem}
.pick-who{display:flex;align-items:center;gap:0.625rem;min-width:0}
.pick-who .logo,.pick-who .lab-badge{flex:none;width:1.625rem;height:1.625rem}
.pick-who h2{margin:0;font-size:1.125rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
/* La ligne de précisions porte le chemin « via » de l'offre : un nom de passerelle long revient à la ligne dans la carte (sur une
   ligne insécable, 35 lettres élargissaient la carte et faisaient défiler la page modèle de côté à 320 px) */
.pick-who>div{min-width:0}
/* Nom du vendeur (relevés d'Amara du 17/10, ordre de Chloé) : 1. jamais de défilement de côté ; 2. un nom passe à la ligne entier, entre
   ses mots ; 3. en dernier recours, un mot plus large que toute la ligne se coupe (break-word, jamais anywhere). Le bloc du nom garde
   la largeur estimée de son plus long mot (pw-N : N lettres, posé par le serveur), sans jamais dépasser la carte (min(…, 100 %)) ;
   s'il ne reste pas la place, le prix passe sous le nom */
.pick-who{flex:1 1 0;min-width:min(var(--pw,0px),100%)}.pick-pr{margin-inline-start:auto}
.pick-who h2{min-width:0;overflow-wrap:break-word}
/* Le lien du nom (prov-ref, inline-flex ailleurs) : en inline-flex, son texte ne descend jamais sous la largeur du mot et break-word ne
   coupe rien ; en inline-block borné à la carte, il garde sa hauteur de cible tactile et le mot géant se coupe au bord */
.pick-who h2 .prov-ref{display:inline-block;max-width:100%}
.pick-who.pw-1{--pw:3rem}.pick-who.pw-2{--pw:3.6875rem}.pick-who.pw-3{--pw:4.4375rem}.pick-who.pw-4{--pw:5.125rem}.pick-who.pw-5{--pw:5.875rem}.pick-who.pw-6{--pw:6.5625rem}.pick-who.pw-7{--pw:7.3125rem}.pick-who.pw-8{--pw:8rem}.pick-who.pw-9{--pw:8.75rem}.pick-who.pw-10{--pw:9.4375rem}.pick-who.pw-11{--pw:10.1875rem}.pick-who.pw-12{--pw:10.875rem}.pick-who.pw-13{--pw:11.625rem}.pick-who.pw-14{--pw:12.3125rem}.pick-who.pw-15{--pw:13.0625rem}.pick-who.pw-16{--pw:13.75rem}.pick-who.pw-17{--pw:14.5rem}.pick-who.pw-18{--pw:15.1875rem}.pick-who.pw-19{--pw:15.9375rem}.pick-who.pw-20{--pw:16.625rem}.pick-who.pw-21{--pw:17.375rem}.pick-who.pw-22{--pw:18.0625rem}.pick-who.pw-23{--pw:18.8125rem}.pick-who.pw-24{--pw:19.5rem}.pick-who.pw-25{--pw:20.25rem}.pick-who.pw-26{--pw:20.9375rem}.pick-who.pw-27{--pw:21.6875rem}.pick-who.pw-28{--pw:22.375rem}.pick-who.pw-29{--pw:23.125rem}.pick-who.pw-30{--pw:23.8125rem}.pick-who.pw-31{--pw:24.5625rem}.pick-who.pw-32{--pw:25.25rem}.pick-who.pw-33{--pw:26rem}.pick-who.pw-34{--pw:26.6875rem}.pick-who.pw-35{--pw:27.4375rem}.pick-who.pw-36{--pw:28.125rem}.pick-who.pw-37{--pw:28.875rem}.pick-who.pw-38{--pw:29.5625rem}.pick-who.pw-39{--pw:30.3125rem}.pick-who.pw-40{--pw:31rem}
.pick-meta{margin:2px 0 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;text-transform:uppercase;color:var(--text-2);overflow-wrap:anywhere}
.pick-pr{text-align:end}
.pick-pr .hp-week{justify-content:flex-end;margin-top:0.375rem;white-space:nowrap}
.pick-price[data-tip]{cursor:help}
.pick-name{display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0.5rem;min-width:0}.pick-marks{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0.5rem;min-width:0;max-width:100%}.pick-cond{display:inline-flex;align-items:center}
/* Un nom de passerelle long se coupe dans la colonne du vendeur : jamais sous le prix */
.pick-marks .sm-marks{flex:0 1 auto;min-width:0;gap:0.5rem;white-space:normal}.pick-marks .sm-mark{flex:0 1 auto;min-width:0}.pick-marks .sm-name{white-space:normal;overflow-wrap:anywhere}
/* Papier : le chemin est déjà écrit à côté du bouton (« via X »), le repère ne le redit pas ; « pas d'entraînement » s'écrit en deux mots (chip-paper), sans la phrase
   de politique ; le bouton qui descend au tableau des offres ne sert à rien sur une feuille */
@media print{.pick-marks .sm-marks,.offer-btn.ghost{display:none}}
/* Aucune offre désignée : le libellé tient la place du prix, puis le bouton vers le tableau des offres */
.head-pick>.pick:not(.main){display:flex;flex-direction:column;justify-content:center;border-style:dashed}.head-pick .pick-sub{margin:0.625rem 0 0;font-size:1.25rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--text)}.head-pick .pick-sub[data-tip]{cursor:help}
.pick-after{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.5rem 1rem}.pick-after .offer-btn{flex:1 1 13.75rem;justify-content:space-between;min-height:2.375rem;padding:0 0.75rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.71875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.offer-btn.ghost{border-color:var(--accent-ink);background:transparent;color:var(--accent-ink)}.offer-btn.ghost:hover{border-color:var(--accent-hover);color:var(--accent-hover)}
.pick-price{margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-weight:500;font-size:1.625rem;line-height:1;letter-spacing:-.03em}
.pick.main .pick-price{color:var(--accent-ink)}
.pick-bl{margin:3px 0 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.04em;color:var(--text-col);white-space:nowrap}
.pick-grid{margin:0.625rem 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);font-family:var(--mono);font-stretch:var(--mono-stretch)}
/* Trois cases identiques dans les deux cartes : libellé au-dessus, chiffre dessous, jamais côte à côte (un libellé long passait
   à la ligne et faisait tomber son chiffre sous les autres) */
.pick-grid div{display:flex;flex-direction:column;gap:3px;min-width:0;padding:0.4375rem 0.625rem;background:var(--surface)}
.pick-grid dt{font-size:0.59375rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col);white-space:nowrap}
.pick-grid dd{margin:0;font-size:0.84375rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.pick-signals{margin:0.625rem 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem 0.625rem}
.pick-signals .cond{font-size:0.75rem}
/* Sous le tableau des offres : un seul lien vers la page Méthode, où vivent les explications */
.offers-method{margin:0.75rem 0 0;padding:0 1rem;font-size:0.8125rem;text-align:end}.offers-method a{display:inline-flex;align-items:center;gap:0.375rem;min-height:2rem;color:var(--text-2)}.offers-method a:hover{color:var(--accent-ink)}
@media print{.offers-method{display:none}}
/* Papier : une bulle n'existe pas. S'y écrivent le libellé long d'une pastille et la donnée d'une bulle (la liste des autres
   offres, la politique d'entraînement) ; jamais la phrase d'explication, qui reste lue à l'écran et se trouve sur la page Méthode */
.chip-paper{display:none}
@media print{.chip-paper{display:inline;font-weight:400}.dp-others.sr{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}.pick-signals .cond .sr{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}.pick-signals .cond [aria-hidden]{display:none}}
/* Pastilles courtes (deux mots au plus) des cartes de la page modèle, de la carte de tête et de l'en-tête (29/10) : la forme courte à l'écran,
   la phrase entière en bulle et lue ; sur le papier, où une bulle n'existe pas, la phrase entière à la place du mot court */
@media print{:is(.card-foot,.card .offer-row,.pick-signals,.head .chips) [aria-hidden="true"]:has(+.sr-paper){display:none}:is(.card-foot,.card .offer-row,.pick-signals,.head .chips) .sr-paper{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}}
.pick-note{margin:0.5rem 0 0;display:flex;gap:0.5rem;align-items:flex-start;font-size:0.8125rem;color:var(--text-2)}
.pick-note .ico{flex:none;margin-top:2px;color:var(--accent-ink)}
.pick .offer-row{display:flex;align-items:center;gap:0.375rem 0.75rem;flex-wrap:wrap;margin-top:0.625rem}
.pick .offer-btn{display:flex;flex:1 1 55%;min-width:0;justify-content:space-between;min-height:2.375rem;padding:0 0.75rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.71875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
@media (pointer:coarse){.pick .offer-btn{min-height:2.75rem}}
.pick-signals .chip{max-width:100%;height:auto;min-height:1.5rem;padding-block:3px;line-height:1.3;white-space:normal}
.signal-list .chip{max-width:100%;height:auto;min-height:1.5rem;padding-block:3px;line-height:1.3;white-space:normal}
.pick:not(.main) .offer-btn{border-color:var(--line-strong);font-weight:500}
.pick.main .offer-btn{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.pick.main .offer-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.pick .offer-row>:not(.offer-btn){display:block;margin-top:0;font-size:0.75rem;color:var(--text-col)}
.pick .offer-row>.offer-none{display:flex;flex:1 1 100%;align-items:center;justify-content:center;min-height:2.375rem;border:1px dashed var(--line-strong);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
/* « chez X » / « via X » à côté du bouton : lu, plus affiché (le vendeur est déjà le titre de la carte) */
.pick .offer-row>.offer-via,.offer-note{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* … et sur le papier ces mentions s'écrivent (règle posée APRÈS celle qui les masque : à spécificité égale, la dernière gagne) */
@media print{.pick .offer-row>.offer-via,.offer-note{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}}
.pick-foot{margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid var(--line-soft);font-size:0.8125rem;color:var(--text-2);display:flex;gap:0.375rem 0.875rem;align-items:center;flex-wrap:wrap}
.pick-foot .ico{color:var(--accent-ink)}
.pick-foot .ico+span{flex:1 1 0;min-width:14ch}

.history{margin-top:var(--gap-section)}
.history-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem}
.history h2,.offers h2,.estimator h2{font-size:clamp(1.375rem,2.4vw,1.75rem);letter-spacing:-.03em}
.seg button{border:0;background:none;padding:0.375rem 0.6875rem;border-radius:var(--r-ctl);font-size:0.8125rem;font-weight:500;color:var(--text-2);cursor:pointer;transition:color var(--t-ui) ease,background-color var(--t-ui) ease,box-shadow var(--t-ui) ease}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.25)}
/* Plages de l'historique (maquette B) : pastilles de 26 px à bordure, la plage active en plein lime ; sans données, estompées */
/* Historique en un seul cadre (maquette B) : titre mono et phrase sur une ligne, plages à droite en un groupe bordé, graphique puis légende dessous */
.history{padding:1rem 1rem 0.75rem;border:1px solid var(--line);background:var(--bg)}
.history .history-head{align-items:center}
.history .history-head>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0.75rem;min-width:0}
.history h2{margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.history .section-sub{margin:0;max-width:none;font-size:0.78125rem;color:var(--text-col)}
.history .chart{margin-top:1rem;padding:0;border:0;background:none}
.history .legend{margin:0.5rem 0 0}
.history-head .seg{padding:0;gap:0;background:none;border:1px solid var(--line-strong)}
.history-head .seg button{height:1.625rem;min-width:2.5rem;padding:0 0.625rem;border:0;border-inline-start:1px solid var(--line);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text)}
.history-head .seg button:first-child{border-inline-start:0}
.history-head .seg button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);box-shadow:none}
.history-head .seg button[aria-disabled=true]{opacity:1;color:var(--disabled)}
/* Thème et langue : deux boutons discrets dans l'en-tête, chacun avec son tiroir (retour de Didier : les deux
   sélecteurs segmentés prenaient trop de place). Des <details> natifs : ouverture, clavier et état annoncé viennent du
   navigateur, et le tiroir de la langue marche sans script. Le même attribut name n'en laisse qu'un ouvert */
/* Lien du compte dans l'en-tête : même boîte discrète que les deux boutons de préférences qui le suivent, une icône et
   un mot. Sous 400 px le mot est rogné à la façon de .sr (jamais display:none : le lien garderait une icône sans nom) ;
   à 320 px la rangée n'a pas la place pour le mot */
.top-acct{display:inline-flex;align-items:center;color:var(--text-2);text-transform:uppercase;white-space:nowrap;transition:color var(--t-ui) ease}
.top-acct:hover,.top-acct[aria-current]{color:var(--text);text-decoration:none}
@media (pointer:coarse){.top-acct{min-height:2.75rem;min-width:2.75rem;justify-content:center}}
/* Recherche de l'en-tête (cachée sous 600 px : la navigation et la page des modèles y mènent) */
.top-search{flex:0 1 19rem;min-width:8.125rem;display:flex;align-items:center;gap:0.625rem;height:2.25rem;padding:0 0.5rem 0 0.75rem;border:1px solid var(--line-strong);background:var(--surface)}
.top-search:focus-within{border-color:var(--accent-ink)}
.top-search-mark{font-family:var(--mono);font-size:0.75rem;color:var(--accent-ink)}
.top-search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;font-size:0.84375rem;color:var(--text);outline:none}
.top-search input::placeholder{color:var(--text-3)}
.top-search input::-webkit-search-cancel-button{display:none}
/* Champ de l'en-tête plus étroit que ses suggestions : 380 px au moins. Le champ est suivi des réglages (langue, compte,
   thème) : la liste s'ancre à son bord droit et s'étend vers la gauche. Le script la garde en plus dans la fenêtre (combo,
   keepIn) : ancrée à gauche, elle sortait de 74 px à 1 100 px avec la racine à 100 % (verdict d'Imani du 29/10) */
.top-search .cmp-listbox{left:auto;right:-1px;width:max(calc(100% + 2px),23.75rem)}
.top-search kbd{padding:1px 0.375rem;color:var(--text-2)}
@media (max-width:37.4375em){.top-search{display:none}}
/* Le texte du champ (« Chercher parmi 352 modèles ») doit tenir en entier, en français comme en anglais : le champ
   est plus large (304 px au lieu de 250) et l'écart entre les blocs de l'en-tête s'arrête à 30 px. De 1100 à 1279 px
   l'en-tête français est plein : écart de 12 px et repère du raccourci « / » masqué (le raccourci reste actif) */
@media (min-width:68.75em) and (max-width:79.9375em){.top-in{column-gap:0.75rem}.top-search kbd{display:none}}
/* Langue, compte, thème : un groupe mono 11 px à droite */
.top-ctl{flex:none;display:flex;align-items:center;gap:0.75rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em}
.theme-btn{display:grid;place-items:center;width:1.75rem;height:1.75rem;padding:0;border:1px solid var(--line-strong);background:transparent;cursor:pointer;transition:background-color var(--t-ui) ease}
.theme-btn:hover{background:var(--raise)}
.theme-dot{width:0.6875rem;height:0.6875rem;border-radius:50%;border:1.5px solid var(--text);background:linear-gradient(90deg,var(--text) 50%,transparent 50%)}
@media (pointer:coarse){.theme-btn{width:2.75rem;height:2.75rem}}
.prefs{position:relative}
/* Compte, thème et langue : un groupe serré (8 px), quel que soit l'écart entre les blocs de l'en-tête */

.prefs-btn{display:inline-flex;align-items:center;gap:0.4375rem;height:1.75rem;padding:0 0.5rem;border:1px solid var(--line-strong);color:var(--text);cursor:pointer;white-space:nowrap;list-style:none;user-select:none;transition:background-color var(--t-ui) ease,color var(--t-ui) ease}
/* Safari garde le triangle d'un summary en flex sans ces deux règles */
.prefs-btn::-webkit-details-marker{display:none}
.prefs-btn::marker{content:""}
.prefs-btn:hover,.prefs[open] .prefs-btn{background:var(--raise);color:var(--text)}
.caret{width:0;height:0;border-inline:0.21875rem solid transparent;border-top:0.25rem solid var(--text-col);transition:transform 150ms ease}
.prefs[open] .caret{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.caret{transition:none}}
/* 12 px : en graisse Light le trait du chevron fait 0,56 px (0,47 px à 10 px, contre 0,75 px pour les icônes de 16 px) */
.prefs-btn>.ico{width:0.75rem;height:0.75rem;transition:transform var(--t-ui) ease}
.prefs[open] .prefs-btn>.ico{transform:rotate(180deg)}
/* Icône du thème en cours : les trois sont dans la page, une seule s'affiche selon html[data-theme], que theme.js pose
   avant le premier rendu (le serveur ne connaît pas le choix du visiteur). Même boîte pour les trois : aucun décalage
   de mise en page, aucune icône qui change après coup */
.prefs-now{display:inline-flex;width:1rem;height:1rem}
.prefs-now .ico{display:none;width:1rem;height:1rem}
html[data-theme="dark"] .prefs-now svg[data-for="dark"],html[data-theme="light"] .prefs-now svg[data-for="light"],html[data-theme="system"] .prefs-now svg[data-for="system"]{display:block}
/* Le tiroir s'ouvre par-dessus le contenu, sans changer la hauteur de l'en-tête.
   Fond plein : l'en-tête a déjà un backdrop-filter, un second par-dessus n'est pas fiable */
.prefs-panel{position:absolute;inset-inline-end:0;top:calc(100% + 0.5rem);z-index:30;min-width:11.875rem;padding:0.25rem;border:1px solid var(--line-strong);border-radius:var(--r-panel);background:var(--surface);box-shadow:var(--shadow-menu)}
.prefs-panel button,.prefs-panel a{display:flex;align-items:center;gap:0.625rem;width:100%;min-height:2.5rem;padding:0 0.625rem;border:0;border-radius:var(--r-ctl);background:none;color:var(--text);font-size:0.875rem;text-align:start;text-decoration:none;white-space:nowrap;cursor:pointer}
.prefs-panel button:hover,.prefs-panel a:hover{background:var(--raise);color:var(--text);text-decoration:none}
.prefs-panel .ico{width:1rem;height:1rem;color:var(--text-2)}
.prefs-panel button span:last-of-type,.prefs-panel a span:last-of-type{margin-inline-end:1rem}
.prefs-code{width:1rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;color:var(--text-3)}
/* Le choix en cours : une coche et une graisse plus forte, jamais la couleur seule. Pour le thème, lu sur
   html[data-theme] comme l'icône du bouton ; aria-pressed, posé par le script, ne sert qu'aux lecteurs d'écran */
html[data-theme="dark"] .prefs [data-theme-set="dark"],html[data-theme="light"] .prefs [data-theme-set="light"],html[data-theme="system"] .prefs [data-theme-set="system"],.prefs-panel [aria-current="true"]{font-weight:600}
html[data-theme="dark"] .prefs [data-theme-set="dark"]::after,html[data-theme="light"] .prefs [data-theme-set="light"]::after,html[data-theme="system"] .prefs [data-theme-set="system"]::after,.prefs-panel [aria-current="true"]::after{content:"";margin-inline-start:auto;width:0.75rem;height:0.375rem;border-inline-start:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:rotate(-45deg) translateY(-2px)}
@media (prefers-reduced-motion:reduce){.prefs[open] .prefs-btn>.ico{transition:none}}
.chart{margin-top:1rem;padding:1.125rem 1.25rem 1rem}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 1.25rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.04em;color:var(--text-col)}
.key{display:inline-flex;align-items:center;gap:0.5rem}
.key::before{content:"";width:1.125rem;height:0;border-top:2px solid var(--accent-ink)}
.key.list::before{border-top:2px dashed var(--text-3)}
.key-promo::before{border-top:2px dotted var(--warn)}
.chart-area{position:relative;min-width:0}
.chart-svg .low-promo{fill:none;stroke:var(--warn);stroke-width:2.25;stroke-dasharray:1 5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart-svg .promo-dot{stroke:var(--warn);stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart-dot{position:absolute;top:-0.3125rem;left:-0.3125rem;width:0.625rem;height:0.625rem;border-radius:50%;background:var(--accent-ink);box-shadow:0 0 0 3px var(--surface);opacity:0;pointer-events:none}
.chart-dot.on{opacity:1}
.chart-tip{position:absolute;top:0;left:0;z-index:2;display:flex;flex-direction:column;gap:2px;min-width:8.75rem;padding:0.5rem 0.625rem;border:1px solid var(--line);border-radius:var(--r-chip);background:var(--surface);box-shadow:var(--shadow-menu);font-size:0.78125rem;color:var(--text-2);pointer-events:none;white-space:nowrap}
.chart-tip[hidden]{display:none}
.tip-v{font-size:0.9375rem;font-weight:600;color:var(--text)}
.tip-promo{color:var(--warn);font-weight:500}
.tip-l{color:var(--text-3)}
/* Période indisponible : aria-disabled plutôt que disabled, pour rester atteignable au clavier et annoncer la raison
   (relecture d'Amara) ; le clic est ignoré par le script */
.seg button[aria-disabled=true]{opacity:.45;cursor:not-allowed}.seg button[aria-disabled=true]:hover{color:var(--text-2)}
.chart-range{margin:0.875rem 0 0}
.chart-plot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0.75rem;align-items:stretch}
.y-axis{display:flex;flex-direction:column;justify-content:space-between;font-size:0.71875rem;color:var(--text-3);text-align:end;min-width:3.25rem;white-space:nowrap}
.chart-svg{display:block;width:100%;height:13.75rem;overflow:visible;touch-action:pan-y}
.chart-svg .grid{stroke:var(--line-soft);stroke-width:1;vector-effect:non-scaling-stroke}
.chart-svg .low{fill:none;stroke:var(--accent-ink);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart-svg .list{fill:none;stroke:var(--text-3);stroke-width:1.5;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
.chart-svg .area{fill:var(--accent-wash);stroke:none}
.chart-svg .cursor{stroke:var(--text-3);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0;transition:opacity var(--t-press) ease}
.chart-svg:hover .cursor{opacity:1}
.x-axis{display:flex;justify-content:space-between;margin-top:0.5rem;padding-inline-start:3.25rem;font-size:0.71875rem;color:var(--text-3)}
.chart .fine{margin-top:0.75rem}

.offers{margin-top:var(--gap-section)}
.offers-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0.5rem 1rem}
.showing{font-size:0.84375rem;color:var(--text-2)}
.filters{margin-top:0.875rem;display:flex;flex-wrap:wrap;gap:0.5rem}
/* Offres (maquette B) : titre, filtres et tableau dans un même cadre ; le lien de chaque ligne est un texte lime, pas un bouton */
.offers{border:1px solid var(--line);background:var(--bg)}
.offers .offers-bar{padding:0.75rem 1rem 0}
.offers .filters{margin-top:0.625rem;padding:0 1rem 0.75rem}
/* Entête du cadre (maquette B) : « OFFERS · the 25 cheapest of N » et les filtres sur une même ligne, à partir de 900 px */
@media (min-width:75em){.offers{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}.offers>*{grid-column:1/-1}.offers>.offers-bar{grid-column:1;grid-row:1;justify-content:flex-start;gap:0 0.625rem}.offers>.filters{grid-column:2;grid-row:1;margin:0;padding:0.75rem 1rem 0}}
.offers .showing{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-col)}
.offers .showing::before{content:"·";margin-inline-end:0.625rem}
/* Lignes compactes : signaux en pastilles courtes, lien en texte, conditions en mono */
.offers-table tbody th,.offers-table tbody td{padding-block:0.5rem}
.offers-table .badges{display:flex;flex-wrap:wrap;gap:0.25rem}
.offers-table .badges .chip{min-height:1.25rem;padding:2px 0.375rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
/* Pastilles sur une grille (règle du 28/10 : une pastille tombe sur la même verticale d'une rangée à l'autre) : chaque pastille à mot
   prend au moins la largeur de onze caractères (« Baisse 26 % », « Invérifiée », « Frais 5,5 % ») ; une pastille plus longue garde sa
   largeur, les pastilles à icône et le « +N » restent à leur taille */
.offers-table .badges .chip:not(.chip-icon):not(.pf-more-n){min-width:calc(11ch + .33em + 0.875rem)}
.offers-table .cond{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.04em;text-transform:uppercase}
.offers h2{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.offers .table-box{margin-top:0;border:0;border-top:1px solid var(--line)}
.offers .fine{padding:0 1rem}
.offers-table .offer-btn{min-height:2.75rem;padding:0;border:0;background:none;justify-content:flex-start;color:var(--accent-ink);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.offers-table .offer-btn:hover{color:var(--accent-hover);text-decoration:none}
/* « Offre », « Tarifs », « Site » : le mot part du bord gauche de la colonne et prend la largeur du plus long (sept caractères, « Pricing »),
   pour que la flèche tombe sur la même verticale à chaque rangée */
.offers-table td.offer-cell .offer-btn{padding:0}
.offers-table .offer-btn>span[aria-hidden]{min-width:calc(7ch + .35em)}
.filter{display:inline-flex;align-items:center;gap:0.375rem;height:2.125rem;padding:0 0.75rem;border-radius:var(--r-chip);border:1px solid var(--line);background:transparent;color:var(--text-2);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.05em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:color var(--t-ui) ease,background-color var(--t-ui) ease,border-color var(--t-ui) ease,transform var(--t-press) var(--ease-out)}
.filter:hover{color:var(--text);border-color:var(--text-3)}
.filter:active{transform:scale(0.97)}
.filter[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.filter .ico{display:none}
.filter::before{content:"[ ]"}.filter[aria-pressed=true]::before{content:"[✓]"}
/* Cibles tactiles des deux commandes principales de la page modele : 32 px pour les plages, 34 px pour les filtres,
   sous le plancher de 44 px. La portee est limitee a ces deux blocs, le composant .seg servant aussi l'en-tete du site */
@media (pointer:coarse){.filter{height:2.75rem}.history-head .seg button{min-height:2.75rem}}
.table-box{margin-top:0.875rem}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:0.875rem}
.table thead th:first-child{border-start-start-radius:var(--r-panel)}.table thead th:last-child{border-start-end-radius:var(--r-panel)}
.table .chip{white-space:normal;height:auto;min-height:1.5rem;padding:3px 0.5625rem;line-height:1.3}
.table td:last-child{min-width:10.625rem}
.table td .cond+.sm{margin-inline-start:0.25rem;white-space:nowrap}
.table th{position:sticky;top:3.75rem;z-index:5;padding:0.625rem 0.75rem;text-align:start;font-weight:500;font-size:0.78125rem;color:var(--text-3);white-space:nowrap;background:var(--raise)}
.table th.r{text-align:end}
.sort{display:inline-flex;align-items:center;gap:0.25rem;border:0;background:none;padding:0.4375rem 0;margin:-0.4375rem 0;font:inherit;color:inherit;cursor:pointer}
@media (pointer:coarse){.sort{padding-block:0.875rem;margin-block:-0.875rem}}
.sort:hover{color:var(--text)}
.sort .ico{opacity:.6}
th[aria-sort] .sort{color:var(--text)}
th[aria-sort] .sort .ico{opacity:1;color:var(--accent-ink)}
.table td,.table tbody th{padding:0.6875rem 0.75rem;border-top:1px solid var(--line-soft);text-align:start;font-weight:400}
.table tbody th{position:static;background:none;font-size:0.875rem;color:var(--text);font-weight:500;white-space:nowrap}
.table tbody tr{transition:background-color var(--t-ui) ease}
.table tbody tr:hover{background:var(--raise)}
.table .r{text-align:end}
.table .num{font-family:var(--mono);font-stretch:var(--mono-stretch)}
.table .bl{font-family:var(--mono);font-stretch:var(--mono-stretch);font-weight:600;color:var(--text)}
.bl-in{display:inline-flex;align-items:center;justify-content:flex-end;gap:0.5rem}.bl-in .chip{font-family:var(--sans);font-weight:500}
.offers-table td.num{color:var(--text-2)}
/* Tableau des offres (maquette B) : en-têtes mono 10 px en capitales, lignes de 12 px, survol relevé avec barre lime, rang, barre du prix mixte */
.offers-table thead th{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col);background:var(--bg);border-bottom:1px solid var(--line)}
.offers-table tbody tr:hover{background:var(--row-hover);box-shadow:inset 2px 0 0 var(--accent-ink)}
.offers-table .rk{width:1.5rem;padding-inline-end:0;font-size:0.6875rem;color:var(--text-3);text-align:end}
.via-sub{display:inline;margin-inline-start:0.5rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
.bw-1{width:1%}.bw-2{width:2%}.bw-3{width:3%}.bw-4{width:4%}.bw-5{width:5%}.bw-6{width:6%}.bw-7{width:7%}.bw-8{width:8%}.bw-9{width:9%}.bw-10{width:10%}.bw-11{width:11%}.bw-12{width:12%}.bw-13{width:13%}.bw-14{width:14%}.bw-15{width:15%}.bw-16{width:16%}.bw-17{width:17%}.bw-18{width:18%}.bw-19{width:19%}.bw-20{width:20%}.bw-21{width:21%}.bw-22{width:22%}.bw-23{width:23%}.bw-24{width:24%}.bw-25{width:25%}.bw-26{width:26%}.bw-27{width:27%}.bw-28{width:28%}.bw-29{width:29%}.bw-30{width:30%}.bw-31{width:31%}.bw-32{width:32%}.bw-33{width:33%}.bw-34{width:34%}.bw-35{width:35%}.bw-36{width:36%}.bw-37{width:37%}.bw-38{width:38%}.bw-39{width:39%}.bw-40{width:40%}.bw-41{width:41%}.bw-42{width:42%}.bw-43{width:43%}.bw-44{width:44%}.bw-45{width:45%}.bw-46{width:46%}.bw-47{width:47%}.bw-48{width:48%}.bw-49{width:49%}.bw-50{width:50%}.bw-51{width:51%}.bw-52{width:52%}.bw-53{width:53%}.bw-54{width:54%}.bw-55{width:55%}.bw-56{width:56%}.bw-57{width:57%}.bw-58{width:58%}.bw-59{width:59%}.bw-60{width:60%}.bw-61{width:61%}.bw-62{width:62%}.bw-63{width:63%}.bw-64{width:64%}.bw-65{width:65%}.bw-66{width:66%}.bw-67{width:67%}.bw-68{width:68%}.bw-69{width:69%}.bw-70{width:70%}.bw-71{width:71%}.bw-72{width:72%}.bw-73{width:73%}.bw-74{width:74%}.bw-75{width:75%}.bw-76{width:76%}.bw-77{width:77%}.bw-78{width:78%}.bw-79{width:79%}.bw-80{width:80%}.bw-81{width:81%}.bw-82{width:82%}.bw-83{width:83%}.bw-84{width:84%}.bw-85{width:85%}.bw-86{width:86%}.bw-87{width:87%}.bw-88{width:88%}.bw-89{width:89%}.bw-90{width:90%}.bw-91{width:91%}.bw-92{width:92%}.bw-93{width:93%}.bw-94{width:94%}.bw-95{width:95%}.bw-96{width:96%}.bw-97{width:97%}.bw-98{width:98%}.bw-99{width:99%}.bw-100{width:100%}
.offers-table tbody th.rep{color:var(--text-3);font-weight:400}
/* En-têtes du tableau des offres sur deux lignes au besoin (« Entrée / $/1 M »), conditions sur deux lignes sous 1 320 px comme
   dans le tableau des fournisseurs, signaux sans largeur minimale (leurs badges passent à la ligne) : sur une seule ligne, les largeurs cumulées
   (1 242 px en FR) dépassaient le panneau (1 174 px au plus) et le tableau sortait du cadre à toutes les largeurs */
.offers-table thead th{white-space:normal;vertical-align:bottom}
@media (max-width:82.5em){.offers-table .cond{white-space:normal;align-items:flex-start}}
/* Cellule Conditions et son en-tête : tout le contenu (marque d'entraînement, région, pastilles) sur une seule ligne à toute largeur
   où le tableau s'affiche (avant le passage en cartes : 1 101 px au plus petit). Pire cas mesuré le 18/10 de 1 101 à 1 440 px :
   marque, « SG, ID, US » et « Inconfirmée », chaque rangée sur une ligne, sans défilement horizontal */
.cell-line{display:inline-flex;align-items:center;gap:0.375rem}
.offers-table .cell-line,.offers-table .cell-line .cond,.offers-table .cell-line .chip{white-space:nowrap}.offers-table .cell-line .sm{margin-inline-start:0}
/* La pastille garde sa casse écrite (« Inconfirmée ») partout, même dans un en-tête en capitales */
.chip.cond-unc{text-transform:none;letter-spacing:normal}
.table.offers-table td:last-child{min-width:0}
/* Nom du fournisseur : logo décoratif puis lien vers notre page ; le lien sortant est le bouton « Voir l'offre » */
.prov-name{display:inline-flex;align-items:center;gap:2px;max-width:100%}
.prov-ref{display:inline-flex;align-items:center;min-height:1.5rem;color:inherit}.prov-ref:hover{color:var(--accent-ink);text-decoration:none}
@media (pointer:coarse){.prov-ref{min-height:2.75rem;margin-block:-0.625rem}}
/* Repli aux initiales à la taille du logo (26 px par défaut, 22 px ici) : sans ça les lignes sans fichier de logo
   porteraient une pastille plus grosse que les autres. Limité au nom de fournisseur, l'annuaire garde sa taille */
.prov-name .lab-badge{width:1.375rem;height:1.375rem;border-radius:0;font-size:0.6875rem}
/* « Comparer avec… » : une grille de liens, le nom puis la raison de la suggestion */
.cmp-with{margin-top:var(--gap-sub)}
.cmp-with h2{font-size:clamp(1.25rem,2.2vw,1.5rem);letter-spacing:-.02em}
.cmp-with ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:0 1.75rem;border-top:1px solid var(--line-soft)}
.cmp-with a{display:flex;flex-direction:column;gap:3px;min-height:3.5rem;padding:0.75rem 2px;border-bottom:1px solid var(--line-soft);color:var(--text)}
.cmp-with a:hover{text-decoration:none}.cmp-with a:hover .cmp-with-name{color:var(--accent-ink)}
.cmp-with-name{font-weight:500;transition:color var(--t-ui) ease}
.cmp-with-why{font-size:0.8125rem;color:var(--text-3)}
/* Modèles liés : mêmes lignes que « Comparer avec », deux groupes titrés */
.rel-models h3{display:block;margin:1.375rem 0 0}
.rel-models h3+ul{margin-top:0.625rem}
.rel-all{margin:0.75rem 0 0;font-size:0.875rem}
.rel-all a{flex-direction:row;align-items:center;gap:0.375rem;width:max-content;max-width:100%;min-height:2.75rem;padding-block:0;border-bottom:0}
/* Remplaçant annoncé : même lien en ligne que « Tous les modèles de … » (la règle .cmp-with a en ferait un bloc) */
.rel-next a{flex-direction:row;align-items:center;gap:0.375rem;width:max-content;max-width:100%;min-height:2.75rem;padding-block:0;border-bottom:0;font-weight:600}
.rel-models li a{justify-content:center}
.offers-more{display:flex;width:fit-content;margin:0.875rem auto 0}
@media (pointer:coarse){.offers .btn{height:2.75rem}}
.offers-empty{margin-top:0.875rem;padding:2rem 1rem;display:flex;flex-direction:column;align-items:center;gap:0.875rem;text-align:center;border:1px dashed var(--line);border-radius:var(--r-panel);color:var(--text-2)}
.offers-empty[hidden]{display:none}
.offers.is-empty .table-box,.offers.is-empty .cards{display:none}
.table .best{color:var(--accent-ink)}
.table .sm{font-size:0.8125rem;color:var(--text-2)}
.table tr.stale td,.table tr.stale th{opacity:.72}
[data-hide]{display:none!important}
.cond{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.8125rem;color:var(--text-2);white-space:nowrap}
.cond.ok{color:var(--text)}.cond.ok .ico{color:var(--accent-ink)}
/* Fiche fournisseur, statuts d'entraînement mêlés : une icône par ligne (trois formes), nommée pour les lecteurs
   d'écran ; la légende est dite une fois sous le tableau. Statut unique : rien par ligne, le bandeau le dit */
.cond-icon{gap:0}
.pv-legend{display:flex;flex-wrap:wrap;gap:0.375rem 1.125rem;margin:0;padding:0.625rem 1rem 0.75rem;border-top:1px solid var(--line-soft)}
.pv-legend .cond{white-space:normal}
.pv-legend-via{font-size:0.8125rem;color:var(--text-2)}
/* Légende du carré des lignes gagnantes : le carré n'existe que dans le tableau, la légende disparaît avec lui */
.pv-legend-best .gap{cursor:default;font-family:inherit;font-size:0.8125rem;color:var(--text-2);white-space:normal}
.gap.best{cursor:default}
@media (max-width:68.6875em){.pv-legend-best{display:none}}
.badges{display:flex;gap:0.25rem;flex-wrap:wrap}
.cards{display:none;margin:0.875rem 0 0;padding:0;list-style:none;flex-direction:column;gap:0.625rem}
/* Toutes les conditions de la liste inconfirmées : une pastille en tête de la liste, avec le libellé « Conditions », alignée sur le
   texte des cartes (16 px de marge intérieure et 1 px de bord), à l'écran comme sur le papier */
.cards-unc{display:flex;align-items:center;gap:0.5rem;padding-inline:1.0625rem}
/* Dans la phrase du verdict du comparateur : la pastille suit le nom du vendeur, séparée de lui */
.cmp-verdict .cond-unc{margin-inline-start:0.375rem;vertical-align:1px}
/* Papier : la pastille écrit le mot et la date (chip-paper) ; sa phrase lue n'est pas redite là où une règle de page révèle le texte lu */
@media print{.cond-unc>.sr{display:none!important}.cond-unc>[aria-hidden]{display:inline!important}}
.card{padding:1rem}
.card-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 0.625rem}
.card-top h3{font-size:1rem;font-weight:500;flex:1 1 8rem;min-width:0;overflow-wrap:anywhere;letter-spacing:-.01em}
.card-top .bl{font-family:var(--mono);font-stretch:var(--mono-stretch);font-weight:600;font-size:1.25rem}
.card-top .chip{align-self:center}
.card-top .best{color:var(--accent-ink)}
.card-via{margin-top:2px;font-size:0.8125rem;color:var(--text-3)}
.card-grid{margin:0.875rem 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0.5rem 1rem;font-size:0.8125rem;color:var(--text-2)}
.card-grid div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 0.5rem}.card-grid dt{margin:0}.card-grid dd{margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);color:var(--text)}
/* « Voir l'offre » / « Voir les tarifs » : le SEUL lien sortant d'une offre, le même sur les cartes de tête, dans le tableau et sur les cartes
   de petit écran. À côté, en petit, où il mène (« chez X », « via X »). Sans adresse : la mention, à la même place, jamais un bouton mort */
.offer-row{display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0.75rem;margin-top:0.875rem}
.offer-btn{display:inline-flex;align-items:center;gap:0.5rem;min-height:2.75rem;padding:0 1rem;border:1px solid var(--text-3);border-radius:var(--r-ctl);background:var(--surface);color:var(--text);font-size:0.875rem;font-weight:500;white-space:nowrap;transition:border-color var(--t-ui) ease}
.offer-btn:hover{border-color:var(--text);text-decoration:none;color:var(--text)}
.offer-btn.compact{padding:0 0.75rem}
/* Troisième bouton, « Site du vendeur » : un cran en dessous des deux autres (accueil du vendeur, sans prix), sans contour ni fond, en teinte
   secondaire ; souligné au survol ; même hauteur de 44 px et même ligne. Le texte reste aligné avec celui de la carte (pas de remplissage) */
.offer-btn.site{padding:0;border-color:transparent;background:none;color:var(--text-2)}
.offer-btn.site:hover{border-color:transparent;color:var(--text);text-decoration:underline;text-underline-offset:3px}
/* Cartes d'offres : « Voir l'offre », « Voir les tarifs » et « Site du vendeur » de même largeur, flèches sur une verticale d'une carte à
   l'autre (contrôle de #1214 : 18 px d'écart à 1100, 20 px à 375) */
.card>.offer-row .offer-btn{min-width:12em;justify-content:space-between}.card>.offer-row .offer-btn.site{padding-inline-end:1rem}
.offer-via{font-size:0.8125rem;color:var(--text-2)}
.offer-mark{font-size:0.8125rem;color:var(--text-2)}
.chip-icon{gap:0;padding-inline:0.375rem}
.pv-legend-flags{font-size:0.8125rem;color:var(--text-2)}.pv-legend-flags>span{display:inline-flex;align-items:center;gap:0.375rem}
.offer-none{display:inline-flex;align-items:center;min-height:2.75rem;font-size:0.8125rem;line-height:1.3;color:var(--text-3)}
.offers-table td.offer-cell{white-space:normal;min-width:11rem}
.offers-table td.offer-cell .offer-row{margin:0}
.offers-table td.offer-cell .offer-none{white-space:nowrap}
/* Signaux d'une offre : plusieurs pastilles tiennent sur UNE ligne, la colonne prend leur largeur (une rangée = une ligne) */
.offers-table td .badges{flex-wrap:nowrap}
@media (prefers-reduced-motion:reduce){.offer-btn{transition:none}}
.card-foot{margin-top:0.875rem;padding-top:0.75rem;border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;font-size:0.8125rem;color:var(--text-2)}
/* Cartes : une condition longue (« Les prompts peuvent servir à l'entraînement ») passe à la ligne au lieu d'élargir la page
   (18 px de trop à 320 px) */
.card-foot .cond{white-space:normal;align-items:flex-start}

/* Bas de page (maquette B) : coût mensuel et bloc curl, côte à côte à partir de 380 px chacun */
/* Rangs dans des classements publics (page modèle, sous la bande de chiffres) : une ligne par banc, rang, score et son intervalle, répartition des scores du banc */
.rankings{margin-top:1.25rem}
.rk-list{list-style:none;margin:0;padding:0}
.rk-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr) 10rem minmax(0,1fr);align-items:center;gap:0.25rem 1rem;padding:0.5rem 1rem;border-top:1px solid var(--line-soft)}
.rk-bench{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.rk-set{display:block;margin-top:2px;font-size:0.625rem;letter-spacing:.04em;color:var(--text-col)}
.rk-rank{font-size:0.8125rem;color:var(--text-2)}.rk-rank b{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1.25rem;font-weight:500;letter-spacing:-.02em;color:var(--text)}
.rk-score{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.8125rem;color:var(--text)}.rk-ci{display:inline-block;font-size:0.71875rem;color:var(--text-col)}.rk-sn{display:block;margin-top:2px;font-family:var(--sans);font-size:0.6875rem;color:var(--text-col)}
.rk-dist{display:block;max-width:100%}.rk-dist rect{fill:var(--bar)}.rk-dist rect.on{fill:var(--accent-ink)}.rk-me{fill:var(--accent-ink)}
.rk-meta{font-size:0.75rem;color:var(--text-col)}.rk-meta:empty{display:none}
.rk-score[data-tip]{text-decoration:none}@media print{.rk-score .rk-tally{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;font-family:var(--sans);font-size:0.6875rem;color:var(--text-col)}}
.rk-attr{margin:0;padding:0.625rem 1rem 0.75rem;border-top:1px solid var(--line-soft);font-size:0.78125rem;color:var(--text-col)}
/* Papier : un lien ne se suit pas ; la citation écrit l'adresse de la source et celle de la licence à la suite de leur nom */
/* Licence : dans la bulle de la source à l'écran (décision du 28/10), écrite avec son adresse sur papier, où une bulle n'existe pas */
.rk-lic{display:none}
@media print{.rk-lic{display:inline}.rk-attr a[href]::after{content:" (" attr(href) ")";font-size:0.6875rem;overflow-wrap:anywhere}}
@media (max-width:56.25em){.rk-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.rk-dist,.rk-meta{grid-column:1/-1}}
.model-foot{margin-top:var(--gap-section);display:grid;grid-template-columns:minmax(0,1fr);gap:0.75rem;align-items:start}
@media (min-width:56.25em){.model-foot:has(>.estimator){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.foot-side{display:grid;gap:0.75rem;min-width:0}
/* Colonne de droite (maquette B) : liens en pastilles, nom puis labo en petit mono */
.foot-side .cmp-with{margin:0;padding:1.25rem 1.5rem;border:1px solid var(--line)}
.foot-side .cmp-with h2,.foot-side .cmp-with h3{margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-col)}
.foot-side .cmp-with h3{margin-top:1rem}
.foot-side .cmp-with ul,.foot-side .rel-models h3+ul{margin:0.625rem 0 0;display:flex;flex-wrap:wrap;gap:0.5rem;border-top:0}
.foot-side .cmp-with li a{flex-direction:row;gap:0.5rem;min-height:2.75rem;padding:0 0.75rem;border:1px solid var(--line);justify-content:center;align-items:center}
.foot-side .cmp-with li a:hover{border-color:var(--accent-ink)}
.foot-side .cmp-with-name{font-size:0.8125rem}
.foot-side .cmp-with-why{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.04em;text-transform:uppercase}
.model-foot h2{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.estimator{padding:1.5rem}
.est-fields{margin:1.125rem 0 0;padding:0;border:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.625rem;align-items:end}
.est-fields label{display:flex;flex-direction:column;gap:0.375rem;font-size:0.78125rem;color:var(--text-2)}
.est-fields input{height:2.625rem;padding:0 0.75rem;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--bg);color:var(--text);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1rem;transition:border-color var(--t-ui) ease,box-shadow var(--t-ui) ease}
.est-fields input:focus-visible{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 0.25rem var(--accent-wash)}
.est-fields:disabled input{opacity:.7}
.est-list{list-style:none;margin:1.125rem 0 0;padding:0;counter-reset:est}
.est-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"p c" "b b" "d u";gap:0 0.75rem;padding:0.75rem 0;border-top:1px solid var(--line-soft);transition:opacity var(--t-ui) ease}
.est-list.is-loading li{opacity:.5}
.est-provider{grid-area:p;align-self:end;font-weight:500}
.est-bar{grid-area:b;display:block;height:0.25rem;margin:0.5rem 0 0.375rem;background:var(--line-soft)}.est-bar i{display:block;height:100%;background:var(--text-3)}
.est-list li:first-child .est-bar i{background:var(--accent)}
.est-delta{grid-area:d;font-size:0.75rem;color:var(--text-3)}
.est-cost{grid-area:c;text-align:end;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1.25rem;font-weight:500}
.est-list li:first-child .est-cost{color:var(--accent-ink)}
.est-unit{grid-area:u;text-align:end;font-size:0.75rem;color:var(--text-3)}
.est-error{margin-top:0.625rem;font-size:0.8125rem;color:var(--warn)}
.est-selfhost{margin:1rem 0 0;padding-top:0.25rem;border-top:1px solid var(--line-soft);font-size:0.875rem}
.est-selfhost a{display:inline-flex;align-items:center;gap:0.375rem;min-height:2.75rem}
.use{padding:1.5rem}
.use h2{font-size:0.6875rem}
.use-sub{margin-top:0.375rem;font-size:0.875rem;color:var(--text-2)}
/* Titre d'un bloc du bas de la page modèle et son bouton d'aide (la phrase d'explication n'est plus écrite sous le titre) */
.est-head,.use-head{display:flex;align-items:center;gap:0.5rem}
/* Papier : pas de bulle ni de bouton d'aide (ils ne s'impriment pas) ; la phrase est écrite sous le titre par une ligne réservée au
   papier (hors écran et non lue : le bouton d'aide la porte déjà), le lien écrit sa phrase, l'heure de vérification suit le titre de la carte */
.head-paper{display:none}
@media print{.head-paper{display:block;margin:0.25rem 0 0;font-size:0.75rem;color:var(--text-2)}.use .fine a [aria-hidden],.est-selfhost a [aria-hidden],.pick-sub[data-tip] [aria-hidden]{display:none}.use .fine a .sr,.est-selfhost a .sr,.pick-sub[data-tip] .sr,.pick-top .pick-at{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}}
.snip{margin-top:1.125rem}
.snip .label{display:block;margin-bottom:0.5rem}
.snip pre{white-space:pre-wrap;overflow-wrap:anywhere}

@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
.chart-range .low,.chart-range .list{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease-in-out)}
.chart-range .area{opacity:0;transition:opacity .6s ease .5s}
.history.is-in .chart-range .low,.history.is-in .chart-range .list{clip-path:inset(0 0 0 0)}
.history.is-in .chart-range .area{opacity:1}
.offers-table tbody tr,.cards li{will-change:auto}
}
@media (max-width:68.75em){.table-box{display:none}.cards{display:flex}}
/* Plusieurs signaux sur une même offre ne tiennent pas sur une ligne dans le tableau sous 1240 px (mesuré en français, trois pastilles) : la page qui en
   porte une passe aux cartes plus tôt, plutôt que de défiler de côté ou de passer la rangée sur deux lignes */
/* Garde de largeur (site.js) : la section dont le tableau ne tient pas dans son cadre passe aux cartes ; fit-probe, le temps d'une
   mesure, donne au tableau sa largeur minimale. À l'écran seulement : le papier garde ses propres règles */
.offers.fit-probe .offers-table{width:min-content}
@media screen{.offers.fit-cards .table-box{display:none}.offers.fit-cards:not(.is-empty) .cards{display:flex}}
@media (max-width:77.5em){.offers:has(.offers-table .badges>.chip:nth-child(2)) .table-box{display:none}.offers:has(.offers-table .badges>.chip:nth-child(2)) .cards{display:flex}}
/* Tableau des offres : trois pastilles écrites par rangée, les suivantes derrière « +N » (chipsOverflow, comme la fiche fournisseur) :
   une rangée reste sur une ligne et le tableau reste un tableau sur grand écran. Les pastilles rangées restent lues (.pf-more-all) */
.offers-table .pf-more{display:inline-flex;flex:none}
@media (max-width:62.5em){}
@media (max-width:38.75em){.est-fields{grid-template-columns:minmax(0,1fr)}.x-axis{padding-inline-start:0}}

/* Liste des modèles : tableau dense, filtre instantané, labos, tri, prix le plus bas chargé à l'affichage */
.idx-tools{margin-top:1.5rem;display:flex;flex-direction:column;gap:0.875rem}
.idx-search{max-width:32.5rem}
/* Liste des modèles : labo en liste déroulante (une ligne, au lieu de ~60 pastilles), pastille à l'initiale du labo en
   attendant les logos servis par le Worker ; nom complet en infobulle et pour les lecteurs d'écran */
.lab-pick{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;min-width:0;max-width:100%}
/* Page fournisseur : filtre et tri, tableau au-dessus de 620 px, cartes en dessous */
.provider-tools{display:flex;align-items:center;gap:0.75rem 1.25rem;flex-wrap:wrap;margin:0.5rem 0 0.75rem}
/* Petit écran (passe finale de Zuri) : ni le formulaire de recherche ni les sélecteurs n'imposent leur largeur naturelle
   (input, option la plus longue) : jamais de défilement horizontal à 320 px */
.provider-search{flex:1 1 20rem;min-width:0;max-width:32.5rem;height:3rem}
.provider-offers .count,.dir-page>.count{margin:0 0 0.75rem;font-size:0.84375rem;color:var(--text-2)}
.provider-cards{display:none;margin:0;padding:0;list-style:none;flex-direction:column;gap:0.625rem}
.provider-cards .card-top h3 a{color:var(--text)}
.provider-cards .card-foot .verify{margin-inline-start:auto;min-height:1.5rem}
@media (pointer:coarse){.provider-cards .verify{min-height:2.75rem}}
/* Prix périmé : même atténuation que la ligne du tableau */
.provider-cards .card.stale{opacity:.72}
/* Toute la carte mène à la page du modèle ; lien de tarifs et boutons d'aide au-dessus */
.provider-cards .card{position:relative}.provider-cards .card-top h3 a::after{content:"";position:absolute;inset:0}
.provider-cards .card :is(.verify,button){position:relative;z-index:1}
/* Le tableau demande 1060 px : en dessous de 1100 px il défilait dans son cadre, colonnes cachées. Les cartes le
   remplacent jusqu'à 1099 px, sur deux colonnes entre 621 et 1099 px, une seule en dessous */
@media (max-width:68.6875em){.provider-cards{display:flex}}
@media (min-width:38.8125em) and (max-width:68.6875em){.provider-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
.lab-pick select{height:2.5rem;min-width:min(13.75rem,100%);max-width:100%;padding:0 2.125rem 0 0.75rem;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);color:var(--text);font:inherit;font-size:0.875rem}
.lab-pick select:hover{border-color:var(--text-3)}
@media (pointer:coarse){.lab-pick select{height:2.75rem}}
.logo{display:inline-block;flex:none;object-fit:contain;background:var(--raise);outline:1px solid var(--line-strong);vertical-align:middle}
.logo:is([src$="/logos/ai"],[src$="/logos/berget"],[src$="/logos/fastrouter"],[src$="/logos/fireworks"],[src$="/logos/fptaifactory"],[src$="/logos/inception"],[src$="/logos/juicefactory"],[src$="/logos/mancer2"],[src$="/logos/neuralwatt"],[src$="/logos/novita"],[src$="/logos/ppio"],[src$="/logos/qwen"],[src$="/logos/relace"],[src$="/logos/sailresearch"],[src$="/logos/sakanaai"],[src$="/logos/tinfoil"],[src$="/logos/writer"],[src$="/logos/zenmux"]){background:#EDF0F2;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.logo:is([src$="/logos/alibaba"],[src$="/logos/canopywave"],[src$="/logos/deepinfra"],[src$="/logos/greenpt"],[src$="/logos/llmgateway"],[src$="/logos/meituan"],[src$="/logos/mixlayer"],[src$="/logos/modal"],[src$="/logos/poolside"],[src$="/logos/qiniu"],[src$="/logos/regoloai"],[src$="/logos/scaleway"],[src$="/logos/upstage"]){background:#141C20;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.logo.sm{width:1.375rem;height:1.375rem}
.logo.lg{width:2.5rem;height:2.5rem;border-radius:0}
.dir-name .logo,.dir-name .lab-badge{margin-inline-end:0.5rem}
.dir-title{display:flex;align-items:center;gap:0.875rem}
.lab-badge.lg{width:2.5rem;height:2.5rem;border-radius:0;font-size:1.125rem}
.lab-badge{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.375rem;height:1.375rem;background:var(--raise);outline:1px solid var(--line-strong);color:var(--text-2);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem}
.idx-heading{margin-top:1.75rem;font-size:clamp(1.125rem,1.8vw,1.375rem);letter-spacing:-.02em}
.idx-more{margin-top:1.125rem}
.count{margin-top:1.125rem;font-size:0.84375rem;color:var(--text-2)}
.table-wrap{margin-top:0.625rem}
.models-table tbody th a{display:block;color:var(--text);font-weight:500;overflow-wrap:anywhere}
/* Toute la ligne mène à la page du modèle (le nom seul faisait 22 px de haut sur mobile) */
.models-table tbody tr{position:relative}.models-table tbody th a::after{content:"";position:absolute;inset:0}
/* L'identifiant d'API reste sélectionnable pour être copié, au-dessus de la zone cliquable (relecture de Kofi) */
.models-table tbody th code{position:relative;z-index:1;cursor:text;user-select:all}
.models-table tbody th a:hover{color:var(--accent-ink);text-decoration:none}
/* Une rangée = une ligne : l'identifiant du modèle est en bulle sur le nom ; il ne s'écrit que sur papier */
.models-table tbody th code{display:none}
@media print{.models-table tbody th code{display:inline;margin-inline-start:0.5rem}}
.on-p4 .offers-table tbody th .prov-name{min-width:calc(4 * .6em + 1.625rem)}.on-p5 .offers-table tbody th .prov-name{min-width:calc(5 * .6em + 1.625rem)}.on-p6 .offers-table tbody th .prov-name{min-width:calc(6 * .6em + 1.625rem)}.on-p7 .offers-table tbody th .prov-name{min-width:calc(7 * .6em + 1.625rem)}.on-p8 .offers-table tbody th .prov-name{min-width:calc(8 * .6em + 1.625rem)}.on-p9 .offers-table tbody th .prov-name{min-width:calc(9 * .6em + 1.625rem)}.on-p10 .offers-table tbody th .prov-name{min-width:calc(10 * .6em + 1.625rem)}.on-p11 .offers-table tbody th .prov-name{min-width:calc(11 * .6em + 1.625rem)}.on-p12 .offers-table tbody th .prov-name{min-width:calc(12 * .6em + 1.625rem)}.on-p13 .offers-table tbody th .prov-name{min-width:calc(13 * .6em + 1.625rem)}.on-p14 .offers-table tbody th .prov-name{min-width:calc(14 * .6em + 1.625rem)}.on-p15 .offers-table tbody th .prov-name{min-width:calc(15 * .6em + 1.625rem)}.on-p16 .offers-table tbody th .prov-name{min-width:calc(16 * .6em + 1.625rem)}.on-p17 .offers-table tbody th .prov-name{min-width:calc(17 * .6em + 1.625rem)}.on-p18 .offers-table tbody th .prov-name{min-width:calc(18 * .6em + 1.625rem)}.on-p19 .offers-table tbody th .prov-name{min-width:calc(19 * .6em + 1.625rem)}.on-p20 .offers-table tbody th .prov-name{min-width:calc(20 * .6em + 1.625rem)}.on-p21 .offers-table tbody th .prov-name{min-width:calc(21 * .6em + 1.625rem)}.on-p22 .offers-table tbody th .prov-name{min-width:calc(22 * .6em + 1.625rem)}.on-p23 .offers-table tbody th .prov-name{min-width:calc(23 * .6em + 1.625rem)}.on-p24 .offers-table tbody th .prov-name{min-width:calc(24 * .6em + 1.625rem)}
/* Tableau des offres, grille la plus serrée (30/10) : 5 px de chaque côté de chaque case au lieu de 12. Racine à 100 % (toucher), le tableau
   dépassait son cadre jusqu'à 121 px à 1 241 px et 87 px à 1 101 px, donc la page défilait de côté ; à 1 440 px, il sortait encore de 27 px
   de son cadre, et de 25 px avec une souris fine. Aucun nom coupé, chaque rangée sur une ligne. Le « .rk », plus spécifique, garde sa marge de fin nulle */
.offers-table th,.offers-table td,.offers-table tbody th{padding-inline:0.3125rem}
.offers-table tbody th{white-space:nowrap}.offers-table tbody th .prov-name,.offers-table tbody th .via-sub{vertical-align:middle}.offers-table tbody th .sm-marks,.offers-table tbody th .via-sub{vertical-align:middle;margin-inline-start:0.375rem}
.models-table .lab-cell{color:var(--text-2);font-size:0.84375rem}
.lab-name{display:inline-flex;align-items:center;gap:0.5rem;white-space:nowrap}
.models-table .lowest{color:var(--accent-ink);font-weight:500;min-width:6rem}
/* La règle des tableaux d'offres (dernière colonne large, pour les signaux) ne vaut pas ici : le prix ne doit pas déborder */
.table.models-table td:last-child{min-width:0}
.models-table tbody th{white-space:normal}
/* Liste des modèles (maquette B) : titre et filtre, panneau du classement, panneau « de A à Z » */
.mdl-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.25rem 2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.mdl-head .page-title{margin:0;font-size:clamp(2.125rem,4vw,3.25rem);line-height:1;letter-spacing:-.04em}
.mdl-filter{flex:0 1 26.25rem;min-width:min(15rem,100%);display:flex;align-items:center;gap:0.75rem;height:3rem;margin:0;padding:0 0.875rem;border:1px solid var(--line-strong);background:var(--surface);box-shadow:none}
.mdl-filter:focus-within{border-color:var(--accent-ink);box-shadow:none}
.mdl-filter .top-search-mark{font-size:0.875rem}
.mdl-filter input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;font-size:0.9375rem;color:var(--text);outline:none}
.mdl-filter input::placeholder{color:var(--text-3)}
.mdl-filter input::-webkit-search-cancel-button{display:none}
.mdl-count{margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;color:var(--text-col);white-space:nowrap}
.mdl-pop,.mdl-all{margin-top:1.5rem}
.mdl-labs{display:flex;flex-wrap:wrap;gap:0.375rem;padding:0.75rem 1rem;border-bottom:1px solid var(--line)}
.lab-pill{display:inline-flex;align-items:center;gap:0.5rem;height:1.875rem;padding:0 0.625rem;border:1px solid var(--line);color:var(--text);font-size:0.8125rem;white-space:nowrap;transition:border-color 150ms ease,background-color 150ms ease}
.lab-pill:hover{border-color:var(--disabled);color:var(--text);text-decoration:none}
.lab-pill[aria-current]{border-color:var(--accent-ink);background:var(--raise)}
.lab-pill .logo,.lab-pill .lab-badge{width:1.125rem;height:1.125rem;font-size:0.5625rem}
.lab-pill-n{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;color:var(--text-col)}
.lab-pill[aria-current] .lab-pill-n{color:var(--accent-ink)}
@media (pointer:coarse){.lab-pill{height:2.75rem}}
.mdl-pop .table-wrap{overflow-x:auto;overflow-y:hidden}
.mdl-pop .models-table{width:100%;min-width:42.5rem;border-collapse:collapse}
.mdl-pop .models-table th,.mdl-pop .models-table td{padding:0.6875rem 0.5rem;border:0;border-bottom:1px solid var(--line-soft);text-align:start;vertical-align:middle;background:none}
.mdl-pop .models-table tr>:first-child{padding-inline-start:1rem}
.mdl-pop .models-table tr>:last-child{padding-inline-end:1rem}
.mdl-pop .models-table thead th{position:static;padding-block:0.625rem 0.5rem;border-bottom-color:var(--line);vertical-align:bottom;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col);white-space:nowrap}
/* Un bouton ne reprend pas seul les capitales ni l'espacement de son en-tête */
.mdl-pop .models-table thead .sort{letter-spacing:inherit;text-transform:inherit}
.mdl-pop .models-table thead th[aria-sort]{color:var(--text)}
.mdl-pop .models-table thead th[aria-sort] .sort .ico{opacity:1;color:var(--accent-ink)}
.mdl-pop .models-table .r{text-align:end}
/* « Le plus bas » est un nombre : la colonne et son en-tête partent du bord droit, comme « Fournisseurs » (règle du 28/10) */
.mdl-pop .models-table td.lowest,.mdl-pop .models-table thead th:nth-child(5),.lab-page .lab-table thead th:nth-child(3){text-align:end}
@media (min-width:37.5625em){.lab-page .lab-table td.lowest{text-align:end}}
.mdl-pop .models-table tbody tr{transition:background-color 120ms ease}
.mdl-pop .models-table tbody tr:hover{background:var(--row-hover)}
.mdl-pop .models-table .rank{width:2.5rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;color:var(--text-3);white-space:nowrap}
/* Écart de rang sur 24 h (Chloé, 29/10/2026) : petit, chiffres tabulaires, largeur fixe pour que les rangs et les écarts restent
   alignés ; vert --accent-ink et rouge --warn (contraste AA mesuré en clair et en sombre), « Nouveau » en --text-3. Sur le papier, en noir.
   Au-dessus du lien étiré de la rangée (liste : .models-table tbody th a::after ; accueil : .b-name::after), sinon le pointeur ouvrait
   la bulle de l'identifiant et le toucher la page du modèle au lieu de la bulle de l'écart (Imani, 29/10) */
.rk-mv{position:relative;z-index:1;display:inline-block;min-width:3ch;margin-inline-start:0.375rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;cursor:default}
.rk-mv.up{color:var(--accent-ink)}.rk-mv.down{color:var(--warn)}.rk-mv.new{color:var(--text-3)}
/* Accueil : l'écart suit le nom du modèle, jamais au bout de la cellule où, collé au prix, il se lisait comme une variation du prix */
.b-mv{flex:none;min-width:0;margin-inline-start:-3px}
.b-model:has(.b-mv) .b-who{flex:0 1 auto}
@media print{.rk-mv,.rk-mv.up,.rk-mv.down,.rk-mv.new{color:#000}}
.mdl-name{display:flex;align-items:center;gap:0.6875rem;min-width:0}
.mdl-name>span{min-width:0;line-height:1.3}
.mdl-pop .models-table tbody th{font-weight:400}
.mdl-pop .models-table tbody th a{font-size:0.90625rem;font-weight:500}
.mdl-pop .models-table tbody th a b,.az-list a b{font-weight:600;color:var(--accent-ink)}
.mdl-pop .models-table tbody th code{margin-top:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;color:var(--text-3);overflow-wrap:anywhere}
.mdl-pop .models-table .lab-cell{display:table-cell}
.mdl-pop .models-table td.lab-cell{font-size:0.8125rem;color:var(--text-2)}
.mdl-pop .models-table td.num{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;color:var(--text-2)}
.mdl-pop .models-table td.lowest{font-size:0.875rem;font-weight:600;color:var(--accent-ink);white-space:nowrap}
.mdl-none{margin:0;padding:1.125rem 1rem;font-size:0.84375rem;color:var(--text-col)}
.mdl-all .mdl-none{padding-block:1.375rem;border-top:1px solid var(--line-soft);font-size:0.875rem;color:var(--text-2)}
.mdl-all .panel-head{border-bottom:0}
.az-group{display:grid;grid-template-columns:3.25rem minmax(0,1fr);border-top:1px solid var(--line-soft)}
.az-letter{margin:0;padding:0.6875rem 1rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.9375rem;font-weight:500;letter-spacing:0;line-height:1.5;color:var(--accent-ink)}
.az-list{margin:0;padding:0.5625rem 1rem 0.5625rem 0;list-style:none;columns:13.125rem 4;column-gap:1.75rem}
.az-list li{break-inside:avoid}
.az-list a{display:block;padding:3px 0;font-size:0.84375rem;line-height:1.45;color:var(--text)}
.az-list a:hover{color:var(--accent-ink);text-decoration:none}
.models-page [data-hide],.providers-page [data-hide]{display:none}
/* Annuaire des fournisseurs (maquette B) : quatre cartes (deux trient, deux filtrent), source des prix, tableau */
.prov-cards{margin-top:1.375rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16.25rem),1fr));gap:0.75rem}
.prov-card{display:flex;flex-direction:column;gap:0.625rem;min-width:0;padding:0.875rem 1rem 0.75rem;border:1px solid var(--line);background:var(--bg);color:var(--text)}
.prov-card-top{display:flex;justify-content:space-between;gap:0.5rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase}
.prov-card-kick{color:var(--text-col)}
.prov-card-hint{color:var(--text-3);white-space:nowrap}
.prov-card-main{display:flex;align-items:baseline;justify-content:space-between;gap:0.625rem;min-width:0}
.prov-card-big{min-width:0;font-size:1.25rem;font-weight:600;line-height:1.15;letter-spacing:-.02em;overflow-wrap:anywhere}
.prov-card-sub{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;color:var(--text-2);white-space:nowrap}
/* Les graphiques prennent la place des phrases retirées : 64 px au lieu de 40, posés en bas de la carte, pour que les
   barres des cartes de tri et la bande des cartes de filtre partagent la même ligne de base */
.prov-card-gfx{display:flex;align-items:flex-end;height:4rem;margin-top:auto}
.prov-bars{display:block;width:100%;height:4rem;overflow:visible}
.prov-bars rect{fill:var(--bar)}
.prov-bars rect.top{fill:var(--accent-ink)}
.prov-band{display:block;width:100%;height:0.5rem}
.prov-band .all{fill:color-mix(in srgb,var(--accent-ink) 25%,transparent)}
.prov-band .all.on{fill:var(--accent-ink)}
.prov-band .part{fill:var(--bar)}
.prov-band .none{fill:color-mix(in srgb,var(--warn) 25%,transparent)}
.prov-band .none.on{fill:var(--warn)}
@media (prefers-reduced-motion:no-preference){
.prov-bars rect{transform-box:fill-box;transform-origin:center bottom;animation:grow-y 700ms cubic-bezier(.2,.7,.2,1) backwards}
.prov-band rect{transform-box:fill-box;transform-origin:0 50%;animation:grow-x 800ms cubic-bezier(.2,.7,.2,1) backwards}
}
@keyframes grow-y{from{transform:scaleY(0)}}
@keyframes grow-x{from{transform:scaleX(0)}}
.prov-card-note{font-size:0.71875rem;line-height:1.4;color:var(--text-col)}
.prov-list{margin-top:1.5rem}
.prov-src{display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem}
.prov-src>span:first-child{color:var(--text-col)}
.seg-links{display:flex;flex-wrap:wrap;max-width:100%;border:1px solid var(--line-strong);background:var(--bg)}.seg-links>*{min-width:0;white-space:normal}
.seg-links a{display:inline-flex;align-items:center;gap:.6em;min-height:1.75rem;padding:0 0.625rem;border-inline-start:1px solid var(--line);color:var(--text-2);white-space:normal;overflow-wrap:anywhere}
.seg-links a:first-child{border-inline-start:0}
.seg-links a:hover{color:var(--text);text-decoration:none}
.seg-links a span{color:var(--text-3)}
.seg-links a[aria-current]{background:var(--text);color:var(--bg)}
.seg-links a[aria-current] span{color:var(--disabled)}
@media (pointer:coarse){.seg-links a{min-height:2.75rem}}
.prov-list .table-wrap{overflow-x:auto;overflow-y:hidden}
.prov-table{width:100%;min-width:51.25rem;border-collapse:collapse}
.prov-table th,.prov-table td{padding:0.625rem 0.5625rem;border:0;border-bottom:1px solid var(--line-soft);text-align:start;vertical-align:middle;background:none}
.prov-table tr>:first-child{padding-inline-start:1rem}
.prov-table tr>:last-child{padding-inline-end:1rem}
.prov-table thead th{position:static;padding-block:0.625rem 0.5rem;border-bottom-color:var(--line);vertical-align:bottom;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col);white-space:nowrap}
.prov-table thead .sort{letter-spacing:inherit;text-transform:inherit}
.prov-table thead th[aria-sort]{color:var(--text)}
.prov-table thead th[aria-sort] .sort .ico{opacity:1;color:var(--accent-ink)}
.prov-table .r{text-align:end}
.prov-table tbody tr{position:relative;transition:background-color 120ms ease}
.prov-table tbody tr:hover{background:var(--row-hover)}
.prov-table tbody th{font-weight:400}
.prov-table tbody th a{min-width:0;font-size:0.90625rem;font-weight:500;line-height:1.25;color:var(--text);white-space:normal;overflow-wrap:anywhere}
.prov-table tbody th a::after{content:"";position:absolute;inset:0}
/* Nom de l'agrégateur et « +N » de la colonne « Source des prix » au-dessus du lien de rangée : bulle au pointeur et au toucher,
   et un toucher n'ouvre pas la fiche (relevé d'Imani du 28/10/2026) */
.prov-table tbody td [data-tip]{position:relative;z-index:1}
.prov-table tbody th a:hover{color:var(--accent-ink);text-decoration:none}
.prov-table tbody th a b{font-weight:600;color:var(--accent-ink)}
.prov-table td.num{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.78125rem;color:var(--text-2)}
.prov-table td.n-off{color:var(--text)}
/* « Moins cher » : un compte de désignations ; zéro en retrait, comme un « non publié » */
.prov-table td.n-ch{color:var(--text)}
.prov-table td.n-ch.zero{color:var(--text-3)}
.prov-table td.nt{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.71875rem;color:var(--text);white-space:nowrap}
.prov-table td.nt.all{color:var(--accent-ink)}
.prov-table td.nt.none{color:var(--text-3)}
.prov-table td.src{font-size:0.8125rem;color:var(--text-2);white-space:nowrap}
/* Mobile (< 600 px) : les deux tableaux deviennent des cartes (nom, puis valeurs deux par deux avec leur titre en petit mono) ;
   les titres de colonnes (et leurs boutons de tri) disparaissent, le tri des fournisseurs passe par la rangée « Trier »
   (.prov-sort, provider-view.ts) */
@media (max-width:37.5em){
.dir-page .prov-table,.dir-page .lab-table{min-width:0;display:block}
.dir-page .prov-table thead,.dir-page .lab-table thead{display:none}
.dir-page .prov-table tbody,.dir-page .lab-table tbody{display:block}
.dir-page .prov-table tbody tr,.dir-page .lab-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 0.75rem;padding:0.75rem 1rem;border-bottom:1px solid var(--line-soft)}
.dir-page .prov-table tbody tr[data-hide],.dir-page .lab-table tbody tr[data-hide]{display:none}
/* Fournisseurs : cinq valeurs depuis « Moins cher » (29/10/2026) sur deux lignes, comme les quatre d'avant : les trois comptes
   (courts) sur la première, « Sans entraînement » et la source sur la seconde, chacune sur une demi-carte comme avant. Avec deux
   pistes, la source restait seule sur une troisième ligne (+38 px par carte, relevé d'Imani sur #1240) */
.dir-page .prov-table tbody tr{grid-template-columns:repeat(6,minmax(0,1fr))}
.dir-page .prov-table tbody td{grid-column:span 2}
.dir-page .prov-table tbody td.nt,.dir-page .prov-table tbody td.src{grid-column:span 3}
.dir-page .lab-table tbody tr:last-child{border-bottom:0}
.dir-page .prov-table tbody th,.dir-page .lab-table tbody th{grid-column:1/-1;padding:0 0 0.375rem;border:0}
/* La rangée devient une grille : le th en est un élément, et son z-index de tableau (.table th, 5) passe alors le lien de
   rangée (::after) au-dessus de toute la carte, bulles comprises. Ramené à auto, le nom de l'agrégateur et le « +N » restent
   au-dessus (.prov-table tbody td [data-tip]) : bulle au toucher, sans ouvrir la fiche */
.dir-page .prov-table tbody th{z-index:auto}
.dir-page .prov-table tbody td,.dir-page .lab-table tbody td{padding:0;border:0;text-align:start;min-width:0}
.dir-page .prov-table td[data-l]::before,.dir-page .lab-table td[data-l]::before{content:attr(data-l);display:block;margin-bottom:2px;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);white-space:normal}
.dir-page .prov-table td.nt,.dir-page .prov-table td.src{white-space:normal}
.dir-page .lab-table td.at{grid-column:1/-1;white-space:normal}
.dir-page .prov-table tr>:first-child,.dir-page .prov-table tr>:last-child,.dir-page .lab-table tr>:first-child,.dir-page .lab-table tr>:last-child{padding-inline:0}
.ladder-ticks .lt-alt{display:none}
.ladder-ticks text{font-size:0.5625rem}
.ladder .val.late{text-anchor:end;transform:translateX(-1.5rem);paint-order:stroke;stroke:var(--bg);stroke-width:3px}
}
/* Liste des fournisseurs, de 601 à 899 px : mêmes cartes que sur téléphone, les cinq valeurs sur une ligne ; le tri
   passe par la rangée « Trier ». À partir de 900 px le tableau tient (six colonnes depuis « Moins cher », 29/10/2026 ; à
   800 px le nom n'y avait plus qu'une lettre par ligne) : une carte par ligne y redisait cinq libellés pour chaque
   fournisseur. Les trois comptes, courts, prennent moins de place que « Sans entraînement » et que la source : « Page du
   fournisseur » tient sur sa ligne dès 601 px (avec quatre valeurs égales, elle passait à la ligne sous 700 px). Le tableau des labos garde sa règle */
@media (min-width:37.5625em) and (max-width:56.1875em){
.dir-page .prov-table{min-width:0;display:block}
.dir-page .prov-table thead{display:none}
.dir-page .prov-table tbody{display:block}
.dir-page .prov-table tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,3fr)) minmax(0,5fr) minmax(0,6fr);align-items:end;gap:2px 0.75rem;padding:0.75rem 1rem;border-bottom:1px solid var(--line-soft)}
/* En anglais, « No training on prompts » est le plus long libellé : sa piste passe devant la source (« Provider page », plus
   courte que « Page du fournisseur »). Sur la feuille Letter, il tenait sinon sur deux lignes dans chaque bloc : 19 feuilles au
   lieu de 17 (relevé d'Imani sur #1240) */
:lang(en) .dir-page .prov-table tbody tr{grid-template-columns:repeat(3,minmax(0,3fr)) minmax(0,6fr) minmax(0,5fr)}
.dir-page .prov-table tbody tr[data-hide]{display:none}
.dir-page .prov-table tbody th{grid-column:1/-1;padding:0 0 0.375rem;border:0;z-index:auto}
.dir-page .prov-table tbody td{padding:0;border:0;text-align:start;min-width:0}
.dir-page .prov-table td[data-l]::before{content:attr(data-l);display:block;margin-bottom:2px;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);white-space:normal}
.dir-page .prov-table td.nt,.dir-page .prov-table td.src{white-space:normal}
.dir-page .prov-table tr>:first-child,.dir-page .prov-table tr>:last-child{padding-inline:0}
}
.src-dot{display:inline-block;width:0.4375rem;height:0.4375rem;margin-inline-end:0.5rem;background:var(--disabled)}
.src-dot.on{background:var(--accent-ink)}
.src-more{color:var(--text-3);font-variant-numeric:tabular-nums;cursor:help}
.prov-more{margin:0;padding:0.625rem 1rem}
.prov-more .btn{height:1.875rem;padding:0 0.75rem;font-size:0.65625rem}
@media (pointer:coarse){.prov-more .btn{height:2.75rem}}
@media (max-width:43.75em){.models-table .lab-cell{display:none}.models-table th,.models-table td{padding-inline:0.625rem}}
/* Petit écran : les en-têtes triables passent à la ligne, la colonne de prix n'impose plus sa largeur (débordement de 57 px
   à 375 px) */
@media (max-width:30em){.models-table thead th{white-space:normal;vertical-align:bottom}.models-table thead .sort{white-space:normal;text-align:end;line-height:1.25}.models-table .lowest{min-width:0}}

/* Indice de marché (maquette B) : une carte par famille, le graphique des niveaux publiés, le tableau des deux séries,
   le bandeau des corrections, la méthode. Couleur de chaque famille : --fam, posée par data-fam (sigle de la maquette) */
[data-fam=frt]{--fam:var(--warn)}[data-fam=cmp]{--fam:var(--amber)}[data-fam=cod]{--fam:var(--violet)}
[data-fam=owl]{--fam:var(--green)}[data-fam=owm]{--fam:var(--teal)}[data-fam=ows]{--fam:var(--blue)}
.ix-top{padding-bottom:1rem;border-bottom:1px solid var(--line)}
.ix-top .page-title{margin:0;font-size:clamp(2.125rem,4vw,3.25rem);line-height:1;letter-spacing:-.04em}
.ix-top .ix-lead{margin-top:0.625rem}
.ix-top .lead{margin:0.5rem 0 0;max-width:60ch;font-size:0.875rem;line-height:1.55;color:var(--text-2)}
.ix-meta{margin-top:0.5rem;font-size:0.8125rem;color:var(--text-3)}
/* Une date ne se coupe pas entre le jour et l'année */
.ix-meta time{white-space:nowrap}
.ix-chips{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0.75rem 0 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
.ix-chips span{display:inline-flex;align-items:center;gap:0.375rem;min-height:1.625rem;padding:0 0.5rem;border:1px solid var(--line);background:var(--bg)}
.ix-series{margin-top:1rem}
.ix-series>.ix-meta{margin:0 0 0.625rem}
.ix-grid-note{max-width:none;font-size:0.78125rem;line-height:1.45;color:var(--text-2)}
.ix-row .fl{font-size:2.75rem}
.ix-table-fold+.ix-how,.ix-other+.ix-how{margin-top:1.5rem}
.ix-star{display:inline-block;margin-inline-start:0.25rem;padding:0 0.25rem;font-family:var(--sans);font-size:0.9375rem;font-weight:600;line-height:1;color:var(--text-2);text-decoration:none}
.ix-star:hover{color:var(--text)}
.ix-notes :target{color:var(--text)}
.ix-published{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0.25rem 1rem;max-width:none;margin:0.625rem 0 0;font-size:0.8125rem;color:var(--text-3)}
.ix-unit{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);white-space:nowrap}
.ix-notes{display:grid;gap:0.25rem;margin-top:1.75rem;padding-top:0.75rem;border-top:1px solid var(--line-soft)}
.ix-notes .ix-meta{margin:0;font-size:0.78125rem;line-height:1.5;color:var(--text-2)}
/* Anneaux des repères de famille aux grandes tailles : 1,5 px comme dans la maquette (ixLogo : 1,5 px dès 24 px de côté) */
.ix-row .fl[class*=fl-ow] i,.ix-t-name .fl[class*=fl-ow] i{border-width:1.5px}
.ix-chips .ix-chip-flow{display:block;padding-block:0.25rem;line-height:1.4}
.ix-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,23.75rem),1fr));gap:1px;border:1px solid var(--line);background:var(--line)}
.ix-row{display:flex;flex-direction:column;gap:0.5rem;min-width:0;padding:0.875rem 1rem 0.375rem;background:var(--bg);box-shadow:inset 0 3px 0 var(--fam,var(--text-col))}
.ix-name{position:relative;display:flex;align-items:center;gap:0.625rem;min-width:0}
.ix-id{flex:1;min-width:0;line-height:1.25}
.ix-tk{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;font-weight:600;letter-spacing:.06em;color:var(--fam,var(--text-2))}
.ix-id .ix-tk{display:block}
.ix-name h3{margin:0;font-size:0.9375rem;font-weight:500;letter-spacing:0;text-wrap:balance}
/* Le nom de la famille passe à la ligne, jamais coupé : à l'échelle du bureau (racine à 90 %) le nom français le plus
   long ne tenait plus sur une ligne et finissait en points de suspension. Téléphone : aligné en haut */
@media (max-width:38.6875em){.ix-name{align-items:flex-start}}
.ix-count{position:absolute;top:1px;inset-inline-end:0;flex:none;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-col);white-space:nowrap}
.ix-value{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:0.625rem}
.ix-value .num{font-size:2.5rem;font-weight:500;line-height:1;letter-spacing:-.035em}
.ix-chip{display:inline-flex;align-items:center;gap:.5em;min-height:1.375rem;padding:0 0.5rem;background:var(--raise);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);white-space:nowrap}
.ix-change{display:inline-flex;align-items:center;gap:0.3125rem;font-size:0.8125rem;color:var(--text-2)}
.ix-change.down{color:var(--accent-ink)}
.ix-change.up{color:var(--warn)}
/* Variation du niveau quand la composition a changé : ni flèche ni couleur, jamais présentée comme un mouvement du marché */
.ix-change.comp{color:var(--text-3)}
.ix-none{margin:0;font-size:0.875rem;color:var(--text-3)}
/* Courbe par famille : valeurs publiées, même version de méthode ; tracé seul, sans axe (le chiffre est au-dessus) */
.ix-spark{display:block;width:100%;height:2rem;overflow:visible}
.ix-spark path{fill:none;stroke:var(--fam,var(--text-2));stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* Moins de deux publications : une phrase à la place de la courbe manquante, jamais un vide */
.ix-spark-soon{margin:0;min-height:2rem;font-size:0.78125rem;line-height:1.35;color:var(--text-3)}
/* Mouvement du marché (variation à mêmes modèles), modèles entrés et sortis, correction : au pied de la carte */
.ix-moves{display:flex;flex-direction:column;gap:0.25rem;padding-top:0;border-top:0;font-size:0.78125rem;color:var(--text-2)}
.ix-moves p{margin:0}
.ix-same{font-weight:500}
.ix-flow{font-size:0.78125rem;color:var(--text-3)}
.ix-flow-k{display:block}
.ix-flow ul,.ix-flow summary+ul{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0.25rem 0.5rem}
.ix-flow li{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;overflow-wrap:anywhere}
.ix-flow li a{color:var(--text-2)}
.ix-flow summary{cursor:pointer;color:var(--text-3);width:max-content;padding:0.25rem 0}
.ix-flow summary:hover{color:var(--text)}

.ix-corr-link{align-self:center;padding:2px 0.375rem;border:1px solid currentColor;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;font-weight:600;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;text-decoration:none;color:var(--warn)}
.ix-corr-link:hover{background:var(--warn);color:var(--bg)}
.ix-value{justify-content:flex-start}
.ix-table .ix-corr-link{margin-inline-start:0.5rem}
/* Page de l'indice, règle du 10/10 : aucune phrase d'explication à l'écran. La phrase de tête et les notes restent dans le document
   (lues, écrites au papier) ; la règle de la série est la bulle de l'unité ; il reste deux données en bas : prochaine publication, version */
@media screen{.index-page .ix-lead,.index-page .ix-off{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.ix-unit[data-tip],.ix-change.comp[data-tip],.ix-state[data-tip]{cursor:help}
/* Libellé d'état : un mot en pastille ; sur une carte il passe au-dessus du lien qui couvre la carte, sinon sa bulle ne s'ouvre pas au pointeur */
.ix-state{display:inline-block;padding:1px 0.375rem;border:1px solid var(--line-strong);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;font-weight:500;letter-spacing:.05em;line-height:1.5;text-transform:uppercase;color:var(--text-2);white-space:nowrap}
.ix-row .ix-state,.ix-row .ix-change.comp[data-tip]{position:relative;z-index:1}
/* Carte : une ligne au plus sous le chiffre. Variations en pastilles (valeur, puis libellé d'un ou deux mots quand il y en a deux),
   compteurs des modèles entrés et sortis ; définitions et listes en bulle. Toutes au-dessus du lien qui couvre la carte */
/* (classe « ix-vars » : « ix-chips » est un ancien composant dont les règles encadraient chaque morceau) */
.ix-vars{display:flex;flex-wrap:nowrap;align-items:center;gap:0.25rem 0.75rem;margin:0;min-height:1.375rem;font-size:0.78125rem;white-space:nowrap}
.ix-vars>*{position:relative;z-index:1;cursor:help}.ix-vars .ix-change{margin-inline-start:0;gap:0.25rem}
@media (max-width:30em){.ix-vars{flex-wrap:wrap}}
.ix-chg-v{font-family:var(--mono);font-stretch:var(--mono-stretch);font-variant-numeric:tabular-nums;white-space:nowrap}
.ix-chg-k{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.ix-cnt{display:inline-flex;align-items:center;padding:0 0.3125rem;border:1px solid var(--line-strong);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;line-height:1.5;color:var(--text-2)}
/* Les six cartes gardent la même hauteur d'une rangée à l'autre */
.ix-list{grid-auto-rows:1fr}
.ix-same-head{margin-block:0 0.625rem}
/* Page d'une famille : les compteurs des modèles entrés et sortis, à la place de la variation du niveau ; la liste suit en clair */
.ixf-cnts{display:flex;gap:0.375rem;margin:0}
/* Papier : pas de bulle ; chaque pastille écrit sa donnée en toutes lettres (« −7,4 % vs la publication précédente »), pas l'explication */
@media print{.ix-vars [aria-hidden]{display:none}.ix-vars .sr:not(.ix-np){position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}}
/* Tableau étroit (trois colonnes dans moins de 760 px, puis blocs du téléphone) : un libellé d'état plus large que sa case passe à la ligne, il ne sort jamais de la case */
@media (max-width:47.5em){.ix-table .ix-state{white-space:normal}}
/* Tableau : montants seuls, à droite, sur une grille (alignés sur la virgule, écriture inchangée) ; l'unité sous le libellé de l'en-tête.
   Partie entière dans une piste alignée à droite, décimales dans une piste alignée à gauche, chiffres tabulaires. La pastille
   « Corrigé » suit le montant ; les pistes ont une largeur fixe, donc les virgules tombent sous les virgules avec ou sans pastille */
@media (min-width:47.5625em){.ix-table td[data-series]{white-space:nowrap}}
.ix-table .ix-t-v{display:inline-block;font-variant-numeric:tabular-nums}
.ix-n-i{display:inline-block;min-width:3ch;text-align:end}.ix-n-d{display:inline-block;min-width:4ch;text-align:start}
.ix-table .ix-th-p .th-u{display:block}
@media (max-width:37.5em),print{.ix-table .cur{display:inline}.ix-table .ix-th-p .th-u{display:none}.ix-n-i,.ix-n-d{min-width:0}}

/* Pied de carte : le lien vers la page de la famille ; il couvre toute la carte (::after), les autres commandes de la carte restent
   au-dessus de lui */
.ix-row{position:relative}
.ix-fam-link{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;margin-top:auto;padding:0.625rem 0 0.5rem;border-top:1px solid var(--line-soft);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.ix-fam-link::after{content:"";position:absolute;inset:0}
.ix-fam-link .ico{width:0.875rem;height:0.875rem;color:var(--accent-ink);transition:transform var(--t-ui) ease}
.ix-fam-link:hover{color:var(--text);text-decoration:none}
.ix-row:hover .ix-fam-link .ico{transform:translateX(3px)}
.ix-fam-link:focus-visible{outline:0}.ix-fam-link:focus-visible::after{outline:2px solid var(--accent-ink);outline-offset:-2px}
.ix-row .info,.ix-row .ix-corr-link,.ix-row details,.ix-row .ix-flow a{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.ix-fam-link .ico{transition:none}}
/* Page d'une famille (/index/<code>) : le niveau domine ; à gauche les modèles comptés, à droite le niveau par série et la règle */
.ixf-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:end;padding-bottom:1.375rem;border-bottom:1px solid var(--line)}
.ixf-title{display:flex;align-items:center;gap:0.875rem;flex-wrap:wrap}
.ixf-title .fl{font-size:2.5rem}
.ixf-title .page-title{margin:0}
.ixf-lede{margin:0.75rem 0 0;max-width:62ch;font-size:0.9375rem;line-height:1.5;color:var(--text-2);text-wrap:pretty}
.ixf-level{margin:0;text-align:end;max-width:none}
.ixf-level>.num{display:block;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:clamp(2.125rem,4.4vw,3rem);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--text);white-space:nowrap}
.ixf-level .ix-t-none{display:block;font-size:0.875rem;color:var(--text-2)}
.ixf-unit{display:block;margin-top:0.5rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.ixf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,21.25rem);gap:2.5rem;margin-top:1.625rem;align-items:start}
.ixf-grid h2,.ixf-more summary{margin:0 0 0.625rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.ixf-of{color:var(--text-3)}
.ixf-models{columns:3 13.75rem;column-gap:1.5rem;margin:0;padding:0;list-style:none;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;line-height:1.9}
/* Un identifiant long passe à la ligne (retrait de la suite) : jamais coupé par des points de suspension, il n'y a pas d'autre endroit où le lire */
.ixf-models li{break-inside:avoid;padding-inline-start:1em;text-indent:-1em;overflow-wrap:anywhere}
.ixf-models a,.ixf-models span{color:var(--text-2)}
.ixf-models a:hover{color:var(--text)}
.ixf-more{margin-top:1.5rem;padding-top:0.875rem;border-top:1px solid var(--line-soft)}
.ixf-more summary{cursor:pointer;width:max-content;max-width:100%}
.ixf-more summary:hover{color:var(--text)}
.ixf-side{display:grid;gap:1.5rem}
.ixf-why{padding-top:0.5rem;border-top:1px solid var(--line-soft)}
.ixf-side p{margin:0 0 0.5rem;max-width:none;font-size:0.84375rem;line-height:1.55;color:var(--text-2)}
.ixf-kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0.5rem 1rem;margin:0;font-size:0.84375rem}
.ixf-kv dt{color:var(--text-2)}
.ixf-kv dd{margin:0;text-align:end;font-family:var(--mono);font-stretch:var(--mono-stretch);color:var(--text);white-space:nowrap}
.ixf-trend{display:grid;gap:0.375rem;margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid var(--line-soft)}
/* Série sans valeur : la phrase (« moins de 3 modèles… ») passe à la ligne, sur sa propre ligne sous le nom de la série ; en une ligne insécable elle
   élargissait la page sur téléphone */
.ixf-kv dd .ix-t-none{white-space:normal;font-family:var(--sans);color:var(--text-2)}
.ixf-kv dd:has(.ix-t-none){grid-column:1/-1;margin-top:-0.25rem;text-align:start;white-space:normal}
.ixf-kv dd.ixf-chg{grid-column:1/-1;display:grid;gap:0.25rem;margin-top:-2px;text-align:start;font-family:var(--sans);white-space:normal}.ixf-chg p{margin:0}
.ixf-page .ix-corrections{margin-top:1.75rem}
.ixf-sib{margin-top:1.875rem;padding-top:1rem;border-top:1px solid var(--line)}
.ixf-sib ul{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0;padding:0;list-style:none}
.ixf-sib a{display:inline-flex;align-items:center;gap:0.5rem;min-height:2.125rem;padding:0 0.625rem;border:1px solid var(--line-strong);background:var(--bg);font-size:0.8125rem;color:var(--text)}
.ixf-sib a:hover{background:var(--raise);text-decoration:none}
.ixf-sib a[aria-current]{border-color:var(--text);font-weight:600}
.ixf-sib .fl{font-size:1rem}
/* Papier : les boutons de passage d'une famille à l'autre n'y servent à rien (ils partaient seuls sur une feuille) ; une carte ne se coupe pas */
@media print{.ixf-sib{display:none}.ix-row{break-inside:avoid;border:1px solid var(--line)}
/* Papier : la grille des cartes ne garde pas son fond (il laissait une bande grise vide là où une carte passait entière à la feuille suivante) ;
   la liste repliée de la seconde série s'imprime ouverte (un pli fermé ne s'ouvre pas sur le papier) */
.ix-list{background:none;border:0;gap:0.5rem}
.ixf-more::details-content{content-visibility:visible;display:block}
.ixf-more summary{list-style:none}.ixf-more summary::-webkit-details-marker{display:none}}
@media (max-width:56.25em){.ixf-head,.ixf-grid{grid-template-columns:minmax(0,1fr)}.ixf-level{text-align:start}.ixf-grid{gap:1.75rem}}
/* Tactile : les listes repliées passent à 44 px. summary garde son affichage natif
   (display:list-item) pour ne pas perdre son triangle : la hauteur vient du padding, pas d'un flex */
@media (pointer:coarse){.ixf-more summary,.ix-flow summary,.ix-evo-data summary{min-height:2.75rem;padding-block:0.75rem}.ix-leg{min-height:2.75rem}.ixf-sib a{min-height:2.75rem}.ixf-models{line-height:2.6}}
.index-page .fine{margin:0.75rem 0 0;font-size:0.78125rem;color:var(--text-col)}
/* Graphique : colonne des graduations, zone des courbes, colonne des étiquettes de fin ; les dates dessous */
.ix-evo{margin-top:1.375rem}
.ix-evo .panel-head .ix-chip{background:transparent;border:1px solid var(--line-strong);font-size:0.6875rem}
.ix-evo-empty{margin:0;padding:0.875rem 1rem;text-align:start;font-size:0.8125rem;line-height:1.5;color:var(--text-col)}
.ix-legend-row{list-style:none;margin:0;padding:0.75rem 1rem 0;display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem}
.ix-leg{display:inline-flex;align-items:center;gap:0.5rem;min-height:1.875rem;padding:0 0.625rem 0 0.3125rem;border:1px solid var(--line-strong);background:transparent;color:var(--text);font:inherit;white-space:nowrap}
button.ix-leg{cursor:pointer;transition:opacity 150ms ease,border-color 150ms ease}
@media (hover:hover) and (pointer:fine){button.ix-leg:hover{border-color:var(--disabled)}}
.ix-leg[aria-pressed=false]{opacity:.45;border-color:var(--line)}
.ix-leg[aria-pressed=false] .ix-leg-name{text-decoration:line-through}
.ix-leg .fl{font-size:1.25rem}
.ix-leg-name{font-size:0.78125rem;color:var(--text-2)}
.ix-leg.is-off{border-style:dashed;border-color:var(--line)}
.ix-leg-note{font-size:0.75rem;color:var(--text-col)}
@media (max-width:38.6875em){.ix-leg{white-space:normal;padding-block:0.25rem}}
.ix-chart{display:grid;grid-template-columns:3.375rem minmax(0,1fr) 7.375rem;grid-template-rows:18.75rem 2.125rem;margin-top:1.125rem;padding:0 1rem 0.75rem}
.ix-chart svg{display:block;width:100%;height:100%;overflow:visible}
.ix-chart-plot{position:relative;min-width:0}
.ix-chart-plot svg{position:absolute;inset:0}
.ix-chart-grid line{stroke:var(--line-soft);stroke-width:1;stroke-dasharray:3 3}
.ix-chart-lines path{fill:none;stroke:var(--fam);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* Publication où un modèle est entré ou sorti de la famille : un anneau sur le point, jamais une couleur de mouvement */
.ix-chart-comp,.ix-comp-key circle{fill:var(--bg);stroke:var(--fam,var(--text-2));stroke-width:1.5}
.ix-comp-key{flex:none;width:0.75rem;height:0.75rem}
.ix-evo-note{display:flex;align-items:center;gap:0.5rem;margin:0;padding:0 1rem 0.625rem;font-size:0.78125rem;color:var(--text-col)}
.ix-chart-dots rect{fill:var(--fam);stroke:var(--bg);stroke-width:3;paint-order:stroke;transform:translate(-0.25rem,-0.25rem)}
.ix-chart text{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;fill:var(--text-3)}
.ix-chart-y text{text-anchor:end;dominant-baseline:middle;transform:translateX(-0.625rem)}
.ix-chart-ends text{font-size:0.6875rem;fill:var(--text-p);dominant-baseline:middle}
.ix-chart-ends .ix-tk{fill:var(--fam);font-size:0.6875rem}
.ix-chart-x{grid-column:2}
.ix-chart-x text{text-anchor:middle;transform:translateY(0.875rem);text-transform:uppercase}
.ix-chart-x text[data-at=start]{text-anchor:start}
.ix-chart-x text[data-at=end]{text-anchor:end}
.ix-chart [data-fam][hidden]{display:none}
/* Survol du graphique : réticule, repères creux et bulle de la publication la plus proche du pointeur (le script retire
   hidden). Aucune animation : un survol se répète sans cesse. Largeur au contenu (width:max-content) : placée contre le
   bord droit, la bulle ne se replie pas sur sa largeur minimale. Sous 620 px elle se cale à gauche du cadre, sigle et
   valeur seulement (le nom de chaque sigle est dans la légende au-dessus) */
.ix-chart-plot.is-hover{cursor:crosshair}
.ix-chart-hover{pointer-events:none}
.ix-chart-hover g[hidden],.ix-tip[hidden]{display:none}
.ix-chart-hover line{stroke:var(--line-strong);stroke-width:1}
.ix-chart-hover rect{fill:var(--bg);stroke:var(--fam);stroke-width:2;transform:translate(-0.28125rem,-0.28125rem)}
.ix-tip{position:absolute;top:0.25rem;z-index:3;width:max-content;min-width:12.5rem;margin-left:0.875rem;padding:0.5rem 0.625rem;background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow-menu);pointer-events:none}
.ix-tip[data-side=r]{margin-left:0;transform:translateX(calc(-100% - 0.875rem))}
.ix-tip time{display:block;margin-bottom:0.375rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);white-space:nowrap}
.ix-tip ul{display:grid;gap:0.25rem;margin:0;padding:0;list-style:none}
.ix-tip li{display:grid;grid-template-columns:2.125rem minmax(0,1fr) auto 0.75rem;align-items:center;gap:0.5rem;font-size:0.78125rem;white-space:nowrap}
.ix-tip .ix-tk{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;color:var(--fam)}
.ix-tip-name{color:var(--text-2)}
.ix-tip .num{color:var(--text);text-align:right}
.ix-tip .ix-comp-key{width:0.75rem;height:0.75rem}
@media (max-width:38.6875em){.ix-tip,.ix-tip[data-side=r]{left:0!important;margin-left:0;transform:none;min-width:0}.ix-tip li{grid-template-columns:2.125rem auto 0.75rem}.ix-tip-name{display:none}}
@media (max-width:38.6875em){.ix-chart{grid-template-columns:2.75rem minmax(0,1fr) 5.75rem}.ix-chart-x text[data-at=mid]{display:none}}
.ix-evo-data{padding:0 1rem 0.75rem;font-size:0.78125rem}
.ix-evo-data summary{cursor:pointer;color:var(--text-col);width:max-content;padding:0.25rem 0}
.ix-evo-data summary:hover{color:var(--text)}
.ix-evo-data .table-wrap{margin-top:0.5rem;overflow-x:auto}
/* En-tête d'une colonne de valeurs : le sigle et le nom ; sur téléphone le sigle seul (le nom reste lu par les lecteurs
   d'écran, et la légende juste au-dessus le donne à l'œil), pour que toutes les colonnes tiennent dans la largeur */
.ix-evo-data thead th .ix-tk{margin-inline-end:0.375rem}
.ix-evo-data .table{margin:0}
@media (max-width:38.6875em){
.ix-th-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ix-evo-data .table{width:100%;font-size:0.75rem}
.ix-evo-data .table th,.ix-evo-data .table td{min-width:0;padding:0.5rem 0.25rem;white-space:nowrap}
.ix-evo-data .table th:first-child{padding-inline-start:0;white-space:normal}
.ix-evo-data .table tbody th{font-size:inherit;font-weight:400}
}
/* Tablette et petit bureau : le nom de la famille passe sous son sigle et à la ligne. Sur une seule ligne, les quatre
   en-têtes demandaient plus de 900 px et le tableau défilait dans son cadre entre 620 et 1000 px environ */
@media (min-width:38.75em) and (max-width:68.6875em){
.ix-evo-data thead th{white-space:normal;vertical-align:bottom}
.ix-evo-data thead th .ix-tk{display:block;margin-inline-end:0}
}
/* Même plage, tableau des deux séries (défini plus bas, d'où .panel dans le sélecteur) : ses en-têtes passent à la ligne.
   En français il demandait 611 px et défilait de 620 à 680 px */
@media (min-width:38.75em) and (max-width:68.6875em){
.panel.ix-table .table{min-width:0;width:100%}
.panel.ix-table thead th{white-space:normal}
}
/* Écran très étroit : la date sans l'année à l'œil (la date entière reste lue par les lecteurs d'écran), pour que les
   cinq colonnes tiennent sans défiler */
.ix-d-short{display:none}
@media (max-width:23.75em){.ix-evo-data{padding-inline:0.75rem}.ix-evo-data .table{font-size:0.6875rem}.ix-evo-data .table th,.ix-evo-data .table td{padding:0.5rem 2px}.ix-d-short{display:inline}.ix-d-full{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* Tableau des deux séries : jamais mêlées, une colonne chacune */
.ix-table{margin-top:1.5rem}
.ix-table .table-wrap{overflow-x:auto}
.ix-table .table{min-width:35rem;margin:0}
/* En-têtes en place : dans une zone qui défile, un en-tête collant se décale de la hauteur de l'en-tête du site */
.ix-table thead th,.ix-evo-data thead th{position:static;background:transparent}
.ix-table thead th{padding:0.75rem 1rem 0.625rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col);text-align:start;white-space:nowrap}
.ix-table thead th+th{color:var(--text)}
.ix-table tbody th,.ix-table tbody td{padding:0.75rem 1rem;border-top:1px solid var(--line-soft);text-align:start;vertical-align:top;white-space:normal}
.ix-table tbody tr{transition:background-color 120ms ease}
@media (hover:hover) and (pointer:fine){.ix-table tbody tr:hover{background:var(--row-hover)}}
.ix-t-name{display:flex;align-items:center;gap:0.625rem;font-size:0.9375rem;font-weight:500}
.ix-t-name .fl{font-size:1.625rem}
.ix-t-v{font-size:1.25rem;font-weight:500}
.ix-table td[data-series=official] .ix-t-v{color:var(--text-p)}
.ix-t-old{font-size:0.75rem;color:var(--warn)}
.ix-t-n{display:block;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.04em;color:var(--text-col)}
.ix-row:target{outline:1px solid var(--accent-ink);outline-offset:-1px}
.ix-row{scroll-margin-top:5rem}
.ix-t-none{display:block;font-size:0.8125rem;color:var(--text-3)}
/* Téléphone : le tableau tient dans la largeur, ses trois colonnes visibles ensemble (jamais une série cachée derrière un défilement) */
@media (max-width:38.6875em){
.ix-table .table{min-width:0;width:100%;table-layout:fixed}
.ix-table thead th,.ix-table tbody th,.ix-table tbody td{padding:0.625rem 0.5rem;white-space:normal;overflow-wrap:anywhere}
.ix-table thead th:first-child,.ix-table tbody th{width:40%;padding-inline-start:0.75rem}
.ix-t-name{align-items:flex-start;gap:0.5rem;font-size:0.84375rem;line-height:1.3}
.ix-t-name .fl{font-size:1.375rem;margin-top:1px}
.ix-t-v{font-size:1rem}
.ix-t-old{display:block}
}
.ix-table .ix-legend{margin:0;padding:0.75rem 1rem;border-top:1px solid var(--line);font-size:0.78125rem;color:var(--text-col)}
/* L'autre série, repliée : les mêmes cartes que la série principale */
.ix-other{margin-top:1rem;font-size:0.84375rem}
.ix-other>summary{background:var(--bg);cursor:pointer;color:var(--text-2);width:max-content;max-width:100%;padding:0.375rem 0}
.ix-other>summary:hover{color:var(--text)}
.ix-other .ix-series{margin-top:0.625rem}
@media (pointer:coarse){.ix-other>summary{min-height:2.75rem;padding-block:0.75rem}}
/* Corrections : un bandeau par série, le motif entier une seule fois */
.ix-corrections{margin-top:1.25rem;padding:0.875rem 1rem;border:1px solid var(--line-strong);background:var(--bg);font-size:0.875rem;line-height:1.5;color:var(--text-2)}
.ix-corrections h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.5rem 0.75rem;margin:0;font-size:0.8125rem;font-weight:500;color:var(--text-2)}
.ix-corrections ul{margin:0.5rem 0 0;padding-inline-start:1.125rem}
.ix-corrections ul+.ix-reason{margin:0.5rem 0 0}
/* Motif d'une correction : publié en anglais seulement (un seul champ dans l'API) ; sur la page française, une étiquette EN le dit à l'œil */
html[lang=fr] .ix-reason[lang=en]::before{content:"EN";display:inline-block;margin-inline-end:0.375rem;padding:0 0.375rem;border:1px solid var(--text-3);border-radius:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;font-weight:500;line-height:1.125rem;letter-spacing:.04em;color:var(--text-2);vertical-align:1px}
/* Avant la première publication, le panneau répond à « que verrai-je le 5 ? » : le format, les familles, les deux séries */
.ix-pending{margin-top:2rem;padding:1.5rem;display:flex;gap:1rem;align-items:flex-start}
.ix-pending>.ico{font-size:1.625rem;color:var(--accent-ink);margin-top:2px}
.ix-pending h2{font-size:clamp(1.25rem,2.2vw,1.625rem);letter-spacing:-.02em}
.ix-pending p{margin-top:0.5rem;max-width:62ch;color:var(--text-2)}
.ix-pending>div{min-width:0;flex:1 1 auto}
.ix-pending .ix-format{margin-top:0.75rem;color:var(--text)}
.ix-pending h3{margin-top:1.5rem;font-size:0.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.ix-family-names{list-style:none;margin:0.625rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(14.375rem,100%),1fr));gap:0 1.75rem;border-top:1px solid var(--line-soft)}
.ix-family-names li{padding:0.6875rem 2px;border-bottom:1px solid var(--line-soft);font-size:0.875rem;color:var(--text-2)}
.ix-legend{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-direction:column;gap:0.625rem;font-size:0.875rem;color:var(--text-2)}
.ix-legend li{display:flex;gap:0.625rem;align-items:baseline}
.ix-legend strong{color:var(--text);font-weight:600}
.ix-legend-mark{flex:none;width:1.375rem;height:0;margin-top:0.5625rem;border-top:2px solid var(--accent-ink);border-radius:0}
.ix-legend li[data-series=official] .ix-legend-mark{border-top-style:dashed;border-top-color:var(--text-2)}
/* Méthode : les étapes numérotées, et la même donnée par l'API */
.ix-how{margin-top:var(--gap-section);display:flex;flex-wrap:wrap;gap:1.25rem;align-items:flex-start}
.ix-steps{flex:2 1 35rem;min-width:0}
.ix-steps .panel-head a{display:inline-flex;align-items:center;gap:0.25rem}
.ix-steps ol{list-style:none;margin:0;padding:0;counter-reset:ix}
.ix-steps li{display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:0 0.5rem;padding:0.8125rem 1rem;border-bottom:1px solid var(--line-soft);font-size:0.875rem;line-height:1.55;color:var(--text-p);text-wrap:pretty;counter-increment:ix}
.ix-steps li::before{content:counter(ix,decimal-leading-zero);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;color:var(--accent-ink)}
.ix-links{margin:0;padding:0.75rem 1rem;font-size:0.84375rem}
.ix-links a{display:inline-flex;align-items:center;gap:0.375rem}
.ix-links{display:flex;flex-wrap:wrap;gap:0.25rem 1.25rem}
.ix-how-fold>summary,.ix-table-fold>summary{display:flex;align-items:center;gap:0.5rem;min-height:2.5rem;padding:0 1rem;cursor:pointer;list-style:none;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.ix-how-fold>summary::-webkit-details-marker,.ix-table-fold>summary::-webkit-details-marker{display:none}
.ix-how-fold>summary::before,.ix-table-fold>summary::before{content:"▸";font-size:0.6875rem;color:var(--text-3)}
.ix-how-fold[open]>summary::before,.ix-table-fold[open]>summary::before{content:"▾"}
.ix-how-fold>summary:hover,.ix-table-fold>summary:hover{color:var(--text)}
.ix-how-fold>summary h2{margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.ix-how-fold[open]>summary{border-bottom:1px solid var(--line)}
.ix-table-fold{margin-top:1rem;border:1px solid var(--line)}
.ix-table-fold[open]>summary{border-bottom:1px solid var(--line)}
.ix-table-fold .ix-table{margin-top:0;border:0}
.ix-reason-fold>summary{cursor:pointer;width:max-content;max-width:100%;padding:0.25rem 0;font-size:0.78125rem;color:var(--text-3)}
.ix-reason-fold>summary:hover{color:var(--text)}
.ix-reason-fold .ix-reason::before{display:none}
@media (pointer:coarse){.ix-how-fold>summary,.ix-table-fold>summary{min-height:2.75rem}.ix-reason-fold>summary{min-height:2.75rem;padding-block:0.75rem}}
.ix-api{flex:1 1 20rem;min-width:0;margin:0}
/* Commande curl : passe à la ligne au lieu d'élargir la page (493 px de contenu à 375 px) */
.ix-api pre{white-space:pre-wrap;overflow-wrap:anywhere}

/* Pages API, MCP, Méthode : en-tête, sommaire collant, blocs de code copiables, paramètres, onglets, parcours */
.doc-head{max-width:55rem}
.facts{list-style:none;margin:1.125rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0.5rem 1.125rem}
.facts li{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.875rem;color:var(--text-2)}
.facts .ico{color:var(--accent-ink)}
.snippet{margin:1rem 0 0;border:1px solid var(--line-soft);border-radius:0;background:var(--surface);overflow:hidden}
.snippet figcaption{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.375rem 0.5rem 0.375rem 0.875rem;border-bottom:1px solid var(--line-soft);font-size:0.78125rem;color:var(--text-3)}
.snippet pre{margin:0;border:0;border-radius:0;background:transparent;white-space:pre-wrap;overflow-wrap:anywhere}
.snippet.base pre{font-size:0.9375rem;color:var(--text)}
.snippet.json pre{max-height:18.75rem;white-space:pre;overflow:auto;color:var(--text-2)}
.copy{display:inline-flex;align-items:center;gap:0.375rem;height:1.875rem;padding:0 0.625rem;border:1px solid var(--line);border-radius:var(--r-ctl);background:transparent;color:var(--text-2);font-size:0.78125rem;font-weight:500;cursor:pointer;transition:color var(--t-ui) ease,border-color var(--t-ui) ease,transform var(--t-press) var(--ease-out)}
.copy:hover{color:var(--text);border-color:var(--text-3)}
.copy:active{transform:scale(0.97)}
.copy.is-done{color:var(--accent-ink);border-color:transparent;background:var(--accent-wash)}
.doc-grid{margin-top:var(--gap-section);display:grid;grid-template-columns:13.75rem minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.toc{position:sticky;top:5.25rem}
.toc ol{list-style:none;margin:0.625rem 0 0;padding:0;display:flex;flex-direction:column;gap:2px;border-inline-start:1px solid var(--line-soft)}
.toc a{display:flex;align-items:center;gap:0.5rem;padding:0.375rem 0.75rem;margin-inline-start:-1px;border-inline-start:2px solid transparent;color:var(--text-2);font-size:0.84375rem;transition:color var(--t-ui) ease,border-color var(--t-ui) ease}
.toc a:hover{color:var(--text);text-decoration:none;border-inline-start-color:var(--accent)}
.toc .method-tag{font-size:0.75rem;padding:1px 0.3125rem}
@media (pointer:coarse){.toc a{min-height:2.75rem}}
.doc-body{min-width:0;max-width:51.25rem}
/* Liens dans le texte courant des pages de documentation : soulignés. La règle générale ne souligne un lien qu'au
   survol, ce qui suffit pour un lien isolé (navigation, bouton, tableau). Dans une phrase, le vert des liens a presque la
   même luminosité que le gris du texte (1,04:1) : on ne les distinguait que par la teinte. Au survol le trait s'épaissit,
   pour garder un retour visible */
.doc-body :is(p,li,dd,td) a:not(.btn),.doc-head .lead a{text-decoration:underline}
.doc-body :is(p,li,dd,td) a:not(.btn):hover,.doc-head .lead a:hover{text-decoration-thickness:2px}
.endpoint-sec{padding-bottom:var(--gap-sub);margin-bottom:var(--gap-sub);border-bottom:1px solid var(--line-soft);scroll-margin-top:5rem}
.endpoint-sec h2{display:flex;align-items:center;gap:0.625rem;font-size:clamp(1.375rem,2.4vw,1.75rem)}
.endpoint-sec h2 code{font-size:.9em;color:var(--text)}
.doc-h3{margin-top:1.375rem;font-size:0.875rem;font-weight:600;color:var(--text-2);letter-spacing:0}
.params{margin:0.625rem 0 0;border-top:1px solid var(--line-soft)}
/* Confidentialité et conditions : le texte anglais dans la mise en page du site */
.legal-note{margin-top:0.875rem;padding:0.625rem 0.875rem;border-radius:var(--r-ctl);background:var(--raise);font-size:0.875rem;color:var(--text-2)}
.legal{max-width:72ch}
.legal h2{font-size:clamp(1.125rem,1.8vw,1.25rem);letter-spacing:-.01em;margin:2rem 0 0.625rem;scroll-margin-top:6rem}
.legal p,.legal li{color:var(--text-2);line-height:1.65}
.legal p{margin:0 0 0.75rem}.legal ul{margin:0 0 0.75rem;padding-inline-start:1.25rem;display:flex;flex-direction:column;gap:0.5rem}
.legal li>ul{margin:0.5rem 0 0;gap:0.375rem}.legal strong{color:var(--text);font-weight:500}.legal code{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:.92em;overflow-wrap:anywhere}
.legal a{overflow-wrap:anywhere}
/* Page API : premiers pas, paramètres avancés repliés ; Méthode : l'essentiel en 4 lignes */
.start-here,.meth-summary{padding:1.25rem 1.375rem;margin:0 0 clamp(1.75rem,4vw,2.75rem)}
.start-here h2,.meth-summary h2{font-size:1.0625rem;letter-spacing:-.01em}
.start-steps{margin:0.75rem 0 0;padding-inline-start:1.375rem;display:flex;flex-direction:column;gap:0.5rem;font-size:0.90625rem;color:var(--text-2)}
.start-steps strong{color:var(--text);font-weight:500}.start-steps code{font-size:0.8125rem;color:var(--accent-ink);overflow-wrap:anywhere}
.start-not{margin-top:0.75rem;max-width:72ch;font-size:0.84375rem;color:var(--text-3)}
.more-params{margin-top:0.25rem}
.more-params summary{display:inline-flex;align-items:center;min-height:1.5rem;padding:0.375rem 0;font-size:0.84375rem;color:var(--text-2);cursor:pointer}
.more-params summary:hover{color:var(--text)}
@media (pointer:coarse){.more-params summary{min-height:2.75rem}}
.more-params .params{margin-top:0.25rem}
.meth-summary{max-width:55rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
/* Liens vers les sections : soulignement discret, accent au survol, 24 px (44 au toucher) (relecture de Zuri) */
@media (pointer:coarse){.meth-summary dt a{min-height:2.75rem}}
@media (max-width:38.75em){.meth-summary div{grid-template-columns:minmax(0,1fr)}}
.params div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:1rem;padding:0.625rem 0;border-bottom:1px solid var(--line-soft)}
.params dt{margin:0}.params dt code{font-size:0.8125rem;color:var(--accent-ink);overflow-wrap:anywhere}
.params dd{margin:0;font-size:0.875rem;color:var(--text-2)}
.method-tag{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;font-weight:600;padding:3px 0.4375rem;border-radius:0;background:var(--accent-wash);color:var(--accent-ink)}
.signals{scroll-margin-top:5rem}
.signals h2,.mcp-install h2,.mcp-tools h2,.exchange h2,.pipeline-sec h2{font-size:clamp(1.375rem,2.4vw,1.75rem);letter-spacing:-.03em}
.signal-list{margin:1rem 0 0}
.signal-list div{display:grid;grid-template-columns:13.75rem minmax(0,1fr);gap:1rem;padding:0.625rem 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.signal-list dt{margin:0}.signal-list dd{margin:0;font-size:0.875rem;color:var(--text-2)}
.doc-links{margin-top:1.25rem}
/* Page API (maquette B) : l'en-tête et la limite de débit côte à côte, les trois premiers pas, puis les points d'accès
   (liste à gauche, détail à droite). Sans script, tous les points d'accès se suivent ; avec script (.is-tabs), un seul */
.api-top{display:flex;flex-wrap:wrap;gap:1.75rem 3rem;align-items:flex-end;padding-bottom:1.625rem;border-bottom:1px solid var(--line)}
.api-head{flex:1 1 28.75rem;min-width:0}
.api-eyebrow{margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.api-head .page-title{margin:0.625rem 0 0;font-size:clamp(2.5rem,5vw,4rem);line-height:.95;letter-spacing:-.045em}
.api-head .lead{margin:1rem 0 0;max-width:56ch;font-size:1rem;line-height:1.55;color:var(--text-2)}
.api-head .fine{margin:0.625rem 0 0;font-size:0.84375rem}
.api-facts{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0.5rem}
.api-facts li{display:inline-flex;align-items:center;gap:0.4375rem;min-height:1.625rem;padding:0 0.5625rem;border:1px solid var(--line-strong);background:var(--bg);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-p);white-space:nowrap}
.api-facts li::before{content:"";width:0.375rem;height:0.375rem;background:var(--accent-ink)}
/* URL de base : une barre, le libellé, l'adresse, le bouton Copier */
/* Téléphone : le libellé au-dessus, et l'adresse entière, sur deux lignes s'il le faut (jamais coupée) */
.api-rate{flex:0 1 26.875rem;min-width:0;padding:1rem 1.125rem 0.875rem;border:1px solid var(--line);background:var(--bg)}
.api-rate-head{display:flex;justify-content:space-between;align-items:baseline;gap:0.625rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.api-rate-head h2{margin:0;font:inherit;font-weight:600;letter-spacing:inherit;color:var(--text)}
.api-rate dl{margin:0}
/* Les lignes et les barres du panneau : RATE_BAR_CSS (src/site/rate-bar.ts), partagées avec la page de demande de clé.
   Ici seulement, la colonne du libellé ne dépasse pas 34 % de la ligne (réglage de ce panneau au téléphone) */
.api-rate .rate-row{grid-template-columns:minmax(0,min(7rem,34%)) minmax(0,1fr)}
.api-rate-note{margin:0.875rem 0 0;font-size:0.75rem;line-height:1.5;color:var(--text-col);text-wrap:pretty}
.api-rate .acct-nudge{margin:0.625rem 0 0;max-width:none;font-size:0.84375rem}
.api-start{margin-top:1.75rem}
.api-start-head{display:flex;align-items:baseline;justify-content:space-between;gap:0.625rem;flex-wrap:wrap}
.api-start-head h2,.api-page .signals h2{margin:0;font-size:1.5rem;font-weight:600;letter-spacing:-.025em}
.api-start-head span{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-col)}
.api-steps{list-style:none;margin:0.875rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));gap:0.75rem}
.api-steps a{display:flex;flex-direction:column;gap:0.625rem;height:100%;min-width:0;padding:0.875rem 1rem 1rem;border:1px solid var(--line);background:var(--bg);color:var(--text);transition:border-color 150ms ease,background-color 150ms ease}
.api-steps a:hover{border-color:var(--disabled);color:var(--text);text-decoration:none}
.api-steps a[aria-current]{border-color:var(--accent-ink);background:var(--surface)}
.api-step-top{display:flex;align-items:center;gap:0.625rem}
.api-step-top strong{font-size:0.9375rem;font-weight:600}
.api-step-n{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;background:var(--raise);color:var(--text-2);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;font-weight:600}
.api-steps a[aria-current] .api-step-n{background:var(--accent-ink);color:var(--bg)}
.api-steps code{display:block;padding:0.5rem 0.625rem;border:1px solid var(--line);background:var(--chrome);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;line-height:1.5;color:var(--accent-ink);overflow-wrap:anywhere}
.api-step-d{font-size:0.8125rem;line-height:1.5;color:var(--text-2);text-wrap:pretty}
.api-page .start-not{margin:0.875rem 0 0;max-width:none;font-size:0.8125rem;color:var(--text-col)}
.api-explorer{margin-top:1.5rem;display:flex;flex-wrap:wrap;align-items:flex-start}
.api-nav{flex:1 1 17.5rem;max-width:100%;min-width:0;padding:0.5rem 0}
@media (min-width:56.25em){.api-nav{position:sticky;top:4.5rem}}
.api-nav-t{margin:0;padding:0.5rem 1rem 0.625rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.api-nav ol{list-style:none;margin:0;padding:0}
.api-nav a{display:flex;flex-direction:column;gap:0.3125rem;padding:0.6875rem 1rem;color:var(--text);box-shadow:inset 2px 0 0 transparent;transition:background-color 150ms ease}
.api-nav a:hover{background:var(--surface);color:var(--text);text-decoration:none}
.api-nav a[aria-current]{background:var(--surface);box-shadow:inset 2px 0 0 var(--accent-ink)}
.api-nav-p{display:flex;align-items:center;gap:0.5rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.8125rem;font-weight:600;color:var(--text-p)}
.api-nav a[aria-current] .api-nav-p{color:var(--text)}
.api-nav .method-tag{padding:1px 0.3125rem;background:var(--raise);color:var(--text-2);font-size:0.625rem;letter-spacing:.04em}
.api-nav a[aria-current] .method-tag{background:var(--accent-ink);color:var(--bg)}
.api-nav-d{font-size:0.78125rem;line-height:1.45;color:var(--text-col);text-wrap:pretty}
.api-eps{flex:999 1 32.5rem;min-width:0;border-inline-start:1px solid var(--line)}
.api-page .endpoint-sec{margin:0;padding:0;border-bottom:1px solid var(--line);scroll-margin-top:5rem}
.api-explorer.is-tabs .endpoint-sec[hidden]{display:none}
.api-ep-head{padding:1rem 1.125rem}
.api-page .endpoint-sec h2{display:flex;align-items:center;gap:0.625rem;margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1.25rem;font-weight:600}
.api-page .endpoint-sec h2 .method-tag{padding:0;background:transparent;color:var(--text-col);font-size:inherit}
.api-page .endpoint-sec h2 code{font-size:inherit}
.api-ep-head .section-sub{margin:0.375rem 0 0;font-size:0.875rem;line-height:1.5;color:var(--text-2)}
.api-page .doc-h3{margin:0.875rem 0 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.api-page .params{margin:0.375rem 0 0;border-top:0}
.api-page .params div{grid-template-columns:minmax(7.5rem,max-content) minmax(0,1fr);gap:0 1.125rem;padding:0.4375rem 0;border-bottom:0;border-top:1px solid var(--line-soft)}
.api-page .params dt code{font-size:0.75rem;color:var(--text)}
.api-page .params dd{font-size:0.8125rem;line-height:1.45}
.api-page .more-params summary{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink)}
.api-eps .snippet{margin:0;border:0;border-top:1px solid var(--line);background:var(--chrome)}
.api-eps .snippet figcaption{padding:0 0 0 0.75rem;min-height:2.125rem;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.api-eps .snippet .copy{height:auto;align-self:stretch;min-height:2.125rem;border:0;border-inline-start:1px solid var(--line);border-radius:0;padding:0 0.875rem;background:transparent;color:var(--accent-ink);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase}
.api-eps .snippet .copy .ico{display:none}
.api-eps .snippet pre{padding:0.6875rem 0.75rem;font-size:0.78125rem}
.api-eps .snippet.json pre{max-height:28.75rem}
.api-eps-note{margin:0;padding:0.625rem 0.75rem;font-size:0.75rem;color:var(--text-col)}
@media (max-width:56.1875em){.api-eps{border-inline-start:0;border-top:1px solid var(--line)}}
.api-page .signals{margin-top:1.875rem}
.api-page .signals .section-sub{margin:0.5rem 0 0;font-size:0.875rem;color:var(--text-2)}
.api-page .signal-list{margin:0.75rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,18.125rem),1fr));gap:0 1.5rem}
.api-page .signal-list div{display:flex;flex-direction:column;align-items:flex-start;gap:0.4375rem;padding:0.75rem 0;border-bottom:0;border-top:1px solid var(--line)}
.api-page .signal-list .chip{padding:2px 0.4375rem;border:1px solid var(--line-strong);background:var(--bg);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text)}
.api-page .signal-list dd{font-size:0.8125rem;line-height:1.5;text-wrap:pretty}
.api-page .doc-links{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:0.625rem 1.5rem;font-size:0.875rem}
.api-page .doc-links a{display:inline-flex;align-items:center;gap:0.375rem}
@media (pointer:coarse){.api-nav a,.api-page .doc-links a{min-height:2.75rem}.api-page .more-params summary{min-height:2.75rem}}
/* Téléphone : un paramètre par ligne, sa description dessous. Sans cette règle, celle des deux colonnes ci-dessus (plus
   précise que la règle générale de .params sous 620 px) laissait un nom long écraser la description hors de l'écran */
@media (max-width:38.75em){.api-page .params div{grid-template-columns:minmax(0,1fr);gap:2px 0}}
.mcp-install{margin-top:var(--gap-section);max-width:51.25rem}
.client-tabs{margin-top:1rem;width:max-content}
@media (scripting:enabled){.client[hidden]{display:none}}
.client h3{margin-top:1.125rem;font-size:0.9375rem}
.mcp-tools{margin-top:var(--gap-section)}
.tool-list{list-style:none;margin:1.125rem 0 0;padding:0;border-top:1px solid var(--line-soft)}
.tool-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"name ask" "params params";gap:0.5rem 2rem;padding:1.125rem 0;border-bottom:1px solid var(--line-soft)}
.tool-name{grid-area:name}.tool-name code{font-size:0.9375rem;font-weight:600;color:var(--accent-ink)}.tool-name p{margin-top:0.25rem;font-size:0.875rem;color:var(--text-2)}
.tool-ask{grid-area:ask;align-self:center;font-size:0.9375rem;color:var(--text)}
.tool-params{grid-area:params;display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem}
.tool-params .label{margin-inline-end:0.25rem}
.tool-params code{font-size:0.75rem;padding:2px 0.4375rem;border-radius:0;background:var(--raise);color:var(--text-2)}
.exchange{margin-top:var(--gap-section);max-width:51.25rem}
.convo{margin-top:1rem;padding:1.25rem;display:flex;flex-direction:column;gap:0.75rem}
/* Échange MCP : l'appel d'outil passe à la ligne au lieu d'élargir la page (258 px de trop à 375) */
.convo pre{white-space:pre-wrap;overflow-wrap:anywhere}
.msg{margin:0;max-width:85%}
.msg.user{align-self:flex-end;padding:0.625rem 0.875rem;border-radius:0;background:var(--raise);color:var(--text)}
.msg.tool{align-self:flex-start;width:85%}
.msg.tool pre{margin-top:0.375rem;font-size:0.78125rem;background:var(--bg)}
.msg.answer{align-self:flex-start;padding:0.625rem 0.875rem;border-radius:0;background:var(--accent-wash);color:var(--text)}
/* Page MCP (maquette B) : l'en-tête et l'adresse du serveur, deux panneaux côte à côte (se connecter ; un échange réel),
   les outils en lignes « nom(paramètres) » */
.mcp-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2.5rem;padding-bottom:1.625rem;border-bottom:1px solid var(--line)}
.mcp-head{flex:1 1 26.25rem;min-width:0}
.mcp-eyebrow{margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.mcp-head .page-title{margin:0.625rem 0 0;font-size:clamp(2.5rem,5vw,4rem);line-height:.95;letter-spacing:-.045em}
.mcp-head .lead{margin:1rem 0 0;max-width:56ch;font-size:1rem;line-height:1.55;color:var(--text-2)}
.mcp-endpoint{flex:1 1 27.5rem;max-width:37.5rem;min-width:0}
.mcp-page .snippet .copy{height:auto;border:0;border-radius:0;background:transparent;color:var(--accent-ink);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase}
.mcp-page .snippet .copy .ico{display:none}
/* Adresse du serveur MCP : une barre, le libellé, l'adresse, le bouton Copier. L'adresse passe à la ligne si elle ne
   tient pas (jamais de points de suspension) */
.mcp-page .snippet.base{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch;margin:0;border:1px solid var(--line-strong);background:var(--chrome)}
.mcp-page .snippet.base figcaption{display:contents}
.mcp-page .snippet.base figcaption>span{order:1;display:flex;align-items:center;padding:0 0.75rem;border-inline-end:1px solid var(--line);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.mcp-page .snippet.base pre{order:2;min-width:0;padding:0.6875rem 0.75rem;font-size:0.8125rem;white-space:normal;overflow-wrap:anywhere}
.mcp-page .snippet.base .copy{order:3;padding:0 0.875rem;border-inline-start:1px solid var(--line)}
@media (max-width:30em){.mcp-page .snippet.base{grid-template-columns:minmax(0,1fr) auto}.mcp-page .snippet.base figcaption>span{grid-column:1/-1;padding:0.375rem 0.75rem;border-inline-end:0;border-bottom:1px solid var(--line)}}
.mcp-duo{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:1.25rem;align-items:stretch}
.mcp-page .mcp-install,.mcp-page .exchange{flex:1 1 27.5rem;min-width:0;max-width:none;margin:0;display:flex;flex-direction:column;border:1px solid var(--line-strong);background:var(--chrome)}
.mcp-bar{display:flex;flex-wrap:wrap;align-items:stretch;border-bottom:1px solid var(--line);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase}
.mcp-bar h2{margin:0;padding:0.625rem 0.875rem;font:inherit;font-weight:400;letter-spacing:inherit;color:var(--text-col)}
.mcp-page .exchange .mcp-bar h2{font-weight:600;color:var(--text)}
.mcp-page .client-tabs{margin:0;width:auto;display:flex;flex-wrap:wrap;border:0;border-inline-start:1px solid var(--line);background:transparent;padding:0;gap:0}
.mcp-page .client-tabs button{height:auto;min-height:2.25rem;padding:0 1rem;border:0;border-inline-end:1px solid var(--line);border-radius:0;background:transparent;color:var(--text-col);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.mcp-page .client-tabs button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent-ink)}
.mcp-page .client h3{margin:0;padding:0.625rem 0.875rem 0;font-size:0.875rem}
.mcp-page .client .snippet{margin:0;border:0;border-bottom:1px solid var(--line-soft);background:transparent}
.mcp-page .client .snippet figcaption{padding:0.5rem 0.875rem 0;border-bottom:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.mcp-page .client .snippet .copy{padding:0.25rem 0}
/* Une commande passe à la ligne au lieu de défiler dans son bloc, sa fin cachée (à 1280 px comme sur téléphone) */
.mcp-page .client .snippet pre{padding:0.625rem 0.875rem 0.875rem;font-size:0.78125rem;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
/* Téléphone : l'adresse du serveur entière, sur deux lignes s'il le faut */
.mcp-page .convo{flex:1;margin:0;padding:1rem 0.875rem 0.875rem;gap:0.875rem;min-height:18.125rem}
.mcp-page .msg.user{max-width:88%;padding:0.625rem 0.75rem;border:1px solid var(--line-strong);background:var(--raise);font-size:0.875rem;line-height:1.5}
.mcp-page .msg.tool{width:auto;max-width:none;align-self:stretch;border:1px solid var(--line);background:var(--bg)}
.mcp-page .msg.tool .label{display:block;margin:0;padding:0.4375rem 0.625rem;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.mcp-page .msg.tool pre{margin:0;padding:0.5625rem 0.625rem;border:0;background:transparent;font-size:0.71875rem;line-height:1.6;color:var(--accent-ink);white-space:pre-wrap;word-break:break-all}
.mcp-page .msg.answer{max-width:none;padding:0;background:transparent;font-size:0.9375rem;line-height:1.55}
.mcp-page .convo .fine{margin:auto 0 0;font-size:0.75rem;color:var(--text-col)}
.mcp-page .mcp-tools{margin-top:1.75rem}
.mcp-page .mcp-tools h2{margin:0;font-size:1.125rem;font-weight:600;letter-spacing:-.015em}
.mcp-page .tool-list{margin:0.625rem 0 0;border-top:1px solid var(--line)}
.mcp-page .tool-list li{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21.25rem),1fr));grid-template-areas:none;gap:0.375rem 1.75rem;padding:0.875rem 0;border-bottom:1px solid var(--line)}
.tool-sig{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.8125rem;line-height:1.6;color:var(--text-3);overflow-wrap:anywhere}
.tool-sig span{color:var(--text-p)}
.tool-sig .tool-fn{color:var(--accent-ink);font-weight:600}
.mcp-page .tool-name{grid-area:auto;display:flex;flex-direction:column;gap:0.25rem}
.mcp-page .tool-name p{margin:0;font-size:0.875rem;color:var(--text)}
.mcp-page .tool-name .tool-ask{grid-area:auto;align-self:auto;font-size:0.8125rem;font-style:italic;color:var(--text-col)}
.mcp-page .doc-links{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:0.625rem 1.5rem;font-size:0.875rem}
.mcp-page .doc-links a{display:inline-flex;align-items:center;gap:0.375rem}
@media (pointer:coarse){.mcp-page .client-tabs button,.mcp-page .doc-links a{min-height:2.75rem}}
.figures{margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:0.75rem 2.5rem}
.figures div{display:flex;flex-direction:column-reverse;gap:2px}
.figures dt{font-size:0.8125rem;color:var(--text-3)}
.figures dd{margin:0;font-size:clamp(1.625rem,3vw,2.25rem);font-weight:500;letter-spacing:-.03em}
.pipeline-sec{margin-top:var(--gap-section)}
.pipeline{list-style:none;margin:1.125rem 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:none}
.pipeline li{position:relative;padding:1rem 1.125rem 1rem 0;border-top:2px solid var(--line)}
.pipeline li::before{content:"";position:absolute;top:-0.375rem;left:0;width:0.625rem;height:0.625rem;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.pipeline li:last-child{border-top-color:var(--accent)}
.pipeline strong{display:block;margin-top:0.375rem;font-size:0.9375rem}
.pipeline span{display:block;margin-top:0.25rem;font-size:0.84375rem;color:var(--text-2)}
.meth{margin-top:0;display:flex;flex-direction:column;gap:2.25rem}
.meth section{scroll-margin-top:5rem}
/* Alias d'une ancienne ancre : en tête de la section, même marge que la section pour ne pas arriver sous l'en-tête collant */
.anchor-alias{display:block;height:0;scroll-margin-top:5rem}
.meth h2{font-size:clamp(1.25rem,2vw,1.5rem)}
.meth p{margin-top:0.5rem;max-width:66ch;font-size:0.96875rem;color:var(--text-2)}
.worked{margin-top:1rem;padding:1.125rem 1.25rem}
.worked .formula{margin-top:0.625rem;font-size:clamp(1rem,1.8vw,1.25rem);color:var(--text)}
.worked .formula strong{color:var(--accent-ink);font-weight:600}
/* Page Méthode (maquette B) : le titre et les trois chiffres côte à côte, « En bref » en lignes cliquables, les étapes
   numérotées, puis le sommaire collant et les sections séparées par un filet */
.meth-page .doc-head{max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.meth-head{flex:1 1 26.25rem;min-width:0}
.meth-head .page-title{margin:0;font-size:clamp(2.125rem,4vw,3.25rem);line-height:1;letter-spacing:-.04em}
.meth-head .lead{margin:0.875rem 0 0;max-width:56ch;font-size:0.9375rem;line-height:1.55;color:var(--text-2)}
.meth-page .figures{margin:0;display:grid;grid-template-columns:repeat(3,auto);gap:1px;border:1px solid var(--line);background:var(--line)}
.meth-page .figures div{flex-direction:column;gap:0.25rem;padding:0.75rem 1.125rem;background:var(--bg)}
.meth-page .figures dt{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.meth-page .figures dd{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1.25rem;font-weight:500;letter-spacing:0;color:var(--text)}
@media (max-width:38.6875em){.meth-page .figures{width:100%;grid-template-columns:minmax(0,1fr)}}
.meth-page .meth-summary{max-width:none;margin-top:1.5rem}
.meth-rows{list-style:none;margin:0;padding:0}
.meth-rows a{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 1.5rem;padding:0.875rem 1rem;border-top:1px solid var(--line-soft);color:var(--text);transition:background-color 120ms ease}
.meth-rows a:hover{background:var(--surface);color:var(--text);text-decoration:none}
.meth-k{flex:0 0 14.375rem;max-width:100%;font-size:0.90625rem;font-weight:500}
.meth-v{flex:1 1 20rem;min-width:0;font-size:0.875rem;line-height:1.5;color:var(--text-2);text-wrap:pretty}
.meth-go{margin-inline-start:auto;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;color:var(--accent-ink)}
.meth-page .pipeline-sec{margin-top:1.5rem}
.meth-page .pipeline{margin:0;padding:1.375rem 1rem 1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,11.875rem),1fr));gap:1.375rem 0;counter-reset:pipe}
.meth-page .pipeline strong{margin-top:0.875rem;letter-spacing:-.01em;font-weight:600}
.meth-page .pipeline strong::before{counter-increment:pipe;content:counter(pipe,decimal-leading-zero);margin-inline-end:0.5rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;font-weight:400;color:var(--accent-ink)}
.meth-page .pipeline span{margin-top:0.375rem;line-height:1.5;text-wrap:pretty}
@media (max-width:56.25em){.meth-page .pipeline{gap:0}.meth-page .pipeline strong{margin-top:0}}
.meth-page .doc-grid{margin-top:2.75rem;gap:3rem}
.meth-page .toc .label{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.meth-page .meth{gap:0;max-width:48.75rem}
.meth-page .meth section{padding:1.875rem 0;border-top:1px solid var(--line)}
.meth-page .meth section:first-child{padding-top:0;border-top:0}
.meth-page .meth h2{margin:0;font-size:1.5rem;font-weight:600;letter-spacing:-.025em}
.meth-page .meth p{margin:0.75rem 0 0;max-width:68ch;font-size:0.96875rem;line-height:1.65;color:var(--text-p);text-wrap:pretty}
.meth-page .worked{margin-top:1.125rem;padding:1rem 1.125rem;border:1px solid var(--line-strong);background:var(--chrome)}
.meth-page .worked .label{margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.meth-page .worked p{margin:0.625rem 0 0;font-size:0.875rem;line-height:1.5;color:var(--text-2)}
.meth-page .worked .formula{margin-top:0.75rem;font-size:clamp(0.9375rem,1.7vw,1.1875rem);color:var(--text);overflow-wrap:anywhere}
.meth-page .meth .fine{display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;margin-top:1rem;font-size:0.875rem}
@media (pointer:coarse){.meth-rows a{min-height:2.75rem}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
.pipeline li{opacity:0;transform:translateY(0.5rem);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.pipeline-sec.is-in .pipeline li{opacity:1;transform:none}
.pipeline li:nth-child(2){transition-delay:80ms}.pipeline li:nth-child(3){transition-delay:160ms}.pipeline li:nth-child(4){transition-delay:240ms}.pipeline li:nth-child(5){transition-delay:320ms}
}
@media (max-width:56.25em){.doc-grid{grid-template-columns:minmax(0,1fr)}.toc{position:static}.pipeline{grid-template-columns:minmax(0,1fr)}.pipeline li{border-top:0;border-inline-start:2px solid var(--line);padding:0 0 1.125rem 1.25rem}.pipeline li::before{top:2px;left:-0.375rem}.pipeline li:last-child{border-inline-start-color:var(--accent)}}
@media (max-width:38.75em){.params div,.signal-list div,.tool-list li{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "ask" "params"}.msg,.msg.tool{max-width:100%;width:100%}}

/* Pied de page */
.foot{margin-top:4.5rem;border-top:1px solid var(--line);background:var(--chrome)}
.foot-in{padding-top:1.75rem;padding-bottom:2.25rem;display:flex;flex-wrap:wrap;gap:1.125rem 1.75rem;align-items:center}
.foot-brand{display:flex;align-items:center;gap:0.625rem;font-size:0.84375rem;color:var(--text-2)}
.foot-brand img{width:1.375rem;height:1.375rem;border-radius:0}
.foot ul{display:flex;flex-wrap:wrap;gap:0.5rem 1.25rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.05em;text-transform:uppercase;list-style:none;margin:0;padding:0}
.foot ul a{color:var(--text-2)}.foot ul a:hover{color:var(--text)}

/* En-tête sur deux rangées (marque, thème et langue, puis la navigation défilante) dès que ses huit rubriques ne tiennent
   plus sur une ligne : environ 1 060 px en français (mesure des libellés en Inter 14 px), d'où 1 080 px */
/* En-tête sur une rangée plus longtemps (mesuré : 877 px de contenu en français pour les huit rubriques) : entre 961 et
   1 180 px, espacements resserrés plutôt qu'un menu « Explorer » qui cacherait trois rubriques derrière un clic */
/* Maquette B : sous 1 100 px la navigation passe sur sa propre ligne, séparée par un filet. Racine à 100 % (tout appareil
   sans souris fine : toucher, tablette) : les blocs sont 11 % plus larges qu'à 90 % et les rubriques prennent 44 px au toucher ;
   la rangée unique débordait alors de 85 px à 1 100 px (Zuri, 30/10). Elle y garde donc deux rangées à toute largeur : au-dessus de
   1 299 px, la rangée unique tenait, mais la largeur du site est plafonnée et la recherche restait écrasée à 130-152 px en français
   (59-81 px de champ, « Chercher un modèle » en demande 91 ; relevé d'Imani, 30/10) */
@media (max-width:68.6875em),(hover:none),(pointer:coarse),(pointer:none){
.top-in{flex-wrap:wrap;row-gap:0}
.toc{top:7rem}
.main-nav{order:9;flex:1 0 100%;min-width:0;padding:0.75rem 0;border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none;
  /* Rubriques hors écran : un fondu au bord droit signale que la navigation défile (64 px depuis le 16/10 : à 28 px une rubrique semblait coupée net) */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 4rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 4rem),transparent)}
.main-nav::-webkit-scrollbar{display:none}
.nav{width:max-content;padding-inline-end:4rem}
/* Navigation défilante : le tiroir des familles s'ouvre sous l'en-tête, sur toute sa largeur (repère : .top-in, hors de la zone qui défile) ;
   le fondu du bord, qui masquerait aussi le tiroir, est levé tant qu'il est ouvert */
.top-in{position:relative}
.nav-ix{position:static}
.nav-sub-panel{inset-inline:0;top:100%;width:auto}
.main-nav:has(.nav-sub[open]){-webkit-mask-image:none;mask-image:none}
.table th{top:0}
}
/* Toucher : rubriques, thème et langue à 44 px (42, 34 et 35 px auparavant) */
@media (pointer:coarse){.nav a{min-height:2.75rem;min-width:2.75rem;display:flex;align-items:center;justify-content:center}.brand{min-height:2.75rem}.prefs-btn{height:2.75rem;min-width:2.75rem;justify-content:center}.prefs-panel button,.prefs-panel a{min-height:2.75rem}}
/* Comparateur modulaire (/compare/) : sélection en puces, comparaisons populaires, tableau en colonnes.
   Grand écran : toutes les colonnes, en-têtes collés sous l'en-tête du site ; 620 à 899 px : 3 colonnes ; moins de 620 px :
   2 colonnes, pagination « ‹ 1–2 sur 4 › » (script). Sans script : défilement horizontal avec la colonne des libellés figée */
/* Puce posée avant la réponse du serveur : présente tout de suite, visiblement en attente. L'opacité porte sur le groupe
   entier, donc elle ne descend pas sous 0,65 : en dessous, le nom passe sous 4,5:1 en thème clair (mesure de Zuri).
   Le retrait ne devient possible qu'une fois la vraie puce arrivée : sa place est réservée, la ligne ne saute pas */
/* Sélecteur de modèles (combobox) : liste au thème du site sous le champ, lignes de 44 px, logo du labo + nom, identifiant
   discret ; option active par aria-selected (clavier et pointeur) ; largeur du champ, jamais plus que l'écran. Sa police est
   la sienne, pas celle du bloc qui l'accueille (remarque d'Imani du 29/10 : sur la fiche fournisseur, le filtre est dans un
   bloc en chasse fixe et les noms sortaient en Martian Mono) ; la petite ligne garde sa chasse fixe par .cmp-lb-meta */
.cmp-listbox{position:absolute;z-index:20;top:calc(100% + 0.375rem);left:0;width:min(27.5rem,100%);max-height:min(22.5rem,60vh);overflow-y:auto;overscroll-behavior:contain;margin:0;padding:0.375rem;font-family:var(--sans);font-stretch:normal;letter-spacing:normal;text-transform:none;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--shadow-menu)}
.cmp-listbox[hidden]{display:none}
.cmp-listbox [role=option]{display:flex;align-items:center;gap:0.625rem;min-height:2.75rem;padding:0.375rem 0.625rem;border-radius:var(--r-ctl);cursor:pointer}
.cmp-listbox [role=option][aria-selected=true]{background:var(--raise);box-shadow:inset 3px 0 0 var(--accent-ink)}
.cmp-listbox .logo,.cmp-listbox .lab-badge{flex:none;width:1.25rem;height:1.25rem}
/* Logos du labo sur tout le comparateur (demande de Didier) : puces, cartes tendance, en-têtes de colonnes ; même composant
   que l'accueil, initiales en repli */
/* Comparateur (maquette B) : la charge sur une ligne, une carte par modèle, le bandeau du verdict, les paires.
   Les classes du formulaire (cmp-picker, cmp-chips, cmp-add, cmp-preset, cmp-load) sont celles que lit le script */
.cmp-top{padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
.cmp-top .page-title{margin:0;font-size:clamp(2.125rem,4vw,3.25rem);line-height:1;letter-spacing:-.04em}
.cmp-top .lead{margin:0.875rem 0 0;max-width:64ch;font-size:0.9375rem;line-height:1.55;color:var(--text-2)}
/* Partager et imprimer (maquette B) : à droite du titre. Le menu est un <details> : il s'ouvre sans script */
.cmp-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem}
.cmp-top-text{flex:1 1 26.25rem;min-width:0}
.cmp-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:0.75rem 2rem}
.cmp-head .page-title{flex:1 1 26.25rem;min-width:0}
.cmp-tools{display:flex;flex-wrap:wrap;gap:0.5rem}
.cmp-share{position:relative}
.cmp-share summary,.cmp-print{display:inline-flex;align-items:center;gap:0.5rem;height:2.125rem;padding:0 0.75rem;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;white-space:nowrap;list-style:none;transition:border-color 150ms ease}
.cmp-share summary::-webkit-details-marker{display:none}
.cmp-share summary::after{content:"";width:0;height:0;border-inline:0.21875rem solid transparent;border-top:0.25rem solid var(--text-col)}
@media (hover:hover) and (pointer:fine){.cmp-share summary:hover,.cmp-print:hover{border-color:var(--accent-ink)}}
.cmp-share ul{position:absolute;z-index:40;inset-inline-end:0;top:calc(100% + 0.375rem);min-width:13.125rem;margin:0;padding:0.25rem;list-style:none;border:1px solid var(--line-strong);background:var(--surface);box-shadow:var(--shadow-menu)}
.cmp-share li[hidden]{display:none}
.cmp-share li a,.cmp-share li button{display:flex;align-items:center;width:100%;min-height:2.25rem;padding:0 0.625rem;border:0;background:transparent;color:var(--text);font:inherit;font-size:0.84375rem;text-align:start;cursor:pointer;white-space:nowrap}
.cmp-share li a:hover,.cmp-share li button:hover{background:var(--raise);color:var(--text);text-decoration:none}
@media (pointer:coarse){.cmp-share summary,.cmp-print{height:2.75rem}.cmp-share li a,.cmp-share li button{min-height:2.75rem}}
@media (max-width:38.6875em){.cmp-share ul{inset-inline-end:auto;inset-inline-start:0}}
/* Impression : la comparaison seule. L'en-tête et le pied du site, les réglages, les boutons et les autres paires
   n'ont rien à faire sur le papier ; une ligne dit d'où vient la page */
.cmp-print-only{display:none}
@media print{
.cmp-print-only{display:block;margin:0 0 0.875rem;font-size:0.75rem}
.cmp-index~*,.cmp-page~*,.top,.foot,.cmp-tools,.cmp-presets,.cmp-remove,.cmp-pairs,.cmp-msg,.crumbs,.info{display:none!important}
/* Le bloc d'un modèle (une ligne du tableau, rendue en bloc à la largeur du papier) ne se coupe jamais entre deux
   feuilles */
.cmp-row{break-inside:avoid}
/* Sur papier, toujours les couleurs du thème clair : le site est sombre par défaut et un navigateur n'imprime pas les
   fonds, un texte clair sortirait sur du blanc. Et rien n'attend le défilement pour apparaître */
:root,:root[data-theme]{
--bg:#FFFFFF;--chrome:#F8F9FA;--surface:#F2F4F6;--row-hover:#F4F6F8;--raise:#EDF0F2;
--line-soft:#EEF0F2;--track:#E8EBEE;--bar:#B5BCC4;--line:#E2E6EA;--line-strong:#CDD3D9;
--text:#0E1216;--text-p:#2B3138;--text-2:#48515A;--text-3:#666E77;--text-col:#5F6870;--disabled:#9AA2AA;
--accent:#15803D;--accent-ink:#157D3C;--accent-hover:#166534;--on-accent:#FFFFFF;--accent-wash:rgba(21,128,61,.08);--brand-slate:#6A7980;
--warn:#C2410C;--warn-wash:rgba(194,65,12,.08);--amber:#B05109;--blue:#2563EB;--teal:#0D7B6A;--green:#387B29;--violet:#7447D6;
--sso-bg:#FFFFFF;--sso-line:#747775;--sso-ink:#1F1F1F;
--hdr:rgba(255,255,255,.94);--shd:rgba(15,23,30,.14);
color-scheme:light}
.reveal{opacity:1!important;transform:none!important;animation:none!important}
}
.cmp-picker{margin:0}
.cmp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem 1.125rem;padding:0.75rem 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-col)}
.cmp-presets{display:flex;flex-wrap:wrap;gap:0.375rem}
.cmp-preset{height:1.75rem;padding:0 0.5625rem;border:1px solid var(--line-strong);background:transparent;color:var(--text-2);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;white-space:nowrap;transition:border-color 150ms ease,background-color 150ms ease}
.cmp-preset[aria-pressed=true]{border-color:var(--text);background:var(--text);color:var(--bg)}
@media (hover:hover) and (pointer:fine){.cmp-preset:hover{border-color:var(--disabled)}}
.cmp-load{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin:0;padding:0;border:0;min-width:0;letter-spacing:.02em;text-transform:none}
.cmp-load label{display:inline-flex;align-items:center;gap:0.5rem}
.cmp-load input{width:5.25rem;height:1.875rem;padding:0 0.5rem;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.78125rem;text-align:end;outline:none;appearance:textfield;-moz-appearance:textfield}
.cmp-load input::-webkit-outer-spin-button,.cmp-load input::-webkit-inner-spin-button{appearance:none;margin:0}
.cmp-load input:focus-visible{border-color:var(--accent-ink)}
.cmp-load input:invalid{border-color:var(--warn)}
@media (pointer:coarse){.cmp-preset,.cmp-load input{height:2.75rem}}
.cmp-chips{display:contents;margin:0;padding:0;list-style:none}
/* Carte posée avant la réponse du serveur : en attente, visible tout de suite */
.cmp-chips li[data-pending]{display:flex;align-items:center;gap:0.5rem;min-height:7.5rem;padding:1.25rem;background:var(--bg);font-size:0.9375rem;font-weight:600;opacity:.65}
.cmp-chips li[data-pending] .logo,.cmp-chips li[data-pending] .lab-badge{width:1.5rem;height:1.5rem}
.cmp-remove{position:absolute;top:0.75rem;inset-inline-end:0.625rem;display:grid;place-items:center;width:1.625rem;height:1.625rem;border:1px solid transparent;color:var(--text-col);transition:color 150ms ease,border-color 150ms ease}
.cmp-remove:hover{border-color:var(--line-strong);color:var(--warn);text-decoration:none}
.cmp-remove .ico{width:0.875rem;height:0.875rem}
@media (pointer:coarse){.cmp-remove{width:2.75rem;height:2.75rem;top:0.25rem;inset-inline-end:0.25rem}}
.cmp-verdict strong{font-weight:600}
/* Mot de la meilleure valeur et écart au meilleur : absents de la maquette, qui ne le dit que par la couleur ; 12 px au moins */
/* Dès qu'un modèle est choisi : une ligne d'ajout sous les cartes (champ et « + »), plus une carte vide de 220 px */
.cmp-add-hint{margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-col)}
.cmp-add{position:relative;display:flex;align-items:center;gap:0.5rem;height:2.5rem;margin:0;padding:0 0.75rem;border:1px dashed var(--disabled)}
.cmp-add:focus-within{border-style:solid;border-color:var(--accent-ink)}
.cmp-add-plus{font-family:var(--mono);font-stretch:var(--mono-stretch);color:var(--accent-ink)}
.cmp-add input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;color:var(--text);font-size:1rem;outline:none}
.cmp-add input::placeholder{color:var(--text-3);opacity:1}
.cmp-add input::-webkit-search-cancel-button{display:none}
@media (pointer:coarse){.cmp-add{height:2.75rem}}
.cmp-band{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.5rem 0.875rem;padding:0.875rem 1.25rem;border:1px solid var(--line);border-top:0;background:var(--bg)}
.cmp-band .badge{font-size:0.6875rem;letter-spacing:.05em}
.cmp-band .cmp-verdict{margin:0;font-size:clamp(1rem,1.6vw,1.25rem);font-weight:500;letter-spacing:-.015em;text-wrap:pretty}
.cmp-page .cmp-band{margin-top:1rem;border-top:1px solid var(--line)}
.cmp-pairs{margin-top:1.5rem}
.cmp-pairs-h{display:inline-flex;align-items:center;gap:0.375rem;min-width:0}
.cmp-asof{display:flex;align-items:center;gap:0.375rem}
/* L'unité des prix, dite une fois pour la page : une ligne discrète avant les cartes, le premier chiffre qu'elle qualifie */
/* Phrase de tête de la page A vs B : elle redisait le tableau ; elle reste lue et dans la description de la page, et s'écrit sur le papier */
@media screen{.cmp-lead{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* Phrase d'unité des paires et de la page A vs B : à l'écran elle n'est plus écrite (l'en-tête de la colonne du prix la dit), elle
   reste lue (masquée à la vue seulement) ; elle s'écrit sur le papier */
@media screen{.cmp-units{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.cmp-units{margin:0.75rem 0 0.5rem;font-size:0.78125rem;color:var(--text-2)}
.cmp-page .cmp-units{margin:1.25rem 0 -0.75rem}
/* Un modèle seul : sa carte ne s'étire pas sur toute la ligne (560 px au plus), le reste du cadre reste vide */
.cmp-pair-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,23.75rem),1fr));margin:0;padding:0;list-style:none}
.cmp-pair-list a{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0.75rem;padding:0.8125rem 1rem;border-bottom:1px solid var(--line-soft);color:var(--text);font-size:0.875rem;transition:background-color 120ms ease}
.cmp-pair-list a:hover{background:var(--row-hover);color:var(--text);text-decoration:none}
.cmp-pair-m{min-width:0}
.cmp-pair-m.end{text-align:end}
.cmp-pair-m .num{display:block;margin-top:2px;font-size:0.75rem;color:var(--text-3)}
.cmp-pair-m .num.is-low{color:var(--accent-ink)}
.cmp-vs{flex:none;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;color:var(--disabled)}
.cmp-m{display:inline-flex;align-items:center;gap:0.375rem}
.cmp-m .logo,.cmp-m .lab-badge{flex:none;width:1rem;height:1rem;border-radius:0;font-size:0.5625rem}
.cmp-lb-text{display:flex;flex-direction:column;min-width:0}
.cmp-lb-name{font-size:0.875rem;font-weight:500;color:var(--text)}
.cmp-lb-meta{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;line-height:1.3;color:var(--text-3);overflow-wrap:anywhere}
.cmp-lb-head{padding:0.375rem 0.625rem 0.25rem;font-size:0.75rem;font-weight:500;color:var(--text-3)}
.cmp-lb-none{padding:0.75rem 0.625rem;font-size:0.84375rem;color:var(--text-2)}
/* Mise à jour en cours : résultats atténués, sans bloquer la saisie */
.cmp-index[aria-busy=true] .cmp-wrap,.cmp-index[aria-busy=true] .cmp-band{opacity:.65;transition:opacity var(--t-ui) ease}
/* Section remplacée sans rechargement : le contenu entrant apparaît en fondu court au lieu de surgir d'un coup.
   La classe n'est posée QUE par le script, jamais rendue par le serveur : au premier affichage d'une page la section est
   peinte immédiatement, sans fondu, pour ne rien retarder. Fondu d'ENTRÉE seulement, et court : un fondu de sortie
   retarderait le remplacement et se paierait sur l'INP corrigé en #375 (contrainte donnée par Kofi).
   Sans prise en charge de @starting-style, la section apparaît simplement d'un coup, comme aujourd'hui */
@media (prefers-reduced-motion:no-preference){
.cmp-index.is-swapped{transition:opacity 160ms var(--ease-out)}
@starting-style{.cmp-index.is-swapped{opacity:0}}
}
/* Charges types : boutons avant les champs, valeurs affichées (ce sont des exemples, pas des mesures) ; l'actif est marqué
   par aria-pressed, jamais par la couleur seule */
@media (hover:hover) and (pointer:fine){.cmp-preset:hover{border-color:var(--text-3)}}
/* Carte de tendance : le prix le plus bas est nommé, pas seulement coloré */
/* Auto-hébergement ou API (src/site/self-host-page.ts), d'après la maquette de Zuri : la réponse d'abord (phrase de tête, note « location du
   matériel seulement » visible dès le premier écran, débit à tenir), la preuve, puis les réglages, la configuration, la comparaison, et le
   détail du calcul replié. Chaque niveau de preuve a sa forme (rond plein, demi-rond, rond pointillé, carré ≥, carré pointillé) : jamais la
   couleur seule */
.sh-scope{margin:1.125rem 0 0;display:flex;gap:0.5rem;align-items:flex-start;max-width:72ch;font-size:0.84375rem;color:var(--text-2)}
.sh-scope .ico{flex:none;margin-top:2px}
.sh-page>.sh-problem,.sh-refused,.sh-answer,.sh-cells,.sh-proof,.sh-form,.sh-config,.sh-alt,.sh-detail{margin-top:1.25rem}
/* Message de la page (champ invalide, modèle inconnu, service indisponible) : ses propres règles, aucune classe du comparateur */
.sh-problem{display:flex;gap:0.5rem;align-items:flex-start;max-width:70ch;padding:0.625rem 0.875rem;border:1px dashed var(--line);border-radius:var(--r-ctl);font-size:0.84375rem;color:var(--text-2)}
.sh-problem p{margin:0}
.sh-hint{margin:0;font-size:0.75rem;line-height:1.4;color:var(--text-3)}
.sh-answer,.sh-refused{padding:1.25rem 1.375rem}
.sh-answer-head{display:flex;gap:0.375rem 1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sh-answer-head h2{margin:0}
/* Niveau de preuve : une forme chacune, avant le libellé */
.sh-chip{display:inline-flex;align-items:center;gap:0.4375rem;font-size:0.8125rem;font-weight:500;color:var(--text);white-space:nowrap}
.sh-chip::before{content:"";flex:none;box-sizing:border-box;width:1.125rem;height:1.125rem;border:1.5px solid var(--text-2);border-radius:50%;background:var(--text-2)}
.sh-chip[data-confidence=derived]::before{background:linear-gradient(90deg,var(--text-2) 50%,transparent 50%)}
.sh-chip[data-confidence=estimated]::before{background:none;border-style:dashed}
.sh-chip[data-confidence=lower_bound]::before{content:"≥";display:inline-grid;place-items:center;border-radius:0;background:none;font-size:0.75rem;font-weight:700;line-height:1;color:var(--text)}
.sh-chip[data-confidence=none]::before,.sh-chip[data-confidence=user_supplied]::before{background:none;border-radius:0;border-style:dotted}
.sh-chip[data-confidence=not_needed]::before{content:"–";display:inline-grid;place-items:center;background:none;font-size:0.8125rem;font-weight:700;line-height:1;color:var(--text)}
.sh-headline,.sh-refused h2{margin:0.875rem 0 0;max-width:68ch;font-size:clamp(1.0625rem,2vw,1.3125rem);font-weight:600;line-height:1.35;color:var(--text);text-wrap:pretty}
/* Repli : la phrase de la route, en anglais, sur une page française. Une étiquette EN la dit à l'œil, pas seulement l'attribut lang */
.sh-headline[lang=en]:lang(fr)::before,html[lang=fr] .sh-headline[lang=en]::before{content:"EN";display:inline-block;margin-inline-end:0.5rem;padding:0 0.375rem;border:1px solid var(--text-3);border-radius:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;font-weight:500;line-height:1.125rem;letter-spacing:.04em;color:var(--text-2);vertical-align:2px}
.sh-line{margin:0.625rem 0 0;font-size:0.875rem;color:var(--text-2)}
/* La note reste visible sans action, dans le bloc réponse : condition d'ouverture (Kwame, validée par Didier) */
.sh-answer .sh-scope{margin-top:1rem;padding:0.625rem 0.75rem;max-width:none;border:1px solid var(--line);border-radius:var(--r-chip);background:var(--bg);font-size:0.8125rem;line-height:1.5}
/* Lien « Comment c'est calculé » : un paragraphe à lui, sous la note et hors de son encadré (il en sortait à 320 px). Grand écran, collé sous
   la note ; téléphone, la note passe avant la phrase de tête (order:-1) et ce lien la suit (order:-1 aussi, le DOM les garde côte à côte), avant la phrase */
.sh-how{margin:0.375rem 0 0;max-width:72ch;font-size:0.8125rem}
.sh-how a{display:inline-flex;align-items:center;gap:0.25rem}
.sh-how .ico{flex:none}
@media (pointer:coarse){.sh-how a{min-height:2.75rem}}
/* Précision remplacée (fp8 non publiée, la page répond dans une précision publiée) : une ligne en tête de la réponse, avant la phrase, qui change ce que
   la phrase veut dire. Icône + texte + filet à gauche (jamais la couleur seule), sans second encadré dans le panneau. Téléphone : sans order, elle
   reste après la note et son lien (order:-1) et avant la phrase de tête */
.sh-swap{display:flex;gap:0.5rem;align-items:flex-start;margin:0.875rem 0 0;padding:2px 0 2px 0.75rem;border-inline-start:3px solid var(--text-2);max-width:68ch;font-size:0.875rem;line-height:1.5;color:var(--text)}
.sh-swap .ico{flex:none;margin-top:3px}
.sh-swap+.sh-headline{margin-top:0.75rem}
/* Refus : « Refaire le calcul dans … : bf16, int4 ». Liens de quatre ou cinq caractères : cible de 44 px sur écran tactile, sans changer la ligne à la souris */
.sh-retry a{display:inline-flex;align-items:center;padding:0 0.25rem;font-weight:500;text-decoration:underline;text-underline-offset:3px}
@media (pointer:coarse){.sh-retry a{min-height:2.75rem;padding:0 0.5rem}}
/* Téléphone : la note « location du matériel seulement » passe AVANT la phrase de tête. Une phrase française de 500 caractères occupe
   plus de 360 px à 375 px de large : sans cela la note commence sous le bas d'un écran de 667 px. Ordre visuel seulement (le HTML garde la
   phrase en premier) ; la note n'a rien d'interactif, l'ordre de tabulation ne change pas */
@media (max-width:38.75em){.sh-answer{display:flex;flex-direction:column}.sh-answer-head{order:-2}.sh-answer .sh-scope{order:-1;margin-top:0.75rem}.sh-answer .sh-how{order:-1}.sh-answer .sh-headline{margin-top:1rem}}
.sh-cells{margin-bottom:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(11.875rem,1fr));gap:0.625rem}
.sh-cell{padding:0.75rem 0.875rem;border:1px solid var(--line-soft);border-radius:var(--r-chip);background:var(--surface)}
.sh-cell dt{font-size:0.78125rem;line-height:1.35;color:var(--text-2)}
.sh-cell dd{margin:2px 0 0;font-size:0.78125rem;line-height:1.35;color:var(--text-2)}
.sh-big,.sh-cell dd.sh-big{font-size:1.125rem;font-weight:600;line-height:1.25;color:var(--text);font-variant-numeric:tabular-nums}
.sh-cell dd.sh-big{margin-top:0.375rem}
.sh-cells+.sh-hint{margin-top:0.625rem}
.sh-config p,.sh-alt p,.sh-refused p,.sh-proof p,.sh-detail>p{margin:0.5rem 0 0;font-size:0.875rem}
.sh-proof h2,.sh-form h2,.sh-config h2,.sh-alt h2{margin:0;font-size:0.8125rem;font-weight:600;color:var(--text-2)}
.sh-proof,.sh-alt{padding:0.875rem 1rem;border:1px solid var(--line);border-radius:var(--r-chip)}
.sh-proof[data-confidence=measured],.sh-proof[data-confidence=lower_bound],.sh-proof[data-confidence=derived]{border-inline-start-width:0.25rem}
.sh-proof[data-confidence=none],.sh-proof[data-confidence=estimated],.sh-proof[data-confidence=not_needed],.sh-alt{border-style:dashed}
.sh-proof ul,.sh-detail ul,.sh-refused ul{margin:0.625rem 0 0;padding-inline-start:1.125rem;max-width:78ch;font-size:0.84375rem;line-height:1.55;color:var(--text-2)}
.sh-proof li+li,.sh-detail li+li,.sh-refused li+li{margin-top:0.375rem}
/* Réglages : juste après la preuve, prérenseignés ; les valeurs par défaut sont dans les indications de chaque champ */
.sh-form{padding:1rem 1.125rem;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--surface);display:grid;gap:1rem;justify-items:start}
.sh-form>*{width:100%}.sh-form>.btn{width:auto}
/* Champs du formulaire : leurs propres règles, aucune classe du comparateur. Ils portaient la classe de sa barre de
   charge ; quand celle-ci a été redessinée (champs en ligne, étroits, chiffres à droite), ce formulaire en a hérité */
.sh-form .sh-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:0.625rem;align-items:start;margin:0;padding:0;border:0;min-width:0;letter-spacing:0;text-transform:none}
.sh-fields legend{padding:0;margin-bottom:0.5rem;font-size:0.8125rem;font-weight:500;color:var(--text-2)}
.sh-fields label{display:flex;flex-direction:column;align-items:stretch;gap:0.375rem;font-size:0.78125rem;color:var(--text-2)}
.sh-fields input{width:auto;min-width:0;height:2.75rem;padding:0 0.75rem;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--bg);color:var(--text);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1rem;text-align:start;appearance:auto;-moz-appearance:auto}
.sh-fields input::-webkit-outer-spin-button,.sh-fields input::-webkit-inner-spin-button{appearance:auto;margin:0}
.sh-fields input:focus-visible{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 0.25rem var(--accent-wash)}
/* Le champ « Model », obligatoire, est vide à l'arrivée : pas de bordure d'erreur avant toute saisie */
.sh-fields input:invalid{border-color:var(--line)}
.sh-fields select{height:2.75rem;padding:0 0.75rem;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:1rem}
.sh-fields select:focus-visible{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 0.25rem var(--accent-wash)}
.sh-fields input[type=text]{font-size:1rem}
.sh-fields>p.sh-hint{grid-column:1/-1}
.sh-more summary{display:flex;align-items:center;min-height:2.75rem;cursor:pointer;font-size:0.84375rem;font-weight:500;color:var(--text-2)}
.sh-more[open] summary{margin-bottom:0.625rem}
.sh-more fieldset{margin-top:1.125rem}
/* Jauges : un <svg> en ligne (viewBox 0 0 100 10, preserveAspectRatio none) dont les <rect> ont leurs x et largeur en attributs, tirés de la réponse ; la légende en texte dit les mêmes chiffres */
.sh-gauge{margin:1rem 0 0;max-width:40rem}
.sh-gauge svg{display:block;width:100%;height:0.625rem;overflow:visible}
.sh-g-track{fill:var(--line-soft)}.sh-g-band{fill:var(--text-2)}.sh-g-open{fill:url(#sh-fade)}.sh-g-mark{fill:var(--accent-ink)}.sh-g-fit{fill:var(--accent-ink)}.sh-g-need{fill:var(--text-2)}
.sh-fade-stop{stop-color:var(--text-2)}
/* Repère : un liseré de la couleur du fond autour du trait, pour qu'il se détache de la bande (vert foncé sur gris foncé en thème clair) */
.sh-proof .sh-g-mark{stroke:var(--bg);stroke-width:2;vector-effect:non-scaling-stroke;paint-order:stroke}
.sh-gauge figcaption{display:flex;flex-direction:column;gap:0.25rem;margin-top:0.625rem;font-size:0.8125rem;color:var(--text-2);font-variant-numeric:tabular-nums}
.sh-gauge .sh-g-axis{display:flex;justify-content:space-between;margin-top:0.375rem;font-size:0.75rem;color:var(--text-3)}
.sh-config{padding-top:1rem;border-top:1px solid var(--line-soft)}
/* Pour comparaison : cadre en pointillé, jamais une recommandation */
.sh-alt h2{color:var(--text)}
.sh-detail{border-top:1px solid var(--line-soft)}
.sh-detail summary{display:flex;align-items:center;min-height:2.75rem;cursor:pointer;font-size:0.84375rem;font-weight:500;color:var(--text-2)}
/* Les deux détails repliés : un chevron qui s'ouvre, le marqueur par défaut du navigateur retiré */
.sh-more summary::-webkit-details-marker,.sh-detail summary::-webkit-details-marker{display:none}
.sh-more summary::before,.sh-detail summary::before{content:"";flex:none;width:0.4375rem;height:0.4375rem;margin-inline-end:0.625rem;border-inline-end:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--t-ui) ease}
.sh-more[open]>summary::before,.sh-detail[open]>summary::before{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.sh-more summary::before,.sh-detail summary::before{transition:none}}
.sh-detail h3{margin:1.125rem 0 0}
.sh-detail .table-wrap{margin-top:0.625rem;overflow-x:auto}
/* Scénarios : une rangée = une ligne en écran large (« Jamais (au-dessus de 100 %) » se repliait sur trois lignes dans sa
   colonne, dimensionnée par son en-tête) ; le tableau défile déjà dans son cadre, rien n'est coupé */
@media (min-width:68.75em){.sh-scenarios tbody th,.sh-scenarios tbody td{white-space:nowrap}}
@media (max-width:26.25em){.sh-answer,.sh-refused{padding:1rem}.sh-form{padding:0.875rem}}
/* Page d'auto-hébergement (maquette B) : l'en-tête, puis deux colonnes sur un écran large, les réglages à gauche dans
   leur panneau et la réponse à droite. Sur un petit écran tout se suit dans l'ordre du document : la réponse, les
   réglages, le détail. Le formulaire : une ligne par champ, libellé, champ, aide */
.sh-top{padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.sh-eyebrow{margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.sh-top .page-title{margin:0.625rem 0 0;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.sh-top .lead{margin:1rem 0 0;max-width:64ch;font-size:1rem;line-height:1.55;color:var(--text-2)}
.sh-top .sh-scope{margin-top:0.75rem;max-width:80ch;font-size:0.8125rem;line-height:1.55;color:var(--text-col)}
.sh-col>.sh-problem{margin-top:1.25rem}
.sh-col{min-width:0}
.sh-page .sh-form{padding:0;gap:0;background:var(--bg);border:1px solid var(--line)}
.sh-page .sh-form>h2{margin:0;padding:0.875rem 1.125rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text)}
.sh-page .sh-form .sh-fields{grid-template-columns:minmax(0,1fr);gap:0}
.sh-page .sh-fields>label,.sh-page .sh-fields>p.sh-hint{padding:0.875rem 1.125rem;border-top:1px solid var(--line-soft)}
.sh-page .sh-fields>label{font-size:0.84375rem;font-weight:500;color:var(--text)}
.sh-page .sh-fields .sh-hint{font-weight:400;text-wrap:pretty}
.sh-page .sh-fields input,.sh-page .sh-fields select{height:2.375rem;border-color:var(--line-strong);background:var(--surface);font-size:0.8125rem}
.sh-page .sh-fields select{font-family:var(--mono);font-stretch:var(--mono-stretch)}
@media (pointer:coarse){.sh-page .sh-fields input,.sh-page .sh-fields select{height:2.75rem;font-size:1rem}}
.sh-page .sh-more summary{min-height:2.75rem;padding:0 1.125rem;border-top:1px solid var(--line-soft);color:var(--text)}
.sh-page .sh-more[open] summary{margin-bottom:0}
.sh-page .sh-more fieldset{margin-top:0;border-top:1px solid var(--line-soft)}
.sh-page .sh-more fieldset>legend{float:inline-start;width:100%;margin:0;padding:0.875rem 1.125rem 0;font-size:0.84375rem;font-weight:500;color:var(--text)}
.sh-page .sh-more fieldset>label:first-of-type{border-top:0;clear:both}
.sh-page .sh-form>.btn{width:calc(100% - 2.25rem);height:2.625rem;margin:0.875rem 1.125rem 1.125rem;justify-content:center}
@media (min-width:61.25em){
.sh-duo{display:grid;grid-template-columns:minmax(0,27.5rem) minmax(0,1fr);gap:0 1.25rem;align-items:start}
.sh-duo>.sh-form{grid-column:1;grid-row:1/span 2}
.sh-duo>.sh-col{grid-column:2}
.sh-duo>.sh-col-answer{grid-row:1}
.sh-duo>.sh-col-rest{grid-row:2}
.sh-duo:not([data-answered]){grid-template-columns:minmax(0,32.5rem)}
}
/* Messages : entrée inconnue, cinquième modèle refusé, limite atteinte */
.cmp-msg{margin:0.75rem 0 0;display:flex;gap:0.5rem;align-items:flex-start;max-width:70ch;padding:0.625rem 0.875rem;border:1px dashed var(--line);border-radius:var(--r-ctl);font-size:0.84375rem;color:var(--text-2)}
/* Titre qui nomme la sélection (« A, B et C comparés ») : plus petit que le titre de page, lignes équilibrées */
.page-title.is-selection{font-size:clamp(1.375rem,3.2vw,2.5rem);line-height:1.15;text-wrap:balance}
/* Logo et nom d'un modèle, gardés ensemble (verdict) */
.cmp-m{min-width:0;font-weight:500;overflow-wrap:anywhere}
.pbar{display:block;overflow:visible}
.pbar-track{fill:var(--raise)}
.pbar-quarter{stroke:var(--line);stroke-width:1}
.pbar-fill{fill:var(--bar)}
.pbar.best .pbar-fill{fill:var(--accent-ink)}
.pbar-label{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.71875rem;fill:var(--text-2)}
.pbar.best .pbar-label{fill:var(--accent-ink);font-weight:600}
.pbar-label.in{fill:var(--bg)}
.pbar-mark{flex:none;margin-inline-end:0.375rem}
.pbar-mark rect{fill:var(--accent-ink)}
.pbar-ticks text{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;fill:var(--text-3)}
.pbar-part{fill:var(--bar)}
.pbar-part.on{fill:var(--accent-ink)}
.pbar-row{display:grid;grid-template-columns:minmax(0,16.25rem) minmax(0,1fr) auto;align-items:center;gap:1rem}
.pbar-val{display:inline-flex;align-items:center;justify-content:flex-end;font-family:var(--mono);font-stretch:var(--mono-stretch);font-variant-numeric:tabular-nums;white-space:nowrap}
.pbar-row[data-best] .pbar-val{color:var(--accent-ink);font-weight:600}
/* Téléphone : le nom et la valeur sur une ligne (le repère de la meilleure valeur reste devant son chiffre), la barre
   en pleine largeur dessous, moins haute */
@media (max-width:38.75em){.pbar-row{grid-template-columns:minmax(0,1fr) auto;gap:0.5rem 0.75rem}.pbar-row .pbar{grid-column:1/-1;grid-row:2;height:1.75rem}}
.info-btn.info-text{display:inline;width:auto;height:auto;margin:0;border-radius:0;font:inherit;color:inherit;text-decoration:underline dotted var(--text-3);text-decoration-thickness:1px;text-underline-offset:3px}
@media (pointer:coarse){.info-btn.info-text{display:inline-flex;align-items:center;min-height:2.75rem}.info-btn.info-text::before{content:none}}
.cmp-wrap{margin-top:1.125rem;border:1px solid var(--line)}
/* Fond opaque : sans lui le décor de fond de la page (le réseau dessiné derrière tout) transparaît entre les lignes */
.cmp-table{background:var(--bg);width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums}
.cmp-table th,.cmp-table td{padding:0 0.625rem;height:3.5rem;border-top:1px solid var(--line-soft);text-align:end;vertical-align:middle;font-weight:400;background:none}
.cmp-table thead th,.cmp-table thead td{height:2.125rem;border-top:0;background:var(--surface);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-col);white-space:nowrap}
.cmp-table .cmp-tip-def{display:block;margin-top:0.375rem;font-weight:400;opacity:.85}
.cmp-table thead .info-tip{text-transform:none;letter-spacing:0;white-space:normal}
.cmp-table thead .info-btn.info-text{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.cmp-table .cmp-h-model,.cmp-table .cmp-c-model{text-align:start}
.cmp-col-price{width:8.25rem}.cmp-col-obs{width:15rem}.cmp-col-x{width:2.125rem}
.cmp-table .w-est{width:6.5rem}.cmp-table .w-prov{width:6.25rem}.cmp-table .w-io{width:5.125rem}.cmp-table .w-nt{width:8.875rem}.cmp-table .w-week{width:5.25rem}.cmp-table .w-n{width:5.375rem}.cmp-table .w-ctx{width:4.875rem}
.cmp-table .cmp-h-obs,.cmp-table .cmp-c-obs{padding-inline-start:0.875rem;text-align:start}
.cmp-who{display:flex;align-items:center;gap:0.625rem;min-width:0}
.cmp-who .logo,.cmp-who .lab-badge{flex:none;width:1.75rem;height:1.75rem}
.cmp-name{min-width:0;font-size:0.9375rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;overflow-wrap:anywhere}
.cmp-name a{color:var(--text)}
.cmp-at{display:block;margin-top:2px;font-size:0.75rem;font-weight:400;letter-spacing:0;color:var(--text-3)}
.cmp-cost{display:block;min-width:0}
.cmp-sub{display:block;margin-top:2px;font-family:var(--sans);font-size:0.71875rem;font-weight:400;line-height:1.25;letter-spacing:0;color:var(--text-3);white-space:normal;overflow-wrap:anywhere}
/* Chemin dans le tableau large : masqué à l'écran mais lu d'un seul tenant avec le vendeur (lecteurs d'écran) */
.cmp-sub-via{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cmp-table .obs.obs-long{width:fit-content;height:auto;min-height:1.375rem;max-width:100%;padding-block:0.25rem;line-height:1.3;white-space:normal;text-align:start}
.obs-l2{display:block}
.cmp-flags{display:flex;flex-wrap:wrap;gap:0.25rem}
.cmp-c-obs .obs+.cmp-flags{margin-top:0.25rem}
/* Une case qui empile un badge et des étiquettes garde de l'air en haut et en bas (elle fixe alors la hauteur de la ligne) */
.cmp-table .cmp-c-obs:has(.cmp-flags){padding-block:0.625rem}
.cmp-flags .chip{height:auto;min-height:1.5rem;padding-block:3px;line-height:1.3;white-space:normal;text-align:start}
.cmp-sub-who[data-tip]{text-decoration:underline dotted var(--text-3);text-decoration-thickness:1px;text-underline-offset:3px;cursor:help}
.cmp-at a{color:inherit}
/* Repères du vendeur : montrés dans le tableau large seulement (les blocs et le papier écrivent le vendeur en toutes lettres) */
.cmp-sellers{display:none}
.chip-s{display:none}
/* Unité d'une colonne de prix, sous le libellé de son en-tête (une ligne à elle : à la suite du libellé elle élargissait
   chaque colonne et ne laissait plus de place au nom du modèle) */
.cmp-h-u{display:block;margin-top:1px;text-align:end;font-size:0.5625rem;letter-spacing:.02em;text-transform:none;color:var(--text-3)}
.cmp-table thead th{height:2.5rem}
/* Cases de prix : le nombre seul dans le tableau large, où l'en-tête de la colonne dit l'unité ; le symbole revient dans les
   blocs (une case y est une ligne « libellé, valeur ») et sur le papier */
@media (max-width:73.6875em){.cmp-table .cur{display:inline}}
@media print{.cmp-table .cur{display:inline}}
/* Grand écran : le tableau dépasse la colonne de texte de chaque côté, pour donner sa place au nom du modèle */
@media (min-width:90em){.cmp-wrap{margin-inline:-4.5rem}}
.cmp-v-a{color:inherit}
.cmp-v-a:hover{color:inherit;text-decoration:underline dotted var(--text-3);text-decoration-thickness:1px;text-underline-offset:3px}
/* Tableau large : une rangée = une ligne. Rien sous le nom, rien sous le coût mensuel ; le vendeur est son logo, après le
   nom, et le groupe des repères ne passe jamais à la ligne (c'est le nom qui cède). Cible portée à 44 px de haut */
@media (min-width:73.75em){
.cmp-table tbody th,.cmp-table tbody td{height:2.75rem}
.cmp-table .cmp-at,.cmp-table .cmp-sub{display:none}
/* Les repères sont au bout de la cellule du modèle, juste avant le premier prix : ils forment une colonne « vendeur », à la
   même abscisse sur toutes les rangées (collés au nom, un labo qui vend lui-même montrait deux fois son logo côte à côte) */
.cmp-sellers{display:inline-flex;flex:none;align-items:center;gap:0.25rem;margin-inline-start:auto;white-space:nowrap}
.cmp-seller{position:relative;z-index:1;display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.375rem;height:1.375rem;cursor:pointer}
span.cmp-seller{cursor:help}
.cmp-seller::before{content:"";position:absolute;inset:-0.6875rem -3px}
.cmp-who .cmp-seller .logo,.cmp-who .cmp-seller .lab-badge{width:1.375rem;height:1.375rem}
/* Nom du modèle : une ligne, coupé par des points de suspension s'il dépasse (le nom entier est dans sa bulle) */
.cmp-table .cmp-name{flex:1 1 auto;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.cmp-table .cmp-name a:focus-visible{outline-offset:-2px}
.cmp-seller.gw{border:1px solid var(--line-strong);background:var(--raise);color:var(--text-2)}
/* Vendeur sans vrai logo : son nom écrit, à sa largeur, au lieu d'une case de 22 px */
.cmp-seller.txt{width:auto;height:auto;font-size:0.78125rem;line-height:1.2;color:inherit}
/* Le nom du modèle reste toujours lisible : il garde huit caractères au moins, et ce sont les noms de vendeur écrits qui se
   réduisent (points de suspension, nom entier en bulle) quand la case est trop étroite pour tout */
.cmp-table .cmp-who>.cmp-name{flex:0 1 auto;min-width:8ch}
.cmp-table .cmp-sellers{flex:0 1 auto;min-width:0}
.cmp-table .cmp-seller.txt{flex:0 1 auto;min-width:0}
.cmp-table .cmp-seller.txt .sm-name{flex:0 1 auto;min-width:0;max-width:14ch}
/* Sous 1440 px la case du modèle ne tient pas un nom de modèle, un logo et un nom de passerelle écrit : il serait coupé à une ou
   deux lettres, ce qui ne nomme rien. La passerelle sans logo y prend l'icône neutre de passerelle (même case de 22 px que les
   logos), son nom en bulle et lu, cliquable si elle a une page ; à 1440 px le nom écrit revient */
.cmp-gw-ico{display:none}
/* Vendeur écrit ET passerelle, sous 1440 px : la case ne tient pas les deux. Le vendeur reste écrit (au moins cinq caractères), la
   passerelle n'est plus dessinée ; elle est dans la bulle du vendeur (« chez X via Y ») et dans le texte lu */
@media (max-width:89.9375em){.cmp-table .cmp-sellers:has(>.cmp-seller.sel)>.cmp-via,.cmp-table .cmp-sellers:has(>.cmp-seller.sel)>.cmp-via~.cmp-seller{display:none}.cmp-table .cmp-seller.sel{min-width:5ch}}
@media (max-width:89.9375em){.cmp-table .cmp-seller.txt:has(>.cmp-gw-ico){flex:none;width:1.375rem;height:1.375rem;min-width:1.375rem;border:1px solid var(--line-strong);background:var(--raise);color:var(--text-2)}.cmp-table .cmp-seller.txt>.cmp-gw-ico{display:inline-flex}.cmp-table .cmp-seller.txt>.cmp-gw-ico .ico{width:0.875rem;height:0.875rem}.cmp-table .cmp-seller.txt>.cmp-gw-ico~.sm-name{display:none}.cmp-table .cmp-seller.txt:has(>.cmp-gw-ico):hover{border-color:var(--accent-ink)}}a.cmp-seller.txt:hover .sm-name{color:var(--accent-ink)}
.cmp-seller.gw .ico{width:0.875rem;height:0.875rem}
.cmp-seller:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.cmp-via{flex:none;width:1px;height:0.75rem;background:var(--line-strong)}
@media (hover:hover){.cmp-seller:hover .logo,.cmp-seller:hover .lab-badge,.cmp-seller.gw:hover{border-color:var(--accent-ink)}}
/* Colonne des badges : le badge et les étiquettes d'état sur une même ligne ; la pastille de prix instable en forme courte */
.cmp-table .cmp-c-obs:has(.cmp-flags){padding-block:0}
.cmp-c-obs .obs,.cmp-c-obs .cmp-flags{vertical-align:middle}
.cmp-flags{display:inline-flex;flex-wrap:nowrap}
.cmp-c-obs .obs+.cmp-flags{margin-top:0;margin-inline-start:0.25rem}
.cmp-flags .chip{height:1.375rem;min-height:0;padding:0 0.375rem;white-space:nowrap}
.cmp-table .cmp-c-obs{padding-inline-end:0;white-space:nowrap}
.cmp-flags .chip-l{display:none}.cmp-flags .chip-s{display:inline;text-transform:uppercase;letter-spacing:.04em}
/* Le rapport du badge « le plus cher » est dans sa bulle : la case porte le badge ET la pastille de prix instable sur une ligne,
   sans sortir du cadre */
.cmp-table .obs-r{display:none}
/* Même règle pour le badge long « Le moins cher pour cette charge » : sa seconde partie le dessinait sur DEUX lignes dans la rangée.
   Dans le tableau large elle est dans la bulle du badge (qui dit déjà « Coût mensuel le plus bas pour cette charge ») et dans son nom
   lu ; la case du coût mensuel de la rangée porte le fond vert. Elle reste écrite dans les blocs et sur le papier */
.cmp-table .obs-l2{display:none}.cmp-table .obs.obs-long{height:1.375rem;padding-block:0;white-space:nowrap}
}
.cmp-table .cmp-c-price{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1rem;font-weight:500;letter-spacing:-.02em;color:var(--text);white-space:nowrap}
.cmp-table tbody td[data-l]{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.8125rem;color:var(--text-2);white-space:nowrap}
/* Valeur la plus favorable d'une colonne : cellule à fond d'accent léger ET valeur en gras (la forme porte le sens avec
   la couleur ; le nom lu le dit aux lecteurs d'écran). Le prix mixte le plus bas, lui, domine : plus grand, en accent */
.cmp-table tbody td[data-best]{background:var(--accent-wash);color:var(--text);font-weight:600}
.cmp-table tbody td.cmp-c-price[data-best]{font-size:1.125rem;font-weight:700;color:var(--accent-ink)}
/* Verdict : une précision entre parenthèses n'est plus écrite à l'écran, elle est la bulle de ce qu'elle précise (le vendeur, la
   phrase) ; elle reste lue, et s'écrit sur le papier */
.cmp-vn[data-tip]{cursor:help}
@media print{.cmp-verdict .cmp-vp{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}}
/* La règle du fond vert est dans la bulle de l'en-tête du prix ; sa phrase ne s'écrit que sur le papier, où il n'y a pas de bulle */
/* La règle du fond vert est aussi la bulle du prix gagnant : sur téléphone l'en-tête du tableau, qui la porte, n'est pas affiché */
.cmp-bv[data-tip]{cursor:help}
.cmp-tip-best{display:block;margin-top:0.375rem}
.cmp-best-note{display:none;margin:0.625rem 0 0}
@media print{.cmp-best-note{display:block}}
.cmp-v{display:inline-flex;align-items:center}
.cmp-table tbody .info-btn.info-text{text-decoration:none}
.cmp-table tbody td:hover .info-btn.info-text,.cmp-table tbody .info-btn.info-text:focus-visible{text-decoration:underline dotted var(--text-3);text-decoration-thickness:1px;text-underline-offset:3px}
.cmp-table .cmp-c-x{padding:0 0.25rem}
.cmp-table .cmp-remove{position:static;display:grid;place-items:center;width:1.625rem;height:1.625rem;border:1px solid transparent;color:var(--text-3)}
.cmp-table .cmp-remove:hover{border-color:var(--line-strong);color:var(--text)}
.cmp-table .cmp-remove .ico{width:0.6875rem;height:0.6875rem}
.cmp-table tbody td.week-down,.cmp-table tbody td.week-up{color:var(--text)}
/* Bulles des valeurs et des en-têtes : l'aspect de la bulle commune du site (texte inversé), pas un autre style */
.cmp-table .info-tip{border:0;background:var(--text);color:var(--bg);font-family:var(--sans);font-size:0.78125rem;font-weight:400;line-height:1.45;white-space:normal;text-align:start;box-shadow:0 0.625rem 1.875rem -0.75rem var(--shd)}
/* Sous 1180 px les colonnes fixes ne tiennent plus : un bloc par modèle, sur deux colonnes tant que la largeur le
   permet, sur une seule sur téléphone. Le badge d'observation est sous le nom, avant les valeurs */
@media (max-width:73.6875em){
.cmp-wrap{border:0}
.cmp-table,.cmp-table tbody{display:block}
.cmp-table thead{display:none}
.cmp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:0.75rem;margin-top:0.75rem;padding:0.75rem;border:1px solid var(--line);background:var(--bg)}
.cmp-table{background:none}
.cmp-table tbody th,.cmp-table tbody td{height:auto;padding:0;border:0}
.cmp-table .cmp-c-model{grid-column:1;grid-row:1}
.cmp-table colgroup{display:none}
.cmp-table .cmp-c-price{grid-column:2;grid-row:1;width:auto}
.cmp-table .cmp-c-x{grid-column:3;grid-row:1;padding:0}
.cmp-table .cmp-c-obs{grid-column:1/-1;grid-row:2;padding:0.5rem 0 0.25rem}
.cmp-table .cmp-c-obs:empty{display:none}
.cmp-table tbody td.cmp-c-price[data-best]{padding:2px 0.375rem}
.cmp-table tbody td[data-l][data-best]{padding-inline:0.375rem}
.cmp-table tbody td[data-l]{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:0.75rem;min-height:2rem;border-top:1px solid var(--line-soft);white-space:normal;width:auto}
.cmp-table tbody td[data-l]::before{content:attr(data-l);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--text-col);text-align:start}
.cmp-table tbody td[data-l] .cmp-v{flex:none}
.cmp-table tbody td[data-l] .cmp-cost{flex:0 1 auto;text-align:end}
.cmp-sub-via{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}.cmp-sub-who[data-tip]{text-decoration:none;cursor:auto}
.obs-l2{display:inline}
}
@media (min-width:43.75em) and (max-width:73.6875em){
.cmp-table tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.75rem;align-items:start;margin-top:0.75rem}
.cmp-row{margin-top:0}
}
@media (max-width:73.6875em) and (pointer:coarse){.cmp-table .cmp-remove{width:2.75rem;height:2.75rem;margin:-0.5625rem}}
.cmp-index .cmp-top{display:block;padding-bottom:0;border-bottom:0}
.cmp-index .cmp-top .page-title{margin:0 0 1rem;font-size:1.75rem;line-height:1.15;letter-spacing:-.02em;font-weight:600;max-width:none}
.cmp-index .lead{margin:1.125rem 0 0;max-width:64ch;font-size:0.9375rem;color:var(--text-2)}
.cmp-index .cmp-bar{padding:0.625rem 0;gap:0.5rem;border-block:1px solid var(--line)}
.cmp-index .cmp-load input{width:4rem;height:2rem}
.cmp-addbox{position:relative}
.cmp-index .cmp-preset:not([aria-pressed=true]){background:var(--bg)}
/* Titre à gauche, champ d'ajout à droite : la même place sur la page vide et sur la page remplie. Le champ a la taille
   d'un bouton de la page (« Partager », « Imprimer ») : 200 px sur 34 ; sa liste, plus large, s'ouvre sous lui */
.cmp-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.75rem 1.5rem;margin-bottom:1rem}
.cmp-index .cmp-top .cmp-title .page-title,.cmp-page .cmp-title .page-title{flex:1 1 0;min-width:0;margin:0}
:is(.cmp-index,.cmp-page) .cmp-add{background:var(--bg);width:12.5rem;height:2.125rem;padding:0 0.75rem;border:1px solid var(--accent-ink);text-transform:none;letter-spacing:0}
:is(.cmp-index,.cmp-page) .cmp-add:focus-within{border-style:solid}
:is(.cmp-index,.cmp-page) .cmp-add input{font-family:var(--sans);font-size:0.875rem}
:is(.cmp-index,.cmp-page) .cmp-add input::placeholder{color:var(--accent-ink)}
/* Sélection pleine : une mention, pas un champ où l'on peut écrire (ni cadre ni fond, texte calé à droite) */
:is(.cmp-index,.cmp-page) .cmp-add[data-full]{border-color:transparent;background:none;padding-inline:0}
:is(.cmp-index,.cmp-page) .cmp-add[data-full] input{text-align:end;cursor:default}
/* Écran étroit : le champ passe sous le titre, au bord gauche comme les étiquettes des modèles, à la même taille ;
   sa liste part du même bord (règle écrite après celle de la liste, plus bas) */
@media (max-width:38.6875em){.cmp-index .cmp-top .cmp-title .page-title,.cmp-page .cmp-title .page-title{flex-basis:100%}}
:is(.cmp-index,.cmp-page) .cmp-add[data-full] input::placeholder{color:var(--text-3)}
:is(.cmp-index,.cmp-page) .cmp-add[data-full] .cmp-add-plus{display:none}
@media (pointer:coarse){:is(.cmp-index,.cmp-page) .cmp-add{height:2.75rem}:is(.cmp-index,.cmp-page) .cmp-add input{font-size:1rem}}
/* La liste de suggestions est un menu : sous le champ, alignée à droite, par-dessus le contenu, jamais dans le flux */
:is(.cmp-index,.cmp-page) .cmp-listbox{left:auto;right:0;width:min(23.75rem,calc(100vw - 2rem));max-height:min(22.75rem,60vh);border-color:var(--line-strong);text-transform:none;letter-spacing:0}
@media (max-width:38.6875em){:is(.cmp-index,.cmp-page) .cmp-listbox{left:0;right:auto}}
.cmp-band{display:block;margin-top:1.125rem;padding:0.875rem 1.125rem;border:0;border-inline-start:3px solid var(--accent-ink);background:var(--surface)}
.cmp-band .cmp-verdict{font-size:1.0625rem;line-height:1.4;font-weight:500;letter-spacing:-.01em}
details.cmp-pairs{margin-top:0.75rem}
details.cmp-pairs>summary{display:flex;align-items:center;gap:0.625rem;padding:0.75rem 1rem;cursor:pointer;list-style:none;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
details.cmp-pairs>summary::-webkit-details-marker{display:none}
details.cmp-pairs>summary::before{content:"\25B8";color:var(--text-3)}
details.cmp-pairs[open]>summary::before{content:"\25BE"}
details.cmp-pairs>summary h2{margin:0;font:inherit;letter-spacing:inherit;color:var(--text)}
.cmp-pairs-n{color:var(--text-3)}
details.cmp-pairs .cmp-pair-list{border-top:1px solid var(--line-soft)}
.cmp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.75rem;margin-top:0.875rem}
.cmp-foot .fine{margin:0}
/* Étiquettes des modèles choisis : une ligne sous la barre de charge, alignée à droite, le champ d'ajout au bout.
   La croix de l'étiquette est le seul moyen de retirer un modèle (plus de croix en fin de ligne du tableau) */
.cmp-sel{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0.5rem;margin-top:0.625rem}
/* Aucun modèle choisi : la consigne seule, à gauche (le champ d'ajout est à côté du titre, dans tous les états) */
.cmp-sel[data-empty]{justify-content:flex-start}
.cmp-sel[data-empty] .cmp-chips:empty{display:none}
.cmp-sel .cmp-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0.5rem;margin:0;padding:0;list-style:none}
.cmp-sel .cmp-chips li{background:var(--bg);display:inline-flex;align-items:center;gap:0.5rem;height:2rem;padding-inline:0.5rem 2px;border:1px solid var(--line-strong);font-size:0.8125rem;color:var(--text)}
.cmp-sel .cmp-chips li[data-pending]{padding-inline-end:0.5rem;color:var(--text-2)}
.cmp-sel .cmp-chips .logo,.cmp-sel .cmp-chips .lab-badge{flex:none;width:1.125rem;height:1.125rem}
.cmp-sel .cmp-remove{position:relative;inset:auto;display:grid;place-items:center;width:1.5rem;height:1.5rem;color:var(--text-3)}
.cmp-sel .cmp-remove:hover{color:var(--text)}
.cmp-sel .cmp-remove .ico{width:0.625rem;height:0.625rem}
@media (pointer:coarse){.cmp-sel .cmp-remove::before{content:"";position:absolute;inset:-0.625rem}}
.cmp-index[aria-busy=true] .cmp-wrap,.cmp-index[aria-busy=true] .cmp-band{opacity:.65;transition:opacity var(--t-ui) ease}
@media print{.cmp-addbox{display:none!important}}
@media print{.cmp-sub-via{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}.cmp-sub-who[data-tip]{text-decoration:none}}
/* Modèle sans offre désignée : un tiret à l'écran (sa bulle dit pourquoi), deux mots sur le papier, jamais les deux */
.cmp-undesignated-paper{display:none}
@media print{.cmp-undesignated-dash{display:none}.cmp-undesignated-paper{display:inline;white-space:nowrap}}
/* Impression : la feuille du site cache tout .info (l'icône d'aide). Ici une valeur qui porte une bulle EST le bouton de sa
   bulle : elle reste sur le papier, seule la bulle est cachée */
@media print{.cmp-table .info{display:inline!important}.cmp-table .info-tip{display:none!important}.cmp-table .info-btn.info-text{text-decoration:none}}
@media (max-width:53.75em){
.cmp-index .cmp-top .page-title{font-size:1.375rem}
.cmp-index .cmp-load input{width:3.5rem}
.cmp-sel,.cmp-sel .cmp-chips{justify-content:flex-start}
.cmp-band .cmp-verdict{font-size:1rem}
}
.cs{margin-top:1.5rem}
.cs-title{margin:0 0 0.625rem;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
.cs-fig{margin:0;padding:1rem 1rem 0.75rem;border:1px solid var(--line);background:var(--bg);container-type:inline-size}
.cs-head{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem 0.875rem;font-size:0.875rem;font-weight:600}
.cs-key{display:inline-flex;align-items:center;gap:0.5rem}.cs-key+.cs-key{font-weight:500;color:var(--text-2)}
.cs-k{display:inline-block;width:1.125rem;height:0.25rem;overflow:visible}
.cs-vs{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.05em;font-weight:500;color:var(--text-3)}
.cs-box{position:relative;max-width:51.25rem;margin-top:0.5rem;--x0:0.0632;--x1:0.7895}
.cs-box.full{--x0:0.0632;--x1:0.9737}
.cs-svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.cs-narrow{display:none}
@container (max-width:560px){.cs-wide{display:none}.cs-narrow{display:block}.cs-box,.cs-box.full{--x0:0.1000;--x1:0.9706}}
.cs-grid{stroke:var(--line-soft);stroke-width:1}
.cs-tick{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;fill:var(--text-3)}
.cs-narrow .cs-tick{font-size:0.6875rem}
.cs-cap{text-transform:uppercase;letter-spacing:.05em;font-size:0.59375rem}.cs-narrow .cs-cap{font-size:0.625rem}
.cs-l0,.cs-l1,.cs-l2,.cs-l3{fill:none;stroke-width:1.5}
.cs-l0{stroke:var(--text)}.cs-l1{stroke:var(--text-2);stroke-dasharray:5 4}.cs-l2{stroke:var(--text-2);stroke-dasharray:1.5 3.5}.cs-l3{stroke:var(--text-2);stroke-dasharray:8 3 1.5 3}
.cs-k .cs-l0,.cs-k .cs-l1,.cs-k .cs-l2,.cs-k .cs-l3{stroke-width:2}
.cs-env{fill:none;stroke:var(--accent-ink);stroke-width:4;stroke-linejoin:round;opacity:.9}
.cs-x{fill:var(--bg);stroke:var(--accent-ink);stroke-width:2.5}
.cs-xl{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;font-weight:600;fill:var(--accent-ink)}
.cs-you{stroke:var(--text-3);stroke-width:1;stroke-dasharray:2 3}
.cs-name{font-size:0.78125rem;font-weight:500;fill:var(--text-2)}.cs-n0{font-weight:600;fill:var(--text)}
.cs-rule{display:none;stroke:var(--text);stroke-width:1}.cs-fig.is-moved .cs-rule{display:inline}
.cs-range{display:block;margin:2px 0 0 calc(var(--x0) * 100%);width:calc((var(--x1) - var(--x0)) * 100%);accent-color:var(--accent-ink)}
@media (pointer:coarse){.cs-range{height:2.75rem}}
.cs-tip{min-height:1.25rem;margin:0.25rem 0 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;color:var(--text-2)}
.cs-tip b{font-weight:600;color:var(--accent-ink)}
/* En large, une offre ne se coupe jamais : la ligne passe à la suivante entre deux offres. En étroit, un nom long peut se couper */
@container (min-width:561px){.cs-i{white-space:nowrap}}
/* En large, la ligne sous le dessin passe à droite du dessin, une offre par ligne (sinon un tiers de la figure restait vide,
   relecture d'Imani du 30/10), mais seulement si le dessin y garde ses 820 px : aucun libellé plus petit que sans la colonne.
   Seuil en rem, pour suivre la racine (90 % ou 100 %) : 820 + 32 + 220 px, plus le retrait et le cadre de la figure.
   La phrase reste lue et imprimée seulement : aucune phrase visible (règle de Didier du 10/10) */
.cs{container:cs/inline-size}
@container cs (min-width:69.25rem){.cs-fig{display:grid;grid-template-columns:51.25rem minmax(13.75rem,20.625rem);column-gap:2rem;align-items:start}
.cs-head{grid-column:1/-1}.cs-box{grid-column:1;grid-row:2}
.cs-tip{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:0.375rem;margin:0.875rem 0 0;line-height:1.35}.cs-sep{display:none}.cs-tip .cs-i{white-space:normal}.cs-p{color:var(--text-3)}}
@media print{.cs{break-inside:avoid;margin-top:0.75rem}.cs-title{margin-bottom:0.375rem}.cs-fig{padding:0.5rem 0.75rem 0.375rem}.cs-box{max-width:31.25rem}.cs-range,.cs-tip{display:none}.cs .cs-read{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;margin:0.375rem 0 0;font-size:0.6875rem;color:var(--text-2)}}

.api2-top{display:grid;grid-template-columns:minmax(0,1fr) 21.25rem;gap:1.75rem;align-items:start;padding-bottom:1.625rem;border-bottom:1px solid var(--line)}
.api2-main{min-width:0}
.api2-main .page-title{margin:0;font-size:2.75rem;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.api2-main .lead{margin:0.625rem 0 0;max-width:80ch;text-wrap:pretty;font-size:0.9375rem;line-height:1.55;color:var(--text-2)}
.api2-top .api-facts{margin:0.875rem 0 0}
.api2-top .api-facts li{background:var(--bg)}
/* Bloc d'essai */
.api2-try{margin-top:1.375rem;border:1px solid var(--line-strong);background:var(--surface)}
.api2-try .snippet.api2-req{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;margin:0;border:0;background:none;overflow:visible}
.api2-try .snippet.api2-req figcaption{order:2;padding:0.5rem;border:0}
.api2-try .snippet.api2-req pre{min-height:3.5rem;display:flex;align-items:center;padding:0.5rem 1rem;font-size:0.9375rem;color:var(--text-2)}
.api2-req .prompt{color:var(--text-3)}
.api2-req b{font-weight:700;color:var(--accent-ink)}
.api2-try .copy.api2-copy{height:2.5rem;padding:0 0.875rem;border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.api2-try .copy.api2-copy:hover{color:var(--on-accent);border-color:var(--accent)}
.api2-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--line)}
.api2-fields>div{min-width:0;padding:0.875rem 1rem 1rem;border-inline-start:1px solid var(--line)}
.api2-fields>div:first-child{border-inline-start:0}
.api2-fields dt{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;color:var(--text-3)}
.api2-fields dd{margin:0.625rem 0 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1.375rem;font-weight:500;letter-spacing:-.02em;color:var(--text);overflow-wrap:anywhere}
.api2-fields>div:last-child dd{color:var(--accent-ink)}
.api2-full{border-top:1px solid var(--line)}
.api2-full>summary{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;min-height:2.125rem;padding:0 1rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);cursor:pointer;list-style:none}
.api2-full>summary::-webkit-details-marker{display:none}
.api2-full>summary .api2-full-l{color:var(--accent-ink)}
.api2-full>summary .api2-full-l::after{content:" \25B8"}
.api2-full[open]>summary .api2-full-l::after{content:" \25BE"}
.api2-full .snippet{margin:0;border:0;border-top:1px solid var(--line)}
/* Les trois étapes de démarrage, repliées sous la réponse : le chiffre à droite dit combien */
.api2-steps{margin:0;padding:0.25rem 1rem 0.875rem 2.25rem;border-top:1px solid var(--line);font-size:0.84375rem;line-height:1.55;color:var(--text-2)}
.api2-steps li{padding:0.375rem 0}
.api2-steps strong{display:block;font-weight:600;color:var(--text)}
.api2-steps code{display:block;margin:2px 0;font-size:0.8125rem;color:var(--accent-ink);overflow-wrap:anywhere}
.api2-full .snippet pre{padding:0.625rem 1rem}
/* Réponse JSON : zone défilante bornée. Une ombre au bas dit qu'il y a une suite. Elle est peinte DERRIÈRE le texte et
   recouverte par un cache qui défile avec le contenu : elle ne voile jamais une ligne, et disparaît quand la réponse
   est assez courte pour ne pas défiler ou quand on arrive au bout */
.api-page .snippet.json pre{background:linear-gradient(var(--surface),var(--surface)) bottom/100% 1.75rem no-repeat local,linear-gradient(transparent,color-mix(in srgb,#000 var(--api2-shade,55%),transparent)) bottom/100% 1.5rem no-repeat scroll;background-color:var(--surface)}
/* Une ombre assombrit, dans les deux thèmes : du noir, dense par défaut (le site est sombre par défaut), léger là où les
   jetons clairs s'appliquent. Mêmes sélecteurs que les jetons clairs de la feuille (thème clair choisi, ou thème
   « système » quand le système est clair) : une seule logique de thème */
:root[data-theme=light] .api-page .snippet.json pre{--api2-shade:16%}
@media (prefers-color-scheme:light){:root[data-theme=system] .api-page .snippet.json pre{--api2-shade:16%}}
/* Limite de requêtes : deux barres sur la même échelle */
.api2-rate{padding:1rem;border:1px solid var(--line);background:var(--bg)}
.api2-rate h2{margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.api2-rate dl{margin:0}
.api2-rate-row{margin-top:0.875rem}
.api2-rate-row dt{font-size:0.8125rem;color:var(--text-2)}
.api2-rate-row dd{display:grid;grid-template-columns:minmax(0,1fr) 2.75rem;align-items:center;gap:0.75rem;margin:0.375rem 0 0}
.api2-rate-row .num{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1.0625rem;text-align:end;color:var(--text)}
.api2-rate-row[data-key] .num{color:var(--accent-ink)}
.api2-rate-solo dd{display:block}
.api2-rate-solo .num{font-size:1.375rem;font-weight:500;letter-spacing:-.02em;text-align:start}
.api2-rate .account-nudge,.api2-rate .btn{margin-top:1rem}
/* Endpoints : une ligne chacun, contenu replié */
.api-page h2.api2-h2{margin:1.875rem 0 0.75rem;font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.api2-eps{border:1px solid var(--line);background:var(--bg)}
.api2-ep{border-top:1px solid var(--line)}
/* Exemples d'usage : une recette repliée sous sa question (même cadre que les routes) ; la question est le titre cliquable, sur
   une seule colonne, et passe à la ligne sur un écran étroit */
.api2-ep.rcp>summary{grid-template-columns:minmax(0,1fr) auto;padding-block:0.75rem}
.rcp-q{font-size:0.9375rem;font-weight:600;line-height:1.35;color:var(--text)}
.rcp-read,.rcp-p{margin:0;padding:0.625rem 0.75rem;max-width:86ch;font-size:0.875rem;line-height:1.55;color:var(--text-2)}
.rcp-read strong{font-weight:600;color:var(--text)}
.rcp-read code,.rcp-p code{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.78125rem;color:var(--text);overflow-wrap:anywhere}
/* Page MCP : les questions à poser, une phrase à copier par ligne (elle passe à la ligne, ce n'est pas du code) */
.mcp-asks{margin-top:1.75rem}.mcp-page .mcp-asks h2{margin:0;font-size:1.125rem;font-weight:600;letter-spacing:-.015em}
.ask-list{list-style:none;margin:0.625rem 0 0;padding:0;display:grid;gap:0.75rem}
.snippet.ask pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:0.9375rem;color:var(--text)}.snippet.ask pre,.snippet.ask pre code{font-family:var(--sans)}
/* Blocs de code d'un exemple : une marge intérieure (le texte ne colle pas au cadre) ; la réponse abrégée s'affiche en entier, sans
   hauteur limitée ni défilement intérieur (elle est courte, et c'est elle qu'on vient lire) */
.rcp-list .snippet pre,.snippet.ask pre{padding:0.6875rem 0.75rem}
.api-page .rcp-list .snippet.json pre{max-height:none;overflow-x:auto;background:none}
/* Papier : une recette repliée s'écrit en entier (une feuille ne se déplie pas) et ne se coupe pas entre sa question et sa commande */
@media print{.api2-ep.rcp::details-content{content-visibility:visible;display:block}.api2-ep.rcp>summary::after{content:none}.api2-ep.rcp>summary{break-after:avoid}.rcp-list .snippet pre,.snippet.ask pre{white-space:pre-wrap;overflow-wrap:anywhere}}
.api2-ep:first-child{border-top:0}
.api2-ep>summary{display:grid;grid-template-columns:auto 11rem minmax(0,1fr) auto;align-items:center;gap:1rem;min-height:3.125rem;padding:0 1rem;cursor:pointer;list-style:none;border-inline-start:2px solid transparent}
.api2-ep>summary::-webkit-details-marker{display:none}
.api2-ep>summary::after{content:"\25B8";font-family:var(--sans);font-size:0.875rem;line-height:1;color:var(--text-3)}
.api2-ep[open]>summary::after{content:"\25BE"}
.api2-ep>summary .method-tag{border:1px solid var(--line-strong);background:none;color:var(--text-2)}
.api2-ep>summary code{font-size:0.9375rem;font-weight:600;color:var(--text);white-space:nowrap}
.api2-ep .api2-d{min-width:0;font-size:0.84375rem;line-height:1.35;color:var(--text-2);overflow-wrap:anywhere}
.api2-ep[open]>summary{background:var(--accent-wash);border-inline-start-color:var(--accent-ink)}
.api2-ep[open]>summary .method-tag{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.api2-ep[open] .api2-d{white-space:normal;overflow:visible}
.api2-ep-body{padding:0.375rem 1rem 1.125rem}
.api2-ep-body .params{margin-top:0;border-top:0}
.api2-ep-body .params div{grid-template-columns:9.375rem minmax(0,1fr)}
.api2-full .api-eps-note,.api2-ep-body .api-eps-note{margin:0.5rem 0 0;padding:0 1rem 0.75rem}
.api2-ep-body .api-eps-note{padding:0}
/* Signaux : étiquettes, explication en bulle */
.api2-signals{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0.75rem 0 0;padding:0;list-style:none}
.api2-signals li{display:inline-flex}
.api2-signals .info{display:inline-flex}
.api2-signals .info-btn.info-text{min-height:1.875rem;padding:0 0.625rem;border:1px solid var(--line-strong);background:var(--bg);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text);text-decoration:underline dotted;text-underline-offset:3px}
/* Bulle d'un signal : sous l'étiquette (au-dessus elle couvrait le titre), à l'aspect de la bulle commune du site */
.api2-signals .info-tip{bottom:auto;top:calc(100% + 0.375rem);border:0;background:var(--text);color:var(--bg);font-family:var(--sans);font-size:0.78125rem;font-weight:400;line-height:1.45;letter-spacing:0;text-transform:none;text-align:start;box-shadow:0 0.625rem 1.875rem -0.75rem var(--shd)}
.api2-note{margin:1.375rem 0 0;padding-top:1rem;border-top:1px solid var(--line);font-size:0.78125rem;line-height:1.55;color:var(--text-2)}
/* Impression. La feuille du site cache tout .info (c'était l'icône d'aide) : ici l'étiquette d'un signal EST le bouton de
   sa bulle, et l'explication n'existe plus qu'en bulle. Sur le papier, les huit noms restent et chaque explication
   s'écrit sous son nom. Les plis s'impriment dépliés (paramètres et exemples des endpoints, réponse, étapes) là où le
   navigateur sait déplier un <details> par la feuille de style */
@media print{
.api2-signals{display:block}
.api2-signals li{display:block;margin:0 0 0.5rem}
.api2-signals .info{display:block!important}
.api2-signals .info-btn.info-text{min-height:0;padding:0;border:0;background:none;font-weight:600;text-decoration:none}
.api2-signals .info-tip{display:block!important;position:static;visibility:visible!important;opacity:1!important;transform:none!important;width:auto;max-width:none;padding:2px 0 0;background:none;color:var(--text-2);box-shadow:none}
.api2-ep::details-content,.api2-full::details-content,.api-page .more-params::details-content{content-visibility:visible;display:block}
.api2-ep .api2-d{white-space:normal;overflow:visible}
.api-page .snippet.json pre{max-height:none;overflow:visible;background:none;white-space:pre-wrap;overflow-wrap:anywhere}
.api-page .copy{display:none!important}
}
@media (pointer:coarse){.api2-ep>summary,.api2-full>summary{min-height:3rem}.api2-signals .info-btn.info-text{min-height:2.75rem}}
@media (max-width:53.75em){
.api2-top{grid-template-columns:minmax(0,1fr)}
.api2-main .page-title{font-size:2.125rem}
.api2-try .snippet.api2-req{grid-template-columns:minmax(0,1fr)}
.api2-try .snippet.api2-req figcaption{padding:0 0.75rem 0.75rem}
.api2-try .copy.api2-copy{width:100%;justify-content:center}
.api2-fields{grid-template-columns:minmax(0,1fr)}
.api2-fields>div{border-inline-start:0;border-top:1px solid var(--line)}
.api2-fields>div:first-child{border-top:0}
.api2-ep>summary{grid-template-columns:auto minmax(0,1fr) auto;row-gap:0.5rem;padding-block:0.75rem}
.api2-ep .api2-d{display:none}
.api2-ep[open] .api2-d{display:block;order:9;grid-column:1/-1;padding-bottom:0.75rem}
.api2-ep-body .params div{grid-template-columns:minmax(0,1fr)}
}
.pl-tools{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1.5rem;margin-top:1.25rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase}
.pl-tools .mdl-count{margin-inline-start:auto;color:var(--text-3)}
.pl-tools .seg-links{gap:0.5rem;border:0;background:none}
.pl-tools .seg-links a{min-height:2.125rem;border:1px solid var(--line-strong);background:var(--bg)}
.pl-tools .seg-links a:first-child{border-inline-start:1px solid var(--line-strong)}
.pl-tools .seg-links a[aria-current]{border-color:var(--text);background:var(--text);color:var(--bg)}
@media (pointer:coarse){.pl-tools .seg-links a{min-height:2.75rem}}
.providers-page .prov-list{margin-top:0.75rem}
.providers-page .prov-list>.table-wrap{margin-top:0}
/* Badge d'observation, un seul gabarit pour la fiche, la liste et le comparateur : gagnant (plein, un seul par modèle),
   neutre (bord), alerte (bord et texte d'alerte, jamais un fond plein : il crierait autant que le gagnant). Le mot est
   toujours écrit : la couleur n'est jamais la seule marque */
.obs{display:inline-flex;align-items:center;height:1.375rem;padding:0 0.5rem;border:1px solid var(--line-strong);background:var(--bg);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;font-weight:400;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;color:var(--text-2)}
.obs.win{border-color:var(--accent-ink);background:var(--accent-ink);font-weight:600;color:var(--bg)}
.obs.warn{border-color:var(--warn);color:var(--warn)}
/* Liste : nombres alignés à droite ; « sans entraînement » au même bord droit que son en-tête, 100 % en accent, 0 % en alerte, les
   valeurs intermédiaires sans couleur (une couleur par seuil serait un jugement de notre part) */
.providers-page .prov-table{table-layout:fixed}
/* Six colonnes depuis « Moins cher » (29/10/2026) : les trois comptes à 86, 86 et 116 px (« Cheapest », son tri et son aide
   tiennent sur une ligne), la source à 172 px (« Page du fournisseur », la plus longue, en tient 147). Le nom garde 199 px à
   900 px, largeur où le tableau commence (en dessous, des cartes) : les noms y tiennent sur une ligne, comme avant la colonne
   (à 880 px « Vercel AI Gateway » en prenait deux) */
.providers-page .prov-table th:nth-child(2),.providers-page .prov-table th:nth-child(3){width:5.375rem}
.providers-page .prov-table th:nth-child(4){width:7.25rem}
/* « Moins cher » : en français l'en-tête (tri et aide compris) dépasse sa piste ; il passe à la ligne comme « No training on
   prompts » en anglais, entre ses deux mots (le bouton laisse 44 px : « Moins cher » entier n'y tient plus, la flèche reste donc
   avec « cher » au lieu de tomber seule), l'aide à la suite. En anglais « Cheapest » tient sur sa ligne */
:lang(fr) .providers-page .prov-table thead th:nth-child(4){white-space:normal;line-height:1.35}
:lang(fr) .providers-page .prov-table thead th:nth-child(4) .sort{display:inline-block;max-width:calc(100% - 2.75rem);text-align:end;vertical-align:bottom}:lang(fr) .providers-page .prov-table thead th:nth-child(4) .sort .ico{display:inline-block;vertical-align:-2px;margin-inline-start:0.25rem}
.providers-page .prov-table th:nth-child(5){width:10.625rem}
/* L'en-tête de cette colonne est plus long que sa piste en anglais (« No training on prompts », tri et aide compris) : il passait
   sur l'en-tête voisin. En anglais il passe à la ligne dans sa piste ; en français il tient sur sa ligne et n'est pas touché. La
   largeur des colonnes ne change pas, les rangées non plus */
:lang(en) .providers-page .prov-table thead th:nth-child(5){white-space:normal;line-height:1.35}
/* Le libellé et sa flèche de tri coulent comme un texte (deux lignes alignées à gauche, la flèche à la suite du dernier mot) ; un bouton reste un bloc, on lui laisse donc 24 px à droite pour que l'aide tienne sur sa dernière ligne */
:lang(en) .providers-page .prov-table thead th:nth-child(5) .sort{display:inline-block;max-width:calc(100% - 1.75rem);text-align:end;vertical-align:bottom}:lang(en) .providers-page .prov-table thead th:nth-child(5) .sort .ico{display:inline-block;vertical-align:-2px;margin-inline-start:0.25rem}
.providers-page .prov-table th:nth-child(6){width:10.75rem}
.providers-page .prov-table td.num,.providers-page .prov-table td.nt{font-variant-numeric:tabular-nums}
/* Pourcentages : l'en-tête et les valeurs partent du même bord droit (règle du 28/10 : nombres à droite, en-tête compris) */
.providers-page .prov-table thead th:nth-child(5){text-align:end}
.providers-page .prov-table td.nt{text-align:end;font-size:0.78125rem;font-weight:400;color:var(--text)}
.providers-page .prov-table td.nt.all{font-weight:600;color:var(--accent-ink)}
.providers-page .prov-table td.nt.zero{color:var(--warn)}
.prov-table thead .no-js a{color:inherit}
/* Papier : le bloc d'un fournisseur (nom, puis ses quatre valeurs sous leurs libellés) ne se coupe pas entre deux feuilles */
@media print{.prov-table tbody tr{break-inside:avoid}}
.providers-page .prov-table{min-width:43.75rem}
@media (max-width:49.9375em){.pl-tools .mdl-count{margin-inline-start:0}}
/* Rangée « Trier » : seulement là où la liste est en cartes (en-têtes masqués) ; à partir de 900 px, les en-têtes trient */
.pl-tools .prov-sort{display:none}
@media (max-width:56.1875em){.pl-tools .prov-sort{display:flex}}
/* « Trier » reste à côté de ses liens (Imani, 29/10 : de 601 à 768 px, le groupe entier passait sous le libellé) : la rangée ne
   passe plus à la ligne, ce sont les liens qui passent à la ligne entre eux, dans la place qui reste à droite du libellé.
   Sous 601 px (cartes étroites), rien ne change */
@media (min-width:37.5625em) and (max-width:56.1875em){.pl-tools .prov-sort{flex-wrap:nowrap}.pl-tools .prov-sort>span:first-child{flex:none}.pl-tools .prov-sort>.seg-links{min-width:0}}
/* Tableau (à partir de 900 px) : une rangée = une ligne. Un nom trop long pour sa piste (« Claude Platform on AWS » de 900 à
   1 099 px, Imani, 29/10) est coupé par « … » ; sa bulle le redit en entier, et le lecteur d'écran lit le lien entier. Un nom écrit en entier n'a pas de
   bulle (data-tip-cut, site.js) */
@media screen and (min-width:56.25em){.providers-page .prov-table th .mdl-name>a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media (max-width:56.1875em){.providers-page .prov-table{min-width:0}.providers-page .prov-table td.nt{text-align:start}}
@media print{.pl-tools{display:none}}
.pf-head{display:grid;grid-template-columns:minmax(0,1fr) 32.5rem;gap:1.75rem;align-items:end;padding-bottom:1.375rem;border-bottom:1px solid var(--line)}
.pf-head .pv-head{padding-bottom:0;border-bottom:0;min-width:0}
.pf-two{display:grid;gap:0.875rem;margin:0}
.pf-p{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0.375rem 0.75rem;align-items:baseline}
.pf-p dt{font-size:0.8125rem;color:var(--text-2)}
.pf-p .nw{white-space:nowrap}
.pf-p dd{margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1.375rem;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.pf-p dd span{font-size:0.75rem;font-weight:400;letter-spacing:0;color:var(--text-3)}
.pf-p dd.none{font-family:var(--sans);font-size:0.875rem;font-weight:400;letter-spacing:0;color:var(--text-3)}
.pf-p dd.pf-b{grid-column:1/-1}
.pf-p .pbar-track{fill:var(--track)}
.pf-p .pl-hatch{display:block;height:0.75rem;background:repeating-linear-gradient(135deg,var(--track) 0 0.25rem,transparent 0.25rem 0.5rem)}
.pf-tools .pv-filter{height:2.125rem}
.pf-panel{margin-top:0.75rem}
.pf-panel>.pf-wrap{margin-top:0;overflow-x:auto;overflow-y:hidden}
.pf-table{width:100%;min-width:56.25rem;table-layout:fixed;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pf-table th,.pf-table td{height:2.875rem;padding:0.375rem 0.625rem;border:0;border-top:1px solid var(--line-soft);text-align:end;vertical-align:middle;background:none;font-weight:400}
.pf-table thead th{position:static;height:2.125rem;padding-block:0;border-top:0;background:var(--surface);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-col);white-space:nowrap}
.pf-table thead .sort{color:inherit;letter-spacing:inherit;text-transform:inherit}
.pf-table thead a.sort{display:inline-flex;align-items:center;gap:0.25rem}
.pf-table thead a.sort:hover{color:var(--text);text-decoration:none}
.pf-table thead th[aria-sort]{color:var(--text)}
.pf-table thead th[aria-sort] .sort .ico{opacity:1;color:var(--accent-ink)}
.pf-table tr>:first-child{padding-inline-start:1rem;text-align:start}
.pf-table tr>:last-child{padding-inline-end:1rem}
.pf-c-m{width:auto}.pf-c-p{width:7rem}.pf-c-i{width:6.25rem}.pf-c-g{width:10.625rem}.pf-c-c{width:5.25rem}.pf-c-l{width:5.75rem}
.pf-table th.pf-c-g,.pf-table td.pf-g{padding-inline:0.875rem 0.375rem;text-align:start}
.pf-nc{display:inline-flex;align-items:center;min-width:1.6875rem;min-height:1.6875rem;color:var(--text-3);cursor:help}
.pf-nc-d{padding-bottom:1px;border-bottom:1px dotted var(--text-3);font-family:var(--sans);font-size:0.75rem;white-space:nowrap}
@media (pointer:coarse){.pf-nc{min-width:3.0625rem;min-height:3.0625rem}}
.pf-table tbody tr{transition:background-color 120ms ease}
.pf-table tbody tr:hover{background:var(--row-hover)}
.pf-table tbody tr.stale{opacity:.72}
.pf-table td.num{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.8125rem;color:var(--text-p);white-space:nowrap}
.pf-table td.bl{font-size:1rem;font-weight:500;color:var(--text)}
/* Cellule gagnante : le prix mixte de la ligne gagnante sur fond d'accent léger, en gras et en accent ; pas de fond
   sur toute la ligne, pas de losange */
.pf-table td.bl.best{background:var(--accent-wash);font-weight:700;color:var(--accent-ink)}
.pf-table .mdl-name{display:flex;align-items:center;gap:0.625rem;min-width:0}
.pf-who{display:flex;flex-direction:column;gap:3px;min-width:0}
/* Nom du modèle (ou d'un chemin) : jamais coupé, il passe à la ligne, même au milieu d'un identifiant sans espace */
.pf-who>a,.pf-who>span:first-child{font-size:0.90625rem;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--text);white-space:normal;overflow-wrap:anywhere}
/* Le lien du modèle porte un texte lu seulement, en position absolue. Quand le lien coupait son nom sur une ligne sans
   être positionné, ce texte restait au bout du nom non coupé, hors de l'écran, et élargissait le document (375 px dans
   une fenêtre de 320 px avec un nom long). Le nom passe maintenant à la ligne ; le lien reste positionné pour contenir
   ce texte quoi qu'il arrive */
.pf-who>a{position:relative}
.pf-who>a:hover{color:var(--accent-ink);text-decoration:none}
.pf-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem;min-width:0;white-space:normal;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.65625rem;color:var(--text-3)}
.pf-meta .cond-icon{display:inline-flex}
/* Pastilles d'une rangée : un emplacement dans le tableau (à partir de 860 px), rien en cartes ni sur le papier (elles suivent le fil) */
.pf-chips{display:contents}
.pf-slots{display:contents}
/* Source d'une condition : l'icône (ou la région) est le lien ; l'adresse ne s'écrit que sur le papier */
.pf-src{display:none}
a.pf-reg{color:inherit;text-decoration:underline dotted;text-underline-offset:2px}
a.cond-icon:focus-visible,a.pf-reg:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
@media print{.pf-src{display:inline;margin-inline-start:0.25rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.59375rem;overflow-wrap:anywhere}}
.pf-meta .pf-ways{margin-inline-start:0.375rem}
.pf-ways summary{display:inline-flex;align-items:center;gap:0.3125rem;min-height:1.25rem;cursor:pointer;list-style:none;color:var(--text-2)}
.pf-ways summary::-webkit-details-marker{display:none}
.pf-ways summary::after{content:"";width:0;height:0;border-block:0.21875rem solid transparent;border-inline-start:0.3125rem solid currentColor;transition:transform 150ms cubic-bezier(.23,1,.32,1)}
.pf-ways[open] summary::after{transform:rotate(90deg)}
.pf-ways summary:hover{color:var(--text)}
.pf-cheaper{color:var(--text-3)}.pf-ch-s{display:none}
@media (pointer:coarse){.pf-ways summary{min-height:2.75rem}}
@media (prefers-reduced-motion:reduce){.pf-ways summary::after{transition:none}}
/* Une rangée = une ligne (tableau large, à l'écran). Ce qui s'écrivait sous le nom prend des EMPLACEMENTS de largeur fixe au bout
   de la cellule du modèle, pour tomber à la même abscisse d'une rangée à l'autre : chemin, précision, bouclier, région, pli
   « N chemins » (chaque piste comprend 10 px d'écart) ; les signaux de prix, rares, se rangent avant eux. Le chemin : rien en
   direct, le repère de la passerelle (nom en bulle), une pastille courte pour « API hébergée » (la phrase en bulle et lue). Une
   pastille de signal prend sa forme courte (libellé entier en bulle et lu). Le nom prend la place libre ; trop long pour elle, il est coupé
   par des points de suspension, sa forme entière en bulle (à 1440 px tous les noms relevés tiennent). Plus étroit, en cartes et sur le papier : tout est écrit, comme avant.
   Sauf les pastilles « Inconfirmée » et « Invérifiée » : leur texte lu est une phrase (date et raison), jamais écrite ; elles gardent leur mot, la phrase
   reste en bulle (et sur le papier, le mot suivi de sa date ou de sa raison).
   À partir de 1 440 px seulement (règle de Didier comptée à 1 440 px, Chloé, 29/10) : de 1 200 à 1 439 px, la grille des faits de la
   rangée Azure la plus chargée (« 3 chemins · 1 à prix inférieur », « Frais 5 % », « LLM Gateway ») demandait 500 à 560 px pour une
   case de 570 à 600 et sortait de 56 à 155 px selon la taille de la racine (90 % avec souris, 100 % sans) ; elle passe sous le nom (Imani, #1216) */
@media not screen,(max-width:89.9375em){.pf-meta .pv-gw{display:none}.pf-table .cur{display:inline}.pf-table .th-u{display:none}}
/* Cartes et papier : chaque pastille écrite en entier (le tableau, à partir de 860 px, garde la forme courte et son libellé en bulle) */
@media not screen,(max-width:53.6875em){.pf-meta .chip:not(.cond-unc):not(.unv)>[aria-hidden]:not(.chip-paper){display:none}.pf-meta .chip:not(.cond-unc):not(.unv)>[aria-hidden]:not(.chip-paper)+.sr{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:inherit}}
@media screen and (min-width:90em){
.pf-who{flex:1 1 auto;flex-flow:row nowrap;align-items:center;gap:0.625rem}
.pf-who>a,.pf-who>span:first-child{flex:1 1 auto;min-width:0}
/* Une rangée = une ligne, sans exception : un nom de modèle qui ne tient pas est coupé par des points de suspension ; sa bulle le
   donne en entier (survol, clavier, toucher), et il reste écrit en entier dans les cartes et sur le papier ; « span.pf-name », pas « .pf-name » :
   la règle « .pf-who>span:first-child{white-space:normal} » plus haut l'emportait, et le nom sans page passait à la ligne */
.pf-who>a,.pf-who>span.pf-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
/* Pli en forme courte (« 3 chemins · 1 inférieur ▸ »), la phrase entière en bulle et lue, et son emplacement suit cette forme : à 1 440 px,
   la forme longue rétrécissait la case du nom de toutes les rangées (Azure : 25 noms coupés en FR, 29 en EN, contre 2 et 0 sur main ;
   Chloé, 29/10, #1216) */
.pf-ch-l{display:none}.pf-ch-s{display:inline}.pf-table[class]{--pf-c8:var(--pf-c8s,0px)}
.pf-meta{flex:none;display:grid;grid-template-columns:max-content minmax(var(--pf-c4),max-content) var(--pf-c5,calc(var(--pf-pc,4ch) + 0.75rem)) var(--pf-c6,1.625rem) var(--pf-c7,5.125rem) var(--pf-c8,5.625rem);gap:0;align-items:center;justify-items:start;white-space:nowrap}
.pf-meta>*,.pf-slots>*{grid-row:1;margin-inline-start:0.625rem}
.pf-meta>.pf-chips{grid-column:1;margin-inline-start:0}
/* Trois signaux ou plus : deux écrits, les suivants derrière « +N » (libellés en bulle), et le nom garde au moins neuf caractères */
.pf-chips>.pf-more{display:inline-flex}.pf-more-n{cursor:help}
.pf-more-all{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pf-who>a{min-width:min(100%,9ch)}
.pf-slots>.pv-gw,.pf-slots>.pv-via,.pf-slots>.info{grid-column:2;display:inline-flex}
/* Passerelle sans logo : son nom dans l'emplacement du chemin, au poids des autres faits de la rangée ; l'emplacement s'élargit pour un nom plus long que lui, il ne déborde jamais sur le suivant */
.pf-meta .sm-name{font-family:var(--sans);font-size:0.71875rem;font-weight:500;letter-spacing:0;color:var(--text-2)}
.pf-slots>.pf-prec{grid-column:3}
.pf-slots>.cond{grid-column:4}
.pf-slots>.pf-reg{grid-column:5;white-space:nowrap}
.pf-meta>.pf-ways{grid-column:6;justify-self:end;margin-inline-start:0}
.pf-slots>.pv-gw+.pv-via,.pf-slots>.pv-via[data-direct],.pf-meta .pf-prec .info,.pf-meta .pv-via .info{display:none}
/* Aucun nom coupé tant qu'il reste de la place. Un emplacement qu'aucune rangée du tableau n'occupe se referme pour toutes (les
   colonnes restent alignées) ; celui du chemin, le premier, se referme aussi sur la seule rangée d'une offre directe : les
   emplacements suivants, de largeur fixe et calés au bout de la cellule, gardent leur abscisse d'une rangée à l'autre */
/* 0px et jamais 0 : un calc() ou un max() sur une piste sans unité annulerait toute la grille (pistes implicites, emplacements décalés ; #1216) */
.pf-table:not(:has(.pf-slots>.pf-prec)){--pf-c5:0px}.pf-table:not(:has(.pf-slots>.cond)){--pf-c6:0px}.pf-table:not(:has(.pf-slots>.pf-reg)){--pf-c7:0px}.pf-table:not(:has(.pf-meta>.pf-ways)){--pf-c8:0px}
/* Pastilles et chemin (28/10, « une case vide reste vide ») : deux emplacements de largeur fixe pour tout le tableau, réglés par
   ses classes (pf-cwN : la plus longue pastille écrite, en caractères, pf-mo : un « +N » ; pf-vN : le plus long nom de chemin), jamais par la
   rangée ; une rangée sans pastille ou en direct garde son emplacement vide et ses voisines leur abscisse. Les pastilles prennent
   le style de celles du tableau des offres (une seule pastille sur le site) : 10 px, capitales, onze caractères de large au moins ; une
   seule écrite par rangée, les suivantes derrière « +N » (bulle) */
.pf-meta .chip{min-height:1.25rem;height:auto;padding:2px 0.375rem;font-size:0.625rem;letter-spacing:.03em;text-transform:uppercase}
.pf-chips{display:inline-flex;gap:0.375rem;font-size:0.625rem;letter-spacing:.03em;width:max(var(--pf-cw,0px),calc(11ch + .33em + 0.875rem))}
.pf-chips>.chip:not(.chip-icon):not(.pf-more-n){min-width:calc(11ch + .33em + 0.875rem)}
.pf-mo .pf-chips{width:calc(max(var(--pf-cw,0px),calc(11ch + .33em + 0.875rem)) + 0.375rem + 3em)}
.pf-cw0 .pf-chips{display:none}
.pf-cw6{--pf-cw:calc(6 * .75em + 0.875rem)}.pf-cw7{--pf-cw:calc(7 * .75em + 0.875rem)}.pf-cw8{--pf-cw:calc(8 * .75em + 0.875rem)}.pf-cw9{--pf-cw:calc(9 * .75em + 0.875rem)}.pf-cw10{--pf-cw:calc(10 * .75em + 0.875rem)}.pf-cw11{--pf-cw:calc(11 * .75em + 0.875rem)}.pf-cw12{--pf-cw:calc(12 * .75em + 0.875rem)}.pf-cw13{--pf-cw:calc(13 * .75em + 0.875rem)}.pf-cw14{--pf-cw:calc(14 * .75em + 0.875rem)}.pf-cw15{--pf-cw:calc(15 * .75em + 0.875rem)}.pf-cw16{--pf-cw:calc(16 * .75em + 0.875rem)}.pf-cw17{--pf-cw:calc(17 * .75em + 0.875rem)}.pf-cw18{--pf-cw:calc(18 * .75em + 0.875rem)}.pf-cw19{--pf-cw:calc(19 * .75em + 0.875rem)}.pf-cw20{--pf-cw:calc(20 * .75em + 0.875rem)}.pf-cw21{--pf-cw:calc(21 * .75em + 0.875rem)}.pf-cw22{--pf-cw:calc(22 * .75em + 0.875rem)}.pf-cw23{--pf-cw:calc(23 * .75em + 0.875rem)}.pf-cw24{--pf-cw:calc(24 * .75em + 0.875rem)}.pf-cw25{--pf-cw:calc(25 * .75em + 0.875rem)}.pf-cw26{--pf-cw:calc(26 * .75em + 0.875rem)}.pf-cw27{--pf-cw:calc(27 * .75em + 0.875rem)}.pf-cw28{--pf-cw:calc(28 * .75em + 0.875rem)}
.pf-v0{--pf-c4:0px}.pf-v4{--pf-c4:calc(4ch + 0.75rem)}.pf-v5{--pf-c4:calc(5ch + 0.75rem)}.pf-v6{--pf-c4:calc(6ch + 0.75rem)}.pf-v7{--pf-c4:calc(7ch + 0.75rem)}.pf-v8{--pf-c4:calc(8ch + 0.75rem)}.pf-v9{--pf-c4:calc(9ch + 0.75rem)}.pf-v10{--pf-c4:calc(10ch + 0.75rem)}.pf-v11{--pf-c4:calc(11ch + 0.75rem)}.pf-v12{--pf-c4:calc(12ch + 0.75rem)}.pf-v13{--pf-c4:calc(13ch + 0.75rem)}.pf-v14{--pf-c4:calc(14ch + 0.75rem)}.pf-v15{--pf-c4:calc(15ch + 0.75rem)}.pf-v16{--pf-c4:calc(16ch + 0.75rem)}.pf-v17{--pf-c4:calc(17ch + 0.75rem)}.pf-v18{--pf-c4:calc(18ch + 0.75rem)}.pf-v19{--pf-c4:calc(19ch + 0.75rem)}.pf-v20{--pf-c4:calc(20ch + 0.75rem)}.pf-v21{--pf-c4:calc(21ch + 0.75rem)}.pf-v22{--pf-c4:calc(22ch + 0.75rem)}.pf-v23{--pf-c4:calc(23ch + 0.75rem)}.pf-v24{--pf-c4:calc(24ch + 0.75rem)}
.pf-r0{--pf-c7:0px}.pf-r1{--pf-c7:calc(1ch + 0.75rem)}.pf-r2{--pf-c7:calc(2ch + 0.75rem)}.pf-r3{--pf-c7:calc(3ch + 0.75rem)}.pf-r4{--pf-c7:calc(4ch + 0.75rem)}.pf-r5{--pf-c7:calc(5ch + 0.75rem)}.pf-r6{--pf-c7:calc(6ch + 0.75rem)}.pf-r7{--pf-c7:calc(7ch + 0.75rem)}.pf-r8{--pf-c7:calc(8ch + 0.75rem)}.pf-r9{--pf-c7:calc(9ch + 0.75rem)}.pf-r10{--pf-c7:calc(10ch + 0.75rem)}.pf-r11{--pf-c7:calc(11ch + 0.75rem)}.pf-r12{--pf-c7:calc(12ch + 0.75rem)}.pf-r13{--pf-c7:calc(13ch + 0.75rem)}.pf-r14{--pf-c7:calc(14ch + 0.75rem)}.pf-r15{--pf-c7:calc(15ch + 0.75rem)}.pf-r16{--pf-c7:calc(16ch + 0.75rem)}.pf-r17{--pf-c7:calc(17ch + 0.75rem)}.pf-r18{--pf-c7:calc(18ch + 0.75rem)}.pf-r19{--pf-c7:calc(19ch + 0.75rem)}.pf-r20{--pf-c7:calc(20ch + 0.75rem)}.pf-r21{--pf-c7:calc(21ch + 0.75rem)}.pf-r22{--pf-c7:calc(22ch + 0.75rem)}.pf-r23{--pf-c7:calc(23ch + 0.75rem)}.pf-r24{--pf-c7:calc(24ch + 0.75rem)}
.pf-w0{--pf-c8:0px}.pf-w1{--pf-c8:calc(1ch + 1.375rem)}.pf-w2{--pf-c8:calc(2ch + 1.375rem)}.pf-w3{--pf-c8:calc(3ch + 1.375rem)}.pf-w4{--pf-c8:calc(4ch + 1.375rem)}.pf-w5{--pf-c8:calc(5ch + 1.375rem)}.pf-w6{--pf-c8:calc(6ch + 1.375rem)}.pf-w7{--pf-c8:calc(7ch + 1.375rem)}.pf-w8{--pf-c8:calc(8ch + 1.375rem)}.pf-w9{--pf-c8:calc(9ch + 1.375rem)}.pf-w10{--pf-c8:calc(10ch + 1.375rem)}.pf-w11{--pf-c8:calc(11ch + 1.375rem)}.pf-w12{--pf-c8:calc(12ch + 1.375rem)}.pf-w13{--pf-c8:calc(13ch + 1.375rem)}.pf-w14{--pf-c8:calc(14ch + 1.375rem)}.pf-w15{--pf-c8:calc(15ch + 1.375rem)}.pf-w16{--pf-c8:calc(16ch + 1.375rem)}.pf-w17{--pf-c8:calc(17ch + 1.375rem)}.pf-w18{--pf-c8:calc(18ch + 1.375rem)}.pf-w19{--pf-c8:calc(19ch + 1.375rem)}.pf-w20{--pf-c8:calc(20ch + 1.375rem)}.pf-w21{--pf-c8:calc(21ch + 1.375rem)}.pf-w22{--pf-c8:calc(22ch + 1.375rem)}.pf-w23{--pf-c8:calc(23ch + 1.375rem)}.pf-w24{--pf-c8:calc(24ch + 1.375rem)}.pf-w25{--pf-c8:calc(25ch + 1.375rem)}.pf-w26{--pf-c8:calc(26ch + 1.375rem)}.pf-w27{--pf-c8:calc(27ch + 1.375rem)}.pf-w28{--pf-c8:calc(28ch + 1.375rem)}.pf-w29{--pf-c8:calc(29ch + 1.375rem)}.pf-w30{--pf-c8:calc(30ch + 1.375rem)}.pf-w31{--pf-c8:calc(31ch + 1.375rem)}.pf-w32{--pf-c8:calc(32ch + 1.375rem)}.pf-w33{--pf-c8:calc(33ch + 1.375rem)}.pf-w34{--pf-c8:calc(34ch + 1.375rem)}.pf-w35{--pf-c8:calc(35ch + 1.375rem)}.pf-w36{--pf-c8:calc(36ch + 1.375rem)}.pf-w37{--pf-c8:calc(37ch + 1.375rem)}.pf-w38{--pf-c8:calc(38ch + 1.375rem)}.pf-w39{--pf-c8:calc(39ch + 1.375rem)}.pf-w40{--pf-c8:calc(40ch + 1.375rem)}
.pf-x0{--pf-c8s:0px}.pf-x1{--pf-c8s:calc(1ch + 1.375rem)}.pf-x2{--pf-c8s:calc(2ch + 1.375rem)}.pf-x3{--pf-c8s:calc(3ch + 1.375rem)}.pf-x4{--pf-c8s:calc(4ch + 1.375rem)}.pf-x5{--pf-c8s:calc(5ch + 1.375rem)}.pf-x6{--pf-c8s:calc(6ch + 1.375rem)}.pf-x7{--pf-c8s:calc(7ch + 1.375rem)}.pf-x8{--pf-c8s:calc(8ch + 1.375rem)}.pf-x9{--pf-c8s:calc(9ch + 1.375rem)}.pf-x10{--pf-c8s:calc(10ch + 1.375rem)}.pf-x11{--pf-c8s:calc(11ch + 1.375rem)}.pf-x12{--pf-c8s:calc(12ch + 1.375rem)}.pf-x13{--pf-c8s:calc(13ch + 1.375rem)}.pf-x14{--pf-c8s:calc(14ch + 1.375rem)}.pf-x15{--pf-c8s:calc(15ch + 1.375rem)}.pf-x16{--pf-c8s:calc(16ch + 1.375rem)}.pf-x17{--pf-c8s:calc(17ch + 1.375rem)}.pf-x18{--pf-c8s:calc(18ch + 1.375rem)}.pf-x19{--pf-c8s:calc(19ch + 1.375rem)}.pf-x20{--pf-c8s:calc(20ch + 1.375rem)}.pf-x21{--pf-c8s:calc(21ch + 1.375rem)}.pf-x22{--pf-c8s:calc(22ch + 1.375rem)}.pf-x23{--pf-c8s:calc(23ch + 1.375rem)}.pf-x24{--pf-c8s:calc(24ch + 1.375rem)}.pf-x25{--pf-c8s:calc(25ch + 1.375rem)}.pf-x26{--pf-c8s:calc(26ch + 1.375rem)}.pf-x27{--pf-c8s:calc(27ch + 1.375rem)}.pf-x28{--pf-c8s:calc(28ch + 1.375rem)}.pf-x29{--pf-c8s:calc(29ch + 1.375rem)}.pf-x30{--pf-c8s:calc(30ch + 1.375rem)}.pf-x31{--pf-c8s:calc(31ch + 1.375rem)}.pf-x32{--pf-c8s:calc(32ch + 1.375rem)}.pf-x33{--pf-c8s:calc(33ch + 1.375rem)}.pf-x34{--pf-c8s:calc(34ch + 1.375rem)}.pf-x35{--pf-c8s:calc(35ch + 1.375rem)}.pf-x36{--pf-c8s:calc(36ch + 1.375rem)}.pf-x37{--pf-c8s:calc(37ch + 1.375rem)}.pf-x38{--pf-c8s:calc(38ch + 1.375rem)}.pf-x39{--pf-c8s:calc(39ch + 1.375rem)}.pf-x40{--pf-c8s:calc(40ch + 1.375rem)}
.pf-p1{--pf-pc:1ch}.pf-p2{--pf-pc:2ch}.pf-p3{--pf-pc:3ch}.pf-p4{--pf-pc:4ch}.pf-p5{--pf-pc:5ch}.pf-p6{--pf-pc:6ch}.pf-p7{--pf-pc:7ch}.pf-p8{--pf-pc:8ch}.pf-p9{--pf-pc:9ch}.pf-p10{--pf-pc:10ch}.pf-p11{--pf-pc:11ch}.pf-p12{--pf-pc:12ch}
/* « API hébergée » : le mot reste dans la page (lu, écrit ailleurs), le tableau large en dessine une pastille courte */
.pf-slots>.pv-via[data-tip]{font-size:0;cursor:help}
.pf-slots>.pv-via[data-tip]::before{content:attr(data-s);display:inline-flex;align-items:center;min-height:1.25rem;padding:2px 0.375rem;border:1px solid var(--line-strong);background:var(--raise);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.625rem;letter-spacing:.03em;text-transform:uppercase;color:var(--text-2)}
.pf-c-g{width:9.125rem}.pf-c-c{width:4.5rem}
.pf-table thead th{height:2.5rem}
}
/* Tableau de 860 à 1 439 px : les faits de la rangée restent sous le nom, mais dans les mêmes emplacements de largeur fixe pour tout
   le tableau (chemin, précision, bouclier, région), chacun calé sur son bord gauche. Une case vide reste vide (28/10) */
@media screen and (min-width:53.75em) and (max-width:89.9375em){
/* Une ligne qui passe à la ligne : le groupe des emplacements (grille de largeur fixe : les verticales d'une rangée à l'autre), puis les
   pastilles et le pli « N chemins », sur la même ligne quand ils y tiennent, au début de la suivante sinon. Le pli n'a plus de colonne à
   lui : elle était de largeur nulle sur DeepInfra à 960 et 1 000 px et son texte sortait de la case (Imani, #1216). Au plus deux lignes
   sous le nom : les pastilles gardent leur forme courte et leur « +N » (libellés en bulle), comme dans le tableau large */
.pf-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0;white-space:nowrap}
.pf-meta>*{margin-inline:0 0.625rem}
.pf-meta>.pf-slots{display:grid;grid-template-columns:minmax(var(--pf-c4b),max-content) var(--pf-c5,calc(var(--pf-pc,4ch) + 2.125rem)) var(--pf-c6,1.625rem) var(--pf-c7,5.125rem);align-items:center;margin-inline:0}
.pf-slots>*{grid-row:1;margin-inline:0 0.625rem}
.pf-slots>.pv-via,.pf-slots>.info{grid-column:1}
.pf-slots>.pf-prec{grid-column:2;display:inline-flex;align-items:center;gap:0.25rem;white-space:nowrap}
.pf-slots>.cond{grid-column:3}
.pf-slots>.pf-reg{grid-column:4;white-space:nowrap}
.pf-meta>.pf-ways{min-width:0;max-width:100%;margin-inline:0 0.625rem;white-space:normal}
.pf-meta>.pf-ways summary{flex-wrap:wrap;row-gap:0}
.pf-r0{--pf-c7:0px}.pf-r1{--pf-c7:calc(1ch + 0.75rem)}.pf-r2{--pf-c7:calc(2ch + 0.75rem)}.pf-r3{--pf-c7:calc(3ch + 0.75rem)}.pf-r4{--pf-c7:calc(4ch + 0.75rem)}.pf-r5{--pf-c7:calc(5ch + 0.75rem)}.pf-r6{--pf-c7:calc(6ch + 0.75rem)}.pf-r7{--pf-c7:calc(7ch + 0.75rem)}.pf-r8{--pf-c7:calc(8ch + 0.75rem)}.pf-r9{--pf-c7:calc(9ch + 0.75rem)}.pf-r10{--pf-c7:calc(10ch + 0.75rem)}.pf-r11{--pf-c7:calc(11ch + 0.75rem)}.pf-r12{--pf-c7:calc(12ch + 0.75rem)}.pf-r13{--pf-c7:calc(13ch + 0.75rem)}.pf-r14{--pf-c7:calc(14ch + 0.75rem)}.pf-r15{--pf-c7:calc(15ch + 0.75rem)}.pf-r16{--pf-c7:calc(16ch + 0.75rem)}.pf-r17{--pf-c7:calc(17ch + 0.75rem)}.pf-r18{--pf-c7:calc(18ch + 0.75rem)}.pf-r19{--pf-c7:calc(19ch + 0.75rem)}.pf-r20{--pf-c7:calc(20ch + 0.75rem)}.pf-r21{--pf-c7:calc(21ch + 0.75rem)}.pf-r22{--pf-c7:calc(22ch + 0.75rem)}.pf-r23{--pf-c7:calc(23ch + 0.75rem)}.pf-r24{--pf-c7:calc(24ch + 0.75rem)}
.pf-p1{--pf-pc:1ch}.pf-p2{--pf-pc:2ch}.pf-p3{--pf-pc:3ch}.pf-p4{--pf-pc:4ch}.pf-p5{--pf-pc:5ch}.pf-p6{--pf-pc:6ch}.pf-p7{--pf-pc:7ch}.pf-p8{--pf-pc:8ch}.pf-p9{--pf-pc:9ch}.pf-p10{--pf-pc:10ch}.pf-p11{--pf-pc:11ch}.pf-p12{--pf-pc:12ch}
.pf-meta>.pf-chips{display:inline-flex;gap:0.375rem}
.pf-meta>.pf-chips:empty{display:none}
.pf-chips>.pf-more{display:inline-flex}.pf-more-n{cursor:help}
.pf-more-all{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pf-meta .chip{min-height:1.25rem;height:auto;padding:2px 0.375rem;font-size:0.625rem;letter-spacing:.03em;text-transform:uppercase}
.pf-table:not(:has(.pf-slots>.pf-prec)){--pf-c5:0px}.pf-table:not(:has(.pf-slots>.cond)){--pf-c6:0px}.pf-table:not(:has(.pf-slots>.pf-reg)){--pf-c7:0px}
.pf-v0{--pf-c4b:0px}.pf-v4{--pf-c4b:calc(4ch + 1.5rem)}.pf-v5{--pf-c4b:calc(5ch + 1.5rem)}.pf-v6{--pf-c4b:calc(6ch + 1.5rem)}.pf-v7{--pf-c4b:calc(7ch + 1.5rem)}.pf-v8{--pf-c4b:calc(8ch + 1.5rem)}.pf-v9{--pf-c4b:calc(9ch + 1.5rem)}.pf-v10{--pf-c4b:calc(10ch + 1.5rem)}.pf-v11{--pf-c4b:calc(11ch + 1.5rem)}.pf-v12{--pf-c4b:calc(12ch + 1.5rem)}.pf-v13{--pf-c4b:calc(13ch + 1.5rem)}.pf-v14{--pf-c4b:calc(14ch + 1.5rem)}.pf-v15{--pf-c4b:calc(15ch + 1.5rem)}.pf-v16{--pf-c4b:calc(16ch + 1.5rem)}.pf-v17{--pf-c4b:calc(17ch + 1.5rem)}.pf-v18{--pf-c4b:calc(18ch + 1.5rem)}.pf-v19{--pf-c4b:calc(19ch + 1.5rem)}.pf-v20{--pf-c4b:calc(20ch + 1.5rem)}.pf-v21{--pf-c4b:calc(21ch + 1.5rem)}.pf-v22{--pf-c4b:calc(22ch + 1.5rem)}.pf-v23{--pf-c4b:calc(23ch + 1.5rem)}.pf-v24{--pf-c4b:calc(24ch + 1.5rem)}
}
/* Sous 960 px, les emplacements ne tiennent plus côte à côte (227 px pour 290 sur DeepInfra à 860 px : la région sortait de la case) :
   chemin, précision, bouclier et région se suivent sans emplacement fixe et passent à la ligne au besoin */
@media screen and (min-width:53.75em) and (max-width:59.9375em){.pf-meta>.pf-slots{display:contents}}
/* Panneau étroit (tableau de 1 128 px de 1 200 à 1 320 px) : les colonnes de prix reprennent les largeurs du tableau
   plus étroit, celle du lien 84 px (« Offre ↗ », « Pricing ↗ » sur une ligne), la colonne du modèle garde la place gagnée (aucun nom
   coupé tant qu'il reste de la place) */
@media screen and (min-width:75em) and (max-width:89.9375em){.pf-c-p{width:6rem}.pf-c-i{width:5.25rem}.pf-c-l{width:5.25rem}}
/* Grand écran : le tableau dépasse la colonne de texte pour donner sa place au nom du modèle, comme le comparateur */
@media screen and (min-width:90em){.pf-panel{margin-inline:-4.5rem}}
.pf-table .gap{display:inline-flex;align-items:center;cursor:help;white-space:nowrap}
.pf-table tr.pf-alt{display:none}
.pf-table tr:has(.pf-ways[open])+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt{display:table-row}
@supports not selector(:has(a)){.pf-table tr.pf-alt{display:table-row}}
.pf-table tbody tr.pf-alt,.pf-table tbody tr.pf-alt:hover{background:var(--surface)}
.pf-table tr.pf-alt>th,.pf-table tr.pf-alt>td{height:2.5rem;padding-block:0.25rem}
.pf-table tr.pf-alt>th{padding-inline-start:3rem;border-top:0;background:linear-gradient(var(--line-soft),var(--line-soft)) no-repeat 3rem 0/calc(100% - 3rem) 1px}
.pf-table tr.pf-alt .pf-who>span:first-child{font-size:0.8125rem;font-weight:500;color:var(--text-2)}
.pf-table tr.pf-alt td.bl{font-size:0.8125rem;font-weight:400;color:var(--text-p)}
.pf-default{padding-top:0.75rem}
.pf-offers .pv-legend{border-top:0;padding-inline:0}
.pf-offers .pv-note{padding-inline:0;max-width:none}
/* Aucune phrase d'explication à l'écran : la phrase de tête, la légende des icônes (chaque icône a sa bulle) et la note sous le
   tableau restent lues et s'écrivent sur le papier. Un fait vrai de toutes les offres : un mot, sa phrase en bulle */
@media screen{.dir-page .pv-head>.lead,.pf-offers .pv-legend:not(.pv-legend-all),.pf-offers .pv-note{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* Un nom d'un seul mot très long (24 lettres) ne pousse pas la page de côté sur téléphone : il se coupe dans son titre */
.dir-title{min-width:0}.dir-title>span{min-width:0;overflow-wrap:anywhere}
/* Papier : la donnée de la bulle de l'écart (« le plus bas sur InferIndex : X ») s'écrit à sa suite, il n'y a pas de bulle sur une feuille */
@media print{.pf-table .gap[data-tip]>.sr{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;font-size:0.625rem}}
/* Hors du tableau (cartes, papier) : pas de « +N », chaque signal est écrit */
@media not screen,(max-width:53.6875em){.pf-more,.pf-more-all{display:contents}.pf-more-n{display:none}}
.pf-all-s{display:inline-block}.pf-all-s::first-letter{text-transform:uppercase}.pf-all-s[data-tip]{cursor:help}
@media print{.pf-all-s,.pf-all .info,.lab-ladder .ph-unit{display:none}.pf-all-l,.lab-ladder-s{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}}
.pf-offers .pv-more{padding-inline:0}
@media (max-width:68.6875em){
.pf-head{grid-template-columns:minmax(0,1fr) minmax(0,26.25rem)}
.pf-table{min-width:0}
.pf-c-p{width:6rem}.pf-c-i{width:5.25rem}.pf-c-g{width:8.75rem}.pf-c-c{width:3.5rem}.pf-c-l{width:2.75rem}
.pf-table th,.pf-table td{padding-inline:0.5rem}
.pf-table .verify>span[aria-hidden]{display:none}
.pf-meta .pv-via .info{display:none}
.pf-meta{flex-wrap:wrap;white-space:normal}
}
@media (max-width:53.6875em){
.pf-head{grid-template-columns:minmax(0,1fr)}
.pf-tools .pv-filter{width:100%}
.pf-panel{border:0;background:none}
.pf-panel>.pf-wrap{overflow:visible}
.pf-table,.pf-table tbody{display:block}
.pf-table thead{display:none}
.pf-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5rem 1rem;align-items:center;margin-top:0.625rem;padding:0.75rem;border:1px solid var(--line);background:var(--bg)}
.pf-table tbody tr:first-child{margin-top:0}
.pf-table tbody tr:hover{background:var(--bg)}
.pf-table tbody th,.pf-table tbody td,.pf-table tr.pf-alt>th,.pf-table tr.pf-alt>td{height:auto;padding:0;border:0}
.pf-table tr>:first-child,.pf-table tr>:last-child{padding-inline:0}
/* La place du prix (posé en haut à droite de la carte) est réservée à droite du nom. Écrite avec « tr>th:first-child » :
   la règle du dessus, qui remet à zéro les marges de la première cellule, l'emportait, et un nom long passait sous le prix */
.pf-table tbody th{grid-column:1/-1}
.pf-table tbody tr>th:first-child{padding-inline-end:6rem}
.pf-table tbody tr{position:relative}
.pf-table td.bl{position:absolute;inset-block-start:0.75rem;inset-inline-end:0.75rem}
.pf-table .mdl-name{align-items:flex-start}
.pf-meta{flex-wrap:wrap;white-space:normal}
.pf-table td.pf-g{grid-column:1/-1;order:1;padding-inline:0}
.pf-nc{display:block;min-width:0;min-height:0;cursor:auto}.pf-nc>[aria-hidden]{display:none}.pf-nc>.sr{position:static;display:block;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;font-family:var(--sans);font-size:0.71875rem;line-height:1.35}
.pf-table td[data-l],.pf-table td.r{order:2}
.pf-table td[data-l]{display:flex;justify-content:space-between;align-items:baseline;gap:0.75rem;font-size:0.78125rem}
.pf-table td[data-l]::before{content:attr(data-l);font-size:0.625rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-col)}
/* La règle commune des tableaux donne 170 px au moins à la dernière cellule (le lien de l'offre) : en blocs, dans une
   colonne plus étroite (écran sous 414 px), elle sortait de sa carte, et de la page sous 366 px */
.pf-table td.r{min-width:0;text-align:end}
.pf-table td.r:empty{display:none}
.pf-table .verify>span[aria-hidden]{display:inline}
.pf-table tr.pf-alt{display:none;margin-top:0;border-top:0}
.pf-table tbody tr.pf-alt,.pf-table tbody tr.pf-alt:hover{background:var(--surface)}
.pf-table tr.pf-alt>th{background:none;padding-inline-start:0}
.pf-table tr:has(.pf-ways[open])+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt,.pf-table tr:has(.pf-ways[open])+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt+.pf-alt{display:grid}
@supports not selector(:has(a)){.pf-table tr.pf-alt{display:grid}}
}
@media (max-width:37.5em){.pf-p{grid-template-columns:minmax(0,1fr);gap:0.25rem}}
@media print{.pf-table tr.pf-alt{display:table-row}.pf-ways summary::after{display:none}.pf-table tbody tr{break-inside:avoid}}
@media print{.pf-nc{display:inline;min-width:0;min-height:0;cursor:auto}.pf-nc>[aria-hidden]{display:none}.pf-nc>.sr{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;font-size:0.6875rem;line-height:1.35}}
/* À la largeur du papier les lignes sont des cartes (grille) : un chemin replié imprimé doit en être une aussi, sinon ses
   cellules se superposent (prix et écart au même endroit). Rien ne défile sur le papier */
@media print and (max-width:53.6875em){.pf-table tr.pf-alt{display:grid}}
@media print{.pf-panel>.pf-wrap,.providers-page .prov-list>.table-wrap{overflow:visible}}

.free-page .page-head{display:flex;align-items:baseline;gap:0.75rem;flex-wrap:wrap;margin-bottom:1.25rem}
.free-count{font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.free-row{display:grid;grid-template-columns:11.25rem minmax(0,1.5fr) minmax(9rem,1fr) 7.875rem 9.5rem 4rem 1.5rem;align-items:center;gap:0 0.875rem;min-height:3rem;padding:0.5rem 1rem;border-top:1px solid var(--line-soft)}
.free-head{min-height:0;padding-block:0.625rem;border-top:0;border-bottom:1px solid var(--line)}
.free-head .th{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col);white-space:nowrap}
.free-body .free-row:first-child{border-top:0}
.f-model{display:flex;align-items:center;gap:0.625rem;min-width:0}
.f-model .f-name{min-width:0;font-weight:600;color:var(--text)}
/* Nom du modèle coupé seulement dans le tableau large (1100 px et plus, à l'écran) : une rangée tient sur une ligne ; le nom entier est dans sa bulle,
   et écrit en entier dans les cartes et sur le papier (même exception que le comparateur et la fiche fournisseur, décision du 10/10) */
@media screen and (min-width:68.75em){.free-row .f-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Case Limite : bloc de largeur fixe (première partie, « · », seconde partie) collé à droite de la case, comme son en-tête ; le « · »
   tombe donc sur la même verticale à toutes les rangées, et une rangée à une seule limite garde la sienne dans la première partie */
.free-row .f-limc,.free-head .f-limh{text-align:end}.free-row .f-lim{font-variant-numeric:tabular-nums}
.free-row .f-lim:not(.none)>[aria-hidden]{display:inline-block;width:calc(var(--la) + 3ch + var(--lb));text-align:start}
.free-row .f-a,.free-row .f-b{display:inline-block;text-align:end}.free-row .f-a{width:var(--la)}.free-row .f-b{width:var(--lb)}}
.lw-a2{--la:1ch}.lw-b2{--lb:1ch}.lw-a3{--la:1.5ch}.lw-b3{--lb:1.5ch}.lw-a4{--la:2ch}.lw-b4{--lb:2ch}.lw-a5{--la:2.5ch}.lw-b5{--lb:2.5ch}.lw-a6{--la:3ch}.lw-b6{--lb:3ch}.lw-a7{--la:3.5ch}.lw-b7{--lb:3.5ch}.lw-a8{--la:4ch}.lw-b8{--lb:4ch}.lw-a9{--la:4.5ch}.lw-b9{--lb:4.5ch}.lw-a10{--la:5ch}.lw-b10{--lb:5ch}.lw-a11{--la:5.5ch}.lw-b11{--lb:5.5ch}.lw-a12{--la:6ch}.lw-b12{--lb:6ch}.lw-a13{--la:6.5ch}.lw-b13{--lb:6.5ch}.lw-a14{--la:7ch}.lw-b14{--lb:7ch}.lw-a15{--la:7.5ch}.lw-b15{--lb:7.5ch}.lw-a16{--la:8ch}.lw-b16{--lb:8ch}.lw-a17{--la:8.5ch}.lw-b17{--lb:8.5ch}.lw-a18{--la:9ch}.lw-b18{--lb:9ch}.lw-a19{--la:9.5ch}.lw-b19{--lb:9.5ch}.lw-a20{--la:10ch}.lw-b20{--lb:10ch}.lw-a21{--la:10.5ch}.lw-b21{--lb:10.5ch}.lw-a22{--la:11ch}.lw-b22{--lb:11ch}.lw-a23{--la:11.5ch}.lw-b23{--lb:11.5ch}.lw-a24{--la:12ch}.lw-b24{--lb:12ch}.lw-a25{--la:12.5ch}.lw-b25{--lb:12.5ch}.lw-a26{--la:13ch}.lw-b26{--lb:13ch}.lw-a27{--la:13.5ch}.lw-b27{--lb:13.5ch}.lw-a28{--la:14ch}.lw-b28{--lb:14ch}.lw-a29{--la:14.5ch}.lw-b29{--lb:14.5ch}.lw-a30{--la:15ch}.lw-b30{--lb:15ch}.lw-a31{--la:15.5ch}.lw-b31{--lb:15.5ch}.lw-a32{--la:16ch}.lw-b32{--lb:16ch}
.f-model a.f-name:hover{color:var(--accent-ink)}
.f-sel{min-width:0;white-space:nowrap}
.f-sel .prov-name{gap:0.5rem}
.f-gw{display:inline-flex;flex:none}
.f-mp{display:none}
.f-data{display:inline-flex;align-items:center;gap:0.4375rem;font-weight:600;white-space:nowrap}
.f-data .ico{flex:none}
.f-data.ok{color:var(--accent-ink)}.f-data.keep{color:var(--amber)}.f-data.unk{color:var(--text-2)}.f-data.warn{color:var(--warn)}
.f-until{white-space:nowrap;color:var(--text-2)}
.f-lim{font-family:var(--mono);font-size:0.78125rem;white-space:nowrap;color:var(--text-p)}
.f-lim.none{color:var(--text-3)}
.f-chk{font-family:var(--mono);font-size:0.75rem;white-space:nowrap;color:var(--text-2)}
.f-out{display:grid;place-items:center;width:1.5rem;height:1.5rem;color:var(--text-3)}
.f-out:hover{color:var(--accent-ink)}
@media print{.free-row{break-inside:avoid}}
@media screen and (max-width:68.6875em),print{.free-row{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;padding:0.75rem 1rem}
.free-row.free-head{display:none}
.free-row>.f-lead{order:1;flex:1 1 auto}.free-row>.f-chkc{order:2}.free-row>.f-go{order:2;flex:none}
.free-row>.f-model{order:4;flex:1 1 100%}
.free-row>.f-sel{order:5}.free-row>.f-until{order:6}.free-row>.f-limc{order:7}.free-row .f-sel .prov-name{gap:0.375rem}
.free-row>.f-sel,.free-row>.f-until,.free-row>.f-limc{font-size:0.78125rem}.free-row .f-lim{font-size:0.75rem}
.free-row>.f-until::before,.free-row>.f-limc::before{content:"·";margin-inline-end:0.375rem;color:var(--text-3)}
.free-row .f-chk{font-size:0.6875rem;color:var(--text-3)}
/* Sous 400 px (décision de Chloé du 17/10) : la date de vérification n'est plus écrite sur la carte ; elle est dans la bulle du lien et lue,
   et le pied de page dit déjà depuis quand toutes les conditions affichées sont vérifiées */
@media (max-width:24.9375em){.free-row>.f-chkc{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.free-row .f-l2{display:none}.free-row .f-mp{display:inline}}
/* Prix instable de l'offre retenue : la fourchette relevée, sur sa propre ligne sous le fournisseur, en texte secondaire */
/* Fourchette d'un prix instable : à l'écran elle est dans la bulle de la pastille ; écrite seulement sur le papier */
.cmp-unstable{display:none}
@media print{.cmp-unstable{display:block;flex-basis:100%;font-size:0.75rem;line-height:1.4;color:var(--text-2);white-space:normal}}
/* Très petits écrans : l'en-tête tient sur une rangée (marque, thème, langue) au-dessus de la navigation */

/* Pointeur tactile : liens du pied de page à 44 px de haut */
@media (pointer:coarse){.foot ul{gap:0 1.25rem}.foot ul a{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;min-width:2.75rem}}
/* Écran tactile : tous les boutons à 44 px de haut (cible minimale), y compris dans la barre de recherche (52 px) */
@media (pointer:coarse){.btn,.search .btn{height:2.75rem}}
/* Section « Analyses » (src/site/analyses-css.ts) */

/* Jetons des graphiques de Clio : reliés aux jetons du site, ils suivent le thème clair et sombre (contraste vérifié) */
:root{--clio-ink:var(--text);--clio-muted:var(--text-2);--clio-accent:var(--accent-ink);--clio-grid:var(--line);--clio-bg:var(--surface);--clio-warn:var(--warn)}
/* Mesure en px (scaleCss la passe en rem) : la même largeur pour le texte, l'en-tête de l'article et l'encadré des sources */
.an{--measure:39.375rem}
.an-crumb{margin:0 0 0.875rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-col)}
.an-crumb a{color:inherit}.an-crumb a:hover{color:var(--accent-ink)}
.an-head{max-width:var(--measure);margin:0 0 1.75rem}
.an-title{margin:0;font-size:clamp(1.875rem,4.2vw,2.875rem);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.an-dek{margin:0.875rem 0 0;font-size:1.1875rem;line-height:1.45;color:var(--text-p);text-wrap:pretty}
.an-meta{display:flex;flex-wrap:wrap;gap:0.375rem 0.875rem;margin:1rem 0 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;color:var(--text-2)}
.an-meta .an-upd{color:var(--accent-ink)}
.an-tag{display:inline-flex;align-items:center;height:1.375rem;padding:0 0.5rem;border:1px solid var(--line-strong);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.an-grid{display:grid;grid-template-columns:12.5rem minmax(0,1fr);gap:0 3.5rem;align-items:start}
.an-toc{position:sticky;top:5.25rem;font-size:0.8125rem}
.an-toc p{margin:0 0 0.625rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-col)}
.an-toc ol{margin:0;padding:0;list-style:none;counter-reset:s;border-inline-start:1px solid var(--line)}
.an-toc li{counter-increment:s}.an-toc a{display:flex;gap:0.625rem;padding:0.375rem 0 0.375rem 0.875rem;color:var(--text-2);line-height:1.35}
.an-toc a::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-stretch:var(--mono-stretch);color:var(--text-3)}
.an-toc a:hover{color:var(--text)}
/* Corps produit par Clio : seuls ses éléments et ses classes sont stylés */
.an-body{min-width:0;counter-reset:h}
.an-body>p,.an-body>h2,.an-body>ul,.an-body>ol{max-width:var(--measure)}
.an-body>p{margin:0 0 1.15em;font-size:1.09375rem;line-height:1.65;color:var(--text-p);text-wrap:pretty}
.an-body>p strong{color:var(--text);font-weight:600}
/* Une adresse écrite en clair dans le texte se coupe n'importe où plutôt que d'élargir la page ; un mot ordinaire n'est pas touché */
.an-body>p a,.an-body li a{overflow-wrap:anywhere}
/* Un identifiant de modèle (code) reste entier, même dans un titre */
.an-title code,.an-body h2 code,.an-body>p code,.clio-table code,.al-item h2 code,.al-feature h2 code,.an-dek code,.al-item p code,.al-feature p code{white-space:nowrap;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:.9em}
.an-body>h2{display:flex;gap:0.75rem;align-items:baseline;margin:2.2em 0 .7em;font-size:1.5625rem;line-height:1.2;letter-spacing:-.02em;counter-increment:h;scroll-margin-top:5.25rem}
.an-body>h2::before{content:counter(h,decimal-leading-zero);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.8125rem;font-weight:500;color:var(--accent-ink)}
.an-body>h2:first-child{margin-top:0}
.an-body>ul,.an-body>ol{margin:0 0 1.2em;padding-inline-start:1.3em;font-size:1.09375rem;line-height:1.6;color:var(--text-p)}
.an-body>ul li,.an-body>ol li{margin:.3em 0}
.clio-figure{margin:2em 0 2.2em;max-width:51.25rem}
/* Un tableau posé dans une figure défile dans son cadre, jamais la page */
.clio-figure:has(> .clio-table){overflow-x:auto}
/* Un tableau prend toute la largeur de la colonne du corps au bureau (pas la mesure du texte, ni le plafond des graphiques) :
   ses colonnes tiennent au premier regard. Sur téléphone, s'il reste plus large que l'écran, il défile dans son cadre */
.clio-figure:has(> .clio-table){max-width:none}
/* Encadré de fin : en-tête d'Inès, phrase de méthode écrite par le code de Clio, sources (une adresse par ligne, avec sa date) */
.clio-sources-box{max-width:var(--measure);margin:2.6em 0 0;padding:1.125rem 1.375rem;border:1px solid var(--line);background:var(--surface)}
.clio-sources-box>h2{margin:0 0 0.625rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.clio-sources-box>h2::before{content:none}
.clio-method{margin:0 0 0.75rem;font-size:0.90625rem;line-height:1.55;color:var(--text-p)}
.clio-sources-box ul.clio-sources{margin:0;padding:0;list-style:none;border:0;background:none;font-size:0.875rem;line-height:1.5}
.clio-sources li{margin:0;padding:0.5rem 0;border-top:1px solid var(--line-soft)}.clio-sources li:first-child{border-top:0}
.clio-sources a{min-width:0;overflow-wrap:anywhere}.clio-sources time{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;color:var(--text-2)}
.clio-muted{color:var(--text-3);font-family:var(--sans);font-size:0.78125rem}
.clio-figure>figcaption{margin:0.625rem 0 0;max-width:var(--measure);font-size:0.84375rem;line-height:1.5;color:var(--text-2)}
.clio-chart{display:block;width:100%;height:auto;border:1px solid var(--clio-grid);background:var(--clio-bg)}
/* Sans font-size : la taille posée par Clio sur le SVG (font-size) reste celle du graphique, mise à l'échelle avec lui */
.clio-chart text{font-family:var(--mono);fill:var(--clio-muted)}
.clio-chart .ink{fill:var(--clio-ink)}.clio-chart .acc{fill:var(--clio-accent)}.clio-chart .warn{fill:var(--clio-warn)}
.clio-chart .grid{stroke:var(--clio-grid);stroke-width:1}.clio-chart .axis{stroke:var(--clio-muted);stroke-width:1.5}
.clio-chart .name{font-family:var(--sans);font-size:0.8125rem;fill:var(--clio-ink)}
/* Classes posées par Clio ; elles l'emportent sur le <style> interne au SVG */
.clio-chart .clio-chart-label{fill:var(--clio-ink)}.clio-chart .clio-chart-value{fill:var(--clio-ink);font-weight:600}.clio-chart .clio-chart-muted{fill:var(--clio-muted)}
.clio-chart .clio-bar-before{fill:var(--clio-muted);opacity:.55}.clio-chart .clio-bar-after{fill:var(--clio-accent)}
/* Deux versions par figure : large (640) au bureau, étroite (343) sur téléphone ; une figure sans version étroite défile dans son cadre */
.clio-chart.clio-narrow{display:none}
/* Colonnes de prix (sous Avant / Après) au plus juste : la place qui reste va au texte, et leurs en-têtes passent tous à la
   ligne de la même façon (critique du 24/10 : « Output, $/M » de la dernière colonne tenait seul sur une ligne) */
.clio-table thead tr+tr th{border-top:1px solid var(--line-soft);width:1%}.clio-table thead th[colspan]{text-align:center;border-inline-start:1px solid var(--line-soft)}
.clio-figure>img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.clio-tbl{overflow-x:auto;margin:2em 0 2.2em}
.clio-table{width:100%;border-collapse:collapse;border:1px solid var(--line);font-size:0.875rem}
.clio-table caption{caption-side:top;margin:0 0 0.625rem;text-align:start;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.clio-table th,.clio-table td{padding:0.5625rem 0.75rem;border-top:1px solid var(--line-soft);text-align:start;white-space:nowrap;vertical-align:baseline}
.clio-table thead th{white-space:normal;vertical-align:bottom;line-height:1.35;border-top:0;background:var(--surface);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-col)}
.clio-table td:has(> data),.clio-table td.num{text-align:end;font-family:var(--mono);font-stretch:var(--mono-stretch);font-variant-numeric:tabular-nums}
.clio-table tbody th{font-weight:600;color:var(--text)}
@media (max-width:62.5em){.an-grid{grid-template-columns:minmax(0,1fr)}.an-toc{display:none}}
@media (max-width:40em){.an-dek{font-size:1.0625rem}.an-body>p,.an-body>ul,.an-body>ol{font-size:1.03125rem}.an-body>h2{font-size:1.3125rem}
/* Un graphique large ne se rétrécit pas sous 560 px : il défile dans son cadre, ses textes restent lisibles */
.clio-figure:has(> .clio-narrow)>.clio-chart:not(.clio-narrow){display:none}.clio-figure:has(> .clio-narrow)>.clio-narrow{display:block}
.clio-figure:not(:has(> .clio-narrow)):has(> .clio-chart){overflow-x:auto}.clio-figure:not(:has(> .clio-narrow))>.clio-chart{min-width:35rem}}
@media print{.an-toc{display:none!important}.an-grid{display:block}.an-body>p{font-size:11pt}
.clio-figure,.clio-tbl,.clio-sources-box{break-inside:avoid}.an-body>h2{break-after:avoid}.clio-tbl{overflow:visible}
/* Papier (Lettre et A4) : le tableau tient dans la largeur de la feuille, sans barre de défilement ; typographie resserrée,
   le texte d'une case qui n'est pas un nombre peut passer à la ligne */
.clio-figure:has(> .clio-table){overflow:visible}
.clio-table{font-size:8.5pt}.clio-table th,.clio-table td{padding:0.25rem 0.375rem}
.clio-table thead th{font-size:7pt;letter-spacing:.03em}.clio-table td:not(.num):not(:has(> time)){white-space:normal}}
/* Liste des analyses : rangées de même forme (date, puis texte), sans vignette */
.al-head{display:flex;align-items:baseline;gap:0.875rem;margin:0 0 1.375rem}
/* 27 px : au moins 24 px une fois la feuille mise à l'échelle du bureau (cible minimale, WCAG 2.2) */
.al-rss{display:inline-flex;align-items:center;justify-content:center;width:1.6875rem;height:1.6875rem;margin-inline-start:auto;color:var(--text-2)}
.al-rss:hover{color:var(--accent-ink)}.al-rss .ico{width:1.125rem;height:1.125rem}
@media (pointer:coarse){.al-rss{width:2.75rem;height:2.75rem}}
.al-filters{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0 0 1.125rem}
.al-filters a{display:inline-flex;align-items:center;height:1.875rem;padding:0 0.75rem;border:1px solid var(--line);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.71875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.al-filters a[aria-current]{border-color:var(--accent-ink);color:var(--accent-ink)}
@media (pointer:coarse){.al-filters a{height:2.75rem}}
.al-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.al-item{display:grid;grid-template-columns:6.875rem minmax(0,1fr);gap:0 1.75rem;padding:1.375rem 0;border-bottom:1px solid var(--line)}
.al-item>time{font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;color:var(--text-2);padding-top:0.3125rem}
.al-item h2{margin:0.375rem 0 0;font-size:1.375rem;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.al-item h2 a{color:var(--text)}.al-item h2 a:hover{color:var(--accent-ink)}
.al-item p{margin:0.5rem 0 0;max-width:var(--measure);font-size:0.96875rem;line-height:1.5;color:var(--text-p)}
.al-feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0 2.25rem;margin:0 0 1.75rem;padding:1.5rem;border:1px solid var(--line);background:var(--surface)}
.al-feature.al-text{grid-template-columns:minmax(0,1fr)}
.al-feature h2{margin:0.625rem 0 0;font-size:1.875rem;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.al-feature h2 a{color:inherit}.al-feature h2 a:hover{color:var(--accent-ink)}
.al-feature p{margin:0.75rem 0 0;max-width:var(--measure);font-size:1.03125rem;line-height:1.5;color:var(--text-p)}.al-feature p.an-meta{font-size:0.75rem;color:var(--text-2)}
.al-img{display:block;width:100%;height:auto;border:1px solid var(--line)}
@media (max-width:62.5em){.al-item{grid-template-columns:5.625rem minmax(0,1fr)}.al-feature{grid-template-columns:minmax(0,1fr);gap:1.125rem}}
@media (max-width:40em){.al-item{grid-template-columns:minmax(0,1fr)}.al-item>time{padding:0}.al-item h2{font-size:1.1875rem}.al-feature{padding:1.125rem}.al-feature h2{font-size:1.4375rem}}
@media print{.al-filters,.al-rss{display:none!important}.al-item,.al-feature{break-inside:avoid}}

/* Blocs non textuels de Clio (demande de Didier, 18/10) : au moins 5 par article, de 3 types au moins, jamais plus de 180 mots de prose
   d'affilée. Fonds pleins (rien de transparent sur le décor), couleurs par les --clio-*, clair et sombre par les jetons du site.
   Chaque bloc tient seul à 320 px et ne se coupe pas à l'impression. */
.clio-stat,.clio-quote,.clio-compare,.clio-steps,.clio-callout,.clio-timeline{max-width:var(--measure);margin:2em 0;break-inside:avoid}
/* Les listes du corps ont un retrait : pas ces blocs, alignés sur le texte */
.an-body>ol.clio-steps,.an-body>ol.clio-timeline{padding:0;list-style:none}

/* 1. Chiffre clé en grand : le chiffre, ce qu'il mesure, et son contexte en une ligne */
.clio-stat{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0.375rem 1.375rem;padding:1.25rem 1.375rem;border:1px solid var(--clio-grid);border-inline-start:0.25rem solid var(--clio-accent);background:var(--clio-bg)}
.clio-stat-v{grid-row:span 2;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:clamp(2.5rem,7vw,3.75rem);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--clio-ink);white-space:nowrap}
.clio-stat-k{align-self:end;font-size:1rem;font-weight:600;line-height:1.3;color:var(--clio-ink)}
.clio-stat-c{align-self:start;margin:0;font-size:0.875rem;line-height:1.45;color:var(--clio-muted)}

/* 2. Citation officielle : le texte mot pour mot, la source et sa date de lecture (lien vers la page) */
.clio-quote{position:relative;margin-inline:0;padding:1.25rem 1.375rem 1.125rem 3.25rem;border:1px solid var(--clio-grid);background:var(--clio-bg)}
.clio-quote::before{content:"“";position:absolute;top:0.375rem;left:1rem;font-family:var(--sans);font-size:3.25rem;font-weight:600;line-height:1;color:var(--clio-accent)}
.clio-quote blockquote{margin:0;font-size:1.125rem;line-height:1.5;letter-spacing:-.005em;color:var(--clio-ink)}
.clio-quote figcaption{display:flex;flex-wrap:wrap;gap:2px 0.75rem;margin:0.75rem 0 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;color:var(--clio-muted)}
.clio-quote figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* 3. Frise de dates (HTML, sans SVG) : une étape par date, l'état écrit par un mot (passé, aujourd'hui, à venir) */
.clio-timeline{padding:0;list-style:none;border:1px solid var(--clio-grid);background:var(--clio-bg);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.clio-timeline li{position:relative;padding:2.125rem 0.875rem 1rem;border-inline-start:1px solid var(--clio-grid)}
.clio-timeline li:first-child{border-inline-start:0}
.clio-timeline li::before{content:"";position:absolute;top:1rem;left:0;right:0;height:2px;background:var(--clio-grid)}
.clio-timeline li::after{content:"";position:absolute;top:0.6875rem;left:0.875rem;width:0.75rem;height:0.75rem;border-radius:50%;background:var(--clio-bg);box-shadow:inset 0 0 0 2px var(--clio-muted)}
.clio-timeline li[data-state=past]::after{background:var(--clio-muted)}
.clio-timeline li[data-state=now]::after{background:var(--clio-ink);box-shadow:none}
.clio-timeline li[data-state=next]::after{background:var(--clio-warn);box-shadow:none}
.clio-timeline time{display:block;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;color:var(--clio-muted)}
.clio-timeline b{display:block;margin-top:0.25rem;font-size:0.90625rem;font-weight:600;line-height:1.3;color:var(--clio-ink)}
.clio-timeline li[data-state=next] time{color:var(--clio-warn)}

/* 4. Cartes avant/après : deux cartes de même forme, la flèche entre elles ; chiffres en chasse fixe, unité dans l'étiquette */
.clio-compare{display:grid;grid-template-columns:minmax(0,1fr) 2.25rem minmax(0,1fr);align-items:stretch}
.clio-compare>div{padding:1rem 1.125rem;border:1px solid var(--clio-grid);background:var(--clio-bg)}
.clio-compare>div:last-child{border-color:var(--clio-accent)}
.clio-compare-arrow{display:grid;place-items:center;font-family:var(--mono);font-size:1.25rem;color:var(--clio-muted)}
.clio-compare .k{margin:0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--clio-muted)}
.clio-compare .n{margin:0.375rem 0 0;font-size:1rem;font-weight:600;color:var(--clio-ink)}
.clio-compare dl{display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:0.25rem 0.75rem;margin:0.75rem 0 0;font-size:0.84375rem}
.clio-compare dt{color:var(--clio-muted)}.clio-compare dd{margin:0;text-align:end;font-family:var(--mono);font-stretch:var(--mono-stretch);color:var(--clio-ink)}
.clio-compare .delta{margin:0.625rem 0 0;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.8125rem;font-weight:600;color:var(--clio-accent)}

/* 5. Étapes numérotées : le numéro en grand dans sa colonne, le verbe d'action en tête */
.clio-steps{padding:0;list-style:none;counter-reset:st;border-top:1px solid var(--clio-grid)}
.clio-steps li{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:0 0.875rem;padding:0.875rem 0;border-bottom:1px solid var(--clio-grid);counter-increment:st}
.clio-steps li::before{content:counter(st,decimal-leading-zero);font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:1.375rem;font-weight:600;line-height:1.2;color:var(--clio-accent)}
.clio-steps b{display:block;font-size:1rem;font-weight:600;color:var(--clio-ink)}
.clio-steps p{margin:0.25rem 0 0;font-size:0.9375rem;line-height:1.5;color:var(--clio-muted)}

/* 6. Encadré « à retenir » / « pour qui » : son titre est un mot fixe (texte d'interface, validé par Inès) */
.clio-callout{padding:1.125rem 1.375rem;border:1px solid var(--clio-grid);background:var(--clio-bg)}
.clio-callout>p:first-child{margin:0 0 0.5rem;font-family:var(--mono);font-stretch:var(--mono-stretch);font-size:0.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--clio-accent)}
.clio-callout ul{margin:0;padding-inline-start:1.1em;font-size:0.96875rem;line-height:1.55;color:var(--clio-ink)}
.clio-callout li{margin:.25em 0}
.clio-callout[data-kind=who]>p:first-child{color:var(--clio-ink)}

/* 7. Séparateur : l'escalier des prix (le graphique de profondeur du site), offres triées du moins cher au plus cher, le point
   vert à la moins chère. Dessiné par un masque, coloré par les variables : opaque, juste dans les deux thèmes, rien d'une image de mode */
.clio-divider{position:relative;height:1.75rem;margin:2.6em 0;max-width:var(--measure);border:0;background:none;overflow:visible}
.clio-divider::before{content:"";position:absolute;inset:0 0 0 1.125rem;background:var(--clio-muted);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 28' preserveAspectRatio='none'%3E%3Cpath d='M0 26H60V22H130V20H200V15H270V13H340V9H420V6H500V3H600' fill='none' stroke='black' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 28' preserveAspectRatio='none'%3E%3Cpath d='M0 26H60V22H130V20H200V15H270V13H340V9H420V6H500V3H600' fill='none' stroke='black' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.clio-divider::after{content:"";position:absolute;left:0.25rem;bottom:-3px;width:0.625rem;height:0.625rem;border-radius:50%;background:var(--clio-accent)}

@media (max-width:40em){
.clio-stat{grid-template-columns:minmax(0,1fr);padding:1rem 1.125rem}.clio-stat-v{grid-row:auto}
.clio-quote{padding:1rem 1rem 0.875rem 2.5rem}.clio-quote::before{left:0.75rem;font-size:2.5rem}.clio-quote blockquote{font-size:1.03125rem}
/* Frise verticale sur téléphone : une date par ligne, la ligne de temps à gauche */
.clio-timeline{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr)}
.clio-timeline li{padding:0.75rem 0.875rem 0.75rem 2.5rem;border-inline-start:0;border-top:1px solid var(--clio-grid)}.clio-timeline li:first-child{border-top:0}
.clio-timeline li::before{top:0;bottom:0;left:1.1875rem;right:auto;width:2px;height:auto}
.clio-timeline li::after{top:1rem;left:0.875rem}
/* Cartes empilées, la flèche tournée vers le bas */
.clio-compare{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1.75rem auto}
.clio-compare-arrow{transform:rotate(90deg)}
.clio-steps li{grid-template-columns:2.25rem minmax(0,1fr)}.clio-steps li::before{font-size:1.125rem}
}
@media print{.clio-stat,.clio-quote,.clio-compare,.clio-steps li,.clio-callout,.clio-timeline{break-inside:avoid}.clio-divider{break-after:avoid}}


/* Papier (mesuré le 19/10 sur les copies de production imprimées) : aucune feuille ne porte un seul reste de la page.
   - liens de fin de page (documentation, page MCP, « afficher toutes les offres ») : des gestes d'écran, rien à lire sur le
     papier ; la page MCP finissait sur une feuille portant ces deux liens seuls, la fiche fournisseur imprimait le bouton
   - « Utiliser ces données » de la page modèle reste d'un bloc : sa dernière ligne partait seule sur une 14e feuille
   - promotions de l'accueil : sous 1000 px de large (le papier) chaque promotion gardait 480 px et laissait la moitié droite
     vide ; elles prennent toute la largeur, input et output côte à côte, et le titre de l'encadré ne reste plus seul en bas
     d'une feuille ; aucun titre d'encadré ne reste seul en bas d'une feuille (« Nouveaux modèles » le faisait)
   - la section de la page n'a ni hauteur minimale ni marge basse : en A4, la fiche fournisseur finissait par une feuille vide
     (sa marge basse passait seule sur la feuille suivante quand le contenu finissait près du bas)
   Écrit en fin de feuille : ces règles l'emportent sur celles de l'écran à sélecteur égal */
@media print{
.doc-links,.offers-more{display:none!important}
.panel.use{break-inside:avoid}
.promo-list>li{flex:1 1 100%;border-inline-end:0;border-top:1px solid var(--line)}.promo-list>li:first-child{border-top:0}
.panel-head{break-after:avoid}
.promo-prices{display:grid;grid-template-columns:repeat(2,auto);justify-content:end;column-gap:1.75rem}
.wrap.page{min-height:0;margin-bottom:0;padding-bottom:0}
}

@media (min-width:68.75em) and (hover:hover) and (pointer:fine){html{font-size:90%}}