/* =========================================================
   Espace Moniteur — TABLETTE / DESKTOP (desktop.css)
   Comme l’accueil :
   - Mobile  : style.css (< 768 px)
   - ≥ 768 px : structure desktop / tablette
   - 768–1023 px : tablette adaptée (hero 1 colonne)
   - ≥ 1024 px : hero 2 colonnes
   Conteneurs : max-width 1504px ; width calc(100% - 96px) ; pad 30px
   FTP : /public_html/codecodec/espace-moniteur/desktop.css
   ========================================================= */

@media (min-width: 768px) {

    .moniteur-shell .codec-mobile-only {
        display: none !important;
    }

    .moniteur-shell .codec-desktop-only {
        display: flex !important;
    }

    .app-container.moniteur-shell {
        max-width: 100%;
        margin: 0;
        padding: 0 0 60px 0;
        display: block;
        --codec-rail-pad-x: 30px;
    }

    .moniteur-shell .app-header {
        position: relative;
        margin: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border-bottom: none;
    }

    .moniteur-shell .header-tagline-row {
        font-size: 0.82rem;
        padding: 8px 12px;
    }

    .moniteur-shell .app-header.codec-desktop-only {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
    }

    .moniteur-shell .app-header.codec-desktop-only .header-main-row {
        padding: 16px 48px;
        gap: 24px;
        max-width: 1504px;
        width: calc(100% - 96px);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .moniteur-shell .app-header.codec-desktop-only .brand-logo-img {
        height: calc(68px * 0.95) !important;
        width: auto !important;
    }

    .moniteur-shell .app-header.codec-desktop-only .brand-text {
        font-size: calc(2.15rem * 0.95);
    }

    /* Conteneur contenu — mêmes rails que l’accueil */
    .moniteur-page .moniteur-inner {
        max-width: 1504px !important;
        width: calc(100% - 96px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: var(--codec-rail-pad-x);
        padding-right: var(--codec-rail-pad-x);
        box-sizing: border-box;
    }

    .moniteur-page .moniteur-hero {
        padding: 28px 0 12px;
    }

    /* Tablette / début desktop : hero 1 colonne (comme accueil 768–1023) */
    .moniteur-page .moniteur-hero-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: start;
    }

    .moniteur-page .moniteur-hero-title {
        font-size: clamp(2.2rem, 4vw, 3.2rem);
        margin-bottom: 16px;
    }

    .moniteur-page .moniteur-hero-text {
        font-size: 1.05rem;
        margin-bottom: 20px;
        max-width: 42rem;
    }

    /* Placeholders seulement */
    .moniteur-page .moniteur-visual-placeholder {
        aspect-ratio: 4 / 3;
        max-height: 320px;
    }

    .moniteur-page .moniteur-visual-frame {
        aspect-ratio: 4 / 3;
        max-height: 380px;
        width: 100%;
    }

    .moniteur-page .moniteur-tools {
        padding: 28px 0 12px;
    }

    .moniteur-page .moniteur-section-title {
        font-size: clamp(1.5rem, 2.5vw, 1.9rem);
    }

    .moniteur-page .moniteur-section-intro {
        margin-bottom: 24px;
        font-size: 1.02rem;
        max-width: 46rem;
    }

    /* Grille outils 2 colonnes dès 768 (comme dashboard accueil) */
    .moniteur-page .moniteur-tools-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        align-items: start;
    }

    .moniteur-page .moniteur-tool-card {
        padding: 20px;
        height: auto;
        align-self: start;
    }

    /* Double Chrono : carte pleine largeur, layout horizontal */
    .moniteur-page .moniteur-tool-card.is-featured {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(220px, 40%) minmax(0, 1fr);
        gap: 22px;
        align-items: start;
    }

    .moniteur-page .moniteur-tool-card.is-featured .moniteur-card-visual-placeholder {
        aspect-ratio: 4 / 3;
        max-height: 280px;
        margin-bottom: 0;
    }

    .moniteur-page .moniteur-tool-card.is-featured .moniteur-card-visual-frame {
        aspect-ratio: 4 / 3;
        width: 100%;
        max-height: 320px;
        margin-bottom: 0;
        align-self: start;
    }

    .moniteur-page .moniteur-tool-card:not(.is-featured) .moniteur-card-visual-placeholder {
        aspect-ratio: 16 / 9;
        max-height: 180px;
        margin-bottom: 14px;
    }

    .moniteur-page .moniteur-tool-card:not(.is-featured) .moniteur-card-visual-frame {
        aspect-ratio: 3 / 2;
        width: 100%;
        max-height: 220px;
        margin-bottom: 14px;
    }

    .moniteur-page .moniteur-btn {
        width: auto;
        align-self: flex-start;
        padding-left: 22px;
        padding-right: 22px;
        min-height: 48px;
    }

    .moniteur-page .moniteur-coming-panel .moniteur-btn {
        margin-left: auto;
        margin-right: auto;
    }

    .moniteur-page .moniteur-why {
        padding: 32px 0 12px;
    }

    .moniteur-page .moniteur-why-panel {
        padding: 24px 28px;
    }

    .moniteur-page .moniteur-why-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .moniteur-page .moniteur-coming {
        padding: 28px 0 40px;
    }

    .moniteur-page .moniteur-coming-panel {
        padding: 28px 32px;
    }

    .moniteur-shell .footer-features-bar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 30px;
    }

    .moniteur-shell .app-footer {
        max-width: 1504px;
        width: calc(100% - 96px);
        margin-left: auto;
        margin-right: auto;
        padding: 28px 30px 16px;
        box-sizing: border-box;
    }
}

