:root {
    --pub-encre: #21302b;
    --pub-encre-2: #55645e;
    --pub-papier: #fbfaf7;
    --pub-papier-2: #f1efe8;
    --pub-filet: #dcd9cf;
    --pub-accent: #2f5d50;
    --pub-police: "Atkinson Hyperlegible Next", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

.pub {
    margin: 0;
    background: var(--pub-papier);
    color: var(--pub-encre);
    font: 400 1rem/1.6 var(--pub-police);
}

.pub__tete {
    border-bottom: 1px solid var(--pub-filet);
    background: var(--pub-papier);
}

.pub__saturer {
    max-width: 72rem;
    margin: 0 auto;
    padding: .9rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.pub__marque {
    display: flex;
    align-items: center;
    gap: .8rem;
    text-decoration: none;
    color: var(--pub-encre);
    font-weight: 600;
}

.pub__marque img {
    width: auto;
    height: 3rem;
    max-width: 4.5rem;
    object-fit: contain;
}

.pub__initiale {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--pub-filet);
    border-radius: 6px;
    background: var(--pub-papier-2);
    font: 700 1.5rem/1 var(--pub-police);
}

.pub__nav {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}

.pub__nav a {
    padding: .45rem .8rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--pub-encre-2);
    font-size: .95rem;
}

.pub__nav a:hover {
    background: var(--pub-papier-2);
    color: var(--pub-encre);
}

.pub__corps {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2.4rem 1.2rem 3.6rem;
}

.pub__hero {
    max-width: 44rem;
    margin-bottom: 2.4rem;
}

.pub__hero h1 {
    margin: 0 0 .8rem;
    font: 700 2rem/1.2 var(--pub-police);
    color: var(--pub-encre);
}

.pub__hero p {
    margin: 0;
    color: var(--pub-encre-2);
}

.pub__grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
}

.pub__carte {
    display: block;
    padding: 1.2rem;
    border: 1px solid var(--pub-filet);
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    color: var(--pub-encre);
}

a.pub__carte:hover {
    border-color: var(--pub-accent);
}

.pub__carte h2 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    color: var(--pub-accent);
}

.pub__carte p {
    margin: 0;
    color: var(--pub-encre-2);
    font-size: .92rem;
}

.pub__section {
    margin-top: 1.8rem;
}

.pub__section h2 {
    margin: 0 0 1rem;
    font: 700 1.3rem/1.3 var(--pub-police);
}

.pub__defile {
    overflow-x: auto;
    position: relative;
}

.pub__table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--pub-filet);
    border-radius: 8px;
}

.pub__table th {
    text-align: left;
    padding: .6rem .9rem;
    background: var(--pub-papier-2);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pub-encre-2);
}

.pub__table td {
    padding: .6rem .9rem;
    border-top: 1px solid var(--pub-filet);
}

.pub__tarifs {
    margin: .8rem 0 0;
    display: grid;
    gap: .3rem;
}

.pub__tarifs div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .92rem;
}

.pub__tarifs dt {
    color: var(--pub-encre-2);
}

.pub__tarifs dd {
    margin: 0;
    font-weight: 600;
}

.pub__contact {
    margin: 0;
    display: grid;
    gap: 1rem;
    max-width: 30rem;
}

.pub__contact dt {
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pub-encre-2);
}

.pub__contact dd {
    margin: .15rem 0 0;
}

.pub__contact a {
    color: var(--pub-accent);
}

.pub__pied {
    border-top: 1px solid var(--pub-filet);
    background: var(--pub-papier-2);
    color: var(--pub-encre-2);
    font-size: .88rem;
}

.pub__pied p {
    max-width: 72rem;
    margin: 0 auto;
    padding: .3rem 1.2rem;
}

@media (max-width: 640px) {
    .pub__saturer {
        flex-direction: column;
        align-items: flex-start;
    }
}

.pub .f-champ{display:grid;gap:.3rem;margin:0 0 .9rem;font-size:.95rem;max-width:22rem}
.pub .f-champ label{color:var(--pub-encre-2)}
.pub .f-champ input{font:inherit;padding:.45rem .6rem;border:1px solid var(--pub-filet);border-radius:6px;background:#fff;color:var(--pub-encre)}
.pub .f-champ ul{margin:0;padding:0;list-style:none;color:#8c3b2e;font-size:.82rem}
.pub .f-actions{display:flex;gap:.5rem}
.pub .b{font:inherit;font-size:.9rem;padding:.5rem 1rem;border:1px solid var(--pub-accent);border-radius:6px;background:var(--pub-accent);color:#fff;cursor:pointer}
.pub__refus{max-width:22rem;padding:.7rem .9rem;border:1px solid #e0c7c2;border-radius:6px;background:#f9efed;color:#8c3b2e}
.pub__defunts{margin:.4rem 0 0;padding-left:1.2rem}
.pub__carte--statique h3{margin:1rem 0 .2rem;font-size:.95rem;color:var(--pub-encre-2)}

.evitement {
    position: absolute;
    left: .6rem;
    top: -4rem;
    z-index: 10;
    padding: .45rem .8rem;
    border: 2px solid var(--pub-accent);
    border-radius: 6px;
    background: var(--pub-papier);
    color: var(--pub-encre);
    font-weight: 700;
}

.evitement:focus {
    top: .6rem;
}

.pub :focus-visible {
    outline: 3px solid var(--pub-accent);
    outline-offset: 2px;
}