/* =========================================================================
   Idées de Génie — responsive.css (chargé sur toutes les pages)
   ========================================================================= */

/* ---------- Tablette ---------- */
@media (max-width:991px){
  .hero__grid{grid-template-columns:1fr}
  .hero__side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .grid-art,.grid-art--4{grid-template-columns:repeat(2,1fr)}
  .picks{grid-template-columns:1fr}
  .news__inner{grid-template-columns:1fr;gap:1.4rem}
  .foot__grid{grid-template-columns:1fr 1fr}
  .mosaic{column-count:3}
  .hstrip{grid-template-columns:1fr 1fr}
}

/* ---------- Nav mobile (burger) ---------- */
@media (max-width:840px){
  .burger{display:block}
  .ig-nav{position:fixed;inset:0 0 0 auto;width:min(82vw,340px);flex-direction:column;align-items:flex-start;
    gap:.4rem;background:var(--papier);padding:5rem 1.6rem 2rem;margin:0;
    transform:translateX(100%);transition:transform .3s var(--ease);box-shadow:var(--shadow);z-index:1200}
  .ig-nav.is-open{transform:none}
  .ig-nav a{font-size:1.15rem;font-family:var(--serif);font-weight:600;padding:.6rem 0;width:100%}
  .ig-nav a::after{display:none}
  .ig-nav__cta{margin:1rem 0 0}
  /* Méga-menu : déployé en liste statique dans le panneau off-canvas */
  .ig-nav{overflow-y:auto}
  .has-mega{display:block;width:100%}
  .mega__btn{width:100%;justify-content:space-between;font-family:var(--serif);font-weight:600;font-size:1.05rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2);padding:.4rem 0 .2rem;pointer-events:none}
  .mega__btn svg{display:none}
  .mega__panel{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:.2rem 0 .8rem;background:transparent}
  .mega__inner{padding-inline:0;max-width:none}
  .mega__head{display:none}
  .mega__grid{grid-template-columns:1fr;gap:0}
  .mega__link{padding:.45rem .3rem}
  .mega__thumb{width:38px;height:38px}
  .mega__name{font-size:1.05rem}
  body.nav-lock{overflow:hidden}
  /* Backdrop SOUS le masthead (z-index 1000) : sinon il recouvre le panneau nav,
     piégé dans le contexte d'empilement du masthead. */
  .nav-backdrop{position:fixed;inset:0;background:rgba(20,21,25,.45);opacity:0;visibility:hidden;transition:.3s;z-index:900}
  .nav-backdrop.is-open{opacity:1;visibility:visible}
}

/* ---------- Mobile ---------- */
@media (max-width:600px){
  body{font-size:16px}
  .hero__side{grid-template-columns:1fr}
  .grid-art,.grid-art--4{grid-template-columns:1fr}
  .lead__title{font-size:clamp(1.4rem,6.4vw,1.85rem)}
  .mini__title{font-size:.98rem}
  .foot__grid{grid-template-columns:1fr 1fr}
  .sec-head{flex-direction:column;align-items:flex-start;gap:.6rem}
  .top-strip .tagline{display:none}
  .brand__name{font-size:1.24rem}
  .news form{flex-direction:column}
  .news input{flex:1 1 auto}
  .mosaic{column-count:2}
  .hstrip{grid-template-columns:1fr}
  .cover__issue{display:none}
  .cover{min-height:clamp(360px,68vh,500px)}
  .cover__frame{inset:10px}
  /* Réduction des polices sur mobile : titres + corps plus compacts et lisibles */
  .cover__title{font-size:clamp(1.55rem,6.6vw,2rem);line-height:1.06}
  .article-hero h1{font-size:clamp(1.5rem,6vw,2rem);line-height:1.12}
  .sec-head h2{font-size:clamp(1.35rem,5.2vw,1.7rem)}
  .prose{font-size:1.02rem;line-height:1.68}
  .prose h2{font-size:1.3rem;margin:1.9rem 0 .55rem}
  .prose h3{font-size:1.1rem}
  .news h2{font-size:1.45rem}
  .edito__quote{font-size:1.28rem}
  .mtile__name{font-size:1.08rem}
  .card-art__title{font-size:1.1rem}
  .article-hero__lede{font-size:1.02rem}
  .lead__excerpt,.article-hero .accroche,.art-hero__excerpt{font-size:1rem}
}

@media (max-width:400px){
  .foot__grid{grid-template-columns:1fr}
  .mosaic{column-count:1}
  .cover__title{font-size:clamp(1.4rem,7vw,1.75rem)}
  .article-hero h1{font-size:clamp(1.35rem,6.6vw,1.75rem)}
  .sec-head h2{font-size:1.3rem}
  .brand__name{font-size:1.16rem}
}