/* ===============================================
   CONFIGURATION DES POLICES ET VARIABLES GLOBALES
   =============================================== */

/* Importation de la police pixel personnalisée */
@font-face {
  font-family: "pixel";
  src: url("fonts/PixelOperator.ttf") format("truetype");
}

/* Reset global : assure que tous les éléments incluent padding/border dans leur taille */
* {
  box-sizing: border-box;
}

/* Variables CSS pour les couleurs du thème - centralise la gestion des couleurs */
:root {
  --dk-color: #270000; /* Couleur sombre principale (bordures, ombres) */
  --mid-color: #790e0e; /* Couleur intermédiaire (arrière-plans) */
  --lt-color: #000000; /* Couleur claire (contenus) */
  --dkest-color: #932e2e; /* Couleur la plus sombre (textes) */
  --accent: #ffffff; /* Couleur d'accent (éléments importants) */
}

/* ===============================================
   STRUCTURE PRINCIPALE EN FLEXBOX
   =============================================== */

/* Configuration du body principal avec flexbox pour une mise en page moderne */
body {
  max-width: 80%; /* Limite la largeur à 80% de l'écran */
  margin-left: auto; /* Centre horizontalement */
  margin-right: auto; /* Centre horizontalement */
  display: flex; /* Active le mode flexbox */
  flex-direction: column; /* Empile les éléments verticalement */
  min-height: 100vh; /* Hauteur minimale = hauteur de l'écran */
  font-size: 1.125em; /* Taille de police légèrement plus grande */
  color: var(--dkest-color); /* Couleur de texte par défaut */
  font-family: "pixel"; /* Police principale */
}

/* Container principal avec flexbox - structure en colonne pour header/main/footer */
body > div {
  display: flex; /* Active flexbox pour les enfants directs */
  flex-direction: column; /* Empile verticalement */
  flex: 1; /* Prend tout l'espace disponible */
  gap: 10px; /* Espacement uniforme entre les sections */
  min-height: 0; /* Allow children to shrink and overflow properly */
}

/* ===============================================
   STYLES GLOBAUX ET ARRIÈRE-PLAN
   =============================================== */

/* Configuration de l'élément html avec arrière-plan */
html {
  background-color: darkred; /* Couleur de fond de sécurité */
  background-image: url("038.gif"); /* Image de fond décorative */
  font-family: "pixel", monospace; /* Police de base avec fallback */
  height: 100%;
}

/* ===============================================
   STYLES POUR COMPOSANTS GÉNÉRÉS DYNAMIQUEMENT
   =============================================== */

/* Message d'erreur pour le chargement des composants */
.component-error {
  background: #ff4444;
  color: white;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  margin: 10px 0;
  border-radius: 4px;
}

/* Animation de chargement pour les composants */
.loading-component {
  background: var(--mid-color);
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-style: italic;
}

/* Amélioration des transitions pour les éléments générés */
.boxstyle[data-generated="true"] {
  animation: fadeInComponent 0.3s ease-in;
}

@keyframes fadeInComponent {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Container pour la zone de défilement générée */
#scrolling-container {
  margin: 10px 0;
}

/* ===============================================
   STYLES DES LIENS ET ÉLÉMENTS DE BASE
   =============================================== */

/* Style des liens - couleur blanche par défaut */
a {
  color: white; /* Couleur des liens */
  font-weight: bold; /* Texte en gras pour visibilité */
}

/* Effet au survol des liens */
a:hover {
  color: red; /* Change en rouge au survol */
}

/* Style des séparateurs horizontaux */
hr {
  height: 2px; /* Hauteur fine */
  background-color: var(--dk-color); /* Couleur sombre */
  border: none; /* Supprime la bordure par défaut */
}

/* Classe utilitaire pour texte d'accent */
.accent {
  color: var(--accent); /* Utilise la couleur d'accent */
}

/* ===============================================
   FORMULAIRES ET CHAMPS DE SAISIE
   =============================================== */

