/* ============================================================
   PORTES · complément à etudes/etude.css
   Deux pages mono-audience : football.html et data.html
   Aucun nouveau jeton : on réutilise les variables d'etude.css.
   ============================================================ */

/* ---------- bascule entre les deux dossiers ---------- */
.door-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin: 2.6rem 0 0;
}

.door-switch > * {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .2rem .8rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  background: rgba(16, 32, 47, .5);
  color: var(--paper);
  text-decoration: none;
  transition: border-color .22s ease, background-color .22s ease;
}

.door-switch a:hover,
.door-switch a:focus-visible {
  border-color: var(--lime);
  background: rgba(70, 182, 200, .1);
}

.door-switch a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.door-switch .is-current {
  border-color: rgba(70, 182, 200, .5);
  background: rgba(70, 182, 200, .09);
}

.door-kicker {
  grid-column: 1;
  color: #9db4c4;
  font: .54rem/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.door-title {
  grid-column: 1;
  font: 600 .84rem/1.4 var(--sans);
}

.door-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--lime);
  font-size: .8rem;
}

.door-switch .is-current .door-arrow { color: var(--muted); }

@media (max-width: 560px) {
  .door-switch { grid-template-columns: 1fr; }
}

/* ---------- liste d'études retenues ---------- */
.study-list {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.study-list li { border-top: 1px solid var(--line); }
.study-list li:last-child { border-bottom: 1px solid var(--line); }

.study-list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: .25rem 1rem;
  padding: 1rem .2rem;
  color: var(--paper);
  text-decoration: none;
  transition: background-color .2s ease;
}

.study-list a:hover,
.study-list a:focus-visible { background: rgba(70, 182, 200, .06); }

.study-index {
  color: var(--lime);
  font: .58rem/1.6 var(--mono);
  letter-spacing: .08em;
}

.study-title { font-weight: 600; }

.study-metric {
  color: var(--orange);
  font: .62rem/1.6 var(--mono);
  white-space: nowrap;
}

.study-note {
  grid-column: 2 / -1;
  margin: .15rem 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .study-list a { grid-template-columns: auto 1fr; }
  .study-metric { grid-column: 2; padding-top: .2rem; }
}

/* ---------- plan daté ---------- */
.days {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.days li {
  position: relative;
  padding: .95rem 0 .95rem 3.4rem;
  border-top: 1px solid var(--line);
}

.days li:last-child { border-bottom: 1px solid var(--line); }

.days li::before {
  position: absolute;
  left: 0;
  top: 1rem;
  width: 2.6rem;
  color: var(--orange);
  font: .6rem/1.5 var(--mono);
  letter-spacing: .05em;
  content: attr(data-day);
}

.days strong {
  display: block;
  color: var(--paper);
  font-weight: 600;
}

.days p {
  margin: .3rem 0 0;
  color: #c2d0da;
  font-size: .9rem;
  line-height: 1.7;
}

/* ---------- étiquettes ---------- */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1.2rem;
}

.tag-row span {
  padding: .35rem .5rem;
  border: 1px solid rgba(70, 182, 200, .28);
  background: rgba(70, 182, 200, .06);
  color: #d5e2e9;
  font: .57rem/1.4 var(--mono);
}

@media (prefers-reduced-motion: reduce) {
  .door-switch > *, .study-list a { transition: none; }
}