/*
 * WorldQuiz : feuille de style unique.
 *
 * Pas de build, pas de framework. Les couleurs sont declarees une fois en
 * tokens, et le theme sombre ne redefinit que les tokens.
 */

:root {
    --lime: #BFF47B;
    --lime-dark: #9BD44F;
    --dark: #262E36;
    --dark-soft: #333D47;

    --bg: #FBFCF9;
    --surface: #FFFFFF;
    --surface-alt: #F2F5EE;
    --border: #DCE2D6;
    --text: #262E36;
    --text-muted: #5C6670;
    --accent: var(--lime-dark);
    --accent-contrast: #1B2229;

    --danger: #C0392B;
    --danger-bg: #FBEAE8;
    --success: #2E7D46;
    --success-bg: #E8F3EB;
    --info: #2A5C8A;
    --info-bg: #E7EFF7;
    --warning: #8A6116;
    --warning-bg: #FBF2DF;

    --radius: 10px;
    --radius-lg: 16px;
    --shadow: 0 1px 2px rgba(38, 46, 54, .06), 0 4px 16px rgba(38, 46, 54, .06);
    --wrap: 1120px;

    --font-title: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    --font-body: "Open Sans", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #1B2229;
        --surface: #262E36;
        --surface-alt: #2F3941;
        --border: #3C4650;
        --text: #EEF2EC;
        --text-muted: #A3ADB6;
        --accent: var(--lime);
        --accent-contrast: #1B2229;

        --danger: #F0918A;
        --danger-bg: #3A2624;
        --success: #8CD3A2;
        --success-bg: #22332A;
        --info: #93BEE6;
        --info-bg: #22303C;
        --warning: #E8C57C;
        --warning-bg: #37301F;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-title); line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.lede { font-size: 1.1rem; color: var(--text-muted); }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--accent); color: var(--accent-contrast);
    padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* --- En-tete ----------------------------------------------------------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.header-inner { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: .85rem 0; }
.brand { display: flex; flex-direction: column; text-decoration: none; }
.brand-name { font-family: var(--font-title); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; }
.brand-tagline { font-size: .78rem; color: var(--text-muted); }
.main-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-inline-end: auto; }
.main-nav a { text-decoration: none; font-weight: 600; font-size: .95rem; padding: .3rem 0; border-bottom: 2px solid transparent; }
.main-nav a:hover { border-bottom-color: var(--border); }
.main-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.inline-form { display: inline; }

.lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.lang-button {
    background: transparent; border: 0; cursor: pointer; padding: .35rem .6rem;
    font: inherit; font-size: .8rem; font-weight: 700; color: var(--text-muted);
}
.lang-button.is-active { background: var(--accent); color: var(--accent-contrast); }

/* --- Boutons ----------------------------------------------------------- */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--accent); color: var(--accent-contrast);
    border: 1px solid transparent; border-radius: var(--radius);
    padding: .55rem 1.1rem; font: inherit; font-weight: 600; font-size: .95rem;
    text-decoration: none; cursor: pointer; transition: filter .15s ease;
}
.button:hover { filter: brightness(1.05); }
.button-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.button-danger { background: var(--danger); color: #fff; }
.button:disabled { opacity: .5; cursor: not-allowed; }

/* --- Messages ---------------------------------------------------------- */
.flashes { margin-top: 1rem; }
.flash { border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: .5rem; border: 1px solid transparent; }
.flash-success { background: var(--success-bg); color: var(--success); border-color: currentColor; }
.flash-error   { background: var(--danger-bg);  color: var(--danger);  border-color: currentColor; }
.flash-info    { background: var(--info-bg);    color: var(--info);    border-color: currentColor; }
.flash-warning { background: var(--warning-bg); color: var(--warning); border-color: currentColor; }

/* --- Contenu ----------------------------------------------------------- */
.site-main { padding: 2.5rem 0 4rem; min-height: 60vh; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow); }
.grid { display: grid; gap: 1.25rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: start; padding: .6rem .75rem; border-bottom: 1px solid var(--border); }
th { font-family: var(--font-title); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }

.badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--surface-alt); color: var(--text-muted); }

/* Mention affichee quand une traduction allemande manque. Un espace vide
   serait pris pour un bug, masquer le contenu priverait de l'information. */
.translation-missing { font-size: .8rem; color: var(--warning); background: var(--warning-bg); padding: .15rem .45rem; border-radius: 4px; }

/* Credits d'image : jamais masques, jamais optionnels. */
.image-credit { font-size: .78rem; color: var(--text-muted); margin-top: .35rem; }

