/* ====== BREAKPOINTS ======
   Mobile:  <= 640px
   Tablet:  641–1024px
   Desktop: >= 1025px
*/

/* ----- Base container ----- */
main.container {
  max-width: 960px;
  margin: 24px auto;
  padding: 0 16px;
}

/* Desktop large */
@media (min-width: 1200px){
  main.container{
    max-width: 1200px;
  }
}

/* =========================
   MOBILE ( <= 768px )
   ========================= */
@media (max-width: 768px){

  main.container{
    margin:12px auto;
    padding:0 12px;
  }

  .site-header{
    position:relative;
    z-index:20;
  }

  .site-logo img{
    max-width:150px;
  }

  /* On affiche le burger */
.nav-toggle{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;  
  padding:6px;
  border:none;
  background:none;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:#e5e7eb;
  border-radius:2px;
  margin:3px 0;
}
  /* Menu mobile fermé par défaut */
  .site-nav{
    position:absolute;
    top:52px;
    right:0;
    width:220px;

    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:10px;

    background:#020617;
    border-radius:14px;
    border:1px solid #1f2937;
    box-shadow:0 14px 30px rgba(15,23,42,.85);
  }

  /* Menu ouvert */
  .site-nav.is-open{
    display:flex;
  }

  .site-nav .btn.btn-nav,
  .site-nav .cta.cta-nav{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  .logout-form{
    width:100%;
  }
  .logout-form .btn{
    width:100%;
    justify-content:center;
  }

  .footer{
    text-align:center;
  }
}


/* Mobile : on allège tout */
@media (max-width: 640px){
  .success-wrapper{
    padding:16px;
  }

  .success-header h1{
    font-size:18px;
  }

  .success-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .success-pending-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .success-pending-actions .btn,
  .success-actions .cta{
    width:100%;
    text-align:center;
    justify-content:center;
  }
    .blog-shell{
    padding:16px;
  }

  .blog-article-meta{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .blog-shell{
    padding:16px;
  }
  .verify-shell{
    padding:16px;
  }
  .verify-public-shell{
    padding:16px;
  }

  .verify-public-input-row{
    flex-direction:column;
  }

  .verify-public-input-row .cta{
    width:100%;
    text-align:center;
    justify-content:center;
  }

  .verify-public-fieldpair{
    grid-template-columns:1fr;
  }

}

/* Mobile : colonne unique */
@media (max-width: 900px){
  .blog-layout{
    flex-direction:column;
  }

  .blog-aside{
    min-width:0;
  }

  .blog-pagination{
    flex-wrap:wrap;
  }
  .blog-layout{
    flex-direction:column;
  }

  .blog-aside{
    min-width:0;
  }
  .verify-layout{
    grid-template-columns:1fr;
  }
    .verify-public-layout{
    grid-template-columns:1fr;
  }
}

/* =========================
   TABLET ( 769px–1024px )
   ========================= */
@media (min-width: 769px) and (max-width: 1024px){

  main.container{
    max-width: 900px;
    padding: 0 16px;
  }

  .site.nav{
    gap: 12px;
    flex-wrap: wrap;
  }

  .site.nav .nav{
    flex-wrap: wrap;
    gap: 10px;
  }

  .grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .prices{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}