/* =============================================================
   Aides & Handicap Belgique — feuille de style
   Objectif : accessibilité WCAG 2.1 AA, sobre, responsive mobile-first.
   ============================================================= */

:root {
    --color-text: #1a1c1f;
    --color-text-soft: #43474d;
    --color-bg: #ffffff;
    --color-bg-alt: #f2f5f8;
    --color-primary: #0b5c8a;       /* bleu, contraste AA sur blanc */
    --color-primary-dark: #08466a;
    --color-accent: #7a2e8a;
    --color-border: #c9d2da;
    --color-danger: #a4241a;
    --color-success: #1f6b3b;
    --color-focus: #cc5500;         /* orange focus, très visible */
    --radius: 8px;
    --maxw: 1080px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Préférence utilisateur : réduire les animations */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

* { box-sizing: border-box; }

html { font-size: 100%; }        /* respecte le zoom / taille système */

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1.0625rem;         /* ~17px, lisible */
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }

/* --- Lien d'évitement (skip link) --- */
.skip-link {
    position: absolute; left: -999px; top: 0;
    background: var(--color-primary-dark); color: #fff;
    padding: .75rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Focus visible partout --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

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

/* --- En-tête --- */
.site-header { background: var(--color-primary-dark); color: #fff; }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; }
.logo { color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.main-nav a, .admin-nav a { color: #fff; text-decoration: none; margin-left: 1rem; padding: .5rem 0; display: inline-block; }
.main-nav a:hover { text-decoration: underline; }

/* --- Bandeau d'avertissement --- */
.disclaimer { background: #fff4e5; border-bottom: 1px solid #e6c68a; color: #4a3402; font-size: .95rem; }
.disclaimer .container { padding-top: .6rem; padding-bottom: .6rem; }

/* --- Contenu --- */
.main-content { padding: 1.5rem 1rem 3rem; }
h1 { font-size: 1.9rem; line-height: 1.25; margin: .2rem 0 1rem; }
h2 { font-size: 1.35rem; margin: 1.75rem 0 .75rem; }
h3 { font-size: 1.1rem; margin: 1rem 0 .5rem; }

.hero .lead { font-size: 1.15rem; color: var(--color-text-soft); }

/* --- Cartes / sections --- */
.card {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin: 1.25rem 0;
}

.info-columns { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 720px) { .info-columns { grid-template-columns: 1fr 1fr; } }

/* --- Formulaire de filtres --- */
.form-help { color: var(--color-text-soft); margin-top: 0; }

/* Sections du formulaire de filtres */
.filter-section { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.1rem 1.25rem; margin: 0 0 1.25rem; min-width: 0; }
.filter-section > legend { font-weight: 700; font-size: 1.05rem; padding: 0 .5rem; color: var(--color-primary-dark); }
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .form-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .form-grid { grid-template-columns: 1fr 1fr 1fr; } }
.field { display: flex; flex-direction: column; }
.field-wide { grid-column: 1 / -1; }
.field-control { display: flex; flex-direction: column; }

/* Alignement des champs sur une même ligne, même si un libellé passe sur
   deux lignes : chaque champ partage deux pistes (libellé, champ) de la
   grille parente via subgrid, ce qui aligne tous les champs par le haut.
   Repli automatique vers la disposition flex si subgrid non supporté. */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 620px) {
        .form-grid > .field {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 2;
            row-gap: .35rem;
        }
        .form-grid > .field > label { margin-bottom: 0; }
        /* Les champs gardent leur hauteur naturelle (pas d'étirement vertical
           quand un voisin de la même ligne est plus haut à cause d'un texte
           d'aide) et s'alignent en haut de leur cellule. */
        .form-grid > .field > select,
        .form-grid > .field > input,
        .form-grid > .field > .field-control { align-self: start; }
    }
}
label { font-weight: 600; margin-bottom: .35rem; }
.hint { font-weight: 400; color: var(--color-text-soft); font-size: .9rem; }
.req { color: var(--color-danger); }

input, select, textarea {
    font: inherit;
    padding: .6rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--color-text);
    min-height: 44px;             /* cible tactile confortable */
}
textarea { min-height: auto; }

/* --- Boutons --- */
.btn {
    display: inline-block;
    font: inherit; font-weight: 600;
    padding: .7rem 1.2rem;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer; text-decoration: none;
    min-height: 44px;
}
.btn-primary { background: var(--color-primary-dark); color: #fff; }
.btn-primary:hover { background: #05304a; }
.btn-ghost { background: #fff; color: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-ghost:hover { background: var(--color-bg-alt); }
.btn-block { width: 100%; }
.btn-sm { padding: .4rem .8rem; min-height: auto; }
.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

/* --- Résultats --- */
.results-count { font-size: 1.15rem; background: var(--color-bg-alt); padding: .75rem 1rem; border-radius: var(--radius); }
/* Encadré « faire reconnaître son handicap » */
.recognition-callout { border: 2px solid var(--color-primary); background: #eef4f8; border-radius: var(--radius); padding: 1.1rem 1.25rem; margin: 1rem 0 1.5rem; }
.recognition-callout h2 { margin-top: 0; font-size: 1.2rem; color: var(--color-primary-dark); }
.recognition-callout p { margin: .5rem 0; }
.recognition-count { font-size: 1.1rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: .6rem .8rem; }
.recognition-callout .btn { margin-top: .5rem; }

.filter-toggle { margin: 1rem 0; }
.filter-toggle summary { cursor: pointer; font-weight: 600; padding: .5rem 0; }
.category-heading { border-bottom: 2px solid var(--color-border); padding-bottom: .3rem; }
.aide-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .aide-list { grid-template-columns: 1fr 1fr; } }
.aide-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.1rem; background: #fff; }
.aide-card h3 { margin-top: 0; }
.aide-meta { margin: .25rem 0 .6rem; }
.tag { display: inline-block; background: #e6eef4; color: #08466a; border-radius: 999px; padding: .15rem .7rem; font-size: .85rem; margin-right: .35rem; }
.tag-region { background: #efe4f2; color: #5b2168; }
.aide-desc { color: var(--color-text-soft); margin: .4rem 0; }
.link-more { font-weight: 600; }
.results-disclaimer, .date-maj, .results-count[role="status"] { color: var(--color-text-soft); }
.results-disclaimer { font-size: .95rem; margin-top: 2rem; border-top: 1px solid var(--color-border); padding-top: 1rem; }
.empty-state { text-align: left; }

/* --- Fiche détail --- */
.breadcrumb { font-size: .9rem; color: var(--color-text-soft); margin-bottom: 1rem; }
.aide-detail section { margin-bottom: 1.5rem; }
.contact-box { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.1rem; }
.org-name { font-weight: 700; margin: 0 0 .5rem; }
.contact-list { margin: 0; padding-left: 1.1rem; }
.date-maj { font-size: .95rem; background: #fff4e5; border: 1px solid #e6c68a; padding: .6rem .8rem; border-radius: var(--radius); }

/* --- Pied de page --- */
.site-footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); margin-top: 2rem; }
.footer-inner { padding: 1.5rem 1rem; }
.footer-inner nav a { margin-right: 1.25rem; display: inline-block; padding: .35rem 0; }
.footer-note { color: var(--color-text-soft); font-size: .9rem; }

/* =============================================================
   Espace administration
   ============================================================= */
.admin-header { background: #12232f; color: #fff; }
.admin-header-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .6rem 1rem; }
.admin-nav { flex: 1; }
.admin-nav a { margin-left: 0; margin-right: 1rem; }
.admin-account { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.admin-account-link { color: #fff; text-decoration: none; font-size: .95rem; padding: .35rem 0; }
.admin-account-link:hover { text-decoration: underline; }
.logout-form { display: flex; align-items: center; gap: .5rem; }
.admin-user { color: #cdd7de; font-size: .9rem; }
.admin-main { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 1rem 0 2rem; }
.stat { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; text-align: center; }
.stat-num { display: block; font-size: 2rem; font-weight: 700; color: var(--color-primary-dark); }
.stat-label { color: var(--color-text-soft); font-size: .9rem; }

.data-table { width: 100%; border-collapse: collapse; margin-top: 1rem; background: #fff; }
.data-table th, .data-table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.data-table th { background: var(--color-bg-alt); }
.row-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.row-actions form { display: inline; }
.link-danger { background: none; border: none; color: var(--color-danger); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.badge { padding: .1rem .6rem; border-radius: 999px; font-size: .8rem; }
.badge-on { background: #dff0e4; color: var(--color-success); }
.badge-off { background: #eee; color: #555; }

.admin-form { max-width: 760px; }
.admin-form .field { margin-bottom: 1rem; }
.form-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 680px) { .form-row { grid-template-columns: repeat(3, 1fr); } }
.field-check { justify-content: flex-end; }
.field-check label { display: flex; align-items: center; gap: .5rem; font-weight: 400; }

.criteria-box { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; margin: 1.5rem 0; }
.criteria-box legend { font-weight: 700; padding: 0 .4rem; }
.criteria-group { margin-bottom: 1rem; }
.criteria-group h3 { margin: .5rem 0; font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-soft); }
.criteria-checks { display: grid; gap: .4rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .criteria-checks { grid-template-columns: 1fr 1fr; } }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.check input { min-height: auto; }

/* --- Guide administrateur (rendu Markdown) --- */
.doc { max-width: 900px; }
.doc h2 { border-bottom: 2px solid var(--color-border); padding-bottom: .25rem; margin-top: 2rem; }
.doc h3 { margin-top: 1.5rem; }
.doc table { width: 100%; border-collapse: collapse; margin: 1rem 0; background: #fff; display: block; overflow-x: auto; }
.doc th, .doc td { border: 1px solid var(--color-border); padding: .5rem .6rem; text-align: left; vertical-align: top; }
.doc th { background: var(--color-bg-alt); }
.doc code { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 4px; padding: .05rem .3rem; font-size: .9em; }
.doc blockquote { margin: 1rem 0; padding: .6rem 1rem; border-left: 4px solid var(--color-primary); background: #eef4f8; border-radius: 0 var(--radius) var(--radius) 0; }
.doc blockquote p { margin: 0; }
.doc ul, .doc ol { padding-left: 1.4rem; }
.doc li { margin: .25rem 0; }
.doc li.task { list-style: none; margin-left: -1.1rem; }
.doc .chk { display: inline-block; width: 1.1em; }
.doc hr { border: none; border-top: 1px solid var(--color-border); margin: 2rem 0; }

/* --- Messages flash --- */
.flash { padding: .8rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid; }
.flash-success { background: #dff0e4; border-color: #a7d3b6; color: var(--color-success); }
.flash-error { background: #fbe3e1; border-color: #e5aaa4; color: var(--color-danger); }
.flash-info { background: #e6eef4; border-color: #b6cadb; color: #08466a; }

/* --- Connexion admin --- */
.admin-bare { background: var(--color-bg-alt); }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2rem; width: 100%; max-width: 400px; }
.login-card .field { margin-bottom: 1rem; }
.login-back { margin-top: 1rem; font-size: .9rem; }