/* ==========================================================================
   THE NINTH CAT — style.css
   --------------------------------------------------------------------------
   Thème : bureau du milieu des années 90. Le site est un bureau teal avec
   des icônes, et chaque page est une fenêtre à barre de titre. La palette
   vient du logo du studio :

       teal     #008080   le bureau
       bleu     #304090   les barres de titre
       bordeaux #503030   les titres et les accents
       gris     #c0c0c0   le chrome des fenêtres

   SOMMAIRE
     01. Variables
     02. Base et bureau
     03. Reliefs (biseaux du chrome)
     04. Icônes du bureau
     05. Fenêtre : cadre, barre de titre, menus
     06. Contenu : titres, texte, liens
     07. Listes en vue détails (devblog, jeux)
     08. Tableaux d'informations
     09. Images et emplacements à remplir
     10. Boutons
     11. Barre des tâches
     12. Effets (notification, wizz, curseur)
     13. Responsive
   ========================================================================== */


/* --- 01. VARIABLES -------------------------------------------------------  */
:root{
  --teal:      #008080;
  --blue:      #304090;
  --blue-lt:   #5a74c0;
  --maroon:    #503030;
  --maroon-lt: #7a3b3b;

  --chrome:    #c0c0c0;   /* gris des fenêtres */
  --chrome-lt: #dfdfdf;
  --chrome-dk: #808080;
  --paper:     #fbf8ef;   /* zone de document : papier crème, pas blanc */
  --paper-alt: #ffffff;

  --tint-teal:   #e2f0f0;
  --tint-blue:   #e8ecf9;
  --tint-maroon: #f7ecec;
  --tint-sun:    #fdf3d8;
  --ink:       #000000;
  --dim:       #5a5a5a;

  --link:      #1a3fa0;
  --link-vis:  #6a2a7a;
  --link-hot:  #a01818;

  --ui:   Tahoma, Verdana, Geneva, sans-serif;
  --doc:  Georgia, "Times New Roman", Times, serif;
  --mono: "Courier New", Courier, monospace;

  --taskbar-h: 36px;
}

*{ box-sizing:border-box; }


/* --- 02. BASE ET BUREAU --------------------------------------------------  */
html{ -webkit-text-size-adjust:100%; height:100%; }

body{
  margin:0;
  padding:0 0 var(--taskbar-h);
  min-height:100%;
  color:var(--ink);
  font-family:var(--ui);
  font-size:13px;
  line-height:1.45;
  background-color:var(--teal);
  background-image:url("../assets/images/desktop.png");
  background-repeat:repeat;
}

img{ border:0; max-width:100%; height:auto; }

#desktop{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:16px 18px 24px;
  min-height:calc(100vh - var(--taskbar-h));
}

#stage{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Le logo, en tête du document. */
.brand{
  display:block;
  text-align:center;
  margin:0 0 18px;
  padding:0 0 16px;
  border-bottom:2px solid var(--chrome);
  line-height:0;
}
.brand img{
  display:inline-block;
  animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(1) rotate(0); }
  50%    { transform:scale(1.03) rotate(-.6deg); }
}


/* --- 03. RELIEFS ---------------------------------------------------------
   Le biseau à deux niveaux des interfaces de l'époque, en une seule règle.  */
.raised{
  box-shadow:
    inset -1px -1px 0 #000000,
    inset  1px  1px 0 var(--chrome-lt),
    inset -2px -2px 0 var(--chrome-dk),
    inset  2px  2px 0 #ffffff;
}
.sunken{
  box-shadow:
    inset  1px  1px 0 #000000,
    inset -1px -1px 0 var(--chrome-lt),
    inset  2px  2px 0 var(--chrome-dk),
    inset -2px -2px 0 #ffffff;
}