/* Style des zones de texte (textarea) */
textarea {
  margin-left: auto; /* Centre horizontalement */
  margin-right: auto; /* Centre horizontalement */
  display: block; /* Affichage en bloc */
  width: 50%; /* Largeur à 50% */
  border: 2px solid var(--dk-color); /* Bordure sombre */
  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.5); /* Ombre légère */
  padding: 2px; /* Espacement interne */
}

/* ===============================================
   BOUTONS INTERACTIFS
   =============================================== */

/* Style des boutons avec dégradé et effets */
button {
  background: linear-gradient(
    90deg,
    rgb(255, 218, 218) 0%,
    rgb(0, 0, 0) 100%
  ); /* Dégradé rose */
  color: var(--dkest-color); /* Couleur de texte */
  border-top: 1px solid #000000; /* Bordure claire en haut */
  border-left: 1px solid #000000; /* Bordure claire à gauche */
  border-right: 1px solid #000000; /* Bordure claire à droite */
  border-bottom: 2px solid var(--dk-color); /* Bordure sombre en bas (effet 3D) */
  font-family: "magica"; /* Police assortie */
  font-size: 1em; /* Taille normale */
  font-weight: bold; /* Texte en gras */
  margin: 0; /* Pas de marge */
  cursor: pointer; /* Curseur pointeur au survol */
  transition: 0.2s; /* Animation fluide */
}

/* Effet au survol des boutons */
button:hover {
  background: linear-gradient(
    90deg,
    rgb(255, 0, 0) 0%,
    rgb(0, 0, 0) 100%
  ); /* Dégradé rouge-noir */
  text-indent: 10px; /* Décale le texte vers la droite */
}

/* ===============================================
   CONTENEURS PRINCIPAUX
   =============================================== */

/* Container principal avec bordures arrondies */
.main {
  border: 3px ridge var(--dk-color); /* Bordure en relief */
  background-color: var(--lt-color); /* Arrière-plan clair */
  box-shadow: 0 10px 15px 5px rgba(0, 0, 0, 0.5); /* Ombre portée importante */
  padding: 10px; /* Espacement interne */
}

/* Style de base pour toutes les boîtes de contenu */
.boxstyle {
  border: 3px ridge var(--dk-color); /* Bordure en relief caractéristique */
  overflow: hidden; /* Cache le débordement */
  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.5); /* Ombre subtile */
  background-color: var(--lt-color); /* Arrière-plan uniforme */
}

/* Contenir les floats internes (boutons de fenêtre) pour éviter qu'ils ne "sortent"
   et coupent le haut des boîtes (notamment pour la zone de défilement). */
.boxstyle > .sectiontab,
.sectionbuttonsdisplay {
  display: flow-root;
}

/* Contenu interne des boîtes avec scroll automatique */
.content {
  padding: 10px; /* Espacement interne standard */
  margin: 0; /* Pas de marge externe */
  overflow-y: auto; /* Scroll vertical si nécessaire */
  overflow-x: hidden; /* Cache le débordement horizontal */
  text-align: left;
}

/* Classe utilitaire pour sections repliées :
   - forcer la hauteur à 0 et masquer l'overflow
   - utiliser transition pour un effet fluide si souhaité */
.boxstyle.collapsed .content {
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

/* ===============================================
   ÉLÉMENTS DÉCORATIFS ET ANIMATIONS
   =============================================== */

/* Container avec animation de défilement (ancien système) */
#scrollingcontainer {
  padding: 10px; /* Espacement interne */
  animation: scroll 60s linear infinite; /* Animation continue */
  background-image: url("misc007.jpg"); /* Image de fond */
  overflow: hidden; /* Cache le débordement */
}

/* Boîtes de notification avec style distinctif */
.notice {
  border: 3px dotted var(--dkest-color); /* Bordure pointillée */
  background-color: #000000; /* Fond blanc */
  background-clip: padding-box; /* Limite le fond au padding */
  text-align: center; /* Texte centré */
  padding: 10px; /* Espacement interne */
  margin-bottom: 5px; /* Marge en bas */
}

/* ===============================================
   ÉLÉMENTS DE MISE EN ÉVIDENCE
   =============================================== */

