/* Mise en page du portail */
body {
    --accueil-largeur: 69rem;
    --accueil-marge: clamp(.75rem, 3vw, 2rem);
    --accueil-fond: #20231e;
    --accueil-panneau: #292c25;
    --accueil-bordure: #41443b;
    --accueil-texte: #f7f4ed;
    --accueil-secondaire: #cbc9be;
    --accueil-accent: #ffc373;
    color: var(--accueil-texte);
    font: 1rem/1.5 system-ui, sans-serif;
    background-attachment: scroll;
}

body *,
body *::before,
body *::after {
    box-sizing: border-box;
}

body img {
    max-width: 100%;
    height: auto;
}

body a {
    color: inherit;
}

body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body summary:focus-visible {
    outline: 2px solid var(--accueil-accent);
    outline-offset: -2px;
}

body .accueil-evitement {
    position: absolute;
    top: .5rem;
    left: var(--accueil-marge);
    z-index: 10;
    padding: .65rem 1rem;
    border-radius: .35rem;
    color: #211508;
    background: var(--accueil-accent);
    transform: translateY(calc(-100% - 1rem));
}

body .accueil-evitement:focus {
    transform: none;
    outline-color: #211508;
}

body .accueil-nav {
    border-bottom: 1px solid var(--accueil-bordure);
    background: #171914;
}

body .accueil-nav ul,
body #zoneConnexionMembre,
body #conteneur,
body #contenuFooter {
    width: min(calc(100% - 2 * var(--accueil-marge)), var(--accueil-largeur));
    max-width: none;
    margin-inline: auto;
}

body .accueil-nav ul,
body #zoneConnexionMembre,
body #divConnecter,
body #contenuFooter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
}

body .accueil-nav ul {
    list-style: none;
    gap: .25rem;
    padding-block: .35rem;
}

body .accueil-nav a,
body #contenuFooter a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .4rem .65rem;
    border-radius: .35rem;
    text-decoration: none;
    font-weight: 600;
}

body .accueil-nav a:hover,
body #contenuFooter a:hover,
body .accueil-nav [aria-current="page"] {
    background: var(--accueil-panneau);
    color: var(--accueil-accent);
}

body #panelConnexionMembre {
    float: none;
    min-width: 0;
    height: auto;
    padding: .35rem 0;
    border-bottom: 1px solid var(--accueil-bordure);
    background: var(--accueil-fond);
}

body #zoneConnexionMembre {
    justify-content: flex-end;
    z-index: auto;
}

body #txtConnexionMembre,
body #laConnexion,
body #divConnecter {
    float: none;
    width: auto;
    margin: 0;
    font: inherit;
}

body #txtConnexionMembre {
    color: var(--accueil-secondaire);
    font-size: .875rem;
}

body #laConnexion a,
body #divConnecter a,
body .accueil-bouton {
    display: inline-flex;
    align-items: center;
    gap: .25em;
    min-height: 44px;
    margin: 0;
    padding: .35rem .75rem;
    border: 1px solid #756044;
    border-radius: .4rem;
    background: var(--accueil-panneau);
    color: var(--accueil-accent);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
}

body #laConnexion a:hover,
body #divConnecter a:hover,
body .accueil-bouton:hover {
    border-color: var(--accueil-accent);
    text-decoration: underline;
}

body .accueil-marque {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem clamp(1rem, 4vw, 3rem);
    padding: clamp(.75rem, 3vw, 1.5rem);
    border: 1px solid var(--accueil-bordure);
    border-radius: .65rem;
    background: rgb(24 26 20 / 94%);
}

body #header {
    margin-block: var(--accueil-marge);
}

body #logoSite,
body #imgSlogan {
    display: block;
    margin: 0;
    object-fit: contain;
}

body #logoSite {
    width: min(100%, 13.7rem);
}

body #imgSlogan {
    width: min(100%, 23.2rem);
}

body #btnFacebook {
    position: static;
    margin-inline-start: auto;
    max-width: 100%;
}

body #fondPublicitaire {
    padding: 0;
    background: none;
    overflow: auto;
}

body #fondPublicitaire:has(.adsbygoogle[data-ad-status="filled"], img:not([hidden])) {
    margin-top: .75rem;
}

body #fondPublicitaire iframe,
body .portail-annonce-laterale iframe {
    max-width: 100%;
}

body #fondPublicitaire img[hidden],
body .portail-annonce-laterale[hidden],
body ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

body #contenu {
    margin-block-end: var(--accueil-marge);
}


body .accueil-carte {
    min-width: 0;
    padding: clamp(.85rem, 2.8vw, 1.5rem);
    border: 1px solid var(--accueil-bordure);
    border-radius: .65rem;
    background: var(--accueil-fond);
    overflow-wrap: anywhere;
}

body .accueil-entete-carte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: .75rem;
}

body h1,
body h2 {
    color: var(--accueil-texte);
    font-weight: 700;
    line-height: 1.2;
}

body h1 {
    font-size: clamp(1.45rem, 3vw, 2rem);
}

body h2 {
    margin-bottom: .65rem;
    font-size: 1.15rem;
}

body .accueil-discussions,
body .accueil-connectes ul {
    list-style: none;
}

body .accueil-discussions li {
    border-top: 1px solid var(--accueil-bordure);
}

body .accueil-discussions a {
    display: grid;
    gap: .15rem;
    min-height: 44px;
    padding: .65rem .5rem;
    text-decoration: none;
}