/* --- 04. ICONES DU BUREAU ------------------------------------------------  */
#icons{
  flex:0 0 96px;
  width:96px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.dicon{
  display:block;
  text-align:center;
  text-decoration:none;
  color:#ffffff;
  font-size:11px;
  line-height:1.25;
  padding:4px 2px;
}
.dicon img{
  display:block;
  margin:0 auto 4px;
  width:32px; height:32px;
  image-rendering:pixelated;
  animation:bob 3.2s ease-in-out infinite;
}
/* Chaque icône décalée : la colonne ondule au lieu de sauter en bloc. */
.dicon:nth-child(2) img{ animation-delay:-.4s; }
.dicon:nth-child(3) img{ animation-delay:-.8s; }
.dicon:nth-child(4) img{ animation-delay:-1.2s; }
.dicon:nth-child(5) img{ animation-delay:-1.6s; }
.dicon:nth-child(6) img{ animation-delay:-2s; }
@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-4px); }
}
.dicon span{
  display:inline-block;
  padding:1px 3px;
  text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
.dicon:hover span{ background:var(--blue); }
.dicon.here span{
  background:var(--blue);
  outline:1px dotted #ffffff;
  outline-offset:-1px;
}
.dicon:focus-visible span{ outline:1px dotted #fff; }


/* --- 05. FENETRE ---------------------------------------------------------  */
.window{
  width:100%;
  max-width:900px;
  background:var(--chrome);
  padding:3px;
  position:relative;
}

.titlebar{
  display:flex;
  align-items:center;
  gap:6px;
  height:26px;
  padding:0 3px;
  background:linear-gradient(90deg, var(--blue), var(--blue-lt), var(--blue));
  background-size:200% 100%;
  animation:titleflow 9s linear infinite;
  color:#ffffff;
}
@keyframes titleflow{
  from{ background-position:0 0; }
  to  { background-position:200% 0; }
}
.titlebar img{ width:16px; height:16px; image-rendering:pixelated; }
.titlebar .ttitle{
  flex:1 1 auto;
  min-width:0;
  font-weight:bold;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.titlebar .tbtns{ display:flex; gap:2px; flex:0 0 auto; }
.titlebar .tbtns > *{
  width:19px; height:17px;
  display:flex; align-items:center; justify-content:center;
  background:var(--chrome);
  border:0;
  color:#000;
  font-family:var(--ui);
  font-size:11px;
  font-weight:bold;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  padding:0 0 2px;
}
.titlebar .tbtns > *:active{ padding:2px 0 0; }

/* Barre de menus. Les sous-menus s'ouvrent au survol et au clavier. */
.menubar{
  display:flex;
  gap:2px;
  padding:2px 2px 3px;
  border-bottom:1px solid var(--chrome-dk);
}
.menu{ position:relative; }
.menu > .label{
  display:block;
  padding:2px 8px;
  font-size:12px;
  cursor:default;
  user-select:none;
}
.menu:hover > .label,
.menu:focus-within > .label{ background:var(--blue); color:#fff; }
.menu > .items{
  display:none;
  position:absolute;
  top:100%; left:0;
  z-index:20;
  min-width:170px;
  background:var(--chrome);
  padding:2px;
}
.menu:hover > .items,
.menu:focus-within > .items{ display:block; }
.menu .items a{
  display:flex;
  align-items:center;
  gap:7px;
  padding:3px 10px;
  font-size:12px;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.menu .items a:hover{ background:var(--blue); color:#fff; }
.menu .items img{ width:16px; height:16px; image-rendering:pixelated; }
.menu .items .sep{
  height:1px; margin:3px 2px;
  background:var(--chrome-dk);
  border-bottom:1px solid #fff;
}
.menu .items a.on::before{ content:"\2022 "; }

/* Bandeau défilant, sous la barre de menus. */
.wticker{
  overflow:hidden;
  white-space:nowrap;
  background:#000;
  color:#3cf07a;
  font-family:var(--mono);
  font-size:12px;
  padding:3px 0;
  margin:3px 0 0;
}
.wticker > span{
  display:inline-block;
  padding-left:100%;
  animation:ticker 28s linear infinite;
}
@keyframes ticker{
  from{ transform:translateX(0); }
  to  { transform:translateX(-100%); }
}

/* Zone de document. */
.wbody{
  background-color:var(--paper);
  /* Trame très légère : le papier n'est jamais parfaitement uni. */
  background-image:
    repeating-linear-gradient(45deg,
      rgba(0,128,128,.035) 0 2px, transparent 2px 7px);
  margin:3px 0 0;
  padding:20px 26px 26px;
  min-height:300px;
}

/* Fenêtre réduite : on ne garde que la barre de titre. */
.window.rolled .menubar,
.window.rolled .wbody,
.window.rolled .wstatus{ display:none; }

/* Fenêtre agrandie : elle prend toute la largeur disponible. */
.window.maxed{ max-width:100%; }

/* Barre d'état en bas de fenêtre. */
.wstatus{
  display:flex;
  gap:3px;
  margin:3px 0 0;
  font-size:11px;
  color:var(--dim);
}
.wstatus span{
  padding:2px 7px;
  background:var(--chrome);
}
.wstatus span:first-child{ flex:1 1 auto; }


/* --- 06. CONTENU ---------------------------------------------------------  */
.wbody h1{
  margin:0 0 14px;
  font-family:var(--ui);
  font-size:23px;
  color:var(--maroon);
  border-bottom:2px solid var(--chrome);
  padding-bottom:6px;
}

/* Texte en vague : chaque lettre monte et redescend à son tour.
   Le découpage en lettres est fait par js/script.js (module waveText). */
.wave span{
  display:inline-block;
  animation:wave 1.8s ease-in-out infinite;
}
@keyframes wave{
  0%,100%{ transform:translateY(0); }
  25%    { transform:translateY(-5px); }
  50%    { transform:translateY(0); }
}

/* Texte aux couleurs qui défilent. */
.rainbow{
  background-image:linear-gradient(90deg,
    #a01818, #c8a02c, #2e8b57, #008080, #304090, #7a3b8a, #a01818);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:rainbow 7s linear infinite;
  font-weight:bold;
}
@keyframes rainbow{
  from{ background-position:0 0; }
  to  { background-position:300% 0; }
}

/* Curseur clignotant, à coller après un titre. */
.caret{
  display:inline-block;
  width:9px; height:1em;
  vertical-align:-2px;
  margin-left:3px;
  background:var(--maroon);
  animation:blink 1s steps(1) infinite;
}
.wbody h2{
  margin:0 0 12px;
  font-family:var(--ui);
  font-size:15px;
  color:#fff;
  background:var(--maroon);
  padding:4px 10px;
  /* Reflet qui traverse la barre en continu. */
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 70%);
  background-size:220% 100%;
  animation:sheen 5s linear infinite;
}
@keyframes sheen{
  from{ background-position:120% 0; }
  to  { background-position:-120% 0; }
}

/* Une section = un panneau teinté. Trois couleurs, prises dans le logo. */
.sec{
  margin:0 0 20px;
  padding:12px 14px 14px;
  border-left:5px solid var(--maroon);
  background:var(--tint-maroon);
  box-shadow:1px 1px 0 rgba(0,0,0,.15);
}
.sec--teal  { border-left-color:var(--teal);   background:var(--tint-teal); }
.sec--teal   h2{ background-color:var(--teal); }
.sec--blue  { border-left-color:var(--blue);   background:var(--tint-blue); }
.sec--blue   h2{ background-color:var(--blue); }
.sec--sun   { border-left-color:#c8a02c;       background:var(--tint-sun); }
.sec--sun    h2{ background-color:#a8791a; }
.sec > :last-child{ margin-bottom:0; }
.wbody h3{
  margin:18px 0 6px;
  font-size:14px;
  color:var(--blue);
}

p{ margin:0 0 12px; }
.doc, .doc p{ font-family:var(--doc); font-size:15px; line-height:1.6; }

a{ color:var(--link); }
a:visited{ color:var(--link-vis); }
a:hover{ color:var(--link-hot); }
a:focus-visible{ outline:1px dotted var(--maroon); outline-offset:2px; }

.center{ text-align:center; }
.tiny{ font-size:11px; color:var(--dim); }
.mono{ font-family:var(--mono); }
.lead{ font-size:15px; }
.hot{ color:#a01818; }

hr{
  border:0;
  height:6px;
  margin:22px 0;
  background-image:repeating-linear-gradient(90deg,
    var(--teal) 0 10px, var(--blue) 10px 20px,
    var(--maroon) 20px 30px, #c8a02c 30px 40px);
  background-size:40px 100%;
  animation:hrflow 3s linear infinite;
}
@keyframes hrflow{
  from{ background-position:0 0; }
  to  { background-position:40px 0; }
}

ul{ margin:8px 0 14px; padding-left:22px; }
ul li{ margin:3px 0; }

/* Encadré d'information, façon boîte de dialogue. */
.box{
  background:var(--chrome);
  padding:12px 14px;
  margin:0 0 16px;
}
.box p:last-child{ margin-bottom:0; }


/* --- 07. LISTES EN VUE DETAILS -------------------------------------------
   Le devblog et les jeux s'affichent comme le contenu d'un dossier.        */
.listview{
  background:var(--paper-alt);
  margin:0 0 14px;
  padding:3px;
  /* Chenillard : un liseré pointillé qui tourne autour du cadre. */
  background-image:
    repeating-linear-gradient(90deg, var(--teal) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(90deg, var(--teal) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(0deg, var(--teal) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(0deg, var(--teal) 0 6px, transparent 6px 12px);
  background-size:100% 2px, 100% 2px, 2px 100%, 2px 100%;
  background-position:0 0, 0 100%, 0 0, 100% 0;
  background-repeat:no-repeat;
  animation:ants 12s linear infinite;
}
@keyframes ants{
  to{ background-position:24px 0, -24px 100%, 0 -24px, 100% 24px; }
}
.listview .head{
  display:flex;
  gap:2px;
  font-size:11px;
  color:var(--dim);
}
.listview .head span{
  background:var(--chrome);
  padding:3px 8px;
}
.listview .head .c-name{ flex:1 1 auto; }
.listview .head .c-date{ flex:0 0 110px; }

.row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:9px 8px;
  border-bottom:1px solid #e4e4e4;
  text-decoration:none;
  color:var(--ink);
}
.row:last-child{ border-bottom:0; }
.row:hover{ background:#e8edff; }
.row .thumb{ flex:0 0 auto; line-height:0; }
.row .meta{ flex:1 1 auto; min-width:0; }
.row .rtitle{
  display:block;
  font-size:14px;
  font-weight:bold;
  color:var(--link);
  margin-bottom:3px;
}
.row:hover .rtitle{ color:var(--link-hot); }
.row .rdesc{ display:block; font-family:var(--doc); font-size:14px; margin:0 0 4px; }
.row .tiny{ display:block; }
.row .rdate{
  flex:0 0 110px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--dim);
  text-align:right;
}

/* Message quand un dossier est vide. */
.empty{
  padding:26px 10px;
  text-align:center;
  color:var(--dim);
  font-size:13px;
}
.empty img{ display:block; margin:0 auto 10px; image-rendering:pixelated; }


/* --- 08. TABLEAUX --------------------------------------------------------  */
table.info{
  width:100%;
  border-collapse:collapse;
  margin:10px 0 16px;
  font-size:13px;
  background:var(--paper);
}
table.info th,
table.info td{
  border:1px solid var(--chrome-dk);
  padding:5px 10px;
  text-align:left;
  vertical-align:top;
}
table.info th{
  width:34%;
  background:var(--chrome);
  font-weight:normal;
  color:var(--dim);
  white-space:nowrap;
}


/* --- 09. IMAGES ET EMPLACEMENTS ------------------------------------------
   Le HTML contient un cadre ; le JS le remplace par la vraie image
   seulement si le fichier existe. Aucune icône cassée possible.           */
.shot{
  display:inline-block;
  vertical-align:top;
  max-width:100%;
  background:var(--chrome);
  color:var(--dim);
  font-size:10px;
  text-align:center;
  padding:8px;
  overflow:hidden;
  word-break:break-all;
  box-shadow:
    inset  1px  1px 0 #000000,
    inset -1px -1px 0 var(--chrome-lt),
    inset  2px  2px 0 var(--chrome-dk),
    inset -2px -2px 0 #ffffff;
}
.shot::before{
  content:"";
  display:block;
  width:32px; height:32px;
  margin:0 auto 5px;
  background:url("../assets/icons/ic-doc.png") no-repeat center;
  image-rendering:pixelated;
}
.shot.loaded{ padding:2px; color:transparent; }
.shot.loaded::before{ display:none; }
.shot img{ display:block; width:100%; height:100%; object-fit:cover; }

.shots{ display:flex; flex-wrap:wrap; gap:10px; }

/* Visuels décoratifs (les GIF). */
.deco{ text-align:center; margin:16px 0; }
.deco img{ display:inline-block; }

/* Images à l'intérieur d'un article. */
#devblog-body img{
  display:block;
  margin:16px auto 4px;
  padding:3px;
  background:var(--chrome);
}
#devblog-body .cap{
  display:block;
  text-align:center;
  font-family:var(--ui);
  font-size:11px;
  color:var(--dim);
  margin:0 0 16px;
}
#devblog-date{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  color:var(--dim);
  margin:0 0 16px;
}


/* --- 10. BOUTONS ---------------------------------------------------------  */
.btn{
  display:inline-block;
  background:var(--chrome);
  color:var(--ink);
  font-family:var(--ui);
  font-size:12px;
  padding:6px 16px;
  border:0;
  cursor:pointer;
  text-decoration:none;
  box-shadow:
    inset -1px -1px 0 #000000,
    inset  1px  1px 0 var(--chrome-lt),
    inset -2px -2px 0 var(--chrome-dk),
    inset  2px  2px 0 #ffffff;
}
.btn:visited{ color:var(--ink); }
.btn:hover{ color:var(--ink); }
.btn{ position:relative; overflow:hidden; }
.btn::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 40%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 60%);
  background-size:250% 100%;
  animation:sheen 4.5s linear infinite;
  pointer-events:none;
}
.btn:active{
  box-shadow:
    inset  1px  1px 0 #000000,
    inset -1px -1px 0 var(--chrome-lt),
    inset  2px  2px 0 var(--chrome-dk),
    inset -2px -2px 0 #ffffff;
  padding:7px 15px 5px 17px;
}
.btn-main{ font-weight:bold; }

.badges{ line-height:0; margin:10px 0; }
.badges a, .badges img{ display:inline-block; margin:0 4px 5px 0; }


/* --- 11. BARRE DES TACHES ------------------------------------------------  */
#taskbar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  height:var(--taskbar-h);
  display:flex;
  align-items:center;
  gap:6px;
  padding:3px 4px;
  background:var(--chrome);
  box-shadow:inset 0 1px 0 #fff, inset 0 2px 0 var(--chrome-lt);
}

#start{
  display:flex; align-items:center; gap:5px;
  padding:4px 10px 4px 6px;
  font-weight:bold; font-size:12px;
  background:var(--chrome); border:0; cursor:pointer;
  color:var(--ink); text-decoration:none;
  box-shadow:
    inset -1px -1px 0 #000000,
    inset  1px  1px 0 var(--chrome-lt),
    inset -2px -2px 0 var(--chrome-dk),
    inset  2px  2px 0 #ffffff;
}
#start img{ width:18px; height:18px; image-rendering:pixelated; }

#tasks{ flex:1 1 auto; min-width:0; display:flex; gap:4px; overflow:hidden; }
#tasks .task{
  display:flex; align-items:center; gap:5px;
  max-width:230px; padding:4px 10px;
  font-size:11px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  background:var(--chrome);
  box-shadow:
    inset  1px  1px 0 #000000,
    inset -1px -1px 0 var(--chrome-lt),
    inset  2px  2px 0 var(--chrome-dk),
    inset -2px -2px 0 #ffffff;
}
#tasks .task img{ width:16px; height:16px; image-rendering:pixelated; }

#tray{
  display:flex; align-items:center; gap:8px;
  flex:0 0 auto;
  padding:3px 8px;
  font-size:11px;
  box-shadow:
    inset  1px  1px 0 var(--chrome-dk),
    inset -1px -1px 0 #ffffff;
}
#tray .lang a{
  display:inline-block; line-height:0; padding:1px;
  border:1px solid transparent;
}
#tray .lang a.active{ border-color:var(--blue); }
#tray .online{ display:inline-flex; align-items:center; gap:4px; }
#tray .counter{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1px;
  padding:1px 4px;
  background:#000; color:#0f0;
}
#tray .clock{ font-size:11px; min-width:38px; text-align:center; }
#tray .clock i{ font-style:normal; animation:blink 1s steps(1) infinite; }
#tray button{
  font-family:var(--ui); font-size:11px; padding:2px 8px;
  background:var(--chrome); border:0; cursor:pointer;
  box-shadow:
    inset -1px -1px 0 #000000,
    inset  1px  1px 0 var(--chrome-lt),
    inset -2px -2px 0 var(--chrome-dk),
    inset  2px  2px 0 #ffffff;
}