/* --- 768–1023 px : tablette adaptée (même logique que l’accueil) --- */
@media (min-width: 768px) and (max-width: 1023px) {

    .moniteur-shell .app-header.codec-desktop-only .brand-logo-img {
        height: calc(68px * 0.95 * 0.9) !important;
    }

    .moniteur-shell .app-header.codec-desktop-only .brand-text {
        font-size: calc(2.15rem * 0.95 * 0.9);
    }

    .moniteur-page .moniteur-hero-title {
        font-size: clamp(2rem, 3.8vw, 2.8rem);
    }

    /* Hero visual : plus compact pour remonter la section outils */
    .moniteur-page .moniteur-visual-placeholder {
        width: 100%;
        max-width: 580px;
        max-height: 280px;
        aspect-ratio: 4 / 3;
        justify-self: start;
        align-self: start;
    }

    .moniteur-page .moniteur-visual-frame {
        width: 100%;
        max-width: 580px;
        max-height: 280px;
        aspect-ratio: 4 / 3;
        justify-self: start;
        align-self: start;
    }

    .moniteur-page .moniteur-tool-card.is-featured {
        grid-template-columns: minmax(200px, 38%) minmax(0, 1fr);
        gap: 18px;
    }

    .moniteur-page .moniteur-tool-card.is-featured .moniteur-card-visual-frame {
        max-height: 280px;
        aspect-ratio: 4 / 3;
    }

    .moniteur-page .moniteur-tools-grid {
        gap: 18px;
    }

    .moniteur-page .moniteur-why-grid {
        gap: 12px;
    }

    .moniteur-page .moniteur-why-item h3 {
        font-size: 0.98rem;
    }

    .moniteur-page .moniteur-why-item p {
        font-size: 0.88rem;
    }
}

/* --- ≥ 1024 px : hero 2 colonnes (comme l’accueil) --- */
@media (min-width: 1024px) {

    .moniteur-page .moniteur-hero-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
        gap: 48px;
        align-items: center;
    }

    .moniteur-page .moniteur-hero-title {
        font-size: clamp(2.6rem, 3.5vw, 3.4rem);
        max-width: 16ch;
    }

    .moniteur-page .moniteur-visual-frame {
        max-width: none;
        max-height: 420px;
        width: 100%;
        aspect-ratio: 4 / 3;
        justify-self: stretch;
    }

    .moniteur-page .moniteur-tool-card.is-featured {
        grid-template-columns: minmax(240px, 42%) minmax(0, 1fr);
        gap: 28px;
    }

    .moniteur-page .moniteur-tool-card.is-featured .moniteur-card-visual-frame {
        max-height: 360px;
        width: 100%;
        aspect-ratio: 4 / 3;
    }

    .moniteur-page .moniteur-tools-grid {
        gap: 28px;
    }

    .moniteur-page .moniteur-tool-card {
        padding: 22px;
    }
}