main.tactiques-de-but-page { overflow: clip; }

.tdb-hero { padding-block: var(--space-9); background: var(--color-primary-deep); color: var(--color-on-dark); }
.tdb-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-6); align-items: center; }
.tdb-hero__copy, .tdb-hero__media { min-width: 0; width: 100%; }
.tdb-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.tdb-hero__copy > * { margin: 0; }
.tdb-hero .eyebrow { color: var(--color-accent); }
.tdb-hero h1 { max-width: 590px; color: var(--color-on-dark); font-size: clamp(2.75rem, 5vw, 4rem); }
.tdb-hero__lead { max-width: 590px; font-size: var(--text-lg); line-height: 1.55; }
.tdb-hero__text-link { color: var(--color-on-dark); font-weight: 700; }
.tdb-hero__media { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.tdb-hero__figure { width: 100%; margin: 0; }
.tdb-hero__figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: right center; border-radius: var(--radius-panel); }
.tdb-score { width: min(100%, 17.5rem); display: flex; flex-direction: column; gap: var(--space-3); }
.tdb-score > * { margin: 0; }
.tdb-score__label { color: var(--color-accent); }
.tdb-score__row { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.tdb-score__number { color: var(--color-accent); font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; letter-spacing: var(--tracking-heading); }

.tdb-section-head { width: min(100%, 43rem); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.tdb-section-head > * { margin: 0; }
.tdb-section-head--narrow { width: min(100%, 38.75rem); }
.tdb-section-head--wide { width: min(100%, 42.5rem); }
.tdb-section-head__lead { max-width: 42rem; color: var(--color-muted); font-size: var(--text-lg); }

.tdb-reading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.tdb-reading-grid > article { min-width: 0; width: 100%; }
.tdb-reading-card { min-height: 100%; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.tdb-reading-card > * { margin: 0; }
.tdb-card-number { color: var(--color-primary); font-family: var(--font-heading); font-size: 2.25rem; font-weight: 700; line-height: 1; }
.tdb-reading-card p { max-width: 35rem; }
.tdb-mini-callout { padding: var(--space-3); border-left: 4px solid var(--color-accent); background: var(--color-accent-soft); color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; }

.tdb-scenario { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.tdb-scenario__copy, .tdb-scenario__visual { min-width: 0; width: 100%; }
.tdb-scenario__copy { max-width: 31.25rem; }
.tdb-scenario__copy h2 { margin-bottom: var(--space-5); }
.tdb-step-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.tdb-step-list li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.tdb-step-list__number { color: var(--color-primary); font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.tdb-decision-callout { margin-bottom: 0; }
.tdb-scenario__visual { display: flex; flex-direction: column; gap: var(--space-3); }
.tdb-pitch { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: var(--border); border-radius: var(--radius-card); background: #dfeee5; }
.tdb-pitch::before { content: ""; position: absolute; inset: 7%; border: 1px solid rgba(23, 107, 77, 0.65); }
.tdb-pitch::after { content: ""; position: absolute; top: 7%; bottom: 7%; left: 50%; width: 1px; background: rgba(23, 107, 77, 0.65); }
.tdb-pitch__circle { position: absolute; top: 50%; left: 50%; width: 23%; aspect-ratio: 1; border: 1px solid rgba(23, 107, 77, 0.65); border-radius: 50%; transform: translate(-50%, -50%); }
.tdb-player, .tdb-ball { position: absolute; z-index: 2; width: 1.75rem; aspect-ratio: 1; border-radius: 50%; }
.tdb-player { display: grid; place-items: center; border: 2px solid var(--color-surface); background: var(--color-primary); color: var(--color-on-dark); font-size: var(--text-xs); font-weight: 700; }
.tdb-player--carrier { left: 40%; top: 55%; }
.tdb-player--wide { right: 15%; top: 25%; }
.tdb-player--defender { left: 52%; top: 37%; background: var(--color-muted); }
.tdb-ball { left: 35%; top: 65%; width: 0.75rem; background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-surface); }
.tdb-run { position: absolute; z-index: 1; height: 0; border-top: 3px solid var(--color-accent); transform-origin: left center; }
.tdb-run--drive { left: 38%; top: 59%; width: 17%; transform: rotate(-56deg); }
.tdb-run--pass { left: 43%; top: 55%; width: 38%; transform: rotate(-34deg); }
.tdb-run::after { content: ""; position: absolute; right: -2px; top: -6px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--color-accent); }
.tdb-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding: 0; margin: 0; list-style: none; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.45; }
.tdb-legend li { min-width: 0; }
.tdb-key { display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: var(--space-2); vertical-align: -0.05em; border-radius: 50%; background: var(--color-primary); }
.tdb-key--defender { background: var(--color-muted); }
.tdb-key--route { width: 1.25rem; height: 0.2rem; border-radius: 0; background: var(--color-accent); }

.tdb-calls__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; margin-top: var(--space-6); }
.tdb-calls__media, .tdb-calls__content { min-width: 0; width: 100%; }
.tdb-calls__media { margin: 0; }
.tdb-calls__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center center; border-radius: var(--radius-card); }
.tdb-calls__content { display: flex; flex-direction: column; gap: var(--space-5); }
.tdb-calls__content > * { margin: 0; }
.tdb-calls__intro { max-width: 38.75rem; }
.tdb-run-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.tdb-run-cards > article { min-width: 0; width: 100%; }
.tdb-run-card { display: flex; min-height: 100%; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.tdb-run-card > * { margin: 0; }
.tdb-run-card h3 { font-size: var(--text-xl); }
.tdb-run-card p { font-size: var(--text-sm); line-height: 1.55; }
.tdb-timing { display: flex; flex-direction: column; gap: var(--space-3); }
.tdb-timing > * { margin: 0; }
.tdb-timing .eyebrow { color: var(--color-accent); }
.tdb-timing strong { color: var(--color-accent-soft); }

.tdb-finish { background: var(--color-surface-muted); }
.tdb-finish__layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-6); align-items: start; margin-top: var(--space-6); }
.tdb-finish__choices, .tdb-finish__media { min-width: 0; width: 100%; }
.tdb-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.tdb-choice-grid > article { min-width: 0; width: 100%; }
.tdb-choice { display: flex; min-height: 100%; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.tdb-choice > * { margin: 0; }
.tdb-choice h3 { font-size: var(--text-xl); }
.tdb-choice p { font-size: var(--text-sm); line-height: 1.55; }
.tdb-choice ul { margin: 0; padding: 0; list-style: none; }
.tdb-choice li { position: relative; padding-left: 1.25rem; font-size: var(--text-sm); }
.tdb-choice li + li { margin-top: var(--space-2); }
.tdb-choice li::before { content: "✓"; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; }
.tdb-choice__flag { width: fit-content; padding: 0.2rem 0.45rem; border-radius: var(--radius-sharp); background: var(--color-primary-soft); color: var(--color-primary-deep); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); }
.tdb-choice__flag--yellow { background: var(--color-accent-soft); }
.tdb-choice__flag--slate { background: #e8ecea; color: var(--color-muted); }
.tdb-finish__media { margin: 0; }
.tdb-finish__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center center; border-radius: var(--radius-card); }
.tdb-finish__media figcaption { max-width: 22rem; }
.tdb-beginner-link { display: inline-flex; margin-top: var(--space-5); font-weight: 700; }