/* --- Erreurs ----------------------------------------------------------- */
.error-page { text-align: center; padding: 4rem 0; }
.error-code { font-family: var(--font-title); font-size: 4rem; font-weight: 700; color: var(--accent); margin: 0; line-height: 1; }

/* --- Pied de page ------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 2rem 0; }
.footer-inner { display: flex; flex-direction: column; gap: .75rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-nav a { font-size: .9rem; text-decoration: none; color: var(--text-muted); }
.footer-note { font-size: .82rem; color: var(--text-muted); margin: 0; }

@media (max-width: 720px) {
    .header-inner { gap: .75rem; }
    .main-nav { order: 3; width: 100%; }
}

/* --- Accueil ----------------------------------------------------------- */
.hero { padding: 1rem 0 2.5rem; max-width: 46rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.notice {
    margin-top: 1.5rem; padding: .9rem 1.1rem;
    background: var(--info-bg); color: var(--info);
    border: 1px solid currentColor; border-radius: var(--radius);
}

.home-stats { margin-bottom: 2rem; }
.stat-value { font-family: var(--font-title); font-size: 2.4rem; font-weight: 700; line-height: 1; margin: 0 0 .25rem; color: var(--accent); }
.stat-label { margin: 0; color: var(--text-muted); font-size: .9rem; }
.home-source { max-width: 46rem; }

/* --- Etats de diagnostic ----------------------------------------------- */
.badge-ok { background: var(--success-bg); color: var(--success); }
.badge-ko { background: var(--danger-bg); color: var(--danger); }

/* --- Referentiel d'especes --------------------------------------------- */
.filters { margin-bottom: 2rem; }
.filters-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.filters label { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; font-weight: 600; }
.filters-actions { display: flex; gap: .6rem; margin-top: 1.25rem; }

input[type="search"], input[type="text"], input[type="email"], input[type="password"],
input[type="file"], select, textarea {
    font: inherit; padding: .5rem .7rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg); color: var(--text); width: 100%;
}
.field-hint { font-size: .85rem; color: var(--text-muted); margin: .5rem 0 1rem; }

.species-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: .5rem 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.species-list li { border-bottom: 1px solid var(--border); padding: .5rem 0; }
.species-list a { text-decoration: none; }
.species-list a:hover em { text-decoration: underline; text-decoration-color: var(--accent); }

.pagination { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }

.species-sheet h1 { margin-bottom: .25rem; }
.species-placeholder {
    background: var(--surface-alt); border: 1px dashed var(--border);
    border-radius: var(--radius-lg); padding: 2rem; margin: 1.5rem 0;
    text-align: center; color: var(--text-muted); font-size: .9rem;
}
.tag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.source-block { margin-top: 2rem; }
.source-reference { font-size: .9rem; color: var(--text-muted); }
.source-meta { font-size: .85rem; color: var(--text-muted); margin: 0; }

/* Les cartes d'une grille gardent une hauteur naturelle. */
.grid .card h2 { font-size: 1rem; margin-bottom: .75rem; }

/* --- Choix du perimetre ------------------------------------------------ */
.level-choice { border: 0; padding: 0; margin: 0 0 1.5rem; }
.level-choice legend { font-family: var(--font-title); font-weight: 700; margin-bottom: .75rem; padding: 0; }
.level-option {
    display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem;
    align-items: baseline; padding: .9rem 1rem; margin-bottom: .6rem;
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
}
.level-option:has(input:checked) { border-color: var(--accent); background: var(--surface-alt); }
.level-option.is-disabled { opacity: .55; cursor: not-allowed; }
.level-option input { grid-row: span 3; }
.level-name { font-weight: 700; font-family: var(--font-title); }
.level-meta, .level-description { grid-column: 2; font-size: .88rem; color: var(--text-muted); }
.badge-warn { background: var(--warning-bg); color: var(--warning); }

/* --- Serie -------------------------------------------------------------- */
.quiz-wrap { max-width: 46rem; margin-inline: auto; }
.quiz { padding: 1.75rem; }
.quiz-header { margin-bottom: 1.5rem; }
.quiz-progress { font-size: .85rem; color: var(--text-muted); margin: 0 0 .5rem; }
.quiz-bar { height: 6px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.quiz-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s ease; }
.quiz-discovery { font-size: .85rem; color: var(--text-muted); border-left: 3px solid var(--border); padding-left: .75rem; }
.quiz-prompt { font-family: var(--font-title); font-size: 1.25rem; line-height: 1.4; margin: 1rem 0 1.5rem; }

