@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} .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