/* =========================================================
BLUUPI — BLOG MOBILE
Fichier : /blog/css/blog.css
========================================================= */

/* =========================================================

1. VARIABLES
   ========================================================= */

:root {
--primary: #0E3E61;
--blue: #127194;
--light-blue: #3CA6D6;
--cyan: #5CD6F4;

--bg: #f5f9fc;
--page-bg: #eef3f7;
--card: #ffffff;

--text: #102f46;
--muted: #6d7d8b;
--line: #e5edf3;

--shadow: 0 18px 40px rgba(14, 62, 97, 0.12);
--soft-shadow: 0 10px 24px rgba(14, 62, 97, 0.08);
}

/* =========================================================
2. BASE MOBILE
========================================================= */

* {
  box-sizing: border-box;
  }

html {
width: 100%;
min-height: 100%;
background: var(--page-bg);
}

body {
margin: 0;
width: 100%;
min-height: 100%;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: var(--page-bg);
color: var(--text);
}

a {
color: inherit;
text-decoration: none;
}

img {
max-width: 100%;
display: block;
}

/* =========================================================
3. SÉCURITÉ MOBILE
========================================================= */

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

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

/* =========================================================
4. PAGE BLOG MOBILE
========================================================= */

.blog-page {
width: 100%;
max-width: 460px;
min-height: 100vh;
margin: 0 auto;
padding: 28px 18px 120px;
background: var(--bg);
}

/* =========================================================
5. HERO BLOG
========================================================= */

.blog-hero {
position: relative;
overflow: hidden;
margin-bottom: 32px;
padding: 34px 22px;
border-radius: 34px;
background:
radial-gradient(circle at top left, rgba(255, 210, 63, 0.28), transparent 38%),
linear-gradient(135deg, #ffffff 0%, #f3fbff 52%, #dff7ff 100%);
border: 1px solid rgba(14, 62, 97, 0.06);
box-shadow: var(--shadow);
}

.blog-kicker {
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 16px;
padding: 8px 13px;
border-radius: 999px;
background: rgba(18, 113, 148, 0.1);
color: var(--blue);
font-size: 13px;
font-weight: 900;
}

.blog-kicker::before {
content: "📰";
}

.blog-hero h1 {
margin: 0 0 14px;
color: var(--primary);
font-size: 37px;
line-height: 1.04;
font-weight: 900;
letter-spacing: -0.05em;
}

.blog-hero p {
margin: 0;
color: #526a7d;
font-size: 17px;
line-height: 1.55;
font-weight: 600;
}

.blog-hero-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 24px;
}

.btn-primary,
.btn-secondary {
display: flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 0 20px;
border-radius: 20px;
font-size: 16px;
font-weight: 900;
}

.btn-primary {
background: var(--primary);
color: #ffffff;
box-shadow: 0 14px 28px rgba(14, 62, 97, 0.18);
}

.btn-secondary {
background: #ffffff;
color: var(--primary);
border: 1px solid var(--line);
box-shadow: var(--soft-shadow);
}

/* =========================================================
6. SECTION ARTICLES
========================================================= */

.blog-section {
width: 100%;
}

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

.blog-section-head h2 {
margin: 0 0 8px;
color: var(--primary);
font-size: 31px;
line-height: 1.1;
font-weight: 900;
letter-spacing: -0.04em;
}

.blog-section-head p {
margin: 0;
color: var(--muted);
font-size: 16px;
line-height: 1.5;
font-weight: 600;
}

/* =========================================================
7. GRILLE ARTICLES MOBILE
========================================================= */

.blog-grid {
display: flex;
flex-direction: column;
gap: 24px;
}

/* =========================================================
8. CARTE ARTICLE
========================================================= */

.blog-card {
overflow: hidden;
background: #ffffff;
border: 1px solid var(--line);
border-radius: 30px;
box-shadow: var(--shadow);
}

.blog-card-media {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #eaf2f7;
}

.blog-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
}

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

.blog-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}

.blog-tags span {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 11px;
border-radius: 999px;
background: #f0f6fa;
color: #607080;
font-size: 12px;
font-weight: 900;
}

.blog-tags span:first-child {
background: rgba(18, 113, 148, 0.1);
color: var(--blue);
}

.blog-card h3 {
margin: 0 0 12px;
color: var(--primary);
font-size: 25px;
line-height: 1.12;
font-weight: 900;
letter-spacing: -0.04em;
}

.blog-card p {
margin: 0 0 18px;
color: #40576a;
font-size: 16px;
line-height: 1.5;
}

.read-more {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 17px;
border-radius: 999px;
background: var(--primary);
color: #ffffff;
font-size: 15px;
font-weight: 900;
}

/* =========================================================
9. NAVIGATION MOBILE
========================================================= */

.bottom-nav {
position: fixed;
left: 50%;
bottom: 0;
z-index: 35;
grid-template-columns: repeat(5, 1fr);
width: min(100%, 460px);
height: 82px;
padding-bottom: env(safe-area-inset-bottom);
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.96);
border-top: 1px solid var(--line);
backdrop-filter: blur(18px);
}

.bottom-nav a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
color: #8a98a6;
font-size: 12px;
font-weight: 650;
}

.bottom-nav i {
width: 25px;
height: 25px;
stroke-width: 2;
}

.bottom-nav small {
font-size: 12px;
font-weight: 650;
}

.bottom-nav a.active {
color: var(--blue);
}

/* =========================================================
10. PETITS MOBILES
========================================================= */

@media (max-width: 380px) {
.blog-page {
padding-left: 14px;
padding-right: 14px;
}

.blog-hero {
padding: 30px 18px;
border-radius: 30px;
}

.blog-hero h1 {
font-size: 32px;
}

.blog-card h3 {
font-size: 23px;
}
}
.blog-back-link {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  color: #127194;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}