* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #cc5500; font-family: Arial, sans-serif; }
a { text-decoration: none; color: white; }
a:hover { text-decoration: underline; }

#wrapper { width: 800px; margin: 0 auto; background-color: #FF6C00; }

/* Header */
#header { background-color: #FF6C00; }
#header-top { display: flex; align-items: stretch; }
#header-top .logo { display: flex; align-items: center; }
#header-top .clock-area { background-color: black; flex: 1; display: flex; align-items: center; justify-content: center; padding: 5px; }
#clock { color: #FF6C00; font-size: 22px; font-weight: bold; font-family: 'Courier New', monospace; letter-spacing: 2px; }
.sep-black  { background-color: black;   height: 10px; }
.sep-orange { background-color: #FF6C00; height: 2px; }
.sep-black2 { background-color: black;   height: 3px; }
.sep-orange2{ background-color: #FF6C00; height: 1px; }
.sep-black3 { background-color: black;   height: 1px; }
.sep-orange3{ background-color: #FF6C00; height: 2px; }

/* Navbar */
#navbar { background-color: black; height: 26px; display: flex; align-items: center; padding-left: 40px; }
#navbar a { color: white; font-size: 13px; }
#navbar .sep { color: white; margin: 0 4px; font-size: 13px; }

/* Content area */
#content { background-color: #FF6C00; padding: 16px 25px; min-height: 300px; }

/* Box générique (titre noir + contenu) */
.box { border: 1px solid black; margin-bottom: 12px; }
.box-title { background-color: black; color: white; font-size: 13px; padding: 5px 8px; height: 26px; display: flex; align-items: center; }
.box-body { background-color: #FF6C00; padding: 8px; border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; font-size: 13px; color: black; }
.box-body a { color: white; }
.box-body a:hover { text-decoration: underline; }

/* Deux colonnes */
.cols { display: flex; gap: 20px; align-items: flex-start; }
.col { flex: 1; }