.quiz-options { display: grid; gap: .6rem; }
.quiz-option {
    display: flex; align-items: center; gap: .75rem;
    padding: .8rem 1rem; border: 1px solid var(--border);
    border-radius: var(--radius); cursor: pointer;
}
.quiz-option:hover { border-color: var(--text-muted); }
.quiz-option:has(input:checked) { border-color: var(--accent); background: var(--surface-alt); }
.quiz-option.is-correct { border-color: var(--success); background: var(--success-bg); }
.quiz-option.is-wrong:has(input:checked) { border-color: var(--danger); background: var(--danger-bg); }
.quiz-input { font-size: 1.05rem; }

.quiz-feedback { margin-top: 1.5rem; padding: 1rem 1.15rem; border-radius: var(--radius); border: 1px solid transparent; }
.quiz-feedback.is-correct { background: var(--success-bg); border-color: var(--success); }
.quiz-feedback.is-wrong { background: var(--danger-bg); border-color: var(--danger); }
.quiz-feedback.is-error { background: var(--warning-bg); border-color: var(--warning); }
.quiz-verdict { font-weight: 700; margin: 0 0 .5rem; }
.quiz-explanation { font-size: .92rem; margin: .5rem 0; }
.quiz-species-link { font-style: italic; font-size: .9rem; }
.quiz-actions { display: flex; gap: .6rem; margin-top: 1.5rem; flex-wrap: wrap; }

/* --- Recapitulatif ------------------------------------------------------ */
.summary-score { text-align: center; margin-bottom: 2rem; }
.summary-cta { margin-bottom: 2rem; border-color: var(--accent); }
.summary-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.summary-item {
    background: var(--surface); border: 1px solid var(--border);
    border-inline-start: 4px solid var(--border);
    border-radius: var(--radius); padding: 1.15rem 1.35rem;
}
.summary-item.is-correct { border-inline-start-color: var(--success); }
.summary-item.is-wrong { border-inline-start-color: var(--danger); }
.summary-item.is-skipped { border-inline-start-color: var(--warning); }
.summary-state { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .5rem; color: var(--text-muted); }
.summary-prompt { font-weight: 600; margin-bottom: .75rem; }
.summary-options { list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; gap: .3rem; }
.summary-options li { display: flex; align-items: baseline; gap: .5rem; font-size: .93rem; color: var(--text-muted); }
.summary-options li.is-correct { color: var(--success); font-weight: 600; }
.summary-mark { font-size: .8rem; }
.summary-given, .summary-correct { font-size: .93rem; margin: .25rem 0; }
.summary-correct { font-weight: 600; }
.summary-explanation { font-size: .9rem; color: var(--text-muted); border-left: 3px solid var(--border); padding-left: .75rem; margin: .75rem 0; }
.summary-actions { margin-top: 2rem; }

