/* Sorti de historique.html : script-src et style-src valent 'self'. */
:root{
--ink:#0A1028; --ink2:#16224E; --blue:#497AEA; --blue-l:#7EA5F5;
--green:#55AE60; --green-l:#7ED08A; --red:#E5484D; --amber:#D4A72C;
--text:#E8ECF6; --muted:#A8B4CC; --line:rgba(168,180,204,.22);
--panel:rgba(24,38,88,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0; background:linear-gradient(180deg,#16224E 0%,#0A1028 55%,#0A1028 100%);
background-attachment:fixed; color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:940px; margin:0 auto; padding:0 22px}
a{color:var(--blue-l)}
/* ---------- barre ---------- */
.nav{
display:flex; align-items:center; justify-content:space-between;
padding:20px 0; border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
.brand svg{width:30px; height:30px; flex:none}
.brand b{font-size:19px; font-weight:800; letter-spacing:-.3px}
.brand b span{color:var(--blue)}
.nav a.link{color:var(--muted); text-decoration:none; font-size:15px}
.nav a.link:hover{color:var(--text)}
/* ---------- menu deroulant ---------- */
.menu-zone{position:relative; display:flex; align-items:center; gap:14px}
.menu-bouton{
display:flex; flex-direction:column; justify-content:center; gap:5px;
width:40px; height:40px; padding:0 9px; flex:none;
background:transparent; border:1px solid var(--line);
border-radius:10px; cursor:pointer;
}
.menu-bouton span{
display:block; height:2px; border-radius:2px; background:var(--muted);
transition:transform .18s ease, opacity .18s ease, background .18s ease;
}
.menu-bouton:hover span{background:var(--text)}
.menu-bouton[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-bouton[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-bouton[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{
position:absolute; right:0; top:calc(100% + 12px); z-index:40;
min-width:236px; display:flex; flex-direction:column; padding:8px;
background:#101B3C; border:1px solid var(--line); border-radius:14px;
box-shadow:0 20px 44px rgba(0,0,0,.5);
}
.menu[hidden]{display:none}
.menu a{
color:var(--muted); text-decoration:none; font-size:14.5px;
padding:10px 12px; border-radius:9px; line-height:1.4;
}
.menu a:hover{background:rgba(255,255,255,.07); color:var(--text)}
.menu a[aria-current="page"]{color:var(--text); font-weight:700}
.menu-langues{
margin-top:6px; padding-top:8px;
border-top:1px solid var(--line);
}
.menu-langues summary{
display:flex; align-items:center; justify-content:space-between;
list-style:none; cursor:pointer;
color:var(--muted); font-size:14.5px;
padding:10px 12px; border-radius:9px; line-height:1.4;
}
.menu-langues summary::-webkit-details-marker{display:none}
.menu-langues summary::after{
content:"›"; color:var(--muted); font-size:16px;
transform:rotate(90deg); transition:transform .15s;
}
.menu-langues[open] summary::after{transform:rotate(-90deg)}
.menu-langues summary:hover{background:rgba(255,255,255,.07); color:var(--text)}
.menu-langues[open] summary{color:var(--text)}
.menu-langues-options{display:flex; gap:6px; padding:6px 6px 2px}
.menu-langues-options button{
flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
background:transparent; border:1px solid var(--line); border-radius:8px;
color:var(--muted); font-size:13px; padding:7px 0; cursor:pointer;
}
.menu-langues-options button:hover{color:var(--text)}
.menu-langues-options button.actif{color:var(--text); border-color:var(--text); font-weight:700}
.menu-langues .drapeau{font-size:14px; line-height:1}
/* ---------- section ---------- */
section{padding:56px 0; border-top:1px solid var(--line)}
h2{font-size:clamp(21px,3.2vw,27px); margin:0 0 8px; letter-spacing:-.4px}
.bouton{
display:inline-block; border:1px solid var(--line); background:transparent;
color:var(--text); border-radius:10px; padding:9px 16px;
font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit;
}
.bouton:hover{border-color:var(--blue-l)}
.hint{color:var(--muted); font-size:13px; margin:8px 0 0}
.attente{text-align:center; color:var(--muted); padding:40px 0}
.hidden{display:none !important}
.compte{
max-width:520px; margin:0 auto;
background:var(--panel); border:1px solid var(--line);
border-radius:14px; padding:18px 20px;
}
.recherche{
width:100%; padding:13px 14px; border-radius:10px; font-size:15px;
background:rgba(10,16,40,.6); border:1px solid var(--line); color:var(--text);
margin-bottom:16px; font-family:inherit;
}
.recherche::placeholder{color:var(--muted)}
/* Chrome/Safari ajoutent une croix d'effacement native a `type="search"` :
laissee telle quelle, sobre, plutot que masquee par -webkit-appearance. */
#historique-plus{display:block; margin:14px auto 0}
/* ---------- accordeon ---------- */
.hist-entree + .hist-entree{border-top:1px solid var(--line)}
.hist-item{display:flex; align-items:flex-start; gap:10px; padding:13px 0; cursor:pointer}
.hist-item:hover{opacity:.85}
.hist-point{flex:none; width:9px; height:9px; border-radius:50%; margin-top:6px}
.hist-safe{background:var(--green)}
.hist-warning{background:var(--amber)}
.hist-danger{background:var(--red)}
.hist-corps{flex:1; min-width:0}
.hist-modele{display:block; font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hist-meta{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.hist-chevron{
flex:none; width:9px; height:9px; margin-top:8px;
border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
transform:rotate(45deg); transition:transform .2s ease;
}
.hist-entree.ouvert .hist-chevron{transform:rotate(-135deg); margin-top:11px}
/* max-height anime plutot que grid-template-rows : le contenu genere par
construireRapportHtml() a une hauteur inconnue a l'avance, calculee en
JS via scrollHeight juste avant l'ouverture. */
.hist-detail{max-height:0; overflow:hidden; transition:max-height .28s ease}
.hist-entree.ouvert .hist-detail{padding-bottom:16px}
/* Detail d'un element de l'historique : meme rendu (js/rapport-commun.js)
que le resultat d'une nouvelle verification sur l'accueil, avec les
memes regles reprises de css/index.css (feuille .outil, non partagee
ici faute d'etape de build). */
.hist-detail .verdict{border-radius:12px; padding:15px 16px; margin:4px 0 14px; border:1px solid}
.hist-detail .verdict.safe{color:var(--green-l); background:rgba(85,174,96,.13); border-color:rgba(85,174,96,.45)}
.hist-detail .verdict.warning{color:#F0D68A; background:rgba(212,167,44,.13); border-color:rgba(212,167,44,.45)}
.hist-detail .verdict.danger{color:#FFB4B4; background:rgba(229,72,77,.13); border-color:rgba(229,72,77,.45)}
.hist-detail .verdict b{display:block; font-size:17px; margin-bottom:2px}
.hist-detail .verdict span{color:var(--muted); font-size:13.5px}
.hist-detail .consequence{font-size:15px; font-weight:600; text-align:center; margin:0 0 14px; line-height:1.4}
.hist-detail .consequence.danger{color:var(--red)}
.hist-detail .consequence.warning{color:var(--amber)}
.hist-detail .decompte{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.hist-detail .decompte-barre{flex:1; display:flex; gap:4px; height:6px}
.hist-detail .decompte-segment{flex:1; border-radius:99px; background:var(--line)}
.hist-detail .decompte-segment-ok{background:var(--green)}
.hist-detail .decompte-segment-attention{background:var(--amber)}
.hist-detail .decompte-segment-danger{background:var(--red)}
.hist-detail .decompte-texte{color:var(--muted); font-size:13px; font-weight:700; white-space:nowrap}
.hist-detail .grille{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px}
.hist-detail .pilier{background:rgba(10,16,40,.4); border:1px solid var(--line); border-radius:12px; padding:12px}
.hist-detail .pilier-ok{border-color:rgba(85,174,96,.4)}
.hist-detail .pilier-attention{border-color:rgba(212,167,44,.45); background:rgba(212,167,44,.10)}
.hist-detail .pilier-danger{border-color:rgba(229,72,77,.5); background:rgba(229,72,77,.10)}
.hist-detail .pilier-haut{display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:6px}
.hist-detail .pilier-nom{font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted)}
.hist-detail .pilier-rond{flex:none; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; background:var(--line); color:var(--muted)}
.hist-detail .pilier-rond-ok{background:rgba(85,174,96,.22); color:var(--green-l)}
.hist-detail .pilier-rond-attention{background:rgba(212,167,44,.22); color:var(--amber)}
.hist-detail .pilier-rond-danger{background:rgba(229,72,77,.22); color:#FFB4B4}
.hist-detail .pilier-etat{font-size:14.5px; font-weight:800; margin-bottom:3px}
.hist-detail .pilier-quoi{font-size:12px; line-height:1.4; color:var(--muted)}
.hist-detail .avert-sim{margin-top:12px; border-radius:12px; padding:12px 14px; font-size:13.5px; line-height:1.5;
color:#F0D68A; background:rgba(212,167,44,.13); border:1px solid rgba(212,167,44,.45)}
.hist-detail dl{margin:0; display:grid; grid-template-columns:1fr auto; gap:0}
.hist-detail dt, .hist-detail dd{margin:0; padding:10px 0; border-bottom:1px solid rgba(168,180,204,.14); font-size:14.5px}
.hist-detail dt{color:var(--muted)}
.hist-detail dd{text-align:right; font-weight:600}
.hist-detail dl > :nth-last-child(-n+2){border-bottom:0}
footer{
padding:34px 0 56px; border-top:1px solid var(--line);
color:var(--muted); font-size:14px; text-align:center;
}
footer a{margin:0 10px; display:inline-block}
.u-border-top-0{border-top:0 !important}
.u-margin-0-0-16px{margin:0 0 16px !important}
.u-margin-top-14px{margin-top:14px !important}
.u-text-align-center{text-align:center !important}