/* ==========================================================================
   SCF/SAGE Child Theme — Responsive Breakpoints
   Mobile-first: 576px, 768px, 992px, 1200px
   Hamburger menu, stacked layouts, touch-friendly targets
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base: Mobile (< 576px)
   All base/mobile styles are already in their respective files.
   This file handles progressive enhancement upward.
   -------------------------------------------------------------------------- */

/* Touch-friendly minimum tap targets */
@media (pointer: coarse) {
  .btn,
  .site-nav__link,
  .onglets-nav__link,
  .filter-chip,
  .catalog-filter-btn,
  .faq-item__trigger {
    min-height: 44px;
  }

  .formations-pagination__link {
    min-width: 44px;
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   Small (>= 576px)
   -------------------------------------------------------------------------- */
@media (min-width: 576px) {

  /* --- Global --- */
  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  /* Grid helpers */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Homepage --- */
  .hero {
    min-height: 520px;
  }

  .entry-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quiz-card__options {
    grid-template-columns: 1fr 1fr;
  }

  /* --- Onglets --- */
  .form-row {
    grid-template-columns: 1fr 1fr;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Financer --- */
  .funding-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .simulator-form {
    grid-template-columns: 1fr 1fr;
  }

  /* --- Formations --- */
  .formations-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .related-formations__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .evaluation-methods {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   Medium (>= 768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  /* --- Global --- */
  .section {
    padding: var(--space-xxl) 0;
  }

  /* --- Header --- */
  .site-header__cta {
    display: flex;
  }

  /* --- Footer --- */
  .footer-qualiopi__inner {
    flex-direction: row;
    text-align: left;
  }

  .footer-main__grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .footer-bottom__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  /* --- Homepage --- */
  .hero {
    min-height: 560px;
  }

  .hero__content {
    padding: var(--space-xxl) var(--space-md);
  }

  .entry-cards__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .entry-cards {
    margin-top: -60px;
  }

  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .counters__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .partner-logo img {
    max-height: 55px;
    max-width: 160px;
  }

  /* --- Onglets --- */
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  /* Show connector lines between steps */
  .process-step:not(:last-child)::after {
    display: block;
    bottom: auto;
    top: 28px;
    left: auto;
    right: calc(-1 * var(--space-lg) / 2);
    width: var(--space-lg);
    height: 2px;
    transform: none;
  }

  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .profile-contact__wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .profile-contact__info {
    order: 1;
  }

  .profile-contact__form-wrap {
    order: 2;
  }

  .key-figures {
    grid-template-columns: repeat(4, 1fr);
  }

  /* --- Financer --- */
  .simulator-result__breakdown {
    grid-template-columns: repeat(4, 1fr);
  }

  /* --- Formations --- */
  .formations-toolbar__inner {
    flex-direction: row;
    align-items: center;
  }

  .formations-search {
    max-width: 320px;
  }

  .formation-card__meta {
    gap: var(--space-sm);
  }

  .satisfaction-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Large / Desktop (>= 992px)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {

  /* --- Header: Show nav, hide hamburger --- */
  .site-nav {
    display: flex;
  }

  .lang-switcher {
    display: block;
  }

  .menu-toggle {
    display: none;
  }

  .mobile-nav,
  .mobile-nav-overlay {
    display: none !important;
  }

  /* --- Homepage --- */
  .hero {
    min-height: 620px;
  }

  .hero__content {
    padding: var(--space-3xl) var(--space-md);
  }

  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* --- Onglets --- */
  .process-steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .catalog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .profile-contact__wrapper {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-xl);
  }

  /* --- Financer --- */
  .funding-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  /* --- Formations --- */
  .formations-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Single formation: sidebar layout */
  .formation-single__layout {
    grid-template-columns: 1fr 340px;
  }

  .formation-content {
    order: 1;
  }

  .formation-sidebar {
    order: 2;
  }

  .related-formations__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Extra Large (>= 1200px)
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {

  /* --- Global --- */
  :root {
    --header-height: 88px;
  }

  .container {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }

  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* --- Header --- */
  .site-header__logo img {
    height: 52px;
  }

  .site-header.scrolled .site-header__logo img {
    height: 40px;
  }

  .site-nav__link {
    padding: 10px 16px;
    font-size: var(--font-size-sm);
  }

  /* --- Homepage --- */
  .hero {
    min-height: 680px;
  }

  .entry-cards {
    margin-top: -80px;
  }

  .team-member__photo-wrapper {
    width: 160px;
    height: 160px;
  }

  /* --- Financer --- */
  .funding-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .funding-block {
    border-top-width: 5px;
  }

  /* --- Formations --- */
  .formation-single__layout {
    grid-template-columns: 1fr 380px;
    gap: var(--space-xl);
  }
}

/* --------------------------------------------------------------------------
   Ultra-wide (>= 1400px)
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {

  .hero__content {
    max-width: 1320px;
  }

  .container {
    max-width: 1320px;
  }
}

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */
@media print {

  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  .site-header,
  .site-footer,
  .menu-toggle,
  .mobile-nav,
  .mobile-nav-overlay,
  .chatbot-trigger,
  .hero__arrows,
  .hero__indicators,
  .partners-slider__nav,
  .btn,
  .lang-switcher,
  .onglets-nav,
  .formations-toolbar,
  .formations-pagination,
  .formation-sidebar__actions {
    display: none !important;
  }

  .site-header + main,
  .site-header + .site-content {
    padding-top: 0 !important;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  .section {
    padding: 20pt 0;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  .formation-single__layout {
    grid-template-columns: 1fr !important;
  }

  .formation-sidebar {
    page-break-before: always;
  }

  .formation-sidebar__card {
    position: static !important;
    box-shadow: none !important;
    border: 1px solid #ccc;
  }

  img {
    max-width: 100% !important;
  }

  h2, h3, h4 {
    page-break-after: avoid;
  }

  .card,
  .formation-card,
  .funding-block {
    page-break-inside: avoid;
  }
}

/* --------------------------------------------------------------------------
   Dark Mode (respects OS preference)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {

  /* Only activate if a .dark-mode class is present on <html>
     This ensures dark mode is opt-in via a toggle, not forced. */
  html.dark-mode {
    --color-white:      #1A1F2E;
    --color-grey-light: #242A3A;
    --color-text:       #E0E4EC;
    --color-text-light: #A0AAB8;
    --color-border:     #3A4256;
    --color-shadow:     rgba(0, 0, 0, 0.3);
  }

  html.dark-mode .site-header {
    background-color: #1A1F2E;
  }

  html.dark-mode .site-header.scrolled {
    background-color: rgba(26, 31, 46, 0.98);
  }

  html.dark-mode .card,
  html.dark-mode .formation-card,
  html.dark-mode .funding-block,
  html.dark-mode .faq-item__trigger,
  html.dark-mode .testimonial-card,
  html.dark-mode .catalog-card,
  html.dark-mode .simulator-card {
    background: #242A3A;
  }

  html.dark-mode .menu-toggle__bar {
    background: var(--color-text);
  }
}

/* --------------------------------------------------------------------------
   High Contrast Mode (accessibility)
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {

  .btn {
    border: 2px solid ButtonText;
  }

  .site-nav__link--active::after,
  .onglets-nav__link--active {
    border-color: Highlight;
  }

  .hero__indicator.is-active {
    background: Highlight;
  }
}

/* --------------------------------------------------------------------------
   Landscape phones
   -------------------------------------------------------------------------- */
@media (max-width: 767px) and (orientation: landscape) {

  .hero {
    min-height: 400px;
  }

  .hero__content {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .profile-hero {
    padding: var(--space-xl) 0 var(--space-lg);
  }

  .financer-hero {
    padding: var(--space-xl) 0 var(--space-lg);
  }
}