/* Prevent the header search widget from pushing the page wider than the viewport
   on large screens (Crafto's box-layout width calc doesn't account for it). */
html, body { max-width: 100%; overflow-x: hidden; }

/* Tighten nav-link spacing — with 9 items (Accueil + 7 catégories + À propos), Crafto's
   default 20px side padding per link overflows well before common desktop widths. */
.navbar.header-light .navbar-nav .nav-link { padding: 10px 8px !important; font-size: 13px !important; letter-spacing: 0; }
@media (min-width: 1200px) { .navbar.header-light .navbar-nav .nav-link { padding: 10px 11px !important; } }

/* ==== Unified type scale (v2 — tightened further for a higher-end editorial feel:
   smaller, quieter type reads more premium than large display sizes on every card). ====
   Crafto's default headings (h1 70px, h2 55px, h3 45px) are oversized for editorial
   content — centralize a magazine-appropriate scale here instead of per-file values. */
:root {
  --fs-h1: 32px;
  --fs-h1-sm: 24px;
  --fs-h2: 24px;
  --fs-h2-sm: 19px;
  --fs-h3: 18px;
  --fs-h3-sm: 16px;
  --fs-card-title: 15px;
  --fs-body: 15px;
  --fs-excerpt: 13px;
  --fs-card-meta: 11px;
}
h1.alt-font { font-size: var(--fs-h1); line-height: 1.2; }
h2.alt-font, .article-body h2, .search-form-box h2 { font-size: var(--fs-h2); line-height: 1.3; }
.article-body h3 { font-size: var(--fs-h3); line-height: 1.35; }
.article-body p { font-size: var(--fs-body); line-height: 1.7; }

/* Card preview block (title + excerpt + meta): clamped so the text column never grows
   past the fixed-height thumbnail beside it, with a clear size hierarchy — title
   (strong) > excerpt (still readable) > meta (small, muted, secondary). */
.card-title {
  font-size: var(--fs-card-title) !important;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-content p {
  font-size: var(--fs-excerpt);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta { font-size: var(--fs-card-meta) !important; opacity: 0.55 !important; }
@media (max-width: 767px) {
  h1.alt-font { font-size: var(--fs-h1-sm); }
  h2.alt-font, .article-body h2 { font-size: var(--fs-h2-sm); }
  .article-body h3 { font-size: var(--fs-h3-sm); }
}

/* Homepage hero: 1 dominant story (~60% width) + 2 secondary stories, replacing the
   old 3-equal-slide carousel so the most recent/important story reads as such. */
.hero-tile-img { width: 100%; height: 100%; object-fit: cover; }
.hero-tile-dominant { height: 320px; }
.hero-tile-secondary { height: 156px; }
@media (min-width: 992px) {
  .hero-tile-dominant { height: 560px; }
  .hero-secondary-col { height: 560px; }
  .hero-tile-secondary { height: calc(50% - 4px); }
}

/* Sober hover feedback on article cards — a slight lift + deeper shadow (not also a
   zoom, to keep it calm). Crafto's own .btn/.nav-link hovers (background/color swap
   via var(--base-color)) already cover buttons and nav links, so left untouched. */
.blog-box { transition: transform .25s ease, box-shadow .25s ease; }
.blog-box:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,0.14); }
.hero-tile { transition: box-shadow .25s ease; }
.hero-tile:hover { box-shadow: 0 14px 34px rgba(0,0,0,0.22); }

/* Cap article card thumbnails — Crafto's default blog-image height balloons to match
   the sibling text column, making cards feel oversized once real (longer) copy is dropped in. */
.blog-wrapper .blog-image { height: 260px !important; }

/* Typography/layout tweaks for Ghost-exported article & page content dropped into Crafto */
.article-body img { max-width: 100%; height: auto; border-radius: 4px; margin: 20px 0; }
.article-body h2 { margin-top: 45px; }
.article-body h3 { margin-top: 30px; }
.article-body blockquote { border-left: 3px solid var(--base-color, #333); padding-left: 20px; font-style: italic; margin: 30px 0; }
.article-body figcaption { font-size: 13px; opacity: 0.7; text-align: center; margin-top: -10px; }
.article-body ul, .article-body ol { margin-bottom: 20px; }