/* ==========================================================================
   Téléphone et tablette : en-tête, menu mobile et pied de page (communs à toutes les pages).
   Cibles de toucher d'au moins 44 px, aucun débordement horizontal.
   ========================================================================== */

@media (max-width: 1060px), (pointer: coarse) {
  /* En-tête : logo, bouton de préinscription et menu à 44 px au moins. */
  .site-header .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .header-actions .btn--primary { min-height: 44px; }


  /* Pied de page : chaque lien occupe une ligne de 44 px. */
  .site-footer ul { gap: 0; }
  .site-footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer__tel { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.2rem; }
  .site-footer__top a[href^='mailto:'] { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer__legal { gap: 0 1.2rem; }
  .site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .socials a { min-width: 44px; min-height: 44px; }
  .site-footer__credit a { display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; }
}

@media (max-width: 520px) {
  /* Le filigrane de la rosace reste derrière le texte sans le gêner. */
  .site-footer__rosace { width: 46vw; opacity: 0.06; }
  .site-footer__legal { font-size: 0.8rem; }
}

/* Menu compact (jusqu'à 1279 px) : liens et choix de profil confortables au doigt ; sur un grand
   écran, le contenu du menu garde une largeur de lecture et ne s'étire pas sur toute la largeur. */
@media (max-width: 1279px), (pointer: coarse) {
  .mobile-menu__list a { min-height: 48px; }
  .seg button { min-height: 48px; }
  .seg-alumni { min-height: 56px; }
  .mobile-menu__contact a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .mobile-menu > * { max-width: 44rem; }
}

/* Menu mobile ouvert : l'en-tête (logo et bouton de fermeture) reste au-dessus du menu
   (dans la démo, le menu le recouvrait et seul Échap le refermait). */
html.is-menu-ouvert .site-header { z-index: calc(var(--z-menu) + 1); transform: none; }
html.is-menu-ouvert body { overflow: hidden; }

/* Téléphone : le logo, le bouton de préinscription et le menu tiennent sur une seule ligne
   (dans la démo, l'en-tête passait sur deux lignes et montait à 125 px sous 430 px). */
@media (max-width: 480px) {
  .site-header__inner { flex-wrap: nowrap; gap: 0.5rem; }
  .brand { gap: 0.4rem; min-width: 0; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__l1, .brand__l2 { font-size: 12.5px; }
  .brand__l3 { font-size: 7.5px; }
  .header-actions { gap: 0.4rem; }
  .header-actions .btn--primary { padding-inline: 0.75rem; font-size: 0.9rem; }
  .menu-toggle { width: 44px; height: 44px; }
}
@media (max-width: 359px) {
  .brand__text { display: none; }
}

/* Module d'accessibilité : sur téléphone et tablette, il s'ouvre depuis le menu (bouton
   « Accessibilité ») ; à partir de 1280 px, depuis le bouton rond de l'en-tête (wordpress.css). */
.mobile-menu__a11y { display: none; }
@media (max-width: 1279px) {
  .mobile-menu__a11y {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 48px; margin-top: var(--space-m);
    padding: 0.6rem 1rem; border-radius: var(--radius-pill); border: 1.5px solid rgb(255 255 255 / 0.35);
    color: #fff; font-weight: 600; text-align: left;
  }
  .mobile-menu__a11y svg { width: 24px; height: 24px; flex: none; }
}