/* === RESET & BASE === */
* {
  box-sizing: border-box;
}

body {
  background-color: #c0c0c0;
  color: #000000;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  margin: 0;
  padding: 10px;
  overflow-y: scroll; /* Empêche le site de sauter entre les pages */
}

#container {
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid #000000;
}

/* === HEADER & MARQUEE === */
header {
  background-color: #003399;
  color: #ffffff;
  text-align: center;
  padding: 20px;
}
header h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 1px;
}

.marquee-container {
  background: #eeeeee;
  color: #333333;
  padding: 4px;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
}

/* === LAYOUT === */
.layout {
  display: flex;
  flex-direction: column;
}

aside {
  width: 100%;
  background-color: #f4f4f4;
  border-bottom: 1px dashed #aaaaaa;
  padding: 15px;
}
aside h3 {
  background-color: #dddddd;
  color: #003399;
  font-size: 12px;
  padding: 5px;
  margin-top: 0;
  border: 1px solid #bbbbbb;
  text-align: center;
}

ul.menu {
  list-style-type: square;
  padding-left: 20px;
  margin: 0 0 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
ul.menu li {
  white-space: nowrap;
}

a {
  color: #0000ee;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* === PHOTO & INFOS VOITURE === */
.voiture-infos {
  font-size: 11px;
  line-height: 1.5;
  padding: 5px;
  border: 1px solid #cccccc;
  background-color: #ffffff;
}

.photo-voiture {
  margin-top: 10px;
  text-align: center;
}
.photo-voiture img {
  width: 100%;
  max-width: 200px;
  border: 1px solid #000000;
  background-color: #ffffff;
  padding: 3px;
  transition: all 0.3s steps(3);
}
.photo-voiture img:hover {
  transform: scale(1.6) rotate(-3deg);
  border: 2px dashed #003399;
  position: relative;
  z-index: 100;
  cursor: crosshair;
}

/* === CONTENU PRINCIPAL === */
main {
  flex-grow: 1;
  padding: 20px;
}

article {
  margin-bottom: 35px;
}
article h2,
main h2 {
  color: #003399;
  font-size: 18px;
  border-bottom: 2px solid #003399;
  padding-bottom: 3px;
  margin-top: 0;
  margin-bottom: 5px;
}
.date {
  font-size: 10px;
  color: #666666;
  margin-bottom: 15px;
  margin-top: 5px;
}
.article-content {
  line-height: 1.6;
  text-align: justify;
}

/* === COMPOSANTS SPECIFIQUES (Logiciels, Tutos) === */
.warning-box {
  border: 1px solid #cc0000;
  background-color: #ffeeee;
  padding: 10px;
  color: #cc0000;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: justify;
}

table.software-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 12px;
}
table.software-table th,
table.software-table td {
  border: 1px solid #000000;
  padding: 8px;
  text-align: left;
}
table.software-table th {
  background-color: #dddddd;
  color: #003399;
}

.code-block {
  background-color: #000000;
  color: #00ff00;
  font-family: "Courier New", Courier, monospace;
  padding: 10px;
  font-size: 11px;
  border: 1px solid #666666;
  margin-top: 10px;
}

fieldset {
  border: 1px solid #888888;
  margin-bottom: 25px;
  padding: 15px;
}
legend {
  font-weight: bold;
  color: #003399;
  background: #ffffff;
  padding: 0 10px;
  font-variant: small-caps;
}

.tuto-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.tuto-list li {
  padding: 8px 0;
  border-bottom: 1px dotted #cccccc;
}
.tuto-list li:last-child {
  border-bottom: none;
}

.tag-meca {
  color: #800000;
  font-weight: bold;
  font-size: 10px;
}
.tag-soft {
  color: #008000;
  font-weight: bold;
  font-size: 10px;
}
.tag-elec {
  color: #000080;
  font-weight: bold;
  font-size: 10px;
}

/* === BOUTONS & FOOTER === */
.hidden-article {
  display: none;
}

#btn-more {
  display: block;
  margin: 20px auto;
  background-color: #f0f0f0;
  color: #000000;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 8px 15px;
  cursor: pointer;
  font-weight: bold;
}
#btn-more:active {
  border-color: #808080 #ffffff #ffffff #808080;
  padding: 9px 14px 7px 16px;
}

footer {
  background-color: #003399;
  color: #ffffff;
  padding: 15px;
  font-size: 11px;
  border-top: 1px solid #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.coffee-btn {
  display: inline-block;
  background-color: #f0f0f0;
  color: #000000;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 5px 10px;
  font-weight: bold;
  font-size: 10px;
}
.coffee-btn:active {
  border-color: #808080 #ffffff #ffffff #808080;
  padding: 6px 9px 4px 11px;
}

/* === RESPONSIVE (PC) === */
@media (min-width: 768px) {
  body {
    padding: 15px;
  }
  #container {
    width: 90%;
  }
  header h1 {
    font-size: 24px;
  }
  .layout {
    flex-direction: row;
  }
  aside {
    width: 220px;
    flex-shrink: 0;
    border-bottom: none;
    border-right: 1px dashed #aaaaaa;
  }
  ul.menu {
    display: block;
    gap: 0;
  }
  ul.menu li {
    margin-bottom: 8px;
  }
}