/* Tool and category detail templates, LE LABO IA design system 8.2.0. */
body[data-outils-detail] main > .sec { position: relative; }
body[data-outils-detail] main > .sec:nth-of-type(3n + 3) { background: #0e1630; }
body[data-outils-detail] main > .sec:nth-of-type(3n + 4) { background: #111634; }
body[data-outils-detail] main .card-v4,
body[data-outils-detail] main .tag { border-radius: 0; }
body[data-outils-detail] main .card-v4 { transition: transform .25s ease, border-color .25s ease, background .25s ease; }
body[data-outils-detail] main a.card-v4:hover { transform: translateY(-4px); border-color: #e8c872; }
body[data-outils-detail] main .eyebrow-edito { margin-bottom: 20px; }
body[data-outils-detail] main .eyebrow-edito .eb-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 11px;
  background: #e8c872;
  color: #192238 !important;
  font: 800 .7rem/1.1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}
body[data-outils-detail] main .fs-h2 { font-family: var(--font-sans); font-style: normal; font-weight: 800; letter-spacing: -.035em; }
body[data-outils-detail] main .sec-signature-v4 { background: #e8c872 !important; }
body[data-outils-detail] main .sec-signature-v4 :is(h2, p, .fs-h2, .fs-body-lg) { color: #192238 !important; }
body[data-outils-detail] main .sec-signature-v4 .btn-gold { background: #192238; color: #f9e9c6; border-color: #192238; }
body[data-outils-detail] main :is(a, button):focus-visible { outline: 3px solid #e8c872; outline-offset: 3px; }

/* The published score card provides the right side of the tool hero. */
body[data-outils-detail="tool"] main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-outils-detail="tool"] main > .sec { grid-column: 1 / -1; }
body[data-outils-detail="tool"] main > .sec:first-child {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  padding: 130px 30px 66px !important;
  background: #111634;
}
body[data-outils-detail="tool"] main > .sec:nth-child(2):has(.card-v4--featured) {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  padding: 130px 30px 66px !important;
  background: #0e1630;
}
body[data-outils-detail="tool"] main > .sec:first-child .sec-narrow,
body[data-outils-detail="tool"] main > .sec:nth-child(2) .sec-narrow { width: min(100%, 580px); }
body[data-outils-detail="tool"] main > .sec:first-child .fs-h1 {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(2.9rem, 4.2vw, 5rem);
  letter-spacing: -.05em;
  line-height: 1.05;
}
body[data-outils-detail="tool"] main > .sec:first-child .fs-h1 > i { color: #e8c872 !important; }
body[data-outils-detail="tool"] main > .sec:nth-child(2) .card-v4--featured {
  padding: 36px !important;
  border-color: rgba(232, 200, 114, .42);
  background: #151435;
}
body[data-outils-detail="tool"] main > .sec:nth-child(2) .fs-metric { font-size: clamp(3.3rem, 5vw, 5rem); }
body[data-outils-detail="tool"] main .faq-answer {
  max-height: none;
  overflow: visible;
  opacity: 1;
  padding: 4px 28px 18px;
}
body[data-outils-detail="tool"] main .faq-item.faq-enhanced .faq-answer { max-height: 0; overflow: hidden; opacity: 0; padding: 0 28px; }
body[data-outils-detail="tool"] main .faq-item.faq-enhanced.open .faq-answer { max-height: none; overflow: visible; opacity: 1; padding: 4px 28px 18px; }
body[data-outils-detail="tool"] main .faq-item { border-radius: 0; background: #151435; }

/* Category introduction uses its existing description as a useful spot card. */
body[data-outils-detail="category"] main > .sec:first-child { background: #111634; }
body[data-outils-detail="category"] main > .sec:first-child .sec-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  column-gap: clamp(26px, 5vw, 76px);
  align-items: center;
}
body[data-outils-detail="category"] main > .sec:first-child .sec-inner > :first-child { grid-column: 1 / -1; }
body[data-outils-detail="category"] main > .sec:first-child .eyebrow-edito,
body[data-outils-detail="category"] main > .sec:first-child .fs-h1 { grid-column: 1; }
body[data-outils-detail="category"] main > .sec:first-child .fs-h1 {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(3rem, 4.4vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: -.05em;
}
body[data-outils-detail="category"] main > .sec:first-child .fs-h1 span { font-family: var(--font-display); }
body[data-outils-detail="category"] main > .sec:first-child .fs-body-lg {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: stretch;
  display: flex;
  align-items: center;
  min-height: 220px;
  max-width: none !important;
  margin: 0;
  padding: 35px;
  border-left: 5px solid #e8c872;
  background: #f4efe5;
  color: #192238 !important;
  font-weight: 650;
}
body[data-outils-detail="category"] main > .sec:first-child .fs-body-lg :is(span, strong) { color: #192238 !important; }
body[data-outils-detail="category"] main .grid-3 > a.card-v4:nth-child(3n + 2) { background: #151435; }
body[data-outils-detail="category"] main .grid-3 > a.card-v4:nth-child(3n + 3) { background: #0e1630; }

@media (max-width: 1000px) {
  body[data-outils-detail="category"] main .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  body[data-outils-detail="tool"] main { grid-template-columns: 1fr; }
  body[data-outils-detail="tool"] main > .sec:first-child,
  body[data-outils-detail="tool"] main > .sec:nth-child(2):has(.card-v4--featured) {
    grid-column: 1;
    grid-row: auto;
    padding: 105px 18px 45px !important;
  }
  body[data-outils-detail="tool"] main > .sec:nth-child(2):has(.card-v4--featured) { padding-top: 20px !important; }
  body[data-outils-detail="category"] main > .sec:first-child .sec-inner { grid-template-columns: 1fr; }
  body[data-outils-detail="category"] main > .sec:first-child .sec-inner > * { grid-column: 1; grid-row: auto; }
  body[data-outils-detail="category"] main > .sec:first-child .fs-body-lg { min-height: 0; padding: 28px; }
}
@media (max-width: 640px) {
  body[data-outils-detail="category"] main .grid-3 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-outils-detail] main .card-v4 { transition: none; }
  body[data-outils-detail] main a.card-v4:hover { transform: none; }
}