/* Polices locales de secours : aucun téléchargement nécessaire */
/* 1. Couleurs principales du thème viking */
:root {
    --bg:#101716;
    --panel:#1b2725;
    --gold:#d8b878;
    --cream:#f2eee4;
    --muted:#bdc7bf;
    --line:#3b4942
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

/* 2. Mise en page générale */
body {
    margin:0;
    background:var(--bg);
    color:var(--cream);
    font:16px/1.75 Inter,Arial,sans-serif
}

a {
    color:inherit;
    text-decoration:none
}

h1,h2,h3,.brand {
    font-family:Cinzel,Georgia,serif;
    line-height:1.25
}

h1 {
    font-size:clamp(2.4rem,6vw,5rem);
    margin:.25em 0
}

h2 {
    font-size:clamp(1.7rem,3vw,2.7rem);
    color:var(--gold)
}

h3 {
    color:var(--gold)
}

p {
    max-width:75ch
}

.container {
    width:min(1120px,90%);
    margin:auto
}

/* 3. En-tête et menu de navigation */
.topbar {
    background:#0a1110;
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:10
}

.nav {
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px
}

.brand {
    font-weight:700;
    font-size:1.2rem;
    color:var(--gold);
    letter-spacing:.08em
}

.brand small {
    display:block;
    font:10px Inter,sans-serif;
    letter-spacing:.3em;
    color:var(--muted)
}

.links {
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap
}

.links a {
    font-size:.9rem
}

.links a:hover,.links a[aria-current=page] {
    color:var(--gold)
}

/* Bouton du menu mobile */
.menu-toggle {
    display:none;
    background:transparent;
    border:1px solid var(--gold);
    color:var(--gold);
    padding:7px 12px;
    border-radius:4px
}

.hero {
    min-height:560px;
    display:grid;
    place-items:center;
    background:linear-gradient(90deg,rgba(6,12,11,.92),rgba(6,12,11,.42)),url('images/hero.svg') center/cover
}

.hero-inner {
    padding:90px 0
}

.eyebrow {
    text-transform:uppercase;
    letter-spacing:.28em;
    color:var(--gold);
    font-size:.78rem;
    font-weight:700
}

.lead {
    font-size:1.15rem;
    color:#e1e5df
}

.btn {
    display:inline-block;
    border:1px solid var(--gold);
    background:var(--gold);
    color:#101716;
    padding:12px 23px;
    border-radius:3px;
    font-weight:700;
    margin:12px 12px 0 0;
    cursor:pointer
}

.btn.alt {
    background:transparent;
    color:var(--gold)
}

.btn:hover {
    filter:brightness(1.13)
}

section {
    padding:75px 0
}

.intro {
    background:#16211e
}

.grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}

.card {
    background:var(--panel);
    border:1px solid var(--line);
    padding:26px;
    border-radius:5px
}

.card p {
    color:var(--muted)
}

.card .symbol {
    font-size:2.1rem;
    color:var(--gold)
}