/* --- Formulaires de compte --------------------------------------------- */
.narrow { max-width: 34rem; }
.card label { display: block; margin-bottom: 1.1rem; }
.card label > span:first-child { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.card h2, .card h3 { margin-top: 1.5rem; }
.card h2:first-child, .card h3:first-child { margin-top: 0; }

.form-errors {
    list-style: none; padding: .9rem 1.1rem; margin: 0 0 1.25rem;
    background: var(--danger-bg); color: var(--danger);
    border: 1px solid currentColor; border-radius: var(--radius);
}
.form-errors li + li { margin-top: .35rem; }
.resend { border-color: var(--warning); }
.danger-zone { border-color: var(--danger); }
.danger-zone h2 { color: var(--danger); }

/* --- Types de quiz ------------------------------------------------------ */
.type-choice { border: 0; padding: 0; margin: 0 0 1.5rem; }
.type-choice legend { font-family: var(--font-title); font-weight: 700; margin-bottom: .5rem; padding: 0; }
.type-option {
    display: grid; grid-template-columns: auto 1fr auto; gap: .2rem .75rem;
    align-items: baseline; padding: .8rem 1rem; margin-bottom: .5rem;
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
}
.type-option:has(input:checked) { border-color: var(--accent); background: var(--surface-alt); }
.type-option.is-disabled { opacity: .5; cursor: not-allowed; }
.type-name { font-weight: 700; }
.type-meta { font-size: .82rem; color: var(--text-muted); text-align: end; }
.type-description { grid-column: 2 / -1; font-size: .85rem; color: var(--text-muted); }

/* --- Cartes de revision ------------------------------------------------- */
.revision-header { margin-bottom: 1.25rem; }
.revision-box { font-size: .85rem; color: var(--text-muted); margin: .5rem 0 0; }

/* La scene porte la perspective : sans elle, la rotation serait plate et la
   carte donnerait l'impression de se plier plutot que de pivoter. */
.flashcard-scene { perspective: 1400px; }

.flashcard {
    /* Les deux faces occupent la meme cellule de grille : la carte prend donc
       la hauteur de la plus haute, sans positionnement absolu ni hauteur
       figee qui tronquerait une fiche bavarde. */
    display: grid;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.2, .7, .3, 1), box-shadow .55s ease;
    cursor: pointer;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.flashcard.is-flipped { transform: rotateY(180deg); cursor: default; }
.flashcard:not(.is-flipped):hover { box-shadow: 0 6px 28px rgba(38, 46, 54, .14); }
.flashcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.flashcard-face {
    grid-area: 1 / 1;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    min-height: 17rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.flashcard-front { text-align: center; }
.flashcard-back { transform: rotateY(180deg); text-align: start; }

.flashcard-hint {
    font-size: .78rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em;
    margin: 0 0 1rem;
}
.flashcard-back .flashcard-hint { font-style: italic; text-transform: none; letter-spacing: 0; font-size: .95rem; }
.flashcard-name { font-family: var(--font-title); font-size: clamp(1.5rem, 4.5vw, 2.3rem); margin: 0 0 1.5rem; line-height: 1.2; }
.flashcard-flip-hint { font-size: .82rem; color: var(--text-muted); margin: 0; }

.flashcard-line { margin: 0 0 .8rem; font-size: .98rem; }
.flashcard-line:last-child { margin-bottom: 0; }
.flashcard-label {
    display: block; font-size: .74rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: .15rem;
}

.flashcard-controls { animation: reveal .25s ease-out .2s backwards; }
.flashcard-sheet { text-align: center; font-size: .9rem; margin: 1.25rem 0 1rem; }
.flashcard-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.flashcard-actions button { flex: 1 1 12rem; }

@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Une rotation de plus d'un demi tour peut declencher un malaise chez les
   personnes sensibles au mouvement : on echange alors les faces sans animer. */
@media (prefers-reduced-motion: reduce) {
    .flashcard { transition: none; }
    .flashcard-controls { animation: none; }
}

.boxes-card { margin: 1.5rem 0; }
.boxes { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.box { text-align: center; padding: .9rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.box-number { display: block; font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.box-count { display: block; font-family: var(--font-title); font-size: 1.8rem; font-weight: 700; color: var(--accent); line-height: 1.2; }
.box-interval { display: block; font-size: .78rem; color: var(--text-muted); }

.revision-intro { max-width: 40rem; }

.notice-warning { background: var(--warning-bg); color: var(--warning); border-color: currentColor; }

/* --- Pied de page, credits --------------------------------------------- */
.footer-credits { font-size: .82rem; color: var(--text-muted); margin: 0; }
.footer-credits a { color: var(--text); text-decoration-color: var(--accent); }

/* --- Administration ----------------------------------------------------- */
.admin-tile { text-align: center; }
.admin-tile.is-active { border-color: var(--accent); }
.admin-tile .stat-value { color: var(--text-muted); }
.admin-tile.is-active .stat-value { color: var(--accent); }
.admin-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }

.status-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: 2rem 0 1rem; }
.status-tab {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem .9rem; border: 1px solid var(--border);
    border-radius: var(--radius); text-decoration: none; font-size: .9rem; font-weight: 600;
}
.status-tab.is-active { border-color: var(--accent); background: var(--surface-alt); }

.bulk-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; position: sticky; top: 4.5rem; z-index: 5; }
.bulk-all { display: flex; align-items: center; gap: .5rem; margin: 0; }
.bulk-all > span { font-weight: 600; }
.bulk-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.question-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .75rem; }
.question-item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.question-pick { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: 0; }
.question-prompt { font-weight: 600; margin: 0 0 .35rem; }
.question-de { font-weight: 400; color: var(--text-muted); font-size: .92rem; }
.question-options { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .2rem; }
.question-options li { display: flex; gap: .5rem; font-size: .9rem; color: var(--text-muted); }
.question-options li.is-correct { color: var(--success); font-weight: 600; }
.question-explanation { font-size: .88rem; color: var(--text-muted); border-left: 3px solid var(--border); padding-left: .7rem; margin: .5rem 0; }
.question-meta { font-size: .82rem; color: var(--text-muted); margin: .5rem 0 0; }

.arbitrate-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.arbitrate-item { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.arbitrate-label { font-family: var(--font-title); font-size: 1.1rem; font-weight: 700; margin: 0 0 .5rem; }
.arbitrate-species { list-style: none; padding: 0; margin: .75rem 0 0; font-size: .85rem; color: var(--text-muted); }
.arbitrate-choice { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .4rem; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.arbitrate-choice:has(input:checked) { border-color: var(--accent); background: var(--surface-alt); }
.arbitrate-input { margin: .3rem 0 1rem; }
.arbitrate-custom { margin-top: .8rem; }

@media (max-width: 720px) {
    .arbitrate-item { grid-template-columns: 1fr; }
    .question-item { grid-template-columns: 1fr; }
}

/* --- Pages editoriales -------------------------------------------------- */
.narrow-wide { max-width: 52rem; }
.prose h2 { margin-top: 2rem; font-size: 1.15rem; }
.prose ul { padding-inline-start: 1.2rem; }
.prose li { margin-bottom: .4rem; }
.donate-details { margin: 0; }
.donate-details dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-top: .8rem; }
.donate-details dd { margin: .15rem 0 0; font-weight: 600; }
.donate-details code { background: var(--surface-alt); padding: .15rem .4rem; border-radius: 4px; }
.photographer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.sponsor img { max-height: 5rem; width: auto; margin-bottom: 1rem; }

/* Les deux boutons du quiz gardent leur place quel que soit le moment : seuls
   leurs libelles changent. Le secondaire est un lien, il doit donc s'aligner
   comme un bouton. */
.quiz-actions .button { flex: 1 1 12rem; text-align: center; }
.quiz-actions a.button { display: inline-flex; align-items: center; justify-content: center; }

/* --- Apercu d'une fiche en fenetre modale ------------------------------- */
.species-dialog {
    width: min(100% - 2rem, 46rem);
    max-height: min(90vh, 52rem);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg);
    color: var(--text);
    box-shadow: 0 12px 48px rgba(0, 0, 0, .25);
    overflow: hidden;
    /* La modale se pose au milieu, y compris sur les navigateurs qui ne
       centrent pas dialog par defaut. */
    margin: auto;
}
.species-dialog::backdrop { background: rgba(27, 34, 41, .55); backdrop-filter: blur(2px); }

.species-dialog-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky; top: 0; z-index: 1;
}
.species-dialog-title { font-family: var(--font-title); font-size: 1.25rem; font-style: italic; margin: 0; }
.species-dialog-close {
    background: transparent; border: 0; cursor: pointer;
    font-size: 1.6rem; line-height: 1; color: var(--text-muted);
    padding: 0 .3rem; border-radius: var(--radius);
}
.species-dialog-close:hover { color: var(--text); }

