/* ============================================================================
   RESPONSIVE.CSS — CodeZen
   ============================================================================
   Architecture par TRANCHES D'ÉCRAN PRÉCISES ET NON CHEVAUCHANTES (min+max
   combinés), au lieu de simples seuils "max-width" isolés qui se chevauchent
   et finissent par traiter différemment des appareils très proches en
   largeur. Chaque tranche est autonome : elle porte l'intégralité des
   règles nécessaires pour que le site soit correct à cette largeur précise,
   sans dépendre d'un empilement implicite d'autres règles.

   Chargé APRÈS style.css (et blog.css/blog-extra.css sur les pages du blog)
   pour pouvoir surcharger proprement.

   ── TRANCHES ────────────────────────────────────────────────────────────
   T1  ≤ 359px           Repliables fermés (Z Fold 5 : 344px), très petits
                          Android bas de gamme
   T2  360 – 389px       Galaxy S8 / S8+ (360px), Android standard
   T3  390 – 413px       iPhone SE 3ᵉ gén (375px), iPhone 12/13/14 Pro (390px)
   T4  414 – 479px       iPhone Plus/Max, Pixel, grands Android
   T5  480 – 767px       Phablettes, repliables ouverts (Z Fold 5 : 673px)
   T6  768 – 819px       Petites tablettes (iPad mini, 768px générique)
   T7  820 – 911px       iPad Air (820px), tablettes moyennes
   T8  912 – 1023px      Surface Pro 7 (912px), grandes tablettes
   T9  1024 – 1199px     iPad paysage, petits laptops/2-en-1 (nav burger)
   T10 1200 – 1365px     Laptops/repliables dépliés (nav desktop activée)
   T11 1366 – 1535px     Résolution laptop courante (1366×768)
   T12 1536 – 1919px     Grands laptops / desktops
   T13 ≥ 1920px           Écrans Full HD+ et au-delà
   ============================================================================ */


/* ============================================================================
   T1 — ≤ 359px — Repliables fermés (Z Fold 5), très petits écrans
   ============================================================================ */
@media (max-width: 359px) {
  /* Nav */
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__mobile { display: flex; }
  .nav__mobile {
    padding: var(--space-6) var(--space-5);
    gap: var(--space-2);
  }
  .nav__mobile-link {
    font-size: var(--text-lg);
    padding: var(--space-2) 0;
  }
  .nav__mobile .btn--lg {
    padding: 0.65rem 1.25rem;
    font-size: var(--text-sm);
  }
  .nav__mobile > div[style*="margin-top: auto"] {
    gap: var(--space-2) !important;
  }
  :root { --nav-height: 60px; }

  /* Typo */
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }

  /* Layout général */
  .container { padding: 0 var(--space-3); }
  .section  { padding: var(--space-12) 0; }
  .section--sm { padding: var(--space-8) 0; }

  /* Grilles */
  .value-grid,
  .grid-3, .grid-2,
  .templates-grid,
  .hosting-grid,
  .grid-2.choice-grid,
  .process-grid,
  .packs-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .choice-card { aspect-ratio: 3/4; }

  /* Footer */
  .footer__top { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer__bottom { flex-direction: column; gap: var(--space-4); text-align: center; }

  /* Hero */
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  /* Galerie */
  .gal-stage { height: 340px; }
  .gal-btn { width: 34px; height: 34px; font-size: 0.75rem; }
  .gal-slide__content { padding: var(--space-4) var(--space-4) var(--space-8); }
  .gal-slide__desc { display: none; }
  .gal-slide__name { font-size: 1.2rem; }
  .gal-dots { right: 50%; transform: translateX(50%); }
  .gal-counter { display: none; }

  /* Formulaires / modales */
  .filters-modal { top: auto; left: 0; right: 0; bottom: 0; transform: translateY(100%); width: 100%; max-width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 88vh; }
  .filters-modal.open { transform: translateY(0); }
  .search-wrap { flex-wrap: nowrap; }
  .toast { left: var(--space-3); right: var(--space-3); }
  .newsletter-form { flex-direction: column; }
  .newsletter-form button[type="submit"] { width: 100%; justify-content: center; }
  .cz-order-modal__footer { flex-direction: column; }
  .pack-card { padding: var(--space-6); }
  .stat-item { padding: var(--space-4); }

  /* Contact */
  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .contact-info-col { position: static; order: 2; }
  .contact-form-card { order: 1; padding: var(--space-5); }
  .form-row { grid-template-columns: minmax(0, 1fr); }

  /* Délais / légal */
  .delivery-grid { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; margin-bottom: var(--space-5); }

  /* Blog + articles */
  .blog-grid { grid-template-columns: 1fr; }
  .article-hero { height: 44vh; min-height: 300px; }
  .article-figure-grid, .article-stat-row { grid-template-columns: 1fr; }
  .article-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .article-row--reverse .article-row__img,
  .article-row--reverse .article-row__text { order: initial; }
  .article-feature-grid { grid-template-columns: 1fr; }
  .article-stat-banner__inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .article-gallery-3 { grid-template-columns: 1fr; }
  .article-float-figure, .article-quote-float, .article-inline-figure,
  .article-inline-figure.article-inline-figure--right { float: none; width: 100%; margin: 0 0 var(--space-5); }
  .article-breakout img { height: 26vh; min-height: 170px; }
  .article-hero--typo { padding: calc(var(--nav-height) + var(--space-8)) 0 var(--space-8); }
}


