:root {
    --color-primary: #3182CE;
    --color-primary-dark: #2b6cb0;
    --color-accent: #f76a0c;
    --color-text: #1A202C;
    --color-text-light: #4A5568;
    --color-bg-light: #EDF2F7;
    --color-bg-lighter: #F7FAFC;
    --color-white: #ffffff;
    --radius: 10px;
    --max-width: 1200px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--color-text);
    background: var(--color-white);
    line-height: 1.6;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

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

h1, h2, h3, h4, h5 {
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text);
}
h1 { font-size: 2.4rem; margin: 0.4em 0; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.3rem; }

/* --- Header --- */
.site-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-bg-light);
    position: sticky;
    top: 0;
    z-index: 10;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px;
}
.brand {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-primary);
}
.brand:hover { color: var(--color-accent); text-decoration: none; }
.main-nav { display: flex; gap: 28px; }
.main-nav a {
    color: var(--color-text);
    font-weight: 500;
}
.main-nav a:hover { color: var(--color-accent); text-decoration: none; }

/* --- Main content wrapper --- */
main { min-height: 60vh; }
main > *:not(.hero):not(.ai-search-zone) { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* --- Hero (accueil) --- */
.hero {
    background: linear-gradient(135deg, var(--color-bg-light), var(--color-bg-lighter));
    padding: 64px 24px 48px;
    text-align: center;
}
.hero img { max-width: 200px; border-radius: var(--radius); margin-bottom: 16px; }
.hero h1 { font-size: 2.6rem; }
.hero p, .hero div { max-width: 760px; margin: 0 auto; color: var(--color-text-light); }

/* --- Zone IA --- */
.ai-search-zone {
    background: var(--color-white);
    border: 2px solid var(--color-bg-light);
    border-radius: var(--radius);
    max-width: 640px;
    margin: -32px auto 48px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(26, 32, 44, 0.08);
    text-align: center;
    position: relative;
}
.ai-search-form {
    display: flex;
    gap: 8px;
}
.ai-search-form input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--color-bg-light);
    border-radius: 999px;
    font-size: 1rem;
}
.ai-search-form input:disabled { background: var(--color-bg-lighter); color: var(--color-text-light); }
.ai-search-form button {
    padding: 12px 24px;
    border: none;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: 600;
    cursor: not-allowed;
    opacity: 0.6;
}
.ai-search-note {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--color-text-light);
}
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}

/* --- Listes de pages (catégories, chapitres, sous-sections) --- */
main ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin: 24px 0 48px;
}
main ul li {
    background: var(--color-bg-lighter);
    border-radius: var(--radius);
    padding: 18px 20px;
    transition: background 0.15s, transform 0.15s;
}
main ul li:hover {
    background: var(--color-bg-light);
    transform: translateY(-2px);
}
main ul li a {
    color: var(--color-text);
    font-weight: 600;
    display: block;
}
main ul li a:hover { color: var(--color-accent); text-decoration: none; }

/* --- Pages simples / fiches / questions --- */
main article, main > div > h1 + * {
    max-width: 760px;
}

/* --- Prestataires --- */
main img.provider-logo, main > *:not(.hero) img {
    max-width: 100%;
    border-radius: var(--radius);
}

/* --- Footer --- */
.site-footer {
    background: var(--color-text);
    color: var(--color-bg-lighter);
    padding: 24px 0;
    margin-top: 64px;
    font-size: 0.9rem;
    text-align: center;
}
.site-footer a { color: var(--color-bg-lighter); }

/* --- Responsive --- */
@media (max-width: 640px) {
    .header-inner { flex-direction: column; gap: 12px; }
    .main-nav { flex-wrap: wrap; justify-content: center; gap: 16px; }
    .hero h1 { font-size: 1.8rem; }
    .ai-search-form { flex-direction: column; }
}

.brand-logo { height: 42px; width: auto; display: block; }
.provider-card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 24px 0 48px; }
.provider-card-list li { background: var(--color-bg-lighter); border-radius: var(--radius); overflow: hidden; transition: transform 0.15s; }
.provider-card-list li:hover { transform: translateY(-2px); }
.provider-card-list img { width: 100%; height: 140px; object-fit: cover; display: block; }
.provider-card-list a { display: block; padding: 14px 16px; font-weight: 600; color: var(--color-text); }
.provider-card-list a:hover { color: var(--color-accent); text-decoration: none; }

/* Liens "info-box" du contenu importé (ex: Trouvez ce dont vous avez besoin) */
.homepage-body a:has(> h3) {
    display: inline-block;
    background: var(--color-bg-lighter);
    border-radius: var(--radius);
    padding: 14px 22px;
    margin: 6px 10px 6px 0;
    font-weight: 600;
    color: var(--color-text);
}
.homepage-body a:has(> h3):hover {
    background: var(--color-bg-light);
    color: var(--color-accent);
    text-decoration: none;
    transform: translateY(-2px);
}
.homepage-body a:has(> h3) h3 { margin: 0; font-size: 1rem; }
.homepage-body a:has(> h3) p:empty { display: none; }