/**
 * Grouvel - News Kids (news-kids.html)
 * Couvre : grille de ressources FR/DE, cartes colorées, layout responsive.
 */

    :root {
      color-scheme: light dark;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: var(--font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif);
      background: var(--color-bg-gradient-kids);
      color: var(--color-text-primary);
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    header {
      text-align: center;
      padding: 48px 16px 24px;
    }
    h1 {
      font-size: 2.7rem;
      margin: 0;
      color: var(--color-primary);
    }
    header p {
      margin: 0.9em auto 2em;
      max-width: 720px;
      color: var(--color-text-secondary);
      font-size: 1.05rem;
    }
    a.back {
      display: inline-flex;
      align-items: center;
      gap: 0.4em;
      margin-top: 12px;
      padding: 0.65em 1.6em;
      border-radius: 999px;
      background: var(--color-primary);
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      box-shadow: var(--shadow-md);
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    a.back:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }

    main {
      flex: 1;
      width: 100%;
      max-width: 1040px;
      margin: 0 auto;
      padding: 0 18px 56px;
    }

    section.resources {
      background: var(--color-bg-white);
      border-radius: 22px;
      padding: 2.4em 2.6em;
      box-shadow: var(--shadow-lg);
      border: 1px solid rgba(128,128,128,0.1);
    }
    section.resources h2 {
      margin-top: 0;
      font-size: 2rem;
      text-align: center;
      color: var(--color-primary);
    }
    section.resources p.lead {
      text-align: center;
      font-size: 1.05rem;
      color: var(--color-text-secondary);
      margin-bottom: 2.2em;
    }

    .resource-lists {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2.2em;
    }
    .resource-card {
      background: var(--color-bg-light);
      border-radius: 18px;
      padding: 1.8em 1.6em;
      border: 1px solid rgba(128,128,128,0.15);
      box-shadow: var(--shadow-sm);
    }
    .resource-card h3 {
      margin: 0 0 1.1em;
      font-size: 1.25rem;
      color: var(--color-primary);
    }
    .resource-card ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 1em;
    }
    .resource-card li {
      background: var(--color-bg-white);
      border-radius: 14px;
      padding: 1.05em 1.2em;
      border: 1px solid rgba(128,128,128,0.1);
      box-shadow: var(--shadow-sm);
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    .resource-card li:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
    .resource-card a {
      color: var(--color-primary);
      font-weight: 600;
      text-decoration: none;
    }
    .resource-card a:hover {
      text-decoration: underline;
    }
    .resource-card span {
      display: block;
      font-size: 0.95rem;
      color: var(--color-text-secondary);
      margin-top: 0.35em;
      line-height: 1.45;
    }

    .guidance {
      margin-top: 2.8em;
      background: var(--color-primary-light);
      border-left: 4px solid var(--color-primary);
      border-radius: 16px;
      padding: 1.4em 1.6em;
      font-size: 1rem;
      color: var(--color-text-primary);
      text-align: center;
    }

    footer {
      text-align: center;
      padding: 28px 10px 36px;
      font-size: 0.92rem;
      color: var(--color-text-disabled);
    }

    /* Optimisations mobile */
    @media (max-width: 640px) {
      header {
        padding: 32px 16px 20px;
      }
      h1 {
        font-size: 2rem; /* Plus lisible sur mobile */
      }
      header p {
        font-size: 1rem;
        padding: 0 8px;
      }
      a.back {
        padding: 0.75em 1.4em;
        font-size: 0.95rem;
      }
      main {
        padding: 0 14px 48px;
      }
      section.resources {
        padding: 1.6em 1.2em;
        border-radius: 16px;
      }
      section.resources h2 {
        font-size: 1.7rem;
      }
      section.resources p.lead {
        font-size: 1rem;
      }
      .resource-lists {
        gap: 1.8em;
      }
      .resource-card {
        padding: 1.4em 1.2em;
      }
      .resource-card h3 {
        font-size: 1.15rem;
      }
      .resource-card li {
        padding: 0.95em 1.1em;
      }
      .resource-card a {
        font-size: 0.95rem;
      }
      .resource-card span {
        font-size: 0.9rem;
      }
      .guidance {
        padding: 1.2em 1.3em;
        font-size: 0.95rem;
      }
      footer {
        padding: 24px 16px 32px;
        font-size: 0.9rem;
      }
    }