/* ============================================================================
   T2 — 360 – 389px — Galaxy S8 / S8+
   ============================================================================ */
@media (min-width: 360px) and (max-width: 389px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__mobile { display: flex; }
  .nav__mobile {
    padding: var(--space-6) var(--space-5);
    gap: var(--space-2);
  }
  .nav__mobile-link {
    font-size: var(--text-lg);
    padding: var(--space-2) 0;
  }
  .nav__mobile .btn--lg {
    padding: 0.65rem 1.25rem;
    font-size: var(--text-sm);
  }
  .nav__mobile > div[style*="margin-top: auto"] {
    gap: var(--space-2) !important;
  }
  :root { --nav-height: 64px; }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }

  .container { padding: 0 var(--space-4); }
  .section  { padding: var(--space-14) 0; }
  .section--sm { padding: var(--space-8) 0; }

  .value-grid,
  .grid-3, .grid-2,
  .templates-grid,
  .hosting-grid,
  .grid-2.choice-grid,
  .process-grid,
  .packs-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .choice-card { aspect-ratio: 3/4; }

  .footer__top { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__bottom { flex-direction: column; gap: var(--space-4); text-align: center; }

  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  .gal-stage { height: 380px; }
  .gal-btn { width: 36px; height: 36px; font-size: 0.8rem; }
  .gal-slide__content { padding: var(--space-5) var(--space-5) var(--space-9); }
  .gal-slide__desc { display: none; }
  .gal-slide__name { font-size: 1.35rem; }
  .gal-dots { right: 50%; transform: translateX(50%); }
  .gal-counter { display: none; }

  .filters-modal { top: auto; left: 0; right: 0; bottom: 0; transform: translateY(100%); width: 100%; max-width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 86vh; }
  .filters-modal.open { transform: translateY(0); }
  .search-wrap { flex-wrap: nowrap; }
  .toast { left: var(--space-4); right: var(--space-4); }
  .newsletter-form { flex-direction: column; }
  .newsletter-form button[type="submit"] { width: 100%; justify-content: center; }
  .cz-order-modal__footer { flex-direction: column; }
  .pack-card { padding: var(--space-7); }
  .stat-item { padding: var(--space-5); }

  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }
  .contact-info-col { position: static; order: 2; }
  .contact-form-card { order: 1; padding: var(--space-6); }
  .form-row { grid-template-columns: minmax(0, 1fr); }

  .delivery-grid { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; margin-bottom: var(--space-6); }

  .blog-grid { grid-template-columns: 1fr; }
  .article-hero { height: 46vh; min-height: 320px; }
  .article-figure-grid, .article-stat-row { grid-template-columns: 1fr; }
  .article-row { grid-template-columns: 1fr; gap: var(--space-4); }
  .article-row--reverse .article-row__img,
  .article-row--reverse .article-row__text { order: initial; }
  .article-feature-grid { grid-template-columns: 1fr; }
  .article-stat-banner__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .article-gallery-3 { grid-template-columns: 1fr; }
  .article-float-figure, .article-quote-float, .article-inline-figure,
  .article-inline-figure.article-inline-figure--right { float: none; width: 100%; margin: 0 0 var(--space-6); }
  .article-breakout img { height: 28vh; min-height: 190px; }
  .article-hero--typo { padding: calc(var(--nav-height) + var(--space-9)) 0 var(--space-9); }
}


