Diferencias

Muestra las diferencias entre dos versiones de la página.

--- fr:start [2026/04/26 12:07] – jesus
+++ fr:start [2026/05/18 08:12] (actual) – jesus
@@ Línea 21: / Línea 21: @@
 <html>
 <style>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+  /* --- MOTEUR VISUEL RÉTRO CRT --- */
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+  .pcw-monitor-ultra {
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    background-color: #000b00;
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+    border: 12px solid #2a2a2a;
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
+    border-radius: 15px;
+    padding: 25px;
+    margin: 25px 0;
+    font-family: 'Courier New', Courier, monospace;
+    position: relative;
+    overflow: hidden;
+    box-shadow: inset 0 0 60px rgba(0,255,0,0.15), 0 10px 30px rgba(0,0,0,0.7);
+  }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
+  /* Scanlines et effet de scintillement */
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
+  .pcw-monitor-ultra::after {
-</style>
+    content: " ";
+    position: absolute;
+    top: 0; left: 0; bottom: 0; right: 0;
+    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%),
+                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
+    background-size: 100% 3px, 2px 100%;
+    z-index: 2;
+    pointer-events: none;
+    animation: flickering 0.15s infinite;
+  }
-<div class="pcw-monitor">
+  @keyframes flickering { 0% { opacity: 0.98; } 100% { opacity: 1; } }
-  <div class="pcw-title"> > HARDWARE </div>
-  <div class="pcw-grid">
-    <a href="doku.php?id=fr:hardware:extensions" class="pcw-btn">EXTENSIONS</a>
-    <a href="doku.php?id=fr:hardware:gate_array" class="pcw-btn">GATE ARRAY</a>
-    <a href="doku.php?id=fr:hardware:nouveaux_developpements" class="pcw-btn">NOUVEAUX DÉVELOPPEMENTS</a>
-    <a href="doku.php?id=fr:hardware:brochages" class="pcw-btn">BROCHAGES</a>
-    <a href="doku.php?id=fr:hardware:peripheriques" class="pcw-btn">PÉRIPHÉRIQUES</a>
-    <a href="doku.php?id=fr:hardware:cartes_meres" class="pcw-btn">CARTES MÈRES</a>
-    <a href="doku.php?id=fr:hardware:cartes_moniteur" class="pcw-btn">CARTES MONITEUR</a>
-    <a href="doku.php?id=fr:hardware:cartes_clavier" class="pcw-btn">CARTES CLAVIER</a>
-    <a href="doku.php?id=fr:hardware:cartes_imprimante" class="pcw-btn">CARTES IMPRIMANTE</a>
-    <a href="doku.php?id=fr:hardware:marguerites" class="pcw-btn">MARGUERITES</a>
-    <a href="doku.php?id=fr:hardware:lecteurs_disquette" class="pcw-btn">LECTEURS DISQUETTE</a>
-  </div>
-</div>
-</html>
-----
+  /* Style de texte rétro (Glow vert) */
+  .retro-text {
+    color: #00ff00 !important;
+    font-family: 'Courier New', Courier, monospace;
+    text-shadow: 0 0 10px rgba(0, 255, 0, 0.7), 0 0 2px rgba(0, 255, 0, 0.8);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    text-decoration: none !important;
+  }
-<html>
+  .pcw-title-ultra {
-<style>
+    font-size: 1.6em;
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    font-weight: bold;
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    margin-bottom: 25px;
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    display: block;
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+  }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
+  .pcw-title-ultra::after {
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
+    content: "_";
-</style>
+    animation: cursor-blink 1s infinite;
+  }
-<div class="pcw-monitor">
+  @keyframes cursor-blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
-  <div class="pcw-title"> > LOGICIEL </div>
-  <div class="pcw-grid">
-    <a href="doku.php?id=fr:software:applications" class="pcw-btn">APPLICATIONS</a>
-    <a href="doku.php?id=fr:software:societes" class="pcw-btn">SOCIÉTÉS</a>
-    <a href="doku.php?id=fr:software:jeux" class="pcw-btn">JEUX</a>
-    <a href="doku.php?id=fr:software:nouveaux_developpements" class="pcw-btn">NOUVEAUX DÉVELOPPEMENTS</a>
-    <a href="doku.php?id=fr:software:systeme" class="pcw-btn">SYSTÈME</a>
-  </div>
-</div>
-</html>
-----
+  /* Grille et Commandes (Boutons) */
+  .pcw-grid-ultra {
+    display: grid;
+    gap: 10px;
+    grid-template-columns: repeat(3, 1fr);
+    position: relative;
+    z-index: 3;
+  }
-<html>
+  .pcw-btn-ultra {
-<style>
+    display: flex;
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    align-items: center;
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    justify-content: flex-start;
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    background: transparent;
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+    padding: 8px 5px;
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
+    border: 1px solid transparent;
+    font-weight: bold;
+    font-size: 0.95em;
+    transition: 0.2s;
+  }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
+  /* Effet de sélection : Pointeur et Déplacement */
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
+  .pcw-btn-ultra:hover {
-</style>
+    background-color: rgba(0, 255, 0, 0.15);
+    border: 1px solid rgba(0, 255, 0, 0.5);
+    transform: translateX(8px);
+  }
-<div class="pcw-monitor">
+  .pcw-btn-ultra::before {
-  <div class="pcw-title"> > CATALOGUES </div>
+    content: "> ";
+    opacity: 0.4;
-  <div class="pcw-grid" style="grid-template-columns: 1fr;">
+    margin-right: 5px;
-    <a href="doku.php?id=fr:catalogues:accueil" class="pcw-btn">ACCÈS</a>
+  }
-  </div>
-</div>
-</html>
-----
+  .pcw-btn-ultra:hover::before {
+    opacity: 1;
+  }
-<html>
+  /* Variantes de colonnes */
-<style>
+  .col-2 { grid-template-columns: repeat(2, 1fr); }
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+  .col-1 { grid-template-columns: 1fr; }
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
+  @media (max-width: 850px) { .pcw-grid-ultra { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
+  @media (max-width: 480px) { .pcw-grid-ultra { grid-template-columns: 1fr !important; } }
 </style>
-<div class="pcw-monitor">
+<!-- 1. MATÉRIEL (HARDWARE) -->
-  <div class="pcw-title"> > ÉMULATEURS </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> MATÉRIEL </div>
-  <div class="pcw-grid">
+  <div class="pcw-grid-ultra">
-    <a href="doku.php?id=fr:emulateurs:introduction" class="pcw-btn">INTRODUCTION</a>
+    <a href="doku.php?id=fr:hardware:extensions" class="pcw-btn-ultra retro-text">EXTENSIONS</a>
-    <a href="doku.php?id=fr:emulateurs:espagnol" class="pcw-btn">ESPAGNOL</a>
+    <a href="doku.php?id=fr:hardware:gate_array" class="pcw-btn-ultra retro-text">GATE ARRAY</a>
-    <a href="doku.php?id=fr:emulateurs:anglais" class="pcw-btn">ANGLAIS</a>
+    <a href="doku.php?id=fr:hardware:nouveaux_developpements" class="pcw-btn-ultra retro-text">NOUVEAUX DÉVELOPPEMENTS</a>
-    <a href="doku.php?id=fr:emulateurs:international" class="pcw-btn">INTERNATIONAL</a>
+    <a href="doku.php?id=fr:hardware:brochages" class="pcw-btn-ultra retro-text">BROCHAGES</a>
+    <a href="doku.php?id=fr:hardware:peripheriques" class="pcw-btn-ultra retro-text">PÉRIPHÉRIQUES</a>
+    <a href="doku.php?id=fr:hardware:cartes_meres" class="pcw-btn-ultra retro-text">CARTES MÈRES</a>
+    <a href="doku.php?id=fr:hardware:cartes_moniteur" class="pcw-btn-ultra retro-text">CARTES MONITEUR</a>
+    <a href="doku.php?id=fr:hardware:cartes_clavier" class="pcw-btn-ultra retro-text">CARTES CLAVIER</a>
+    <a href="doku.php?id=fr:hardware:cartes_imprimante" class="pcw-btn-ultra retro-text">CARTES IMPRIMANTE</a>
+    <a href="doku.php?id=fr:hardware:marguerites" class="pcw-btn-ultra retro-text">MARGUERITES</a>
+    <a href="doku.php?id=fr:hardware:lecteurs_disquette" class="pcw-btn-ultra retro-text">LECTEURS DISQUETTE</a>
   </div>
 </div>
-</html>
-----
+<!-- 2. LOGICIEL (SOFTWARE) -->
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> LOGICIEL </div>
+  <div class="pcw-grid-ultra">
+    <a href="doku.php?id=fr:software:applications" class="pcw-btn-ultra retro-text">APPLICATIONS</a>
+    <a href="doku.php?id=fr:software:editeurs" class="pcw-btn-ultra retro-text">ÉDITEURS</a>
+    <a href="doku.php?id=fr:software:societes" class="pcw-btn-ultra retro-text">SOCIÉTÉS</a>
+    <a href="doku.php?id=fr:software:jeux" class="pcw-btn-ultra retro-text">JEUX</a>
+    <a href="doku.php?id=fr:software:nouveaux_developpements" class="pcw-btn-ultra retro-text">NOUVEAUX DÉVELOPPEMENTS</a>
+    <a href="doku.php?id=fr:software:systeme" class="pcw-btn-ultra retro-text">SYSTÈME</a>
+  </div>
+</div>
-<html>
+<!-- 3. CATALOGUES -->
-<style>
+<div class="pcw-monitor-ultra">
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+  <div class="pcw-title-ultra retro-text"> A> CATALOGUES </div>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+  <div class="pcw-grid-ultra col-1">
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    <a href="doku.php?id=fr:catalogues:accueil" class="pcw-btn-ultra retro-text">ACCÉDER AU CATALOGUE COMPLET</a>
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+  </div>
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
+</div>
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
+<!-- 4. ÉMULATEURS -->
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
+<div class="pcw-monitor-ultra">
-</style>
+  <div class="pcw-title-ultra retro-text"> A> ÉMULATEURS </div>
+  <div class="pcw-grid-ultra">
+    <a href="doku.php?id=fr:emulateurs:introduction" class="pcw-btn-ultra retro-text">INTRODUCTION</a>
+    <a href="doku.php?id=fr:emulateurs:espagnol" class="pcw-btn-ultra retro-text">ESPAGNOL</a>
+    <a href="doku.php?id=fr:emulateurs:anglais" class="pcw-btn-ultra retro-text">ANGLAIS</a>
+    <a href="doku.php?id=fr:emulateurs:international" class="pcw-btn-ultra retro-text">INTERNATIONAL</a>
+  </div>
+</div>
-<div class="pcw-monitor">
+<!-- 5. LIVRES -->
-  <div class="pcw-title"> > LIVRES </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> LIVRES </div>
-  <div class="pcw-grid" style="grid-template-columns: repeat(2, 1fr);">
+  <div class="pcw-grid-ultra col-2">
-    <a href="doku.php?id=fr:livres:acces" class="pcw-btn">ACCÈS</a>
+    <a href="doku.php?id=fr:livres:preserves" class="pcw-btn-ultra retro-text">PRÉSERVÉS</a>
-    <a href="doku.php?id=fr:livres:liste" class="pcw-btn">LISTE</a>
+    <a href="doku.php?id=fr:livres:non_preserves" class="pcw-btn-ultra retro-text">NON PRÉSERVÉS</a>
   </div>
 </div>
-</html>
-----
-<html>
-<style>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
+<!-- 6. LOCOMOTIVE SOFTWARE -->
-  <div class="pcw-title"> > LOCOMOTIVE SOFTWARE </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> LOCOMOTIVE SOFTWARE </div>
-  <div class="pcw-grid" style="grid-template-columns: repeat(2, 1fr);">
+  <div class="pcw-grid-ultra col-2">
-    <a href="doku.php?id=fr:locomotive:applications" class="pcw-btn">APPLICATIONS</a>
+    <a href="doku.php?id=fr:locomotive:applications" class="pcw-btn-ultra retro-text">APPLICATIONS</a>
-    <a href="doku.php?id=fr:locomotive:catalogues" class="pcw-btn">CATALOGUES</a>
+    <a href="doku.php?id=fr:locomotive:catalogues" class="pcw-btn-ultra retro-text">CATALOGUES</a>
-    <a href="doku.php?id=fr:locomotive:support_imprimante" class="pcw-btn">SUPPORT IMPRIMANTE</a>
+    <a href="doku.php?id=fr:locomotive:support_imprimante" class="pcw-btn-ultra retro-text">SUPPORT IMPRIMANTE</a>
-    <a href="doku.php?id=fr:locomotive:magazines" class="pcw-btn">MAGAZINES</a>
+    <a href="doku.php?id=fr:revistas:Script" class="pcw-btn-ultra retro-text">MAGAZINES</a>
   </div>
 </div>
-</html>
-----
+<!-- 7. MANUELS -->
+<div class="pcw-monitor-ultra">
-<html>
+  <div class="pcw-title-ultra retro-text"> A> MANUELS </div>
-<style>
+  <div class="pcw-grid-ultra col-2">
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    <a href="doku.php?id=fr:manuals:amstrad_pcw" class="pcw-btn-ultra retro-text">MANUELS AMSTRAD PCW</a>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    <a href="doku.php?id=fr:manuals:maintenance" class="pcw-btn-ultra retro-text">MANUELS DE MAINTENANCE</a>
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
-  <div class="pcw-title"> > MANUELS </div>
-  <div class="pcw-grid" style="grid-template-columns: repeat(2, 1fr);">
-    <a href="doku.php?id=fr:manuals:amstrad_pcw" class="pcw-btn">MANUELS AMSTRAD PCW</a>
-    <a href="doku.php?id=fr:manuals:maintenance" class="pcw-btn">MANUELS DE MAINTENANCE</a>
   </div>
 </div>
-</html>
-----
-<html>
-<style>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
+<!-- 8. PROGRAMMATION -->
-  <div class="pcw-title"> > PROGRAMMATION </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> PROGRAMMATION </div>
-  <div class="pcw-grid">
+  <div class="pcw-grid-ultra">
-    <a href="doku.php?id=fr:programming:informations_techniques" class="pcw-btn">INFORMATIONS TECHNIQUES</a>
+    <a href="doku.php?id=fr:programming:informations_techniques" class="pcw-btn-ultra retro-text">INFOS TECHNIQUES</a>
-    <a href="doku.php?id=fr:programming:introduction" class="pcw-btn">INTRODUCTION</a>
+    <a href="doku.php?id=fr:programming:introduction" class="pcw-btn-ultra retro-text">INTRODUCTION</a>
-    <a href="doku.php?id=fr:programming:langages" class="pcw-btn">LANGAGES</a>
+    <a href="doku.php?id=fr:programming:langages" class="pcw-btn-ultra retro-text">LANGAGES</a>
   </div>
 </div>
-</html>
-----
+<!-- 9. MAGAZINES -->
+<div class="pcw-monitor-ultra">
-<html>
+  <div class="pcw-title-ultra retro-text"> A> MAGAZINES </div>
-<style>
+  <div class="pcw-grid-ultra">
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    <a href="doku.php?id=fr:magazines:disquette" class="pcw-btn-ultra retro-text">DISQUETTE</a>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    <a href="doku.php?id=fr:magazines:fanzines" class="pcw-btn-ultra retro-text">FANZINES</a>
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    <a href="doku.php?id=fr:magazines:revues" class="pcw-btn-ultra retro-text">REVUES</a>
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
-  <div class="pcw-title"> > MAGAZINES </div>
-  <div class="pcw-grid">
-    <a href="doku.php?id=fr:magazines:disquette" class="pcw-btn">DISQUETTE</a>
-    <a href="doku.php?id=fr:magazines:fanzines" class="pcw-btn">FANZINES</a>
-    <a href="doku.php?id=fr:magazines:revues" class="pcw-btn">REVUES</a>
   </div>
 </div>
-</html>
-----
-<html>
-<style>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
+<!-- 10. TUTORIELS -->
-  <div class="pcw-title"> > TUTORIELS </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> TUTORIELS </div>
-  <div class="pcw-grid" style="grid-template-columns: repeat(2, 1fr);">
+  <div class="pcw-grid-ultra col-2">
-    <a href="doku.php?id=fr:tutorials:communications" class="pcw-btn">COMMUNICATIONS</a>
+    <a href="doku.php?id=fr:tutorials:communications" class="pcw-btn-ultra retro-text">COMMUNICATIONS</a>
-    <a href="doku.php?id=fr:tutorials:cours" class="pcw-btn">COURS</a>
+    <a href="doku.php?id=fr:tutorials:cours" class="pcw-btn-ultra retro-text">COURS</a>
-    <a href="doku.php?id=fr:tutorials:assembleur" class="pcw-btn">ASSEMBLEUR</a>
+    <a href="doku.php?id=fr:tutorials:assembleur" class="pcw-btn-ultra retro-text">ASSEMBLEUR</a>
-    <a href="doku.php?id=fr:tutorials:guides" class="pcw-btn">GUIDES</a>
+    <a href="doku.php?id=fr:tutorials:guides" class="pcw-btn-ultra retro-text">GUIDES</a>
   </div>
 </div>
-</html>
-----
+<!-- 11. DIVERS (OTROS) -->
+<div class="pcw-monitor-ultra">
-<html>
+  <div class="pcw-title-ultra retro-text"> A> DIVERS </div>
-<style>
+  <div class="pcw-grid-ultra">
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    <a href="doku.php?id=fr:others:remerciements" class="pcw-btn-ultra retro-text">REMERCIEMENTS</a>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    <a href="doku.php?id=fr:others:evenements" class="pcw-btn-ultra retro-text">ÉVÉNEMENTS</a>
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    <a href="doku.php?id=fr:others:entretiens" class="pcw-btn-ultra retro-text">ENTRETIENS</a>
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+    <a href="doku.php?id=fr:others:etiquettes" class="pcw-btn-ultra retro-text">ÉTIQUETTES 3,5"</a>
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
+    <a href="doku.php?id=fr:others:inventaire" class="pcw-btn-ultra retro-text">INVENTAIRE</a>
+    <a href="doku.php?id=fr:others:contact" class="pcw-btn-ultra retro-text">CONTACT</a>
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
-  <div class="pcw-title"> > DIVERS </div>
-  <div class="pcw-grid">
-    <a href="doku.php?id=fr:others:remerciements" class="pcw-btn">REMERCIEMENTS</a>
-    <a href="doku.php?id=fr:others:evenements" class="pcw-btn">ÉVÉNEMENTS</a>
-    <a href="doku.php?id=fr:others:entretiens" class="pcw-btn">ENTRETIENS</a>
-    <a href="doku.php?id=fr:others:etiquettes" class="pcw-btn">ÉTIQUETTES 3,5"</a>
-    <a href="doku.php?id=fr:others:inventaire" class="pcw-btn">INVENTAIRE</a>
-    <a href="doku.php?id=fr:others:contact" class="pcw-btn">CONTACT</a>
   </div>
 </div>
 </html>
 ----