/* =========================================================
   responsive.css — ajustements fins par taille d'écran

   Les blocs max-width sont rangés du plus large au plus étroit :
   à spécificité égale, c'est la dernière déclaration qui l'emporte,
   donc le plus petit écran a toujours le dernier mot.

   Points de rupture du projet, réutilisés tels quels :
   639/640 · 767/768 · 1023/1024 · 1279/1280 (et 900, propre à la
   console d'administration, dans admin.css). Seul 479 est nouveau :
   la famille existante ne descendait pas assez bas pour traiter les
   défauts propres aux écrans de 320 à 400px.
   ========================================================= */

/* Domaine exact du menu burger : il remplace la navigation
   horizontale partout en dessous de 1280px (style.css). */
@media (max-width: 1279px) {
  /* Cibles tactiles : 40×47 et 43px de haut, soit juste sous les
     44px recommandés. Le geste manque encore sa cible pour quelques
     pixels ; l'écart rattrapé est invisible à l'œil. */
  .menu-toggle { padding: 0.625rem; margin-right: -0.625rem; }
  .mobile-nav a { padding-block: 0.6875rem; }
}

@media (max-width: 767px) {
  .logo-img { height: 2.5rem; }
  .home-hero-content h1 { font-size: 2.25rem; }
  .page-hero-content h1 { font-size: 2rem; }
  .cta-band-inner h2 { font-size: 1.75rem; }
  .footer-bottom-right { flex-direction: column; gap: 0.5rem; text-align: center; }
  .quote-block figcaption { flex-direction: column; gap: 0.375rem; }
  .quote-block .quote-line { display: none; }
  .big-stat { font-size: 3rem; }
  .founder-avatar { width: 4.5rem; height: 4.5rem; }
  .founder-avatar svg { width: 2.25rem; height: 2.25rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stats-grid { max-width: 40rem; }

  /* Les cartes de navigation rapide portent une icône, une flèche et
     deux marges intérieures : à trois colonnes sur 704px, il ne reste
     que 68px pour le libellé, qui tombe sur quatre lignes. Deux
     colonnes lui en rendent 196. Le :has cible cette rangée seule —
     les autres grilles en .grid-3 (piliers, articles) gardent leurs
     trois colonnes. */
  .grid-3:has(> .quick-nav-card) { grid-template-columns: repeat(2, 1fr); }
}

/* La navigation "desktop" (primary-nav) apparaît à partir de xl (1280px) ;
   entre 768px et 1279px on garde le menu burger pour éviter l'encombrement. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-cta.btn-primary { padding: 0.5rem 0.9rem; font-size: 0.8125rem; }
}

/* Même seuil que le passage de la modale de détail en pleine largeur
   (style.css) : les deux réglages décrivent le même écran. */
@media (max-width: 639px) {
  /* 36×36 posé sur la photo — porté à 44×44 au doigt. */
  .event-dialog-close { width: 2.75rem; height: 2.75rem; }
}

/* ---------------------------------------------------------
   Écrans de 320 à 479px. Aucune requête du projet ne
   descendait ici : c'est là que se concentraient les
   débordements horizontaux.
   --------------------------------------------------------- */
@media (max-width: 479px) {
  /* .grid-4 restait à deux colonnes jusqu'à 768px : à 320px cela
     laisse 72px de contenu utile une fois le padding des cartes
     retiré, et « Montée en puissance » ou « Sécurité intérieure »
     débordaient de leur colonne. */
  .grid-4 { grid-template-columns: 1fr; }

  /* .marquee-label est en flex-shrink:0 et occupe 186px fixes : la
     fenêtre défilante des sigles tombait à 46px de large. En colonne,
     le libellé garde sa place et la piste retrouve toute la largeur.

     .marquee-viewport repasse en flex:none et width:100% : « flex: 1 »
     s'applique désormais à l'axe vertical, où sa base de 0 écraserait
     la hauteur de la rangée, et sa largeur — devenue taille croisée —
     suivrait sinon celle de la piste (2139px) au lieu du conteneur,
     ce qui viderait de son sens la fenêtre de rognage. */
  .marquee-inner { flex-direction: column; gap: 0.75rem; }
  .marquee-viewport { flex: none; width: 100%; }

  /* Les boutons sont en white-space:nowrap, ce qui garde les libellés
     courts sur une ligne au-dessus. Un libellé long — « Obtenir une
     proposition technique », 319px — ne rentre plus ici et poussait
     la page hors de l'écran : on l'autorise à passer sur deux lignes. */
  .btn-primary, .btn-outline, .btn-solid { white-space: normal; }
}