@font-face{font-family:"IBM Plex Sans";src:url("/polices/ibm-plex-sans-latin.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";src:url("/polices/ibm-plex-sans-latin-ext.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url("/polices/ibm-plex-mono-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";src:url("/polices/ibm-plex-mono-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";src:url("/polices/ibm-plex-mono-latin-ext-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url("/polices/ibm-plex-mono-latin-ext-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";src:url("/polices/manrope-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
:root{
--ink:#0B1D4D;--ink2:#4A5578;--mute:#4A5578;--faint:#7F8BA8;
--blue:#1F55F0;--blued:#0B1D4D;--blue2:#4F7DFF;--blue2h:#6B92FF;
--pale:#EEF2FC;--paleb:#C9D5F5;--chip:#EEF2FB;--chiph:#DCE4F8;
--line:#D6DDEC;--line2:#E4E9F3;--line3:#F0F3F8;--field:#8B94A6;--dash:#9AA6C4;
--ok:#1E7A4B;--okt:#135C39;--okbg:#E6F6EE;--okb:#B5DEC7;--okn:#7EE2A8;
--warn:#8A5A12;--warnl:#B7791F;--warnbg:#FDF3DC;--warnb:#EBD3A1;
--bad:#A33A1F;--baddot:#C2410C;--badbg:#FBEAE5;--badb:#EDC4B8;
--bg:#F3F5F9;--card:#FFF;
--nuit:#0B1D4D;--nuit2:#08183F;--nuit3:#061437;--nuitl:#22367A;--nuitb:#5A6DA8;--nuitt:#C3CEEC;--nuitn:#D5DDF5;--nuits:#9DB8FF;--nuitc:#DDE3F0;
--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--head:var(--sans);
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--logo:"Manrope","IBM Plex Sans",system-ui,sans-serif;
--r:0px;--large:77.5rem}
*,*::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:#fff}
h1,h2,h3{font-family:var(--head);font-weight:600;margin:0 0 .4em;line-height:1.15;letter-spacing:-.015em}
h1{font-size:clamp(1.75rem,3vw,2.125rem)}
h2{font-size:1.25rem;margin-top:0}
h3{font-size:1.0625rem}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blued);text-decoration:underline}
/* Un lien DANS une phrase reste souligné : entre le bleu d'accent et le texte
   bleu nuit, l'écart de luminance est de 2,7:1, sous les 3:1 qui permettraient
   de le distinguer par la seule couleur (WCAG 1.4.1). Les liens de
   composant (barre, cartes, « Voir … ») se reconnaissent à leur forme. */
p a,li a,dd a,td a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
/* 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}
.top :focus-visible,.nuit :focus-visible{outline-color:#fff}
.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. */
.wrap.w{max-width:82rem}
main.wrap.w{padding-top:14px;padding-bottom:16px}
/* BARRE (maquette du 29/09) : une bande bleu nuit sur toute la largeur, la
   marque à gauche, la navigation à droite, contenu borné à 1 240 px comme les
   sections des pages. Sur téléphone la navigation passe à la ligne sous la
   marque, comme dans la maquette, au lieu de défiler de côté. */
.top{background:var(--nuit);color:#fff}
.tin{max-width:var(--large);margin:0 auto;padding:18px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.top.pub .tin{border-bottom:1px solid var(--nuitl)}
@media(max-width:560px){.tin{padding:14px 20px}}
.brand{display:inline-flex;align-items:flex-end;gap:3px;font:800 1.5rem/1 var(--logo);color:var(--ink);text-decoration:none;letter-spacing:-.04em}
.brand::after{content:"";width:7px;height:7px;background:var(--blue);margin-bottom:.2em;flex:none}
.brand:hover{color:var(--ink);text-decoration:none}
.top .brand,.nuit .brand{color:#fff}
.top .brand::after,.nuit .brand::after{background:var(--blue2)}
.brand.gd{font-size:1.75rem}
.barre-d{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.barre-doc{color:var(--nuitn);font-size:.875rem;font-weight:500;text-decoration:none}
.barre-doc:hover{color:#fff}
.bal-bloc{display:inline-flex;align-items:baseline;gap:8px;border:1px solid var(--nuitl);padding:9px 12px;white-space:nowrap}
.bal-bloc small{font:400 .75rem var(--sans);color:var(--nuits)}
.bal{font:500 .9375rem/1 var(--mono);font-variant-numeric:tabular-nums;color:#fff}
/* Téléphone : « Documentation » et le solde restent sur la ligne de la marque
   (182 px de barre sinon, 110 avant la maquette) ; le mot « Solde » n'est plus
   écrit, il reste lu par un lecteur d'écran. */
@media(max-width:559px){.top:not(.pub) .tin{flex-wrap:nowrap}.barre-d{flex-wrap:nowrap;gap:12px;min-width:0}.bal-bloc{padding:7px 10px}.bal-bloc small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* Espace client : la colonne suit la barre (1 240 px) ; les écrans d'entrée
   gardent leur colonne étroite, la console sa largeur de deux volets. */
body:not(.pub) main.wrap:not(.n):not(.w){max-width:var(--large);padding:32px 32px 72px}
@media(max-width:560px){body:not(.pub) main.wrap:not(.n):not(.w){padding:22px 16px 56px}}
body:has(main.wrap.w) .tin,body:has(main.wrap.w) .nav{max-width:82rem}
.top:not(.pub) .nav{padding-top:4px}
/* ⚠️ 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 décalage négatif du contour lui rend sa visibilité. */
.nav{display:flex;gap:0;overflow-x:auto;min-width:0;max-width:var(--large);margin:0 auto;padding:0 16px}
.nav a:focus-visible{outline-offset:-3px}
.nav a{flex:none;display:flex;align-items:center;min-height:46px;padding:0 16px;font:500 .875rem var(--sans);color:var(--nuitt);text-decoration:none;border-bottom:2px solid transparent}
.nav a:hover{color:#fff;text-decoration:none}
.nav a[aria-current=page]{color:#fff;font-weight:600;border-bottom-color:var(--blue2)}
@media(max-width:640px){.nav:not(.pub){flex-wrap:wrap;overflow:visible;padding:0 8px}.nav:not(.pub) a{min-height:40px;padding:0 10px}}
.nav.pub{flex-wrap:wrap;align-items:center;gap:6px 28px;overflow:visible;max-width:none;margin:0;padding:0}
.nav-liens,.nav-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px}
.nav.pub a{min-height:36px;padding:0;color:var(--nuitn);border:0}
/* Sous 900 px (demande CDU du 29/09 : la barre de la maquette prenait 183 px
   au téléphone, l'ancienne 63) : la marque, la bascule et « Espace client » sur
   une ligne, les cinq liens sur la suivante, en forme courte sous 560 px
   (défilement de côté seulement sous 360 px). 93 px de haut. */
@media(max-width:899px){
.top.pub .tin{position:relative;display:block;padding:12px 32px 0}
.top.pub .brand{min-height:40px;align-items:center}
.nav.pub{display:block}
.nav-liens{flex-wrap:nowrap;gap:24px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.nav-liens::-webkit-scrollbar{display:none}
.nav-liens a{flex:none}
.nav-actions{position:absolute;top:12px;right:32px;height:40px;flex-wrap:nowrap;gap:16px}
.nav.pub .nav-actions a{min-height:32px}
.nav.pub a.compte{padding:0 12px;font-size:.8125rem}}
@media(max-width:559px){.top.pub .tin{padding:12px 20px 0}.nav-actions{right:20px}.nav-liens{gap:18px}.nav-suite{display:none}}
.nav.pub a[aria-current=page]{color:#fff;font-weight:500;box-shadow:inset 0 -2px 0 var(--blue2)}
.nav.pub a.compte{background:#fff;color:var(--ink);padding:0 14px;font-weight:600}
.nav.pub a.compte:hover{background:var(--chip);color:var(--ink)}
.nav.pub a.compte[aria-current=page]{box-shadow:none}
.nav a.lg{color:var(--nuitn)}

.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) :
   l'intitulé d'une tuile réserve DEUX lignes, 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. */
.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)}
/* Tableau de bord (maquette du 29/09/2026) : les quatre tuiles en UNE bande,
   séparées par un filet (l'espacement de 1 px laisse voir le fond de la grille),
   quelle que soit la disposition, deux ou quatre colonnes. */
.grid.g4{gap:1px;background:var(--line2);border:1px solid var(--line)}
.grid.g4>.card{border:0}
.jauge{display:block;height:4px;background:var(--line2);margin:10px 0 0}
.jauge>span{display:block;height:4px;background:var(--blue)}
.jauge.vide>span{background:var(--warnl)}
.card.action{padding:0;display:flex;flex-direction:column}
.card.action>h3{padding:20px 22px 0;margin:0}
.card.action>p{padding:6px 22px 20px;margin:0}
.action-lien{display:block;margin-top:auto;border-top:1px solid var(--line);padding:15px 22px;font-weight:600;font-size:.9375rem;color:var(--ink);text-decoration:none}
.action-lien:hover{background:var(--bg);color:var(--ink);text-decoration:none}
.action-lien.plein{background:var(--ink);border-top-color:var(--ink);color:#fff}
.action-lien.plein:hover{background:var(--blue);color:#fff}
.pied-compte{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.pied-compte p{margin:0}
.pied-compte form{margin:0}
.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:500 .8125rem/1.35 var(--sans);color:var(--mute)}
.num{font:600 1.875rem/1.1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink);margin:8px 0 0}
.num.s{font-size:1.375rem}
.num .u{font-size:1rem;font-weight:400;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:10px 22px;border-radius:var(--r);font:600 .9375rem/1.2 var(--sans);border:1px solid transparent;background:none;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{text-decoration:none}
/* 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(--ink);color:#fff}
.bp .en{color:var(--paleb)}
.bs{background:#fff;color:var(--ink);border-color:var(--ink)}.bs:hover{background:var(--bg);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:var(--bg);color:#5F6A8A;border-color:var(--line);cursor:not-allowed}
.full{display:flex;width:100%}
.acts{display:flex;flex-wrap:wrap;gap:10px}
/* Sous-onglets d'une page (clés actives / révoquées et expirées, 13/09/2026) :
   des liens, sans script. Maquette du 29/09 : un groupe segmenté, l'onglet
   courant en bleu nuit. */
.sousnav{display:inline-flex;flex-wrap:wrap;gap:0;margin:0 0 14px;border:1px solid var(--line);background:#fff}
.sousnav a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;font:500 .875rem var(--sans);color:var(--ink);text-decoration:none}
.sousnav a:hover{background:var(--bg);text-decoration:none}
.sousnav a[aria-current=page]{color:#fff;background:var(--ink)}
/* En-tête de carte à onglets (« Mes clés », 13/09/2026) : le titre à gauche,
   les onglets à droite, SUR la carte qu'ils gouvernent. */
.entete-carte{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:14px}
.entete-carte>h2,.entete-carte>.sousnav{margin:0}
/* Écrans d'ENTRÉE (colonne de 31 rem) : la rangée d'actions s'aligne sur la
   carte (« les boutons ne sont pas lignés », 25/08). La base de 12 rem fait
   passer le second bouton à la ligne dès que la colonne est trop étroite. */
main.wrap.n .acts>.btn{flex:1 1 12rem}
.field{margin:0 0 18px}
.field>label{display:block;font:600 .9375rem var(--sans);margin:0 0 6px}
input[type=text],input[type=email],input[type=date],select{width:100%;min-height:48px;padding:11px 12px;border:1px solid var(--field);border-radius:var(--r);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) : une liste à nous, qui s'affiche quand elle a
   des résultats, et une ligne d'état qui 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:var(--r);box-shadow:0 10px 30px rgba(11,29,77,.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;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:600 .9375rem var(--sans)}
.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. */
.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. */
.essai+.essai{margin-top:16px;border-top:1px solid var(--line2);padding-top:14px}
/* VRAI SPLIT (demande CDU du 30/08) : deux volets qui défilent CHACUN chez eux,
   hauteur d'écran ; sous 1 080 px, deux ONGLETS et un seul volet à l'écran.
   Sans script, les deux volets s'empilent et tout reste lisible.
   ⚠️ 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:0;margin:16px 0 0;border:1px solid var(--line);background:#fff}
.cnsl-tabs[hidden]{display:none}
.cnsl-tab{flex:1 1 0;min-height:44px;border:0;background:none;font:600 .9375rem var(--sans);color:var(--ink2);cursor:pointer}
.cnsl-tab[aria-selected=true]{background:var(--ink);color:#fff}
@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. La hauteur est déclarée
   DEUX fois, vh puis dvh : un navigateur qui ne connaît pas dvh IGNORE la
   déclaration entière (mesuré au premier essai du 30/08). */
.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}
.cnsl-r{height:calc(100vh - 28px);height:calc(100dvh - 28px);overflow:hidden}
.cnsl-r>.card{height:100%}
}
@media(max-width:1079px){
.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}
.cnsl.js .cnsl-r>.card>h2{display:none}
}
.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 (tabular-nums : les
   chiffres ne dansent pas d'un appel à l'autre). */
.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}
.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(--ink);margin:0;background:var(--warnbg);border-left:3px solid var(--warnl);padding:11px 14px}
.cnsl-argent b{font:600 .875rem var(--sans)}
/* Le motif de route garde sa CASSE : 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);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:600 .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)}
/* Bandeaux (maquette du 29/09) : un filet de 3 px à gauche sur un fond pâle,
   sans cadre. */
.alert{border:0;border-left:3px solid;border-radius:var(--r);padding:16px 20px;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(--blue)}
.ao{background:var(--okbg);border-color:var(--okt)}
.aw{background:var(--warnbg);border-color:var(--warnl)}
.ab{background:var(--badbg);border-color:var(--bad)}
.pill{display:inline-flex;align-items:center;gap:6px;font:500 .6875rem/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:var(--r);border:0;white-space:nowrap}
.po{color:var(--okt);background:var(--okbg)}
.pn{color:var(--ink2);background:var(--line3)}
.pb{color:var(--bad);background:var(--badbg)}
.pw{color:var(--warn);background:var(--warnbg)}
.pi{color:var(--blue);background:var(--pale)}
table{width:100%;border-collapse:collapse;font-size:.9375rem}
th{text-align:left;font:500 .75rem/1.3 var(--sans);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}
/* Deux colonnes alignées à droite côte à côte : le montant touchait
   « Révoquer » sur la page des clés (constat CDU du 13/09/2026). Le retrait ne
   vaut qu'en tableau : sous 620 px les cellules sont des lignes de carte. */
@media(min-width:620px){th.r+th.r,td.r+td.r{padding-left:22px}}
@media(max-width:619px){
table,thead,tbody,tr,th,td{display:block}
thead{display:none}
tr{border:1px solid var(--line);border-radius:var(--r);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:600 .6875rem/1.6 var(--sans);letter-spacing:.04em;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 (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:var(--nuit);color:#fff;border:1px solid var(--nuit);padding:15px;letter-spacing:.01em}
.code{font:400 .875rem/1.7 var(--mono);background:var(--nuit);color:var(--nuitc);padding:14px 15px;overflow-x:auto;white-space:pre;margin:0}
.code b{color:var(--nuits);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}
/* Surtitre de la maquette : chasse fixe, 12 px, bleu d'accent (bleu pâle sur
   fond sombre). */
.eyebrow{font:500 .75rem/1.3 var(--mono);letter-spacing:0;text-transform:none;color:var(--blue);margin:0 0 10px}
.empty{text-align:center;padding:34px 20px;border:1px dashed var(--dash);background:#fff}
.empty b{display:block;font:600 1rem var(--sans);margin-bottom:4px}
.steps{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:600 .8125rem var(--sans);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:600 1.0625rem var(--sans)}
.prose{max-width:42rem}
.prose p{margin:0 0 1.15em}
details{border:1px solid var(--line);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) ; 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:600 1rem var(--sans);cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary span.c,summary .muet{font:500 .75rem var(--sans);color:var(--mute);letter-spacing:.02em;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 en sections repliables : UNE table par section, donc
   en largeur AUTOMATIQUE chacune taille ses colonnes sur SON contenu (mesuré le
   25/08 : 11 sections, 11 gabarits différents). Largeurs FIXES = un seul
   gabarit pour toutes les sections ; le chemin coupe DANS sa colonne.
   ⚠️ Sous 620 px chaque ligne devient une carte : 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 (bloc à 80 rem BORNÉ par la fenêtre, plus
   AUCUNE coupure de segment). :has(>table) ne prend QUE les sections de
   routes : la FAQ et les details de prose gardent la colonne. */
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 (258 px mesurés à 640 px le 25/08) : le chemin coupe n'importe où
   (c'est du code), la prose seulement quand le mot dépasse sa colonne. 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. */
@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(--nuit);color:#fff;padding:22px 24px;display:grid;gap:6px}
.claim b{font:600 1.5rem var(--sans);letter-spacing:-.01em}
.claim .en{color:var(--nuits)}
.claim span.d{font-size:.9375rem;color:var(--nuitt)}
.tier{background:#fff;border:1px solid var(--line);padding:22px;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(--blue);font-weight:600;position:absolute;left:0;top:0}
/* PIED UNIQUE (21/08/2026, maquette du 29/09) : une bande bleu nuit en
   colonnes (Produit, Machines, Ressources, Sirenic) puis la mention des
   licences ; même HTML sur toutes les surfaces. L'espace client le porte en
   clair, comme la maquette, sans changer une ligne de HTML. */
.pf{background:var(--nuit);color:var(--nuitt);font-size:.875rem;margin:0;padding:0}
.pf-in{max-width:var(--large);margin:0 auto;padding:56px 32px 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:32px}
@media(max-width:560px){.pf-in{padding:40px 20px 32px}}
.pf-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pf-col b{color:#fff;font-weight:600}
.pf a{color:var(--nuitt);text-decoration:none}
.pf a:hover{color:#fff;text-decoration:underline}
.pf .brand{color:#fff}
.pf .brand::after{background:var(--blue2)}
.pf .mention{grid-column:1/-1;margin:8px 0 0;padding-top:20px;border-top:1px solid var(--nuitl);font-size:.8125rem;line-height:1.55;color:var(--nuits)}
.pf .mention a{color:var(--nuitt);text-decoration:underline}
/* Bascule de langue : une commande, pas une mention légale. Le mot est écrit
   dans la langue qu'il ouvre (jamais un drapeau : une langue n'est pas un pays). */
.pf a.lg{font-weight:600;color:#fff;border:1px solid var(--nuitb);padding:2px 9px}
body:not(.pub) .pf{background:#fff;color:var(--mute);border-top:1px solid var(--line)}
body:not(.pub) .pf-in{padding-top:28px;padding-bottom:24px}
body:not(.pub) .pf-col b{color:var(--ink)}
body:not(.pub) .pf a{color:var(--mute)}
body:not(.pub) .pf a:hover{color:var(--ink)}
body:not(.pub) .pf .brand{color:var(--ink)}
body:not(.pub) .pf .brand::after{background:var(--blue)}
body:not(.pub) .pf .mention{color:var(--mute);border-top-color:var(--line2)}
body:not(.pub) .pf .mention a{color:var(--blue)}
body:not(.pub) .pf a.lg{color:var(--ink);border-color:var(--line)}

code,pre{font-family:var(--mono)}
code{background:var(--chip);color:var(--ink);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, mesuré le
   25/08/2026). 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:var(--nuit);color:var(--nuitc);padding:16px 18px;overflow-x:auto;font-size:.8125rem;line-height:1.7}
pre code{background:none;color:inherit;padding:0}
/* Coloration des blocs de commandes (10/09/2026). Les classes sont posées par
   src/routes/coloration-code.ts, jamais à la main dans un gabarit, et ne valent
   QUE dans un <pre>. Le préfixe co- est là parce que la feuille a déjà .url,
   .num, .code et .cout : avant de nommer une classe, la chercher dans TOUTE la
   feuille (le 10/09 la landing a été servie une heure en rouge, ses bandes
   portant le nom .bd du bouton danger). Palette de la maquette du 29/09 ;
   contraste mesuré sur #0B1D4D, le fond le plus clair des deux : 4,8 pour le
   gris de commentaire, au-dessus de 4,5 pour tous. */
pre .co-com{color:#7F8BA8}
pre .co-cmd{color:#FFFFFF;font-weight:500}
pre .co-opt{color:#C6B0FF}
pre .co-url{color:#9DB8FF}
pre .co-val{color:#B9C3DA}
pre .co-cle{color:#9DB8FF}
pre .co-pro{color:#7F8BA8}
pre .co-ok{color:#7EE2A8;font-weight:500}
pre .co-att{color:#FFC46B;font-weight:500}
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.5rem;font-weight:600}
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);padding:16px 20px;margin:18px 0;font-size:.9375rem}
.reserve{border-left:3px solid var(--warnl);background:var(--warnbg);padding:16px 20px;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 22px;font:600 .9375rem/1.2 var(--sans);text-decoration:none;border:1px solid transparent}
/* Préfixées par .cta : « .cta a » (bordure transparente) l'emportait sur une
   classe seule, et le bouton secondaire des 206 pages n'avait AUCUNE bordure
   (vu au navigateur le 29/09/2026). */
.cta .cta-principal{background:var(--blue);color:#fff}
.cta .cta-principal:visited,.cta .cta-principal:hover{color:#fff}
.cta .cta-principal:hover{background:var(--ink)}
.cta .cta-secondaire{border-color:var(--ink);color:var(--ink);background:#fff}
.cta .cta-secondaire:hover{background:var(--bg);color:var(--ink)}

main.wrap.accueil,main.wrap.pleine{max-width:none;padding:0}
.bloc{background:#fff}
.bloc.gris{background:var(--bg)}
.bloc.filet{border-top:1px solid var(--line)}
.bloc.nuit,.nuit{background:var(--nuit);color:#fff}
.dedans{max-width:var(--large);margin:0 auto;padding:88px 32px}
@media(max-width:560px){.dedans{padding:56px 20px}}
.bloc h2{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.12;letter-spacing:-.015em;margin:12px 0 0;max-width:45rem;text-wrap:balance}
.bloc .eyebrow{margin:0}
.nuit .eyebrow{color:var(--nuits)}
.nuit a:not(.btn){color:var(--nuits)}
.nuit a:not(.btn):hover{color:#fff}
.accroche{font-size:1rem;line-height:1.6;color:var(--ink2);margin:14px 0 0;max-width:36rem}
.nuit .accroche{color:var(--nuitt)}
.entete-bloc{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 24px}
.entete-bloc>div{max-width:47.5rem}
.lien-fleche{display:inline-block;font-weight:600;font-size:.9375rem;color:var(--blue);text-decoration:none}
.mono{font-family:var(--mono)}
.visuel-masque{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.btn.bl{background:transparent;color:#fff;border-color:var(--nuitb)}
.btn.bl:hover{border-color:#fff;color:#fff}
.nuit .btn.bp{background:var(--blue2)}
.nuit .btn.bp:hover{background:var(--blue2h)}
/* ONGLETS SANS SCRIPT : des boutons radio masqués mais atteignables au clavier
   (les flèches changent d'onglet), et un sélecteur de frère qui montre le
   panneau du rang coché. Sans feuille, les panneaux se lisent à la suite. */
.onglet-radio{position:absolute;opacity:0;pointer-events:none}
.onglets-liste{display:flex;flex-direction:column;gap:8px;margin-top:32px}
.onglet-etiquette{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--nuitl);cursor:pointer;color:#fff}
.onglet-etiquette b{font-weight:600;font-size:1rem}
.onglet-etiquette span{font-size:.8125rem;color:var(--nuitt)}
.onglet-panneau{display:none}
.onglets>.onglet-radio:nth-of-type(1):checked~* .onglet-etiquette:nth-of-type(1),.onglets>.onglet-radio:nth-of-type(2):checked~* .onglet-etiquette:nth-of-type(2),.onglets>.onglet-radio:nth-of-type(3):checked~* .onglet-etiquette:nth-of-type(3),.onglets>.onglet-radio:nth-of-type(4):checked~* .onglet-etiquette:nth-of-type(4),.onglets>.onglet-radio:nth-of-type(5):checked~* .onglet-etiquette:nth-of-type(5),.onglets>.onglet-radio:nth-of-type(6):checked~* .onglet-etiquette:nth-of-type(6),.onglets>.onglet-radio:nth-of-type(7):checked~* .onglet-etiquette:nth-of-type(7),.onglets>.onglet-radio:nth-of-type(8):checked~* .onglet-etiquette:nth-of-type(8){background:var(--blue);border-color:var(--blue)}
.onglets>.onglet-radio:nth-of-type(1):checked~* .onglet-panneau:nth-of-type(1),.onglets>.onglet-radio:nth-of-type(2):checked~* .onglet-panneau:nth-of-type(2),.onglets>.onglet-radio:nth-of-type(3):checked~* .onglet-panneau:nth-of-type(3),.onglets>.onglet-radio:nth-of-type(4):checked~* .onglet-panneau:nth-of-type(4),.onglets>.onglet-radio:nth-of-type(5):checked~* .onglet-panneau:nth-of-type(5),.onglets>.onglet-radio:nth-of-type(6):checked~* .onglet-panneau:nth-of-type(6),.onglets>.onglet-radio:nth-of-type(7):checked~* .onglet-panneau:nth-of-type(7),.onglets>.onglet-radio:nth-of-type(8):checked~* .onglet-panneau:nth-of-type(8){display:block}
.onglets>.onglet-radio:nth-of-type(1):focus-visible~* .onglet-etiquette:nth-of-type(1),.onglets>.onglet-radio:nth-of-type(2):focus-visible~* .onglet-etiquette:nth-of-type(2),.onglets>.onglet-radio:nth-of-type(3):focus-visible~* .onglet-etiquette:nth-of-type(3),.onglets>.onglet-radio:nth-of-type(4):focus-visible~* .onglet-etiquette:nth-of-type(4),.onglets>.onglet-radio:nth-of-type(5):focus-visible~* .onglet-etiquette:nth-of-type(5),.onglets>.onglet-radio:nth-of-type(6):focus-visible~* .onglet-etiquette:nth-of-type(6),.onglets>.onglet-radio:nth-of-type(7):focus-visible~* .onglet-etiquette:nth-of-type(7),.onglets>.onglet-radio:nth-of-type(8):focus-visible~* .onglet-etiquette:nth-of-type(8){outline:3px solid #fff;outline-offset:2px}
/* En-tête sombre des pages intérieures (offres, articles, connecteurs,
   workflows) : surtitre, titre, accroche, et au besoin une rangée de chiffres. */
.tete-page{padding-top:64px;padding-bottom:72px}
.tete-page h1{font-size:clamp(2.25rem,4.4vw,3.5rem);line-height:1.06;letter-spacing:-.02em;margin:16px 0 0;max-width:51.25rem;text-wrap:balance}
.tete-lead{font-size:1.125rem;line-height:1.6;color:var(--nuitt);margin:20px 0 0;max-width:38.75rem;text-wrap:pretty}
.tete-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.75rem),1fr));margin-top:44px;border-top:1px solid var(--nuitl)}
.tete-chiffres>div{padding:22px 24px 0 0}
.tete-chiffres strong{display:block;font-size:2.125rem;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.tete-chiffres span{display:block;font-size:.8125rem;color:var(--nuits);margin-top:4px}
.faq-bloc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22.5rem),1fr));gap:48px;align-items:start}

.ac-heros{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,30rem),1fr));gap:56px;align-items:center;padding-top:72px;padding-bottom:80px}
.ac-etiquette{display:inline-flex;align-items:center;gap:8px;margin:0;max-width:100%;font:400 .75rem/1.3 var(--mono);color:var(--nuits);border:1px solid var(--nuitl);padding:6px 10px}
.ac-etiquette::before{content:"";width:6px;height:6px;flex:none;background:var(--blue2)}
.ac-heros h1{font-size:clamp(2.375rem,4.8vw,3.75rem);line-height:1.06;letter-spacing:-.02em;margin:24px 0 0;text-wrap:balance}
.ac-lead{font-size:1.125rem;line-height:1.6;color:var(--nuitt);margin:24px 0 0;max-width:35rem;text-wrap:pretty}
.ac-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.ac-preuves{display:flex;flex-wrap:wrap;gap:10px 28px;margin:36px 0 0;padding:0;list-style:none;font-size:.875rem;color:var(--nuitn)}
.ac-preuves li{display:flex;align-items:center;gap:8px}
.ac-preuves li::before{content:"";width:6px;height:6px;background:var(--okn);flex:none}
.ac-terminal{background:var(--nuit3);border:1px solid var(--nuitl);min-width:0}
.ac-terminal-tete{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin:0;padding:12px 18px;border-bottom:1px solid var(--nuitl);font:400 .75rem var(--mono);color:var(--faint)}
.ac-terminal pre{margin:0;background:none;padding:22px 20px;font-size:.84375rem;line-height:1.75;min-height:20.5rem;white-space:pre-wrap;overflow-wrap:anywhere}
/* Le terminal s'écrit ligne après ligne, une seule fois ; sous
   prefers-reduced-motion, il est entier d'emblée. */
.ac-l{animation:ac-ligne 1ms linear both;animation-delay:calc(var(--i) * .45s + .2s)}
@keyframes ac-ligne{from{visibility:hidden}to{visibility:visible}}
.ac-curseur{display:inline-block;width:8px;height:16px;background:var(--blue2);vertical-align:middle;margin-left:2px;animation:ac-clignote 1s steps(1) infinite}
@keyframes ac-clignote{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.ac-l,.ac-curseur{animation:none}}
.ac-chiffres{background:var(--nuit2);border-top:1px solid var(--nuitl)}
.ac-chiffres .dedans{padding-top:0;padding-bottom:0}
/* Les quatre chiffres ont leur grille à eux : la note de mesure, posée dans la
   même grille, y occupait une cinquième piste et tassait les chiffres à gauche. */
.ac-chiffres-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.75rem),1fr))}
.ac-chiffres-grille>div{padding:28px 0}
.ac-chiffres strong{display:block;font-size:2.25rem;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.ac-chiffres span{display:block;font-size:.8125rem;color:var(--nuits);margin-top:4px}
.ac-mesure{margin:0;padding:0 0 18px;font-size:.75rem;color:var(--faint)}
/* La carte de résultat suit le champ dans l'ordre du document : sur téléphone
   elle s'affiche SOUS le formulaire, là où l'œil attend la réponse, et non sous
   la liste des prix. Sur grand écran, elle occupe la colonne de droite. */
.ac-essai{display:grid;gap:28px 40px;align-items:start;margin-top:36px;border-top:2px solid var(--ink);padding-top:32px}
@media(min-width:900px){.ac-essai{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"form fiche" "liste fiche"}.ac-essai-form{grid-area:form}.ac-essai-liste{grid-area:liste}.ac-fiche{grid-area:fiche}}
.ac-essai-form{position:relative}
/* Saisie assistée (29/09) : la liste s'ouvre sous le champ, par-dessus les exemples. */
.ac-suggestions{position:absolute;left:0;right:0;z-index:5;list-style:none;margin:0;padding:0;background:#fff;border:2px solid var(--ink);border-top:0;box-shadow:0 12px 28px rgba(11,29,77,.14)}
.ac-option{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 16px;border-top:1px solid var(--line2);cursor:pointer;font-size:.9375rem}
.ac-option:first-child{border-top:0}
.ac-option span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-option .mono{flex:none;font-size:.75rem;color:var(--ink2)}
.ac-option:hover,.ac-option[aria-selected=true]{background:var(--pale)}
@media(max-width:559px){.ac-option{display:block}.ac-option span{display:block}.ac-option span:first-child{white-space:normal}.ac-option .mono{margin-top:3px}}
.ac-recherche{display:flex;border:2px solid var(--ink)}
.ac-recherche:focus-within{outline:3px solid var(--blue);outline-offset:2px}
.ac-recherche input{flex:1;min-width:0;border:0;padding:16px;font:400 .9375rem var(--mono);color:var(--ink);background:#fff;outline:none}
.ac-recherche button{border:0;background:var(--ink);color:#fff;padding:0 22px;font:600 .875rem var(--sans);cursor:pointer}
.ac-recherche button:hover{background:var(--blue)}
.ac-exemples{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ac-exemples button{border:0;background:var(--chip);padding:7px 12px;cursor:pointer;font:400 .75rem var(--mono);color:var(--ink)}
.ac-exemples button:hover{background:var(--chiph)}
.ac-note{font-size:.8125rem;color:var(--ink2);margin:16px 0 0;line-height:1.5}
.ac-ajoute{border-top:2px solid var(--ink)}
.ac-ajoute-tete{display:flex;justify-content:space-between;gap:12px;margin:0;padding:12px 0;border-bottom:1px solid var(--line);font-size:.75rem;color:var(--ink2);font-weight:500}
.ac-ajoute ul{list-style:none;margin:0;padding:0}
.ac-ajoute li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:11px 0;border-bottom:1px solid var(--line2);font-size:.875rem}
.ac-ajoute strong{display:block;font-weight:600}
.ac-ajoute small{display:block;color:var(--ink2);font-size:.8125rem}
.ac-essai .lien-fleche{margin-top:16px}
.ac-fiche{border:1px solid var(--line);background:#fff;box-shadow:0 24px 48px -24px rgba(11,29,77,.25);min-height:21.25rem;position:sticky;top:20px}
.ac-fiche-barre{height:4px;background:var(--blue)}
.ac-fiche-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:24px;border-bottom:1px solid var(--line2)}
.ac-fiche-tete>div{min-width:0}
.ac-fiche-tete h3{font-size:1.625rem;font-weight:700;line-height:1.2;margin:0;overflow-wrap:anywhere}
.ac-fiche-tete p{font-size:.8125rem;color:var(--ink2);margin:4px 0 0}
.ac-fiche .pill{font:600 .8125rem var(--sans);letter-spacing:0;text-transform:none;padding:6px 10px}
.ac-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;padding:24px;margin:0}
.ac-kv div{margin:0;min-width:0}
.ac-kv dt{font-size:.75rem;color:var(--ink2)}
.ac-kv dd{margin:4px 0 0;font-size:.9375rem;overflow-wrap:anywhere}
.ac-autres{border-top:1px solid var(--line2);padding:12px 24px 16px}
.ac-autres p{font-size:.75rem;color:var(--ink2);margin:0 0 6px}
.ac-autres button{width:100%;border:0;border-bottom:1px solid var(--line3);background:transparent;padding:8px 0;cursor:pointer;display:flex;justify-content:space-between;gap:12px;text-align:left;font:400 .875rem var(--sans);color:var(--ink)}
.ac-autres button:hover{color:var(--blue)}
.ac-autres button span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-autres .mono{font-size:.78125rem;color:var(--ink2);white-space:nowrap}
.ac-provenance{background:var(--bg);padding:14px 24px;font-size:.8125rem;color:var(--ink2);margin:0}
.ac-provenance strong{color:var(--ink)}
.ac-fiche>.lien-fleche{display:block;padding:12px 24px;border-top:1px solid var(--line2);font-size:.875rem}
.ac-fiche-msg{padding:28px}
.ac-fiche-code{font:400 .75rem var(--mono);color:var(--ink2);margin:0}
.ac-fiche-msg p+p{font-size:1.125rem;line-height:1.5;margin:12px 0 0}
.ac-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21.25rem),1fr));gap:16px;margin-top:40px}
.ac-carte{border:1px solid var(--line);display:flex;flex-direction:column;background:#fff}
.ac-carte h3{font-size:1.1875rem;font-weight:600;margin:0;padding:20px 22px 8px}
.ac-carte ul{list-style:none;margin:0;padding:0 22px;flex:1}
.ac-carte li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:.875rem}
.ac-carte li:last-child{border-bottom:0}
.ac-carte li .mono{font-size:.78125rem;color:var(--ink2);white-space:nowrap}
.ac-carte-src{background:var(--bg);padding:10px 22px;font:400 .71875rem/1.5 var(--mono);color:var(--ink2);margin:0}
.ac-carte.nuit{background:var(--nuit);border-color:var(--nuit)}
.ac-carte.nuit li{border-bottom-color:var(--nuitl)}
.ac-carte.nuit li .mono{color:var(--nuitt)}
.ac-carte.nuit .ac-carte-src{background:var(--nuit2);color:var(--nuits)}
.ac-probleme{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,23.75rem),1fr));gap:24px;margin-top:44px;align-items:stretch}
.ac-ids{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.625rem,1fr));gap:8px;align-content:start}
.ac-ids div{background:#fff;border:1px solid var(--line);padding:16px}
.ac-ids b{display:block;font-weight:600;font-size:.9375rem}
.ac-ids span{display:block;font-size:.75rem;color:var(--ink2);margin-top:4px}
.ac-ids .ac-ids-plus{background:transparent;border:1px dashed var(--dash);display:flex;align-items:center;font-size:.8125rem;color:var(--ink2)}
.ac-canon{padding:28px;display:flex;flex-direction:column;gap:18px}
.ac-canon .brand{font-size:1.625rem}
.ac-canon ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:1rem}
.ac-canon li::before{content:"\2713";color:var(--okn);margin-right:10px}
.ac-usages{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.125rem),1fr));gap:16px;margin-top:40px}
.ac-usage{border:1px solid var(--line);border-top:3px solid var(--blue);padding:22px;display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none}
.ac-usage:hover{border-color:var(--ink);border-top-color:var(--blue);color:var(--ink);text-decoration:none}
.ac-usage h3{font-size:1.25rem;font-weight:600;margin:0}
.ac-usage p{font-size:.875rem;line-height:1.5;color:var(--ink2);margin:0}
.ac-usage .ac-usage-reserve{font-size:.75rem;color:var(--warn);border-left:3px solid var(--warnl);padding-left:8px;line-height:1.4}
.ac-usage .mono{font-size:.8125rem;margin-top:auto}
.ac-dev{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26.25rem),1fr));gap:56px;align-items:start}
.ac-dev-d pre{margin:0;background:var(--nuit3);border:1px solid var(--nuitl);padding:24px;font-size:.84375rem;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;min-height:14.375rem}
.ac-dev-d .onglet-panneau p{font-size:.875rem;line-height:1.6;color:var(--nuitt);margin:18px 0 0}
.ac-surfaces{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;font:400 .75rem var(--mono)}
.nuit .ac-surfaces a{color:var(--nuits);border:1px solid var(--nuitl);padding:6px 10px;text-decoration:none}
.nuit .ac-surfaces a:hover{color:#fff;border-color:var(--nuits)}
.ac-deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26.25rem),1fr));gap:56px;align-items:start}
#llm .ac-deux{align-items:center}
.ac-puces{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.ac-puce-outil{display:inline-flex;align-items:center;gap:8px;background:var(--bg);padding:8px 12px;font-size:.875rem;font-weight:500}
.ac-puce-outil svg+svg{margin-left:-4px}
.ac-annuaires{font-size:.8125rem;color:var(--ink2);margin:16px 0 0}
.ac-annuaires a{color:var(--ink2)}
#agents .lien-fleche{margin-top:24px}
.ac-chat{background:var(--bg);padding:24px;display:flex;flex-direction:column;gap:14px}
.ac-chat-q{align-self:flex-end;background:var(--ink);color:#fff;padding:12px 16px;max-width:85%;font-size:.9375rem;line-height:1.5;margin:0}
.ac-chat-r{background:#fff;border:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:12px}
.ac-chat-r ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.75rem;color:var(--ink2)}
.ac-chat-r li{display:flex;justify-content:space-between;gap:12px}
.ac-chat-r li.total{border-top:1px solid var(--line2);padding-top:6px;color:var(--blue)}
.ac-chat-r p{font-size:.9375rem;line-height:1.55;margin:0}
.ac-chat-note{font-size:.75rem;color:var(--ink2);margin:0}
.ac-etapes{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--nuitl)}
.ac-etapes li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--nuitl)}
.ac-etapes .mono{font-size:.8125rem;color:var(--blue2)}
.ac-etapes b{font-weight:600;font-size:1rem}
.ac-etapes p{font-size:.875rem;color:var(--nuitt);margin:4px 0 0}
#llm .btn{margin-top:28px}
.ac-schema{display:flex;flex-direction:column;align-items:center}
.ac-schema-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.ac-schema-tuiles div{border:1px solid var(--nuitl);background:var(--nuit3);padding:16px 12px;text-align:center;min-width:0}
.ac-schema-tuiles svg{display:block;margin:0 auto 10px}
.ac-schema-tuiles i{width:28px;height:28px;margin:0 auto 10px;border:1.5px solid var(--blue2);display:flex;align-items:center;justify-content:center;font:500 .625rem var(--mono);font-style:normal;color:var(--nuits)}
.ac-schema-tuiles b{display:block;font-weight:600;font-size:.875rem}
.ac-schema-tuiles span{display:block;font-size:.6875rem;color:var(--nuits);margin-top:4px}
.ac-schema-trait{width:1px;height:36px;background:var(--blue2)}
.ac-schema-sirenic{background:#fff;color:var(--ink);padding:18px 24px;width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ac-schema-sirenic .brand{color:var(--ink)}
.ac-schema-sirenic .brand::after{background:var(--blue)}
.ac-schema-sirenic .mono{font-size:.75rem;color:var(--ink2)}
.ac-schema-sources{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;font-size:.75rem;color:var(--nuitt)}
.ac-schema-sources span{border:1px solid var(--nuitl);padding:6px 10px}
.ac-workflows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:16px;margin-top:40px}
.ac-wf{background:#fff;border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:10px}
.ac-wf-tags{font-size:.75rem;color:var(--ink2);margin:0}
.ac-wf h3{font-size:1.125rem;font-weight:600;margin:0;line-height:1.3}
.ac-wf-pied{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:auto;padding-top:10px;font-size:.875rem}
.ac-wf-liens{display:flex;gap:14px}
.ac-wf-liens a{font-weight:600}
.faq-liste{border-top:1px solid var(--line)}
.faq-liste details{border:0;border-bottom:1px solid var(--line);background:none;margin:0;padding:18px 0}
.faq-liste summary{display:block;min-height:0;padding:0 0 0 22px}
.faq-liste summary::after{content:"";right:auto;left:0;top:.42em;width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--ink)}
.faq-liste details[open] summary::after{content:"";transform:rotate(90deg)}
.faq-liste summary h3{display:inline;font-size:1.0625rem;font-weight:600;margin:0}
.faq-liste p{font-size:.9375rem;line-height:1.6;color:var(--ink2);margin:12px 0 0 22px}

.of-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:16px;margin-top:40px}
.of-mode{border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}
.of-mode>div{padding:26px 24px;display:flex;flex-direction:column;gap:12px}
.of-mode .mono{font-size:.75rem;color:var(--ink2);margin:0}
.of-mode h3{font-size:1.5rem;font-weight:600;margin:0}
.of-mode p{font-size:.9375rem;line-height:1.55;color:var(--ink2);margin:0}
.of-mode .tick{margin:8px 0 0;font-size:.875rem}
.of-mode-lien{display:block;border-top:1px solid var(--line);color:var(--ink);padding:16px 24px;font-weight:600;font-size:.9375rem;text-decoration:none}
.of-mode-lien:hover{background:var(--bg);color:var(--ink);text-decoration:none}
.of-mode-lien.plein{background:var(--ink);color:#fff;border-top-color:var(--ink)}
.of-mode-lien.plein:hover{background:var(--blue);color:#fff}
.of-simu{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26.25rem),1fr));gap:56px;align-items:start}
.of-usages{display:flex;flex-direction:column;gap:8px;margin-top:28px}
.of-usage{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:14px 16px;cursor:pointer;font-weight:600;font-size:.9375rem}
.of-usage .mono{font-weight:400;font-size:.8125rem}
/* Sans :has(), le bouton radio reste visible : on voit toujours quel usage est coché. */
@supports selector(:has(*)){.of-usage input{position:absolute;opacity:0;pointer-events:none}.of-usage:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}.of-usage:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}}
.of-calcul{background:#fff;border:1px solid var(--line);box-shadow:0 24px 48px -24px rgba(11,29,77,.25)}
.of-calcul-volume{padding:24px;border-bottom:1px solid var(--line2)}
.of-calcul-volume label{display:flex;justify-content:space-between;gap:12px;font-size:.875rem;color:var(--ink2)}
.of-calcul-volume strong{color:var(--ink)}
.of-calcul-volume input{width:100%;margin-top:14px;accent-color:var(--blue)}
.of-calcul-detail{padding:24px;font-size:.8125rem;color:var(--ink2)}
.of-calcul-detail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.of-calcul-detail li,.of-calcul-detail p{display:flex;justify-content:space-between;gap:12px}
.of-calcul-detail p{border-top:1px solid var(--line2);padding-top:8px;margin:8px 0 0;color:var(--blue)}
.of-calcul-total{padding:24px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.of-calcul-total div p{font-size:.8125rem;color:var(--nuits);margin:0}
.of-calcul-total strong{display:block;font-size:2.5rem;font-weight:600;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
.of-calcul-total>p{font-size:.8125rem;color:var(--nuitt);max-width:13.75rem;line-height:1.5;margin:0}
.of-grille{margin-top:32px}
.filtre-radio{position:absolute;opacity:0;pointer-events:none}
.of-grille>label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;margin:0 8px 8px 0;cursor:pointer;font-size:.875rem;font-weight:500}
.of-grille>label .mono{font-size:.75rem;color:var(--ink2)}
.of-grille>.filtre-radio:checked+label{background:var(--ink);border-color:var(--ink);color:#fff}
.of-grille>.filtre-radio:checked+label .mono{color:var(--nuitt)}
.of-grille>.filtre-radio:focus-visible+label{outline:3px solid var(--blue);outline-offset:2px}
/* Les colonnes de la maquette (donnée, route, prix, gratuit : 2fr, 1,4fr,
   110 px, 90 px), plus l'exemple. Largeurs fixes à partir de 900 px ; entre 620
   et 900 px le navigateur les répartit ; en dessous, chaque ligne est une carte. */
.of-grille table{margin-top:12px;border-top:2px solid var(--ink)}
@media(min-width:900px){.of-grille table{table-layout:fixed}.of-grille col.c-donnee{width:42%}.of-grille col.c-route{width:33%}.of-grille col.c-prix{width:10%}.of-grille col.c-gratuit{width:8%}.of-grille col.c-exemple{width:7%}}
@media(min-width:620px){.of-grille th,.of-grille td{padding-right:16px}.of-grille th:last-child,.of-grille td:last-child{padding-right:0}.of-grille th.r+th.r,.of-grille td.r+td.r{padding-left:0}.of-grille td{vertical-align:middle}}
.of-grille th{padding-top:12px}
.of-grille td{font-size:.875rem}
.of-grille td.b a{color:var(--ink);text-decoration:none}
.of-grille td.b a:hover{color:var(--blue);text-decoration:underline}
.of-grille td.route code{background:none;padding:0;font-size:.78125rem;color:var(--ink2);overflow-wrap:break-word}
.of-grille td.prix{font-family:var(--mono)}
.of-grille td.gratuit{font-size:.78125rem;color:var(--ink2);white-space:nowrap}
.of-grille td.gratuit.ok{color:var(--okt)}
.of-grille td.exemple{font-size:.78125rem;white-space:nowrap}
.of-grille>#gf-1:checked~table tbody tr:not([data-f="1"]),.of-grille>#gf-2:checked~table tbody tr:not([data-f="2"]),.of-grille>#gf-3:checked~table tbody tr:not([data-f="3"]),.of-grille>#gf-4:checked~table tbody tr:not([data-f="4"]),.of-grille>#gf-5:checked~table tbody tr:not([data-f="5"]),.of-grille>#gf-6:checked~table tbody tr:not([data-f="6"]),.of-grille>#gf-7:checked~table tbody tr:not([data-f="7"]),.of-grille>#gf-8:checked~table tbody tr:not([data-f="8"]),.of-grille>#gf-9:checked~table tbody tr:not([data-f="9"]),.of-grille>#gf-10:checked~table tbody tr:not([data-f="10"]),.of-grille>#gf-11:checked~table tbody tr:not([data-f="11"]),.of-grille>#gf-12:checked~table tbody tr:not([data-f="12"]),.of-grille>#gf-13:checked~table tbody tr:not([data-f="13"]),.of-grille>#gf-14:checked~table tbody tr:not([data-f="14"]){display:none}
.of-note{font-size:.8125rem;color:var(--ink2);margin:16px 0 0;max-width:60rem;line-height:1.55}
.of-engagements{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));border-top:1px solid var(--nuitl)}
.of-engagements li{padding:24px 24px 24px 0;border-bottom:1px solid var(--nuitl)}
.of-engagements .mono{font-size:.8125rem;color:var(--blue2)}
.of-engagements b{display:block;font-weight:600;font-size:1.0625rem;margin-top:10px}
.of-engagements p{font-size:.875rem;line-height:1.55;color:var(--nuitt);margin:6px 0 0}

.ref-tete .dedans{padding-top:28px;padding-bottom:32px}
.ref-tete nav.fil{margin:0 0 10px}
.ref-tete .eyebrow{margin:0 0 6px}
.ref-tete h1{font-size:clamp(1.75rem,3vw,2.375rem);letter-spacing:-.015em;margin:0;max-width:52rem}
.ref-chapeau{margin:10px 0 0;font-size:.9375rem;line-height:1.6;color:var(--ink2);max-width:46rem}
.ref-surfaces{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;font-size:.75rem}
.ref-surfaces>*{white-space:nowrap;border:1px solid var(--line);background:#fff;padding:6px 10px;color:var(--ink);text-decoration:none}
.ref-surfaces a:hover{border-color:var(--ink);text-decoration:none}
.ref{display:grid;grid-template-columns:minmax(0,1fr);padding-top:0;padding-bottom:72px}
.ref-article{min-width:0;padding:32px 0 0}
.ref-nav{padding:24px 0 40px;border-top:1px solid var(--line2)}
@media(min-width:960px){.ref{grid-template-columns:18rem minmax(0,1fr);grid-template-areas:"nav article"}.ref-nav{grid-area:nav;border-top:0;border-right:1px solid var(--line2);padding:24px 20px 40px 0;position:sticky;top:0;max-height:100vh;overflow-y:auto;align-self:start}.ref-article{grid-area:article;padding:32px 0 0 36px}}
.ref-familles{list-style:none;margin:0;padding:0}
.ref-familles>li{border-top:1px solid var(--line2)}
.ref-familles>li:first-child{border-top:0}
.ref-famille{display:flex;align-items:baseline;gap:8px;padding:9px 0;color:var(--ink);font:600 .8125rem/1.35 var(--sans);text-decoration:none}
.ref-famille .mono{margin-left:auto;font-weight:400;color:var(--ink2)}
.ref-famille:hover{color:var(--blue);text-decoration:none}
.ref-ouverte>ul{list-style:none;margin:0 0 10px;padding:0}
.ref-ouverte li a{display:flex;align-items:baseline;gap:8px;padding:6px 8px;border-left:2px solid transparent;color:var(--ink);font-size:.84375rem;text-decoration:none}
.ref-ouverte li a span:first-child{min-width:0}
.ref-ouverte li a .mono{margin-left:auto;font-size:.71875rem;color:var(--ink2);white-space:nowrap;flex-shrink:0}
.ref-ouverte li a:hover{background:var(--bg);text-decoration:none}
.ref-ouverte li a[aria-current=page]{border-left-color:var(--blue);background:var(--pale);font-weight:600}
/* Le contenu d'une page de référencement hors de la colonne main.wrap : les
   mêmes marges que les articles. */
.contenu>h2{margin:34px 0 .5em;font-size:1.5rem;font-weight:600}
.contenu>h2:first-child{margin-top:0}
.contenu>h3{margin:22px 0 .4em}
.contenu>table,.contenu>ul,.contenu>ol{margin:0 0 1.2em}
.contenu>ul,.contenu>ol{padding-left:1.2rem}
.contenu>ul li,.contenu>ol li{margin:.3rem 0}
.contenu>table th,.contenu>table td{font-size:.875rem}
.contenu p code,.contenu li code{overflow-wrap:anywhere}
.contenu>p{max-width:48rem}
.ref-fiche{border:1px solid var(--line);margin:0 0 8px}
.ref-methode{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:16px 18px;border-bottom:1px solid var(--line2)}
.ref-methode .mono{font-size:.75rem;font-weight:500;background:var(--okbg);color:var(--okt);padding:4px 8px}
.ref-methode code{background:none;padding:0;font-size:.875rem;overflow-wrap:anywhere}
.ref-faits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.ref-faits div{padding:14px 18px;border-right:1px solid var(--line2);min-width:0}
.ref-faits div:last-child{border-right:0}
.ref-faits dt{font-size:.75rem;color:var(--ink2)}
.ref-faits dd{margin:4px 0 0;font-size:.9375rem;font-weight:500;overflow-wrap:anywhere}
@media(max-width:560px){.ref-faits{grid-template-columns:1fr}.ref-faits div{border-right:0;border-bottom:1px solid var(--line2)}}
.ref-facture{list-style:none;margin:0;padding:6px 18px 12px;border-top:1px solid var(--line2);font-size:.875rem}
.ref-facture li{display:flex;gap:14px;padding:6px 0}
.ref-facture code{background:none;padding:0;width:2.25rem;flex-shrink:0}
.ref-facture code.ok{color:var(--okt)}
.ref-facture code.devis{color:var(--blue)}
.ref-facture code.ko{color:var(--bad)}
/* Maquette « Routes » (#331) : la fiche et, à sa droite à partir de 1 280 px,
   le panneau de code (onglets sans script, extrait de réponse clair). */
.ref-haut{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:0 0 12px}
@media(min-width:1280px){.ref-haut{grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:32px;align-items:start}.ref-code{position:sticky;top:20px}}
.ref-haut-g{min-width:0}
.ref-titre{margin:0;padding:14px 18px 4px;border-top:1px solid var(--line2);font-size:.9375rem;font-weight:600;text-align:left}
.ref-titre+.ref-facture{border-top:0;padding-top:0}
.ref-params{margin:0 0 4px}
.ref-params th,.ref-params td{font-size:.8125rem}
.ref-params th:first-child,.ref-params td:first-child{padding-left:18px}
.ref-params code{background:none;padding:0;overflow-wrap:anywhere}
.ref-params .muet{color:var(--ink2)}
.ref-code{min-width:0}
.rc{position:absolute;opacity:0;pointer-events:none}
.rc-tete{display:flex;flex-wrap:wrap;background:var(--nuit);border-bottom:1px solid var(--nuitl)}
.rc-tete label{cursor:pointer;padding:12px 14px;font:500 .8125rem var(--mono);color:var(--nuits)}
.rc-tete label:hover{color:#fff}
.ref-code>.rc:nth-of-type(1):checked~.rc-tete label:nth-of-type(1),.ref-code>.rc:nth-of-type(2):checked~.rc-tete label:nth-of-type(2),.ref-code>.rc:nth-of-type(3):checked~.rc-tete label:nth-of-type(3),.ref-code>.rc:nth-of-type(4):checked~.rc-tete label:nth-of-type(4),.ref-code>.rc:nth-of-type(5):checked~.rc-tete label:nth-of-type(5){color:#fff;box-shadow:inset 0 -2px 0 var(--blue2)}
.ref-code>.rc:nth-of-type(1):focus-visible~.rc-tete label:nth-of-type(1),.ref-code>.rc:nth-of-type(2):focus-visible~.rc-tete label:nth-of-type(2),.ref-code>.rc:nth-of-type(3):focus-visible~.rc-tete label:nth-of-type(3),.ref-code>.rc:nth-of-type(4):focus-visible~.rc-tete label:nth-of-type(4),.ref-code>.rc:nth-of-type(5):focus-visible~.rc-tete label:nth-of-type(5){outline:2px solid #fff;outline-offset:-4px}
.rc-panneau{display:none}
.ref-code>.rc:nth-of-type(1):checked~.rc-corps .rc-panneau:nth-of-type(1),.ref-code>.rc:nth-of-type(2):checked~.rc-corps .rc-panneau:nth-of-type(2),.ref-code>.rc:nth-of-type(3):checked~.rc-corps .rc-panneau:nth-of-type(3),.ref-code>.rc:nth-of-type(4):checked~.rc-corps .rc-panneau:nth-of-type(4),.ref-code>.rc:nth-of-type(5):checked~.rc-corps .rc-panneau:nth-of-type(5){display:block}
.rc-corps pre,.ref-reponse pre{white-space:pre-wrap;word-break:break-all}
.rc-corps pre{margin:0;max-height:22rem;overflow:auto}
.ref-reponse{border:1px solid var(--line);border-top:0;background:#fff}
.ref-reponse-tete{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin:0;padding:10px 16px;font-size:.75rem;color:var(--ink2);border-bottom:1px solid var(--line2)}
.ref-reponse pre{margin:0;background:var(--bg);color:var(--ink);max-height:24rem;overflow:auto}
.ref-reponse-note{margin:0;padding:10px 16px 0;font-size:.75rem;line-height:1.5;color:var(--ink2)}
.ref-reponse-lien{display:block;padding:12px 16px;font-weight:600;font-size:.875rem}
ul.liens.ref-liste{list-style:none;padding-left:0;margin:0 0 1.2em}
.ref-liste li{margin:0;padding:12px 0;border-bottom:1px solid var(--line2)}
.ref-liste li a{font-weight:600;text-decoration:none}
.ref-ligne{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:4px 0 2px}
.ref-ligne code{background:none;padding:0;font-size:.8125rem;color:var(--ink2);overflow-wrap:anywhere}
.ref-ligne .mono{font-size:.8125rem}
.ref-liste .muet{display:block;font-size:.875rem;line-height:1.5}

.onglets.clair .onglet-etiquette{border-color:var(--line);color:var(--ink);flex-direction:row;justify-content:space-between;align-items:baseline;padding:14px 12px}
.onglets.clair .onglet-etiquette span{color:var(--ink2)}
.onglets.clair>.onglet-radio:checked~* .onglet-etiquette{background:transparent}
.onglets.clair>.onglet-radio:nth-of-type(1):checked~* .onglet-etiquette:nth-of-type(1),.onglets.clair>.onglet-radio:nth-of-type(2):checked~* .onglet-etiquette:nth-of-type(2),.onglets.clair>.onglet-radio:nth-of-type(3):checked~* .onglet-etiquette:nth-of-type(3),.onglets.clair>.onglet-radio:nth-of-type(4):checked~* .onglet-etiquette:nth-of-type(4),.onglets.clair>.onglet-radio:nth-of-type(5):checked~* .onglet-etiquette:nth-of-type(5),.onglets.clair>.onglet-radio:nth-of-type(6):checked~* .onglet-etiquette:nth-of-type(6),.onglets.clair>.onglet-radio:nth-of-type(7):checked~* .onglet-etiquette:nth-of-type(7),.onglets.clair>.onglet-radio:nth-of-type(8):checked~* .onglet-etiquette:nth-of-type(8){background:var(--pale);border-color:var(--line2);font-weight:600;box-shadow:inset 3px 0 0 var(--blue)}
.cn-tete{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26.25rem),1fr));gap:48px;align-items:center}
.cn-url{background:#fff;color:var(--ink)}
.cn-url-tete{margin:0;padding:14px 18px;border-bottom:1px solid var(--line2);font-size:.8125rem;color:var(--ink2)}
.cn-url-code{margin:0;padding:18px}
.cn-url-code code{background:none;padding:0;font-size:.9375rem;overflow-wrap:anywhere;user-select:all}
.cn-faits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--line2);font-size:.8125rem}
.cn-faits div{padding:14px 18px;border-left:1px solid var(--line2);min-width:0}
.cn-faits div:first-child{border-left:0}
.cn-faits dt{color:var(--ink2)}
.cn-faits dd{margin:2px 0 0;font-weight:600;font-size:1.0625rem}
.cn-install{display:grid;grid-template-columns:minmax(0,1fr);gap:24px 40px;margin-top:36px;align-items:start}
@media(min-width:900px){.cn-install{grid-template-columns:minmax(0,21rem) minmax(0,1fr)}}
.cn-install .onglets-liste{margin:0;gap:0;border-top:2px solid var(--ink)}
.cn-install .onglet-etiquette{border:0;border-bottom:1px solid var(--line2)}
.cn-panneaux h3{font-size:1.5rem;margin:0}
.cn-etapes{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.cn-etapes li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--line2);font-size:.9375rem;line-height:1.55}
.cn-etapes .mono{font-size:.8125rem;color:var(--blue)}
.cn-panneaux pre{margin:20px 0 0}
.cn-note{font-size:.875rem;line-height:1.55;color:var(--ink2);margin:14px 0 0}
.onglet-panneau .lien-fleche{display:inline-block;margin-top:16px}
.cn-date{font-size:.8125rem;color:var(--ink2);margin:14px 0 0}
.cn-auth{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:16px;margin-top:36px}
.cn-auth-carte{background:#fff;border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:12px}
.cn-auth-carte .mono{font-size:.75rem;color:var(--ink2);margin:0}
.cn-auth-carte .tick{margin:0}
.cn-auth-carte .btn{align-self:flex-start;margin-top:auto}
.cn-outils{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16.25rem),1fr));gap:16px;margin-top:36px}
.cn-outil{background:var(--bg);border:1px solid var(--line);padding:22px}
.cn-outil b{font-size:1.0625rem}
.cn-outil p{font-size:.78125rem;color:var(--ink2);line-height:1.9;margin:10px 0 0;overflow-wrap:anywhere}
.cn-note{font-size:.875rem;color:var(--ink2);margin:16px 0 0;max-width:48rem}
.cn-h3{font-size:1.25rem;margin:48px 0 0}
.cn-prompts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:16px;margin-top:20px}
.cn-prompt{border:1px solid var(--line);border-top:3px solid var(--blue);padding:20px;display:flex;flex-direction:column;gap:10px}
.cn-prompt p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--ink2)}
.cn-prompt p.mono{font-size:.75rem;overflow-wrap:anywhere;margin-top:auto}
.cn-cout{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26.25rem),1fr));gap:56px;align-items:start}
.cn-cout h3{font-size:1.25rem;margin:0}
.cn-limites{margin:16px 0 0;padding-left:1.1rem;color:var(--nuitt);font-size:.9375rem;line-height:1.55}
.cn-limites li{margin:.4rem 0}
.cn-actions{margin:24px 0 0}