/* Surlignage pour texte important */
.highlightmark {
  font-weight: bold; /* Texte en gras */
}

/* ===============================================
   BOUTONS ET ÉLÉMENTS INTERACTIFS
   =============================================== */

/* Styles de base pour différents types de boutons */
.siteminibutton,
.sitebutton,
.fanlistingbutton {
  border: 1px solid var(--dk-color); /* Bordure sombre */
  border-radius: 3px; /* Coins légèrement arrondis */
  transition: transform 0.2s; /* Animation fluide pour les transformations */
}

/* Bouton mini carré (icônes) */
.siteminibutton {
  width: 32px; /* Largeur fixe petit format */
  height: 32px; /* Hauteur fixe petit format */
}

/* Bouton standard rectangulaire */
.sitebutton {
  width: 80px; /* Largeur standard */
  height: 28px; /* Hauteur standard */
  background-color: var(--mid-color); /* Arrière-plan coloré */
}

/* Bouton carré pour fanlistings */
.fanlistingbutton {
  width: 50px; /* Largeur moyenne */
  height: 50px; /* Hauteur égale (carré) */
}

/* ===============================================
   ÉLÉMENTS DÉCORATIFS AVEC EFFETS
   =============================================== */

/* Poupées de page avec effet d'ombre complexe */
.pagedoll {
  margin: 10px; /* Espacement autour */
  transition: transform 0.2s; /* Animation pour rotation */
}

/* Effet de rotation au survol des poupées */
.pagedoll:hover {
  transform: rotate(5deg); /* Rotation légère au survol */
}

/* Cliques et éléments décoratifs avec effets d'ombre */
.cliques,
.bigger-clique {
  margin: 3px; /* Espacement réduit */
  transition: transform 0.2s; /* Animation au survol */
}

/* Tailles spécifiques pour les cliques */
.cliques {
  max-height: 20px; /* Petite taille pour cliques standard */
}

.biggerclique {
  max-height: 60px; /* Taille plus grande pour cliques importantes */
}

/* Cliques textuelles avec icônes */
.textclique {
  margin-top: 5px; /* Marge supérieure */
}

.textclique img {
  max-height: 14px; /* Taille réduite pour icônes de texte */
}

/* Centrage des webrings */
.webring {
  margin-left: auto; /* Centre horizontalement */
  margin-right: auto; /* Centre horizontalement */
}

/* Effet de zoom au survol pour tous les boutons interactifs */
.fanlistingbutton:hover,
.sitebutton:hover,
.siteminibutton:hover,
.cliques:hover,
.biggerclique:hover {
  transform: scale(1.1); /* Agrandissement de 10% au survol */
}

/* ===============================================
   LISTES ET ÉLÉMENTS DE TEXTE
   =============================================== */

/* Espacement des éléments de liste */
li {
  line-height: 20px; /* Hauteur de ligne pour lisibilité */
}

/* Listes avec puces personnalisées */
ul.pixelbullets {
  list-style-image: url("placeholderarrow.favicon"); /* Puce flèche personnalisée */
  margin: 10px; /* Marge externe */
  padding: 0 15px; /* Espacement interne */
}

/* ===============================================
   THEME DES SCROLLBARS
   - WebKit (Chrome, Edge, Safari)
   - Firefox (scrollbar-color + scrollbar-width)
   =============================================== */

/* Couleurs basées sur les variables du thème */
:root {
  --scrollbar-track: #000000; /* piste un peu plus sombre */
  --scrollbar-thumb: #790e0e; /* pouce (élément) principal */
  --scrollbar-thumb-hover: #e70000; /* survol */
}

/* WebKit-based browsers */
*::-webkit-scrollbar {
  width: 18px; /* Increased thickness for better visibility */
  height: 18px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 10px;
  margin: 3px 0;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--scrollbar-thumb) 0%,
    var(--dkest-color) 100%
  );
  border-radius: 10px;
  border: 3px solid rgba(175, 0, 0, 0.993); /* stronger border for contrast */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0.4);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.45);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ===============================================
   HEADER PRINCIPAL
   =============================================== */

