/* ---- Labels (titre du champ) plus visibles ---- */
.info-item h2 {
    font-size: 0.67rem;
    text-transform: uppercase;
    color: #777;
    letter-spacing: 0.9px;
    margin-bottom: 4px;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
}

.info-item span,
.info-item a {
    font-size: 0.97rem;
    color: #111;
    font-weight: 700;
    line-height: 1.5;
    word-break: break-word;
}

/* ---- Large desktop ---- */
@media only screen and (max-width: 1400px) {
    #countryInfo  { width: 88%; }
    #inputDiv     { width: 58%; }
}

@media only screen and (max-width: 1200px) {
    #countryInfo  { width: 90%; }
    #inputDiv     { width: 65%; }
}

/* ---- Tablet ---- */
@media only screen and (max-width: 1000px) {
    .avatarImg        { width: 40%; }
    #typeInfoChoice   { width: 60%; }
    #contentButton    { width: 90%; }

    #searchTitle      { font-size: 1.1rem; }
    #inputDiv         { width: 80%; }
    #countryInfo      { width: 92%; }

    #flagDiv img#countryFlag {
        width: 28%;
        max-width: 220px;
    }
}

/* ---- Small tablet / large phone ---- */
@media only screen and (max-width: 800px) {
    /* Home : empilé */
    main {
        flex-direction: column;
        height: auto;
    }

    .avatarImg {
        width: 100%;
        height: 45vh;
        object-fit: cover;
    }

    #typeInfoChoice {
        width: 100%;
        height: auto;
        padding: 40px 24px 48px;
    }

    #typeInfoChoice img { width: 22%; }

    #typeInfoChoice p {
        font-size: 0.95rem;
        width: 85%;
        line-height: 1.7;
    }

    #contentButton { width: 85%; }

    /* Search */
    #searchDiv    { padding: 22px 16px; gap: 8px; }
    #searchTitle  { font-size: 1.05rem; }
    #searchSubtitle { font-size: 0.8rem; }
    #inputDiv     { width: 90%; }

    /* Results */
    #countryInfo  { width: 94%; }

    #flagDiv      { padding: 28px 5% 16px; }
    #flagDiv img#countryFlag {
        width: 38%;
        max-width: 200px;
    }

    /* Chaque item passe en pleine largeur */
    .info-item { width: 100%; }
    .info-item:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid #f3f3f3; }
    .info-item:last-child { border-bottom: none; }
}

/* ---- Phone ---- */
@media only screen and (max-width: 600px) {
    /* Home */
    .avatarImg { height: 38vh; }

    #typeInfoChoice img { width: 30%; }

    #typeInfoChoice p {
        font-size: 0.88rem;
        margin-bottom: 32px;
    }

    button#country,
    button#town { font-size: 0.92rem; padding: 15px; }

    /* Header */
    header { padding: 10px 16px; }
    header img { width: 60px; }
    header button {
        padding: 6px 13px;
        font-size: 0.8rem;
    }

    /* Search */
    #searchDiv    { padding: 18px 12px; }
    #searchTitle  { font-size: 0.97rem; }
    #inputDiv     { width: 96%; border-radius: 40px; }

    #inputDiv input {
        padding: 12px 16px;
        font-size: 0.9rem;
    }

    #validate {
        padding: 11px 18px;
        font-size: 0.88rem;
    }

    /* Results */
    #countryInfo  { width: 96%; gap: 12px; }

    #flagDiv      { padding: 22px 4% 12px; }
    #flagDiv img#countryFlag {
        width: 52%;
        min-width: 110px;
    }

    .category-title { font-size: 0.72rem; padding: 10px 16px; }

    .info-item { padding: 11px 16px; }

    .info-item h2   { font-size: 0.63rem; }
    .info-item span,
    .info-item a    { font-size: 0.9rem; }

    #notFound       { padding: 50px 0; }
    #notFound strong { font-size: 0.9rem; }

    /* Footer Mobile */
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
}

/* ---- Small phone ---- */
@media only screen and (max-width: 400px) {
    .avatarImg { height: 32vh; }

    #typeInfoChoice p { font-size: 0.82rem; }

    button#country,
    button#town { font-size: 0.86rem; padding: 13px; }

    #inputDiv     { width: 100%; border-radius: 0; }
    #validate     { border-radius: 0; }

    .info-item h2   { font-size: 0.6rem; }
    .info-item span,
    .info-item a    { font-size: 0.86rem; }
}