/* ==================================================
   PAGE : bulldog-anglais-chien-eau-portugais.html
   ================================================== */

/* 1. Suppression des espaces en haut de page */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
}

body {
    position: relative;
}

#bonjour.corps {
    position: relative;
    top: 0;
    left: auto;
    width: 80%;
    max-width: 1000px;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center;
    box-sizing: border-box;
}

#bonjour header {
    position: static;
    top: auto;
    left: auto;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Numéros d'éleveur en haut à droite */

body > .identifiants {
    position: absolute;
    top: 0;
    right: 1%;
    z-index: 20;
    text-align: right;
}

body > .identifiants h5,
body > .identifiants h6 {
    position: static;
    margin: 3px 0;
    font-size: 0.75rem;
}

/* 3. Drapeaux et logo sur une seule ligne */

.ligne-identite {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    align-items: center;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0;
}

.ligne-identite .langue,
.ligne-identite .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
}

.ligne-identite a {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.ligne-identite img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

.ligne-identite .logo img {
    max-width: 100%;
}

/* 4. Titres */

#bonjour h1,
#bonjour h2 {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    z-index: auto;
    color: #ff6;
    text-align: center;
}

#bonjour header h1 {
    font-size: 1.35rem;
    line-height: 1.2;
    margin: 0 !important;
    padding: 0 !important;
}

#bonjour h2 {
    font-size: 1.1rem;
    line-height: 1.3;
    margin: 0 !important;
    padding: 0 !important;
}

/* 5. Contenu principal */

#bonjour main {
    position: static;
    margin: 0 !important;
    padding: 0 !important;
}

#bonjour section {
    margin: 0;
    padding: 0;
}

/* 6. Tableau et photos des deux races */

#bonjour table.choix-races {
    width: 75%;
    table-layout: fixed;
    margin: 0 auto;
    border-collapse: collapse;
}

#bonjour table.choix-races td {
    width: 50%;
    text-align: center;
    vertical-align: middle;
}

#bonjour table.choix-races img {
    display: block;
    width: 250px;
    height: 250px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
}

#bonjour table.choix-races a {
    overflow-wrap: anywhere;
}

/* 7. Adaptation aux écrans mobiles */

@media (max-width: 600px) {
    #bonjour.corps {
        width: 96%;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .ligne-identite {
        grid-template-columns: 1fr 2fr 1fr;
        gap: 0;
    }

    #bonjour table.choix-races {
        width: 100%;
    }

    #bonjour table.choix-races td {
        padding: 4px;
    }

    #bonjour table.choix-races img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}