/* =====================================================================
   ASSOCIATION LYDIE - responsive.css
   Ajustements ciblés pour les très petits écrans et grands écrans.
   La majorité du responsive est déjà géré dans styles.css (mobile-first).
   ===================================================================== */

/* --------------------------------------------------------------------
   Très petits écrans (< 380px)
   -------------------------------------------------------------------- */
@media (max-width: 380px) {
  .hero { padding-block: var(--space-8) var(--space-7); }
  .hero h1 { font-size: 1.95rem; }
  .stat__value { font-size: 2.1rem; }
  .btn { padding: 0.75rem 1.2rem; font-size: 0.85rem; }
  .donation-amounts { grid-template-columns: 1fr; }
  .testimonial { padding: var(--space-6) var(--space-4); }
  .testimonial__quote { font-size: var(--fs-md); }
}

/* --------------------------------------------------------------------
   Tablettes (>= 768px)
   -------------------------------------------------------------------- */
@media (min-width: 768px) {
  .section { padding-block: var(--space-10); }
  .hero h1 { line-height: 1.1; }
  .article-meta { gap: var(--space-4) var(--space-6); }
  .filters { padding: var(--space-5); }
}

/* --------------------------------------------------------------------
   Desktop large (>= 1280px)
   -------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .container { padding-inline: var(--space-7); }
  .section--lg { padding-block: var(--space-12); }
  .hero { min-height: 88vh; }
  .footer-grid { gap: var(--space-9); }
}

/* --------------------------------------------------------------------
   Très grands écrans (>= 1600px)
   -------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --fs-3xl: 4rem; }
  .hero h1 { font-size: 4rem; }
}

/* --------------------------------------------------------------------
   Mode paysage mobile
   -------------------------------------------------------------------- */
@media (max-width: 992px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: var(--space-7); }
  .mobile-nav { padding-bottom: var(--space-9); }
}

/* --------------------------------------------------------------------
   Préférences utilisateur - couleurs sombres (préparation future)
   Note : la version foncée n'est pas activée dans la phase 1, mais
   les variables sont prêtes pour Elementor en phase 2.
   -------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  /* Réservé pour phase 2 - le site reste actuellement clair par défaut */
}

/* --------------------------------------------------------------------
   Contraste élevé
   -------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root {
    --color-text: #000000;
    --color-text-soft: #1A1A1A;
    --color-border: #767676;
    --color-border-light: #999999;
  }
  .btn { border-width: 2px; }
  a { text-decoration: underline; }
}