/* ============================================================================
   T3 — 390 – 413px — iPhone SE (375 arrondi ici), iPhone 12/13/14 Pro (390)
   ============================================================================ */
@media (min-width: 390px) and (max-width: 413px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__mobile { display: flex; }
  .nav__mobile {
    padding: var(--space-6) var(--space-5);
    gap: var(--space-2);
  }
  .nav__mobile-link {
    font-size: var(--text-lg);
    padding: var(--space-2) 0;
  }
  .nav__mobile .btn--lg {
    padding: 0.65rem 1.25rem;
    font-size: var(--text-sm);
  }
  .nav__mobile > div[style*="margin-top: auto"] {
    gap: var(--space-2) !important;
  }
  :root { --nav-height: 64px; }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }

  .container { padding: 0 var(--space-4); }
  .section  { padding: var(--space-16) 0; }
  .section--sm { padding: var(--space-10) 0; }

  .value-grid,
  .grid-3, .grid-2,
  .templates-grid,
  .hosting-grid,
  .grid-2.choice-grid,
  .process-grid,
  .packs-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .choice-card { aspect-ratio: 3/4; }

  .footer__top { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__bottom { flex-direction: column; gap: var(--space-4); text-align: center; }

  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  .gal-stage { height: 400px; }
  .gal-btn { width: 40px; height: 40px; font-size: 0.85rem; }
  .gal-slide__content { padding: var(--space-5) var(--space-5) var(--space-10); }
  .gal-slide__desc { display: none; }
  .gal-slide__name { font-size: 1.5rem; }
  .gal-dots { right: 50%; transform: translateX(50%); }
  .gal-counter { display: none; }

  .filters-modal { top: auto; left: 0; right: 0; bottom: 0; transform: translateY(100%); width: 100%; max-width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 85vh; }
  .filters-modal.open { transform: translateY(0); }
  .search-wrap { flex-wrap: nowrap; }
  .toast { left: var(--space-4); right: var(--space-4); }
  .newsletter-form { flex-direction: column; }
  .newsletter-form button[type="submit"] { width: 100%; justify-content: center; }
  .cz-order-modal__footer { flex-direction: column; }
  .pack-card { padding: var(--space-8); }
  .stat-item { padding: var(--space-6); }

  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .contact-info-col { position: static; order: 2; }
  .contact-form-card { order: 1; padding: var(--space-6); }
  .form-row { grid-template-columns: minmax(0, 1fr); }

  .delivery-grid { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; margin-bottom: var(--space-6); }

  .blog-grid { grid-template-columns: 1fr; }
  .article-hero { height: 48vh; min-height: 340px; }
  .article-figure-grid, .article-stat-row { grid-template-columns: 1fr; }
  .article-row { grid-template-columns: 1fr; gap: var(--space-4); }
  .article-row--reverse .article-row__img,
  .article-row--reverse .article-row__text { order: initial; }
  .article-feature-grid { grid-template-columns: 1fr; }
  .article-stat-banner__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .article-gallery-3 { grid-template-columns: 1fr; }
  .article-float-figure, .article-quote-float, .article-inline-figure,
  .article-inline-figure.article-inline-figure--right { float: none; width: 100%; margin: 0 0 var(--space-6); }
  .article-breakout img { height: 30vh; min-height: 200px; }
  .article-hero--typo { padding: calc(var(--nav-height) + var(--space-10)) 0 var(--space-10); }
}