.tdb-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.tdb-guide-grid > article { min-width: 0; width: 100%; }
.tdb-guide-card { min-height: 100%; }
.tdb-guide-card__link { display: flex; min-height: 100%; flex-direction: column; gap: var(--space-4); padding: var(--space-5); color: var(--color-ink); text-decoration: none; }
.tdb-guide-card__link > * { margin: 0; }
.tdb-guide-card__link:hover { color: var(--color-ink); }
.tdb-guide-card__link:focus-visible { box-shadow: var(--focus-ring); outline: none; outline-offset: var(--focus-offset); }
.tdb-guide-card__link p { color: var(--color-muted); }
.tdb-guide-card__cta { margin-top: auto; color: var(--color-primary); font-size: var(--text-sm); font-weight: 700; text-decoration: underline; text-underline-offset: 0.16em; }

.tdb-prep__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: start; margin-top: var(--space-6); }
.tdb-checklist, .tdb-prep__side { min-width: 0; width: 100%; }
.tdb-checklist { padding: var(--space-5); }
.tdb-checklist h3 { margin-bottom: var(--space-5); }
.tdb-check-items { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.tdb-check-items li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.tdb-check-items__number { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary-deep); font-family: var(--font-heading); font-weight: 700; }
.tdb-check-items p { margin: 0; }
.tdb-copy-button { margin-top: var(--space-5); }
.tdb-copy-status { display: block; min-height: 1.5em; margin-top: var(--space-2); color: var(--color-muted); font-size: var(--text-sm); }
.tdb-prep__side { display: flex; flex-direction: column; gap: var(--space-4); }
.tdb-prep__side > * { margin: 0; }
.tdb-tournament { display: flex; flex-direction: column; gap: var(--space-3); }
.tdb-tournament > * { margin: 0; }
.tdb-tournament .eyebrow { color: var(--color-accent); }
.tdb-beginner-note { margin: 0; }

