/* ==========================================================================
   Quiscale.ca — feuille de style principale
   Palette dérivée du logo : noir encre, prune, bronze, or, crème.
   ========================================================================== */

:root {
  --q-ink:        #14121A;
  --q-plum:       #3A2350;
  --q-bronze:     #8A5A34;
  --q-bronze-lt:  #C98F52;
  --q-gold:       #F0C24B;
  --q-cream:      #F8F5EF;
  --q-cream-deep: #F2EAD9;

  --q-bg:          #FFFFFF;
  --q-bg-alt:      var(--q-cream);
  --q-surface:     #FFFFFF;
  --q-text:        var(--q-ink);
  --q-text-muted:  #5F5A52;
  --q-text-faint:  #8F887D;
  --q-border:      #E8E2D8;
  --q-accent:      var(--q-bronze);
  --q-invert-bg:   var(--q-ink);
  --q-invert-text: #F2EAD9;
  --q-invert-muted:#B8B0A4;

  --q-font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --q-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --q-radius: 12px;
  --q-radius-sm: 8px;
}

[data-bs-theme="dark"] {
  --q-bg:          #131019;
  --q-bg-alt:      #1A1622;
  --q-surface:     #1A1622;
  --q-text:        #F2EAD9;
  --q-text-muted:  #A79E90;
  --q-text-faint:  #6E6659;
  --q-border:      #2A2433;
  --q-accent:      var(--q-bronze-lt);
  --q-invert-bg:   var(--q-cream-deep);
  --q-invert-text: var(--q-ink);
  --q-invert-muted:#5F5A52;
}

/* --------------------------------------------------------------- Base --- */