/* --- 12. EFFETS ----------------------------------------------------------  */
.blink{ animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* Secousse façon « wizz » de messagerie. */
.buzzing{ animation:buzz .5s linear; }
@keyframes buzz{
  0%,100%{ transform:translate(0,0); }
  10%{ transform:translate(-6px,3px); }
  25%{ transform:translate(5px,-4px); }
  40%{ transform:translate(-5px,-3px); }
  55%{ transform:translate(6px,2px); }
  70%{ transform:translate(-3px,4px); }
  85%{ transform:translate(3px,-2px); }
}

/* Notification : une petite fenêtre au-dessus de la barre des tâches. */
#toast-zone{
  position:fixed;
  right:8px; bottom:calc(var(--taskbar-h) + 8px);
  z-index:70;
  width:250px;
  max-width:calc(100vw - 16px);
}
.toast{
  background:var(--chrome);
  padding:3px;
  margin-top:8px;
  font-size:11px;
  animation:toast-in .3s ease-out;
  box-shadow:
    inset -1px -1px 0 #000000,
    inset  1px  1px 0 var(--chrome-lt),
    inset -2px -2px 0 var(--chrome-dk),
    inset  2px  2px 0 #ffffff,
    2px 2px 0 rgba(0,0,0,.35);
}
@keyframes toast-in{
  from{ transform:translateY(16px); opacity:0; }
  to  { transform:translateY(0); opacity:1; }
}
.toast-bar{
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(90deg, var(--blue), var(--blue-lt));
  color:#fff; font-weight:bold; padding:2px 4px;
}
.toast-bar button{
  width:17px; height:15px; line-height:1;
  border:0; background:var(--chrome); color:#000;
  font-size:10px; font-weight:bold; cursor:pointer; padding:0;
}
.toast-body{ display:flex; gap:7px; padding:9px 8px; align-items:flex-start; }
.toast-body p{ margin:0; }

