/* À LA DÉCOUVERTE DU WEB ET DES RÉSEAUX SOCIAUX — feuille de style
   Même famille que « À la découverte du sol et des séismes » et « À la découverte de l'informatique » :
   une barre en haut, puis un écran plein cadre. Écran d'activité : la scène à gauche (onglets au-dessus,
   commandes en dessous), le texte à droite. ../commun/scolatools.css, chargé après, redéfinit les couleurs
   communes (fond, encre, accent) et les polices du site.
   Couleurs propres : bleu pour la partie « Le Web », violet pour « Les réseaux sociaux », couleurs du code. */
:root {
  --fond: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #e9edf4;
  --encre: #1c2433;
  --encre-2: #4d5868;
  --ligne: #d6dce6;
  --accent: #2f5fe0;
  --accent-encre: #ffffff;
  --accent-doux: #e3ebff;
  --web: #1d5fd8;
  --web-doux: #e4edff;
  --reseaux: #8a3fd1;
  --reseaux-doux: #f1e7fb;
  --vif: #e07a0b;
  --bon: #1f7a3d;
  --bon-doux: #dff3e5;
  --faux: #b3261e;
  --faux-doux: #fbe2df;
  /* vert et rouge foncés pour le texte : ../commun/scolatools.css redéfinit --bon (#16a34a) et --faux (#dc2626), trop clairs
     pour un texte de petite taille (contraste inférieur à 4,5:1) ; ceux-ci restent lisibles sur blanc et sur les fonds doux */
  --bon-encre: #166534;
  --faux-encre: #b91c1c;
  --attention: #9a5b00;
  --attention-doux: #fff1d6;
  --conseil: #35618f;
  --conseil-doux: #e5eef8;
  --ajoute: #11703a;
  --ajoute-doux: #d7f5e1;
  --or: #b8860b;
  --bulle-fond: #1c2433;
  --bulle-texte: #ffffff;
  --verre: rgba(255, 255, 255, 0.86);
  --halo: rgba(255, 255, 255, 0.92);
  --ombre: 0 1px 2px rgba(20, 30, 50, 0.06), 0 8px 24px rgba(20, 30, 50, 0.07);
  /* code */
  --code-fond: #fbfcfe;
  --code-gouttiere: #eef1f6;
  --c-balise: #1d4ed8;
  --c-attr: #9a3412;
  --c-valeur: #15803d;
  --c-comment: #667085;
  --c-entite: #a21caf;
  --c-selecteur: #7c3aed;
  --c-prop: #0369a1;
  --c-nombre: #b45309;
  --c-ponct: #4d5868;
  --c-mot: #be185d;
  /* ambiances des thèmes */
  --scene-page-1: #eef4ff; --scene-page-2: #d4e1fb;
  --scene-adresses-1: #eef6fb; --scene-adresses-2: #cfe3ef;
  --scene-moteur-1: #f2f1fe; --scene-moteur-2: #d9d6f6;
  --scene-traces-1: #fdf3ea; --scene-traces-2: #f1d9c2;
  --scene-graphe-1: #f6effc; --scene-graphe-2: #e2d0f3;
  --scene-monde-1: #eef8f2; --scene-monde-2: #cfe9d9;
  --scene-identite-1: #fdf0f3; --scene-identite-2: #f1d3dc;

  --f-titre: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-texte: "Golos Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-xs: 0.78rem; --t-s: 0.875rem; --t-m: 1rem; --t-l: 1.2rem; --t-xl: 1.6rem; --t-xxl: clamp(2rem, 4.2vw, 3.1rem);
  --rayon: 10px;
  --gouttiere: 16px;
  --panneau: 380px;
}
/* Pas de thème sombre : le site ScolaTools n'en a pas (voir ../commun/scolatools.css). */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: var(--t-m)/1.55 var(--f-texte);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--f-titre); line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
a { color: var(--accent); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.code, code { font-family: var(--f-mono); font-size: 0.9em; background: var(--surface-2); padding: 0 5px; border-radius: 4px; overflow-wrap: anywhere; }

.app { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }

/* ---------- ambiances ---------- */
[data-fond] { --scene-1: var(--scene-page-1); --scene-2: var(--scene-page-2); }
[data-fond="adresses"] { --scene-1: var(--scene-adresses-1); --scene-2: var(--scene-adresses-2); }
[data-fond="moteur"] { --scene-1: var(--scene-moteur-1); --scene-2: var(--scene-moteur-2); }
[data-fond="traces"] { --scene-1: var(--scene-traces-1); --scene-2: var(--scene-traces-2); }
[data-fond="graphe"] { --scene-1: var(--scene-graphe-1); --scene-2: var(--scene-graphe-2); }
[data-fond="monde"] { --scene-1: var(--scene-monde-1); --scene-2: var(--scene-monde-2); }
[data-fond="identite"] { --scene-1: var(--scene-identite-1); --scene-2: var(--scene-identite-2); }

/* ---------- barre ---------- */
.barre {
  display: flex; align-items: center; gap: 10px 24px; flex-wrap: wrap;
  padding: 10px var(--gouttiere);
  background: var(--surface);
  border-bottom: 1px solid var(--ligne);
  position: relative; z-index: 5;
}
.lien-portail {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; margin-right: -12px;
  color: var(--encre-2); text-decoration: none; font-size: var(--t-l); border: 1px solid var(--ligne);
}
.lien-portail:hover { color: var(--accent); border-color: var(--accent); }
.barre .marque { font-family: var(--f-titre); font-weight: 760; font-size: var(--t-l); color: var(--encre); text-decoration: none; letter-spacing: -0.02em; }
.marque-courte { display: none; }
.barre nav { display: flex; gap: 4px; flex-wrap: wrap; }
.barre nav a { color: var(--encre-2); text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: var(--t-s); }
.barre nav a:hover { color: var(--encre); background: var(--surface-2); }
.barre nav a[aria-current="page"] { color: var(--accent-encre); background: var(--accent); }
.choix-niveau { margin-left: auto; }

main { position: relative; min-height: 0; }
.ecran { position: absolute; inset: 0; }

/* ---------- boutons communs ---------- */
.bascule { display: inline-flex; flex-wrap: wrap; gap: 0; }
.bascule > button, .commandes button, .onglets a {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px;
  padding: 6px 13px; font-size: var(--t-s); line-height: 1.2; text-decoration: none;
}
.bascule > button { border-radius: 0; margin-left: -1px; }
.bascule > button:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.bascule > button:last-child { border-radius: 0 999px 999px 0; }
.bascule > button:hover, .commandes button:hover, .onglets a:hover { border-color: var(--accent); }
.bascule > [aria-pressed="true"], .commandes button[aria-pressed="true"], .onglets a[aria-current="page"] {
  background: var(--accent); color: var(--accent-encre); border-color: var(--accent); position: relative;
}
.commandes button:disabled { opacity: 0.45; cursor: default; }
.bouton {
  border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 999px; padding: 6px 14px;
  font-size: var(--t-s); font-weight: 700; text-decoration: none; display: inline-block;
}
.bouton.plein { background: var(--accent); color: var(--accent-encre); }
/* bouton plein : bleu plus foncé que celui de la feuille commune (#398cef, contraste 3,4:1 avec le blanc) */
.app .bouton.plein { background: var(--accent); color: var(--accent-encre); }
.app .bouton.plein:hover { background: #2549b8; }

/* ---------- accueil ---------- */
.accueil, .page-texte { overflow: auto; }
.accueil-mise { max-width: 1200px; margin: 0 auto; padding: 28px var(--gouttiere) 48px; display: grid; gap: 26px; }
.accueil-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: center; }
.accueil-intro { display: grid; gap: 12px; max-width: 62ch; }
.surtitre { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--web); margin: 0; }
.accueil-intro h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; }
.accueil-intro p { margin: 0; color: var(--encre-2); font-size: var(--t-l); line-height: 1.5; }
.accueil-dessin { border-radius: 16px; overflow: hidden; border: 1px solid var(--ligne); box-shadow: var(--ombre); aspect-ratio: 16 / 9; background: #f7f9fd; }
.accueil-dessin svg { display: block; width: 100%; height: 100%; }
.accueil[data-vue="partie"] .accueil-tete { grid-template-columns: minmax(0, 1fr); grid-template-areas: "surtitre" "titre"; }
.accueil[data-vue="partie"] .accueil-dessin { display: none; }
.accueil-intro .retour-accueil { font-size: var(--t-m); }
.titre-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: -12px; }
.bilan-missions { margin: 0; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.parties { display: grid; gap: 34px; }
.section-partie { display: grid; gap: 16px; padding-top: 18px; border-top: 4px solid var(--web); }
.section-partie[data-partie="reseaux"] { border-top-color: var(--reseaux); }
.tete-partie { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: flex-end; }
.tete-partie > div:first-child { max-width: 70ch; display: grid; gap: 6px; }
.numero-partie { margin: 0; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--web); }
.section-partie[data-partie="reseaux"] .numero-partie { color: var(--reseaux); }
.tete-partie h2 { font-size: var(--t-xl); font-weight: 760; }
.tete-partie h2 a { color: inherit; text-decoration: none; }
.tete-partie h2 a:hover { text-decoration: underline; }
.intro-partie { margin: 0; color: var(--encre-2); }
.bilan-partie { display: grid; gap: 6px; justify-items: start; font-size: var(--t-s); color: var(--encre-2); }
.bilan-partie p { margin: 0; }
.medailles-partie { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; font-family: var(--f-mono); }
.grille-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: 16px; }
.carte-theme {
  display: grid; grid-template-rows: auto 1fr auto; background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px;
  overflow: hidden; box-shadow: var(--ombre); color: var(--encre);
}
.carte-tete { display: grid; text-decoration: none; color: inherit; }
.carte-theme .vignette { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: radial-gradient(110% 90% at 50% 40%, var(--scene-1), var(--scene-2)); }
.carte-texte { padding: 12px 14px 6px; display: grid; gap: 5px; align-content: start; }
.numero-theme { margin: 0; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.carte-theme h3 { font-size: var(--t-l); font-weight: 720; }
.carte-theme .carte-texte > p:last-child { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.liste-activites { list-style: none; margin: 0; padding: 4px 10px 8px; display: grid; gap: 2px; align-content: start; }
.liste-activites a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px;
  text-decoration: none; color: var(--encre); font-size: var(--t-s);
}
.liste-activites a:hover { background: var(--accent-doux); color: var(--accent); }
.pastille { font-family: var(--f-mono); font-size: 0.72rem; color: var(--encre-2); background: var(--surface-2); border-radius: 999px; padding: 0 7px; }
.pastille:empty { display: none; }
.pastille.complete { background: var(--bon-doux); color: var(--bon-encre); }
.carte-theme .pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px 12px; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); border-top: 1px solid var(--surface-2); }
.progression { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; max-width: 140px; }
.progression i { display: block; height: 100%; background: var(--bon); }
.lien-defi { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--accent); }
.raccourcis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bloc { background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; padding: 16px; display: grid; gap: 8px; align-content: start; color: var(--encre); }
.bloc h2 { font-size: var(--t-l); font-weight: 700; }
.bloc p { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.bloc-lien { text-decoration: none; transition: border-color 0.2s ease; }
.bloc-lien:hover { border-color: var(--accent); }
.voir { font-weight: 700; color: var(--accent); font-size: var(--t-s); }
.credits { font-size: var(--t-xs); color: var(--encre-2); max-width: 90ch; border-top: 1px solid var(--ligne); padding-top: 18px; display: grid; gap: 4px; }
.credits p { margin: 0; }

/* dessin de l'accueil (SVG) */
.fond-accueil { fill: #f7f9fd; }
.grille-accueil path { stroke: #e3e9f3; stroke-width: 1; fill: none; }
.fenetre-svg { fill: #ffffff; stroke: #c9d3e3; stroke-width: 1.5; }
.fenetre-tete-svg { fill: #eef2f8; }
.adresse-svg { fill: #ffffff; stroke: #d6dce6; }
.url-svg { font-family: var(--f-mono); font-size: 9.5px; fill: #3a4a60; }
.bandeau-svg { fill: #e6f0dc; }
.logo-svg { font-family: Verdana, sans-serif; font-size: 11px; font-weight: 700; fill: #3f6b25; }
.titre-page-svg { font-family: Verdana, sans-serif; font-size: 19px; font-weight: 700; fill: #2f5418; }
.ligne-texte-svg { fill: #dfe6ef; }
.lien-svg { font-family: Verdana, sans-serif; font-size: 10.5px; fill: #2c6e9b; text-decoration: underline; }
.serveur-svg { fill: #2b3445; }
.fente-svg { fill: #4a566b; }
.voyant-svg { fill: #3c4a5e; transition: fill 0.2s; }
.voyant-svg.actif { fill: #4ade80; }
.trajet-svg { fill: none; stroke: var(--web); stroke-width: 2; stroke-dasharray: 6 6; opacity: 0.55; }
.trajet-svg.retour { stroke: var(--bon); }
.enveloppe-svg rect { fill: #ffffff; stroke: var(--web); stroke-width: 2; }
.enveloppe-svg path { fill: none; stroke: var(--web); stroke-width: 1.6; }
.enveloppe-svg.retour rect, .enveloppe-svg.retour path { stroke: var(--bon); }
.arete-svg { stroke: #b9a3d6; stroke-width: 2.5; fill: none; }
.sommet-svg { fill: #ffffff; stroke: var(--reseaux); stroke-width: 2.5; transition: fill 0.3s; }
.sommet-svg.d0 { fill: var(--reseaux); }
.sommet-svg.d1 { fill: #c9a6ec; }
.sommet-svg.d2 { fill: #ecdcfb; }
.initiale-svg { font-family: var(--f-titre); font-weight: 700; font-size: 13px; fill: #2c1846; pointer-events: none; }
.etiq {
  font-size: calc(12.5px / var(--k, 1)); font-weight: 700; fill: var(--encre); font-family: var(--f-texte);
  paint-order: stroke; stroke: var(--halo); stroke-width: calc(3.5px / var(--k, 1)); stroke-linejoin: round;
}
.etiq.petite { font-size: calc(11px / var(--k, 1)); font-weight: 500; }
.accueil-dessin .etiq.petite { font-size: calc(11px / max(var(--k, 1), 0.8)); }
.etiq.mono { font-family: var(--f-mono); font-weight: 500; }

/* ---------- écran d'activité ---------- */
.activite { display: grid; grid-template-columns: minmax(0, 1fr) var(--panneau); }
.activite.sans-panneau { grid-template-columns: minmax(0, 1fr); }
.activite.sans-panneau .panneau { display: none; }
.colonne-scene { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; background: radial-gradient(115% 90% at 50% 40%, var(--scene-1), var(--scene-2)); }
.tete-scene { display: flex; gap: 8px; align-items: flex-start; padding: 10px var(--gouttiere) 0; }
.onglets { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.onglets a { background: var(--verre); padding: 5px 12px; }
.bouton-panneau {
  flex: none; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--ligne); background: var(--verre); color: var(--encre-2);
  display: grid; place-items: center; font-size: 1rem; line-height: 1;
}
.bouton-panneau:hover { border-color: var(--accent); color: var(--accent); }
.scene { position: relative; min-height: 0; overflow: hidden; }
.commandes {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px var(--gouttiere) 12px;
  background: var(--verre); border-top: 1px solid var(--ligne); font-size: var(--t-s);
}
.commandes:empty { display: none; }
.commandes .groupe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.commandes .pousse { margin-left: auto; }
.etiquette-groupe { color: var(--encre-2); font-size: var(--t-s); }
.choix { border: 1px solid var(--ligne); background: var(--surface); border-radius: 999px; padding: 5px 10px; font-size: var(--t-s); }

.panneau {
  background: var(--surface); border-left: 1px solid var(--ligne); overflow: auto; min-width: 0;
  padding: 16px clamp(16px, 2vw, 26px) 32px; display: flex; flex-direction: column; gap: 14px;
}
.choix-module {
  width: 100%; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre);
  font-size: var(--t-s); font-weight: 700;
}
.panneau h1 { font-size: var(--t-xl); font-weight: 760; }
.niveaux { margin: -6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.niveaux span { font-family: var(--f-mono); font-size: 0.72rem; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--encre-2); }
.consigne { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.info {
  border: 1px solid var(--accent); background: var(--accent-doux); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px;
  font-size: var(--t-s); animation: apparaitre 0.25s ease;
}
.info h2 { font-size: var(--t-l); font-weight: 720; color: var(--accent); }
.info p { margin: 0; }
.info code { background: rgba(255, 255, 255, 0.7); }
.info .chiffres { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
@keyframes apparaitre { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.missions { display: grid; gap: 6px; }
.missions h2 { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); display: flex; gap: 8px; align-items: center; }
.niveau-missions { letter-spacing: 0; text-transform: none; background: var(--surface-2); padding: 0 7px; border-radius: 999px; }
.missions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.missions li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: var(--t-s); align-items: start; }
.missions li::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ligne); margin-top: 1px; box-sizing: border-box;
}
.missions li.faite { color: var(--encre-2); }
.missions li.faite::before { content: "✓"; border-color: var(--bon-encre); background: var(--bon-encre); color: #ffffff; font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.missions li.vient::before { animation: tampon 0.6s ease; }
@keyframes tampon { 0% { transform: scale(0.3); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.texte { display: grid; gap: 10px; max-width: 68ch; }
.texte p { margin: 0; }
.texte p.seconde, .texte h3.seconde { border-left: 3px solid var(--web); padding-left: 10px; }
.texte p.seconde::before { content: "Seconde"; font-family: var(--f-mono); font-size: 0.7rem; color: var(--web); background: var(--web-doux); padding: 0 6px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; }
.texte p.decouverte { border-left: 3px solid var(--bon); padding-left: 10px; }
.texte h3 { font-size: var(--t-m); font-weight: 700; margin-top: 4px; }
.retenir { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; font-size: var(--t-s); }
.retenir:empty, .savais:empty { display: none; }
.retenir h2, .savais h2 { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 6px; }
.retenir ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.savais { border: 1.5px dashed var(--vif); border-radius: 12px; padding: 12px 14px; font-size: var(--t-s); }
.savais h2 { color: #8a4a00; }
.savais p { margin: 0; }
.plus-loin { border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); font-size: var(--t-s); }
.plus-loin > summary { cursor: pointer; padding: 10px 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; list-style: none; }
.plus-loin > summary::-webkit-details-marker { display: none; }
.plus-loin > summary::before { content: "+"; font-family: var(--f-mono); width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--accent-doux); color: var(--accent); flex: none; }
.plus-loin[open] > summary::before { content: "−"; }
.hors-programme { margin-left: auto; font-family: var(--f-mono); font-size: 0.7rem; font-weight: 500; color: var(--encre-2); background: var(--surface-2); padding: 0 7px; border-radius: 999px; }
.plus-loin > div { padding: 0 14px 14px; display: grid; gap: 10px; }
.plus-loin p { margin: 0; }
.suite { border-top: 1px solid var(--ligne); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.suite:empty { display: none; }
.suite a { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--surface-2); color: var(--encre); text-decoration: none; font-size: var(--t-s); }
.suite a:hover { background: var(--accent-doux); color: var(--accent); }
.suite a.fort { background: var(--accent); color: var(--accent-encre); font-weight: 700; }

.mot {
  border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: help;
  text-decoration: underline dotted var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em;
}
.mot:hover, .mot[aria-expanded="true"] { color: var(--accent); }
.bulle-mot {
  position: fixed; z-index: 30; max-width: min(320px, calc(100vw - 32px)); background: var(--bulle-fond); color: var(--bulle-texte);
  padding: 9px 12px; border-radius: 10px; font-size: var(--t-s); line-height: 1.4; box-shadow: var(--ombre);
}
.bulle-mot strong { display: block; font-family: var(--f-titre); font-size: var(--t-m); margin-bottom: 2px; }
.bulle-mot code { background: rgba(255, 255, 255, 0.16); color: #ffffff; }
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40; background: var(--bon-encre); color: #ffffff;
  padding: 10px 18px; border-radius: 18px; font-weight: 700; box-shadow: var(--ombre); animation: monter 0.35s ease;
  max-width: calc(100vw - 32px); text-align: center; width: max-content;
}
@media (max-width: 640px) { .toast { font-size: var(--t-s); } }
.toast[data-ton="neutre"] { background: var(--encre); }
/* le message ne contient aucun bouton : les clics passent au travers (il ne masque jamais une commande) */
.toast { pointer-events: none; }
body.avec-renvoi .toast { bottom: 78px; }
/* écran étroit : la pastille qui mène à l'explication (#info), quand elle s'affiche hors de l'écran */
.renvoi-info {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 39; display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px); border: 2px solid #ffffff; background: var(--accent); color: var(--accent-encre); border-radius: 999px;
  padding: 9px 18px; font: 700 var(--t-s)/1.3 var(--f-texte); box-shadow: 0 6px 20px rgba(20, 30, 50, 0.28); animation: monter 0.3s ease;
}
.renvoi-info .renvoi-titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.renvoi-info:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
.info .revenir-info { justify-self: start; margin-top: 4px; }
.info:focus { outline: none; }
.info:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@keyframes monter { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- ateliers (thème 1) ---------- */
.scene-atelier > .atelier-page, .scene-atelier > .atelier-styles, .scene-atelier > .jeu-ranger { position: absolute; inset: 0; }
.atelier-page, .atelier-styles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px var(--gouttiere) 12px; }
.col-code, .col-rendu { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.vue-code, .vue-compris { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.vue-code > .editeur-web { flex: 1 1 0; }
.onglets-code { display: flex; flex-wrap: wrap; gap: 4px; }
.onglets-code [role="tab"] {
  border: 1px solid var(--ligne); background: var(--verre); color: var(--encre-2); border-radius: 8px 8px 0 0; padding: 5px 12px;
  font-size: var(--t-s); border-bottom-color: transparent;
}
.onglets-code [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--encre); font-weight: 700; border-color: var(--accent); border-bottom-color: var(--surface); }
.onglets-code .fichier { font-family: var(--f-mono); font-size: 0.78rem; font-weight: 500; color: var(--encre-2); }
.cadenas { font-family: var(--f-mono); font-size: 0.7rem; background: var(--surface-2); color: var(--encre-2); border-radius: 999px; padding: 0 6px; font-weight: 500; }
.legende-compris { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
.code-compris {
  flex: 1 1 0; min-height: 0; overflow: auto; margin: 0; background: var(--code-fond); border: 1px solid var(--ligne); border-radius: 12px;
  padding: 10px 12px; font: 13px/1.6 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--encre);
}
.ajoute { background: var(--ajoute-doux); color: var(--ajoute); border-radius: 3px; outline: 1px solid #8fd6a8; }
.ajoute .tok-balise { color: var(--ajoute); font-weight: 600; }
.diagnostic { flex: none; max-height: 36%; overflow: auto; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 10px; font-size: var(--t-s); }
.diagnostic h3 { font-size: var(--t-s); font-family: var(--f-texte); font-weight: 700; margin-bottom: 4px; }
.diagnostic ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.diagnostic li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 2px 8px; align-items: baseline; padding: 5px 7px; border-radius: 8px; border-left: 3px solid var(--faux); background: var(--faux-doux); }
.diagnostic li.attention { border-left-color: var(--attention); background: var(--attention-doux); }
.diagnostic li.conseil { border-left-color: var(--conseil); background: var(--conseil-doux); }
.diagnostic .gravite { font-family: var(--f-mono); font-size: 0.72rem; font-weight: 600; color: var(--faux-encre); }
.diagnostic li.attention .gravite { color: var(--attention); }
.diagnostic li.conseil .gravite { color: var(--conseil); }
.diagnostic .msg { font-weight: 600; }
.diagnostic .rep { grid-column: 3; color: var(--encre-2); }
.diagnostic code { background: rgba(255, 255, 255, 0.7); }
.aller-ligne { border: 1px solid var(--ligne); background: var(--surface); border-radius: 999px; font-family: var(--f-mono); font-size: 0.72rem; padding: 0 7px; white-space: nowrap; }
.aller-ligne:hover { border-color: var(--accent); color: var(--accent); }
.diag-ok { margin: 0; color: var(--bon-encre); font-weight: 600; }
.diag-ok::before { content: "✓ "; }
.fichiers-site { margin: 0; font-size: var(--t-xs); color: var(--encre-2); line-height: 1.9; }
.fichiers-site code { white-space: nowrap; }

/* une fenêtre de navigateur autour de l'aperçu */
.fenetre { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid #c4cedd; border-radius: 12px; overflow: hidden; box-shadow: var(--ombre); }
.fenetre-tete { display: grid; gap: 6px; padding: 7px 10px 8px; background: #eef2f8; border-bottom: 1px solid var(--ligne); }
.fenetre-onglet {
  justify-self: start; max-width: 100%; font-size: var(--t-xs); padding: 3px 12px; background: var(--surface); border-radius: 8px 8px 0 0;
  border: 1px solid var(--ligne); border-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: -2px 0 -9px;
}
.fenetre-adresse { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 999px; padding: 3px 10px; font: 0.78rem/1.3 var(--f-mono); color: var(--encre-2); min-width: 0; }
.fenetre-adresse span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fenetre-adresse svg, .nav-securite svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--bon); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fenetre-corps { position: relative; flex: 1 1 0; min-height: 0; background: #ffffff; }
.cadre-rendu { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #ffffff; }

/* l'éditeur de code */
.editeur-web {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; min-height: 0; overflow-y: auto; overflow-x: hidden;
  background: var(--code-fond); border: 1px solid var(--ligne); border-radius: 12px; font-family: var(--f-mono); font-size: 13.5px; line-height: 1.6;
}
.editeur-web:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.editeur-web .gouttiere {
  background: var(--code-gouttiere); color: var(--encre-2); text-align: right; padding: 10px 6px 10px 4px; user-select: none; min-width: 3.2em;
  border-right: 1px solid var(--ligne); position: sticky; left: 0; min-height: 100%; align-self: stretch;
}
.editeur-web .gouttiere div { position: relative; padding-left: 14px; font-size: 12px; overflow: hidden; }
.editeur-web .gouttiere div.erreur { color: var(--faux-encre); font-weight: 700; }
.editeur-web .gouttiere div.erreur::before { content: "✗"; position: absolute; left: 0; top: 0; color: var(--faux-encre); }
.editeur-web .gouttiere div.attention { color: var(--attention); font-weight: 700; }
.editeur-web .gouttiere div.attention::before { content: "!"; position: absolute; left: 2px; top: 0; color: var(--attention); }
.editeur-web .gouttiere div.conseil::before { content: "•"; position: absolute; left: 2px; top: 0; color: var(--conseil); }
.editeur-web .zone { position: relative; min-width: 0; }
.editeur-web .code-colore, .editeur-web textarea {
  margin: 0; padding: 10px 12px; font: inherit; line-height: inherit; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal;
  tab-size: 2; -moz-tab-size: 2; letter-spacing: 0; border: 0;
}
.editeur-web .code-colore { position: relative; color: var(--encre); pointer-events: none; min-height: 100%; }
.editeur-web .code-colore .l { min-height: 1.6em; }
.editeur-web .code-colore .l:empty::before { content: "\200b"; }
.editeur-web textarea {
  position: absolute; inset: 0; width: 100%; height: 100%; resize: none; background: transparent; color: transparent; caret-color: var(--encre);
  outline: none; overflow: hidden;
}
.editeur-web textarea::selection { background: rgba(47, 95, 224, 0.25); color: transparent; }
.editeur-web .couche-marques { position: absolute; inset: 0; pointer-events: none; }
.editeur-web .surlignage { position: absolute; left: 0; right: 0; pointer-events: none; }
.editeur-web .surlignage.erreur { background: var(--faux-doux); border-left: 3px solid var(--faux); }
.editeur-web .surlignage.attention { background: var(--attention-doux); border-left: 3px solid var(--attention); }
.editeur-web .surlignage.conseil { background: var(--conseil-doux); }
.editeur-web .surlignage.active { background: rgba(255, 196, 0, 0.26); border-left: 3px solid var(--vif); }
.editeur-web.lecture-seule { background: #f6f7fa; }
.editeur-web.lecture-seule textarea { caret-color: transparent; }
/* le texte coloré doit tomber exactement sous la zone de texte : même police, même taille, même espacement */
.editeur-web .code-colore span { font-family: inherit; font-size: inherit; letter-spacing: inherit; }
/* fonds de surlignage très clairs : les couleurs du code (vert des valeurs, gris des commentaires) y gardent un contraste de 4,5:1 */
/* (un trait sous le texte plutôt qu'un cadre : la plage couvre plusieurs morceaux colorés, le trait reste continu) */
.editeur-web .plage-surlignee { background: #fff5d6; box-shadow: inset 0 -2px 0 #e0b25a; }
.tok-balise { color: var(--c-balise); }
.tok-attr { color: var(--c-attr); }
.tok-valeur { color: var(--c-valeur); }
.tok-comment { color: var(--c-comment); font-style: italic; }
.tok-entite { color: var(--c-entite); }
.tok-selecteur { color: var(--c-selecteur); font-weight: 600; }
.tok-prop { color: var(--c-prop); }
.tok-nombre { color: var(--c-nombre); }
.tok-ponct { color: var(--c-ponct); }
.tok-mot { color: var(--c-mot); }

/* contenu ou présentation */
.choix-feuilles { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.descr-feuille { margin: -2px 0 0; font-size: var(--t-s); color: var(--encre-2); }
.sans-feuille { margin: 0; padding: 14px; background: var(--surface); border: 1px dashed var(--ligne); border-radius: 12px; font-size: var(--t-s); color: var(--encre-2); }
.constat { flex: none; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; font-size: var(--t-s); display: grid; gap: 4px; }
.constat p { margin: 0; }
.constat .mots strong { color: var(--bon-encre); }
.essayees span { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--encre-2); margin: 1px 2px; }
.essayees span.faite { background: var(--bon-doux); color: var(--bon-encre); }
.essayees span.faite::before { content: "✓ "; }
.problemes-css { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.problemes-css li { padding: 3px 8px; border-radius: 6px; background: var(--faux-doux); border-left: 3px solid var(--faux); }
.problemes-css li.conseil { background: var(--conseil-doux); border-left-color: var(--conseil); }
.editeur-web .plage-surlignee.lien-feuille { background: #fff6d1; box-shadow: inset 0 -2px 0 #d6a800; }

/* le tri « HTML ou CSS ? » */
.jeu-ranger { overflow: auto; padding: 12px var(--gouttiere) 18px; display: grid; gap: 12px; align-content: start; }
.consigne-jeu { margin: 0; font-size: var(--t-s); color: var(--encre-2); max-width: 75ch; }
.pioche { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; }
.carte-code {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 10px; padding: 8px 11px; text-align: left;
  box-shadow: var(--ombre); max-width: 100%; touch-action: none; user-select: none;
}
.carte-code code { background: none; padding: 0; font-size: 0.86rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.carte-code:hover { border-color: var(--accent); }
.carte-code[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-doux); outline: 3px solid var(--accent); outline-offset: 1px; }
.carte-code.glisse { opacity: 0.35; }
.carte-code.fantome { box-shadow: 0 12px 30px rgba(20, 30, 50, 0.25); transform: rotate(-2deg); }
.carte-code.refus { animation: refus 0.5s ease; border-color: var(--faux); background: var(--faux-doux); }
@keyframes refus { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.bacs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bac { background: var(--verre); border: 2px dashed var(--ligne); border-radius: 14px; padding: 10px; display: grid; gap: 8px; align-content: start; min-height: 170px; }
.bac[data-bac="html"] { border-color: #93b4f0; }
.bac[data-bac="css"] { border-color: #c6a8ea; }
.bacs.en-attente .bac, .bac.survolee { border-style: solid; background: #ffffff; }
.bac.survolee { box-shadow: 0 0 0 4px var(--accent-doux); }
.bouton-bac { border: 0; background: none; text-align: left; padding: 2px 4px; display: grid; gap: 0; border-radius: 8px; }
.bouton-bac strong { font-family: var(--f-titre); font-size: var(--t-l); }
.bac[data-bac="html"] .bouton-bac strong { color: var(--web); }
.bac[data-bac="css"] .bouton-bac strong { color: var(--reseaux); }
.bouton-bac span { font-size: var(--t-s); color: var(--encre-2); }
.contenu-bac { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.contenu-bac li { background: var(--surface); border: 1px solid var(--ligne); border-radius: 8px; padding: 5px 8px; }
.contenu-bac code { background: none; padding: 0; font-size: 0.82rem; white-space: pre-wrap; }
.score-jeu { margin: 0; font-weight: 700; font-size: var(--t-s); }

/* l'inspecteur */
.scene-atelier > .atelier-inspecteur, .scene-atelier > .atelier-mini { position: absolute; inset: 0; }
.atelier-inspecteur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 12px; padding: 10px var(--gouttiere) 12px; }
.col-inspecteur { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.col-inspecteur > .vue-code, .col-inspecteur > .vue-arbre { flex: 0.9 1 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.vue-arbre .legende-compris { flex: none; }
.arbre-page {
  position: relative; flex: 1 1 0; min-height: 0; overflow: auto; background: var(--code-fond); border: 1px solid var(--ligne); border-radius: 12px;
  padding: 6px 0; font: 13px/1.55 var(--f-mono);
}
.noeud-arbre { padding: 1px 10px 1px calc(10px + var(--niveau, 0) * 15px); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.noeud-arbre:hover { background: var(--accent-doux); }
.noeud-arbre[aria-selected="true"] { background: #fff1c2; box-shadow: inset 3px 0 var(--vif); }
.noeud-arbre:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 0; }
.apercu-texte { margin-left: 8px; color: var(--encre-2); font-family: var(--f-texte); font-size: 0.86em; }
.calque-inspecteur { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.boite-inspecteur { position: absolute; }
.boite-inspecteur.boite-survol { background: rgba(47, 95, 224, 0.12); outline: 1px dashed var(--accent); }
.boite-inspecteur.boite-choisie { background: rgba(255, 196, 0, 0.16); outline: 2px solid var(--vif); }
.etiquette-boite {
  position: absolute; left: 0; bottom: 100%; margin-bottom: 3px; background: var(--encre); color: #ffffff; font: 11px/1.45 var(--f-mono);
  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}
.boite-inspecteur.boite-survol .etiquette-boite { background: var(--accent); }
.etiquette-dessous .etiquette-boite { bottom: auto; top: 100%; margin: 3px 0 0; }
.fil-ariane { flex: none; display: flex; flex-wrap: wrap; gap: 3px 4px; align-items: center; font: 12px/1.4 var(--f-mono); }
.fil-ariane button { border: 1px solid var(--ligne); background: var(--surface); border-radius: 999px; padding: 2px 9px; font: inherit; color: var(--encre); }
.fil-ariane button:hover { border-color: var(--accent); color: var(--accent); }
.fil-ariane button[aria-current] { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }
.fil-sep { color: var(--encre-2); }
.fil-vide { color: var(--encre-2); font-family: var(--f-texte); }
.styles-element { flex: 1.1 1 0; min-height: 0; overflow: auto; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px 10px; font-size: var(--t-s); display: grid; gap: 6px; align-content: start; }
.styles-vide, .note-styles { margin: 0; color: var(--encre-2); }
.note-styles { font-size: var(--t-xs); }
.styles-tete { display: grid; gap: 4px; }
.styles-tete h3 { font-size: var(--t-m); font-family: var(--f-texte); font-weight: 700; }
.calcule { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; font: 0.76rem/1.5 var(--f-mono); color: var(--encre-2); }
.etiq-calcule { font-family: var(--f-texte); font-weight: 600; }
.sous-titre-styles { margin: 4px 0 0; font-weight: 700; font-size: var(--t-s); }
.sous-titre-styles.herite { color: var(--encre-2); }
.liste-regles { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.regle-insp { border: 1px solid var(--ligne); border-radius: 10px; padding: 5px 8px 6px; background: var(--code-fond); }
.regle-insp.heritee { background: #fafafa; border-style: dashed; }
.tete-regle { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.tete-regle .sel { background: none; padding: 0; color: var(--c-selecteur); font-weight: 600; }
.spec { font-family: var(--f-mono); font-size: 0.72rem; background: var(--web-doux); color: var(--web); padding: 0 7px; border-radius: 999px; }
.ligne-css { margin-left: auto; border: 1px solid var(--ligne); background: var(--surface); border-radius: 999px; font: 0.72rem var(--f-mono); padding: 0 8px; color: var(--encre-2); }
.ligne-css:hover { border-color: var(--accent); color: var(--accent); }
.regle-insp ul { list-style: none; margin: 2px 0 0; padding: 0 0 0 10px; display: grid; gap: 1px; }
.decl { border: 0; background: none; padding: 1px 5px; font: 12.5px/1.55 var(--f-mono); text-align: left; border-radius: 4px; color: var(--encre); }
.decl:hover { background: var(--accent-doux); }
.decl .prop { color: var(--c-prop); }
.decl .val { color: var(--encre); }
.decl.ecrasee .prop, .decl.ecrasee .val { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--encre-2); }
.decl.ignoree .prop, .decl.ignoree .val { text-decoration: underline wavy var(--attention); color: var(--encre-2); }
.decl.heritee .prop { color: var(--ajoute); }
.raison { display: block; margin: 0 0 3px 5px; font-size: 0.78rem; line-height: 1.35; color: var(--encre-2); }
.raison code { font-size: 0.95em; }
.pastille-couleur { display: inline-block; width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.3); vertical-align: -1px; margin-left: 5px; }
.calcule .pastille-couleur { margin: 0 2px 0 0; }
.editeur-web .surlignage.element { background: rgba(255, 196, 0, 0.13); }
.editeur-web .gouttiere div.element { color: #a35200; font-weight: 700; }
.editeur-web .plage-surlignee.balise-choisie { background: #fff6d1; box-shadow: inset 0 -2px 0 var(--vif); }
.editeur-web .plage-surlignee.regle-choisie { background: #fff7da; box-shadow: inset 0 -2px 0 #d6a800; }
.editeur-web .plage-surlignee.ajout-mini { background: #e6f9ec; box-shadow: inset 0 -2px 0 #4fae72; }
.aide-inspecteur { font-size: var(--t-xs); }

/* le mini-site */
.atelier-mini { display: grid; grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr); gap: 12px; padding: 10px var(--gouttiere) 12px; }
.col-mini-gauche, .col-mini-droite { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.vue-liens, .vue-images { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.vue-images { overflow: auto; }
/* le graphe est dessiné à l'échelle 1 (js/act-mini-site.js) : les tailles des textes ci-dessous sont celles de l'écran */
.graphe-site { flex: 1 1 0; min-height: 200px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; }
.graphe-site svg { display: block; width: 100%; height: 100%; }
.graphe-site.defile { overflow-y: auto; }
.noeud-mini .cadre-noeud { fill: #ffffff; stroke: var(--bon); stroke-width: 2; }
.noeud-mini.accueil .cadre-noeud { stroke-width: 3; }
.noeud-mini.inaccessible .cadre-noeud { fill: var(--faux-doux); stroke: var(--faux); }
.noeud-mini.introuvable .cadre-noeud { fill: #ffffff; stroke: var(--faux); stroke-dasharray: 5 4; }
.noeud-mini.externe .cadre-noeud { fill: var(--surface-2); stroke: #7a8494; }
.noeud-mini.externe.introuvable .cadre-noeud { stroke: var(--faux); }
.noeud-mini.courant .cadre-noeud { stroke: var(--accent); stroke-width: 3.5; }
.noeud-mini.cible .cadre-noeud { fill: var(--accent-doux); stroke: var(--accent); stroke-width: 3.5; }
.noeud-mini[data-chemin] { cursor: grab; }
.noeud-mini[data-chemin]:focus { outline: none; }
/* focus clavier : un anneau en pointillés foncés autour de la page, bien distinct du cadre bleu de la page ouverte */
.anneau-focus { fill: none; stroke: none; pointer-events: none; }
.noeud-mini[data-chemin]:focus-visible .anneau-focus { stroke: #14213d; stroke-width: 2.5; stroke-dasharray: 6 3; }
.titre-noeud { font: 650 12.5px var(--f-texte); fill: var(--encre); pointer-events: none; }
.chemin-noeud { font: 11.5px var(--f-mono); fill: var(--encre-2); pointer-events: none; }
.noeud-mini.externe .chemin-noeud, .noeud-mini.introuvable .chemin-noeud { font-family: var(--f-texte); }
.noeud-mini.inaccessible .titre-noeud, .noeud-mini.introuvable .titre-noeud { fill: #8c1d17; }
.pastille-clics rect { fill: var(--bon-encre); stroke: #ffffff; stroke-width: 1.5; }
.noeud-mini.inaccessible .pastille-clics rect { fill: var(--faux-encre); }
.noeud-mini.accueil .pastille-clics rect { fill: var(--web); }
.pastille-clics text { font: 600 11.5px var(--f-mono); fill: #ffffff; pointer-events: none; }
.arete { fill: none; stroke: #64748b; stroke-width: 2; }
.arete.casse { stroke: var(--faux); stroke-dasharray: 6 4; }
.arete.externe { stroke: #9aa3b1; stroke-dasharray: 2 4; }
.aretes-dessus { pointer-events: none; }
.halo-arete { fill: none; stroke: #ffffff; stroke-width: 6; stroke-linecap: round; opacity: 0.9; }
.arete.en-cours { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 5 4; pointer-events: none; }
.fleche-ok path { fill: #64748b; }
.fleche-casse path { fill: var(--faux); }
.fleche-externe path { fill: #9aa3b1; }
.bilan-graphe { margin: 0; font-size: var(--t-s); }
.bilan-graphe .rouge, .distances-graphe .rouge { color: var(--faux-encre); font-weight: 700; }
.distances-graphe { margin: -4px 0 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--t-xs); color: var(--encre-2); }
.distances-graphe span { white-space: nowrap; }
.distances-graphe code { font-size: 0.95em; }
.legende-graphe { margin: -4px 0 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--t-xs); color: var(--encre-2); }
.leg::before { content: ""; display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 2px solid var(--bon); background: #ffffff; }
.leg-rouge::before { border-color: var(--faux); background: var(--faux-doux); }
.leg-casse::before { height: 0; border-width: 2px 0 0; border-style: dashed; border-color: var(--faux); border-radius: 0; vertical-align: 3px; }
.leg-externe::before { height: 0; border-width: 2px 0 0; border-style: dotted; border-color: #7a8494; border-radius: 0; vertical-align: 3px; }
.ajout-lien { flex: none; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: var(--t-s); }
.ajout-lien select { max-width: 100%; }
.fichiers-mini { flex: none; display: flex; flex-wrap: wrap; gap: 4px; }
.fichier-mini { border: 1px solid var(--ligne); background: var(--verre); border-radius: 8px; padding: 3px 9px; font: 0.78rem var(--f-mono); color: var(--encre-2); }
.fichier-mini:hover { border-color: var(--accent); }
.fichier-mini[aria-selected="true"] { background: var(--surface); color: var(--encre); border-color: var(--accent); font-weight: 600; }
.fichier-mini.inaccessible { border-color: var(--faux); color: var(--faux-encre); }
.col-mini-droite > .vue-code { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.col-mini-droite > .fenetre { flex: 1.15 1 0; }
.diag-mini { max-height: 26%; padding: 6px 8px; }
.diag-mini li { grid-template-columns: auto minmax(0, 1fr); }
.banque-images { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); gap: 8px; }
.banque-images li { min-width: 0; }
.carte-image { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; justify-items: start; text-align: left; border: 1px solid var(--ligne); background: var(--surface); border-radius: 10px; padding: 6px; color: var(--encre); }
.carte-image:hover { border-color: var(--accent); }
.carte-image[aria-pressed="true"] { border-color: var(--accent); outline: 3px solid var(--accent-doux); }
.carte-image img { width: 100%; height: auto; aspect-ratio: 400 / 260; object-fit: cover; border-radius: 6px; display: block; background: var(--surface-2); }
.carte-image.vue::after { content: "✓ licence lue"; font: 0.7rem var(--f-mono); color: var(--bon-encre); }
.titre-carte { font-size: var(--t-xs); font-weight: 600; line-height: 1.3; }
.badge-licence { display: inline-block; max-width: 100%; font: 600 0.7rem/1.4 var(--f-mono); padding: 1px 7px; border-radius: 10px; background: var(--surface-2); color: var(--encre); white-space: normal; overflow-wrap: anywhere; }
.badge-licence.domaine-public { background: var(--bon-doux); color: var(--bon-encre); }
.badge-licence.cc-by { background: var(--web-doux); color: #1647a6; }
.badge-licence.cc-by-nc { background: var(--reseaux-doux); color: #6b2aa8; }
.badge-licence.tous-droits { background: var(--faux-doux); color: var(--faux-encre); }
.fiche-image:empty { display: none; }
.fiche-image { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; font-size: var(--t-s); }
.tete-fiche { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: start; }
.tete-fiche img { width: 120px; border-radius: 6px; display: block; }
.tete-fiche h3 { font-size: var(--t-m); }
.tete-fiche p { margin: 2px 0 0; }
.origine-image { font-size: var(--t-xs); color: var(--encre-2); }
.question-licence { margin: 0; font-weight: 700; }
.choix-licence { display: grid; gap: 5px; }
.choix-licence button { text-align: left; border: 1px solid var(--ligne); background: var(--surface); border-radius: 8px; padding: 6px 10px; color: var(--encre); }
.choix-licence button:hover:not(:disabled) { border-color: var(--accent); }
.choix-licence button.bon { background: var(--bon-doux); border-color: var(--bon); color: var(--bon-encre); font-weight: 700; }
.choix-licence button.faux { background: var(--faux-doux); border-color: var(--faux); color: var(--faux-encre); }
.choix-licence button:disabled { cursor: default; }
.reponse-licence { display: grid; gap: 6px; }
.reponse-licence p { margin: 0; }
.verdict { padding: 6px 10px; border-radius: 8px; border-left: 3px solid var(--bon); background: var(--bon-doux); }
.verdict.non { border-left-color: var(--faux); background: var(--faux-doux); }
.note-image { color: var(--encre-2); }
.mention-a-ecrire { padding: 6px 10px; border: 1px dashed var(--accent); border-radius: 8px; }
.mention-a-ecrire span { font-weight: 700; }
.mention-a-ecrire q { quotes: none; font-family: var(--f-mono); font-size: 0.86em; }
.actions-fiche { display: flex; flex-wrap: wrap; gap: 6px; }
.bilan-images { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; font-size: var(--t-s); }
.bilan-images h3 { font-size: var(--t-s); font-family: var(--f-texte); margin-bottom: 4px; }
.bilan-images p { margin: 0; color: var(--encre-2); }
.bilan-images ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bilan-images li { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; padding: 3px 8px; border-radius: 8px; border-left: 3px solid var(--bon); background: var(--bon-doux); }
.bilan-images li.sans-mention { border-left-color: var(--attention); background: var(--attention-doux); }
.bilan-images li.interdite, .bilan-images li.absente { border-left-color: var(--faux); background: var(--faux-doux); }
.etat-image { color: var(--encre-2); font-size: var(--t-xs); }
.aller-page { border: 1px solid var(--ligne); background: var(--surface); border-radius: 999px; font: 0.72rem var(--f-mono); padding: 0 7px; }
.aller-page:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- le navigateur simulé ---------- */
.navigateur { display: grid; gap: 10px; }
.nav-barre { display: flex; align-items: center; gap: 6px; background: #eef2f8; border: 1px solid var(--ligne); border-radius: 12px 12px 0 0; padding: 8px; margin-bottom: -10px; }
.nav-icone { flex: none; width: 34px; height: 34px; border-radius: 999px; border: 1px solid transparent; background: transparent; display: grid; place-items: center; color: var(--encre); }
.nav-icone:hover:not(:disabled) { background: #ffffff; border-color: var(--ligne); }
.nav-icone:disabled { opacity: 0.35; cursor: default; }
.nav-icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nav-adresse { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: #ffffff; border: 1px solid var(--ligne); border-radius: 999px; padding: 3px 4px 3px 10px; }
.nav-adresse:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.nav-adresse input { flex: 1; min-width: 0; border: 0; background: transparent; font: 0.86rem var(--f-mono); padding: 4px 0; outline: none; }
/* l'adresse lisible, posée sur le champ hors focus : le nom de domaine (en gras) ne disparaît jamais, le chemin s'abrège
   d'abord, puis le début de l'adresse (comme dans un vrai navigateur) */
.nav-champ { position: relative; flex: 1; min-width: 0; display: flex; }
.nav-champ input { width: 100%; }
.nav-champ.lisible input { color: transparent; }
.nav-lisible { display: none; position: absolute; inset: 0; align-items: center; white-space: nowrap; overflow: hidden; pointer-events: none; font: 0.86rem var(--f-mono); color: var(--encre-2); }
.nav-champ.lisible .nav-lisible { display: flex; }
.nav-lisible span { white-space: pre; }
.nav-lisible .l-debut { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-lisible .l-domaine { flex: none; font-weight: 700; color: var(--encre); }
.nav-lisible .l-fin { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* dans une fenêtre étroite (colonne de « L'URL en morceaux », de « Requête et réponse »…), la barre d'adresse prend toute
   une ligne sous les boutons : l'adresse se lit (c'est la leçon du thème 2) */
.nav-fenetre { container-type: inline-size; }
@container (max-width: 560px) {
  .nav-barre { flex-wrap: wrap; }
  .nav-adresse { flex-basis: 100%; order: 5; }
}
.nav-securite { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); white-space: nowrap; }
.nav-securite[data-etat="non-sur"] { color: var(--faux-encre); font-weight: 700; }
.nav-securite[data-etat="non-sur"] svg, .nav-securite[data-etat="erreur"] svg { stroke: var(--faux); }
.nav-aller { border: 0; background: var(--accent); color: var(--accent-encre); border-radius: 999px; padding: 4px 12px; font-size: var(--t-s); font-weight: 700; }
.nav-favoris { display: flex; flex-wrap: wrap; gap: 4px; background: #eef2f8; border: 1px solid var(--ligne); border-top: 0; padding: 0 8px 8px; margin-bottom: -10px; }
.nav-favoris button { border: 1px solid var(--ligne); background: #ffffff; border-radius: 999px; padding: 2px 10px; font-size: var(--t-xs); }
.nav-favoris button:hover { border-color: var(--accent); color: var(--accent); }
.nav-onglet { font-size: var(--t-xs); color: var(--encre-2); background: #eef2f8; border: 1px solid var(--ligne); border-top: 0; padding: 0 12px 6px; margin-bottom: -10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-page { position: relative; height: min(62vh, 560px); min-height: 320px; border: 1px solid var(--ligne); border-radius: 0 0 12px 12px; overflow: hidden; background: #ffffff; }
.nav-echanges, .nav-cookies { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; font-size: var(--t-s); }
.nav-echanges h3, .nav-cookies h3 { font-size: var(--t-m); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.nav-echanges h3 span, .nav-cookies h3 span { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; color: var(--encre-2); }
.liste-echanges { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.echange { width: 100%; display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; text-align: left; border: 1px solid transparent; background: var(--surface-2); border-radius: 8px; padding: 4px 8px; font: 0.8rem/1.4 var(--f-mono); }
.echange:hover { border-color: var(--accent); }
.echange.choisi { border-color: var(--accent); background: var(--accent-doux); }
.echange .methode { font-weight: 600; }
.echange .cible { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.echange .hote { color: var(--encre-2); }
.echange .hote.tiers { color: var(--faux-encre); font-weight: 600; }
.echange .genre { color: var(--encre-2); font-size: 0.74rem; }
.code { font-family: var(--f-mono); }
.echange .code, .detail-echange .code { border-radius: 999px; padding: 0 8px; font-weight: 600; background: var(--bon-doux); color: var(--bon-encre); }
.code.redirection { background: var(--attention-doux); color: var(--attention); }
.code.erreur, .code.erreur-serveur { background: var(--faux-doux); color: var(--faux-encre); }
.code.bloque { background: var(--encre); color: #ffffff; }
.pastille-cookie, .pastille-tiers { font-size: 0.7rem; border-radius: 999px; padding: 0 6px; background: #fbe7c8; color: #7a4400; }
.pastille-tiers { background: var(--faux-doux); color: var(--faux-encre); }
.detail-echange { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.detail-echange h4 { font-size: var(--t-s); font-family: var(--f-texte); margin-bottom: 4px; }
.texte-http { margin: 0; background: #1d2333; color: #e7ecf5; border-radius: 10px; padding: 8px 10px; font: 0.78rem/1.5 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 300px; overflow: auto; }
.http-premiere { color: #ffd479; font-weight: 600; }
.http-entete { color: #8fc1ff; }
.http-cookie { color: #ffb38a; }
.http-corps { color: #b9c3d6; }
.boite-cookies { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.boite-cookies ul { margin: 2px 0 0; padding-left: 1.1em; }
.boite-cookies li span { color: var(--encre-2); font-size: var(--t-xs); }
.page-mise.large { max-width: 1100px; }
.intro-page { margin: 0; color: var(--encre-2); max-width: 75ch; }

/* ---------- thème 2 : adresses, requêtes et serveurs ---------- */
.scene-atelier > .atelier-url, .scene-atelier > .atelier-requete { position: absolute; inset: 0; }
.atelier-url { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px var(--gouttiere) 12px; }
.atelier-requete { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 12px; padding: 10px var(--gouttiere) 12px; }
.col-url-exercice, .col-req-trajet { min-height: 0; min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px; }
/* (6 px de marge : le contour de focus des cases et des boutons n'est pas rogné par la colonne qui défile ; et quand le
   focus fait défiler la colonne, l'élément s'arrête à 10 px du bord) */
.col-url-exercice, .col-req-trajet, .col-cs-analyse, .panneau { scroll-padding: 10px; }
.vue-decouper:focus:not(:focus-visible), .vue-parametres:focus:not(:focus-visible), .vue-pieges:focus:not(:focus-visible) { outline: none; }
.retour-morceau { border: 1px solid var(--accent); background: var(--accent-doux); border-radius: 10px; padding: 8px 12px; display: grid; gap: 4px; font-size: var(--t-s); }
.retour-morceau[data-ton="bon"] { border-color: var(--bon); background: var(--bon-doux); }
.retour-morceau[data-ton="faux"] { border-color: var(--faux); background: var(--faux-doux); }
.retour-morceau p { margin: 0; }
.retour-morceau .titre-retour { font-weight: 700; }
.col-url-navigateur, .col-req-navigateur { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.col-req-navigateur .trajet { margin-bottom: 4px; }
.note-navigateur { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
.navigateur.plein { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.navigateur.plein .nav-page { flex: 1 1 0; height: auto; min-height: 220px; }
button.nav-securite { border: 0; background: transparent; padding: 2px 5px; border-radius: 999px; color: inherit; font: inherit; font-size: var(--t-xs); }
button.nav-securite:hover { background: var(--surface-2); }
#req-essai { max-width: 16em; text-overflow: ellipsis; }
.icone-cadenas { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }

/* les cinq morceaux d'une adresse : une couleur chacun (texte foncé sur fond clair, contraste d'au moins 6:1) */
.m-protocole { --m-fond: #e4edff; --m-encre: #1647a6; --m-bord: #1d5fd8; }
.m-hote { --m-fond: #f1e7fb; --m-encre: #6b2aa8; --m-bord: #8a3fd1; }
.m-chemin { --m-fond: #dff3e5; --m-encre: #166534; --m-bord: #1f7a3d; }
.m-parametres { --m-fond: #fff1d6; --m-encre: #8a4a00; --m-bord: #e07a0b; }
.m-ancre { --m-fond: #dcf3f4; --m-encre: #0f5e63; --m-bord: #138a91; }
.vue-decouper, .vue-parametres, .vue-pieges { display: flex; flex-direction: column; gap: 10px; }
.serie-url { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.serie-url .faites { color: var(--bon-encre); font-weight: 600; }
.bande-url { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 3px; padding: 12px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; font: 600 0.95rem/1.3 var(--f-mono); }
.morceau-url {
  border: 2px solid var(--accent); background: #ffffff; color: var(--encre); border-radius: 8px; padding: 6px 8px; font: inherit; text-align: left;
  overflow-wrap: anywhere; max-width: 100%; box-shadow: var(--ombre); touch-action: none; user-select: none;
}
.morceau-url:hover { background: var(--accent-doux); }
.morceau-url[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 1px; background: var(--accent-doux); }
.morceau-url.glisse { opacity: 0.35; }
.morceau-url.fantome { box-shadow: 0 12px 30px rgba(20, 30, 50, 0.25); transform: rotate(-2deg); }
.morceau-url.refus { animation: refus 0.5s ease; border-color: var(--faux); background: var(--faux-doux); }
.morceau-url.place { background: var(--m-fond); color: var(--m-encre); border-color: var(--m-bord); box-shadow: none; cursor: default; }
.sep-url { color: var(--encre-2); }
.cases-url { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); gap: 8px; }
.case-url {
  display: grid; gap: 4px; align-content: start; text-align: left; min-height: 72px; padding: 8px 10px; border: 2px dashed var(--m-bord);
  background: rgba(255, 255, 255, 0.72); border-radius: 12px; color: var(--encre);
}
.case-url strong { font-family: var(--f-titre); font-size: var(--t-m); color: var(--m-encre); }
.contenu-case { font: 0.84rem/1.35 var(--f-mono); overflow-wrap: anywhere; color: var(--m-encre); }
.cases-url.en-attente .case-url, .case-url.survolee { border-style: solid; background: #ffffff; }
.case-url.survolee { box-shadow: 0 0 0 4px var(--accent-doux); }
.case-url.remplie { border-style: solid; background: var(--m-fond); }
.case-url.vide-ici { border-style: dotted; }
.case-url.vide-ici .contenu-case { font-family: var(--f-texte); font-style: italic; color: var(--encre-2); }
.bilan-url:empty { display: none; }
.bilan-url { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; font-size: var(--t-s); }
.bilan-url p { margin: 0; }
.bravo { font-weight: 700; color: var(--bon-encre); }
.url-couleurs { font-family: var(--f-mono); overflow-wrap: anywhere; }
.m-bloc { background: var(--m-fond); color: var(--m-encre); border-radius: 4px; padding: 0 1px; }
.m-sep { color: var(--encre-2); }
.url-couleurs.avec-etiquettes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 2px; font-size: 0.9rem; }
.url-couleurs.avec-etiquettes .m-bloc, .url-couleurs.avec-etiquettes .m-sep { display: inline-grid; gap: 2px; }
.url-couleurs.avec-etiquettes .m-bloc { padding: 3px 6px; border-bottom: 3px solid var(--m-bord); }
.url-couleurs.avec-etiquettes .m-sep { padding: 3px 0; }
.m-nom { font: 600 0.7rem/1.2 var(--f-texte); text-transform: uppercase; letter-spacing: 0.04em; }
.domaine-decoupe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; }
.domaine-decoupe .etiquette-groupe { flex-basis: 100%; }
.d-part { display: inline-grid; justify-items: center; gap: 1px; }
.d-part small { font-size: 0.72rem; color: var(--encre-2); }
.d-point { font-family: var(--f-mono); font-weight: 700; padding-top: 2px; }
.note-securite { display: flex; gap: 6px; align-items: center; padding: 5px 9px; border-radius: 8px; }
.note-securite.sur { background: var(--bon-doux); color: var(--bon-encre); }
.note-securite.non-sur { background: var(--faux-doux); color: var(--faux-encre); }
.actions-bilan { display: flex; flex-wrap: wrap; gap: 6px; }

/* étape 2 : les paramètres */
.choix-site-param, .choix-message { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.url-vivante { margin: 0; padding: 8px 10px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 10px; font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.url-vivante:empty { display: none; }
.form-param { display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px; }
.lignes-param { display: grid; gap: 6px; }
.ligne-param { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr) 32px; gap: 6px; align-items: center; }
.tete-param { font-size: var(--t-xs); color: var(--encre-2); font-weight: 600; }
.champ-param { min-width: 0; width: 100%; border: 1px solid var(--ligne); border-radius: 8px; padding: 6px 8px; font: 0.9rem var(--f-mono); background: var(--code-fond); }
.champ-param:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux), 0 0 0 4px var(--accent); }
.egal { font-family: var(--f-mono); font-weight: 700; color: var(--encre-2); }
.retirer-param { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--ligne); background: var(--surface); font-size: 1.1rem; line-height: 1; color: var(--encre-2); }
.retirer-param:hover { border-color: var(--faux); color: var(--faux-encre); }
.actions-param { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; }
.lecture-serveur:empty { display: none; }
.lecture-serveur { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; font-size: var(--t-s); }
.lecture-serveur h3 { font-size: var(--t-s); font-family: var(--f-texte); font-weight: 700; margin-bottom: 4px; }
.lecture-serveur ul { margin: 0; padding-left: 1.1em; display: grid; gap: 3px; }
.lecture-serveur li.inconnu { color: var(--attention); }
.lecture-serveur p { margin: 0; }
.valeurs-connues, .carnet-sites { margin: 0; font-size: var(--t-xs); color: var(--encre-2); line-height: 1.9; }
.carnet-sites code { white-space: nowrap; }
.lien-retour { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; font: inherit; text-align: left; }

/* étape 3 : les adresses pièges */
.message-piege { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; box-shadow: var(--ombre); }
.tete-message { background: #eef2f8; border-bottom: 1px solid var(--ligne); padding: 8px 12px; font-size: var(--t-s); display: grid; gap: 2px; }
.tete-message p { margin: 0; }
.tete-message span { color: var(--encre-2); }
.texte-message { margin: 0; padding: 10px 12px 4px; font-size: var(--t-s); }
.liens-message { list-style: none; margin: 0; padding: 6px 12px 10px; display: grid; gap: 8px; }
.lien-piege { border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 10px; display: grid; gap: 6px; background: var(--code-fond); }
.lien-piege[data-etat="sur"] { border-color: var(--bon); background: #f3fbf5; }
.lien-piege[data-etat="non-securise"] { border-color: var(--attention); background: #fffaf0; }
.lien-piege[data-etat="piege"] { border-color: var(--faux); background: #fff6f5; }
.tete-lien { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.faux-lien { border: 0; background: none; padding: 0; color: #1a4fc4; text-decoration: underline; font: 0.86rem/1.4 var(--f-mono); text-align: left; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.faux-lien:hover { color: #0f3a99; }
.voir-adresse { border: 1px solid var(--ligne); background: var(--surface); border-radius: 999px; padding: 1px 9px; font-size: var(--t-xs); color: var(--encre); }
.adresse-reelle { margin: 0; font-size: var(--t-xs); }
.verdicts { display: flex; flex-wrap: wrap; gap: 4px; }
.verdicts button { border: 1px solid var(--ligne); background: var(--surface); border-radius: 999px; padding: 4px 12px; font-size: var(--t-s); color: var(--encre); }
.verdicts button:hover:not(:disabled) { border-color: var(--accent); }
.verdicts button.bon { background: var(--bon-doux); border-color: var(--bon); color: var(--bon-encre); font-weight: 700; }
.verdicts button.faux { background: var(--faux-doux); border-color: var(--faux); color: var(--faux-encre); text-decoration: line-through; }
.verdicts button:disabled { cursor: default; }
.verdicts button:disabled:not(.bon):not(.faux) { opacity: 0.6; }
.explication-lien { font-size: var(--t-s); display: grid; gap: 4px; }
.explication-lien p { margin: 0; }
.adresse-lue { font-family: var(--f-mono); font-size: 0.84rem; overflow-wrap: anywhere; }
.a-domaine { font-weight: 700; outline: 2px solid currentColor; outline-offset: 1px; border-radius: 3px; padding: 0 2px; }
.a-domaine mark { background: var(--faux-doux); color: var(--faux-encre); text-decoration: underline; }
.a-http { color: var(--faux-encre); font-weight: 700; }
.a-https { color: var(--bon-encre); font-weight: 700; }
.a-utilisateur { color: var(--encre-2); }
.barre-etat { margin: 0; min-height: 1.8em; padding: 3px 12px; background: #eef2f8; border-top: 1px solid var(--ligne); font-size: var(--t-xs); color: var(--encre-2); overflow-wrap: anywhere; }

/* requête et réponse : le trajet */
.trajet { flex: none; min-width: 0; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; aspect-ratio: 560 / 166; max-height: 200px; contain: inline-size; }
.trajet svg { display: block; width: 100%; height: 100%; }
.fond-trajet { fill: #f7f9fd; }
.ecran-svg { fill: #2b3445; }
.ecran-interieur-svg { fill: #ffffff; }
.ligne-ecran-svg { fill: #c9d3e3; }
.socle-svg { fill: #4a566b; }
.voie-svg { fill: none; stroke: var(--web); stroke-width: 2; stroke-dasharray: 6 6; opacity: 0.6; }
.voie-svg.retour, .pointe-svg.retour { stroke: var(--bon); }
.pointe-svg { fill: none; stroke: var(--web); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.legende-voie { fill: var(--encre-2); }
.env-svg .env-corps { fill: #ffffff; stroke: var(--web); stroke-width: 2; }
.env-svg .env-rabat { fill: none; stroke: var(--web); stroke-width: 1.6; }
.env-svg.post .env-corps, .env-svg.post .env-rabat { stroke: #6b2aa8; }
.env-svg.retour .env-corps, .env-svg.retour .env-rabat { stroke: var(--bon-encre); }
.env-svg.retour[data-famille="redirection"] .env-corps, .env-svg.retour[data-famille="redirection"] .env-rabat { stroke: var(--attention); }
.env-svg.retour[data-famille="erreur"] .env-corps, .env-svg.retour[data-famille="erreur"] .env-rabat { stroke: var(--faux); }
.env-cadenas rect { fill: var(--bon-encre); }
.env-cadenas path { fill: none; stroke: var(--bon-encre); stroke-width: 1.6; }
.point-svg { fill: var(--web); }
.point-svg[data-famille="erreur"] { fill: var(--faux); }
.croix-svg { fill: var(--faux-encre); }
.wifi-svg path { fill: none; stroke: var(--attention); stroke-width: 2; stroke-linecap: round; }
.tete-espion { fill: #2b3445; }
.oeil-espion { fill: #ffffff; }
.pupille-espion { fill: #2b3445; }
.fil-espion { stroke: var(--attention); stroke-width: 2; stroke-dasharray: 3 3; }
.bulle-espion { fill: var(--encre-2); }
.bulle-espion.lisible { fill: var(--faux-encre); font-weight: 700; }

/* requête et réponse : les échanges et le détail des messages */
.liste-req:empty { display: none; }
.liste-req h3, .carte-http h3 { font-size: var(--t-m); display: flex; gap: 4px 8px; align-items: baseline; flex-wrap: wrap; }
.liste-req h3 span, .carte-http h3 > span { font-family: var(--f-texte); font-size: var(--t-xs); font-weight: 500; color: var(--encre-2); }
.liste-req ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.ech-req { width: 100%; display: grid; grid-template-columns: 3.6em minmax(0, 1fr) auto auto; gap: 8px; align-items: center; text-align: left; border: 1px solid var(--ligne); background: var(--surface); border-radius: 8px; padding: 4px 8px; font: 0.8rem/1.4 var(--f-mono); color: var(--encre); }
.ech-req:hover { border-color: var(--accent); }
.ech-req.choisi { border-color: var(--accent); background: var(--accent-doux); }
.ech-req .methode { font-weight: 600; }
.ech-req .cible { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ech-req .genre { color: var(--encre-2); font-size: 0.74rem; }
.ech-req .code { border-radius: 999px; padding: 0 8px; font-weight: 600; background: var(--bon-doux); color: var(--bon-encre); }
.code.attente { background: var(--surface-2); color: var(--encre-2); }
.sans-requete { margin: 0; font-size: var(--t-s); color: var(--faux-encre); }
.cartes-http { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.carte-http { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; font-size: var(--t-s); align-content: start; min-width: 0; }
.carte-requete { border-top: 4px solid var(--web); }
.carte-reponse { border-top: 4px solid var(--bon); }
.carte-espion { border-top: 4px solid var(--attention); }
.carte-http p { margin: 0; }
.carte-http h4 { font-size: var(--t-s); font-family: var(--f-texte); font-weight: 700; margin-bottom: 3px; }
.vide-http { color: var(--encre-2); }
.ligne-http { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-family: var(--f-mono); }
.morceau-http { border: 1px solid var(--ligne); background: var(--code-fond); border-radius: 6px; padding: 1px 7px; font: 600 0.82rem/1.5 var(--f-mono); color: var(--encre); text-align: left; overflow-wrap: anywhere; max-width: 100%; }
.morceau-http:hover { border-color: var(--accent); }
.morceau-http.methode { background: var(--web-doux); color: #1647a6; }
.morceau-http.cookie { background: #fbe7c8; color: #7a4400; }
.morceau-http.code { background: var(--bon-doux); color: var(--bon-encre); }
.morceau-http.code.redirection { background: var(--attention-doux); color: var(--attention); }
.morceau-http.code.erreur, .morceau-http.code.erreur-serveur { background: var(--faux-doux); color: var(--faux-encre); }
.morceau-statique { font: 600 0.82rem var(--f-mono); color: var(--encre-2); }
.vers-http { color: var(--encre-2); font-size: var(--t-xs); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.non-chiffre { color: var(--faux-encre); font-weight: 700; }
.entetes-http { margin: 0; display: grid; gap: 2px; font: 0.8rem/1.45 var(--f-mono); }
.entetes-http > div { display: grid; grid-template-columns: minmax(8.5em, auto) minmax(0, 1fr); gap: 6px; align-items: baseline; }
.entetes-http dt .morceau-http { padding: 0 6px; }
.entetes-http dd { margin: 0; overflow-wrap: anywhere; }
.entetes-http .depose dd { color: #7a4400; font-weight: 600; }
.params-http ul, .voit-espion, .secrets { margin: 0; padding-left: 1.1em; display: grid; gap: 2px; }
.corps-http pre, .charabia { margin: 0; background: var(--code-fond); border: 1px solid var(--ligne); border-radius: 8px; padding: 6px 8px; font: 0.76rem/1.45 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; }
.charabia { color: var(--encre-2); }
.suite-corps { color: var(--encre-2); font-style: italic; }
.sens-code { color: var(--encre-2); }
.cookie-depose { color: #7a4400; font-weight: 600; }
.cookie-refuse { color: var(--faux-encre); }
.certificat-ligne { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; color: var(--bon-encre); }
.voir-certificat, .voir-brut { border: 1px solid var(--ligne); background: var(--surface); border-radius: 999px; padding: 1px 10px; font-size: var(--t-xs); justify-self: start; color: var(--encre); }
.voir-certificat:hover, .voir-brut:hover { border-color: var(--accent); color: var(--accent); }
.carte-http .texte-http { max-height: 220px; }
.carte-http h3 .etat-chiffre { color: var(--bon-encre); font-weight: 700; display: inline-flex; gap: 3px; align-items: center; }
.carte-http h3 .etat-clair { color: var(--faux-encre); font-weight: 700; }
.secrets li.mdp { color: var(--faux-encre); font-weight: 700; }
mark.mdp { background: #ffd0cc; color: #7f1010; border-radius: 3px; }
.memoire-nav { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; font-size: var(--t-s); }
.memoire-nav > summary { cursor: pointer; padding: 8px 12px; font-weight: 700; }
.contenu-memoire { padding: 0 12px 10px; display: grid; gap: 4px; }
.contenu-memoire h4 { font-size: var(--t-s); font-family: var(--f-texte); margin-top: 4px; }
.contenu-memoire p { margin: 0; color: var(--encre-2); }
.historique-req, .cookies-req { margin: 0; padding-left: 1.4em; display: grid; gap: 2px; font-size: var(--t-xs); }
.historique-req li.avec-params code { background: var(--attention-doux); }
.cookies-req span { color: var(--encre-2); }
.note-memoire { font-size: var(--t-xs); }

/* client ou serveur ? : bleu (trait plein) pour le serveur, orange (pointillés) pour le navigateur ; même code dans la
   page affichée (STYLE_COULEURS de js/act-client-serveur.js). Textes : #1647a6 et #9a3412 (contraste d'au moins 7:1). */
.scene-atelier > .atelier-cs { position: absolute; inset: 0; }
.atelier-cs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px var(--gouttiere) 12px; }
.col-cs-navigateur { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.col-cs-analyse { min-height: 0; min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.legende-cs { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: var(--t-xs); color: var(--encre); }
.cle-cs { display: inline-flex; gap: 6px; align-items: center; }
.cle-cs i { width: 22px; height: 14px; border-radius: 3px; flex: none; }
.cle-cs.serveur i { border: 2px solid #1d5fd8; background: rgba(29, 95, 216, 0.1); }
.cle-cs.navigateur i { border: 3px dashed #c2410c; background: #ffedd5; }
.etat-js { font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.etat-js.oui { background: var(--bon-doux); color: var(--bon-encre); }
.etat-js.non { background: var(--faux-doux); color: var(--faux-encre); }
.outils-legende { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-left: auto; }
.outils-legende .case { display: inline-flex; gap: 5px; align-items: center; }
.bouton-inspecter { border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px; padding: 3px 11px; font-size: var(--t-xs); }
.bouton-inspecter:hover { border-color: var(--accent); }
.bouton-inspecter[aria-pressed="true"] { background: #111827; border-color: #111827; color: #ffffff; }
.aide-inspecter { margin: 0; font-size: var(--t-xs); background: #111827; color: #ffffff; border-radius: 8px; padding: 4px 10px; }
.compteurs-cs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tuile-cs { margin: 0; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 6px 12px; display: flex; gap: 8px; align-items: baseline; font-size: var(--t-s); line-height: 1.3; }
.tuile-cs strong { font: 760 1.7rem/1 var(--f-titre); font-variant-numeric: tabular-nums; }
.tuile-cs.serveur { border: 2px solid #1d5fd8; }
.tuile-cs.serveur strong { color: #1647a6; }
.tuile-cs.navigateur { border: 2px dashed #c2410c; }
.tuile-cs.navigateur strong { color: #9a3412; }
.journal-cs { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; font-size: var(--t-s); }
.journal-cs h3 { font-size: var(--t-s); font-family: var(--f-texte); font-weight: 700; }
.journal-cs ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; max-height: 168px; overflow: auto; }
.journal-cs li { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 3px 6px; border-radius: 6px; border-left: 4px solid var(--ligne); background: var(--code-fond); overflow-wrap: anywhere; }
.journal-cs li:first-child { background: #fffbea; }
.journal-cs .qui-j { font: 600 0.72rem/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: 0.03em; }
.journal-cs .j-serveur { border-left: 4px solid #1d5fd8; }
.journal-cs .j-serveur .qui-j { color: #1647a6; }
.journal-cs .j-navigateur { border-left: 4px dashed #c2410c; }
.journal-cs .j-navigateur .qui-j { color: #9a3412; }
.journal-cs .j-reglage .qui-j { color: var(--encre-2); }
.panneau-cs { background: var(--surface); border: 1px solid var(--ligne); border-radius: 0 12px 12px 12px; padding: 10px 12px; display: grid; gap: 10px; font-size: var(--t-s); margin-top: -11px; }
.col-cs-analyse .onglets-code { position: relative; z-index: 1; }
.col-cs-analyse .onglets-code [role="tab"] { padding: 5px 10px; }
.qui-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qui-colonnes h3 { font-size: var(--t-s); font-family: var(--f-texte); font-weight: 700; margin-bottom: 6px; }
.qui-serveur h3 { color: #1647a6; }
.qui-navigateur h3 { color: #9a3412; }
.qui-colonnes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.el-qui { width: 100%; text-align: left; border-radius: 8px; padding: 5px 9px; font-size: var(--t-s); color: var(--encre); background: var(--surface); }
.el-qui.serveur { border: 2px solid #1d5fd8; }
.el-qui.navigateur { border: 2px dashed #c2410c; }
.qui-navigateur.arrete .el-qui { border-color: var(--ligne); border-style: dashed; color: var(--encre-2); }
.el-qui:hover { background: var(--surface-2); }
.el-qui.choisi { background: #fef3c7; box-shadow: 0 0 0 2px #92400e; }
.arret { margin: 0 0 6px; font-size: var(--t-xs); color: var(--faux-encre); font-weight: 600; }
.pas-vitrine { margin: 0; grid-column: 1 / -1; }
.detail-qui { display: grid; gap: 6px; border-top: 1px solid var(--ligne); padding-top: 8px; }
.detail-qui p { margin: 0; }
.detail-qui h4 { font-size: var(--t-m); }
.detail-qui h4.serveur { color: #1647a6; }
.detail-qui h4.navigateur { color: #9a3412; }
.invite-qui { color: var(--encre-2); }
.titre-extrait { font-weight: 700; font-size: var(--t-xs); color: var(--encre-2); }
.extrait-code { margin: 0; background: var(--code-fond); border: 1px solid var(--ligne); border-radius: 8px; padding: 6px 9px; font: 0.76rem/1.5 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; }
.intro-sans { margin: 0; }
.intro-sans .oui { color: var(--bon-encre); }
.intro-sans .non { color: var(--faux-encre); }
.grille-sans { display: grid; gap: 6px; }
.ligne-sans { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; align-items: start; border: 1px solid var(--ligne); border-radius: 10px; padding: 6px 9px; }
.ligne-sans h4 { font-size: var(--t-s); font-family: var(--f-texte); font-weight: 700; }
.ligne-sans p { margin: 0; display: grid; gap: 1px; }
.ligne-sans p span { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--encre-2); }
.ligne-sans p em { color: var(--encre-2); }
.ligne-sans p.cesse { color: var(--faux-encre); font-weight: 600; }
.choix-code { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.note-code { margin: 0; color: var(--encre-2); }
.vue-code.code-cs { flex: none; height: 380px; }
.vue-code.code-cs > .editeur-web { flex: 1 1 0; }
@media (max-width: 1100px) {
  .atelier-cs { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow: auto; align-content: start; }
  .col-cs-analyse { overflow: visible; }
  .col-cs-navigateur .navigateur.plein { flex: none; height: 540px; }
}
@media (max-width: 860px) {
  .scene-atelier > .atelier-cs { position: static; overflow: visible; }
}
@media (max-width: 640px) {
  .qui-colonnes { grid-template-columns: minmax(0, 1fr); }
  .ligne-sans { grid-template-columns: minmax(0, 1fr); }
  .compteurs-cs { grid-template-columns: minmax(0, 1fr); }
  .journal-cs li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .outils-legende { margin-left: 0; }
  .vue-code.code-cs { height: 340px; }
  .col-cs-analyse .onglets-code [role="tab"] { padding: 5px 8px; font-size: var(--t-xs); }
}

/* ---------- thème 3 : moteur de recherche et popularité ---------- */
:root {
  --moteur: #5b4fc4; --moteur-encre: #4338a8; --moteur-doux: #ece9fc;
  --lue: #dff3e5; --lue-bord: #1f7a3d;
  --file: #e4edff; --file-bord: #2f5fe0;
  --lecture: #fff1c2; --lecture-bord: #b45309;
  --manquee: #eceef2; --manquee-bord: #8a93a3;
}
.scene-atelier > .atelier-robot, .scene-atelier > .atelier-surfeurs { position: absolute; inset: 0; }
.atelier-robot, .atelier-surfeurs { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr); gap: 12px; padding: 10px var(--gouttiere) 12px; }
.col-robot-gauche, .col-robot-droite, .col-surf-gauche, .col-surf-droite { min-height: 0; min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px; scroll-padding: 10px; }
.titre-bloc { font-size: var(--t-l); font-weight: 720; margin: 0; }
.titre-bloc.petit { font-size: var(--t-m); }
.aide-bloc { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
.boutons-bloc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bouton.petit { padding: 1px 10px; font-size: var(--t-xs); }
.bouton:disabled { opacity: 0.5; cursor: default; }
.bilan-ok { margin: 0; color: var(--bon-encre); font-weight: 700; }
.bilan-ok::before { content: "✓ "; }
.bilan-ko { margin: 0; color: var(--faux-encre); font-weight: 600; }
.rouge { color: var(--faux-encre); font-weight: 700; }
.ligne-reglage { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: var(--t-s); }
.reglages-robot { display: grid; gap: 8px; }
label.case { display: inline-flex; gap: 8px; align-items: center; font-size: var(--t-s); cursor: pointer; }
label.case input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.curseur { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; font-size: var(--t-s); font-weight: 600; }
.curseur input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--moteur); margin: 2px 0; min-height: 28px; }
.curseur output { grid-row: 1; grid-column: 2; font-family: var(--f-mono); font-weight: 600; color: var(--moteur-encre); background: var(--moteur-doux); border-radius: 999px; padding: 0 8px; }

/* étape 1 : indexer à la main */
.vue-main, .vue-robot, .vue-chercher, .vue-python, .vue-wiki { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.textes-index { display: grid; gap: 10px; }
.texte-index { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 14px; display: grid; gap: 4px; }
.texte-index h3 { font-size: var(--t-l); }
.texte-index p { margin: 0; }
.texte-index .date-texte { font-size: var(--t-xs); color: var(--encre-2); }
.source-texte { font-size: var(--t-xs); color: var(--encre-2); }
.numero-texte { font-family: var(--f-mono); font-weight: 700; color: #ffffff; background: var(--moteur-encre); border-radius: 999px; padding: 0 8px; margin-right: 4px; }
.adresse-texte { font-family: var(--f-mono); overflow-wrap: anywhere; }
.panneau-index, .panneau-robot, .panneau-chercher, .panneau-surfeurs, .panneau-calcul, .panneau-python, .panneau-wiki { display: flex; flex-direction: column; gap: 10px; }
.reglage-saut { display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; }
.index-main { border-collapse: separate; border-spacing: 0 4px; width: 100%; font-size: var(--t-s); }
.index-main th { text-align: left; font-weight: 600; color: var(--encre-2); font-size: var(--t-xs); padding: 0 4px; }
.index-main tbody th { font-family: var(--f-mono); font-size: var(--t-s); color: var(--encre); background: var(--surface); border: 1px solid var(--ligne); border-right: 0; border-radius: 8px 0 0 8px; padding: 4px 8px; }
.index-main td { background: var(--surface); border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); padding: 3px 4px; text-align: center; }
.index-main td:last-child { border-right: 1px solid var(--ligne); border-radius: 0 8px 8px 0; width: 2.2em; }
.index-main tr.juste th, .index-main tr.juste td { border-color: var(--bon); background: var(--bon-doux); }
.index-main tr.faux th, .index-main tr.faux td { border-color: var(--faux); background: var(--faux-doux); }
.case-index { width: 40px; height: 34px; border: 2px dashed #9aa3b1; border-radius: 8px; background: #ffffff; font: 700 var(--t-s) var(--f-mono); color: #ffffff; }
.case-index[aria-pressed="true"] { border-style: solid; border-color: var(--moteur-encre); background: var(--moteur-encre); }
.case-index:hover { border-color: var(--moteur-encre); }
.verdict-index .ok { color: var(--bon-encre); font-weight: 700; }
.verdict-index .ko { color: var(--faux-encre); font-weight: 700; }
.bilan-main:empty { display: none; }
.croiser-main { display: grid; gap: 8px; border-top: 1px solid var(--ligne); padding-top: 10px; }
.form-croiser { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--t-s); }
.index-appli, .index-moteur { border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); font-size: var(--t-s); }
.index-appli > summary, .index-moteur > summary { cursor: pointer; padding: 8px 12px; font-weight: 700; }
.contenu-index-appli, .contenu-index-moteur { padding: 0 12px 12px; display: grid; gap: 8px; }
.liste-index-appli, .liste-index-moteur { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 320px; overflow: auto; font-size: var(--t-s); }
.liste-index-appli li, .liste-index-moteur li { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; padding: 1px 2px; }
.liste-index-appli strong, .liste-index-moteur strong { font-family: var(--f-mono); font-weight: 600; }
.num-texte { font-family: var(--f-mono); font-size: var(--t-xs); background: var(--moteur-doux); color: var(--moteur-encre); border-radius: 999px; padding: 0 7px; }
.liste-index-moteur .nums { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.filtre-index input { width: 100%; border: 1px solid var(--ligne); border-radius: 999px; padding: 5px 12px; font-size: var(--t-s); }

/* le croisement de deux listes */
.croisement { display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; }
.rangee-croisement { display: grid; grid-template-columns: minmax(5.5em, auto) minmax(0, 1fr); gap: 8px; align-items: center; }
.mot-rangee { font-family: var(--f-mono); font-size: var(--t-s); font-weight: 600; color: var(--moteur-encre); }
.rangee-croisement.c .mot-rangee { color: var(--bon-encre); }
.pastilles-croisement { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; min-height: 30px; }
.pastille-page, .pastille-vide { font-family: var(--f-mono); font-size: var(--t-xs); border: 2px solid var(--ligne); background: #ffffff; border-radius: 8px; padding: 3px 7px; transition: background 0.2s, border-color 0.2s, opacity 0.2s; }
.pastille-vide { color: var(--encre-2); border-style: dashed; }
.pastille-page.doigt { border-color: var(--lecture-bord); background: var(--lecture); box-shadow: 0 0 0 2px var(--lecture-bord); }
.pastille-page.commune { border-color: var(--bon); background: var(--bon-doux); color: var(--bon-encre); font-weight: 700; }
/* une page dépassée par les deux doigts : grisée, mais son numéro reste lisible (contraste d'au moins 4,5:1) */
.pastille-page.passee { color: var(--encre-2); background: var(--surface-2); border-style: dashed; }
.pastille-page.arrive { animation: arriver 0.45s ease; }
@keyframes arriver { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.legende-croisement { margin: 0; font-size: var(--t-s); min-height: 2.6em; }
.commandes-croisement { display: flex; flex-wrap: wrap; gap: 6px; }

/* étape 2 : la carte du mini-Web et le robot */
.carte-web { position: relative; display: grid; gap: 10px; }
.fleches-robot { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; overflow: visible; }
.fleche-robot { fill: none; stroke-width: 2.2; }
.fleche-robot.ok { stroke: var(--file-bord); }
.fleche-robot.connu { stroke: #8a93a3; stroke-width: 1.4; stroke-dasharray: 4 4; }
.fleche-robot.interdit { stroke: var(--faux); stroke-dasharray: 6 4; }
.pointe-ok { fill: var(--file-bord); }
.pointe-connu { fill: #8a93a3; }
.pointe-interdit { fill: var(--faux); }
.robot-marque { position: absolute; left: 0; top: 0; width: 34px; height: 34px; z-index: 3; pointer-events: none; transition: transform 0.35s ease; background: var(--lecture-bord); border-radius: 50%; box-shadow: 0 2px 6px rgba(20, 30, 50, 0.3); }
.robot-marque svg { width: 100%; height: 100%; fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; }
.robot-marque circle { fill: #ffffff; stroke: none; }
.robot-marque rect { fill: none; }
.site-carte { background: rgba(255, 255, 255, 0.72); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 10px 10px; display: grid; gap: 6px; }
.tete-site-carte { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.tete-site-carte h3 { font-size: var(--t-m); }
.hote-carte { font-size: var(--t-xs); background: transparent; padding: 0; color: var(--encre-2); }
.lien-robots { margin-left: auto; border: 1px solid var(--ligne); background: var(--surface); border-radius: 999px; font: 500 var(--t-xs) var(--f-mono); padding: 1px 9px; color: var(--encre-2); }
.lien-robots:hover { border-color: var(--accent); color: var(--accent); }
.grille-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 6px; }
.tuile { position: relative; display: grid; gap: 1px; align-content: start; text-align: left; border: 2px dashed #b3bac6; background: #ffffff; border-radius: 9px; padding: 6px 8px 7px; color: var(--encre); min-height: 58px; transition: background 0.25s, border-color 0.25s; }
.tuile:hover { border-color: var(--accent); }
.titre-tuile { font-size: 0.82rem; font-weight: 650; line-height: 1.25; }
.chemin-tuile { font: 0.74rem/1.25 var(--f-mono); color: var(--encre-2); overflow-wrap: anywhere; }
.badge-tuile { font: 600 0.72rem var(--f-mono); justify-self: start; border-radius: 999px; padding: 0 6px; margin-top: 2px; }
.badge-tuile:empty { display: none; }
.tuile.file { border-color: var(--file-bord); background: var(--file); }
.tuile.file .badge-tuile { background: #ffffff; color: #1d4ed8; }
.tuile.lecture { border-style: solid; border-color: var(--lecture-bord); background: var(--lecture); box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.25); }
.tuile.lecture .badge-tuile { background: var(--lecture-bord); color: #ffffff; }
.tuile.lue { border-style: solid; border-color: var(--lue-bord); background: var(--lue); }
.tuile.lue .badge-tuile { background: var(--lue-bord); color: #ffffff; }
.tuile.interdite { border-style: solid; border-color: var(--faux); background: var(--faux-doux); }
.tuile.interdite .badge-tuile { background: var(--faux-encre); color: #ffffff; }
.tuile.manquee { border-style: dashed; border-color: var(--manquee-bord); background: var(--manquee); }
.tuile.manquee .badge-tuile { background: #4d5868; color: #ffffff; }
.tuile.hors-carte { border-style: dotted; }
.tuile.choisie { outline: 3px solid var(--encre); outline-offset: 1px; }
.legende-carte { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--t-xs); color: var(--encre-2); }
.leg-lue::before { border-color: var(--lue-bord); background: var(--lue); }
.leg-file::before { border-color: var(--file-bord); border-style: dashed; background: var(--file); }
.leg-interdite::before { border-color: var(--faux); background: var(--faux-doux); }
.leg-manquee::before { border-color: var(--manquee-bord); border-style: dashed; background: var(--manquee); }
.leg-inconnue::before { border-color: #b3bac6; border-style: dashed; }
.etat-robot, .etat-surfeurs, .etat-calcul { margin: 0; font-size: var(--t-s); }
.bloc-file { display: grid; gap: 4px; }
.liste-file { margin: 0; padding-left: 1.4em; display: grid; gap: 2px; font-size: var(--t-xs); }
.liste-file code { font-size: 0.95em; }
.titre-file { font-weight: 600; }
.suite-file { list-style: none; margin-left: -1.4em; color: var(--encre-2); font-style: italic; }
.journal-robot { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-xs); color: var(--encre-2); }
.journal-robot li:first-child { color: var(--encre); }
.journal-robot:empty { display: none; }
.bilan-robot { display: grid; gap: 4px; font-size: var(--t-s); }
.bilan-robot:empty, .fiche-page:empty { display: none; }
.bilan-robot p { margin: 0; }
.fiche-page { display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; font-size: var(--t-s); }
.fiche-page p { margin: 0; }
.fiche-page .bouton { justify-self: start; }
.adresse-fiche code { font-size: var(--t-xs); }
.etat-fiche { font-weight: 700; }
.etat-fiche.lue { color: var(--bon-encre); }
.etat-fiche.interdite { color: var(--faux-encre); }
.etat-fiche.manquee { color: #4d5868; }
.liens-fiche { color: var(--encre-2); font-size: var(--t-xs); }
.lu-fiche { font-size: var(--t-xs); color: var(--encre-2); }
.etiquette-lu { font-weight: 600; color: var(--encre); }

/* étape 3 : chercher */
.barre-recherche { display: flex; gap: 6px; align-items: center; }
.champ-recherche { flex: 1; min-width: 0; border: 2px solid var(--moteur); border-radius: 999px; padding: 8px 16px; font-size: var(--t-m); background: #ffffff; }
.champ-recherche:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.suggestions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.puce-suggestion { border: 1px solid var(--ligne); background: var(--surface); border-radius: 999px; padding: 3px 11px; font: 500 var(--t-xs) var(--f-mono); color: var(--encre); }
.puce-suggestion:hover { border-color: var(--moteur); color: var(--moteur-encre); }
.info-index { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
.zone-listes, .zone-resultats { display: grid; gap: 8px; }
.listes-mots { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--t-s); }
.mot-vide-q, .mot-inconnu { color: var(--encre-2); }
.mot-inconnu { color: var(--faux-encre); }
.resultats-moteur { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.resultats-moteur li { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; display: grid; gap: 2px; }
.resultats-moteur p { margin: 0; }
.titre-resultat { font-weight: 700; color: var(--moteur-encre); }
.num-resultat { font: 600 var(--t-xs) var(--f-mono); color: var(--encre-2); background: var(--surface-2); border-radius: 999px; padding: 0 6px; margin-right: 4px; }
.adresse-resultat { font: var(--t-xs) var(--f-mono); color: var(--bon-encre); overflow-wrap: anywhere; }
.extrait-resultat { font-size: var(--t-s); color: var(--encre-2); }
.extrait-resultat mark { background: #fff1c2; color: var(--encre); font-weight: 700; border-radius: 3px; padding: 0 1px; }
.pertinence-resultat { font-size: var(--t-xs); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.comment-repond { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 14px; display: grid; gap: 6px; font-size: var(--t-s); }
.comment-repond ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }

/* les graphes (js/graphe-vue.js) : dessinés à l'échelle 1, textes en pixels de l'écran */
.boite-graphe-surf { flex: 1 1 0; min-height: 300px; display: flex; }
.graphe-vue { position: relative; flex: 1 1 auto; min-height: 300px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; }
.graphe-vue .gv-svg { position: absolute; inset: 0; display: block; }
.graphe-vue .gv-foule { position: absolute; left: 0; top: 0; pointer-events: none; }
.gv-lien { fill: none; stroke: #9d97cf; stroke-width: 1.8; }
.gv-lien.relie { stroke: var(--moteur-encre); stroke-width: 2.6; }
.gv-lien.relie.entrant { stroke: var(--bon); }
.gv-lien.faible { stroke: #d9d6ee; }
.gv-pointe { fill: #9d97cf; }
.gv-pointe.relie { fill: var(--moteur-encre); }
.gv-pointe.faible { fill: #d9d6ee; }
.gv-sommet { cursor: pointer; }
.gv-sommet:focus { outline: none; }
.gv-disque { fill: var(--moteur-doux); stroke: var(--moteur); stroke-width: 2.5; transition: r 0.25s ease; }
.gv-sommet.impasse .gv-disque { fill: #fde8e6; stroke: var(--faux); stroke-dasharray: 5 3; }
.gv-sommet.choisi .gv-disque { stroke: var(--encre); stroke-width: 3.5; }
.gv-anneau { fill: none; stroke: transparent; stroke-width: 2.5; }
.gv-sommet:focus-visible .gv-anneau { stroke: #14213d; stroke-dasharray: 6 3; }
.gv-nom { font: 650 12.5px var(--f-texte); fill: var(--encre); paint-order: stroke; stroke: var(--halo); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.gv-valeur { font: 600 11.5px var(--f-mono); fill: var(--moteur-encre); paint-order: stroke; stroke: var(--halo); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.graphe-wiki { min-height: 420px; flex: 1 1 auto; }
.graphe-wiki .gv-lien { stroke: #cfcbea; stroke-width: 1; }
.graphe-wiki .gv-lien.relie { stroke-width: 1.8; }
.graphe-wiki .gv-disque { stroke-width: 1.5; }
.graphe-wiki .gv-sommet.tete .gv-disque { fill: #d9d4fa; }
.legende-surfeurs { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: center; font-size: var(--t-xs); color: var(--encre-2); }
.legende-surfeurs > span { white-space: nowrap; }
.pt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #ffffff; box-shadow: 0 0 0 1px #9aa3b1; vertical-align: -1px; }
.pt-lien { background: #1f4fd1; }
.pt-saut { background: #c2410c; }
.pt-coince { background: #b91c1c; }

/* le classement par popularité */
.classement-pop, .classement-wiki { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.ligne-pop { display: grid; grid-template-columns: minmax(7.5em, auto) minmax(0, 1fr) 4.6em; gap: 8px; align-items: center; font-size: var(--t-s); }
.nom-pop { border: 0; background: none; padding: 2px 4px; text-align: left; color: var(--encre); font: inherit; font-weight: 600; border-radius: 6px; }
.nom-pop:hover { background: var(--moteur-doux); }
.nom-pop.choisie, .ligne-pop.choisie .nom-pop { background: var(--moteur-doux); box-shadow: inset 3px 0 var(--moteur); }
.ligne-pop.impasse .nom-pop { color: var(--faux-encre); }
.barre-pop { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.barre-pop i { display: block; height: 100%; background: var(--moteur); border-radius: 5px; transition: width 0.2s; }
.ligne-pop.impasse .barre-pop i { background: var(--faux); }
.valeur-pop { font: 600 var(--t-xs) var(--f-mono); text-align: right; color: var(--encre); }
.stabilite { margin: 0; font-size: var(--t-s); color: var(--encre-2); min-height: 1.5em; }
.classement-wiki .nom-pop { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; gap: 6px; width: 100%; font-size: var(--t-s); }
.classement-wiki .rang { font: 600 var(--t-xs) var(--f-mono); color: var(--encre-2); text-align: right; }
.fiche-article { display: grid; gap: 6px; font-size: var(--t-s); }
.fiche-article:empty { display: none; }
.fiche-article p { margin: 0; }
.extrait-wiki { margin: 0; border-left: 3px solid var(--moteur); background: var(--surface); padding: 6px 10px; border-radius: 0 8px 8px 0; display: grid; gap: 4px; }
.extrait-wiki footer { font-size: var(--t-xs); color: var(--encre-2); }
.source-wiki { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }

/* étape 2 des surfeurs : le calcul tour par tour */
.explication-calcul { display: grid; gap: 6px; font-size: var(--t-s); }
.explication-calcul p { margin: 0; }
.table-calcul, .table-comparaison, .table-verdict { border-collapse: collapse; width: 100%; font-size: var(--t-s); }
.table-calcul th, .table-calcul td, .table-comparaison th, .table-comparaison td, .table-verdict th, .table-verdict td { border-bottom: 1px solid var(--ligne); padding: 3px 6px; text-align: left; }
.table-calcul td, .table-verdict td { font-family: var(--f-mono); font-size: var(--t-xs); text-align: right; white-space: nowrap; }
.table-calcul td.fort { font-weight: 700; color: var(--moteur-encre); }
.table-calcul td.ecart { color: var(--encre-2); }
.table-calcul tr.impasse th .nom-pop { color: var(--faux-encre); }
.table-calcul tr.choisie th .nom-pop { background: var(--moteur-doux); }
.table-comparaison caption, .table-verdict caption { text-align: left; font-size: var(--t-xs); color: var(--encre-2); padding-bottom: 4px; }
.table-comparaison tr.different td { background: var(--attention-doux); }
.table-comparaison .valeur { font: var(--t-xs) var(--f-mono); color: var(--encre-2); }
.table-verdict tr.juste td:last-child { color: var(--bon-encre); }
.table-verdict tr.faux td { background: var(--faux-doux); }
.comparaison, .resultat-comparaison, .verdict-python { display: grid; gap: 6px; }
.comparaison > .bouton { justify-self: start; }
.panneau-wiki > .bouton, .panneau-robot > .bouton, .panneau-chercher > .bouton { align-self: flex-start; }

/* étape 3 des surfeurs : Python */
.vue-python .editeur-web { flex: 1 1 0; min-height: 280px; }
.console-py { flex: none; margin: 0; min-height: 90px; max-height: 32%; overflow: auto; background: #1c2433; color: #e7ecf5; border-radius: 12px; padding: 10px 12px; font: 13px/1.5 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.console-py:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bloc-wiki-python { display: grid; gap: 6px; border-top: 1px solid var(--ligne); padding-top: 10px; }
.bloc-wiki-python .bouton { justify-self: start; }
.vue-wiki .graphe-vue { flex: 1 1 auto; }

@media (max-width: 1100px) {
  .atelier-robot, .atelier-surfeurs { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow: auto; align-content: start; }
  /* le robot : les commandes avant la carte (on lance, puis on regarde) ; la fiche d'une page s'ouvre sous son site */
  .atelier-robot[data-etape="robot"] .col-robot-droite { order: -1; }
  .col-robot-gauche, .col-robot-droite, .col-surf-gauche, .col-surf-droite { overflow: visible; }
  .boite-graphe-surf { flex: none; height: min(62vh, 520px); }
  .graphe-wiki { flex: none; height: min(70vh, 560px); }
  .vue-python .editeur-web { flex: none; height: 420px; }
  .console-py { max-height: 260px; }
}
@media (max-width: 860px) {
  .scene-atelier > .atelier-robot, .scene-atelier > .atelier-surfeurs { position: static; overflow: visible; }
  /* téléphone : le panneau du robot reste court (la carte est juste dessous) */
  .journal-robot li:not(:first-child) { display: none; }
  .liste-file li:nth-child(n+4):not(.suite-file) { display: none; }
  .boite-graphe-surf { height: 430px; }
  .graphe-wiki { height: 480px; }
}
@media (max-width: 520px) {
  .grille-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ligne-pop { grid-template-columns: minmax(6.5em, auto) minmax(0, 1fr) 4.4em; gap: 6px; }
  .rangee-croisement { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .barre-recherche { flex-wrap: wrap; }
  .champ-recherche { flex-basis: 100%; }
}
@media (min-width: 1600px) {
  .liste-file, .journal-robot, .aide-bloc, .info-index, .legende-carte, .legende-surfeurs, .liens-fiche, .lu-fiche, .source-wiki,
  .source-texte, .adresse-resultat, .num-resultat, .table-calcul td, .table-verdict td, .valeur-pop, .num-texte, .pastille-page,
  .extrait-wiki footer, .table-comparaison caption, .table-verdict caption, .classement-wiki .rang, .lien-robots, .hote-carte { font-size: 0.8rem; }
  .liste-file code, .adresse-fiche code { font-size: 1em; }
  .gv-nom { font-size: 14px; }
  .gv-valeur { font-size: 13px; }
  .titre-tuile { font-size: 0.9rem; }
  .chemin-tuile, .badge-tuile { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .robot-marque, .tuile, .pastille-page, .barre-pop i, .gv-disque { transition: none; }
  .pastille-page.arrive { animation: none; }
}

/* ---------- thème 3 : la ferme de liens ---------- */
.scene-atelier > .atelier-ferme, .scene-atelier > .atelier-classement { position: absolute; inset: 0; }
.atelier-ferme { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.9fr); gap: 12px; padding: 10px var(--gouttiere) 12px; }
.col-ferme-gauche, .col-ferme-droite, .col-cl-gauche, .col-cl-droite { min-height: 0; min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px; scroll-padding: 10px; }
.boite-graphe-ferme { flex: 1 1 0; min-height: 340px; display: flex; }
.panneau-ferme, .panneau-cl { display: flex; flex-direction: column; gap: 10px; }
.legende-ferme, .legende-courbe, .legende-score { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: center; font-size: var(--t-xs); color: var(--encre-2); }
.legende-ferme > span, .legende-courbe > span, .legende-score > span { white-space: normal; }
.pt-ma-page { background: #fff1c2; box-shadow: 0 0 0 1.5px var(--lecture-bord); border: 1.5px dashed var(--lecture-bord); }
.pt-ferme { background: #d1d5db; box-shadow: 0 0 0 1px #6b7280; }
.resume-ferme, .journal-ferme, .etat-ferme { margin: 0; font-size: var(--t-s); }
.resume-ferme:empty, .journal-ferme:empty { display: none; }
.gv-sommet.ma-page .gv-disque { fill: #fff1c2; stroke: var(--lecture-bord); stroke-dasharray: 6 3; stroke-width: 3; }
.gv-sommet.ferme .gv-disque { fill: #d1d5db; stroke: #6b7280; stroke-width: 1.5; }
.gv-sommet.ferme { cursor: default; }
.gv-lien.lien-ferme { stroke: #b8bec9; stroke-width: 1.2; }
.gv-lien.vers-ma-page { stroke: var(--lecture-bord); stroke-width: 2.2; }
.graphe-vue.avec-glisser .gv-sommet:not(.ferme) { cursor: grab; }
.graphe-vue.glisse-en-cours, .graphe-vue.glisse-en-cours .gv-sommet { cursor: grabbing; }
.gv-lien.en-cours { stroke: var(--accent); stroke-width: 2.6; stroke-dasharray: 6 4; }
.gv-pointe.encours { fill: var(--accent); }
.gv-sommet.cible .gv-disque { stroke: var(--accent); stroke-width: 4.5; }
.classement-ferme .ligne-pop.ma-page .nom-pop { background: #fff1c2; box-shadow: inset 3px 0 var(--lecture-bord); }
.rang-pop { display: inline-block; min-width: 1.4em; font: 600 var(--t-xs) var(--f-mono); color: var(--encre-2); }
.evolution { font: 600 var(--t-xs) var(--f-mono); color: var(--encre-2); white-space: nowrap; }
.evolution.monte { color: var(--bon-encre); }
.evolution.baisse { color: var(--faux-encre); }
.courbe-ferme { display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 10px; }
.svg-courbe { width: 100%; max-width: 460px; height: auto; display: block; overflow: visible; }
.svg-courbe .grille { stroke: #e3e7ee; stroke-width: 1; }
.svg-courbe .axe { font: 11.5px var(--f-mono); fill: var(--encre-2); }
.svg-courbe .titre-axe { font-family: var(--f-texte); }
.svg-courbe .trace-ferme { fill: none; stroke: var(--moteur); stroke-width: 2.6; }
.svg-courbe .point-ferme { fill: var(--moteur-encre); stroke: #ffffff; stroke-width: 2; }
.svg-courbe .ligne-un-lien { stroke: var(--lecture-bord); stroke-width: 2.2; stroke-dasharray: 7 4; }
.svg-courbe .etiquette-un-lien { font: 600 11.5px var(--f-texte); fill: #8a3c06; paint-order: stroke; stroke: var(--halo); stroke-width: 4px; }
.svg-courbe .etiquette-point { font: 600 11.5px var(--f-mono); fill: var(--moteur-encre); paint-order: stroke; stroke: var(--halo); stroke-width: 4px; }
.trait { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--moteur); vertical-align: 3px; margin-right: 2px; }
.trait-lien { border-top: 3px dashed var(--lecture-bord); }
.trait-repere { border-top: 2px dotted var(--encre); width: 16px; }
.svg-courbe .repere-equivalence { stroke: var(--encre); stroke-width: 1.6; stroke-dasharray: 2 3; }
.titre-courbe { font-weight: 600; color: var(--encre); }
/* l'encadré « Et dans un grand Web ? » */
.encadre-grand-web { border: 1px solid var(--moteur); border-left-width: 5px; border-radius: 12px; background: var(--moteur-doux); padding: 8px 12px; display: grid; gap: 6px; font-size: var(--t-s); }
.encadre-grand-web .titre-bloc { margin: 0; color: var(--moteur-encre); }
.texte-grand-web { display: grid; gap: 6px; }
.texte-grand-web p { margin: 0; }
.table-defile { overflow-x: auto; max-width: 100%; }
.table-grand-web { border-collapse: collapse; width: 100%; font-size: var(--t-s); background: var(--surface); }
.table-grand-web caption { text-align: left; font-weight: 600; padding-bottom: 4px; }
.table-grand-web th, .table-grand-web td { border-bottom: 1px solid var(--ligne); padding: 3px 6px; text-align: left; vertical-align: top; }
.table-grand-web thead th { font-size: var(--t-xs); font-weight: 600; color: var(--encre-2); vertical-align: bottom; }
.table-grand-web td { font-family: var(--f-mono); white-space: nowrap; text-align: right; }
.table-grand-web thead th:not(:first-child) { text-align: right; }
@media (max-width: 520px) { .table-grand-web th, .table-grand-web td { padding: 3px 3px; } .table-grand-web { font-size: var(--t-xs); } }
.table-grand-web tbody th { font-weight: 400; }
.detail-grand-web { color: var(--encre-2); font-size: var(--t-xs); }
.comparaison-ferme { display: grid; gap: 4px; font-size: var(--t-s); }
.comparaison-ferme p { margin: 0; }
.comparaison-ferme .equivalence { font-weight: 600; color: var(--moteur-encre); }
.panneau-ferme > .bouton { align-self: flex-start; }
.panneau-python .aide-bloc code { font-size: 1em; }

/* ---------- thème 3 : le classement ---------- */
.atelier-classement { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.85fr); gap: 12px; padding: 10px var(--gouttiere) 12px; }
.zone-classement { display: grid; gap: 10px; align-content: start; }
.deux-listes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.liste-classement { display: grid; gap: 6px; min-width: 0; }
.liste-classement > .aide-bloc { margin-top: -4px; }
.resultats-classement { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.resultat-cl { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; display: grid; gap: 2px; min-width: 0; }
.resultat-cl p { margin: 0; }
.resultat-cl.annonce { background: #fffaf0; border-color: #e7c27a; }
.resultat-cl.annonce.sans-mention { background: var(--surface); border-color: var(--ligne); }
.badge-annonce { display: inline-block; font: 700 var(--t-xs) var(--f-texte); color: #ffffff; background: #7a4a00; border-radius: 6px; padding: 0 7px; margin-right: 6px; vertical-align: 1px; }
.separateur-annonces { border-top: 2px dashed var(--ligne); margin: 2px 0; }
.aucun-resultat { font-size: var(--t-s); color: var(--encre-2); padding: 4px 2px; }
.tete-resultat { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.lien-resultat { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--moteur-encre); text-align: left; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; cursor: pointer; min-width: 0; }
.lien-resultat:hover { text-decoration-color: currentColor; }
.date-resultat, .notes-resultat { font-size: var(--t-xs); color: var(--encre-2); }
.score-resultat { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.barre-score { flex: 1 1 auto; max-width: 240px; height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; display: flex; }
.barre-score i { display: block; height: 100%; border-right: 2px solid #ffffff; box-sizing: border-box; }
.barre-score i:last-child { border-right: 0; }
.seg-pertinence { background: #1f4fd1; }
.seg-popularite { background: #7e22ce; }
.seg-fraicheur { background: #c2410c; }
.seg-historique { background: #15803d; }
.carre { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }
.valeur-score { font: 600 var(--t-xs) var(--f-mono); color: var(--encre); white-space: nowrap; }
.explication-cl { display: grid; gap: 6px; font-size: var(--t-s); }
.explication-cl p { margin: 0; }
.reglage-poids { display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; }
.table-annonces { border-collapse: collapse; width: 100%; font-size: var(--t-s); }
.table-annonces caption { text-align: left; font-size: var(--t-xs); color: var(--encre-2); padding-bottom: 4px; }
.table-annonces th, .table-annonces td { border-bottom: 1px solid var(--ligne); padding: 3px 6px; text-align: left; vertical-align: top; }
.table-annonces td:last-child { font-family: var(--f-mono); white-space: nowrap; text-align: right; }
.fiche-profil { display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; }
.visites-profil { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.visites-profil li { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 3.4em; gap: 8px; align-items: center; font-size: var(--t-xs); }
.hote-profil { font-family: var(--f-mono); overflow-wrap: anywhere; }
.visites-profil .barre-pop i { background: #15803d; }

@media (max-width: 1100px) {
  .atelier-ferme, .atelier-classement { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow: auto; align-content: start; }
  .col-ferme-gauche, .col-ferme-droite, .col-cl-gauche, .col-cl-droite { overflow: visible; }
  /* le classement : les réglages avant les résultats (on règle, puis on regarde) */
  .atelier-classement .col-cl-droite { order: -1; }
  .boite-graphe-ferme { flex: none; height: min(64vh, 540px); }
}
@media (max-width: 860px) {
  .scene-atelier > .atelier-ferme, .scene-atelier > .atelier-classement { position: static; overflow: visible; }
  .boite-graphe-ferme { height: 450px; }
}
@media (max-width: 700px) {
  .deux-listes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .boite-graphe-ferme { height: 620px; }
  .score-resultat { flex-wrap: wrap; }
  .barre-score { max-width: none; flex-basis: 100%; }
}
@media (min-width: 1600px) {
  .legende-ferme, .legende-courbe, .legende-score, .date-resultat, .notes-resultat, .valeur-score, .rang-pop, .evolution,
  .table-annonces caption, .visites-profil li, .badge-annonce { font-size: 0.8rem; }
  .svg-courbe .axe, .svg-courbe .etiquette-un-lien, .svg-courbe .etiquette-point { font-size: 13px; }
}

/* ---------- thème 4 : les réseaux sociaux (graphes d'amis) ---------- */
:root {
  --ami: #7d6aa8; --ami-encre: #5b2a9e;
  --g0: #dbeafe; --g0-bord: #1d4ed8; --g1: #dcfce7; --g1-bord: #15803d; --g2: #fef3c7; --g2-bord: #b45309; --g3: #fce7f3; --g3-bord: #be185d;
  --g4: #e0f2fe; --g4-bord: #0369a1; --g5: #f3e8ff; --g5-bord: #7e22ce;
}
.scene-atelier > .atelier-reseau { position: absolute; inset: 0; }
.atelier-reseau { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.9fr); grid-template-rows: minmax(0, 1fr); gap: 12px; padding: 10px var(--gouttiere) 12px; }
.panneau-reseau .bouton[aria-pressed="true"] { background: #1e3a8a; border-color: #1e3a8a; color: #ffffff; }
.col-reseau-gauche, .col-reseau-droite { position: relative; min-height: 0; min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px; scroll-padding: 10px; }
.boite-graphe-reseau { flex: 1 1 0; min-height: 340px; display: flex; }
.panneau-reseau { display: flex; flex-direction: column; gap: 10px; }
.panneau-reseau > .bouton { align-self: flex-start; }
.form-reseau select, .form-reponse select { max-width: 100%; }
.legende-reseau { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: var(--t-xs); color: var(--encre-2); }
.resume-reseau, .journal-reseau, .etat-indices { margin: 0; font-size: var(--t-s); }
.resume-reseau:empty, .journal-reseau:empty { display: none; }
/* les sommets et les liens du thème 4 */
[data-fond="graphe"] .gv-disque { fill: var(--reseaux-doux); stroke: var(--reseaux); }
[data-fond="graphe"] .gv-lien { stroke: var(--ami); }
[data-fond="graphe"] .gv-pointe { fill: var(--ami); }
[data-fond="graphe"] .gv-lien.relie { stroke: var(--ami-encre); }
[data-fond="graphe"] .gv-pointe.relie { fill: var(--ami-encre); }
.gv-lien.trait { stroke-width: 2.6; }
.gv-dedans { font: 700 13px var(--f-mono); fill: var(--encre); pointer-events: none; }
.trait-legende { display: inline-block; vertical-align: -1px; margin-right: 3px; }
.trait-legende line { stroke: var(--ami); stroke-width: 2.6; }
.trait-legende path { fill: var(--ami); }
/* l'onde : la distance est écrite dans le disque (jamais la couleur seule) */
.gv-sommet.d0 .gv-disque, .pastille-distance.d0 { fill: #4c1d95; background: #4c1d95; stroke: #2e1065; }
.gv-sommet.d0 .gv-dedans { fill: #ffffff; }
.gv-sommet.d1 .gv-disque, .pastille-distance.d1 { fill: #6d28d9; background: #6d28d9; stroke: #4c1d95; }
.gv-sommet.d1 .gv-dedans { fill: #ffffff; }
.gv-sommet.d2 .gv-disque, .pastille-distance.d2 { fill: #c4b5fd; background: #c4b5fd; stroke: #6d28d9; }
.gv-sommet.d3 .gv-disque, .pastille-distance.d3 { fill: #ddd6fe; background: #ddd6fe; stroke: #7c3aed; }
.gv-sommet.d4 .gv-disque, .pastille-distance.d4 { fill: #ede9fe; background: #ede9fe; stroke: #8b5cf6; }
.gv-sommet.d5 .gv-disque, .pastille-distance.d5 { fill: #faf5ff; background: #faf5ff; stroke: #a78bfa; }
.gv-sommet.inaccessible .gv-disque, .pastille-distance.inaccessible { fill: #f3f4f6; background: #f3f4f6; stroke: #6b7280; stroke-dasharray: 5 3; }
.gv-sommet.d0 .gv-disque, .gv-sommet.d1 .gv-disque, .gv-sommet.d2 .gv-disque, .gv-sommet.d3 .gv-disque, .gv-sommet.d4 .gv-disque, .gv-sommet.d5 .gv-disque { animation: onde-arrivee 0.5s ease-out; }
@keyframes onde-arrivee { from { stroke-width: 9; } to { stroke-width: 2.5; } }
.pastille-distance { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; border-radius: 999px; font: 700 var(--t-xs) var(--f-mono); color: var(--encre); border: 1.5px solid #7c3aed; padding: 0 4px; }
.pastille-distance.d0, .pastille-distance.d1 { color: #ffffff; }
.pastille-distance.inaccessible { border-style: dashed; border-color: #6b7280; }
/* le parcours en largeur */
.gv-sommet.bfs-courant .gv-anneau { stroke: #b45309; stroke-width: 4; stroke-dasharray: none; }
.gv-sommet.bfs-file .gv-anneau { stroke: #1d4ed8; stroke-width: 3; stroke-dasharray: 5 3; }
.gv-sommet.bfs-vu .gv-disque { fill: #dff3e5; stroke: var(--bon-encre); }
.boite-largeur { display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; font-size: var(--t-s); }
.etat-largeur p { margin: 0; }
.etat-largeur { display: grid; gap: 4px; }
.file-largeur { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.file-largeur span { border: 2px dashed #1d4ed8; border-radius: 6px; padding: 0 6px; font-weight: 600; background: #eef4ff; }
/* les indices */
.liste-indices { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-s); }
.indice { display: flex; gap: 8px; align-items: baseline; background: var(--surface); border: 1px solid var(--ligne); border-radius: 8px; padding: 5px 10px; }
.indice.fait { border-color: var(--bon); background: var(--bon-doux); }
.marque-indice { flex: none; font-weight: 700; color: var(--encre-2); width: 1em; }
.indice.fait .marque-indice { color: var(--bon-encre); }
.etiquette-depart { margin-left: auto; flex: none; font-size: var(--t-xs); color: var(--encre-2); }
.fiche-personne { display: grid; gap: 4px; font-size: var(--t-s); }
.fiche-personne:empty { display: none; }
.fiche-personne p { margin: 0; }
.fiche-personne { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; }
/* les distances */
.resultat-onde { display: grid; gap: 6px; font-size: var(--t-s); background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; }
.resultat-onde p { margin: 0; }
.niveaux-onde { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.form-reponse { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: var(--t-s); }
.champ-nombre { width: 5em; border: 1px solid var(--ligne); border-radius: 8px; padding: 5px 8px; font: inherit; background: var(--surface); }
.verdict-reponse { margin: 0; font-size: var(--t-s); }
.verdict-reponse:empty { display: none; }
.mesures-graphe { display: grid; gap: 6px; font-size: var(--t-s); background: var(--reseaux-doux); border: 1px solid var(--reseaux); border-radius: 12px; padding: 8px 12px; }
.mesures-graphe p { margin: 0; }
.mesures-graphe:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.table-excentricites { border-collapse: collapse; font-size: var(--t-s); background: var(--surface); }
.table-excentricites caption { text-align: left; font-weight: 600; padding-bottom: 2px; }
.table-excentricites th, .table-excentricites td { border-bottom: 1px solid var(--ligne); padding: 2px 10px 2px 4px; text-align: left; font-weight: 400; }
.table-excentricites td { font-family: var(--f-mono); }
.table-excentricites tr.centre th { font-weight: 700; }
.marque-centre { font-size: var(--t-xs); font-weight: 700; color: var(--ami-encre); }

/* « Groupes et ponts » : les groupes ont une lettre (dans le disque) ET une couleur ; les ponts, un trait épais */
.boite-graphe-reseau.grande { min-height: 420px; }
.gv-sommet.groupe-0 .gv-disque, .pastille-groupe.groupe-0 { fill: var(--g0); background: var(--g0); stroke: var(--g0-bord); border-color: var(--g0-bord); }
.gv-sommet.groupe-1 .gv-disque, .pastille-groupe.groupe-1 { fill: var(--g1); background: var(--g1); stroke: var(--g1-bord); border-color: var(--g1-bord); }
.gv-sommet.groupe-2 .gv-disque, .pastille-groupe.groupe-2 { fill: var(--g2); background: var(--g2); stroke: var(--g2-bord); border-color: var(--g2-bord); }
.gv-sommet.groupe-3 .gv-disque, .pastille-groupe.groupe-3 { fill: var(--g3); background: var(--g3); stroke: var(--g3-bord); border-color: var(--g3-bord); }
.gv-sommet.groupe-4 .gv-disque, .pastille-groupe.groupe-4 { fill: var(--g4); background: var(--g4); stroke: var(--g4-bord); border-color: var(--g4-bord); }
.gv-sommet.groupe-5 .gv-disque, .pastille-groupe.groupe-5 { fill: var(--g5); background: var(--g5); stroke: var(--g5-bord); border-color: var(--g5-bord); }
.atelier-clubs .gv-dedans { font-size: 12px; }
.gv-sommet.isole .gv-disque { fill: #f3f4f6; stroke: #6b7280; stroke-dasharray: 4 3; }
.gv-sommet.personne-pont .gv-anneau { stroke: #9a3412; stroke-width: 2.5; }
.gv-sommet.personne-pont .gv-disque { stroke-width: 4; }
.gv-lien.entre-groupes { stroke-dasharray: 6 5; }
.gv-lien.pont { stroke: #c2410c !important; stroke-width: 5; stroke-dasharray: none; }
.trait-legende.pont line { stroke: #c2410c; stroke-width: 5; }
.pastille-groupe { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; border: 2px solid; font: 700 var(--t-xs) var(--f-mono); color: var(--encre); vertical-align: middle; }
.groupes-trouves { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-s); }
.membres-groupe { color: var(--encre-2); font-size: var(--t-xs); }
.liste-groupes { display: grid; gap: 8px; }
.table-densites { border-collapse: collapse; font-size: var(--t-s); background: var(--surface); width: 100%; }
.table-densites caption { text-align: left; font-weight: 600; padding-bottom: 2px; }
.table-densites th, .table-densites td { border-bottom: 1px solid var(--ligne); padding: 2px 6px; text-align: right; font-weight: 400; }
.table-densites th:first-child { text-align: left; }
.table-densites thead th { font-size: var(--t-xs); color: var(--encre-2); }
.table-densites td { font-family: var(--f-mono); }
.table-densites tr.total th, .table-densites tr.total td { font-weight: 700; }
.bouton[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.amis-fiche { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.amis-fiche li { display: flex; gap: 8px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ligne); padding: 2px 0; }

/* « Le petit monde » : la carte des mille personnes (canvas) et le village */
.carte-milgram { position: relative; flex: none; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; }
.canvas-milgram { display: block; cursor: pointer; touch-action: pan-x pan-y; }
.pt-carte { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; margin-right: 2px; }
.pt-tenant { background: #fff7d6; border: 1.5px solid #7c2d12; border-radius: 2px; width: 15px; }
.pt-ami { background: #ffffff; border: 2px solid #6d28d9; }
.pt-cible { background: #b91c1c; transform: rotate(45deg); border-radius: 1px; width: 9px; height: 9px; }
.trait-carte { display: inline-block; width: 22px; height: 0; border-top: 3px solid #4c1d95; vertical-align: 3px; margin-right: 2px; }
.trait-carte.lointain { border-top: 2px dashed #c2410c; }
.etat-lettre { display: grid; gap: 4px; font-size: var(--t-s); background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; }
.etat-lettre p { margin: 0; }
.amis-lettre { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ami-lettre { width: 100%; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; text-align: left; border: 1px solid var(--ligne); background: var(--surface); border-radius: 8px; padding: 6px 10px; color: var(--encre); font: inherit; font-size: var(--t-s); cursor: pointer; }
.ami-lettre:hover { border-color: #6d28d9; background: var(--reseaux-doux); }
.ami-lettre.lointain { border-left: 4px solid #c2410c; }
.nom-ami { font-weight: 700; }
.dir-ami { font-size: var(--t-xs); color: var(--encre-2); }
.dist-ami { margin-left: auto; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ami-encre); font-weight: 600; }
.resultat-simulation { display: grid; gap: 6px; font-size: var(--t-s); }
.resultat-simulation p { margin: 0; }
.resultat-simulation:empty { display: none; }
.figure-histo { margin: 0; display: grid; gap: 2px; }
.figure-histo figcaption { font-size: var(--t-xs); color: var(--encre-2); }
.histo-lettres { width: 100%; max-width: 360px; height: auto; display: block; }
.histo-lettres .barre-histo { fill: #8b5cf6; }
.histo-lettres .barre-toi { fill: #9a3412; }
.histo-lettres .axe { font: 11.5px var(--f-mono); fill: var(--encre-2); }
.histo-lettres .axe-ligne { stroke: var(--encre-2); stroke-width: 1; }
.table-reglages { border-collapse: collapse; font-size: var(--t-s); background: var(--surface); width: 100%; }
.table-reglages caption { text-align: left; font-weight: 600; padding-bottom: 2px; }
.table-reglages th, .table-reglages td { border-bottom: 1px solid var(--ligne); padding: 2px 6px; text-align: left; font-weight: 400; }
.table-reglages td { font-family: var(--f-mono); text-align: right; }
.table-reglages thead th { font-size: var(--t-xs); color: var(--encre-2); }
.boite-village { min-height: 360px; }
.gv-sommet.maison .gv-disque { fill: #ede9fe; stroke: #6d28d9; stroke-width: 2; }
.gv-sommet.maison.lointaine .gv-disque { fill: #ffedd5; stroke: #c2410c; }
.boite-village .gv-lien { stroke-width: 2; }
.boite-village .gv-lien.lointain { stroke: #c2410c; stroke-width: 2.4; }
.stats-village { display: grid; gap: 4px; font-size: var(--t-s); background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; }
.stats-village p { margin: 0; }
.grand-chiffre { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.grand-chiffre strong { font: 760 2rem var(--f-titre); color: var(--ami-encre); }
.jauge-distance { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.jauge-distance i { display: block; height: 100%; background: #7c3aed; transition: width 0.3s; }
.liste-liens-village { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: var(--t-s); }
.liste-liens-village li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--ligne); padding: 2px 0; }
.courbe-ws { display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; }
.courbe-ws > .bouton { justify-self: start; }
.zone-courbe-ws { display: grid; gap: 4px; }
.zone-courbe-ws .svg-courbe { width: auto; max-width: 100%; }
.svg-courbe .trace-distance { fill: none; stroke: #6d28d9; stroke-width: 2.6; }
.svg-courbe .trace-regroupement { fill: none; stroke: #b45309; stroke-width: 2.6; stroke-dasharray: 7 4; }
.svg-courbe .point-distance { fill: #6d28d9; }
.svg-courbe .point-regroupement { fill: #b45309; }
.trait-distance { border-top: 3px solid #6d28d9; }
.trait-regroupement { border-top: 3px dashed #b45309; }
@media (prefers-reduced-motion: reduce) { .jauge-distance i { transition: none; } }

@media (max-width: 1100px) {
  .atelier-reseau { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: max-content; overflow: auto; align-content: start; }
  .col-reseau-gauche, .col-reseau-droite { overflow: visible; }
  .boite-graphe-reseau { flex: none; height: min(64vh, 540px); }
}
@media (max-width: 860px) {
  .scene-atelier > .atelier-reseau { position: static; overflow: visible; }
  .boite-graphe-reseau { height: 460px; }
}
@media (max-width: 640px) {
  /* champs de saisie de 16 px au moins : le téléphone ne zoome pas quand on les touche */
  .atelier-reseau select, .atelier-reseau input { font-size: 16px; }
}
@media (max-width: 520px) {
  .boite-graphe-reseau { height: 600px; }
  .boite-graphe-reseau.boite-village { height: 430px; }
}
@media (min-width: 1600px) {
  .legende-reseau, .etiquette-depart, .table-excentricites { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gv-sommet .gv-disque { animation: none !important; }
}
@media print {
  /* imprimer : la scène d'une activité (graphe, indices, résultats) et son texte, sans la barre ni les commandes ; l'accueil,
     les défis, le lexique et les crédits en entier */
  .app .barre, .tete-scene, .commandes, .toast, .bulle-mot, .renvoi-info, .choix-module, .suite { display: none !important; }
  /* seul l'écran affiché s'imprime, en entier (à l'écran, chaque écran est une boîte qui défile, de hauteur fixe) */
  html, body, .app, main { height: auto !important; overflow: visible !important; }
  .ecran[hidden] { display: none !important; }
  .ecran:not([hidden]) { position: static !important; height: auto !important; overflow: visible !important; }
  .ecran.activite:not([hidden]) { display: block !important; }
  .scene-atelier > .atelier-reseau { position: static !important; }
  .atelier-reseau, .col-reseau-gauche, .col-reseau-droite { display: block !important; overflow: visible !important; }
  .boite-graphe-reseau { height: 420px !important; break-inside: avoid; }
  .carte-theme, .bloc, .choix-defi, .liste-lexique > div { break-inside: avoid; }
  /* les numéros de ligne de l'éditeur sont calculés pour la largeur de l'écran : ils ne suivraient pas le papier */
  .editeur-web .gouttiere { display: none !important; }
  .panneau { border: 0 !important; overflow: visible !important; }
}

/* ---------- thème 4, seconde moitié : fil d'actualité, profil de Léa, mots de passe, cyberviolence ---------- */
/* les types de contenus : un nom écrit (jamais la couleur seule), texte foncé sur fond clair */
.pastille-type { display: inline-block; border-radius: 999px; padding: 0 8px; font-size: var(--t-xs); font-weight: 600; border: 1px solid; line-height: 1.6; white-space: nowrap; }
.type-sport { background: #dbeafe; color: #1e3a8a; border-color: #1d4ed8; }
.type-musique { background: #fce7f3; color: #9d174d; border-color: #be185d; }
.type-sciences { background: #ede9fe; color: #5b21b6; border-color: #6d28d9; }
.type-cuisine { background: #fef3c7; color: #92400e; border-color: #b45309; }
.type-nature { background: #dcfce7; color: #166534; border-color: #15803d; }
.type-humour { background: #ffedd5; color: #9a3412; border-color: #c2410c; }
/* le fil */
.tete-fil { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; position: sticky; top: -6px; z-index: 2; background: var(--fond); padding: 6px 0; }
.fil-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pub { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; display: grid; gap: 4px; font-size: var(--t-s); }
.pub.vide { color: var(--encre-2); }
.tete-pub { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.auteur-pub { font-weight: 700; }
.badge-suggere { font-size: var(--t-xs); font-weight: 700; color: #7c2d12; border: 1px dashed #9a3412; border-radius: 999px; padding: 0 7px; }
.texte-pub { margin: 0; }
.actions-pub { display: flex; flex-wrap: wrap; gap: 6px; }
.actions-pub .bouton[aria-pressed="true"] { background: #1e3a8a; border-color: #1e3a8a; color: #ffffff; }
.pourquoi-pub summary { cursor: pointer; font-size: var(--t-xs); color: var(--accent); font-weight: 600; width: fit-content; }
.pourquoi-pub ul { margin: 4px 0; padding-left: 18px; }
.pourquoi-pub p { margin: 0; }
.boite-jauge, .boite-regle, .boite-interets, .boite-abos, .boite-simulation { display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; font-size: var(--t-s); }
.encadre-chiffres { display: grid; gap: 6px; margin-top: 10px; background: #f8fafc; border: 1px solid var(--ligne); border-left: 4px solid #0f766e; border-radius: 12px; padding: 8px 12px; font-size: var(--t-s); }
.liste-chiffres { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.liste-chiffres .quand-chiffre { color: var(--encre-2); }
.boite-jauge p, .boite-regle p { margin: 0; }
.jauge-diversite { position: relative; height: 14px; border-radius: 7px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--ligne); }
.jauge-diversite i { display: block; height: 100%; background: #7c3aed; transition: width 0.4s; }
.jauge-diversite[data-niveau="bas"] i { background: repeating-linear-gradient(45deg, #9a3412 0 6px, #c2410c 6px 12px); }
.repere-moitie { position: absolute; left: 50%; top: -2px; bottom: -2px; border-left: 2px dashed var(--encre); }
.barres-jauge { list-style: none; margin: 0; padding: 18px 0 0; box-sizing: border-box; display: flex; align-items: flex-end; gap: 4px; height: 82px; border-bottom: 1px solid var(--encre-2); }
.barres-jauge li { flex: 1 1 0; max-width: 30px; height: var(--h); background: #c4b5fd; border-radius: 3px 3px 0 0; position: relative; min-height: 4px; }
.barres-jauge li span { position: absolute; bottom: 100%; left: 0; right: 0; text-align: center; font: 600 11.5px var(--f-mono); color: var(--encre); }
.liste-regle, .liste-interets, .liste-abos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.liste-interets { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.liste-interets li { display: flex; align-items: center; gap: 6px; }
.liste-abos li { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--ligne); padding: 3px 0; }
.liste-abos li > span { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; }
.raison-sugg { flex-basis: 100%; font-size: var(--t-xs); color: var(--encre-2); }
.boite-abos > .bouton, .boite-interets > .bouton { justify-self: start; }
/* le graphe des abonnements */
.boite-abonnements { min-height: 440px; }
.gv-sommet.compte .gv-dedans { font-size: 12px; }
.gv-sommet.compte.type-sport .gv-disque { fill: #dbeafe; stroke: #1d4ed8; }
.gv-sommet.compte.type-musique .gv-disque { fill: #fce7f3; stroke: #be185d; }
.gv-sommet.compte.type-sciences .gv-disque { fill: #ede9fe; stroke: #6d28d9; }
.gv-sommet.compte.type-cuisine .gv-disque { fill: #fef3c7; stroke: #b45309; }
.gv-sommet.compte.type-nature .gv-disque { fill: #dcfce7; stroke: #15803d; }
.gv-sommet.compte.type-humour .gv-disque { fill: #ffedd5; stroke: #c2410c; }
.gv-sommet.compte.suivi .gv-disque { stroke-width: 4; }
.gv-sommet.toi .gv-disque { fill: #4c1d95; stroke: #2e1065; }
.gv-sommet.toi .gv-dedans { fill: #ffffff; }
.gv-sommet.sur-chemin .gv-anneau { stroke: #b45309; stroke-width: 3; stroke-dasharray: none; }
.gv-lien.chemin-2 { stroke: #b45309 !important; stroke-width: 3.5; }
.boite-abonnements .gv-lien { stroke-width: 1.4; }
.figure-histo .histo-abonnes { width: 100%; max-width: 380px; height: auto; display: block; }
.histo-abonnes .barre-histo { fill: #c4b5fd; }
.histo-abonnes .barre-histo.top { fill: #5b21b6; }
.histo-abonnes .axe { font: 12.5px var(--f-mono); fill: var(--encre-2); }
.histo-abonnes .axe-ligne { stroke: var(--encre-2); }

/* le profil de Léa */
.choix-spectateur { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: var(--t-s); }
.choix-spectateur select, .ligne-reglage select { border: 1px solid var(--ligne); border-radius: 8px; padding: 4px 8px; font: inherit; background: var(--surface); color: var(--encre); max-width: 100%; }
.profil-lea { background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; padding: 10px 14px; display: grid; gap: 4px; font-size: var(--t-s); }
.profil-lea p, .profil-lea ul { margin: 0; }
.tete-profil { display: flex; gap: 10px; align-items: center; }
.avatar-lea svg { width: 54px; height: 54px; display: block; }
.titre-profil { margin: 6px 0 0; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--encre-2); }
.masque-profil { border: 1.5px dashed #6b7280; border-radius: 8px; padding: 2px 8px; color: var(--encre-2); background: #f9fafb; }
.masque-profil::before { content: "⨯ "; font-weight: 700; }
.pubs-lea { padding-left: 18px; }
.galerie-lea { display: flex; flex-wrap: wrap; gap: 8px; }
.galerie-lea figure { margin: 0; width: 110px; display: grid; gap: 2px; }
.galerie-lea svg { width: 110px; height: 82px; border-radius: 6px; display: block; }
.galerie-lea figcaption { font-size: var(--t-xs); color: var(--encre-2); }
.boite-classe-lea { min-height: 300px; flex: none; height: 330px; }
.gv-sommet.rel-moi .gv-disque { fill: #4c1d95; stroke: #2e1065; }
.gv-sommet.rel-moi .gv-dedans { fill: #ffffff; }
.gv-sommet.rel-ami .gv-disque { fill: #c4b5fd; stroke: #5b21b6; }
.gv-sommet.rel-ami-ami .gv-disque { fill: #ede9fe; stroke: #7c3aed; }
.gv-sommet.rel-inconnu .gv-disque { fill: #f3f4f6; stroke: #6b7280; stroke-dasharray: 4 3; }
.gv-sommet.spectateur .gv-anneau { stroke: #b45309; stroke-width: 3.5; stroke-dasharray: none; }
.reglages-lea { display: grid; gap: 6px; font-size: var(--t-s); }
.ligne-reglage { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--ligne); padding-bottom: 4px; }
.table-qui-voit td { font-family: inherit; text-align: left; } /* (« ne voit pas » peut passer à la ligne : le tableau tient dans la colonne) */
.table-qui-voit th, .table-qui-voit td { padding: 2px 4px; }
.table-qui-voit td.voit { color: var(--bon-encre); font-weight: 600; }
.table-qui-voit td.voit-pas { color: var(--encre-2); }
.liste-traces { display: grid; gap: 8px; }
.trace-lea { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; font-size: var(--t-s); }
.trace-lea summary { cursor: pointer; font-weight: 700; }
.trace-lea p { margin: 6px 0 0; }
.trace-lea > .bouton { margin-top: 6px; }
.qui-trace { color: var(--ami-encre); }
.geste-trace { font-style: italic; }
.sequence-capture { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: var(--t-s); background: var(--reseaux-doux); border: 1px solid var(--reseaux); border-radius: 12px; padding: 8px 12px 8px 30px; }
.sequence-capture li { animation: apparaitre-etape 0.4s ease-out both; }
@keyframes apparaitre-etape { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.choix-effacement { display: grid; gap: 6px; }
.bouton.choix-long { text-align: left; white-space: normal; padding: 6px 12px; line-height: 1.35; }
.reponse-effacement p { margin: 0; font-size: var(--t-s); }
.reponse-effacement .bravo { font-weight: 400; }
.a-revoir { color: var(--faux-encre); font-weight: 600; }
.point-loi { background: var(--attention-doux); border: 1px solid var(--attention); border-radius: 12px; padding: 8px 12px; display: grid; gap: 4px; font-size: var(--t-s); }
.point-loi p { margin: 0; }

/* les mots de passe */
.alerte-mdp { margin: 0; background: var(--attention-doux); border: 2px solid var(--attention); border-radius: 12px; padding: 8px 12px; font-size: var(--t-s); color: #5c3700; }
.alerte-mdp::before { content: "⚠ "; font-weight: 700; }
.zone-mdp { display: grid; gap: 6px; }
.etiquette-mdp { font-weight: 700; }
.champ-mdp { font: 600 1.15rem var(--f-mono); padding: 8px 12px; border: 2px solid var(--reseaux); border-radius: 10px; background: var(--surface); color: var(--encre); width: 100%; max-width: 520px; }
.champ-mdp:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.bouton.code-ex { font-family: var(--f-mono); }
.resultat-mdp { display: grid; gap: 6px; font-size: var(--t-s); background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 12px; }
.resultat-mdp p { margin: 0; }
.familles-mdp { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.familles-mdp li { display: flex; gap: 6px; align-items: baseline; }
.familles-mdp li.absent { color: var(--encre-2); }
.marque-famille { font-weight: 700; width: 1em; }
.familles-mdp li.present .marque-famille { color: var(--bon-encre); }
.taille-famille { margin-left: auto; font-family: var(--f-mono); font-size: var(--t-xs); }
.chiffres-mdp { display: grid; gap: 2px; }
.duree-mdp strong { font-size: 1.6rem; }
.jauge-mdp { position: relative; height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--ligne); }
.jauge-mdp i { display: block; height: 100%; background: #7c3aed; transition: width 0.3s; }
/* repères à leur vraie place (échelle logarithmique) : un trait sur la jauge, le texte centré dessous */
.jauge-mdp .repere-jauge-mdp { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #1e1b4b; }
.legende-jauge-mdp { position: relative; height: 3.8em; margin-top: 2px; font-size: var(--t-xs); color: var(--encre-2); line-height: 1.25; }
.legende-jauge-mdp span { position: absolute; top: 0; }
.legende-jauge-mdp .au-repere { transform: translateX(-50%); text-align: center; max-width: 6.5em; }
.legende-jauge-mdp .au-repere::before { content: "↑"; display: block; line-height: 1; }
.titre-faiblesses { font-weight: 700; color: var(--faux-encre); }
.faiblesses-mdp { margin: 0; padding-left: 20px; display: grid; gap: 2px; }
.sans-faiblesse { color: var(--bon-encre); font-weight: 600; }
.phrase-reperee { margin: 8px 0; padding: 8px 10px; border-left: 4px solid #b45309; background: #fffbeb; border-radius: 0 6px 6px 0; color: var(--encre); }
.table-longueur tr.courant th, .table-longueur tr.courant td { font-weight: 700; }
.table-longueur td:last-child { font-family: inherit; text-align: left; }
.phrase-tiree { font: 700 1.15rem var(--f-mono); color: var(--ami-encre); overflow-wrap: anywhere; }
.sites-mdp { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-s); }
.sites-mdp li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; border: 1px solid var(--ligne); border-radius: 8px; padding: 5px 10px; background: var(--surface); }
.sites-mdp li.tombe { border-color: var(--faux-encre); background: var(--faux-doux); }
.nom-site-mdp { flex: 1 1 200px; }
.etat-site-mdp { font-weight: 700; }
.sites-mdp li.tombe .etat-site-mdp { color: var(--faux-encre); }
.sites-mdp li:not(.tombe) .etat-site-mdp { color: var(--bon-encre); }
.telephone-lea { align-self: start; max-width: 340px; background: #1f2937; border-radius: 16px; padding: 10px; }
.notif-tel { margin: 0; background: #ffffff; border-radius: 10px; padding: 8px 10px; font-size: var(--t-s); }
.sortie-vol { display: grid; gap: 6px; }
.titre-etape-vol { margin: 4px 0 0; font-size: var(--t-s); }
.echange-vol { background: var(--surface); border: 1px solid var(--ligne); border-radius: 8px; padding: 4px 10px; font-size: var(--t-s); }
.echange-vol summary { cursor: pointer; }
.texte-http { margin: 6px 0 0; font: 12.5px/1.45 var(--f-mono); color: var(--encre); white-space: pre-wrap; overflow-wrap: anywhere; background: #f8fafc; border: 1px solid var(--ligne); border-radius: 6px; padding: 6px 8px; }
.bilan-vol { margin: 0; font-weight: 700; border-radius: 10px; padding: 8px 12px; font-size: var(--t-s); }
.bilan-vol.entre { background: var(--faux-doux); color: var(--faux-encre); }
.bilan-vol.bloque { background: var(--bon-doux); color: var(--bon-encre); }

/* la cyberviolence */
.choix-situations { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.carte-situation { display: grid; gap: 2px; text-align: left; border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); color: var(--encre); padding: 8px 12px; font: inherit; font-size: var(--t-s); cursor: pointer; }
.carte-situation:hover { border-color: var(--reseaux); }
.carte-situation[aria-pressed="true"] { border: 2px solid var(--reseaux); background: var(--reseaux-doux); }
.carte-situation span { font-size: var(--t-xs); color: var(--encre-2); }
.carte-situation .etat-situation { font-family: var(--f-mono); color: var(--ami-encre); font-weight: 600; }
.zone-situation { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; padding: 10px 14px; }
.tete-situation { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.tete-situation h3:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.progression-situation { margin: 0; font-size: var(--t-xs); color: var(--encre-2); font-family: var(--f-mono); }
.dessin-situation { margin: 0; }
.svg-situation { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; background: #f8fafc; border-radius: 10px; }
.svg-situation .nom-dessin { font: 600 13px var(--f-texte, sans-serif); fill: var(--encre); }
.svg-situation .titre-tel { font: 600 12.5px var(--f-texte, sans-serif); fill: #ffffff; }
.svg-situation .auteur-bulle { font: 600 12px var(--f-texte, sans-serif); fill: #374151; }
.svg-situation .texte-bulle { font: 12.5px var(--f-texte, sans-serif); fill: #1f2937; }
.recit-situation { margin: 0; font-size: var(--t-m); }
.choix-reactions { display: grid; gap: 6px; }
.reaction { text-align: left; border: 1px solid var(--ligne); background: #ffffff; color: var(--encre); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: var(--t-s); line-height: 1.35; cursor: pointer; }
.reaction:hover { border-color: var(--reseaux); }
.reaction.choisie { border-width: 2px; font-weight: 600; }
.reaction.choisie::before { font-weight: 700; margin-right: 6px; }
.reaction.genre-conseille { border-color: var(--bon-encre); background: var(--bon-doux); }
.reaction.genre-conseille::before { content: "✓"; color: var(--bon-encre); }
.reaction.genre-possible { border-color: var(--attention); background: var(--attention-doux); }
.reaction.genre-possible::before { content: "~"; color: #5c3700; }
.reaction.genre-eviter { border-color: var(--faux-encre); background: var(--faux-doux); }
.reaction.genre-eviter::before { content: "✗"; color: var(--faux-encre); }
.suite-reaction { display: grid; gap: 4px; font-size: var(--t-s); }
.suite-reaction p { margin: 0; }
.genre-reaction { font-weight: 700; }
.genre-reaction.genre-conseille { color: var(--bon-encre); }
.genre-reaction.genre-possible { color: #5c3700; }
.genre-reaction.genre-eviter { color: var(--faux-encre); }
.encadre-loi { background: var(--conseil-doux); border-left: 4px solid var(--conseil); padding: 6px 10px; border-radius: 6px; }
.bilan-situation { display: grid; gap: 6px; font-size: var(--t-s); }
.bilan-situation p { margin: 0; }
.bilan-situation:empty { display: none; }
.bilan-situation > .bouton { justify-self: start; }
.ressources-aide { background: var(--surface); border: 2px solid var(--reseaux); border-radius: 14px; padding: 10px 14px; }
.liste-ressources { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--t-s); }
.ressource { border-bottom: 1px solid var(--ligne); padding-bottom: 6px; }
.ressource p { margin: 0; }
.nom-ressource { font: 760 1.25rem var(--f-titre); color: var(--ami-encre); }
@media (prefers-reduced-motion: reduce) {
  .jauge-diversite i, .jauge-mdp i { transition: none; }
  .sequence-capture li { animation: none; }
}
@media (max-width: 520px) {
  /* le dessin est réduit d'environ un cinquième sur un téléphone : ses textes restent à 11,5 px au moins */
  .svg-situation .nom-dessin { font-size: 16px; }
  .svg-situation .titre-tel, .svg-situation .auteur-bulle, .svg-situation .texte-bulle { font-size: 15.5px; }
}
@media (max-width: 640px) {
  .champ-mdp, .choix-spectateur select, .ligne-reglage select { font-size: 16px; }
  .boite-abonnements { height: 520px; }
  .ligne-reglage { display: grid; }
}
@media print {
  .tete-fil { position: static; }
  .actions-pub, .pourquoi-pub { display: none !important; }
}

/* ---------- défis ---------- */
.page-mise { max-width: 980px; margin: 0 auto; padding: 28px var(--gouttiere) 48px; display: grid; gap: 22px; }
.defis { display: grid; gap: 18px; }
.defis h1 { font-size: var(--t-xxl); font-weight: 780; }
.defis > p { margin: 0; color: var(--encre-2); max-width: 70ch; }
.defis > .bouton { justify-self: start; }
.groupe-defis { display: grid; gap: 10px; }
.groupe-defis h2 { font-size: var(--t-l); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.groupe-defis .numero-partie { font-size: var(--t-xs); }
.grille-defis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.choix-defi { display: grid; gap: 4px; text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); align-content: start; }
button.choix-defi:hover { border-color: var(--accent); }
.choix-defi strong { font-family: var(--f-titre); font-size: var(--t-l); }
.choix-defi span { font-size: var(--t-s); color: var(--encre-2); }
.choix-defi em { font-style: normal; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--accent); }
.medaille { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 0.74rem; font-weight: 700; font-family: var(--f-mono); color: #ffffff; justify-self: start; flex: none; }
.medaille.petite { width: 22px; height: 22px; font-size: 0.6rem; }
/* dans le bilan d'une partie, le nom de la médaille reste lisible (11,5 px au moins) : pastille allongée */
.medailles-partie .medaille.petite { width: auto; min-width: 26px; padding: 0 6px; border-radius: 11px; font-size: 0.72rem; }
.medaille.grande { width: 48px; height: 48px; font-size: 0.9rem; }
.medaille.or { background: #8a6a0a; } .medaille.argent { background: #5b6670; } .medaille.bronze { background: #8a4f1f; } .medaille.aucune { background: var(--surface-2); color: var(--encre-2); }
.question { background: var(--surface); border: 1px solid var(--ligne); border-radius: 16px; padding: clamp(16px, 3vw, 28px); display: grid; gap: 14px; box-shadow: var(--ombre); }
.quiz-entete { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: var(--t-xs); color: var(--encre-2); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.quiz-progression { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.quiz-progression span { display: block; height: 100%; background: var(--accent); transition: width 0.3s; }
.question h2 { font-size: clamp(1.2rem, 2.6vw, 1.55rem); font-weight: 700; line-height: 1.25; }
.quiz-choix { display: grid; gap: 8px; }
.quiz-choix button { text-align: left; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); }
.quiz-choix button:hover:not(:disabled) { border-color: var(--accent); }
.quiz-choix button[data-ton="bon"] { background: var(--bon-doux); border-color: var(--bon); color: var(--bon-encre); font-weight: 700; }
.quiz-choix button[data-ton="faux"] { background: var(--faux-doux); border-color: var(--faux); color: var(--faux-encre); }
.quiz-choix button:disabled { cursor: default; }
.explication { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: var(--t-s); }
.explication strong.bon { color: var(--bon-encre); } .explication strong.faux { color: var(--faux-encre); }
.quiz-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.quiz-score { margin: 0; font-family: var(--f-titre); font-size: 3rem; line-height: 1; color: var(--accent); }
.serie { font-family: var(--f-mono); font-size: var(--t-xs); color: #a0400b; }

/* ---------- lexique et crédits ---------- */
.lexique-tete { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; justify-content: space-between; }
.lexique-tete h1 { font-size: var(--t-xxl); font-weight: 780; }
.nb-mots { font-family: var(--f-mono); font-size: var(--t-s); font-weight: 500; color: var(--encre-2); letter-spacing: 0; }
.recherche input { border: 1px solid var(--ligne); background: var(--surface); border-radius: 999px; padding: 8px 14px; min-width: min(300px, 100%); }
.liste-lexique { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 10px; }
.liste-lexique > div { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; align-content: start; scroll-margin-top: 16px; }
.liste-lexique dt { font-family: var(--f-titre); font-weight: 720; font-size: var(--t-l); }
.liste-lexique dd { margin: 0; font-size: var(--t-s); }
.liste-lexique dd a { font-size: var(--t-xs); font-weight: 700; }
#titre-credits, #titre-web-ferme { font-size: var(--t-xxl); font-weight: 780; }
.texte-credits { display: grid; gap: 10px; max-width: 80ch; }
.texte-credits h2 { font-size: var(--t-l); margin-top: 10px; }
.texte-credits p { margin: 0; }
.credits-photos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.credits-photos li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--t-s); background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px; }
.credits-photos img { border-radius: 8px; display: block; }
.credits-photos a { overflow-wrap: anywhere; }

/* ---------- petits écrans ---------- */
@media (max-width: 1180px) {
  .raccourcis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  /* une seule colonne : le code puis la page ; c'est l'atelier qui défile */
  .atelier-page, .atelier-styles { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow: auto; align-content: start; }
  .atelier-page .vue-code, .atelier-page .vue-compris, .atelier-styles .vue-code { flex: none; height: 340px; }
  .diagnostic { max-height: 240px; }
  .col-rendu .fenetre { flex: none; height: 460px; }
  .detail-echange { grid-template-columns: minmax(0, 1fr); }
  .atelier-inspecteur, .atelier-mini { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow: auto; align-content: start; }
  .col-inspecteur > .vue-code, .col-inspecteur > .vue-arbre { flex: none; height: 320px; }
  .styles-element { flex: none; overflow: visible; }
  .vue-liens, .vue-images { flex: none; }
  .vue-images { overflow: visible; }
  .graphe-site { flex: none; height: auto; min-height: 0; } /* la hauteur du dessin est calculée par l'appli */
  .col-mini-droite > .vue-code { flex: none; height: 320px; }
  .col-mini-droite > .fenetre { flex: none; height: 440px; }
  .diag-mini { max-height: 200px; }
  .atelier-url, .atelier-requete { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow: auto; align-content: start; }
  .col-url-exercice, .col-req-trajet { overflow: visible; }
  .col-url-navigateur .navigateur.plein, .col-req-navigateur .navigateur.plein { flex: none; height: 500px; }
}
@media (max-width: 980px) {
  .accueil-tete { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .ecran.activite { overflow: auto; display: block; }
  .colonne-scene { grid-template-rows: auto minmax(420px, 74vh) auto; min-height: auto; }
  .colonne-scene:has(.scene-atelier) { grid-template-rows: auto auto auto; }
  .scene.scene-atelier { overflow: visible; }
  .scene-atelier > .atelier-page, .scene-atelier > .atelier-styles, .scene-atelier > .jeu-ranger,
  .scene-atelier > .atelier-inspecteur, .scene-atelier > .atelier-mini,
  .scene-atelier > .atelier-url, .scene-atelier > .atelier-requete { position: static; overflow: visible; }
  .col-inspecteur > .vue-code, .col-inspecteur > .vue-arbre, .col-mini-droite > .vue-code { height: 42vh; min-height: 240px; }
  .col-mini-droite > .fenetre { height: 58vh; min-height: 300px; }
  .atelier-page .vue-code, .atelier-page .vue-compris, .atelier-styles .vue-code { height: 46vh; min-height: 260px; }
  .col-rendu .fenetre { height: 62vh; min-height: 320px; }
  .panneau { border-left: 0; border-top: 1px solid var(--ligne); overflow: visible; }
  .bouton-panneau { display: none; }
  .choix-niveau { margin-left: 0; }
}
@media (max-width: 640px) {
  .raccourcis { grid-template-columns: minmax(0, 1fr); }
  .bacs { grid-template-columns: minmax(0, 1fr); }
  .bac { min-height: 110px; }
  .echange { grid-template-columns: 3.6em minmax(0, 1fr) auto; }
  .echange .genre, .echange .pastille-cookie { display: none; }
  .ech-req { grid-template-columns: 3.2em minmax(0, 1fr) auto; }
  .ech-req .genre { display: none; }
  .entetes-http > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ligne-param { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) 32px; gap: 4px; }
}
@media (max-width: 640px) {
  /* barre compacte : titre court, liens et niveaux plus petits (sélecteurs renforcés : scolatools.css est chargé après) */
  .app .barre { min-height: 0; gap: 6px 10px; padding: 6px 12px; }
  .app .barre .marque { font-size: var(--t-m); }
  .marque-longue { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .marque-courte { display: inline; }
  .app .barre nav { gap: 2px; width: 100%; }
  .app .barre nav a { padding: 4px 8px; font-size: 0.86rem; }
  .app .choix-niveau > button { padding: 4px 10px; font-size: 0.82rem; }
}
@media (max-width: 520px) {
  .tete-fiche { grid-template-columns: 84px minmax(0, 1fr); }
  .tete-fiche img { width: 84px; }
  .ligne-css { margin-left: 0; }
  .diagnostic li { grid-template-columns: auto minmax(0, 1fr); }
  .diagnostic .gravite { display: none; }
  .diagnostic .rep { grid-column: 1 / -1; }
  .nav-barre { flex-wrap: wrap; }
  .nav-adresse { flex-basis: 100%; order: 5; }
  .credits-photos li { grid-template-columns: 64px minmax(0, 1fr); }
  .credits-photos img { width: 64px; height: auto; }
}
/* au vidéoprojecteur (écran large) : le trajet et les petits textes du thème 2 grandissent (12,5 px au moins) */
@media (min-width: 1600px) {
  .trajet { max-height: min(32vh, 330px); }
  .trajet .etiq { font-size: calc(15px / var(--k, 1)); }
  .trajet .etiq.petite { font-size: calc(13px / var(--k, 1)); }
  .m-nom, .ligne-sans p span, .journal-cs .qui-j, .niveaux span { font-size: 0.8rem; }
  .valeurs-connues, .carnet-sites { font-size: var(--t-s); }
}

@media (prefers-reduced-motion: reduce) {
  .info, .toast, .renvoi-info, .missions li.vient::before, .carte-code.refus, .morceau-url.refus { animation: none; }
  .quiz-progression span, .voyant-svg, .sommet-svg { transition: none; }
  .bloc-lien { transition: none; }
}

/* Champs de saisie à 16 px au moins sur téléphone et tablette (jusqu'à 860 px) : le téléphone ne zoome pas quand on les
   touche. Partout dans l'appli (thèmes 1 à 4, lexique, navigateur simulé), sans rien changer sur ordinateur. L'éditeur de
   code passe tout entier à 16 px (texte coloré et zone de saisie superposés doivent garder la même taille). */
@media (max-width: 860px) {
  .app input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), .app select, .app textarea { font-size: 16px; }
  .app .editeur-web { font-size: 16px; }
}

/* Le focus clavier d'un sommet reste visible même quand le sommet porte un état qui colore déjà son anneau (spectateur,
   pont, chemin, parcours en largeur) : ces règles, plus loin dans la feuille, l'emportaient sur :focus-visible. */
.graphe-vue .gv-sommet:focus-visible .gv-anneau { stroke: #14213d; stroke-width: 3; stroke-dasharray: 6 3; }