/* ViZé Urgence : ce qui s'ajoute à charte.css (sections communes de ViZé Offres).
 * Toute couleur passe par un jeton déclaré ici ou dans charte.css. */
:root {
  /* Rouge d'alerte : aplat plein (texte blanc dessus, 6,4:1) et encre sur fond clair */
  --rouge-plein: #B0242F;
  --rouge-ink: #A3262A;
  --rouge-bg: #FBE9E9;
  --ambre-ink: #7A4E00;
  --ambre-bg: #FDF1DA;
  /* Garde : teintes propres à l'illustration */
  --g-rouge: #C8323C;
  --g-rouge-clair: #E2545D;
  --g-vert: #1E7A45;
  --g-vert-clair: #2A9457;
  --g-case: #c3cbd8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --rouge-ink: #F4A7A7;
    --rouge-bg: #3B1B22;
    --ambre-ink: #F5DD6B;
    --ambre-bg: #3D3300;
  }
}
:root[data-theme="sombre"] {
  --rouge-ink: #F4A7A7;
  --rouge-bg: #3B1B22;
  --ambre-ink: #F5DD6B;
  --ambre-bg: #3D3300;
}

/* Illustration de la garde */
.g-rouge { fill: var(--g-rouge); }
.g-rouge-clair { fill: var(--g-rouge-clair); }
.g-vert { fill: var(--g-vert); }
.g-vert-clair { fill: var(--g-vert-clair); }
.g-blanc { fill: var(--g-blanc); }
.g-case { fill: none; stroke: var(--g-case); stroke-width: 2; }
.g-coche { fill: none; stroke: var(--g-blanc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.g-fleche { fill: none; stroke: var(--g-blanc); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

/* Pastilles de statut */
.pastille-rouge { background: var(--rouge-bg); color: var(--rouge-ink); }
.pastille-ambre { background: var(--ambre-bg); color: var(--ambre-ink); }
.pastille-ok { background: var(--ok-bg); color: var(--ok-ink); }
.ligne-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.ligne-pastilles .pastille { align-self: auto; }

/* Bibliothèque */
.barre-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.barre-actions .btn svg { width: 20px; height: 20px; }
.vide-carte { grid-column: 1 / -1; }
.carte-invitation { margin-bottom: 18px; border-color: var(--gold); }
.ligne-invitation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.ligne-invitation:first-of-type { border-top: 0; }

/* Espace */
.message-attention { background: var(--attention-bg); color: var(--attention-ink); }
.btn-petit { min-height: 40px; padding: 6px 12px; font-size: 14px; }
.tableau select { min-height: 40px; padding: 6px 10px; border-radius: var(--rayon-sm); border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.coupe { word-break: break-all; }
.centre { text-align: center; }
@media (max-width: 640px) {
  .tableau thead { display: none; }
  .tableau tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .tableau td { border: 0; padding: 2px 0; }
}

/* Liens de texte (fil d'Ariane, renvois) : couleur de la charte, visités compris */
a.lien, a.lien:visited { color: var(--bleu-ink); font-weight: 700; }
a.lien:hover { text-decoration-thickness: 2px; }
.entete-qui { align-self: center; }
@media (max-width: 640px) {
  .tableau td:first-child, .tableau td.coupe { grid-column: 1 / -1; }
}
.chargement-court { color: var(--muted); margin: 8px 0; }


/* ================= LOT 2 : CARACTÉRISATION ET ANNUAIRE ================= */
.avancement { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 18px; color: var(--muted); font-weight: 700; font-size: 14px; }
.avancement-barre { flex: 1 1 220px; max-width: 420px; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.avancement-barre i { display: block; height: 100%; background: var(--ok-ink); border-radius: 999px; }
.assistant { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.assistant > * { min-width: 0; }
.etapes ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.etape {
  display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center;
  padding: 10px 12px; border-radius: var(--rayon-sm); border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); text-decoration: none; min-height: 44px;
}
.etape:hover { border-color: var(--bleu); }
.etape.active { border-color: var(--btn-bg); box-shadow: inset 4px 0 0 var(--gold); }
.etape-num { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--bleu-ink); font-weight: 900; }
.etape.active .etape-num { background: var(--btn-bg); color: var(--btn-ink); }
.etape-nom { font-weight: 700; }
.etape .pastille { justify-self: start; font-size: 11.5px; padding: 1px 8px; }
.etape-corps h3 { font-size: 16px; font-weight: 900; margin: 18px 0 6px; }
.sous-carte { margin-top: 18px; padding: 16px; border: 1px dashed var(--line); border-radius: var(--rayon-sm); background: var(--bg); }
.sous-carte h2, .sous-carte h3 { margin-top: 0; }
.cellule-actions { white-space: nowrap; }
.cellule-actions .btn + .btn { margin-left: 6px; }
.liste-edit { margin: 8px 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.liste-edit li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.liste-edit input { flex: 1 1 200px; min-height: 44px; padding: 8px 12px; border-radius: var(--rayon-sm); border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.modeles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 12px; }
.modele { display: flex; flex-direction: column; gap: 8px; }
.modele.conseille { border-color: var(--ok-ink); }
.modele ol { margin: 0; padding-left: 20px; color: var(--muted); }
.modele .btn { align-self: flex-start; margin-top: auto; }
.niveaux { display: flex; flex-direction: column; gap: 12px; }
.niveau { border: 1px solid var(--line); border-radius: var(--rayon-sm); padding: 12px 14px; margin: 0; background: var(--bg); }
.niveau legend { font-weight: 900; padding: 0 6px; color: var(--bleu-ink); }
.champ.case label { display: flex; gap: 10px; align-items: center; font-weight: 700; min-height: 44px; }
.champ.case input { width: 20px; height: 20px; }
.champ input:disabled, .champ select:disabled, .champ textarea:disabled, .liste-edit input:disabled { opacity: 1; color: var(--ink); background: var(--surface-2); }
.recherche { max-width: 420px; margin-top: 14px; }
.lien-tel, .lien-tel:visited { color: var(--bleu-ink); font-weight: 700; white-space: nowrap; }
.bilan-import { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.bilan-import .pastille { align-self: auto; }
.liste-import { margin: 6px 0 10px; padding-left: 22px; font-size: 14px; max-height: 260px; overflow: auto; }
details summary { cursor: pointer; font-weight: 700; min-height: 36px; display: flex; align-items: center; }
.lecture-demo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.onglets a.onglet { text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 860px) {
  .assistant { grid-template-columns: 1fr; }
  .etapes ol { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .etape { min-width: 170px; }
}

/* ================= LOT 3 : PLANS, ZONES, ÉQUIPE, ACTIVATION, KIT ================= */
/* Zones et locaux */
.zone-carte { margin: 12px 0 0 calc(var(--prof, 0) * 22px); padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--bleu); border-radius: var(--rayon-sm); background: var(--surface); }
.zone-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.zone-tete h3 { font-size: 17px; font-weight: 900; margin: 0; }
.zone-tete .pastille { align-self: center; }
.zone-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.zone-infos { margin: 8px 0; font-size: 14px; color: var(--muted); }
.locaux { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.locaux li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.locaux .occupants { flex: 1 1 260px; font-size: 14px; }
.occupants-choix { border: 1px solid var(--line); border-radius: var(--rayon-sm); padding: 10px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; }
.occupants-choix legend { font-weight: 700; padding: 0 6px; }
.occupants-choix label { display: flex; gap: 8px; align-items: center; min-height: 36px; }
/* Équipe */
.organigramme, .organigramme ul { list-style: none; margin: 0; padding: 0; }
.organigramme ul { margin-left: 22px; border-left: 2px solid var(--line); padding-left: 10px; }
.role-ligne { margin: 8px 0; }
.role-lien { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--rayon-sm); background: var(--surface); color: var(--ink); text-decoration: none; }
.role-lien:hover { border-color: var(--bleu); }
.role-qui { font-size: 14px; }
.controles { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.ctl-erreur { color: var(--danger-ink); font-weight: 700; }
.ctl-attention { color: var(--attention-ink); }
.choix-roles { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 14px; }
.choix-roles label { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-height: 40px; }
.choix-roles .note { width: 100%; padding-left: 28px; }
.actions-liste { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.action-edit { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: var(--rayon-sm); background: var(--bg); }
.action-edit.premiere { border-left: 5px solid var(--rouge-plein); }
.action-edit .num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--bleu-ink); font-weight: 900; }
.action-champs textarea, .action-meta input, .action-meta select, .modele-msg textarea { width: 100%; padding: 8px 10px; border-radius: var(--rayon-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.action-meta { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) auto; gap: 8px; margin-top: 6px; align-items: end; font-size: 13px; font-weight: 700; }
.action-meta label { display: flex; flex-direction: column; gap: 3px; }
.action-meta .case-ligne { flex-direction: row; align-items: center; gap: 6px; min-height: 40px; white-space: nowrap; }
.action-meta input[type="checkbox"] { width: auto; }
.modele-msg { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; font-size: 13px; font-weight: 700; }
.action-boutons { display: flex; flex-direction: column; gap: 4px; }
/* Activation */
.regle h2 { margin-bottom: 8px; }
.regle-def { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 14px; }
.regle-def dt { font-weight: 700; color: var(--muted); }
.regle-def dd { margin: 0; }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; }
.cases label { display: flex; gap: 8px; align-items: center; min-height: 36px; }
fieldset.champ { border: 1px solid var(--line); border-radius: var(--rayon-sm); padding: 8px 12px; }
fieldset.champ legend { font-weight: 700; font-size: 14px; padding: 0 6px; }
@media (max-width: 640px) {
  .action-edit { grid-template-columns: 30px minmax(0, 1fr); }
  .action-boutons { grid-column: 2; flex-direction: row; }
  .action-meta { grid-template-columns: 1fr; }
  .zone-carte { margin-left: calc(var(--prof, 0) * 10px); }
}

/* Kit papier : à l'écran, des feuilles A4 ; à l'impression, la charte seule. */
.kit { max-width: 210mm; margin: 0 auto 48px; display: flex; flex-direction: column; gap: 18px; }
.kit-page { background: #fff; color: #1A2233; padding: 16mm 15mm; box-shadow: 0 2px 10px var(--ombre); font-family: var(--police); font-size: 10.5pt; line-height: 1.4; }
.kit-page h2 { font-size: 17pt; font-weight: 900; color: #1F3864; margin: 2px 0 10px; }
.kit-page h3 { font-size: 12pt; font-weight: 900; color: #1F3864; margin: 14px 0 6px; }
.kit-tete { border-bottom: 2px solid #C9A800; margin-bottom: 10px; }
.kit-sur { font-size: 9pt; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: #7A6600; }
.kit-couverture { display: flex; flex-direction: column; justify-content: center; min-height: 240mm; border-top: 10mm solid #1F3864; }
.kit-couverture h1 { font-size: 34pt; font-weight: 900; color: #1F3864; margin: 6px 0; }
.kit-cabinet { color: #7A6600; font-weight: 900; }
.kit-entreprise { font-size: 18pt; font-weight: 900; margin: 0; }
.kit-date { color: #4A5568; }
.kit-sommaire { margin: 18px 0; font-size: 12pt; }
.kit-id, .kit-liste { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
.kit-id th, .kit-id td, .kit-liste th, .kit-liste td { border: 1px solid #C6D0E0; padding: 5px 7px; text-align: left; vertical-align: top; }
.kit-id th { width: 30%; background: #EAEFF7; }
.kit-liste thead th { background: #1F3864; color: #fff; }
.kit-appel-liste { table-layout: fixed; }
.kit-col-local { width: 30%; }
.kit-col-c { width: 22mm; }
.kit-appel-liste thead th { font-size: 9pt; }
.kit-note { color: #4A5568; font-size: 9pt; }
.kit-mission { font-style: italic; margin: 6px 0 10px; }
.kit-actions { list-style: none; counter-reset: kit; margin: 0; padding: 0; }
.kit-actions li { counter-increment: kit; display: grid; grid-template-columns: 16px 22px minmax(0, 1fr) 26mm; gap: 6px; align-items: start; padding: 6px 4px; border-bottom: 1px solid #DCE3EE; break-inside: avoid; }
.kit-actions li::before { content: counter(kit) "."; grid-column: 2; grid-row: 1; font-weight: 900; color: #1F3864; }
.kit-actions .kit-case { grid-column: 1; grid-row: 1; width: 13px; height: 13px; border: 1.5px solid #1F3864; margin-top: 3px; }
.kit-actions .kit-texte { grid-column: 3; }
.kit-actions .kit-heure { grid-column: 4; font-size: 9pt; color: #4A5568; }
.kit-actions .kit-premiere { background: #FBE9E9; }
.kit-total { font-weight: 700; margin: 8px 0; }
.kit-pied { color: #4A5568; font-size: 9pt; border-top: 1px solid #C6D0E0; padding-top: 6px; margin-top: 10px; }
.kit-priorites { font-size: 12pt; font-weight: 700; }
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .entete, .bandeau-demo, .ariane, .kit-outils, .annonce, #vzSplash { display: none !important; }
  .kit { max-width: none; margin: 0; gap: 0; }
  .kit-page { box-shadow: none; break-after: page; min-height: 0; padding: 12mm 14mm; }
  .kit-actions li { padding: 4px; }
  .kit-page:last-child { break-after: auto; }
  .kit-liste tr, .kit-id tr { break-inside: avoid; }
}

/* ================= GARDE ANIMÉE =================
 * Scène de face en perspective de src/garde-scene.js (maquette v3) : teintes de la
 * charte, tons de peau et de mobilier nommés. Le SVG n'écrit aucune couleur. */
:root {
  --g-mur: #f4f6fb;
  --g-mur-ombre: #dde4ee;
  --g-mur-arete: #b9c4d6;
  --g-mur-fond-haut: #e6ebf3;
  --g-mur-fond-bas: #c9d2e0;
  --g-mur-cote-pres: #f1f4f9;
  --g-mur-cote-loin: #c7d0de;
  --g-couloir-pres: #d9e0eb;
  --g-couloir-loin: #b3bfd1;
  --g-joint: #8e9ab0;
  --g-parquet-pres: #cfa06a;
  --g-parquet-loin: #9c7447;
  --g-lame: #7f5c35;
  --g-salle-pres: #efe6e7;
  --g-salle-loin: #d3c7cb;
  --g-moquette-pres: #c3d0e4;
  --g-moquette-loin: #9fb0cb;
  --g-plinthe: #9aa6ba;
  --g-dalle: #1F3864;
  --g-dalle-ombre: #14264a;
  --g-verre: #bcd9f2;
  --g-cadre: #5b6b88;
  --g-ciel-haut: #8fc0ea;
  --g-ciel-bas: #d8ebf8;
  --g-bois-dessus: #d6a96f;
  --g-bois: #b98950;
  --g-bois-ombre: #946a3a;
  --g-siege-dessus: #4a5a7d;
  --g-siege: #34405a;
  --g-siege-ombre: #252f45;
  --g-ecran: #0d1526;
  --g-ecran-lueur: #2E75B6;
  --g-ecran-clair: #8ec0f2;
  --g-porte-dessus: #cdd6e4;
  --g-porte: #b3c0d4;
  --g-porte-ombre: #95a3bb;
  --g-pave-dessus: #b4bdcc;
  --g-pave: #8e9ab0;
  --g-pave-ombre: #717d94;
  --g-herbe: #2A9457;
  --g-poteau: #c3cbd8;
  --g-poteau-ombre: #9aa6ba;
  --g-lumiere: #ffe07a;
  --g-fil: #3c4a66;
  /* tons de peau */
  --g-peau-1: #8D5524;
  --g-peau-2: #6A4123;
  --g-peau-3: #A9713F;
  --g-peau-4: #4B2D18;
  --g-cheveux: #16100c;
  /* tenues */
  --g-tenue-bleu: #2E75B6;
  --g-tenue-blanc: #f4f6fb;
  --g-tenue-marine: #1F3864;
  --g-tenue-vert: #1E7A45;
  --g-tenue-gris: #5b6b88;
  --g-tenue-sombre: #1c2f57;
  --g-chaussure: #0d1526;
}
/* arrêts de dégradés */
.st-mur-fond-haut { stop-color: var(--g-mur-fond-haut); } .st-mur-fond-bas { stop-color: var(--g-mur-fond-bas); }
.st-cote-pres { stop-color: var(--g-mur-cote-pres); } .st-cote-loin { stop-color: var(--g-mur-cote-loin); }
.st-couloir-pres { stop-color: var(--g-couloir-pres); } .st-couloir-loin { stop-color: var(--g-couloir-loin); }
.st-parquet-pres { stop-color: var(--g-parquet-pres); } .st-parquet-loin { stop-color: var(--g-parquet-loin); }
.st-salle-pres { stop-color: var(--g-salle-pres); } .st-salle-loin { stop-color: var(--g-salle-loin); }
.st-moquette-pres { stop-color: var(--g-moquette-pres); } .st-moquette-loin { stop-color: var(--g-moquette-loin); }
.st-ciel-haut { stop-color: var(--g-ciel-haut); } .st-ciel-bas { stop-color: var(--g-ciel-bas); }
.st-lumiere-c { stop-color: var(--g-lumiere); stop-opacity: .85; } .st-lumiere-b { stop-color: var(--g-lumiere); stop-opacity: 0; }
.st-cone-h { stop-color: var(--g-lumiere); stop-opacity: .42; } .st-cone-b { stop-color: var(--g-lumiere); stop-opacity: 0; }
.st-ecran-c { stop-color: var(--g-ecran-clair); stop-opacity: .55; } .st-ecran-b { stop-color: var(--g-ecran-clair); stop-opacity: 0; }

.g-mur-fond { fill: url(#grMurFond); }
.g-mur-gauche { fill: url(#grMurGauche); }
.g-mur-droit { fill: url(#grMurDroit); }
.g-sol-couloir { fill: url(#grCouloir); }
.g-parquet { fill: url(#grParquet); }
.g-sol-salle { fill: url(#grSalle); }
.g-moquette { fill: url(#grMoquette); }
.g-ciel { fill: url(#grCiel); }
.g-lueur { fill: url(#grLueur); }
.g-cone { fill: url(#grCone); }
.g-ecran-halo { fill: url(#grEcran); }
.g-flaque { fill: var(--g-lumiere); fill-opacity: .22; filter: url(#urFlou2); }
.g-joint { fill: none; stroke: var(--g-joint); stroke-width: .5; stroke-opacity: .55; }
.g-lame { fill: none; stroke: var(--g-lame); stroke-width: .45; stroke-opacity: .45; }
.g-fil { fill: none; stroke: var(--g-fil); stroke-width: .7; }
.g-plinthe { fill: var(--g-plinthe); }
.g-herbe { fill: var(--g-herbe); }
.g-mur { fill: var(--g-mur); }
.g-dalle { fill: var(--g-dalle); }
.g-verre { fill: var(--g-verre); fill-opacity: .16; stroke: var(--g-cadre); stroke-width: .6; }
.g-cadre { fill: var(--g-cadre); }
.g-bois-z { fill: var(--g-bois-dessus); } .g-bois-y { fill: var(--g-bois); } .g-bois-x { fill: var(--g-bois-ombre); }
.g-siege-z { fill: var(--g-siege-dessus); } .g-siege-y { fill: var(--g-siege); } .g-siege-x { fill: var(--g-siege-ombre); }
.g-ecran { fill: var(--g-ecran); } .g-ecran-face { fill: var(--g-ecran-lueur); }
.g-porte-y { fill: var(--g-porte); } .g-porte-x { fill: var(--g-porte-ombre); }
.g-porte-verre { fill: var(--g-verre); fill-opacity: .3; stroke: var(--g-cadre); stroke-width: 1.4; stroke-linejoin: round; }
.g-pave-z { fill: var(--g-pave-dessus); } .g-pave-y { fill: var(--g-pave); } .g-pave-x { fill: var(--g-pave-ombre); }
.g-poteau-z, .g-poteau-y { fill: var(--g-poteau); } .g-poteau-x { fill: var(--g-poteau-ombre); }
.g-mur-z { fill: var(--g-mur-arete); } .g-mur-y { fill: var(--g-mur); } .g-mur-x { fill: var(--g-mur-ombre); }
.g-dalle-z, .g-dalle-y { fill: var(--g-dalle); } .g-dalle-x { fill: var(--g-dalle-ombre); }
.g-cadre-z, .g-cadre-y { fill: var(--g-cadre); } .g-cadre-x { fill: var(--g-tenue-sombre); }
.g-abat-y, .g-abat-z { fill: var(--g-tenue-sombre); } .g-abat-x { fill: var(--g-ecran); }
.g-ombre-portee { fill: var(--g-fond-b); fill-opacity: .22; filter: url(#urFlou); }
.g-ombre-perso { fill: var(--g-fond-b); fill-opacity: .26; filter: url(#urFlou); }
.g-ombrage { fill: var(--g-fond-b); fill-opacity: .16; }
.loin { filter: brightness(.8); }
.g-peau-1 { fill: var(--g-peau-1); } .g-peau-2 { fill: var(--g-peau-2); }
.g-peau-3 { fill: var(--g-peau-3); } .g-peau-4 { fill: var(--g-peau-4); }
.g-cheveux { fill: var(--g-cheveux); }
.g-tenue-bleu { fill: var(--g-tenue-bleu); } .g-tenue-blanc { fill: var(--g-tenue-blanc); }
.g-tenue-marine { fill: var(--g-tenue-marine); } .g-tenue-vert { fill: var(--g-tenue-vert); }
.g-tenue-gris { fill: var(--g-tenue-gris); } .g-tenue-sombre { fill: var(--g-tenue-sombre); }
.g-chaussure { fill: var(--g-chaussure); }
.g-gilet { fill: var(--g-or-clair); } .g-bande { fill: var(--g-papier); } .g-casque { fill: var(--g-or); }
.g-gyro-lueur { fill: var(--g-rouge-clair); filter: url(#urFlou2); }
.g-gyro-faisceau { fill: var(--g-rouge-clair); fill-opacity: .4; }
.g-gyro-reflet { fill: var(--g-blanc); fill-opacity: .85; }
.g-encre-orclair { fill: var(--g-or-clair); font-family: var(--police); font-weight: 900; }
.g-encre-gris { fill: var(--g-gris); font-family: var(--police); font-weight: 700; }
.g-case-ecran { fill: none; stroke: var(--g-gris); stroke-width: 2; }
.g-coche-ecran { fill: none; stroke: var(--g-blanc); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; }
.g-trait-ecran { fill: var(--g-gris); }
.g-fleche-pan { fill: none; stroke: var(--g-blanc); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }

.vz-fig { width: min(46vw, 520px); }
.vz-stage { max-width: 1180px; }
@media (max-width: 640px) { .vz-fig { width: min(100%, 420px); } }