body {
  background-color: var(--q-bg);
  color: var(--q-text);
  font-family: var(--q-font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .q-display {
  font-family: var(--q-font-display);
  font-weight: 500;
  color: var(--q-text);
  line-height: 1.25;
}

a { color: var(--q-accent); text-decoration: none; }
a:hover { color: var(--q-bronze-lt); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--q-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.q-skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 2000;
  background: var(--q-ink);
  color: #FFF;
  padding: .75rem 1.25rem;
}
.q-skip-link:focus { left: 0; }

.q-section { padding: 4.5rem 0; }
.q-section--tight { padding: 3rem 0; }
.q-bg-alt { background-color: var(--q-bg-alt); }

.q-eyebrow {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--q-accent);
  margin-bottom: .5rem;
  font-family: var(--q-font-body);
}

.q-lead { color: var(--q-text-muted); font-size: 1.0625rem; }
.q-muted { color: var(--q-text-muted); }

/* -------------------------------------------------------- Marque / nav --- */

.q-navbar {
  background-color: var(--q-bg);
  border-bottom: 1px solid var(--q-border);
}

.q-brand { display: flex; align-items: center; gap: .625rem; }
.q-brand__mark { height: 28px; width: auto; }
.q-mark-dark { display: none; }
[data-bs-theme="dark"] .q-mark-dark { display: inline; }
[data-bs-theme="dark"] .q-mark-light { display: none; }
.q-brand__name {
  font-family: var(--q-font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--q-text);
  line-height: 1;
}
.q-brand__tld { color: var(--q-accent); font-size: .95rem; }
.q-brand:hover { text-decoration: none; }

.q-navbar .nav-link {
  color: var(--q-text-muted);
  font-size: .9rem;
  padding: .4rem .85rem;
}
.q-navbar .nav-link:hover,
.q-navbar .nav-link:focus { color: var(--q-text); text-decoration: none; }

.q-lang { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; }
.q-lang__current {
  border: 1px solid var(--q-text);
  border-radius: 6px;
  padding: .125rem .4rem;
  color: var(--q-text);
}
.q-lang__alt { color: var(--q-text-faint); padding: .125rem .25rem; }
.q-lang__alt:hover { color: var(--q-text); text-decoration: none; }

.q-theme-toggle {
  background: none;
  border: 0;
  color: var(--q-text-muted);
  line-height: 1;
  padding: .35rem;
  cursor: pointer;
}
.q-theme-toggle:hover { color: var(--q-text); }
.q-theme-toggle .q-icon-dark { display: none; }
[data-bs-theme="dark"] .q-theme-toggle .q-icon-dark { display: inline; }
[data-bs-theme="dark"] .q-theme-toggle .q-icon-light { display: none; }

/* ------------------------------------------------- Bannière dev / beta --- */

.q-devbanner {
  background: #FAEEDA;
  border-bottom: 1px solid #EF9F27;
  color: #633806;
  font-size: .85rem;
}
[data-bs-theme="dark"] .q-devbanner {
  background: #3A2A0C;
  border-bottom-color: #85670B;
  color: #FAE3B0;
}
.q-devbanner__tag {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .1rem .55rem;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Héro --- */

.q-hero { background-color: var(--q-bg-alt); padding: 5rem 0 4.5rem; text-align: center; }
.q-hero__title { font-size: clamp(1.9rem, 5vw, 3rem); margin-bottom: 1rem; }
.q-hero__lead { max-width: 36rem; margin: 0 auto 1.75rem; }

/* -------------------------------------------------------------- Boutons -- */

.q-btn {
  display: inline-block;
  border-radius: var(--q-radius-sm);
  padding: .7rem 1.4rem;
  font-size: .9375rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.q-btn:hover { text-decoration: none; }

.q-btn--primary { background: var(--q-ink); color: #FFF; }
.q-btn--primary:hover { background: var(--q-plum); color: #FFF; }
[data-bs-theme="dark"] .q-btn--primary { background: var(--q-gold); color: var(--q-ink); }
[data-bs-theme="dark"] .q-btn--primary:hover { background: #FFD778; color: var(--q-ink); }

.q-btn--ghost { background: transparent; color: var(--q-text); border-color: var(--q-border); }
.q-btn--ghost:hover { background: var(--q-surface); border-color: var(--q-accent); color: var(--q-text); }

.q-btn--gold { background: var(--q-gold); color: var(--q-ink); }
.q-btn--gold:hover { background: #FFD778; color: var(--q-ink); }

/* ------------------------------------------------------------- Services -- */

.q-card {
  background: var(--q-bg-alt);
  border-radius: var(--q-radius);
  padding: 1.5rem;
  height: 100%;
}
[data-bs-theme="dark"] .q-card { background: var(--q-surface); }
.q-card__icon { font-size: 1.5rem; color: var(--q-plum); line-height: 1; }
[data-bs-theme="dark"] .q-card__icon { color: var(--q-bronze-lt); }
.q-card__title { font-size: 1.0625rem; margin: .75rem 0 .4rem; }
.q-card__text { font-size: .9rem; color: var(--q-text-muted); margin: 0; }

/* --------------------------------------------------------- Réalisations -- */

.q-work {
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius);
  overflow: hidden;
  background: var(--q-surface);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.q-work__media { display: block; background: var(--q-bg-alt); }
.q-work__media img { width: 100%; height: 190px; object-fit: cover; object-position: top center; display: block; }
.q-work__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.q-work__tag {
  align-self: flex-start;
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--q-bronze);
  background: var(--q-cream-deep);
  border-radius: 999px;
  padding: .15rem .6rem;
}
[data-bs-theme="dark"] .q-work__tag { color: var(--q-gold); background: #2A2129; }
.q-work__title { font-size: 1.05rem; margin: .7rem 0 .4rem; }
.q-work__text { font-size: .875rem; color: var(--q-text-muted); margin: 0 0 .85rem; }
.q-work__list { font-size: .875rem; color: var(--q-text-muted); padding-left: 1.1rem; margin: 0 0 .85rem; }
.q-work__list li { margin-bottom: .3rem; }
.q-work__link { margin-top: auto; font-size: .875rem; }

/* --------------------------------------------------------------- Stats -- */

.q-stats { border-top: 1px solid var(--q-border); border-bottom: 1px solid var(--q-border); }
.q-stat { padding: 1.5rem 0; }
.q-stat__num { font-family: var(--q-font-display); font-size: 1.75rem; color: var(--q-accent); line-height: 1.1; }
.q-stat__lbl { font-size: .85rem; color: var(--q-text-muted); }

/* ------------------------------------------------------------- À propos -- */

.q-about {
  background: var(--q-invert-bg);
  color: var(--q-invert-text);
  border-radius: var(--q-radius);
  padding: 2.25rem;
}
.q-about h2 { color: var(--q-invert-text); }
.q-about p { color: var(--q-invert-muted); font-size: .95rem; }
.q-about a:not(.q-btn) { color: var(--q-gold); text-decoration: underline; }
[data-bs-theme="dark"] .q-about a:not(.q-btn) { color: var(--q-bronze); }

/* ---------------------------------------------------------- Pied de page - */

.q-footer {
  border-top: 1px solid var(--q-border);
  padding: 2.5rem 0 1.75rem;
  font-size: .875rem;
  color: var(--q-text-muted);
}
.q-footer h3 { font-family: var(--q-font-body); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--q-text-faint); margin-bottom: .6rem; }
.q-footer ul { list-style: none; padding: 0; margin: 0; }
.q-footer li { margin-bottom: .3rem; }
.q-footer a { color: var(--q-text-muted); }
.q-footer a:hover { color: var(--q-accent); }
.q-footer__bottom { border-top: 1px solid var(--q-border); margin-top: 1.75rem; padding-top: 1.25rem; font-size: .8rem; color: var(--q-text-faint); }

/* ------------------------------------------------------- Accessibilité -- */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }