/* assets/css/responsive.css — Media queries VeRo */

/* ═══════════════════════════════
   Tablet portrait (< 900px)
   ═══════════════════════════════ */
@media (max-width: 900px) {

    /* Hero → photo en fond, overlay vertical (option C mobile) */
    .hero {
        display: block;
        position: relative;
        background: url('../img/train/TraindesMerveilles (2).webp') 70% center / cover;
    }
    .hero::before {
        content: '';
        position: absolute; inset: 0;
        background: #F39200;
        opacity: .72;
        z-index: 1;
    }
    .hero-l {
        background: transparent;
        width: 100%;
        padding: 40px 28px 36px;
        z-index: 2;
    }
    .hero-r { display: none; }

    /* Éléments VeRo réduits */
    .hero-vero-el.el-marron { width: 120px; top: 20px; right: 20px; }
    .hero-vero-el.el-vert   { width: 100px; bottom: 40px; right: 180px; }
    .hero-vero-el.el-elica  { width: 130px; bottom: 10px; right: 60px; }

    /* Séparateur */
    .sep { padding: 0 28px; }
    .sep .sh-title { font-size: 13px; }

    /* Cards : 2 colonnes */
    .activity-cards { grid-template-columns: repeat(2, 1fr); }

    /* Voyager : 2 colonnes */
    .voyager-section { padding: 36px 32px; }
    .voyager-links { grid-template-columns: repeat(2, 1fr); }

    /* Vallées */
    .vallees { grid-template-columns: 1fr; }
    .vallees-txt { padding: 48px 40px; }
    .vallees-photo { min-height: 220px; }

    /* Actus / Partners */
    .actus, .partners { padding: 36px 32px; }
    .p-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════
   Mobile (< 600px)
   ═══════════════════════════════ */
@media (max-width: 600px) {

    /* Hero */
    .hero-l { padding: 32px 20px 28px; }
    .hero-l h1 { font-size: 32px; }
    .hero-l p  { font-size: 14px; }
    .hero-btns { flex-direction: column; gap: 8px; }
    .hero-btn-w, .hero-btn-g { text-align: center; padding: 12px 20px; }

    /* Éléments VeRo encore réduits */
    .hero-vero-el.el-marron { width: 100px; top: 16px; right: 16px; }
    .hero-vero-el.el-vert   { width: 80px; bottom: 30px; right: 120px; }
    .hero-vero-el.el-elica  { width: 100px; bottom: 8px; right: 30px; }

    /* Séparateur */
    .sep { padding: 0 20px; height: 44px; }

    /* Cards : 1 colonne */
    .activity-cards { grid-template-columns: 1fr; }
    .card-photo { height: 180px; }
    .card-body  { padding: 20px 20px 24px; }

    /* Voyager : 1 colonne */
    .voyager-section { padding: 28px 20px; }
    .voyager-links { grid-template-columns: 1fr; gap: 8px; }
    .voyager-section .sh-title { font-size: 20px; }

    /* Vallées */
    .vallees-txt { padding: 36px 24px; gap: 14px; }
    .vallees-txt .sh-title { font-size: 24px; }
    .vallees-photo { min-height: 180px; }

    /* Actus / Partners */
    .actus, .partners { padding: 28px 20px; }
    .actus .sh-title, .partners .sh-title { font-size: 20px; }
    .p-grid { grid-template-columns: 1fr; }
    .p-strip { padding: 16px 20px; }

    /* Footer */
    .site-footer { flex-direction: column; padding: 20px; text-align: center; }
    .footer-links { flex-direction: column; gap: 8px; align-items: center; }
}

/* ═══════════════════════════════════════════════
   Landscape smartphones + iPad (600-1024px)
   ═══════════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {

    /* Hero → overlay horizontal comme desktop */
    .hero {
        display: block;
        position: relative;
        background: url('../img/train/TraindesMerveilles (2).webp') 70% center / cover;
        min-height: 0;
    }
    .hero::before {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(
            to right,
            #F39200 0%,
            rgba(243,146,0,.93) 35%,
            rgba(243,146,0,.55) 60%,
            transparent 85%
        );
        z-index: 1;
    }
    .hero-l {
        background: transparent;
        width: 65%;
        padding: 32px 40px;
        z-index: 2;
    }
    .hero-l h1 { font-size: 32px; }
    .hero-l p  { font-size: 14px; max-width: 360px; }
    .hero-btns { flex-direction: row; }
    .hero-r { display: none; }

    .hero-vero-el.el-marron { width: 130px; }
    .hero-vero-el.el-vert   { width: 120px; }
    .hero-vero-el.el-elica  { width: 150px; }

    /* Cards : 3 colonnes */
    .activity-cards { grid-template-columns: repeat(3, 1fr); }
    .card-photo { height: 160px; }

    /* Voyager : 4 colonnes */
    .voyager-section { padding: 32px 40px; }
    .voyager-links { grid-template-columns: repeat(4, 1fr); }

    /* Vallées : 2 colonnes */
    .vallees { grid-template-columns: 1fr 1fr; }
    .vallees-txt { padding: 40px 48px; }

    /* Actus / Partners */
    .actus, .partners { padding: 36px 40px; }
    .p-grid { grid-template-columns: repeat(4, 1fr); }
}