/* ==========================================================================
   SELANCE — responsive.css : adaptations tablette et mobile (conçues, pas simplement réduites)
   Points de rupture : 1100 / 900 / 640
   ========================================================================== */

/* ---------------------------------------------------------------- ≤ 1100px : navigation resserrée */
@media (max-width: 1100px) {
    .primary-nav a { padding-inline: .55rem; font-size: .85rem; }
    .site-header__inner { gap: 1rem; }
    .quick-access { grid-template-columns: repeat(3, 1fr); }
    .quick-access li:nth-child(n+4) .quick-card { border-top: 1px solid var(--line); }
    .quick-access li:nth-child(4) .quick-card { border-left: 0; }
    .stage-grid { grid-template-columns: repeat(3, 1fr); }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- ≤ 900px : tablette — menu hamburger */
@media (max-width: 900px) {
    :root { --header-h: 68px; }
    .site-logo__full { width: 132px; }
    .nav-toggle { display: inline-grid; }
    .site-header__don { display: none; }

    .js .primary-nav {
        position: absolute; left: 0; right: 0; top: 100%; margin: 0; background: #fff; border-top: 1px solid var(--line);
        box-shadow: var(--shadow-lg); max-height: calc(100vh - var(--header-h)); overflow-y: auto; padding: .75rem var(--gutter) 1.5rem; display: none;
    }
    .js .primary-nav.is-open { display: block; animation: fade-down .2s var(--ease); }
    .js .primary-nav__list { flex-direction: column; align-items: stretch; gap: .15rem; }
    .js .primary-nav a { display: flex; min-height: 52px; padding: .75rem 1rem; font-size: 1.05rem; border-radius: var(--radius-sm); }
    .js .primary-nav a.is-active { background: var(--coral-soft); color: #A8243A; }
    .js .primary-nav a.is-active::after { display: none; }
    .js .primary-nav::after { content: ""; display: block; }
    /* Sans JavaScript : la navigation passe sur une 2e ligne */
    html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: .5rem; }
    html:not(.js) .primary-nav { order: 3; width: 100%; margin: 0; }
    html:not(.js) .primary-nav__list { flex-wrap: wrap; }

    .hero__words { display: none; }
    .spotlight { grid-template-columns: 1fr; }
    .community__inner { grid-template-columns: 1fr; gap: 2rem; }
    .stats__list { grid-template-columns: repeat(2, 1fr); }
    .stages__head { flex-direction: column; align-items: flex-start; }
    .hand-note { text-align: left; }
    .hand-note::after { left: 0; right: auto; }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }

    /* Navigation latérale → liste horizontale défilante */
    .layout { grid-template-columns: 1fr; gap: 1.25rem; }
    .layout__aside { position: static; }
    .side-nav { padding: .75rem; }
    .side-nav__title { display: none; }
    .side-nav ul { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
    .side-nav li { flex: none; }
    .side-nav a { white-space: nowrap; border: 1px solid var(--line); border-radius: var(--radius-pill); }
    .side-nav a .icon { display: none; }
    .lead-article { grid-template-columns: 1fr; }
    .temo__head { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* ---------------------------------------------------------------- ≤ 640px : mobile */
@media (max-width: 640px) {
    .btn { white-space: normal; }
    body { font-size: 1.0625rem; }
    .site-logo__full { display: none; }
    .site-logo__compact { display: block; width: 44px; height: 44px; }
    .site-logo::after { content: "Selance"; font-family: var(--font-title); font-weight: 700; font-size: 1.35rem; color: var(--selance-teal); margin-left: .5rem; letter-spacing: -.02em; }
    .site-header__actions { gap: .15rem; }

    /* Hero : image au-dessus, texte sur fond clair en dessous (jamais de texte sur une photo chargée) */
    .hero { background: var(--selance-light); }
    .hero__media { position: relative; inset: auto; height: 62vw; min-height: 240px; max-height: 360px; }
    .hero__media img { object-position: 78% center; }
    .hero__media::after {
        background:
            linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 18%),
            linear-gradient(0deg, var(--selance-light) 0%, rgba(255, 255, 255, 0) 30%),
            linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 14%),
            linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 14%),
            rgba(255, 255, 255, .2);
    }
    .hero__inner { display: block; min-height: 0; padding-block: 1.5rem 5.5rem; }
    .hero__title { font-size: clamp(2rem, 8.5vw, 2.5rem); }
    .hero__text { font-size: 1.0625rem; }
    .hero__actions { flex-direction: column; }
    .hero__actions .btn { width: 100%; }

    .quick-access-wrap { margin-top: -3.75rem; }
    .quick-access { grid-template-columns: repeat(2, 1fr); }
    .quick-access li .quick-card { border: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
    .quick-access li:nth-child(-n+2) .quick-card { border-top: 0; }
    .quick-access li:nth-child(odd) .quick-card { border-left: 0; }
    .quick-card { padding: 1.25rem .75rem; }
    .quick-card__icon .icon { width: 2rem; height: 2rem; }

    .stats__list { gap: 1.25rem 1rem; }
    .stat { flex-direction: column; align-items: flex-start; gap: .4rem; }
    .stat__icon { width: 44px; height: 44px; }
    .stat__icon .icon { width: 2rem; height: 2rem; }

    .feature-card { min-height: 500px; }
    .feature-card::before { background: linear-gradient(0deg, rgba(7, 59, 78, .95) 0%, rgba(7, 59, 78, .7) 55%, rgba(7, 59, 78, .15) 100%); }
    .feature-card__body .btn { width: 100%; }
    .side-article { grid-template-columns: 1fr; }
    .side-article__media { order: -1; height: 180px; min-height: 0; }

    .stage-grid { grid-template-columns: 1fr; gap: 1rem; }
    .stage-card { flex-direction: row; }
    .stage-card__media { flex: none; width: 38%; aspect-ratio: auto; }
    .stage-card__body { padding: 1rem; }

    .community { padding-block: 2.75rem; }
    .carousel__slide { flex-basis: 86%; }

    .cta-band__inner { flex-direction: column; align-items: flex-start; }
    .cta-band__actions { width: 100%; flex-direction: column; }
    .cta-band__actions .btn { width: 100%; }
    .cta-band::before { background: linear-gradient(0deg, rgba(7, 59, 78, .92), rgba(7, 59, 78, .7)); }

    .page-hero::before { background: linear-gradient(0deg, rgba(6, 52, 74, .94), rgba(7, 59, 78, .72)); }
    .page-hero__inner { min-height: 220px; }

    .grid--2, .grid--3 { grid-template-columns: 1fr; }
    .grid--cards { grid-template-columns: 1fr; }
    .card--result { flex-direction: column; }
    .card--result .card__media { width: 100%; aspect-ratio: 16 / 9; }
    .search-form { flex-direction: column; }
    .search-form .btn, .newsletter .btn { width: 100%; }
    .newsletter { flex-direction: column; }
    .video-card { aspect-ratio: 4 / 3; }
    .video-card__play { width: 64px; height: 64px; }
    .toolbar .field { width: 100%; }

    .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.5rem 1.5rem; }
    .site-footer__bottom .container { flex-direction: column; align-items: flex-start; }
    .temo__portrait { width: 160px; }
}

/* Impression : contenu éditorial seulement */
@media print {
    .site-header, .site-footer, .to-top, .cta-band, .layout__aside, .newsletter, .breadcrumbs { display: none !important; }
    body { background: #fff; font-size: 12pt; }
    .layout { display: block; }
    a { color: inherit; }
}