/* Traînée d'étoiles derrière le curseur. */
.trail{
  position:fixed;
  width:12px; height:12px;
  pointer-events:none;
  z-index:65;
  animation:trail-out .7s linear forwards;
}
@keyframes trail-out{
  from{ opacity:1; transform:scale(1); }
  to  { opacity:0; transform:scale(.3) translateY(14px); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .trail{ display:none; }
}


/* --- 13. RESPONSIVE ------------------------------------------------------
   Sur petit écran, les icônes passent au-dessus de la fenêtre et la barre
   des tâches se réduit à l'essentiel. Le thème ne change pas.             */
@media (max-width:820px){
  #desktop{ display:block; padding:12px 10px 20px; }
  #icons{
    width:auto; flex:none;
    flex-direction:row; flex-wrap:wrap; justify-content:center;
    gap:8px 14px; margin:0 0 16px;
  }
  .dicon{ width:76px; }
  .wbody{ padding:16px 16px 20px; }
  .brand img{ width:150px; height:auto; }
}

@media (max-width:560px){
  :root{ --taskbar-h:34px; }
  .wbody h1{ font-size:19px; }
  .wbody h2{ font-size:14px; }
  .row{ flex-wrap:wrap; }
  .row .tiny{ display:block; }
.row .rdate{ flex:1 1 100%; text-align:left; }
  .listview .head{ display:none; }
  #tray .counter, #tray .online span{ display:none; }
  #tasks{ display:none; }
  #start{ font-size:11px; }
}

@media (max-width:380px){
  .dicon{ width:66px; font-size:10px; }
  .wbody{ padding:12px 12px 16px; }
}