:root{
  --charbon:#33343A; --orange:#F5AB35; --orange-texte:#B5740F;
  --papier:#FFFFFF; --panneau:#F4F4F5; --trait:#E4E4E7; --texte:#2B2C31; --doux:#62646C; --pale:#9A9CA3;
  --vert:#2F855A; --ambre:#C0661A; --rouge:#C53030;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--texte);font:400 16px/1.55 var(--sans)}
a{color:var(--orange-texte)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}

/* Bande du haut */
.bande{background:var(--charbon);color:#fff;padding:20px 16px 40px}
.bande-in{max-width:948px;margin:0 auto}
.entete{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:34px}
.marque{display:flex;align-items:center;gap:14px;text-decoration:none;color:#B9BAC0;font-size:14px}
.marque img{height:30px;width:auto;display:block}
.marque span{border-left:1px solid #55565D;padding-left:14px}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{color:#D7D8DC;text-decoration:none;font-size:15px;padding:6px 10px;border-radius:7px}
nav a:hover{background:#45464D;color:#fff}
nav a[aria-current="page"]{color:var(--orange)}
h1{font-size:clamp(30px,5vw,46px);line-height:1.08;letter-spacing:-.02em;margin:0 0 10px;font-weight:800}
.chapeau{color:#C9CAD0;max-width:62ch;margin:0 0 26px;font-size:17px}
form.recherche{display:flex;gap:10px;flex-wrap:wrap}
.champ{flex:1 1 380px;display:flex;align-items:center;background:#fff;border-radius:10px;padding:0 6px 0 18px}
.champ:focus-within{box-shadow:0 0 0 3px var(--orange)}
.champ input,.champ select{border:0;outline:0;font:500 clamp(18px,2.6vw,24px)/1 var(--mono);color:var(--charbon);
  padding:18px 0;min-width:0;background:transparent}
.champ input{flex:1}
.champ input::placeholder{color:#A6A8AF}
.champ.petit{flex:0 1 200px}
.champ.petit input,.champ.petit select{font-size:17px;width:100%}
button.verifier{background:var(--orange);color:var(--charbon);border:0;border-radius:10px;padding:0 28px;
  font:700 18px var(--sans);cursor:pointer;min-height:60px}
button.verifier:hover{background:#FFB948}
button.verifier[disabled]{opacity:.6;cursor:progress}
.aide{color:#9FA0A7;font-size:14px;margin:12px 0 0}

main{max-width:980px;margin:0 auto;padding:30px 16px 10px}
.etat{color:var(--doux);margin:6px 0 24px;min-height:1.5em}
.etat:empty{margin:0;min-height:0}
.erreur{background:#FDECEC;color:#8B1E1E;border-radius:8px;padding:14px 16px;margin-bottom:24px}
h2{font-size:24px;letter-spacing:-.01em;margin:0 0 6px}
.sous{color:var(--doux);margin:0 0 18px;max-width:70ch}

/* Verdicts */
.verdicts{display:grid;border-top:2px solid var(--charbon);margin-bottom:38px}
.verdict{display:grid;grid-template-columns:150px 1fr;gap:6px 22px;padding:16px 0;border-bottom:1px solid var(--trait)}
.verdict h3{margin:0;font-size:17px;font-weight:700}
.puces{display:flex;flex-direction:column;gap:6px}
.puce{display:flex;gap:10px;align-items:baseline}
.puce i{flex:none;width:10px;height:10px;border-radius:50%;transform:translateY(1px);background:var(--pale)}
.puce.ok i{background:var(--vert)} .puce.att i{background:var(--ambre)} .puce.mal i{background:var(--rouge)}
.puce small{color:var(--doux);display:block;font-size:14px}
.puce .reco{display:block;margin-top:4px;font-size:14px;color:var(--texte)}
.puce .reco code{font:400 13.5px/1.45 var(--mono);background:var(--panneau);padding:2px 6px;border-radius:4px;word-break:break-all;cursor:copy}

/* Registre : le code en grosse lettre orange dans la marge (repris pour la liste des outils) */
.registre{margin-bottom:40px}
.groupe{display:grid;grid-template-columns:110px 1fr;gap:4px 22px;padding:16px 0;border-top:1px solid var(--trait)}
.groupe:last-child{border-bottom:1px solid var(--trait)}
.type{font:800 30px/1 var(--sans);color:var(--orange-texte);letter-spacing:-.02em;padding-top:2px}
.type small{display:block;font:500 13px/1.3 var(--sans);color:var(--doux);letter-spacing:0;margin-top:6px}
.expli{color:var(--doux);font-size:15px;margin:0 0 8px}
.valeurs{list-style:none;margin:0;padding:0}
.valeurs li{display:grid;grid-template-columns:150px minmax(0,1fr) 64px;column-gap:14px;align-items:baseline;padding:5px 0}
.valeurs code,code.copiable{font:400 14.5px/1.45 var(--mono);color:var(--texte);word-break:break-all;cursor:copy;
  border-radius:4px;padding:1px 3px;margin:-1px -3px}
.valeurs code:hover,code.copiable:hover{background:var(--panneau)}
.valeurs .ttl{text-align:right;color:var(--pale);font-size:13px;white-space:nowrap}
.vide{color:var(--pale);font-style:italic;font-size:15px}
.hote{color:var(--doux);font-size:13px;overflow-wrap:anywhere}
.valeurs:first-child{margin-top:4px}   /* première valeur au niveau du gros code orange */

/* Outils (accueil) */
.outils{margin:0 0 40px;padding:0;list-style:none}
.outil{display:grid;grid-template-columns:140px 1fr auto;gap:6px 26px;align-items:center;padding:22px 0;border-top:1px solid var(--trait)}
.outil:last-child{border-bottom:1px solid var(--trait)}
.outil .type{font-size:38px}
.outil h3{margin:0 0 4px;font-size:20px}
.outil p{margin:0;color:var(--doux);max-width:60ch}
.outil a.aller{font-weight:700;text-decoration:none;color:var(--charbon);border:2px solid var(--charbon);border-radius:9px;padding:9px 18px;white-space:nowrap}
.outil a.aller:hover{background:var(--charbon);color:#fff}

table{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:40px}
th,td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--trait);vertical-align:top}
th{font-weight:600;color:var(--doux);font-size:14px;border-bottom:2px solid var(--charbon)}
td code{font:400 13.5px/1.45 var(--mono);word-break:break-all}
.groupe table{margin:10px 0 0}
.pareil{color:var(--vert);font-weight:600;white-space:nowrap} .diff{color:var(--ambre);font-weight:600;white-space:nowrap}
.tableau{overflow-x:auto}
.ip{color:var(--pale);font-size:13px}

.appel{background:var(--charbon);color:#fff;border-radius:14px;padding:26px 28px;display:flex;gap:18px 32px;
  flex-wrap:wrap;align-items:center;justify-content:space-between;margin:10px 0 30px}
.appel p{margin:0;max-width:56ch;color:#D7D8DC} .appel strong{color:#fff;font-size:19px;display:block;margin-bottom:4px}
.appel a{background:var(--orange);color:var(--charbon);text-decoration:none;font-weight:700;padding:13px 22px;border-radius:9px;white-space:nowrap}
footer{max-width:980px;margin:0 auto;padding:0 16px 40px;color:var(--pale);font-size:13px}

.copie{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--charbon);color:#fff;
  padding:9px 16px;border-radius:8px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none}
.copie.vu{opacity:1}

@media (max-width:640px){
  .verdict,.groupe{grid-template-columns:1fr}
  .type{font-size:24px} .type small{display:inline;margin-left:8px}
  .outil{grid-template-columns:1fr} .outil .type{font-size:28px} .outil a.aller{justify-self:start}
  button.verifier{flex:1 1 100%} .champ.petit{flex:1 1 100%}
  .valeurs li{grid-template-columns:minmax(0,1fr) auto} .valeurs .hote{grid-column:1/-1} .valeurs .hote:empty{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Identité du domaine : les trois faits qu'on cherche en premier */
.identite{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--charbon);border-bottom:1px solid var(--trait);margin:0 0 40px}
.fait{padding:18px 16px 20px;border-left:1px solid var(--trait);min-width:0}
.fait:first-child{border-left:0;padding-left:0}
.fait .etiquette{display:block;font:600 13px/1.2 var(--mono);color:var(--orange-texte);letter-spacing:.02em;margin-bottom:8px}
.fait strong{display:block;font-size:clamp(17px,1.8vw,20px);line-height:1.15;letter-spacing:-.015em;font-weight:800;color:var(--charbon);margin-bottom:8px;overflow-wrap:anywhere}
.fait small{display:block;color:var(--doux);font-size:13.5px;line-height:1.5;overflow-wrap:anywhere}
.fait strong.mal{color:var(--rouge)} .fait strong.att{color:var(--ambre)}
@media (max-width:760px){
  .identite{grid-template-columns:1fr 1fr}
  .fait{border-left:0;border-top:1px solid var(--trait);padding:14px 12px 14px 0}
  .fait:nth-child(-n+2){border-top:0}
}

/* Problème sur une entrée : discret, en rouge, aligné sur la colonne des valeurs */
.valeurs li.alerte{padding-top:2px}
.alerte .msg{color:var(--rouge);font-size:13.5px;line-height:1.45;padding-left:14px;position:relative}
.alerte .msg::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--rouge)}
@media (max-width:640px){.alerte span:empty{display:none}}
/* Lecture en clair d'une entrée (ex. qui peut envoyer selon le SPF) : discrète, en gris */
.valeurs li.note{padding-top:2px}
.note .msg{color:var(--doux);font-size:13.5px;line-height:1.45}
@media (max-width:640px){.note span:empty{display:none}}
.compte-alertes{color:var(--rouge);font-weight:600} .aucune-alerte{color:var(--vert);font-weight:600}
.concordance{display:block;margin-top:4px;font-weight:700}