/* Thème sombre — fond #0f172a, cartes #1e293b, accent #3b82f6 */
:root {
  --fond: #0f172a; --carte: #1e293b; --bord: #334155;
  --texte: #e2e8f0; --discret: #94a3b8; --accent: #3b82f6;
  --ok: #22c55e; --alerte: #ef4444;
  --ip-texte: #fff; --attention: #f59e0b;
  color-scheme: dark;
}
:root[data-theme="clair"] {
  --fond: #e8eef5; --carte: #f2f5f9; --bord: #c4cfdd;
  --texte: #25364c; --discret: #50647d; --accent: #315f9b;
  --ok: #216642; --alerte: #9f3e3d; --ip-texte: #25364c; --attention: #805318;
  --surface-interieure: #e2eaf3;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte);
  font-family: system-ui, -apple-system, sans-serif; line-height: 1.45; }
body { padding: 1rem clamp(.75rem, 3vw, 2rem) 1.5rem; }

.entete { text-align: center; margin-bottom: 1rem; }
h1 { margin: 0; font-size: 1rem; font-weight: 500; color: var(--discret); }
.ip-geante { margin: .15rem 0 .5rem; font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 700;
  letter-spacing: .02em; word-break: break-all; }
.actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
#export-complet-etat:empty, #export-test-etat:empty { display: none; }
.choix-theme { display: flex; justify-content: flex-end; margin: -.35rem 0 .65rem; }
.actions-test { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.astuce { margin: .6rem 0 0; font-size: .8rem; color: var(--discret); }
code { background: var(--carte); padding: .1rem .4rem; border-radius: 4px; user-select: all; }

/* Grille responsive explicite : 1 colonne (mobile) > 2 (tablette) > 3 (desktop) ; conteneur centré sur très grand écran */
.grille { display: grid; gap: 1rem; grid-template-columns: 1fr; max-width: 2200px; margin: 0 auto; }
.entete { max-width: 2200px; margin-left: auto; margin-right: auto; }
.carte { min-width: 0; }
.carte-pleine { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte-dns { grid-column: 1 / -1; }          /* 3e carte seule : pleine largeur en 2 colonnes */
}
@media (min-width: 1150px) {
  .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .carte-dns { grid-column: auto; }
}
/* Très grands écrans : texte et espacements agrandis pour remplir l'espace */
@media (min-width: 1800px) { html { font-size: 18px; } }
@media (min-width: 2400px) { html { font-size: 21px; } }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 1rem 1.15rem; }
.carte h2 { margin: 0 0 .7rem; font-size: 1rem; color: var(--accent); }

dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; }
dt { color: var(--discret); font-size: .85rem; }
dd { margin: 0; text-align: right; font-weight: 500; word-break: break-word; }
.grand { font-size: 1.6rem; font-weight: 700; margin: .2rem 0 .4rem; word-break: break-all; }
.note { font-size: .82rem; color: var(--discret); margin: .4rem 0; }
.carte-note .note { margin: 0; }