/* En-tête avec image de fond et bordures arrondies */
#header {
  background-image: url("placeholder.banniere"); /* Image de bannière */
  /* height: 190px; removed to allow flexible height */
  background-clip: padding-box; /* Limite l'image au padding */
  background-position: center; /* Centre l'image */
  overflow: hidden; /* Cache le débordement */
  background-size: cover; /* Adapte l'image à la taille */
  margin-bottom: 10px; /* Marge en bas */
  text-align: center;
}

/* Style du titre principal */
/* Style du titre principal */
.title {
  font-size: 4em; /* Très grande taille */
  text-align: center; /* Centré */
  -webkit-text-stroke-color: #ffffff; /* Contour blanc */
  -webkit-text-stroke-width: 2px; /* Épaisseur du contour */
}

/* ===============================================
   FOOTER
   =============================================== */

/* Pied de page avec coins arrondis en bas */
#footer {
  background: black; /* Arrière-plan coloré */
  border: 3px ridge var(--dk-color); /* Bordure en relief */
  text-align: center; /* Texte centré */
  margin-top: 10px; /* Marge supérieure */
}

/* ===============================================
   STRUCTURE FLEXBOX PRINCIPALE - LAYOUT EN 3 COLONNES
   =============================================== */

/* Container principal des 3 colonnes (gauche-centre-droite) */
#indexgrid {
  display: flex; /* Active le mode flexbox horizontal */
  gap: 10px; /* Espacement uniforme entre les colonnes */
  flex: 1; /* Allow the grid to grow to fill available vertical space */
  min-height: 0; /* Allow children to shrink below their content height for proper overflow handling */
  /* min-height: 600px; removed to avoid forcing layout */
}

/* ===============================================
   COLONNES LATÉRALES (GAUCHE ET DROITE)
   =============================================== */

/* Colonnes gauche et droite - largeur fixe */
.left-column,
.right-column {
  display: flex; /* Flexbox vertical pour empiler les sections */
  flex-direction: column; /* Empile les éléments verticalement */
  gap: 10px; /* Espacement uniforme entre les sections */
  flex: 0 0 200px; /* Largeur fixe de 200px (ne grandit/rétrécit pas) */
  overflow: visible !important; /* Allow child scrollbars to be visible */
  min-height: 0; /* Important for flex children with overflow: allow them to shrink */
}

/* ===============================================
   COLONNE CENTRALE
   =============================================== */

/* Colonne centrale - prend l'espace restant */
.center-column {
  display: flex; /* Flexbox vertical pour empiler les sections */
  flex-direction: column; /* Empile les éléments verticalement */
  gap: 10px; /* Espacement uniforme entre les sections */
  flex: 1; /* Prend tout l'espace horizontal restant */
}

/* ===============================================
   BOUTONS DE NAVIGATION
   =============================================== */

/* Style des boutons de navigation avec effets visuels */
.navbutton {
  background: linear-gradient(
    90deg,
    rgb(0, 0, 0) 0%,
    rgb(64, 0, 0) 100%
  ) !important; /* Dégradé rouge-noir */
  color: var(--accent) !important; /* Couleur de texte blanche */
  border-top: 1px solid #000000 !important; /* Bordure claire en haut */
  border-left: 1px solid #000000 !important; /* Bordure claire à gauche */
  border-right: 1px solid #000000 !important; /* Bordure claire à droite */
  border-bottom: 2px solid var(--dk-color) !important; /* Bordure sombre en bas (effet 3D) */
  font-family: "pixel" !important; /* Police pixel pour cohérence */
  font-size: 1em !important; /* Taille normale */
  font-weight: bold !important; /* Texte en gras */
  text-align: left !important; /* Alignement à gauche */
  margin: 0 !important; /* Pas de marge */
  transition: 0.2s !important; /* Animation fluide */
  width: 100% !important; /* Prend toute la largeur disponible */
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important; /* Pas de retour à la ligne */
  overflow: hidden !important; /* Couper le texte trop long */
  text-overflow: ellipsis !important; /* ... pour le texte tronqué */
  padding: 6px 8px !important; /* Un peu d'espace interne */
}

