/* ============================================================
   LE COIN DES TROUVAILLES. MDG — responsive.css
   Approche mobile first : la base (style.css) couvre les petits
   écrans, ce fichier enrichit la mise en page par paliers.
   Paliers : 480 / 768 / 1024 / 1280 / 1440 (+ tablettes 1024).
   ============================================================ */

/* ---------- ≥ 480px : grands mobiles ---------- */
@media (min-width: 480px) {
  .hero-frame { width: min(78vw, 440px); }
  .contact-form { padding: 2.4rem 2rem; }
  .cta-actions { gap: 1rem; }
}

/* ---------- ≥ 640px : mobiles larges / petites tablettes ---------- */
@media (min-width: 640px) {
  .masonry { columns: 2; }
  .intro-points { grid-template-columns: repeat(3, 1fr); }
  .actus-grid { grid-template-columns: repeat(2, 1fr); }
  .activites-grid { grid-template-columns: repeat(2, 1fr); }

  /* Glow.mee21 */
  .glow-onglerie { grid-template-columns: repeat(2, 1fr); }
  .glow-tile.is-lg { grid-row: span 2; }
  .glow-tile.is-lg img { height: 100%; min-height: 480px; }
  .glow-tile:not(.is-lg) img { height: 230px; }
  .glow-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ≥ 768px : tablettes ---------- */
@media (min-width: 768px) {
  .section { padding-block: 6rem; }

  .hero {
    padding-top: calc(var(--header-h) + 4.5rem);
    padding-bottom: 5rem;
  }
  .hero-chip { right: -22px; }

  .bento-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .bento-media img { height: 260px; }

  .univers-grid { grid-template-columns: repeat(2, 1fr); }
  .univers-card.is-main { grid-column: span 2; }
  .univers-card.is-main img { height: 320px; }
  /* Glow.mee21 : dernière carte pleine largeur pour éviter une rangée orpheline */
  .univers-card.is-fresh { grid-column: span 2; }

  .fb-grid { grid-template-columns: repeat(2, 1fr); }
  .fb-card.is-main { grid-column: span 2; }

  .contact-inner { align-items: start; }
}

/* ---------- ≥ 1024px : desktop / tablettes paysage ---------- */
@media (min-width: 1024px) {
  :root { --container: 1200px; }

  /* Header : navigation complète, burger masqué */
  .main-nav { display: block; }
  .main-nav.is-open {
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    animation: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .main-nav.is-open ul { flex-direction: row; gap: 1.9rem; }
  .main-nav.is-open a {
    font-family: var(--font-body);
    font-size: 0.92rem;
    padding-block: 0.35rem;
  }
  .nav-toggle { display: none; }
  .header-cta { display: inline-flex; }

  /* Hero : composition asymétrique texte gauche / image droite */
  .hero-inner {
    grid-template-columns: 1.08fr 0.92fr;
    gap: 4rem;
  }
  .hero-frame { width: min(100%, 460px); }

  /* Introduction */
  .intro-points { gap: 1.5rem; }

  /* À propos : image gauche / texte droite */
  .about-inner {
    grid-template-columns: 1.05fr 1fr;
    gap: 4rem;
    align-items: center;
  }

  /* Bento éditorial 6 colonnes */
  .bento-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: dense;
    gap: 1.4rem;
  }
  .bento-card--lg { grid-column: span 4; grid-row: span 2; }
  .bento-card--sm { grid-column: span 2; }
  .bento-card--md { grid-column: span 3; }
  .bento-card--lg .bento-media,
  .bento-card--lg .bento-media img { height: 100%; min-height: 340px; }
  .bento-card--sm .bento-media img { height: 190px; }
  .bento-card--md .bento-media img { height: 220px; }

  /* Univers : carte principale mise en avant (colonne gauche, 2 rangées) */
  .univers-grid {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.6rem;
    align-items: stretch;
  }
  .univers-card { height: 100%; }
  .univers-card.is-main {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .univers-card.is-main img { flex: 1; height: 100%; min-height: 380px; }
  /* Glow.mee21 : la carte revient dans la colonne droite avec les autres univers */
  .univers-card.is-fresh { grid-column: auto; }

  /* Activités : 4 colonnes */
  .activites-grid { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }

  /* Galerie : 3 colonnes */
  .masonry { columns: 3; }

  /* Actualités : 3 colonnes */
  .actus-grid { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }

  /* Facebook : carte principale + deux univers */
  .fb-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 1.6rem; }
  .fb-card.is-main { grid-column: span 1; }

  /* Contact : deux colonnes */
  .contact-inner { grid-template-columns: 1fr 1.1fr; gap: 4rem; }

  /* Glow.mee21 : hero deux colonnes, onglerie asymétrique 3 colonnes */
  .glow-hero { grid-template-columns: 1.08fr 0.92fr; gap: 4rem; padding: 4rem; }
  .glow-hero-visual .hero-frame { width: min(100%, 420px); }
  .glow-onglerie { grid-template-columns: repeat(3, 1fr); }
  .glow-tile.is-lg { grid-column: span 2; }
  .glow-cards { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
  .glow-videos { grid-template-columns: repeat(3, 1fr); }
  .glow-tiktok { padding: 4rem; }

  /* Footer : quatre colonnes */
  .footer-grid { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 3rem; }
}

/* ---------- ≥ 1280px : grands écrans ---------- */
@media (min-width: 1280px) {
  :root { --container: 1220px; }

  .section { padding-block: 7rem; }

  .hero {
    padding-top: calc(var(--header-h) + 6rem);
    padding-bottom: 6.5rem;
  }
  .hero-inner { gap: 5.5rem; }
  .hero-frame { width: min(100%, 480px); }

  .about-inner { gap: 5.5rem; }

  /* Glow.mee21 */
  .glow-hero { gap: 5rem; padding: 4.5rem; }
  .glow-block { margin-top: 5.5rem; }
  .glow-tiktok { margin-top: 5.5rem; }

  .bento-card--sm .bento-media img { height: 210px; }
  .bento-card--md .bento-media img { height: 240px; }

  .immersive { min-height: 78vh; }
  .immersive-content { padding-block: 7rem; }

  .contact-inner { gap: 5.5rem; }
}

/* ---------- ≥ 1440px : très grands écrans ---------- */
@media (min-width: 1440px) {
  :root { --container: 1320px; }

  .hero-title { font-size: 5rem; }
  .hero-frame { width: min(100%, 520px); }

  .masonry { column-gap: 1.4rem; }
  .masonry-item { margin-bottom: 1.4rem; }
}

/* ---------- Petits écrans : garde-fous ---------- */
@media (max-width: 479px) {
  .brand-text { font-size: 0.92rem; }
  .hero-ctas .btn { width: 100%; }
  .cta-actions .btn { width: 100%; }
  .hero-badge { width: 52px; height: 52px; top: -16px; left: -8px; }
  .hero-badge .icon { width: 20px; height: 20px; }
  .hero-chip { right: 8px; bottom: -18px; }
}