/* =========================================================
BLUUPI — BLOG TABLET
Fichier : /blog/css/tablet/blog.css
iPad / tablette
768px → 1024px
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

/* =========================================================
SÉCURITÉ TABLETTE = VERSION APP MOBILE
========================================================= */

.desktop-header,
.desktop-footer,
.desktop-bluupi,
.hero-visual {
display: none !important;
}

.bottom-nav {
display: grid !important;
}

/* =========================================================
PAGE BLOG TABLETTE
========================================================= */

.blog-page {
max-width: 920px;
margin: 0 auto;
padding: 38px 34px 120px;
}

/* =========================================================
HERO TABLETTE
========================================================= */

.blog-hero {
margin-bottom: 42px;
padding: 48px 42px;
border-radius: 40px;
}

.blog-kicker {
font-size: 15px;
padding: 10px 16px;
margin-bottom: 20px;
}

.blog-hero h1 {
max-width: 760px;
font-size: 56px;
line-height: 1.02;
}

.blog-hero p {
max-width: 760px;
font-size: 21px;
}

.blog-hero-actions {
max-width: 620px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 30px;
}

.btn-primary,
.btn-secondary {
min-height: 64px;
border-radius: 24px;
font-size: 18px;
}

/* =========================================================
SECTION ARTICLES
========================================================= */

.blog-section-head {
margin-bottom: 26px;
}

.blog-section-head h2 {
font-size: 42px;
}

.blog-section-head p {
max-width: 720px;
font-size: 20px;
}

/* =========================================================
GRILLE ARTICLES TABLETTE
========================================================= */

.blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}

.blog-card {
height: 100%;
border-radius: 30px;
}

.blog-card-content {
padding: 22px;
}

.blog-card h3 {
font-size: 27px;
}

.blog-card p {
font-size: 17px;
}

.read-more {
min-height: 50px;
font-size: 16px;
}

/* =========================================================
NAV BASSE TABLETTE
========================================================= */

.bottom-nav {
width: 100%;
max-width: 920px;
height: 86px;
border-radius: 26px 26px 0 0;
}

.bottom-nav a {
font-size: 13px;
}

.bottom-nav i {
width: 28px;
height: 28px;
}
}