/* ============================================================================
   T4 — 414 – 479px — iPhone Plus/Max, Pixel, grands Android
   ============================================================================ */
@media (min-width: 414px) and (max-width: 479px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__mobile { display: flex; }
  .nav__mobile {
    padding: var(--space-6) var(--space-5);
    gap: var(--space-2);
  }
  .nav__mobile-link {
    font-size: var(--text-lg);
    padding: var(--space-2) 0;
  }
  .nav__mobile .btn--lg {
    padding: 0.65rem 1.25rem;
    font-size: var(--text-sm);
  }
  .nav__mobile > div[style*="margin-top: auto"] {
    gap: var(--space-2) !important;
  }
  :root { --nav-height: 64px; }

  .container { padding: 0 var(--space-4); }
  .section  { padding: var(--space-16) 0; }
  .section--sm { padding: var(--space-10) 0; }

  .value-grid,
  .grid-3, .grid-2,
  .templates-grid,
  .hosting-grid,
  .grid-2.choice-grid,
  .process-grid,
  .packs-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .choice-card { aspect-ratio: 3/4; }

  .footer__top { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__bottom { flex-direction: column; gap: var(--space-4); text-align: center; }

  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  .gal-stage { height: 420px; }
  .gal-btn { width: 40px; height: 40px; font-size: 0.85rem; }
  .gal-slide__content { padding: var(--space-5) var(--space-5) var(--space-10); }
  .gal-slide__desc { display: none; }
  .gal-slide__name { font-size: 1.55rem; }
  .gal-dots { right: 50%; transform: translateX(50%); }
  .gal-counter { display: none; }

  .filters-modal { top: auto; left: 0; right: 0; bottom: 0; transform: translateY(100%); width: 100%; max-width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 85vh; }
  .filters-modal.open { transform: translateY(0); }
  .search-wrap { flex-wrap: nowrap; }
  .toast { left: var(--space-4); right: var(--space-4); }
  .newsletter-form { flex-direction: column; }
  .newsletter-form button[type="submit"] { width: 100%; justify-content: center; }
  .pack-card { padding: var(--space-8); }
  .stat-item { padding: var(--space-6); }

  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .contact-info-col { position: static; order: 2; }
  .contact-form-card { order: 1; padding: var(--space-7); }
  .form-row { grid-template-columns: minmax(0, 1fr); }

  .delivery-grid { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; margin-bottom: var(--space-6); }

  .blog-grid { grid-template-columns: 1fr; }
  .article-hero { height: 50vh; min-height: 360px; }
  .article-figure-grid, .article-stat-row { grid-template-columns: 1fr; }
  .article-row { grid-template-columns: 1fr; gap: var(--space-4); }
  .article-row--reverse .article-row__img,
  .article-row--reverse .article-row__text { order: initial; }
  .article-feature-grid { grid-template-columns: 1fr; }
  .article-stat-banner__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .article-gallery-3 { grid-template-columns: 1fr; }
  .article-float-figure, .article-quote-float, .article-inline-figure,
  .article-inline-figure.article-inline-figure--right { float: none; width: 100%; margin: 0 0 var(--space-6); }
  .article-breakout img { height: 30vh; min-height: 210px; }
  .article-hero--typo { padding: calc(var(--nav-height) + var(--space-10)) 0 var(--space-10); }
}


/* ============================================================================
   T5 — 480 – 767px — Phablettes, repliables ouverts (Z Fold 5 : 673px)
   ============================================================================ */
@media (min-width: 480px) and (max-width: 767px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__mobile { display: flex; }
  .nav__mobile {
    padding: var(--space-6) var(--space-5);
    gap: var(--space-2);
  }
  .nav__mobile-link {
    font-size: var(--text-lg);
    padding: var(--space-2) 0;
  }
  .nav__mobile .btn--lg {
    padding: 0.65rem 1.25rem;
    font-size: var(--text-sm);
  }
  .nav__mobile > div[style*="margin-top: auto"] {
    gap: var(--space-2) !important;
  }
  :root { --nav-height: 64px; }

  .container { padding: 0 var(--space-5); }
  .section  { padding: var(--space-16) 0; }
  .section--sm { padding: var(--space-10) 0; }

  .value-grid { grid-template-columns: 1fr; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .templates-grid { grid-template-columns: repeat(2, 1fr); }
  .hosting-grid { grid-template-columns: 1fr; }
  .grid-2.choice-grid { grid-template-columns: 1fr; }
  .choice-card { aspect-ratio: 3/4; }
  .process-grid { grid-template-columns: 1fr; }
  .packs-grid { grid-template-columns: 1fr; }
  .brand-pillars { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__bottom { flex-direction: column; gap: var(--space-4); text-align: center; }

  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  .gal-stage { height: 460px; border-radius: var(--radius-lg); }
  .gal-btn { width: 40px; height: 40px; font-size: 0.85rem; }
  .gal-slide__content { padding: var(--space-6) var(--space-6) var(--space-10); }
  .gal-slide__desc { display: none; }
  .gal-slide__name { font-size: 1.7rem; }
  .gal-dots { right: 50%; transform: translateX(50%); }
  .gal-counter { display: none; }

  .filters-modal { top: auto; left: 0; right: 0; bottom: 0; transform: translateY(100%); width: 100%; max-width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 85vh; }
  .filters-modal.open { transform: translateY(0); }
  .search-wrap { flex-wrap: nowrap; }
  .toast { left: var(--space-4); right: var(--space-4); }
  .pack-card { padding: var(--space-8); }
  .stat-item { padding: var(--space-6); }

  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .contact-info-col { position: static; order: 2; }
  .contact-form-card { order: 1; }
  .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .delivery-grid { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; margin-bottom: var(--space-6); }

  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .article-hero { height: 52vh; min-height: 380px; }
  .article-figure-grid { grid-template-columns: repeat(2, 1fr); }
  .article-stat-row { grid-template-columns: repeat(3, 1fr); }
  .article-row { grid-template-columns: 1fr; gap: var(--space-4); }
  .article-row--reverse .article-row__img,
  .article-row--reverse .article-row__text { order: initial; }
  .article-feature-grid { grid-template-columns: 1fr; }
  .article-stat-banner__inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .article-gallery-3 { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================================
   T6 — 768 – 819px — Petites tablettes (iPad mini, 768px générique)
   ============================================================================ */
@media (min-width: 768px) and (max-width: 819px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__mobile { display: flex; }
  .nav__mobile {
    padding: var(--space-6) var(--space-5);
    gap: var(--space-2);
  }
  .nav__mobile-link {
    font-size: var(--text-lg);
    padding: var(--space-2) 0;
  }
  .nav__mobile .btn--lg {
    padding: 0.65rem 1.25rem;
    font-size: var(--text-sm);
  }
  .nav__mobile > div[style*="margin-top: auto"] {
    gap: var(--space-2) !important;
  }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .templates-grid { grid-template-columns: repeat(2, 1fr); }
  .hosting-grid { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .packs-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .brand-pillars { grid-template-columns: repeat(2, 1fr); }

  .gal-stage { height: 480px; }
  .gal-slide__content { padding: var(--space-8); }

  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .contact-info-col { position: static; order: 2; }
  .contact-form-card { order: 1; }

  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; margin-bottom: var(--space-6); }

  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .article-figure-grid { grid-template-columns: repeat(2, 1fr); }
  .article-gallery-3 { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================================
   T7 — 820 – 911px — iPad Air (820px), tablettes moyennes
   ============================================================================ */
@media (min-width: 820px) and (max-width: 911px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__mobile { display: flex; }
  .nav__mobile {
    padding: var(--space-6) var(--space-5);
    gap: var(--space-2);
  }
  .nav__mobile-link {
    font-size: var(--text-lg);
    padding: var(--space-2) 0;
  }
  .nav__mobile .btn--lg {
    padding: 0.65rem 1.25rem;
    font-size: var(--text-sm);
  }
  .nav__mobile > div[style*="margin-top: auto"] {
    gap: var(--space-2) !important;
  }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .templates-grid { grid-template-columns: repeat(2, 1fr); }
  .hosting-grid { grid-template-columns: repeat(3, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .packs-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .brand-pillars { grid-template-columns: repeat(2, 1fr); }

  .gal-stage { height: 500px; }
  .gal-slide__content { padding: var(--space-8); }

  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .contact-info-col { position: static; order: 2; }
  .contact-form-card { order: 1; }

  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; margin-bottom: var(--space-6); }

  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .article-figure-grid { grid-template-columns: repeat(2, 1fr); }
  .article-gallery-3 { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================================
   T8 — 912 – 1023px — Surface Pro 7 (912px), grandes tablettes
   ============================================================================ */
@media (min-width: 912px) and (max-width: 1023px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__mobile { display: flex; }
  .nav__mobile {
    padding: var(--space-6) var(--space-5);
    gap: var(--space-2);
  }
  .nav__mobile-link {
    font-size: var(--text-lg);
    padding: var(--space-2) 0;
  }
  .nav__mobile .btn--lg {
    padding: 0.65rem 1.25rem;
    font-size: var(--text-sm);
  }
  .nav__mobile > div[style*="margin-top: auto"] {
    gap: var(--space-2) !important;
  }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .templates-grid { grid-template-columns: repeat(2, 1fr); }
  .hosting-grid { grid-template-columns: repeat(3, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .packs-grid { grid-template-columns: repeat(2, 1fr); max-width: 700px; margin: 0 auto; }
  .brand-pillars { grid-template-columns: repeat(2, 1fr); }

  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .contact-info-col { position: static; order: 2; }
  .contact-form-card { order: 1; }

  .legal-layout { grid-template-columns: 220px 1fr; }

  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================================
   T9 — 1024 – 1199px — iPad paysage, petits laptops/2-en-1 (nav burger)
   ============================================================================ */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__mobile { display: flex; }
  .nav__mobile {
    padding: var(--space-6) var(--space-5);
    gap: var(--space-2);
  }
  .nav__mobile-link {
    font-size: var(--text-lg);
    padding: var(--space-2) 0;
  }
  .nav__mobile .btn--lg {
    padding: 0.65rem 1.25rem;
    font-size: var(--text-sm);
  }
  .nav__mobile > div[style*="margin-top: auto"] {
    gap: var(--space-2) !important;
  }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .templates-grid { grid-template-columns: repeat(2, 1fr); }
  .hosting-grid { grid-template-columns: repeat(3, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .packs-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-pillars { grid-template-columns: repeat(2, 1fr); }

  .gal-stage { height: 500px; }
  .gal-slide__content { padding: var(--space-8); }

  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .contact-info-col { position: static; order: 2; }
  .contact-form-card { order: 1; }
}


/* ============================================================================
   T10 — 1200 – 1365px — Laptops / repliables dépliés (nav desktop active)
   ============================================================================ */
@media (min-width: 1200px) and (max-width: 1365px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .hosting-grid { grid-template-columns: repeat(3, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .packs-grid { grid-template-columns: repeat(3, 1fr); }

  .contact-layout { grid-template-columns: minmax(0, 1fr) 380px; }
}


/* ============================================================================
   T11 — 1366 – 1535px — Résolution laptop courante (1366×768)
   ============================================================================ */
@media (min-width: 1366px) and (max-width: 1535px) {
  .container { max-width: 1240px; }
}


/* ============================================================================
   T12 — 1536 – 1919px — Grands laptops / desktops
   ============================================================================ */
@media (min-width: 1536px) and (max-width: 1919px) {
  .container { max-width: 1280px; }
}


/* ============================================================================
   T13 — ≥ 1920px — Écrans Full HD+ et au-delà
   ============================================================================ */
@media (min-width: 1920px) {
  .container { max-width: 1360px; }
}