/* Lien enveloppant : s'assure qu'il suit la largeur parent et permet au
   .navlabel d'être tronqué proprement (min-width:0 nécessaire pour flex children) */
.navlink {
  display: block !important; /* lien bloc couvrant le bouton entier */
  width: 100% !important;
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important; /* Curseur pointeur pour les liens */
}

.navlabel {
  display: inline-block !important;
  min-width: 0 !important; /* important pour que text-overflow fonctionne dans flex */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--accent) !important; /* Couleur blanche pour le texte */
  /* Retirer pointer-events: none pour permettre le scroll */
}

/* Images dans les boutons de navigation */
.navbutton img {
  display: inline-flex !important;
  align-items: center !important;
  width: 15px !important;
  height: 15px !important;
  /* Retirer pointer-events: none pour permettre le scroll */
}

/* Effet au survol des boutons de navigation */
.navbutton:hover {
  background: linear-gradient(
    90deg,
    rgb(0, 0, 0) 0%,
    rgb(0, 0, 0) 100%
  ) !important; /* Dégradé plus sombre */
  text-indent: 10px !important; /* Décale le texte vers la droite */
}

/* ===============================================
   SECTIONS DE LA COLONNE GAUCHE
   =============================================== */

/* Section de navigation principale */
/* Navigation: header absolu pour éviter qu'il soit masqué */
#indexnav {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative; /* pour le header absolu */
}

/* Header Navigation en position absolue - hors du flux scroll */
#indexnav > .sectiontab {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  /* garde les styles existants de .sectiontab */
}

/* Contenu navigation: décalé pour laisser place au header absolu */
#indexnav .content {
  padding: 0 !important;
  padding-top: 32px !important; /* espace pour le header (ajuster selon hauteur réelle) */
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
  background: transparent !important;
  min-height: 0 !important;
  overflow-y: auto; /* remettre le scroll dans le contenu seulement */
}

/* Style de la scrollbar pour la navigation */
#indexnav .content::-webkit-scrollbar {
  width: 12px;
}

#indexnav .content::-webkit-scrollbar-track {
  background: var(--dk-color);
}

#indexnav .content::-webkit-scrollbar-thumb {
  background: var(--mid-color);
  border-radius: 6px;
}

#indexnav .content::-webkit-scrollbar-thumb:hover {
  background: var(--dkest-color);
}

/* S'assurer que les boutons de navigation prennent bien toute la largeur */
#indexnav .navlink {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#indexnav .navbutton {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 1px !important; /* Espacement réduit entre les boutons */
  padding: 2px 4px !important; /* Padding réduit pour optimiser l'espace */
}

/* Style des sous-sections dans la navigation pour optimiser l'espace */
#indexnav .subsection {
  margin: 2px 0 !important; /* Marge réduite pour les groupes */
  padding: 2px 0 !important; /* Padding réduit */
}

#indexnav .subsection .sectiontitle {
  font-size: 0.9em !important; /* Taille de police légèrement réduite */
  margin: 0 !important; /* Pas de marge */
  padding: 2px 0 !important; /* Padding minimal */
}

/* Suppression du soulignement des liens de navigation */
#indexnav a {
  text-decoration: none; /* Pas de soulignement */
}

/* Sections supplémentaires de la colonne gauche */
#leftpanel2,
#leftpanel3 {
  flex: 1; /* Taille égale et flexible */
  /* min-height: 150px; removed to allow natural sizing */
}

/* ===============================================
   SECTIONS DE LA COLONNE CENTRALE
   =============================================== */

/* Section principale / blog : styles commentés pour laisser
   sections/sections.css gérer l'apparence des contenus dynamiques */
/*
#indexmain { 
  flex: 1;              // Taille égale avec le blog
  // min-height retiré (géré ailleurs)
  background-image: url("redweb.gif");
}

#indexblog { 
  flex: 1;              // Taille égale avec le main
}
*/

/* Masquer une section proprement (utilisé pour SPA navigation) */
.hidden {
  display: none !important;
}