.badge { display: inline-block; padding: .35rem .75rem; border-radius: 999px; font-weight: 600; font-size: .9rem; }
.badge-neutre { background: var(--bord); }
.badge-ok { background: rgba(34,197,94,.18); color: var(--ok); }
.badge-alerte { background: rgba(239,68,68,.18); color: var(--alerte); }
.indicateurs { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.indicateurs li { display: flex; justify-content: space-between; background: var(--fond); padding: .45rem .7rem; border-radius: 8px; }
.oui { color: var(--alerte); } .non { color: var(--ok); }

.btn { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: .6rem 1.2rem;
  font: inherit; font-weight: 600; cursor: pointer; transition: filter .15s, transform .15s; }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn-secondaire { background: transparent; border: 1px solid var(--bord); color: var(--texte); padding: .4rem .9rem; font-weight: 500; }

.progression { height: 10px; background: var(--fond); border-radius: 999px; overflow: hidden; margin: .9rem 0 .3rem; }
.progression-remplie { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #60a5fa);
  border-radius: 999px; transition: width .35s ease; }
.progression.actif .progression-remplie { background-size: 200% 100%; animation: defile 1.2s linear infinite; }
@keyframes defile { to { background-position: -200% 0; } }

.metriques { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; margin-top: .6rem; }
.metriques div { background: var(--fond); border-radius: 8px; padding: .55rem .7rem; }
.metriques span { display: block; font-size: .75rem; color: var(--discret); }
.metriques b { font-size: 1.25rem; }
.detail-lat { list-style: none; padding: 0; margin: .7rem 0 0; display: flex; gap: .5rem; flex-wrap: wrap; font-size: .8rem; color: var(--discret); }
.detail-lat li { background: var(--fond); padding: .2rem .6rem; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .progression.actif .progression-remplie { animation: none; }
  .progression-remplie, .btn { transition: none; }
}

/* Liens, export, page de documentation */
a { color: var(--accent); }
.export { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .9rem; }
.export label { display: flex; gap: .4rem; align-items: center; margin: 0; cursor: pointer; }
.badge-attention { background: rgba(245,158,11,.18); color: #f59e0b; }
.doc { max-width: 820px; margin: 0 auto; }
.doc h2 { margin-top: 1.4rem; }
.doc pre { background: var(--fond); border: 1px solid var(--bord); border-radius: 8px; padding: .8rem 1rem;
  overflow-x: auto; font-size: .85rem; }
.doc table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.doc th, .doc td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid var(--bord); }

/* Aide réseau local */
.aide { margin-top: .6rem; }
.aide summary { cursor: pointer; color: var(--accent); font-size: .85rem; }
.aide summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmd { background: var(--fond); border: 1px solid var(--bord); border-radius: 8px; padding: .6rem .8rem;
  font-size: .78rem; white-space: pre-wrap; word-break: break-all; margin: .4rem 0; }

/* Séparateur, tableaux, saisie DNS, badge WARP, score */
.separateur { border: 0; border-top: 1px solid var(--bord); margin: .9rem 0; }
.tab-wrap { overflow-x: auto; margin: .6rem 0; }
.tab { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tab th, .tab td { text-align: left; padding: .3rem .55rem; border-bottom: 1px solid var(--bord); word-break: break-word; }
.tab th { color: var(--discret); font-weight: 500; }
.tab tr.meilleur td { color: var(--ok); }
.ligne-dns { display: flex; gap: .6rem; }
input[type=text] { flex: 1; min-width: 0; background: var(--fond); color: var(--texte); border: 1px solid var(--bord);
  border-radius: 8px; padding: .55rem .8rem; font: inherit; }
input[type=text]:focus-visible { outline: 2px solid var(--accent); }
.badge-warp { background: rgba(249,115,22,.18); color: #fb923c; }
.metriques .score { grid-column: span 1; border: 1px solid var(--accent); }
.metriques small { display: block; color: var(--discret); font-size: .75rem; }
.s-bon { color: var(--ok); } .s-moyen { color: #f59e0b; } .s-mauvais { color: var(--alerte); }

/* Séparateur, réseau, score, tableaux */
.sep { border: 0; border-top: 1px solid var(--bord); margin: 1.8rem 0 1.4rem; }
.sous-titre { margin: 0 0 .7rem; font-size: 1rem; color: var(--accent); font-weight: 700; }
.carte-pleine { grid-column: 1 / -1; }
.reseau-val { margin: 0 0 .3rem; font-weight: 700; font-size: 1.15rem; word-break: break-all; }
.defile { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tableau th, .tableau td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--bord); overflow-wrap: break-word; }
.tableau th { color: var(--discret); font-weight: 500; }
.tableau tr.courant td { color: var(--accent); font-weight: 600; }
.score-bloc { display: flex; align-items: center; gap: 1rem; margin: .9rem 0; flex-wrap: wrap; }
.score-bloc p { margin: .1rem 0; }
.score-rond { width: 5.4rem; height: 5.4rem; border-radius: 50%; border: 6px solid var(--bord); display: flex;
  flex-direction: column; align-items: center; justify-content: center; flex: none; }
.score-rond b { font-size: 1.7rem; line-height: 1; }
.score-rond span { font-size: .7rem; color: var(--discret); }
.score-rond.score-ok { border-color: var(--ok); }
.score-rond.score-moyen { border-color: #f59e0b; }
.score-rond.score-faible { border-color: var(--alerte); }

/* Tableaux : en-têtes sur une ligne ; bloc test en deux colonnes sur grand écran */
.tableau th { white-space: nowrap; }
.test-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 1300px) {
  .test-grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; }
  /* Colonnes de hauteur égale : la colonne la plus courte absorbe l'écart (lignes de services étirées à droite,
     bloc vidéo calé en bas à gauche), pour que les deux se terminent à la même hauteur */
  .test-mesures, .services-bloc { display: flex; flex-direction: column; }
  .services-bloc .services { flex: 1; display: flex; flex-direction: column; }
  .services-bloc .services li { flex: 1 1 auto; }
  .video-bloc { margin-top: auto; }
  .services-bloc > .sep:first-child { display: none; }
  .services-bloc { border-left: 1px solid var(--bord); padding-left: 2rem; }
  .services-bloc .sous-titre:first-of-type { margin-top: 0; }
  .score-bloc { margin-top: .4rem; }
}

/* Valeurs colorées (CGNAT, TLS, dual-stack, MTU) : vert = bon, orange = à surveiller, rouge = problème */
.val-ok, dd.val-ok { color: var(--ok); }
.val-attention, dd.val-attention, dd.val-moyen { color: #f59e0b; }
.val-alerte, dd.val-alerte { color: var(--alerte); }
dd { overflow-wrap: anywhere; }
dd[title], .metriques [title] { cursor: help; }
.cmd { user-select: all; }
.metriques small { display: block; margin-top: .2rem; font-size: .68rem; line-height: 1.3; color: var(--discret); font-weight: 400; }
.metriques .mtu-badge { display: inline-block; margin-top: .25rem; padding: .15rem .4rem; font-size: .68rem; }
.metriques .mtu-badge.badge-ok { color: var(--ok); }
.metriques .mtu-badge.badge-attention { color: #f59e0b; }
.metriques b { overflow-wrap: anywhere; }

/* Tuiles de mesure : 2 colonnes sur petit écran, 3 dès 640 px ; 6 tuiles = 3 x 2, jamais de tuile orpheline */
.metriques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .metriques { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Très petits écrans : informations sur une colonne (libellé puis valeur), indicateurs empilés */
@media (max-width: 400px) {
  dl { grid-template-columns: 1fr; gap: .1rem; }
  dd { text-align: left; margin-bottom: .45rem; }
  .indicateurs { grid-template-columns: 1fr; }
  .ip-geante { font-size: clamp(1.4rem, 8vw, 1.8rem); }
  .carte { padding: .9rem; }
}

/* Tableau des colos : cellules sur une ligne (défilement horizontal si l'écran est trop étroit) */
.test-mesures .tableau td { white-space: nowrap; }

/* Score vie privée */
.vp-titre { margin: 0 0 .6rem; font-weight: 700; font-size: 1.02rem; line-height: 1.35; }
.vp-titre.val-ok { color: var(--ok); } .vp-titre.val-attention { color: #f59e0b; } .vp-titre.val-alerte { color: var(--alerte); }
.detail-lat li.val-ok { color: var(--ok); } .detail-lat li.val-attention { color: #f59e0b; } .detail-lat li.val-alerte { color: var(--alerte); }

/* Pastilles de couleur (latence des services, qualité vidéo) */
.pt { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; flex: none; vertical-align: -.1em; margin-right: .5rem; }
.pt-ex { background: #22c55e; } .pt-ok { background: #eab308; } .pt-moy { background: #f97316; }
.pt-mauvais { background: #ef4444; } .pt-inj { background: #111827; box-shadow: 0 0 0 1px #64748b; }
.pt-na { background: transparent; box-shadow: inset 0 0 0 2px #475569; }

/* Ping vers services populaires */
.services { list-style: none; margin: 0; padding: 0; }
.services li { display: flex; align-items: center; gap: .1rem; padding: .45rem 0; border-bottom: 1px solid var(--bord); }
.services .svc-texte { flex: 1; min-width: 0; }
.services .svc-texte b { display: block; font-size: .95rem; }
.services .svc-texte small { display: block; color: var(--discret); font-size: .72rem; line-height: 1.3; }
.services .svc-ms { margin-left: .6rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.legende { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .75rem; color: var(--discret); }
.legende .pt { width: .65rem; height: .65rem; margin-right: .35rem; }

/* Qualité vidéo : six blocs, même palette que le tableau de bord. */
.video { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.video > li { min-width: 0; background: var(--fond); border: 1px solid var(--bord); border-radius: 8px; padding: .7rem; display: flex; flex-direction: column; }
.video-entete { display: flex; align-items: center; justify-content: space-between; gap: .3rem; }
.video-entete b { color: var(--accent); font-size: 1.1rem; }
.video-resolution { color: var(--texte); background: var(--carte); padding: .12rem .35rem; border-radius: 4px; font-size: .72rem; }
.video-dimensions { margin: .5rem 0 .2rem; font-size: .8rem; font-variant-numeric: tabular-nums; }
.video-dimensions span { color: var(--discret); font-size: .68rem; }
.video-description { margin: 0 0 .6rem; color: var(--discret); font-size: .72rem; }
.video .video-debits { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .35rem; margin-top: auto; padding: .55rem 0; border-top: 1px solid var(--bord); }
.video-debits dt { color: var(--discret); font-size: .7rem; overflow-wrap: anywhere; }
.video .video-debits dd { text-align: right; margin: 0; font-size: .78rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.video-debits dd span { color: var(--discret); font-size: .66rem; font-weight: 400; }
.video-indicateur { display: flex; align-items: center; gap: .35rem; margin: .3rem 0 0; padding-top: .5rem; border-top: 1px solid var(--bord); font-size: .7rem; line-height: 1.35; color: var(--discret); }
.video .video-indicateur .pt { margin: 0; width: .6rem; height: .6rem; }
.video > li[data-etat="recommande"] .video-statut { color: var(--ok); }
.video > li[data-etat="minimum"] .video-statut, .video > li[data-etat="instable"] .video-statut { color: #eab308; }
.video > li[data-etat="insuffisant"] .video-statut { color: var(--alerte); }
.video > li[data-etat="recommande"] { border-color: rgba(34,197,94,.65); box-shadow: inset 0 3px 0 var(--ok); }
.video > li[data-etat="minimum"], .video > li[data-etat="instable"] { border-color: rgba(234,179,8,.65); box-shadow: inset 0 3px 0 #eab308; }
.video > li[data-etat="insuffisant"] { border-color: rgba(239,68,68,.65); box-shadow: inset 0 3px 0 var(--alerte); }
.video > li[data-etat="recommande"] .video-entete b { color: var(--ok); }
.video > li[data-etat="minimum"] .video-entete b, .video > li[data-etat="instable"] .video-entete b { color: #eab308; }
.video > li[data-etat="insuffisant"] .video-entete b { color: var(--alerte); }
.video-statut { font-weight: 600; }
.video-explication { margin-top: .65rem; }
@media (min-width: 640px) { .video { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 340px) { .video { grid-template-columns: 1fr; } }

/* Les 3 blocs du haut sont des colonnes flex : leur contenu absorbe l'écart de hauteur pour que les trois finissent ensemble
   (lignes d'informations réparties à gauche, score vie privée calé en bas au milieu, synthèse DNS calée en bas à droite) */
.carte-haut { display: flex; flex-direction: column; }
.carte-haut > dl { flex: 1; align-content: space-between; }
.carte-haut .vp-bloc { margin-top: auto; }
.carte-haut .dns-synthese-bloc { margin-top: auto; }

/* Carte IP publique : tous les textes restent blancs, y compris les valeurs qualifiées. */
.carte.carte-ip, .carte.carte-ip * { color: var(--ip-texte); }
.carte.carte-ip #t1, .carte.carte-ip #t1 * { color: var(--accent); }

/* Aide accessible au survol, au clavier et au toucher. La bulle reste dans l'écran. */
.aide-metrique { display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-left: .3rem;
  width: 1.2rem; height: 1.2rem; vertical-align: middle; border: 1px solid var(--bord); border-radius: 50%;
  background: transparent; color: inherit; font: inherit; font-size: .78rem; line-height: 1; cursor: help; }
.aide-metrique:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bulle-metrique { position: fixed; z-index: 100; max-width: min(360px, calc(100vw - 24px)); padding: .8rem;
  background: var(--carte); border: 1px solid var(--accent); border-radius: 8px; color: var(--texte);
  font-size: .83rem; line-height: 1.5; box-shadow: 0 8px 24px rgba(0,0,0,.24); overflow-wrap: anywhere; }
.metriques .libelle-ttfb { display: inline; font-size: inherit; color: inherit; }

/* États lisibles sur fond clair. */
:root[data-theme="clair"] .btn:focus-visible { outline-color: var(--accent); }
:root[data-theme="clair"] .val-attention, :root[data-theme="clair"] .val-moyen,
:root[data-theme="clair"] .badge-attention, :root[data-theme="clair"] .s-moyen,
:root[data-theme="clair"] .vp-titre.val-attention, :root[data-theme="clair"] .detail-lat li.val-attention,
:root[data-theme="clair"] .metriques .mtu-badge.badge-attention { color: var(--attention); }
:root[data-theme="clair"] .badge-warp { color: #c2410c; }
:root[data-theme="clair"] .video > li[data-etat="minimum"] .video-statut,
:root[data-theme="clair"] .video > li[data-etat="instable"] .video-statut,
:root[data-theme="clair"] .video > li[data-etat="minimum"] .video-entete b,
:root[data-theme="clair"] .video > li[data-etat="instable"] .video-entete b,
:root[data-theme="clair"] .lookup-legal h3 { color: var(--attention); }

/* Onglets et analyse publique : styles limités au nouvel outil. */
[hidden] { display: none !important; }
.onglets-ip { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-bottom: 1.1rem; }
.onglet-ip { border: 1px solid var(--bord); border-radius: 8px; padding: .55rem 1rem; background: var(--carte); color: var(--texte); font: inherit; font-weight: 600; cursor: pointer; }
.onglet-ip[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.onglet-ip:focus-visible, .lookup-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lookup-section > h2 { font-size: 1.35rem; }
.lookup-form { margin-top: 1.1rem; }
.lookup-form > label { display: block; margin-bottom: .4rem; font-size: .9rem; font-weight: 600; }
.lookup-saisie { display: flex; gap: .65rem; }
.lookup-saisie input { padding: .7rem .85rem; font-family: inherit; font-size: 1rem; }
.lookup-saisie input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.lookup-saisie input[aria-invalid="true"] { border-color: var(--alerte); }
.lookup-suggestions { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.lookup-chip { background: var(--fond); color: var(--texte); border: 1px solid var(--bord); border-radius: 999px; padding: .35rem .7rem; font: inherit; font-size: .8rem; cursor: pointer; }
.lookup-chip:hover { border-color: var(--accent); }
.lookup-chip:disabled { opacity: .5; cursor: wait; }
.lookup-etat { margin: .75rem 0; min-height: 1.25em; }
.lookup-etat.val-alerte { color: var(--alerte); }
.lookup-etat.val-ok { color: var(--ok); }
.lookup-legal { margin: .8rem 0 1rem; padding: .8rem 1rem; border: 1px solid var(--bord); border-left: 3px solid #eab308; border-radius: 8px; background: var(--fond); }
.lookup-legal h3 { margin: 0 0 .35rem; font-size: .9rem; color: #eab308; }
.lookup-legal p { margin: .35rem 0 0; font-size: .82rem; }
.lookup-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.lookup-carte { min-width: 0; background: var(--fond); border: 1px solid var(--bord); border-radius: 10px; padding: 1rem; }
.lookup-carte h3 { margin: 0 0 .75rem; color: var(--accent); font-size: 1rem; }
.lookup-source { margin-top: .8rem; font-size: .73rem; }
@media (min-width: 768px) { .lookup-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lookup-rdap { grid-column: 1 / -1; } }
@media (max-width: 480px) { .lookup-saisie { flex-direction: column; } .lookup-saisie .btn { width: 100%; } .onglet-ip { padding: .5rem .75rem; font-size: .9rem; } }


.pied-legal { max-width: 1400px; margin: 1.5rem auto; padding: 1rem; text-align: center; font-size: .83rem; }
.pied-legal nav, .actions-choix { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; }
.pied-legal p { margin-top: .8rem; }
.legal-doc { max-width: 1000px; }
.legal-doc section { margin-top: 2rem; scroll-margin-top: 1rem; }
.legal-doc h1, .legal-doc h2, .dialogue-confidentialite h2, .banniere-confidentialite h2 { color: var(--accent); }
.legal-doc h3 { margin-top: 1.1rem; }
.legal-doc p, .legal-doc li { line-height: 1.7; }
.legal-doc td { white-space: normal; vertical-align: top; min-width: 10rem; }
.legal-doc .table-defile { max-width: 100%; overflow-x: auto; }
.legal-doc p, .legal-doc li, .legal-doc code { overflow-wrap: anywhere; }
.banniere-confidentialite { position: sticky; bottom: 0; z-index: 80; padding: 1rem; background: var(--carte); border-top: 2px solid var(--accent); box-shadow: 0 -5px 20px rgba(0,0,0,.18); }
.banniere-confidentialite p { max-width: 1100px; margin: .6rem auto; font-size: .85rem; line-height: 1.5; }
.banniere-confidentialite h2 { margin: 0; text-align: center; font-size: 1.1rem; }
.dialogue-confidentialite { max-width: min(700px, calc(100vw - 24px)); max-height: 90vh; margin: auto; padding: 1.25rem; background: var(--carte); color: var(--texte); border: 1px solid var(--accent); border-radius: 10px; }
.dialogue-confidentialite::backdrop { background: rgba(0,0,0,.65); }
.dialogue-confidentialite p { font-size: .88rem; line-height: 1.6; }
.dialogue-confidentialite label { display: block; padding: .8rem 0; border-bottom: 1px solid var(--bord); cursor: pointer; }
.dialogue-confidentialite label span { display: block; margin: .4rem 0 0 1.6rem; font-size: .82rem; line-height: 1.5; }
.dialogue-confidentialite input { width: auto; margin: 0 .4rem 0 0; accent-color: var(--accent); }
.dialogue-confidentialite .actions-choix { margin-top: .9rem; }
.actions-choix [data-cookie] { min-width: 8.5rem; }

/* Bloc proxy : variante avec indice d’anonymisation, styles limités à cette carte. */
.carte-proxy .proxy-synthese { margin: .4rem 0 1rem; }
.carte-proxy .badge { font-size: .8rem; }
.carte-proxy .indicateurs { margin: 0; }
.carte-proxy .indicateurs li { align-items: center; gap: .5rem; min-width: 0; font-size: .875rem; }
.carte-proxy .indicateurs b { font-size: .75rem; font-weight: 600; }
.carte-proxy .proxy-legende { margin-top: .55rem; }
.carte-proxy .proxy-section { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--bord); }
.carte-proxy .proxy-section .sous-titre { margin-bottom: .8rem; }
.carte-proxy .proxy-ligne { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .875rem; }
.carte-proxy .proxy-ligne .badge { padding: .25rem .55rem; }
.carte-proxy .badge-neutre { background: var(--fond); color: var(--discret); }
.carte-proxy .proxy-adresses { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .5rem .65rem; margin-top: .75rem; border-radius: 7px; background: var(--fond); }
.carte-proxy .proxy-adresses[hidden] { display: none; }
.carte-proxy .proxy-adresses > span { color: var(--discret); font-size: .75rem; }
.carte-proxy .proxy-adresses ul { display: flex; gap: .4rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.carte-proxy .proxy-adresses li { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; overflow-wrap: anywhere; min-width: 0; }
.carte-proxy .proxy-ipv6 { margin-top: .85rem; }
.carte-proxy .note { font-size: .75rem; line-height: 1.5; }
.carte-proxy .proxy-indice { display: flex; align-items: center; gap: 1.1rem; padding: .25rem 0 .4rem; }
.carte-proxy .proxy-indice-valeur { flex: none; font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.carte-proxy .proxy-indice-valeur small { font-size: .8rem; font-weight: 400; color: var(--discret); margin-left: .1rem; }
.carte-proxy #vp-partiel { display: block; margin-top: -.3rem; text-align: center; }
.carte-proxy #vp-partiel[hidden] { display: none; }
.carte-proxy .vp-titre { margin: 0; font-size: .95rem; font-weight: 600; color: var(--texte); }
.carte-proxy .proxy-indice .note { margin: .3rem 0 0; }
.carte-proxy .proxy-faits { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .75rem; margin: .5rem 0 0; }
.carte-proxy .proxy-faits dt, .carte-proxy .proxy-faits dd { font-size: .8rem; margin: 0; }
.carte-proxy .proxy-faits dd { text-align: right; }
.carte-proxy .proxy-discret { color: var(--discret); }
.carte-proxy .proxy-ptr { margin-top: .65rem; padding-top: .75rem; border-top: 1px solid var(--bord); }
.carte-proxy .proxy-ptr-titre { font-size: .75rem; color: var(--discret); }
.carte-proxy .proxy-ptr > p:not(.note) { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .45rem 0 .3rem; font-size: .8rem; overflow-wrap: anywhere; }
.carte-proxy .proxy-info { padding: .2rem .45rem; border-radius: 5px; background: var(--fond); color: var(--discret); font-size: .7rem; }
@media (max-width: 400px) { .carte-proxy .proxy-indice { gap: .75rem; } }

/* Bouton Actualiser : seul sous l’IP, plus grand et bleu dans les deux thèmes. */
.entete .actualiser-sous-ip { margin: .75rem 0 1rem; }
#btn-rafraichir { background: var(--accent); border-color: var(--accent); color: #fff; min-width: 160px; padding: .75rem 1.8rem; font-size: 1.1rem; border-radius: 10px; }

/* Sélecteur du serveur : uniquement dans le test de connexion. */
#section-connexion .choix-serveur-test { min-width: 0; max-width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; color: var(--discret); font-size: .85rem; }
#section-connexion .select-serveur-test { max-width: 100%; min-width: 0; background: var(--fond); color: var(--texte); border: 1px solid var(--bord); border-radius: 8px; padding: .55rem .7rem; font: inherit; cursor: pointer; }
#section-connexion .select-serveur-test:disabled { opacity: .6; cursor: wait; }
#section-connexion .select-serveur-test:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#section-connexion #serveur-test-resultat { color: var(--texte); padding: .45rem .65rem; border-left: 3px solid var(--accent); background: var(--fond); border-radius: 4px; }
#section-connexion #serveur-test-resultat[hidden] { display: none; }

/* Mode clair Bleu brume : gris bleuté, cartes pâles et accent bleu sobre. */
:root[data-theme="clair"] .carte { box-shadow: 0 5px 18px rgba(37, 54, 76, .045); }
:root[data-theme="clair"] .badge-ok { background: #dcebe6; }
:root[data-theme="clair"] .badge-attention { background: #eee7d9; }
:root[data-theme="clair"] .badge-alerte { background: #efdee1; }
:root[data-theme="clair"] .carte-proxy .badge-ok { background: #dcebe6; }
:root[data-theme="clair"] .carte-proxy .badge-attention { background: #eee7d9; }
:root[data-theme="clair"] .carte-proxy .badge-alerte { background: #efdee1; }
:root[data-theme="clair"] #section-connexion .select-serveur-test option,
:root[data-theme="clair"] #section-connexion .select-serveur-test optgroup { background: var(--carte); color: var(--texte); }

:root[data-theme="clair"] .pt-ex { background: var(--ok); }
:root[data-theme="clair"] .pt-ok { background: #9a7421; }
:root[data-theme="clair"] .pt-moy { background: #ad6438; }
:root[data-theme="clair"] .pt-mauvais { background: var(--alerte); }
:root[data-theme="clair"] .score-rond.score-moyen { border-color: var(--attention); }
:root[data-theme="clair"] .progression-remplie { background: var(--accent); }

/* Surfaces intérieures du modèle Bleu brume, uniquement en mode clair. */
:root[data-theme="clair"] .metriques div,
:root[data-theme="clair"] .indicateurs li,
:root[data-theme="clair"] .carte-proxy .proxy-adresses,
:root[data-theme="clair"] .carte-proxy .proxy-info { background: var(--surface-interieure); }

/* myipfull : marque textuelle, choix de langue et adaptation arabe. */
.nom-site { margin: 0 0 .6rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -.025em; color: var(--accent); text-align: center; }
.nom-site-document { margin-top: 1rem; }
.choix-theme { align-items: center; gap: .65rem; flex-wrap: wrap; }
.choix-langue { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-size: .85rem; color: var(--discret); }
.choix-langue select { background: var(--carte); color: var(--texte); border: 1px solid var(--bord); border-radius: 8px; padding: .45rem .65rem; font: inherit; max-width: 100%; }
.choix-langue select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root[dir="rtl"] { font-family: system-ui, Tahoma, Arial, sans-serif; }
:root[dir="rtl"] dl dd { text-align: left; }
:root[dir="rtl"] .tableau th, :root[dir="rtl"] .tableau td { text-align: right; }
:root[dir="rtl"] .svc-ms { margin-left: 0; margin-right: .6rem; }
:root[dir="rtl"] .pt { margin-right: 0; margin-left: .5rem; }
:root[dir="rtl"] .dialogue-confidentialite label span { margin-left: 0; margin-right: 1.6rem; }
:root[dir="rtl"] #serveur-test-resultat { border-left: 0; border-right: 3px solid var(--accent); }
:root[dir="rtl"] .lookup-legal { border-left-width: 1px; border-right: 3px solid var(--attention); }
.ip-geante, code, pre, #lookup-ip, #ip-val, #ip-ptr, #ip-asn, #ip-coord, #ip-fuseau,
#lk-ip, #lk-ptr, #lk-asn, #lk-cidr, #lk-coord, #lk-fuseau, .proxy-adresses li,
.metriques b, .video-resolution, .video-debits dd, .svc-ms, .score-rond span,
.proxy-indice-valeur small { direction: ltr; unicode-bidi: isolate; }
@media (min-width: 1300px) {
  :root[dir="rtl"] .services-bloc { border-left: 0; padding-left: 0; border-right: 1px solid var(--bord); padding-right: 2rem; }
}
@media (max-width: 400px) { :root[dir="rtl"] dl dd { text-align: right; } }

/* Logo Signal approuvé : marque et icône uniquement, sans impact sur les composants. */
.nom-site { display: flex; align-items: center; justify-content: center; gap: .38em;
  font-size: clamp(1.3rem, 3vw, 1.9rem); color: var(--ip-texte); }
.logo-signal { display: inline-block; flex: none; width: 1.45em; height: 1.45em;
  background-color: var(--accent);
  -webkit-mask: url("logo-signal.png") center / contain no-repeat;
  mask: url("logo-signal.png") center / contain no-repeat; }
:root[data-theme="clair"] .nom-site { color: var(--accent); }

/* Carte IP regroupée : palette existante et hauteurs communes sur la ligne desktop. */
#panneau-mon-ip { align-items: stretch; }
#panneau-mon-ip > .carte-haut { align-self: stretch; }
.carte-ip > .ip-identite { padding-bottom: .2rem; flex: none; align-content: start; }
:root .carte.carte-ip dl, :root .carte.carte-ip dl * { color: var(--ip-texte); }
.carte-ip .ip-rubrique { min-width: 0; margin-top: .7rem; padding: .7rem .75rem;
  border: 1px solid var(--bord); border-radius: 9px; background: var(--surface-interieure, var(--fond)); }
.carte.carte-ip .ip-rubrique h3 { color: var(--accent); font-size: .9rem; font-weight: 650;
  margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--bord); }
.carte-ip dl { grid-template-columns: minmax(5rem, .7fr) minmax(0, 1.3fr); column-gap: .7rem; row-gap: .4rem; align-items: start; }
.carte-ip dt { min-width: 0; overflow-wrap: anywhere; }
.carte-ip dd { min-width: 0; overflow-wrap: anywhere; font-size: .88rem; }
.carte-ip .ip-composition { display: flex; flex-wrap: wrap; justify-content: flex-end;
  align-items: baseline; column-gap: .3rem; row-gap: .1rem; }
.carte-ip .ip-heure-utc, .carte-ip .ip-asn-groupe { white-space: nowrap; }
.carte-ip #ip-ptr { font-size: .82rem; }
.carte-ip #ip-colo-rtt { font-size: .78rem; }
.carte-ip .ip-validation { font-size: .9rem; font-weight: 700; }
.carte-ip .ip-connexion { margin-bottom: .8rem; }
.carte-ip .ip-complement { margin-top: auto; border-top: 1px solid var(--bord); padding-top: .65rem; }
.carte-ip .ip-complement summary { font-size: .82rem; cursor: pointer; }
.carte-ip .ip-complement summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.carte-ip .ip-complement dl { margin-top: .65rem; }
.carte-ip #ip-source { margin-top: .7rem; font-size: .72rem; }
.carte-ip #ip-heure, .carte-ip #ip-decalage, .carte-ip #ip-colo, .carte-ip #ip-colo-rtt { direction: ltr; unicode-bidi: isolate; }
:root[dir="rtl"] .carte-ip .ip-composition[dir="ltr"] { justify-content: flex-start; }
@media (min-width: 1150px) {
  #panneau-mon-ip > .carte-haut { height: 100%; }
}

/* Marque myIPfull : IP reprend exactement le bleu du symbole. */
.nom-site .marque-texte { color: var(--ip-texte); }
.nom-site .marque-ip { color: var(--accent); }

/* En-tete Focus : IP centrale et commandes compactes, sans modifier les cartes. */
.entete-dashboard {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 44px;
  grid-template-areas: "brand tabs prefs tools" "identity identity identity identity";
  align-items: center;
  gap: 1rem;
  padding: 1rem clamp(.75rem, 2vw, 1.5rem);
  border: 1px solid var(--bord);
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 90%, #102c4a 0%, #091829 65%);
}
:root[data-theme="clair"] .entete-dashboard { background: linear-gradient(135deg, #e8eef5, #f2f5f9); }
.entete-dashboard > * { min-width: 0; }
.entete-dashboard .nom-site { grid-area: brand; justify-content: flex-start; margin: 0; font-size: 1.2rem; white-space: nowrap; }
.entete-dashboard .onglets-ip {
  grid-area: tabs;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem; margin: 0; width: 100%; max-width: 600px; justify-self: center;
}
.entete-dashboard .onglet-ip { min-width: 0; min-height: 44px; padding: .55rem .5rem; font-size: .85rem; line-height: 1.25; overflow-wrap: anywhere; }
.entete-dashboard .choix-theme { grid-area: prefs; margin: 0; flex-wrap: nowrap; gap: .4rem; }
.entete-dashboard .choix-langue { flex-wrap: nowrap; gap: .35rem; font-size: .8rem; }
.entete-dashboard .choix-langue select { min-height: 44px; padding: .4rem; }
/* Le texte du bouton est conserve pour son nom accessible et ses traductions. */
.entete-dashboard #btn-theme {
  position: relative; flex: none; width: 52px; height: 44px; min-width: 0; padding: 0;
  border: 0; background: transparent; font-size: 0; border-radius: 8px;
}
.entete-dashboard #btn-theme::before { content: ""; position: absolute; width: 42px; height: 24px; left: 5px; top: 10px; border-radius: 999px; background: var(--accent); }
.entete-dashboard #btn-theme::after { content: ""; position: absolute; width: 18px; height: 18px; left: 26px; top: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0005; transition: left .15s; }
.entete-dashboard #btn-theme[aria-pressed="true"]::before { background: var(--bord); }
.entete-dashboard #btn-theme[aria-pressed="true"]::after { left: 8px; }
.entete-dashboard #entete-mon-ip { grid-area: identity; padding: 1rem 0 .5rem; }
.entete-dashboard .ip-geante { color: #16e3ae; font-size: clamp(1.6rem, 5.5vw, 3.5rem); line-height: 1.2; margin: .45rem 0 .65rem; }
:root[data-theme="clair"] .entete-dashboard .ip-geante { color: #08745c; }
.entete-dashboard .actualiser-sous-ip { margin: .6rem 0 0; }
.entete-dashboard #btn-rafraichir {
  display: inline-flex; align-items: center; flex-direction: column; gap: .4rem;
  min-width: 80px; min-height: 84px; padding: 0 .4rem; border: 0;
  background: transparent; color: var(--texte); font-size: .85rem; border-radius: 8px;
}
.entete-dashboard #btn-rafraichir::before { content: "↻"; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.9rem; font-weight: 400; line-height: 1; }
.entete-dashboard .menu-entete { grid-area: tools; }
.entete-dashboard .menu-entete summary { display: grid; place-items: center; width: 44px; min-height: 44px; list-style: none; border-radius: 8px; cursor: pointer; font-size: 1.2rem; color: var(--texte); }
.entete-dashboard .menu-entete summary::-webkit-details-marker { display: none; }
.entete-dashboard .menu-entete:not([open]) .menu-entete-contenu { display: none; }
.entete-dashboard .menu-entete summary:hover { background: var(--carte); }
.entete-dashboard .menu-entete summary:focus-visible, .entete-dashboard #btn-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.entete-dashboard .texte-cache { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.entete-dashboard .menu-entete-contenu { position: absolute; z-index: 20; top: 4.25rem; inset-inline-end: .75rem; width: min(360px, calc(100% - 1.5rem)); padding: .8rem; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); box-shadow: 0 8px 24px #0005; text-align: start; }
.entete-dashboard .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin: .75rem auto 0; }
.entete-dashboard .actions .btn { min-width: 0; min-height: 44px; padding: .55rem .85rem; font-size: .8rem; }
.entete-dashboard .menu-entete-contenu > a { display: block; padding: .6rem; color: var(--texte); border-radius: 6px; }
.entete-dashboard .menu-entete-contenu > a:hover { background: var(--fond); }
.entete-dashboard .astuce { overflow-wrap: anywhere; font-size: .75rem; }
.entete-dashboard .astuce code { white-space: normal; }
@media (max-width: 1099px) {
  .entete-dashboard { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "tools brand prefs" "tabs tabs tabs" "identity identity identity"; gap: .75rem .5rem; }
  .entete-dashboard .onglets-ip { max-width: none; }
  .entete-dashboard .menu-entete-contenu { inset-inline-start: .75rem; inset-inline-end: auto; }
}
@media (max-width: 599px) {
  .entete-dashboard { padding: .6rem; gap: .65rem .25rem; border-radius: 12px; }
  .entete-dashboard .nom-site { font-size: clamp(.82rem, 3vw, 1.05rem); gap: .25em; }
  .entete-dashboard .choix-theme { gap: .15rem; }
  .entete-dashboard .choix-langue { font-size: 0; }
  .entete-dashboard .choix-langue select { width: 76px; font-size: .75rem; padding: .35rem .15rem; }
  .entete-dashboard #btn-theme { width: 44px; }
  .entete-dashboard #btn-theme::before { left: 1px; }
  .entete-dashboard #btn-theme::after { left: 22px; }
  .entete-dashboard #btn-theme[aria-pressed="true"]::after { left: 4px; }
  .entete-dashboard .onglets-ip { gap: .3rem; }
  .entete-dashboard .onglet-ip { font-size: .72rem; padding: .5rem .2rem; }
  .entete-dashboard #entete-mon-ip { padding-top: .35rem; }
  .entete-dashboard .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .entete-dashboard .actions .btn { padding: .55rem .2rem; }
}
@media (prefers-reduced-motion: reduce) { .entete-dashboard #btn-theme::after { transition: none; } }

/* Variante website : theme nomme et commandes visibles en bleu. */
.entete-dashboard .ip-geante,
:root[data-theme="clair"] .entete-dashboard .ip-geante { color: var(--ok); }
.entete-dashboard {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand tabs prefs" "identity identity identity";
}
.entete-dashboard #btn-theme {
  width: 160px; padding-inline-start: .6rem; padding-inline-end: 56px;
  font-size: .8rem; text-align: start; color: var(--texte);
  background: var(--carte); border: 1px solid var(--bord);
}
.entete-dashboard #btn-theme::before { left: auto; right: auto; inset-inline-end: 7px; }
.entete-dashboard #btn-theme::after { left: auto; right: auto; inset-inline-end: 10px; }
.entete-dashboard #btn-theme[aria-pressed="true"]::after { left: auto; right: auto; inset-inline-end: 28px; }
.entete-dashboard .actions .btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.entete-dashboard .actions .btn:hover:not(:disabled) { filter: brightness(1.1); }
@media (max-width: 1099px) {
  .entete-dashboard { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand prefs" "tabs tabs" "identity identity"; }
}
@media (max-width: 599px) {
  .entete-dashboard { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "prefs" "tabs" "identity"; }
  .entete-dashboard .nom-site { justify-self: center; font-size: 1.1rem; }
  .entete-dashboard .choix-theme { justify-self: center; gap: .5rem; }
  .entete-dashboard #btn-theme { width: 160px; }
}