/* decoration.guide — feuille de style principale
   Direction : magazine déco pastel. Instrument Serif (titres) + Jost (texte). */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #FBF8F4;
  color: #2E2A27;
  font-family: 'Jost', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #B2705A; text-decoration: none; }
a:hover { color: #8C5442; }
::selection { background: #EFD9D2; }

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

.nav-link {
  color: #55504A;
  transition: color .15s ease;
}
.nav-link:hover,
.nav-link.is-active {
  color: #B2705A;
}

.nav-dropdown {
  position: relative;
  /* Comble le vide entre le lien et le menu : sans ça, la souris perd le
     survol en traversant cet espace avant d'atteindre le premier lien.
     padding-bottom étend la zone de survol, margin-bottom annule l'effet
     sur la mise en page (la nav ne s'agrandit pas visuellement). */
  padding-bottom: 14px;
  margin-bottom: -14px;
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;
  background: #FFFFFF;
  border: 1px solid #EDE4D9;
  border-radius: 14px;
  padding: 10px;
  min-width: 180px;
  box-shadow: 0 18px 40px -28px rgba(46,42,39,0.4);
  z-index: 20;
}
.nav-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: #55504A;
  font-size: 14px;
}
.nav-dropdown-menu a:hover {
  background: #F4EFE8;
  color: #B2705A;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}

.card-hover { transition: opacity .15s ease; }
.card-hover:hover { opacity: .86; }

.btn-dark {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 999px;
  background: #2E2A27;
  color: #FBF8F4;
  display: inline-block;
  border: none;
  cursor: pointer;
  transition: background .15s ease;
}
.btn-dark:hover { background: #B2705A; color: #FBF8F4; }

.btn-outline {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid #DCCFC2;
  color: #2E2A27;
  display: inline-block;
  background: transparent;
  transition: border-color .15s ease, color .15s ease;
}
.btn-outline:hover { border-color: #B2705A; color: #B2705A; }

@media (max-width: 640px) {
  nav[aria-label="Navigation principale"] { gap: 12px !important; }
}

/* ── Quiz homepage ── */

.quiz-banner {
  position: relative;
  aspect-ratio: 21 / 6;
  border-radius: 26px;
  overflow: hidden;
  background: #2E2A27;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
  display: block;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.quiz-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.quiz-banner:hover img { transform: scale(1.03); }
.quiz-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(46,42,39,0.82) 0%, rgba(46,42,39,0.45) 55%, rgba(46,42,39,0.15) 100%);
}
.quiz-banner-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(20px, 4vw, 44px);
  text-align: left;
}
.quiz-banner-badge {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FBF8F4;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
  padding: 6px 13px;
  border-radius: 999px;
}
.quiz-banner-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 38px);
  line-height: 1.1;
  color: #FBF8F4;
  margin: 0;
}
.quiz-banner-sub {
  font-size: clamp(13px, 1.1vw, 15.5px);
  color: rgba(251,248,244,0.85);
  margin: 0;
}
.quiz-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2E2A27;
  background: #FBF8F4;
  padding: 10px 20px;
  border-radius: 999px;
}

.quiz-overlay {
  position: fixed;
  inset: 0;
  background: rgba(46,42,39,0.6);
  backdrop-filter: blur(3px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.quiz-overlay[hidden] { display: none; }
.quiz-overlay:not([hidden]) { display: flex; }
.quiz-box {
  position: relative;
  background: #FBF8F4;
  border-radius: 24px;
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 40px);
}
.quiz-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #EDE4D9;
  background: #FFFFFF;
  color: #2E2A27;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.quiz-progress-track {
  height: 6px;
  background: #EDE4D9;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 26px;
}
.quiz-progress-fill {
  height: 100%;
  width: 0%;
  background: #B2705A;
  border-radius: 999px;
  transition: width .35s ease;
}
.quiz-step {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8C867E;
  margin-bottom: 10px;
}
.quiz-question {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.25;
  color: #2E2A27;
  margin: 0 0 22px;
}
.quiz-options {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}
.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  color: #2E2A27;
  background: #F4EFE8;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.quiz-option:hover { background: #EFE6DC; }