/* Agrandir visuellement la section main quand blog est masqué */
.boxstyle.expanded#indexmain {
  flex: 2 1 0%; /* prend plus d'espace dans la colonne */
}

/* ===============================================
   SECTIONS DE LA COLONNE DROITE
   =============================================== */

/* Section des mises à jour */
#indexupdates {
  flex: 1 0 0; /* Taille flexible */
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative; /* pour le header absolu */
  /* min-height: 200px; removed to allow natural sizing */
}

/* Header Updates en position absolue - hors du flux scroll */
#indexupdates > .sectiontab {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  /* garde les styles existants de .sectiontab */
}

/* Contenu Updates avec scroll si nécessaire */
#indexupdates .content {
  flex: 1 1 auto;
  overflow-y: auto; /* Scroll si contenu dépasse */
  overflow-x: hidden;
  min-height: 0;
  padding-top: 32px !important; /* espace pour le header absolu */
}

/* Espacement des paragraphes dans les mises à jour */
#indexupdates p {
  margin: 0; /* Supprime les marges par défaut */
}

/* Contenu des mises à jour avec scroll automatique */
/* #indexupdates .content: height rule removed; rely on natural height & internal scrolling if needed */

/* Section fanlist/favoris */
#indexfanlist {
  flex: 1; /* Taille flexible */
  /* min-height: 150px; removed to allow natural sizing */
  text-align: center; /* Contenu centré */
}

/* Contenu de la section fanlist */
#indexfanlist .content {
  /* height: 110px; removed to allow flexible height */
  padding: 5px; /* Espacement interne réduit */
}

/* Séparateurs dans fanlist */
#indexfanlist hr {
  width: 90%; /* Largeur réduite pour style */
}

/* Section webrings */
#indexwebrings {
  flex: 1; /* Taille flexible */
  /* min-height: 150px; removed to allow natural sizing */
}

/* Contenu webrings avec flexbox pour organisation */
#indexwebrings .content {
  /* height: 110px; removed to allow flexible height */
  display: flex; /* Flexbox pour organisation */
  flex-wrap: wrap; /* Retour à la ligne si nécessaire */
  justify-content: space-evenly; /* Distribution équitable */
  text-align: center; /* Texte centré */
}

/* Section des sites voisins/partenaires */
#indexneighbors {
  flex: 1; /* Taille flexible */
  /* min-height: 150px; removed to allow natural sizing */
  text-align: center; /* Contenu centré */
}

/* Contenu de la section voisins */
#indexneighbors .content {
  /* height: 110px; removed to allow flexible height */
  padding: 5px; /* Espacement interne réduit */
}

/* Espacement des paragraphes dans la section voisins */
#indexneighbors p {
  margin: 0 0 5px 0; /* Marge en bas seulement */
}

/* ===============================================
   ZONE DE DÉFILEMENT HORIZONTALE
   =============================================== */

/* Container principal de la zone de défilement */
/* Scrolling zone: utiliser min-height et permettre au header d'être visible
   si son contenu dépasse légèrement (ne pas le cropper). */
#scrollingzone {
  margin: 10px 0; /* Marge verticale */
  min-height: 80px; /* Hauteur minimale pour la zone */
  overflow: visible; /* Permettre à l'en-tête de rester visible */
  display: grid;
  grid-template-rows: auto 1fr;
}

/* Zone de contenu défilant avec dégradé de fond */
#scrollingcontent {
  height: 60px; /* Hauteur du contenu */
  overflow: hidden; /* Cache le débordement */
  display: flex; /* Flexbox pour centrage vertical du texte */
  align-items: center; /* Centre verticalement le texte */
  justify-content: flex-start; /* Laisser le texte défiler horizontalement */
  /* Dégradé de fond : sombre-moyen-sombre pour effet visuel */
  background: linear-gradient(
    90deg,
    var(--dk-color) 0%,
    var(--mid-color) 50%,
    var(--dk-color) 100%
  );
  padding: 0; /* Pas d'espacement interne */
  /* Placer la zone défilante sur la seconde ligne de la grille */
  grid-row: 2;
}