.species-dialog-body { padding: 1.4rem; overflow-y: auto; max-height: min(64vh, 36rem); }
.species-dialog-body .grid { gap: .8rem; }
.species-dialog-body .card { padding: 1rem; }
.species-dialog-body .species-placeholder { padding: 1.2rem; margin: 0 0 1rem; }
.species-dialog-body .source-block { margin-top: 1rem; }
.species-dialog-loading { color: var(--text-muted); text-align: center; padding: 2rem 0; margin: 0; }

.species-dialog-foot {
    display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap;
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

@media (max-width: 620px) {
    .species-dialog { width: 100%; max-height: 100dvh; border-radius: 0; border: 0; }
    .species-dialog-foot { justify-content: stretch; }
    .species-dialog-foot .button { flex: 1; }
}

/* --- Exercices illustres ------------------------------------------------ */
.quiz-question-image-holder { margin: 0 0 1.5rem; }
.quiz-question-image { margin: 0; }
.quiz-question-image img { width: 100%; max-height: 22rem; object-fit: cover; border-radius: var(--radius); }

.quiz-options-images { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.quiz-option-image { flex-direction: column; align-items: stretch; padding: .5rem; gap: .5rem; position: relative; }
.quiz-option-image input { position: absolute; top: .8rem; inset-inline-start: .8rem; z-index: 1; }
.quiz-option-figure { margin: 0; }
.quiz-option-figure img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius) - 2px); display: block; }

/* Les credits accompagnent l'image partout, y compris au milieu d'un
   exercice : ils ne sont jamais optionnels. */
.image-credit { font-size: .7rem; color: var(--text-muted); margin-top: .35rem; line-height: 1.35; }
.quiz-question-image .image-credit { font-size: .78rem; }
.image-credit.is-placeholder { color: var(--warning); font-style: italic; }

.species-images { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 1.5rem 0; }
.species-image { margin: 0; }
.species-image img { width: 100%; border-radius: var(--radius); display: block; }

@media (max-width: 520px) {
    .quiz-options-images { grid-template-columns: 1fr; }
}

.notice-block h2 { margin-top: 0; }
.admin-image figcaption { padding-top: .5rem; }
.admin-image-species { font-size: .9rem; margin: 0 0 .25rem; }
.button-small { padding: .3rem .7rem; font-size: .82rem; margin-top: .5rem; }