.quiz-option.is-selected {
  border-color: #B2705A;
  background: #F1EDE6;
}
.quiz-next {
  width: 100%;
  text-align: center;
  border: none;
}
.quiz-next:disabled { opacity: .4; cursor: not-allowed; }

.quiz-result { text-align: center; }
.quiz-result-img {
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  margin-bottom: 20px;
}
.quiz-result-badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8A9A88;
  background: #EAF0E8;
  padding: 6px 13px;
  border-radius: 999px;
}
.quiz-result-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 42px);
  margin: 14px 0 0;
  color: #2E2A27;
}
.quiz-result-teaser {
  font-size: 15.5px;
  line-height: 1.65;
  color: #5C564F;
  margin: 12px auto 0;
  max-width: 42ch;
}
.quiz-result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 24px;
}
.quiz-result-actions .btn-dark,
.quiz-result-actions .btn-outline {
  width: 100%;
  text-align: center;
  border: none;
}
.quiz-result-actions .btn-outline { border: 1px solid #DCCFC2; }

/* ── Explorateur de palettes (/couleurs) ── */

.palette-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.palette-columns {
  display: contents;
}
.palette-column {
  min-width: 0;
}
.palette-family-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8C867E;
  margin: 0 0 8px;
  padding: 0 6px;
}
.palette-family-label:not(:first-child) { margin-top: 18px; }
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25px, 28px));
  justify-content: start;
  gap: 7px;
  padding: 6px;
}
.palette-swatch {
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 0 0 0 rgba(46,42,39,0);
}
.palette-swatch:hover {
  transform: scale(1.18);
  box-shadow: 0 8px 20px -8px rgba(46,42,39,0.35);
}
.palette-swatch.is-active {
  transform: scale(1.18);
  box-shadow: 0 0 0 3px #FBF8F4, 0 0 0 5px #2E2A27;
}

.palette-panel {
  position: sticky;
  top: 24px;
  border: 1px solid #EDE4D9;
  border-radius: 20px;
  padding: 22px;
  min-width: 0;
}
.palette-panel-swatch {
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  margin-bottom: 16px;
}
.palette-panel-family {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8C867E;
}
.palette-panel-name {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 26px;
  margin: 6px 0 0;
  color: #2E2A27;
}
.palette-panel-ncs {
  font-size: 13px;
  color: #6E6862;
  margin: 10px 0 0;
}
.palette-panel-ncs strong { color: #2E2A27; }
.palette-panel-note {
  font-size: 14.5px;
  line-height: 1.6;
  color: #5C564F;
  margin: 12px 0 0;
}
.palette-panel-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8C867E;
  margin: 18px 0 8px;
}
.palette-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.palette-tag {
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #F4EFE8;
  color: #2E2A27;
}
.palette-tag:hover { background: #EFE6DC; color: #B2705A; }
.palette-pairs { display: grid; gap: 8px; }
.palette-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  padding: 4px 0;
  font-size: 14px;
  color: #2E2A27;
  cursor: pointer;
  text-align: left;
}
.palette-pair:hover { color: #B2705A; }
.palette-pair-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
}
.palette-cta {
  display: block;
  text-align: center;
  margin-top: 20px;
  border: none;
}

@media (max-width: 780px) {
  /* Layout article à deux colonnes (contenu + sommaire) : la grille inline
     ne collapse jamais toute seule en dessous de sa largeur minimale
     (1fr + 260px), ce qui écrase le contenu sur mobile. On la force en
     une seule colonne et on désactive le sticky, qui n'a plus de sens
     une fois le sommaire passé sous l'article plutôt qu'à côté. */
  .article-grid { display: block !important; }
  .article-aside { position: static !important; margin-top: 32px; }
}

@media (max-width: 720px) {
  .palette-explorer { grid-template-columns: 1fr; }
  .palette-panel { position: static; }
}