/* ========================= */
/*        MOBILE GLOBAL      */
/* ========================= */

@media (max-width: 768px) {

  /* ---------- HEADER ---------- */
  header {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 15px;
    text-align: center;
  }

  .header-left {
    flex-direction: column;
    gap: 10px;
  }

  .logo img {
    height: 70px;
  }

  .slogan {
    font-size: 1.1rem;
    white-space: normal;
  }

  /* Bouton déclaration */
  .header-declaration {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
    padding: 10px 15px;
  }

  /* ---------- NAVIGATION ---------- */
  nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  nav a {
    margin: 0;
    font-size: 0.95rem;
    padding: 8px 12px;
  }

  /* ---------- HERO ACCUEIL ---------- */
  .hero-section {
    padding: 40px 15px;
    min-height: auto;
  }

  .logo-accueil img {
    height: 220px;
    margin: 10px auto 20px;
    transform: none;
  }

  .hero-slogan {
    font-size: 1.4rem;
    margin: 10px 0 25px;
    line-height: 1.3;
  }

  /* ---------- CARTES (ACCUEIL + AUTRES) ---------- */
  .cards {
    padding: 20px 10px;
    gap: 15px;
  }

  /* Cartes rondes accueil */
  .hero-section .cards .card {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    padding: 20px;
  }

  /* Cartes classiques pages internes */
  .page .cards .card,
  .programmes-hero .card {
    width: 100%;
    max-width: 360px;
  }

  /* ---------- PROGRAMMES ---------- */
  .programmes-hero {
    min-height: auto;
    padding: 40px 15px;
  }

  .programmes-hero-content {
    padding: 20px;
  }

  .programmes-hero-content h2 {
    font-size: 1.9rem;
  }

  .programmes-hero-content p {
    font-size: 1.05rem;
  }

  details summary {
    font-size: 1rem;
  }

  /* ---------- FORMULAIRE ---------- */
  .contact-form {
    margin: 40px auto;
    padding: 20px;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 1rem;
  }

  .contact-form button {
    font-size: 1rem;
    padding: 12px;
  }

  /* ---------- FOOTER ---------- */
  footer {
    font-size: 0.9rem;
    padding: 15px;
  }

  .social-icons img {
    width: 18px;
  }
}