/* Texte défilant avec animation continue */
#scrollingtext {
  white-space: nowrap; /* Empêche le retour à la ligne */
  color: #ffffff; /* Texte blanc pour contraste */
  font-weight: bold; /* Texte en gras */
  font-size: 1.1em; /* Taille légèrement plus grande */
  animation: scroll-horizontal 30s linear infinite; /* Animation de défilement */
  padding-left: 100%; /* Commence hors écran à droite */
}

/* ===============================================
   ANIMATIONS
   =============================================== */

/* Animation de défilement horizontal (droite vers gauche) */
@keyframes scroll-horizontal {
  0% {
    transform: translateX(0); /* Position initiale */
  }
  100% {
    transform: translateX(-100%); /* Position finale (complètement à gauche) */
  }
}

/* ===============================================
   MARQUEE ET ANCIEN SYSTÈME (DÉSACTIVÉ)
   =============================================== */

/* Ces règles sont conservées pour compatibilité mais ne sont plus utilisées 
   dans la nouvelle structure flexbox */

/* ===============================================
   STYLES DES SECTIONS ET TITRES
   =============================================== */

/* En-tête de section avec style window 95 */
.sectiontab {
  text-align: left; /* Alignement à gauche */
  border-top: 2px solid #000000; /* Bordure claire en haut */
  border-left: 2px solid #000000; /* Bordure claire à gauche */
  border-right: 2px solid var(--dk-color); /* Bordure sombre à droite */
  border-bottom: 3px solid var(--dk-color); /* Bordure sombre en bas (effet 3D) */
  padding: 1px; /* Espacement minimal */
  background-color: var(--mid-color); /* Arrière-plan coloré */
  overflow: hidden; /* Cache le débordement */
}

/* Retirer les z-index conflictuels - laisser le comportement naturel comme Updates */

/* Icône de section (petite image décorative) */
.sectionicon {
  height: 15px; /* Taille fixe petite */
  margin: 5px 3px 0 3px; /* Marge pour positionnement */
  float: left; /* Flotte à gauche du titre */
}

/* Titre de section avec effet d'ombre complexe */
.sectiontitle {
  display: inline-block; /* Affichage en ligne-bloc */
  margin: 1px 1px 5px 5px; /* Marges ajustées */
  color: var(--dk-color); /* Couleur sombre */
  font-size: 1em; /* Taille normale */
  font-weight: bold; /* Texte en gras */
  font-family: "pixel"; /* Police pixel */
}

/* Boutons de contrôle de fenêtre (-, □, x) */
.sectionbuttons {
  border-top: 2px solid #000000; /* Bordure claire en haut */
  border-left: 2px solid #000000; /* Bordure claire à gauche */
  border-bottom: 2px solid var(--dk-color); /* Bordure sombre en bas */
  border-right: 2px solid var(--dk-color); /* Bordure sombre à droite */
  color: var(--dk-color); /* Couleur du texte */
  padding: 2px; /* Espacement interne minimal */
  line-height: 8px; /* Hauteur de ligne réduite */
  display: inline-block; /* Affichage en ligne-bloc */
  height: 20px; /* Hauteur fixe */
  width: 20px; /* Largeur fixe (carré) */
  text-align: center; /* Texte centré */
  font-family: "pixel", monospace; /* Police pixel avec fallback */
}

/* Container pour les boutons de contrôle */
.sectionbuttonsdisplay {
  float: right; /* Flotte à droite (display devient block automatiquement) */
  margin-right: 5px; /* Marge à droite */
  overflow: hidden; /* Cache le débordement */
}

/* Sous-sections dans la navigation */
.subsection {
  font-size: 1em; /* Taille normale */
  color: var(--dkest-color); /* Couleur de texte */
  padding: 1px; /* Espacement minimal */
  background-color: var(--mid-color); /* Arrière-plan coloré */
  background-clip: padding-box; /* Limite l'arrière-plan au padding */
  border-bottom: 2px solid var(--dk-color); /* Bordure en bas */
}

/* ===============================================
   FIN DU FICHIER CSS - STRUCTURE FLEXBOX MODERNE
   =============================================== */