* { 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 { max-width: 800px; width: 100%; margin: 0 auto; background-color: #FF6C00; border-left: 1px solid black; border-right: 1px solid black; }

/* Header */
#header { background-color: #FF6C00; }
#header-top { display: flex; align-items: stretch; }
#header-top .logo { display: flex; align-items: center; flex-shrink: 0; overflow: hidden; }
#header-top .logo img { display: block; }
#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; min-height: 26px; display: flex; align-items: center; padding: 3px 10px 3px 40px; flex-wrap: wrap; gap: 1px 0; }
#navbar a { color: white; font-size: 13px; white-space: nowrap; }
#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 */
.box { border: 1px solid black; margin-bottom: 12px; }
.box-title { background-color: black; color: white; font-size: 13px; padding: 5px 8px; min-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; min-width: 0; }

/* ====== MOBILE (≤ 820px) ====== */
@media (max-width: 820px) {
  #header-top .logo img:first-child { width: 160px; height: auto; }
  #header-top .logo img:nth-child(2) { display: none; }
  #clock { font-size: 16px; letter-spacing: 1px; }

  #navbar { padding-left: 10px; }

  #content { padding: 10px; }

  .cols { flex-direction: column; gap: 10px; }
  .col { width: 100%; }

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

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  input[type="submit"],
  input[type="button"] {
    cursor: pointer;
    padding: 6px 12px;
    font-size: 14px;
  }
}