.nuit nav.fil,.nuit nav.fil a{color:var(--nuits)}
.ar-tete nav.fil{margin:0 0 18px}
.ar-page{padding-top:48px}
.ar-une{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26.25rem),1fr));border:1px solid var(--line);color:var(--ink);text-decoration:none}
.ar-une:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}
.ar-une-g{background:var(--bg);min-height:16.25rem;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.ar-une-g .mono{font-size:.75rem;color:var(--blue)}
.ar-une-g p{font-size:.8125rem;line-height:1.9;color:var(--ink2);margin:0}
.ar-une-illu{display:block;width:100%;height:auto;max-height:15rem}
.ar-une-d{padding:32px;display:flex;flex-direction:column;gap:14px}
.ar-une-d h2{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;margin:0;text-wrap:balance}
.ar-une-d p{font-size:1rem;line-height:1.6;color:var(--ink2);margin:0}
.ar-meta{font-size:.8125rem;color:var(--ink2);margin-top:auto}
.ar-rubriques{font-size:.9375rem;line-height:1.6;color:var(--ink2);margin:40px 0 20px;max-width:52rem}
.ar-page>label,.wf-page>label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;margin:0 8px 8px 0;cursor:pointer;font-size:.875rem;font-weight:500}
.ar-page>label .mono,.wf-page>label .mono{font-size:.75rem;color:var(--ink2)}
.ar-page>.filtre-radio:checked+label,.wf-page>.filtre-radio:checked+label{background:var(--ink);border-color:var(--ink);color:#fff}
.ar-page>.filtre-radio:checked+label .mono,.wf-page>.filtre-radio:checked+label .mono{color:var(--nuitt)}
.ar-page>.filtre-radio:focus-visible+label,.wf-page>.filtre-radio:focus-visible+label{outline:3px solid var(--blue);outline-offset:2px}
.ar-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21.25rem),1fr));gap:0 32px;margin-top:8px;border-top:1px solid var(--line)}
.ar-article{display:flex;flex-direction:column;gap:10px;padding:26px 0;border-bottom:1px solid var(--line2);color:var(--ink);text-decoration:none}
.ar-article:hover{color:var(--blue);text-decoration:none}
.ar-article .mono{font-size:.75rem;color:var(--blue)}
.ar-article h3{font-size:1.1875rem;line-height:1.3;margin:0;text-wrap:pretty}
.ar-article p{font-size:.90625rem;line-height:1.55;color:var(--ink2);margin:0}
.ar-page>#ar-2:checked~.ar-liste>.ar-article:not(.ar-f2),.ar-page>#ar-3:checked~.ar-liste>.ar-article:not(.ar-f3){display:none}
.ar-reference{font-size:.9375rem;color:var(--ink2);margin:32px 0 88px}
.ar-appel{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:56px;padding-bottom:56px}
.ar-appel h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:0;max-width:35rem}
.wf-tete{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26.25rem),1fr));gap:40px;align-items:end;padding-top:56px;padding-bottom:64px}
.wf-tete .tete-chiffres{margin-top:0;grid-template-columns:repeat(3,minmax(0,1fr))}
.wf-page{padding-top:40px}
.wf-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22.5rem),1fr));gap:16px;margin-top:16px}
.wf-carte{border:1px solid var(--line);display:flex;flex-direction:column;background:#fff}
.wf-carte-corps{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.wf-carte-tete{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:0;font-size:.75rem;color:var(--ink2)}
.wf-carte h2,.wf-carte h3{font-size:1.1875rem;line-height:1.3;margin:0;text-wrap:pretty}
.wf-galerie-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 32px}
.wf-galerie-tete .accroche{max-width:44rem}
.wf-grille-galerie{margin-top:32px}
.wf-carte p{font-size:.90625rem;line-height:1.55;color:var(--ink2);margin:0}
.wf-carte .wf-cout{margin-top:auto;padding-top:10px;font-size:.8125rem;color:var(--ink)}
.wf-carte-pied{display:flex;border-top:1px solid var(--line)}
.wf-carte-pied a{display:flex;align-items:center;gap:8px;padding:13px 18px;font-weight:600;font-size:.875rem;text-decoration:none}
.wf-n8n{flex:1;background:var(--ink);color:#fff}
.wf-n8n:hover{background:var(--blue);color:#fff;text-decoration:none}
.wf-make{color:var(--ink);border-left:1px solid var(--line)}
.wf-make:hover{background:var(--bg);color:var(--ink);text-decoration:none}
.wf-page>#wft-2:checked~.wf-grille>.wf-carte:not(.wt-2),.wf-page>#wft-3:checked~.wf-grille>.wf-carte:not(.wt-3),.wf-page>#wft-4:checked~.wf-grille>.wf-carte:not(.wt-4),.wf-page>#wft-5:checked~.wf-grille>.wf-carte:not(.wt-5),.wf-page>#wft-6:checked~.wf-grille>.wf-carte:not(.wt-6),.wf-page>#wft-7:checked~.wf-grille>.wf-carte:not(.wt-7),.wf-page>#wft-8:checked~.wf-grille>.wf-carte:not(.wt-8),.wf-page>#wft-9:checked~.wf-grille>.wf-carte:not(.wt-9),.wf-page>#wft-10:checked~.wf-grille>.wf-carte:not(.wt-10){display:none}
.wf-note{font-size:.84375rem;line-height:1.55;color:var(--ink2);margin:24px 0 0;max-width:52rem}
.wf-page>.wf-note{margin-bottom:88px}
.wf-etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));border-top:2px solid var(--ink)}
.wf-etapes li{padding:24px 24px 0 0}
.wf-etapes .mono{font-size:.8125rem;color:var(--blue)}
.wf-etapes b{display:block;font-weight:600;font-size:1.0625rem;margin-top:8px}
.wf-etapes p{font-size:.875rem;line-height:1.55;color:var(--ink2);margin:6px 0 0}