/* Guide Camionnage Québec — feuille de style */
:root {
  --bleu-fonce: #1c2530;
  --bleu: #b45309;
  --bleu-clair: #fdf3e7;
  --accent: #d97706;
  --accent-fonce: #b45309;
  --texte: #2b2b2b;
  --gris: #5a6b7c;
  --fond: #ffffff;
  --fond-doux: #faf7f2;
  --bordure: #e8ddcd;
  --vert: #2e7d32;
  --rouge: #c0392b;
  --rayon: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--texte);
  background: var(--fond);
  line-height: 1.65;
  font-size: 17px;
}

/* ---------- En-tête ---------- */
.site-header {
  background: var(--bleu-fonce);
  color: #fff;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.site-logo {
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: .2px;
}
.site-logo span { color: #fbbf24; }
.main-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.main-nav a {
  color: #e8e2d6;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: .95rem;
}
.main-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.main-nav a.actif { background: var(--accent); color: #fff; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, #1c2530 0%, #3a2b12 100%);
  color: #fff;
  padding: 52px 20px 44px;
  text-align: center;
}
.hero h1 { margin: 0 0 12px; font-size: 2rem; line-height: 1.25; }
.hero .sous-titre {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.08rem;
  color: #f3e9d7;
}

/* ---------- Conteneurs ---------- */
.conteneur { max-width: 1080px; margin: 0 auto; padding: 24px 20px 8px; }
.conteneur-etroit { max-width: 800px; margin: 0 auto; padding: 24px 20px 8px; }

/* ---------- Blocs ---------- */
.bloc { margin-bottom: 40px; }
h2.section {
  font-size: 1.45rem;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--accent);
  display: inline-block;
}
h3 { margin-top: 28px; }

/* ---------- Outil / quiz ---------- */
.outil {
  background: var(--fond-doux);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 24px;
  margin: 18px 0;
}
.champ { margin-bottom: 16px; }
.champ label { display: block; font-weight: 700; margin-bottom: 6px; }
.champ select {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: #fff;
}
.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 12px 26px;
  font-size: 1.02rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--accent-fonce); color: #fff; }
.btn-secondaire { background: var(--bleu-fonce); }
.btn-secondaire:hover { background: #0f1419; }
.resultat {
  display: none;
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--bordure);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  padding: 18px 20px;
}
.resultat.visible { display: block; }
.fourchette { font-size: 1.25rem; font-weight: 800; margin-bottom: 8px; }
.fourchette small { font-weight: 400; color: var(--gris); font-size: .95rem; }
.note { font-size: .88rem; color: var(--gris); }

/* ---------- Tableaux ---------- */
.tableau-defilant { overflow-x: auto; margin: 16px 0; }
table.prix {
  width: 100%;
  border-collapse: collapse;
  font-size: .97rem;
  background: #fff;
}
table.prix th, table.prix td {
  border: 1px solid var(--bordure);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
table.prix th { background: var(--bleu-fonce); color: #fff; }
table.prix tr:nth-child(even) td { background: var(--fond-doux); }
td.nombre { font-weight: 700; white-space: nowrap; }

/* ---------- Cartes ---------- */
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin: 18px 0;
}
.carte {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 18px;
  background: #fff;
}
.carte h3 { margin: 0 0 8px; font-size: 1.08rem; }
.carte h3 a { color: var(--texte); text-decoration: none; }
.carte h3 a:hover { color: var(--accent); }
.carte p { margin: 0; color: var(--gris); font-size: .95rem; }

/* ---------- Listes et encadrés ---------- */
.encadre {
  background: var(--bleu-clair);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 16px 20px;
  margin: 18px 0;
}
.encadre.attention { background: #fef6ec; border-left: 5px solid var(--accent); }
ul.liste { padding-left: 22px; }
ul.liste li { margin-bottom: 8px; }

/* ---------- Pied de page ---------- */
.site-footer {
  background: var(--bleu-fonce);
  color: #d8d2c4;
  margin-top: 40px;
  padding: 28px 20px;
  font-size: .92rem;
}
.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.site-footer a { color: #fbbf24; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .hero h1 { font-size: 1.55rem; }
  body { font-size: 16px; }
}