@font-face{font-family:"Manrope";src:local("Manrope"),url("/polices/manrope-latin.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:local("Plus Jakarta Sans"),url("/polices/plus-jakarta-sans-latin.woff2") format("woff2");font-weight:600 800;font-display:swap}
:root{
--ink:#001033;--ink2:#4A5468;--mute:#6B7280;
--blue:#004FFF;--blued:#002F99;--pale:#EBF1FF;--paleb:#C8D9FF;
--line:#E4E6EB;--line2:#EFF0F0;--field:#8B94A6;
--ok:#04B470;--okt:#046B48;--okbg:#F0FDF7;--okb:#B4EAD2;
--warn:#B45309;--warnbg:#FFF7ED;--warnb:#F0D9B8;
--bad:#C01F06;--baddot:#FA2B0F;--badbg:#FEF2F2;--badb:#F4CCC5;
--bg:#F5F6F8;--card:#FFF;
--sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
--head:"Plus Jakarta Sans","Manrope",system-ui,-apple-system,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--r:12px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--sans);-webkit-font-smoothing:antialiased}
body.pub{background:#FDFDFC}
h1,h2,h3{font-family:var(--head);margin:0 0 .4em;line-height:1.18;letter-spacing:-.018em}
h1{font-size:1.625rem;font-weight:800}
h2{font-size:1.1875rem;font-weight:700;margin-top:0}
h3{font-size:1rem;font-weight:700}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
a{color:var(--blue);text-underline-offset:2px}
a:hover{color:var(--blued)}
/* Ligne anglaise sous une phrase française. Ne subsiste que sur les pages
   PUBLIQUES héritées ; l'espace client, lui, sert UNE langue par écran depuis
   le 21/08/2026 (la doublure grise était le défaut signalé). */
.en{display:block;font:400 .8125rem/1.4 var(--sans);color:var(--mute);letter-spacing:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.wrap{max-width:58rem;margin:0 auto;padding:22px 16px 80px}
.wrap.n{max-width:31rem}
/* Gabarit LARGE (30/08/2026) — le seul écran qui s'en sert est « Test API »,
   dont les deux colonnes (routes | résultat) étouffent dans 58 rem : la colonne
   de gauche tombe sous 26 rem et les chemins d'essai y passent à la ligne.
   La barre du haut suit la MÊME largeur : une barre restée à 58 rem au-dessus
   d'un contenu de 82 rem se lit comme un défaut d'alignement. */
.wrap.w{max-width:82rem}
body:has(main.wrap.w) .tin,body:has(main.wrap.w) .nav{max-width:82rem}
main.wrap.w{padding-top:14px;padding-bottom:16px}
.top{background:#fff;border-bottom:1px solid var(--line)}
.top.pub{background:#FDFDFC}
.tin{max-width:58rem;margin:0 auto;padding:11px 16px;display:flex;align-items:center;gap:12px}
.brand{display:inline-flex;align-items:baseline;gap:.17em;font:800 1.0625rem var(--head);color:var(--ink);text-decoration:none;letter-spacing:-.035em}
.brand::after{content:"";width:.28em;height:.28em;background:var(--blue);flex:none}
.brand:hover{color:var(--ink)}
.brand.gd{font-size:1.25rem}
.bal{margin-left:auto;font:800 1rem/1 var(--head);font-variant-numeric:tabular-nums;background:var(--pale);color:var(--ink);padding:9px 12px;border-radius:8px;white-space:nowrap}
/* ⚠️ overflow-x:auto force overflow-y:auto (règle CSS) : la barre devient un
   conteneur de défilement et ROGNE le contour de focus de ses propres liens.
   Le rembourrage vertical et un décalage négatif lui rendent sa visibilité. */
.nav{display:flex;gap:2px;overflow-x:auto;min-width:0;max-width:58rem;margin:0 auto;padding:3px 8px;border-top:1px solid var(--line2)}
.nav a:focus-visible{outline-offset:-3px}
.nav a{flex:none;display:flex;align-items:center;min-height:46px;padding:0 12px;font:700 .875rem var(--head);color:var(--ink2);text-decoration:none;border-bottom:3px solid transparent}
.nav a[aria-current=page]{color:var(--blue);border-bottom-color:var(--blue)}
.nav.pub{border:0;padding:0;margin:0 0 0 auto}
.nav.pub a{min-height:40px}
.nav a.lg{color:var(--ink)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card+.card,.stack>*+*{margin-top:14px}
/* ... mais JAMAIS dans une grille : l'espacement y vient de gap, et cette
   marge y décalait les cartes 2 a n de 14 px vers le bas en les raccourcissant
   d'autant (elements de grille etires). C'est le defaut « les cartes n'ont pas
   la meme hauteur » signale le 21/08 sur les quatre prix de la landing. */
.grid>.card+.card,.par>.card+.card,.par>div+div{margin-top:0}
/* ALIGNEMENT DES CARTES D'UNE GRILLE (signalé le 25/08 sur le tableau de bord).
   Deux défauts mesurés au navigateur, tous deux dus au fait que chaque carte se
   composait indépendamment de ses voisines :
   1. les CHIFFRES des tuiles ne tombaient pas à la même hauteur — « Appels
      gratuits ce mois » passe sur deux lignes, les trois autres non, et
      poussait son nombre 15 px plus bas (sous-ligne : 16 px) ;
   2. les BOUTONS de « Recharger le solde » et « Profil de facturation »
      étaient décalés de 22 px, la carte de gauche ayant une ligne de texte de
      plus.
   Remèdes : l'intitulé d'une tuile réserve DEUX lignes (elles n'en prennent
   jamais trois : quatre libellés courts, mesurés dans les deux langues), et la
   carte devient une colonne flex dont le dernier paragraphe absorbe le vide —
   ce qui pose le bouton en bas SANS toucher au HTML (sa marge est en style
   en ligne, elle gagnerait contre la feuille). */
.grid>.card{display:flex;flex-direction:column}
.grid>.card>p:last-of-type{margin-bottom:auto}
.g4 .lab{min-height:2.6em}
.card.hi{border:2px solid var(--blue)}
.grid{display:grid;gap:14px}
@media(min-width:620px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr}}
@media(min-width:900px){.g4{grid-template-columns:repeat(4,1fr)}}
.lab{display:block;font:700 .75rem/1.3 var(--head);letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.num{font:800 2rem/1.05 var(--head);font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--ink);margin:8px 0 0}
.num.s{font-size:1.375rem}
.num .u{font-size:1rem;font-weight:700;color:var(--mute)}
.sub{font-size:.8125rem;color:var(--mute);margin:6px 0 0}
.btn{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 8px;min-height:48px;padding:9px 18px;border-radius:10px;font:700 1rem/1.2 var(--head);border:1px solid transparent;background:none;cursor:pointer;text-decoration:none;text-align:center}
/* La ligne anglaise prend la largeur entiere : dans un conteneur flex, un
   display:block ne suffit pas — l'element reste un frere pose a cote. */
.btn .en{flex:0 0 100%}
.bp{background:var(--blue);color:#fff}.bp:hover{background:var(--blued);color:#fff}
.bp .en{color:var(--paleb)}
.bs{background:#fff;color:var(--ink);border-color:var(--field)}.bs:hover{border-color:var(--ink)}
.bs .en,.bd .en,.off .en{color:var(--mute)}
.bd{background:#fff;color:var(--bad);border-color:var(--badb)}.bd:hover{background:var(--badbg);color:var(--bad)}
.off,.btn[disabled]{background:#ECEEF2;color:#6E7789;border-color:#DFE2E9;cursor:not-allowed}
.full{display:flex;width:100%}
.acts{display:flex;flex-wrap:wrap;gap:10px}
/* Écrans d'ENTRÉE (colonne de 31 rem) : la rangée d'actions s'aligne sur la
   carte, comme tous les autres boutons de ces écrans — ils sont en .full, donc
   pleine largeur. Deux boutons collés à leur texte laissaient 78 px de vide à
   droite de la carte alors que le bandeau au-dessus, lui, va au bord : c'est le
   « les boutons ne sont pas lignés » signalé le 25/08 sur /compte.
   La base de 12 rem (et non 0) fait passer le second bouton à la ligne — chacun
   en pleine largeur — dès que la colonne est trop étroite pour deux, au lieu de
   les écraser côte à côte sur un téléphone. Les écrans de l'espace client, eux,
   gardent des boutons collés à leur texte : leur colonne fait 58 rem. */
main.wrap.n .acts>.btn{flex:1 1 12rem}
.field{margin:0 0 18px}
.field>label{display:block;font:700 .9375rem var(--head);margin:0 0 6px}
input[type=text],input[type=email],select{width:100%;min-height:48px;padding:11px 12px;border:1px solid var(--field);border-radius:10px;font:400 1rem var(--sans);color:var(--ink);background:#fff}
input:focus,select:focus{border-color:var(--blue)}
input[aria-invalid=true]{border-color:var(--bad);border-width:2px}
.hint{font-size:.8125rem;color:var(--mute);margin:6px 0 0}
/* SAISIE ASSISTÉE (25/08/2026). La première version s'appuyait sur la
   datalist NATIVE : les requêtes partaient bien (mesuré dans le journal côté
   serveur) et les options arrivaient — mais Chrome ne RÉOUVRE pas sa liste
   quand on la remplit APRÈS la frappe. Résultat vu par CDU : « la saisie
   assistée n'est pas fonctionnelle », alors que le serveur répondait juste.
   D'où une liste à nous : elle s'affiche quand elle a des résultats, et une
   ligne d'état DIT ce qui se passe (trouvé / rien / indisponible) — le silence
   était indiscernable d'une panne. */
.combo{position:relative}
.combo>ul{position:absolute;z-index:20;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,16,51,.13);max-height:16rem;overflow-y:auto}
.combo>ul[hidden]{display:none}
.combo li+li{margin-top:2px}
.combo button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:9px 10px;font:400 .9375rem var(--sans);color:var(--ink);cursor:pointer}
.combo button:hover,.combo button:focus-visible{background:var(--pale)}
.combo button b{display:block;font:700 .9375rem var(--head)}
.combo button span{font-size:.8125rem;color:var(--mute)}
.etat{font-size:.8125rem;color:var(--mute);margin:6px 0 0;min-height:1.2em}
/* Bouton qui a l'air d'un lien : la PROPOSITION d'un numéro de TVA calculé.
   Un vrai <button> (et non un <a href="#">) parce que le geste n'est pas une
   navigation — et parce qu'un lien mort dans un formulaire se clique par erreur. */
.lien{background:none;border:0;padding:0;font:inherit;color:var(--blue);text-decoration:underline;cursor:pointer}
/* TEST API : une ligne = un chemin modifiable + un bouton qui dit son prix, et
   la réponse s'écrit dans LE panneau de droite. Le chemin prend toute la place
   restante (min-width:0, sans quoi un enfant flex refuse de descendre sous son
   contenu et pousse le bouton hors de la carte). */
.essai+.essai{margin-top:16px;border-top:1px solid var(--line2);padding-top:14px}
/* VRAI SPLIT (demande CDU du 30/08 : « une vraie séparation de page, à gauche
   le texte et à droite le résultat, et c'est responsive »).
   Deux volets qui défilent CHACUN chez eux, hauteur d'écran : lire la réponse
   d'une route du bas ne fait plus remonter la liste, et la liste ne pousse plus
   la réponse hors de vue. Trois décisions :
   1. hauteur BORNÉE (100dvh moins la barre d'outils) + overflow:auto sur chaque
      volet - dvh et non vh : sur téléphone, vh compte la barre d'URL rétractée
      et coupe le bas du volet en permanence ;
   2. minmax(0,…) sur les deux pistes - une piste 1fr refuse de descendre sous
      la largeur de son contenu, et un chemin d'API long élargirait le volet
      gauche jusqu'à pousser le droit hors de l'écran ;
   3. sous 1 080 px, PAS de deux volets écrasés : deux ONGLETS, un seul volet à
      l'écran, et le script bascule sur « Résultat » au lancement. Sans script,
      les deux volets s'empilent et tout reste lisible - la bascule n'est
      qu'une commodité, jamais la condition pour voir la réponse.
   ⚠️ Le seuil vit ICI et nulle part ailleurs : le script ne connaît aucune
   largeur, il pose des classes d'état que ces règles interprètent. */
.cnsl{display:grid;gap:16px;align-items:start;margin-top:14px}
.cnsl-l,.cnsl-r{min-width:0}
.cnsl-tabs{display:flex;gap:6px;margin:16px 0 0;padding:4px;background:#EDEFF4;border-radius:12px}
.cnsl-tabs[hidden]{display:none}
.cnsl-tab{flex:1 1 0;min-height:44px;border:0;border-radius:9px;background:none;font:700 .9375rem var(--head);color:var(--ink2);cursor:pointer}
.cnsl-tab[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,16,51,.14)}
@media(min-width:1080px){
.cnsl{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.cnsl-tabs{display:none}
/* Chaque volet tient dans l'écran et se COLLE en haut : c'est position:sticky
   qui absorbe la hauteur de ce qui précède (titre, barre d'outils), sans
   qu'aucune règle n'ait à la deviner — un calc(100dvh - Nrem) à la main est faux
   dès que la barre d'outils passe sur deux lignes (mesuré : 50 px de volet
   sous l'écran à 1 440 px, avant ce correctif).
   La LISTE défile elle-même ; le volet de droite, lui, ne défile PAS : c'est le
   corps de la réponse qui le fait, sous un titre et une ligne d'état qui
   restent en vue (deux barres imbriquées, et on ne sait plus laquelle on tire).
   ⚠️ La hauteur est déclarée DEUX fois, vh puis dvh : un navigateur qui ne
   connaît pas dvh (avant Chrome 108 / Safari 15.4) IGNORE la déclaration
   entière — donc plus aucune borne, et le volet reprend toute la hauteur de
   ses 80 routes. C'est exactement ce qui s'est vu ici au premier essai. */
.cnsl-l,.cnsl-r{position:sticky;top:14px;min-height:24rem}
.cnsl-l{max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);overflow-y:auto;overscroll-behavior:contain}
/* Le volet de droite prend TOUTE la hauteur (height, pas max-height) : un
   panneau qui s'arrête à la taille de son contenu ne ressemble pas à un volet,
   et la réponse suivante le ferait sauter d'une hauteur à l'autre. */
.cnsl-r{height:calc(100vh - 28px);height:calc(100dvh - 28px);overflow:hidden}
.cnsl-r>.card{height:100%}
}
@media(max-width:1079px){
/* Le script a pris la main : un seul volet à l'écran, et il occupe la hauteur
   utile - un demi-écran de JSON derrière un demi-écran de liste ne se lit pas. */
.cnsl.js .cnsl-l,.cnsl.js .cnsl-r{display:none;position:sticky;top:8px;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);min-height:18rem;overscroll-behavior:contain}
.cnsl.js.v-routes .cnsl-l{display:block;overflow-y:auto}
.cnsl.js.v-res .cnsl-r{display:block;overflow:hidden}
/* L'onglet dit déjà « Résultat » : le titre de la carte le répétait cinq
   lignes plus bas, sur l'écran où la place manque le plus. */
.cnsl.js .cnsl-r>.card>h2{display:none}
}
/* Le volet de droite est une carte pleine hauteur dont le corps de réponse
   absorbe le reste : sans min-height, un enfant flex en défilement refuse de
   descendre sous la hauteur de son contenu et déborde la carte. */
.cnsl-r>.card{display:flex;flex-direction:column;max-height:100%}
.cnsl-r #res-corps{flex:1;min-height:6rem;overflow:auto;white-space:pre-wrap;word-break:break-word}
/* Ligne d'état du panneau : statut, durée, débit réel. Elle porte des chiffres
   qui changent à chaque appel — tabular-nums évite qu'ils dansent. */
.resm{font:400 .8125rem/1.5 var(--mono);color:var(--ink2);font-variant-numeric:tabular-nums;margin:0 0 10px;overflow-wrap:anywhere}
.resm.ko{color:var(--bad)}
.resr{font:400 .8125rem var(--mono);color:var(--mute);margin:0 0 10px;overflow-wrap:anywhere}
/* Barre d'outils de l'écran : la clé à utiliser et l'avertissement d'argent sur
   UNE ligne. Ils étaient deux cartes empilées de 300 px : autant de hauteur en
   moins pour les deux volets, sur un écran qui n'en a pas de trop. */
.cnsl-outils{display:grid;gap:10px 18px;align-items:center;margin:0 0 4px}
.cnsl-outils h1{margin:0;font-size:1.5rem;white-space:nowrap}
@media(min-width:1080px){.cnsl-outils{grid-template-columns:auto minmax(0,21rem) minmax(0,1fr)}}
@media(min-width:700px) and (max-width:1079px){.cnsl-outils{grid-template-columns:auto minmax(0,1fr)}.cnsl-outils .cnsl-argent{grid-column:1/-1}}
.cnsl-argent{font-size:.875rem;color:var(--ink2);margin:0;background:var(--warnbg);border:1px solid var(--warnb);border-radius:10px;padding:11px 14px}
.cnsl-argent b{font:700 .875rem var(--head)}
/* Le motif de route garde sa CASSE : la classe .lab met en majuscules, et un
   chemin d'API en capitales se lit mal — et se recopie faux. */
.essai .lab{text-transform:none;letter-spacing:0;font:400 .8125rem var(--mono);color:var(--ink2);margin-bottom:6px}
.essai-ligne{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.essai-ligne .url{flex:1 1 18rem;min-width:0;font:400 .875rem var(--mono);min-height:44px;padding:9px 11px;border:1px solid var(--field);border-radius:10px;background:#fff;color:var(--ink)}
.essai-ligne .btn{flex:0 0 auto;min-height:44px;font-size:.875rem}
.res{margin:10px 0 0;max-height:22rem;overflow:auto;white-space:pre-wrap;word-break:break-word}
.res[hidden]{display:none}
.lien:hover{color:var(--blued)}
.etat.ko{color:var(--warn)}
.err{display:flex;gap:6px;font:700 .875rem var(--sans);color:var(--bad);margin:7px 0 0}
.err::before{content:"\26A0";font-weight:400}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.9375rem;padding:6px 0;min-height:44px}
.check input{width:22px;height:22px;flex:none;margin:2px 0 0;accent-color:var(--blue)}
.alert{border:1px solid;border-radius:10px;padding:14px 16px;margin:0 0 16px;font-size:.9375rem}
.alert h3{margin:0 0 4px;font-size:.9375rem}
.alert h3 .en{font-weight:400}
.ai{background:var(--pale);border-color:var(--paleb)}
.ao{background:var(--okbg);border-color:var(--okb)}
.aw{background:var(--warnbg);border-color:var(--warnb)}
.ab{background:var(--badbg);border-color:var(--badb)}
.pill{display:inline-flex;align-items:center;gap:6px;font:700 .6875rem/1 var(--head);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.po{color:var(--okt);background:var(--okbg);border-color:var(--okb)}
.pn{color:#5B6478;background:#F2F3F5;border-color:var(--line)}
.pb{color:var(--bad);background:var(--badbg);border-color:var(--badb)}
.pw{color:var(--warn);background:var(--warnbg);border-color:var(--warnb)}
table{width:100%;border-collapse:collapse;font-size:.9375rem}
th{text-align:left;font:700 .6875rem/1.3 var(--head);letter-spacing:.07em;text-transform:uppercase;color:var(--mute);padding:0 10px 9px 0}
td{padding:13px 10px 13px 0;border-top:1px solid var(--line2);vertical-align:top}
th.r,td.r{text-align:right;padding-right:0;font-variant-numeric:tabular-nums}
@media(max-width:619px){
table,thead,tbody,tr,th,td{display:block}
thead{display:none}
tr{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 10px;background:#fff}
td{border:0;padding:5px 0;display:flex;justify-content:space-between;align-items:baseline;gap:14px;text-align:right}
td::before{content:attr(data-l);font:700 .6875rem/1.6 var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);text-align:left;flex:none}
td.b{display:block;text-align:left;padding-top:0}
td.b::before{display:none}
/* Garde-fou : une cellule sans etiquette (landing, pages de referencement)
   redevient un bloc lisible aligne a gauche, au lieu d'etre poussee a droite
   derriere un ::before vide. Couvre les 206 pages sans les modifier. */
td.l{display:block;text-align:left}
td.l::before{display:block;margin-bottom:3px}
td:not([data-l]){display:block;text-align:left}
td:not([data-l])::before{display:none}
tr>th:first-child{padding-top:0}}
.key{font:400 1.0625rem/1.6 var(--mono);width:100%;word-break:break-all;background:#061029;color:#E8EFFF;border:1px solid #061029;border-radius:10px;padding:15px;letter-spacing:.01em}
.code{font:400 .875rem/1.7 var(--mono);background:#061029;color:#E8EFFF;border-radius:10px;padding:14px 15px;overflow-x:auto;white-space:pre;margin:0}
.code b{color:#8FB6FF;font-weight:400}
.mask{font:400 .9375rem var(--mono);color:var(--ink)}
.mute{color:var(--mute)}
.sm{font-size:.875rem}
.hr{height:1px;background:var(--line2);border:0;margin:18px 0}
.eyebrow{font:700 .75rem/1 var(--head);letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin:0 0 10px}
.empty{text-align:center;padding:34px 20px;border:1px dashed var(--field);border-radius:var(--r);background:#fff}
.empty b{display:block;font:700 1rem var(--head);margin-bottom:4px}
.steps{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:700 .8125rem var(--head);color:var(--mute);margin:0 0 14px;list-style:none;padding:0}
.steps li{display:flex;align-items:center;gap:8px}
.steps .on{color:var(--blue)}
.pk{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.nom{font:700 1.0625rem var(--head)}
.prose{max-width:42rem}
.prose p{margin:0 0 1.15em}
details{border:1px solid var(--line);border-radius:10px;background:#fff;margin:0 0 8px}
/* Un bloc replié qui SUIT autre chose qu'un bloc replié a besoin d'air au-dessus
   (signalé le 26/08 sur « Facturation & paiement », collé aux quatre prix) :
   les sections de la landing tiennent leur rythme du margin-top des h2, qu'un
   details n'a pas. Entre DEUX details, la marge reste serrée : c'est une liste. */
main.wrap>*:not(details)+details{margin-top:26px}
summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-height:54px;padding:15px 46px 15px 16px;position:relative;font:700 1rem var(--head);cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary span.c,summary .muet{font:700 .75rem var(--head);color:var(--mute);letter-spacing:.04em;margin-left:auto}
summary::after{content:"+";font:400 1.5rem/1 var(--mono);color:var(--blue);position:absolute;right:16px;top:14px}
details[open] summary::after{content:"\2013"}
details .in{padding:2px 16px 14px}
details table{margin:0 0 6px}
/* Les tableaux de routes de la landing : UNE table par section repliable, donc
   en largeur AUTOMATIQUE chacune taille ses colonnes sur SON contenu — le plus
   long chemin de la section. Mesuré au moteur de rendu le 25/08/2026 : 11
   sections, 11 gabarits DIFFÉRENTS, la colonne Prix se posant entre x=387
   (« France — KYB ») et x=648 (« Europe — comptes annuels »). L'oeil lit les
   sections l'une sous l'autre : quatre colonnes qui se déplacent de 261 px d'un
   bloc au suivant, c'est le défaut d'alignement signalé.
   Largeurs FIXES = un seul gabarit pour toutes les sections ; le chemin coupe
   DANS sa colonne (overflow-wrap) au lieu de l'élargir. Et le contenu
   s'aligne sur le titre de section (16 px), au lieu de coller à la bordure.
   ⚠️ Sous 620 px chaque ligne devient une carte (display:block/flex) : ces
   largeurs y écraseraient les cellules, d'où le seuil. */
@media(min-width:620px){
/* « Agrandis le tableau » (CDU, 25/08) : les sections de routes débordent
   VOLONTAIREMENT la colonne de prose. Dans les 58 rem communs, la colonne Route
   ne tenait pas les chemins EU les plus longs — 13 coupaient au milieu d'un
   segment (« …/comp » puis « tes »), et aucune stratégie CSS ne coupe sur les
   « / » (les quatre ont été essayées au navigateur). Bloc à 80 rem BORNÉ par la
   fenêtre : la colonne Route passe à 473 px, plus AUCUNE coupure de segment, la
   description gagne 150 px et la page raccourcit de 4 000 px. La prose, elle,
   reste à 58 rem : une phrase de 1 280 px ne se lit pas.
   :has(>table) ne prend QUE les sections de routes — la FAQ et « En détail »
   sont des details de prose. Un navigateur sans :has() garde simplement la
   largeur de la colonne : le tableau reste aligné, il est juste plus étroit. */
details:has(>table){width:min(80rem,calc(100vw - 2rem));margin-left:50%;transform:translateX(-50%)}
details>table{table-layout:fixed}
details>table th:first-child,details>table td:first-child{width:36%;padding-left:16px}
details>table th:nth-child(2),details>table td:nth-child(2){width:6rem}
details>table th:nth-child(3),details>table td:nth-child(3){width:5.5rem}
details>table th:last-child,details>table td:last-child{padding-right:16px}
}
/* Un mot qui ne tient pas dans sa colonne fait défiler TOUTE LA PAGE vers la
   droite — mesuré : 258 px de débordement à 640 px de large avant ce lot, et
   77 px sur téléphone (les chemins /v1/eu/entreprise/GB/:company_number/...).
   Les colonnes ne s'élargissant plus, ces mots doivent couper : le chemin
   n'importe où (c'est du code), la prose seulement quand le mot est plus large
   que sa colonne (break-word ne déchire pas les phrases normales). Hors du
   @media : le téléphone débordait DÉJÀ. */
details>table td.b code{overflow-wrap:anywhere}
details>table td{overflow-wrap:break-word}
/* La colonne Route ne prend ses 39 % (473 px = le plus long chemin de la
   grille, zéro coupure) QUE lorsque le bloc atteint sa pleine largeur, à partir
   de 1 240 px de fenêtre. En dessous, ces 3 points volés à la description
   allongent la page de 4 000 px sans sauver une seule coupure : mesuré à
   640 px (38 693 px de tableaux contre 34 790) et à 1 000 px. */
@media(min-width:1240px){
details>table th:first-child,details>table td:first-child{width:39%}
}
.par{display:grid;gap:14px}
@media(min-width:760px){.par{grid-template-columns:1fr 1fr}}
.par>div{display:flex;flex-direction:column}
.par .btn{margin-top:auto}
.claim{background:var(--ink);color:#fff;border-radius:var(--r);padding:20px;display:grid;gap:6px}
.claim b{font:800 1.25rem var(--head);letter-spacing:-.02em}
.claim .en{color:#9FB4DD}
.claim span.d{font-size:.9375rem;color:var(--paleb)}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column}
.tier.hi{border:2px solid var(--blue)}
.tier .btn{margin-top:auto}
.tick{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:9px;font-size:.9375rem}
.tick li{position:relative;padding-left:19px}
.tick li::before{content:"\2713";color:var(--okt);font-weight:700;position:absolute;left:0;top:0}
.pf{max-width:58rem;margin:40px auto 0;padding:18px 16px 40px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:.8125rem;color:var(--mute);border-top:1px solid var(--line2)}
/* Écrans d'entrée : la colonne fait 31 rem, le pied doit la suivre — sinon sa
   ligne de séparation dépasse largement de part et d'autre du contenu. */
body:has(main.wrap.n) .pf{max-width:31rem}
body:has(main.wrap.w) .pf{max-width:82rem}
.pf .mention{flex-basis:100%;margin:4px 0 0}
.pf a{color:var(--mute)}
/* Bascule de langue : elle doit se voir DANS une rangée de liens gris — c'est
   une commande, pas une mention légale. Le drapeau serait pire (une langue
   n'est pas un pays) : le mot est écrit dans la langue qu'il ouvre. */
.pf a.lg,.nav a.lg{font-weight:700;color:var(--ink2)}
.pf a.lg{border:1px solid var(--line);border-radius:999px;padding:3px 9px}

code,pre{font-family:var(--mono)}
code{background:var(--pale);color:var(--ink);border-radius:4px;padding:.1rem .3rem;font-size:.9em}
/* Une adresse de contrat (42 caractères insécables) dans une phrase faisait
   défiler TOUTE la page vers la droite sur téléphone : 43 px à 360 px de large,
   mesuré le 25/08/2026 sur le paragraphe « Réseau : eip155:84532 … actifs ».
   Un bloc pre s'en sort seul (overflow-x:auto) ; du code EN LIGNE, non. */
main.wrap p code,main.wrap li code{overflow-wrap:anywhere}
pre{background:#061029;color:#E8EFFF;border-radius:10px;padding:14px 15px;overflow-x:auto;font-size:.82rem;line-height:1.7}
pre code{background:none;color:inherit;padding:0}
main.wrap>table,main.wrap>ul,main.wrap>ol{margin:0 0 1.2em}
main.wrap>ul,main.wrap>ol{padding-left:1.2rem}
main.wrap>ul li,main.wrap>ol li{margin:.3rem 0}
main.wrap>h2{margin:34px 0 .5em;font-size:1.375rem;font-weight:800}
main.wrap>h3{margin:22px 0 .4em}
main.wrap>table th,main.wrap>table td{font-size:.875rem}
details table th,details table td{font-size:.875rem}
nav.fil{font-size:.8125rem;color:var(--mute);margin:0 0 14px}
nav.fil a{color:var(--mute)}
.muet{color:var(--mute);font-weight:400}
.source{font-size:.8125rem;color:var(--mute)}
ul.liens{padding-left:1.1rem}
ul.liens li{margin:.25rem 0}
.encadre{border-left:3px solid var(--blue);background:var(--pale);border-radius:0 10px 10px 0;padding:14px 16px;margin:18px 0;font-size:.9375rem}
.reserve{border-left:3px solid var(--warn);background:var(--warnbg);border-radius:0 10px 10px 0;padding:14px 16px;margin:18px 0;font-size:.9375rem}
p.cta{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.cta a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:10px;font:700 1rem/1.2 var(--head);text-decoration:none;border:1px solid transparent}
.cta-principal{background:var(--blue);color:#fff}
.cta-principal:visited,.cta-principal:hover{color:#fff}
.cta-principal:hover{background:var(--blued)}
.cta-secondaire{border-color:var(--field);color:var(--ink);background:#fff}
.cta-secondaire:hover{border-color:var(--ink);color:var(--ink)}
footer{font-size:.8125rem;color:var(--mute);border-top:1px solid var(--line2);margin-top:40px;padding-top:18px}
footer a{color:var(--mute)}