.tdb-cta-band { background: var(--color-primary-deep); color: var(--color-on-dark); }
.tdb-cta-band__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(16.25rem, 5fr); gap: var(--space-6); align-items: center; }
.tdb-cta-band__copy, .tdb-cta-band__action { min-width: 0; width: 100%; }
.tdb-cta-band__copy { max-width: 40.625rem; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.tdb-cta-band__copy > * { margin: 0; }
.tdb-cta-band h2 { color: var(--color-on-dark); }
.tdb-cta-band .eyebrow { color: var(--color-accent); }
.tdb-cta-band__action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.tdb-cta-band__action > * { margin: 0; }
.tdb-cta-band__action .button { min-width: 16.25rem; }
.tdb-cta-band__action small { color: var(--color-accent-soft); }

.tdb-faq { width: min(100%, 62.5rem); margin-top: var(--space-6); }
.tdb-faq__item { margin: 0; overflow: hidden; border: var(--border); border-radius: var(--radius-card); background: var(--color-surface); }
.tdb-faq__item + .tdb-faq__item { margin-top: var(--space-3); }
.tdb-faq__question { width: 100%; min-height: 2.75rem; display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem; gap: var(--space-4); align-items: center; padding: var(--space-4); border: 0; background: transparent; color: var(--color-ink); font-weight: 700; text-align: left; }
.tdb-faq__icon { color: var(--color-primary); font-size: 1.5rem; line-height: 1; text-align: center; }
.tdb-faq__answer { max-width: 43.75rem; padding: 0 var(--space-4) var(--space-4); }
.tdb-faq__answer p { margin: 0; }
.tdb-faq__item[hidden] { display: none; }

.tdb-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.tdb-articles > article { min-width: 0; width: 100%; }
.tdb-article-card { display: flex; min-height: 100%; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.tdb-article-card > * { margin: 0; }
.tdb-article-card p { color: var(--color-muted); }
.tdb-article-card__link { margin-top: auto; width: fit-content; min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 700; }

@media (max-width: 64rem) {
  .tdb-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdb-run-cards, .tdb-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdb-run-cards > :last-child, .tdb-choice-grid > :last-child { grid-column: 1 / -1; }
  .tdb-finish__layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .tdb-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 58.75rem) {
  .tdb-reading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdb-reading-grid > :last-child { grid-column: 1 / -1; }
  .tdb-scenario, .tdb-calls__layout, .tdb-prep__grid { grid-template-columns: 1fr; }
  .tdb-scenario__copy { max-width: 42rem; }
  .tdb-calls__media { max-width: 42rem; }
  .tdb-prep__side { max-width: 42rem; }
}

@media (max-width: 53.75rem) {
  .tdb-finish__layout { grid-template-columns: 1fr; }
  .tdb-finish__media { max-width: 32rem; order: -1; }
  .tdb-cta-band__grid { grid-template-columns: 1fr; }
}

@media (max-width: 47.4375rem) {
  .tdb-hero { padding-block: var(--space-8); }
  .tdb-hero__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .tdb-hero h1 { font-size: 2.5rem; line-height: 1.05; }
  .tdb-hero__lead { font-size: var(--text-lg); }
  .tdb-hero .button { width: 100%; min-height: 3rem; }
  .tdb-score { width: 100%; }
  .tdb-section-head, .tdb-section-head--narrow, .tdb-section-head--wide { width: 100%; }
  .tdb-section-head__lead { font-size: var(--text-base); }
  .tdb-reading-grid, .tdb-guide-grid, .tdb-articles { grid-template-columns: 1fr; gap: var(--space-4); }
  .tdb-reading-grid > :last-child { grid-column: auto; }
  .tdb-reading-card, .tdb-guide-card__link, .tdb-article-card, .tdb-checklist { padding: var(--space-4); }
  .tdb-legend { grid-template-columns: 1fr; gap: var(--space-2); }
  .tdb-calls__layout, .tdb-finish__layout, .tdb-prep__grid { gap: var(--space-5); }
  .tdb-run-cards, .tdb-choice-grid { grid-template-columns: 1fr; }
  .tdb-run-cards > :last-child, .tdb-choice-grid > :last-child { grid-column: auto; }
  .tdb-calls__media, .tdb-finish__media { max-width: none; }
  .tdb-cta-band__action .button { width: 100%; min-width: 0; min-height: 3rem; }
  .tdb-faq { width: 100%; }
  .tdb-faq__question { padding: var(--space-4); gap: var(--space-3); }
  .tdb-faq__answer { padding: 0 var(--space-4) var(--space-4); }
}