/* ------------------------------------------------------------
   Jean Paul Laroche — optimisations responsive + accessibilité
   (complément à assets/css/main.css)
------------------------------------------------------------ */

/* Lisibilité */
body {
  line-height: 1.6;
}

/* Images toujours fluides */
img {
  max-width: 100%;
  height: auto;
}

/* Accessibilité : focus visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* Tap targets + typographie mobile */
@media screen and (max-width: 736px) {
  #header {
    padding: 1.25em 0 0 0;
  }

  #header h1 {
    font-size: 1.6em;
    line-height: 1.2;
    padding: 0 0.75em;
  }

  /* Menu mobile (navPanel HTML5UP) */
  #navPanel .link {
    padding: 0.9em 1.1em !important;
    font-size: 1.05em !important;
  }

  /* Boîtes moins serrées sur petits écrans */
  .box {
    padding: 1.25em !important;
  }

  /* Espacement de sections plus respirant */
  #main {
    padding: 2em 0 2em 0;
  }
}

/* Réduction des animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Empêche les ancres "image featured" vides de capter les clics */
a.image.featured:empty { display: none !important; }

/* Embed Facebook responsive */
.fb-embed iframe {
  width: 100% !important;
  max-width: 100% !important;
}

/* Petit espace pour le bouton fallback */
.fb-fallback { margin-top: 0.75rem; }