body .accueil-discussions a:hover,
body .accueil-discussions a:focus-visible {
    background: var(--accueil-panneau);
}

body .accueil-sujet {
    font-weight: 650;
}

body .accueil-discussions a:hover .accueil-sujet {
    text-decoration: underline;
}

body .accueil-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .6rem;
}

body .accueil-detail,
body .accueil-note {
    color: var(--accueil-secondaire);
    font-size: .875rem;
}

body .accueil-autres {
    border-top: 1px solid var(--accueil-bordure);
}

body .accueil-autres summary {
    min-height: 44px;
    padding: .65rem .5rem;
    color: var(--accueil-accent);
    cursor: pointer;
    font-weight: 600;
}

body .accueil-autres summary:hover {
    text-decoration: underline;
}

body .accueil-connectes {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--accueil-bordure);
}

body .accueil-connectes ul {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    margin-bottom: .5rem;
}

body .accueil-connectes a {
    display: inline-block;
    padding-block: .25rem;
}

body #footer {
    position: static;
    width: auto;
    min-width: 0;
    height: auto;
    border-top: 1px solid var(--accueil-bordure);
    background: #171914;
}

body #contenuFooter {
    gap: .2rem;
    padding-block: .4rem;
    letter-spacing: normal;
}

body .espaceLienFooter,
body #copyrigth {
    margin: 0;
}

body #copyrigth {
    flex-basis: 100%;
    padding: .3rem .65rem;
    color: var(--accueil-secondaire);
}

body .portail-contenu {
    min-width: 0;
}

body .portail-contact {
    max-width: 48rem;
    margin-inline: auto;
}

body .portail-formulaire,
body .contact-identite,
body .galerie-champs,
body .galerie-moderation form {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

body .portail-formulaire {
    margin-top: 1rem;
}

body .portail-formulaire label,
body .galerie-moderation label {
    display: grid;
    gap: .35rem;
    min-width: 0;
    font-weight: 600;
}

body .portail-formulaire input:not([hidden]),
body .portail-formulaire select,
body .portail-formulaire textarea,
body .galerie-moderation select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: .55rem .65rem;
    color: var(--accueil-texte);
    background: var(--accueil-panneau);
    border: 1px solid #75796c;
    border-radius: .35rem;
    font: inherit;
    font-weight: 400;
}

body .portail-formulaire textarea {
    resize: vertical;
}

body .portail-formulaire button,
body .galerie-moderation button {
    justify-self: start;
    cursor: pointer;
}

body .contact-erreur {
    margin-top: .75rem;
    color: #ffbdac;
}

body .galerie-categories,
body .galerie-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-block: .85rem 1.25rem;
}

body .galerie-categories [aria-current="page"] {
    background: var(--accueil-accent);
    border-color: var(--accueil-accent);
    color: #241608;
}

body .galerie-categories [aria-current="page"]:focus-visible {
    outline-color: #241608;
}

body .galerie-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
    align-items: start;
    gap: clamp(.5rem, 2vw, 1rem);
    list-style: none;
}

body .galerie-photos.galerie-gestion {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

body .galerie-photo {
    min-width: 0;
    border: 1px solid var(--accueil-bordure);
    border-radius: .45rem;
    background: var(--accueil-panneau);
}

body .galerie-lien-photo {
    display: block;
    min-height: 44px;
    text-decoration: none;
}

body .galerie-lien-photo:hover {
    color: var(--accueil-accent);
    text-decoration: underline;
}

body .galerie-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: .4rem .4rem 0 0;
}

body .galerie-lien-photo span {
    display: block;
    padding: .5rem;
    font-size: .875rem;
}

body .galerie-moderation,
body .galerie-champs {
    padding: .55rem;
    border-top: 1px solid var(--accueil-bordure);
}

body .galerie-moderation summary {
    min-height: 44px;
    padding-block: .55rem;
    color: var(--accueil-accent);
    cursor: pointer;
}

body #coloneGauche {
    width: 100%;
    max-width: none;
    margin: 0 0 var(--accueil-marge);
    padding: clamp(.85rem, 2.8vw, 1.5rem);
    border: 1px solid var(--accueil-bordure);
    border-radius: .65rem;
    background: var(--accueil-fond);
    overflow: auto;
}

body #coloneGauche :is(h1, h2) {
    height: auto;
    min-width: 0;
    width: auto;
    padding: 0;
    margin: 0 0 .65rem;
    color: var(--accueil-texte);
    background: none;
    font-family: inherit;
}

body #coloneGauche :is(.banderoleGauche, #topColoneGauche) {
    display: none;
}

body :is(#floatDroiteColoneDroite, #coloneDroite, .portail-colonne-laterale) {
    width: auto;
    max-width: 100%;
    margin: 0;
}

body .portail-annonce-laterale {
    max-width: 160px;
    overflow: hidden;
}

@media (min-width: 37rem) {
    body .contact-identite {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 37rem) {
    body .accueil-nav a {
        justify-content: center;
        min-width: 44px;
        padding-inline: .2rem;
        font-size: .9375rem;
    }

    body #zoneConnexionMembre {
        justify-content: flex-start;
    }

    body .accueil-marque {
        justify-content: center;
    }

    body #btnFacebook {
        margin-inline-start: 0;
    }
}

@media (max-width: 19rem) {
    body .accueil-nav ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1.5fr;
    }

    body .accueil-nav a {
        display: flex;
        height: 100%;
        text-align: center;
        line-height: 1.25;
    }
}