/* Site par défaut leoueb : couleurs reprises du logo (vert / bleu), mode sombre automatique. */
:root {
    --bg: #f3f6f8;
    --surface: #ffffff;
    --border: #e1e7ec;
    --text: #1d2733;
    --muted: #63707f;
    --vert: #8cb81a;
    --bleu: #00a3e0;
    --lien: #0077a8;
    --lien-hover: #005f87;
    --radius: 14px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1b222b;
        --surface: #252e39;
        --border: #36414e;
        --text: #e2e8ee;
        --muted: #9eabb9;
        --lien: #4cc3f0;
        --lien-hover: #7ed4f4;
    }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 var(--font);
}

.page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.carte {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 40px 32px 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
    text-align: center;
    overflow: hidden;
}

/* Liseré aux couleurs du logo */
.carte::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--vert), var(--bleu));
}

.logo { display: block; margin: 0 auto 20px; width: 100%; max-width: 260px; height: auto; }

h1 { margin: 0; font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; }
h2 { margin: 28px 0 8px; font-size: 1.05rem; }

.accroche { margin: 6px 0 28px; color: var(--muted); }

a { color: var(--lien); text-decoration: none; }
a:hover { color: var(--lien-hover); text-decoration: underline; }

.contact {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    border-top: 1px solid var(--border);
    text-align: left;
}

.contact li {
    display: flex;
    gap: 16px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
}

.contact:last-child { margin-bottom: 0; }

.etiquette { flex: 0 0 90px; color: var(--muted); font-size: .9rem; padding-top: 1px; }
.contact a, .contact span:not(.etiquette) { overflow-wrap: anywhere; }

.bouton {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--lien);
    color: #fff;
    font-weight: 600;
}
.bouton:hover { background: var(--lien-hover); color: #fff; text-decoration: none; }

@media (prefers-color-scheme: dark) {
    .bouton, .bouton:hover { color: #0f1a24; }
}

/* Mentions légales */
.texte { max-width: 640px; text-align: left; }
.retour { display: inline-block; margin-bottom: 16px; font-size: .9rem; }
.mentions { margin: 20px 0 0; }
.mentions dt { margin-top: 12px; color: var(--muted); font-size: .85rem; }
.mentions dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.texte p { color: var(--muted); }

.pied {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 16px 28px;
    color: var(--muted);
    font-size: .85rem;
}
.pied a { color: var(--muted); }

@media (max-width: 480px) {
    .carte { padding: 32px 20px 24px; }
    .etiquette { flex-basis: 76px; }
}