.band {
    background:#202c27;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}

.pagehead {
    padding:75px 0 55px;
    background:radial-gradient(circle at 90% 10%,#35463a,transparent 45%),#15211d;
    border-bottom:1px solid var(--line)
}

.pagehead h1 {
    font-size:clamp(2.3rem,5vw,4rem)
}

.prose {
    max-width:850px
}

.prose p {
    color:#d7ded8
}

.split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px;
    align-items:start
}

.feature {
    padding:24px;
    border-left:3px solid var(--gold);
    background:var(--panel);
    margin:20px 0
}

.list {
    padding-left:22px
}

.list li {
    margin:8px 0
}

.form {
    background:var(--panel);
    border:1px solid var(--line);
    padding:30px;
    border-radius:5px
}

label {
    display:block;
    margin:14px 0 5px;
    font-weight:600
}

input,select,textarea {
    width:100%;
    border:1px solid #617168;
    background:#0e1916;
    color:white;
    padding:12px;
    border-radius:3px;
    font:inherit
}

textarea {
    min-height:150px;
    resize:vertical
}

.notice {
    font-size:.9rem;
    color:var(--muted)
}

/* 5. Pied de page et bannière */
footer {
    padding:32px 0;
    background:#0a1110;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:.9rem
}

.foot {
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap
}

.foot a {
    color:var(--gold)
}

/* Adaptation aux petits écrans */
@media(max-width:800px) {
    .grid,.split {
        grid-template-columns:1fr
    }

    .menu-toggle {
        display:block
    }

    .links {
        display:none;
        position:absolute;
        top:81px;
        left:0;
        right:0;
        background:#0a1110;
        padding:22px 5%;
        border-bottom:1px solid var(--line);
        flex-direction:column;
        align-items:flex-start
    }

    .links.open {
        display:flex
    }

    .hero {
        min-height:470px
    }

    .nav {
        min-height:81px
    }

}

/* Identité visuelle de La Meute du Nord */
body {
    background:#101010 url('images/logo-fond.png') center 110px / min(900px,95vw) auto fixed no-repeat
}

main {
    background:rgba(9,13,13,.80)
}

.intro,.band,.pagehead {
    background-color:rgba(17,23,22,.90)
}

.card,.feature,.form {
    background:rgba(23,31,30,.96)
}

.footer-banner {
    background:#090909;
    text-align:center;
    line-height:0;
    border-top:2px solid #8b2929
}

.footer-banner img {
    display:block;
    width:100%;
    max-height:340px;
    object-fit:contain;
    margin:auto
}

@media(max-width:800px) {
    body {
        background-size:95vw auto;
        background-attachment:scroll
    }

    .footer-banner img {
        max-height:none
    }

}

/* Navigation en boucliers vikings, sans images ni scripts externes */
.links {
    gap:10px
}

.links a {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:66px;
    min-width:112px;
    max-width:170px;
    padding:12px 16px;
    text-align:center;
    line-height:1.25;
    font-family:Georgia,serif;
    font-weight:700;
    font-size:.91rem;
    letter-spacing:.025em;
    color:#f8e9cb;
    background:linear-gradient(145deg,#5c2526 0%,#301516 48%,#12191a 49%,#202528 100%);
    border:3px solid #b39359;
    outline:1px solid #26150f;
    box-shadow:inset 0 0 0 2px #5d4c36,0 3px 8px #0009;
    clip-path:polygon(8% 0,92% 0,100% 18%,100% 72%,50% 100%,0 72%,0 18%);
    transition:filter .2s,transform .2s
}

.links a:hover,.links a[aria-current=page] {
    color:#fff4d5;
    background:linear-gradient(145deg,#8b3937,#491d1e 48%,#202628 49%,#373a37);
    filter:brightness(1.15)
}

.links a:focus-visible {
    outline:3px solid #fff;
    outline-offset:4px
}

@media(hover:hover) {
    .links a:hover {
        transform:translateY(-3px)
    }

}

@media(max-width:1100px) and (min-width:801px) {
    .nav {
        flex-direction:column;
        padding:12px 0
    }

    .links {
        justify-content:center
    }

    .links a {
        min-width:104px;
        min-height:58px
    }

}

@media(max-width:800px) {
    .links {
        gap:10px;
        align-items:stretch
    }

    .links a {
        width:100%;
        max-width:none;
        min-height:54px;
        clip-path:polygon(3% 0,97% 0,100% 20%,100% 78%,50% 100%,0 78%,0 20%)
    }

    .links.open {
        display:flex
    }

    .menu-toggle {
        cursor:pointer
    }

}

/* Fond du logo bien visible mais textes lisibles */
body {
    background:#0c0d0e url('images/logo-fond.png') center 105px / min(980px,95vw) auto fixed no-repeat
}

main {
    background:rgba(9,12,13,.68)
}

.intro,.band,.pagehead {
    background-color:rgba(16,20,20,.84)
}

.card,.feature,.form {
    background:rgba(22,27,27,.94)
}

.footer-banner img {
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain
}

@media(max-width:800px) {
    body {
        background-size:100vw auto;
        background-attachment:scroll
    }

}


/* ============================================================
   BANNIÈRE DE PIED DE PAGE : COORDONNÉES CÔTE À CÔTE
   La partie supérieure de l'image conserve le bouclier original.
   Les coordonnées sont du vrai texte HTML, lisible et cliquable.
   ============================================================ */
.footer-banner-art {
    width: 100%;
    aspect-ratio: 2048 / 585;
    background-image: url("images/banniere-pied.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.footer-banner-contacts {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 24px;
    padding: 18px 24px;
    background: #151112;
    border-top: 3px solid #8d623b;
    border-bottom: 2px solid #8d623b;
    line-height: 1.4;
}

.banner-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #f0dfc3;
    font-size: clamp(13px, 1.7vw, 20px);
    text-align: left;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.banner-contact strong {
    color: #cba66e;
    font-weight: bold;
}

.banner-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 2px solid #ac8155;
    border-radius: 50%;
    background: #32191a;
    color: #f1dfc0;
    font-size: 26px;
}

.banner-contact:hover,
.banner-contact:focus-visible {
    color: white;
    text-decoration: underline;
}

@media (max-width: 650px) {
    .footer-banner-contacts {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }

    .banner-contact {
        justify-content: flex-start;
        font-size: 15px;
    }
}

/* Bannière complète : conserve les inscriptions métalliques de l’image. */
.footer-banner { width: 100%; line-height: 0; }
.footer-banner img { display: block; width: 100%; height: auto; max-width: 100%; }

/* Champ anti-robot : invisible pour les visiteurs */
.honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}