:root {
    --fond: #f5f6f8;
    --carte: #ffffff;
    --texte: #1d2330;
    --gris: #6b7280;
    --bord: #dfe3ea;
    --accent: #3b5bdb;
    --accent-clair: #e7ecff;
    --succes: #2b8a3e;
    --succes-clair: #e6f4ea;
    --danger: #c92a2a;
    --danger-clair: #fdecec;
    --alerte: #b35c00;
    --alerte-clair: #fff4e0;
    --rayon: 8px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--texte);
    background: var(--fond);
}
a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h1 small { color: var(--gris); font-weight: 400; font-size: 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .8rem; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }

/* Barre de navigation */
.barre {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    padding: .7rem 1.5rem; background: #1d2330; color: #fff;
}
.marque { color: #fff; font-weight: 700; text-decoration: none; }
.barre nav { display: flex; gap: .3rem; flex-wrap: wrap; }
.barre nav a { color: #c9cfdb; text-decoration: none; padding: .35rem .7rem; border-radius: 6px; }
.barre nav a:hover, .barre nav a.actif { background: #33405a; color: #fff; }

main { max-width: 1280px; margin: 0 auto; padding: 1.5rem; }

/* Cartes et grilles */
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.2rem 1.4rem; margin-bottom: 1.2rem; }
.carte.succes { border-color: var(--succes); background: var(--succes-clair); }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.grille-question { display: grid; grid-template-columns: 3fr 2fr; gap: 0 1.2rem; align-items: start; }
@media (max-width: 960px) { .deux-colonnes, .grille-question { grid-template-columns: 1fr; } }

.titre-question { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.titre-question h1 { margin: 0; }
.titre-question > div { display: flex; gap: 1rem; align-items: center; }

/* Formulaires */
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .8rem; }
input[type=text], input[type=url], input[type=search], select, textarea {
    display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem;
    font: inherit; font-weight: 400; color: var(--texte);
    border: 1px solid var(--bord); border-radius: 6px; background: #fff;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-clair); border-color: var(--accent); }
label.bonne input { border-left: 4px solid var(--succes); }
label.mauvaise input { border-left: 4px solid #d0d5dd; }
label.case { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }
label.case input { margin-top: .3rem; }
label.check { padding: .3rem 0; margin: 0; border-bottom: 1px dashed var(--bord); }
.ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.aide { color: var(--gris); font-size: .85rem; }
.compteur { float: right; font-weight: 400; color: var(--gris); font-size: .8rem; }
.compteur.depasse { color: var(--danger); font-weight: 700; }

.filtres { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: flex-end; }
.filtres label { margin: 0; min-width: 150px; }
.filtres label.case { min-width: 0; align-self: center; }

/* Boutons */
.bouton {
    display: inline-block; padding: .55rem 1rem; border: 1px solid var(--accent); border-radius: 6px;
    background: var(--accent); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.bouton:hover { filter: brightness(1.08); }
.bouton.secondaire { background: #fff; color: var(--accent); }
.bouton.succes { background: var(--succes); border-color: var(--succes); }
.bouton.danger { background: #fff; color: var(--danger); border-color: var(--danger); }
.bouton.petit { padding: .25rem .6rem; font-size: .85rem; }
.bouton:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.liens-verif { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: -.3rem 0 1rem; }
.liens-verif label.case { margin: 0 0 0 .5rem; }

/* Messages */
.flash { padding: .8rem 1rem; border-radius: var(--rayon); margin-bottom: 1rem; border: 1px solid; }
.flash-succes { background: var(--succes-clair); border-color: var(--succes); }
.flash-erreur { background: var(--danger-clair); border-color: var(--danger); }
.flash-alerte { background: var(--alerte-clair); border-color: var(--alerte); }

/* Badges */
.badge { display: inline-block; padding: .05rem .5rem; border-radius: 99px; font-size: .75rem; font-weight: 600; vertical-align: middle; }
.badge-brouillon { background: var(--accent-clair); color: var(--accent); }
.badge-valide { background: var(--succes-clair); color: var(--succes); }
.badge-rejete { background: var(--danger-clair); color: var(--danger); }
.badge-doublon { background: #eceef2; color: var(--gris); }
.badge-alerte { background: var(--alerte-clair); color: var(--alerte); }
.badge-info { background: #eef1f6; color: #45506a; }

/* Tableaux */
table.liste { width: 100%; border-collapse: collapse; background: #fff; }
table.liste th, table.liste td { padding: .5rem .6rem; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: top; }
table.liste th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gris); }
table.liste tbody tr:hover { background: #fafbfc; }
table.compacte td, table.compacte th { padding: .35rem .5rem; }
.centre { text-align: center !important; }
.gris { color: var(--gris); }
.petit-texte { font-size: .8rem; }
.vide { color: var(--gris); padding: 2rem; text-align: center; }

.pagination { display: flex; gap: .3rem; margin-top: 1rem; flex-wrap: wrap; }
.pagination a { padding: .3rem .65rem; border: 1px solid var(--bord); border-radius: 6px; text-decoration: none; background: #fff; }
.pagination a.actif { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Tableau de bord */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.tuile { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem; text-decoration: none; color: var(--texte); }
.tuile:hover { border-color: var(--accent); }
.tuile-nombre { display: block; font-size: 1.8rem; font-weight: 700; }
.tuile-libelle { color: var(--gris); font-size: .9rem; }
.tuile-brouillon .tuile-nombre { color: var(--accent); }
.tuile-valide .tuile-nombre { color: var(--succes); }
.tuile-rejete .tuile-nombre { color: var(--danger); }
.indicateurs { padding-left: 1.1rem; margin: 0; }
.indicateurs li { margin-bottom: .3rem; }

/* Niveaux */
fieldset.niveaux { border: 1px solid var(--bord); border-radius: var(--rayon); padding: .6rem .8rem; margin: 0; }
fieldset.niveaux legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
label.niveau { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; padding: .4rem; border-radius: 6px; margin: 0 0 .2rem; cursor: pointer; }
label.niveau:hover { background: #f7f8fa; }
label.niveau input { margin-top: .35rem; }
label.niveau:has(input:checked) { background: var(--accent-clair); }
.niveau-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--texte); color: #fff; font-weight: 700; font-size: .85rem; }
.niveau-texte { font-size: .85rem; }
.niveau-texte strong { display: block; }
.niveau-texte em { color: var(--gris); display: block; }
.niveau-public { display: none; }
.niveau-public.visible { display: block; }
.principe { font-size: 1.05rem; font-weight: 600; }

/* Questions proches */
.similaires { list-style: none; padding: 0; margin: 0 0 1rem; }
.similaires li { padding: .4rem 0; border-bottom: 1px dashed var(--bord); font-size: .9rem; }
.similaires .score { display: inline-block; min-width: 3rem; font-weight: 700; color: var(--alerte); }
details summary { cursor: pointer; color: var(--gris); font-size: .9rem; }
pre { background: #f7f8fa; padding: .8rem; border-radius: 6px; overflow: auto; font-size: .8rem; max-height: 320px; }

/* =====================================================================
 * Version 2 : fiche de relecture, arborescence, images
 * ===================================================================== */
main:has(.fiche) { max-width: 1480px; }
.entete-carte { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.entete-carte h2 { margin: 0; }
.carte-compacte { padding: .9rem 1.1rem; }
.flash.compact { padding: .5rem .8rem; font-size: .9rem; margin-bottom: .6rem; }
kbd { display: inline-block; padding: 0 .3rem; margin-left: .15rem; border: 1px solid rgba(0,0,0,.2); border-bottom-width: 2px; border-radius: 4px; font: 600 .7rem/1.4 ui-monospace, monospace; background: rgba(255,255,255,.7); color: #333; }
.bouton kbd { background: rgba(255,255,255,.25); color: inherit; border-color: rgba(255,255,255,.4); }
.bouton.secondaire kbd { background: #f1f3f5; color: var(--gris); border-color: var(--bord); }

/* Barre de la fiche */
.fiche-barre { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin: -1.5rem -1.5rem 1rem; padding: .6rem 1.5rem; background: rgba(245,246,248,.95); backdrop-filter: blur(4px); border-bottom: 1px solid var(--bord); }
.fiche-barre-gauche, .fiche-barre-droite { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.fiche-titre { font-size: 1.25rem; font-weight: 700; }
.uid { font: 600 .75rem ui-monospace, monospace; color: var(--gris); background: #eceef2; padding: .1rem .4rem; border-radius: 4px; vertical-align: middle; }
.progression { display: inline-flex; flex-direction: column; gap: .2rem; min-width: 220px; }
.progression-texte { font-size: .8rem; color: var(--gris); }
.progression-barre { height: 6px; background: #e3e6ec; border-radius: 3px; overflow: hidden; }
.progression-barre span { display: block; height: 100%; background: var(--succes); }

.fiche-grille { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.2rem; align-items: start; }
.fiche-panneau { position: sticky; top: 4.2rem; display: flex; flex-direction: column; gap: .8rem; max-height: calc(100vh - 5rem); overflow-y: auto; padding-bottom: 1rem; }
@media (max-width: 1060px) { .fiche-grille { grid-template-columns: 1fr; } .fiche-panneau { position: static; max-height: none; } }

/* Aperçu façon écran de jeu */
.apercu { background: linear-gradient(160deg, #1b2a4a, #121a2e); color: #fff; border-radius: 14px; padding: 1.1rem 1.2rem 1.2rem; margin-bottom: 1.2rem; box-shadow: 0 6px 24px rgba(18,26,46,.18); }
.apercu-entete { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; letter-spacing: .04em; margin-bottom: .8rem; color: #aab6d3; }
.apercu-jeu { font-weight: 800; color: #ffd43b; letter-spacing: .12em; }
.apercu-corps { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
.apercu-corps.avec-image { grid-template-columns: minmax(200px, 40%) 1fr; align-items: center; }
.apercu-image { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 2px dashed #3b4d78; border-radius: 10px; background: #0e1628; color: #aab6d3; cursor: pointer; overflow: hidden; font: inherit; }
.apercu-corps:not(.avec-image) .apercu-image { aspect-ratio: auto; min-height: 3rem; padding: .6rem; }
.apercu-image:hover { border-color: #ffd43b; color: #fff; }
.apercu-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avec-image .apercu-image { border-style: solid; border-color: transparent; }
.apercu-image-vide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; font-size: .9rem; }
.apercu-image-vide .icone { font-size: 1.2rem; }
.apercu-image-vide small { opacity: .75; font-size: .75rem; }
.apercu-enonce-zone { position: relative; }
textarea.apercu-enonce { margin: 0; background: transparent; border: 1px solid transparent; color: #fff; font-size: 1.45rem; font-weight: 700; line-height: 1.3; padding: .3rem .4rem; resize: none; overflow: hidden; }
textarea.apercu-enonce:hover { border-color: #3b4d78; }
textarea.apercu-enonce:focus { background: #0e1628; border-color: #ffd43b; outline: none; }
.apercu .compteur { color: #7f8db0; }
.apercu-enonce-zone .compteur { position: absolute; right: .3rem; bottom: -1.1rem; float: none; }
.apercu .compteur.depasse { color: #ff8787; }

.apercu-reponses { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 640px) { .apercu-reponses { grid-template-columns: 1fr; } }
.tuile-reponse { margin: 0; padding: .45rem .7rem .55rem; border-radius: 10px; background: #26375f; border: 2px solid #33477a; font-weight: 400; }
.tuile-reponse.bonne { background: #1f4d3a; border-color: #40c057; }
.tuile-reponse.trop-long, .apercu-enonce-zone.trop-long textarea, .apercu-anecdote.trop-long textarea { border-color: #ff6b6b !important; }
.tuile-etiquette { display: flex; justify-content: space-between; gap: .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #aab6d3; }
.tuile-reponse.bonne .tuile-etiquette { color: #8ce99a; }
.tuile-etiquette .compteur { float: none; text-transform: none; letter-spacing: 0; }
.tuile-reponse input, .apercu-anecdote textarea { margin-top: .15rem; background: transparent; border: 1px solid transparent; color: #fff; font-size: 1.05rem; font-weight: 600; padding: .2rem .3rem; }
.tuile-reponse input:hover, .apercu-anecdote textarea:hover { border-color: rgba(255,255,255,.2); }
.tuile-reponse input:focus, .apercu-anecdote textarea:focus { background: rgba(0,0,0,.25); border-color: #ffd43b; outline: none; }
.apercu-anecdote { display: block; margin: .8rem 0 0; padding: .5rem .7rem; border-radius: 10px; background: rgba(255,255,255,.06); font-weight: 400; }
.apercu-anecdote textarea { font-size: .95rem; font-weight: 400; resize: none; overflow: hidden; }

/* Source et crédits */
.source-ligne { display: grid; grid-template-columns: 1fr 2fr; gap: .5rem; margin-bottom: .6rem; }
.source-ligne.trois { grid-template-columns: 1fr 1fr 1.4fr; }
.source-ligne input { margin-top: 0; }
.liens-verif { margin: 0; }
.interrupteur { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-weight: 600; font-size: .85rem; cursor: pointer; }
.interrupteur input { width: 1rem; height: 1rem; accent-color: var(--alerte); }

/* Panneau latéral */
.panneau-bloc { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: .8rem .9rem; }
.panneau-titre { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); margin: .2rem 0 .4rem; }
.panneau-bloc .panneau-titre:not(:first-child) { margin-top: .8rem; }
label.compact { font-size: .82rem; margin-bottom: .55rem; }
label.compact input, label.compact select, label.compact textarea { padding: .4rem .5rem; margin-top: .15rem; }
.decision { display: flex; flex-direction: column; gap: .5rem; border-color: #c8d1e0; }
.bouton.grand { padding: .8rem 1rem; font-size: 1.1rem; width: 100%; }
.bouton.plein { width: 100%; }
.decision-ligne { display: flex; gap: .5rem; }
.decision-ligne .bouton { flex: 1; }
.rejet { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding-top: .3rem; border-top: 1px dashed var(--bord); }
.rejet-titre { font-size: .78rem; font-weight: 700; color: var(--danger); margin-right: .2rem; }
.puce { border: 1px solid #f1b0b0; background: #fff; color: var(--danger); border-radius: 99px; padding: .15rem .6rem; font: inherit; font-size: .78rem; cursor: pointer; }
.puce:hover, .puce.active { background: var(--danger); color: #fff; border-color: var(--danger); }

.segments { display: flex; border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; }
.segment { flex: 1; margin: 0; position: relative; cursor: pointer; font-weight: 600; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment span { display: block; text-align: center; padding: .45rem .2rem; font-size: .9rem; border-left: 1px solid var(--bord); transition: background .1s; }
.segment:first-child span { border-left: 0; }
.segment:hover span { background: #f3f5f9; }
.segment input:checked + span { background: var(--accent); color: #fff; }
.segment input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -3px; }
.niveaux-segments .segment span { font-size: 1.05rem; padding: .5rem 0; }
.segment.propose-ia span::after { content: ''; position: absolute; bottom: 4px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #f59f00; }
.niveau-aide { display: flex; flex-direction: column; gap: .15rem; margin-top: .5rem; padding: .5rem .6rem; background: #f7f8fb; border-radius: 6px; font-size: .82rem; min-height: 4.5rem; }
.niveau-aide em { color: var(--gris); }
.niveau-aide.survol { background: #fff8e6; }
.niveau-aide .apercu-survol { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--alerte); }

.controles summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.controles summary::-webkit-details-marker { display: none; }
.controles summary .panneau-titre { margin: 0; }
.controles[open] summary { margin-bottom: .5rem; }
.controles label.check { font-size: .82rem; }
.raccourcis { font-size: .75rem; color: var(--gris); line-height: 1.9; margin: 0; }
.raccourcis kbd { margin: 0; }

/* Toast */
.toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translate(-50%, 1rem); opacity: 0; background: #1d2330; color: #fff; padding: .6rem 1rem; border-radius: 8px; transition: all .25s; z-index: 100; font-size: .9rem; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* Fenêtre image */
.dlg-image { width: min(1100px, 96vw); max-height: 92vh; padding: 0; border: 0; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.dlg-image::backdrop { background: rgba(15,20,35,.6); }
.dlg-entete { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.2rem; border-bottom: 1px solid var(--bord); position: sticky; top: 0; background: #fff; z-index: 2; }
.dlg-entete h2 { margin: 0; }
.dlg-fermer { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--gris); }
.dlg-etape { padding: 1rem 1.2rem; }
.dlg-statut { margin: 0; padding: .5rem 1.2rem .9rem; font-size: .88rem; color: var(--gris); min-height: 1.5rem; }
.dlg-statut.erreur { color: var(--danger); font-weight: 600; }
.onglets { display: flex; gap: .3rem; border-bottom: 1px solid var(--bord); margin-bottom: 1rem; }
.onglet { border: 0; background: none; padding: .5rem .9rem; font: inherit; font-weight: 600; color: var(--gris); cursor: pointer; border-bottom: 3px solid transparent; }
.onglet.actif { color: var(--accent); border-bottom-color: var(--accent); }
.recherche-image { display: flex; gap: .5rem; margin-bottom: .6rem; }
.recherche-image input { margin: 0; flex: 1; }
.resultats-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; margin-top: .8rem; }
.resultat-image { position: relative; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #eef1f6; cursor: pointer; text-align: left; font: inherit; }
.resultat-image:hover { border-color: var(--accent); }
.resultat-image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.resultat-legende { display: block; padding: .3rem .45rem; font-size: .72rem; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fff; }
.licence { position: absolute; top: .35rem; left: .35rem; padding: .05rem .4rem; border-radius: 4px; font-size: .7rem; font-weight: 700; color: #fff; }
.licence-libre { background: var(--succes); }
.licence-credit { background: #e67700; }
.licence-partage { background: var(--danger); }
.licence-autre { background: #6b7280; }
.licence-rappel { font-size: .8rem; padding: .35rem .5rem; border-radius: 6px; background: #f3f4f6; color: var(--gris); }
.licence-rappel.licence-libre { background: var(--succes-clair); color: var(--succes); }
.licence-rappel.licence-credit { background: var(--alerte-clair); color: var(--alerte); }
.licence-rappel.licence-partage { background: var(--danger-clair); color: var(--danger); }
.zone-depot { display: block; padding: 2.5rem 1rem; border: 2px dashed var(--bord); border-radius: 10px; text-align: center; font-weight: 400; color: var(--gris); cursor: pointer; }
.zone-depot.survol, .zone-depot:hover { border-color: var(--accent); background: var(--accent-clair); }
.recadrage { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1rem; }
@media (max-width: 860px) { .recadrage { grid-template-columns: 1fr; } }
.recadrage-zone { height: min(60vh, 520px); background: #111; border-radius: 8px; overflow: hidden; }
.recadrage-zone img { display: block; max-width: 100%; }
.recadrage-info { font-size: .82rem; margin: 0 0 .4rem; }
.recadrage-info .avertissement { color: var(--alerte); font-weight: 600; }
.outils-recadrage { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 .8rem; }

/* Liste : vignettes */
td.vignette { width: 72px; padding-right: 0 !important; }
td.vignette img { width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; display: block; }

/* Arborescence des thèmes */
.arbre { border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; }
.arbre-ligne { display: grid; grid-template-columns: minmax(180px, 1fr) 140px repeat(4, 80px); align-items: center; gap: .6rem; padding: .45rem .8rem; border-bottom: 1px solid var(--bord); font-size: .9rem; }
.arbre > .arbre-noeud:last-child > summary, .arbre > .arbre-ligne:last-child { border-bottom: 0; }
.arbre-titres { background: #f7f8fa; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
summary.arbre-ligne { cursor: pointer; list-style: none; }
summary.arbre-ligne::-webkit-details-marker { display: none; }
.arbre-noeud > summary .arbre-nom::before { content: '▸'; display: inline-block; width: 1rem; color: var(--gris); transition: transform .15s; }
.arbre-noeud[open] > summary .arbre-nom::before { transform: rotate(90deg); }
.feuille .arbre-nom::before { content: '•'; display: inline-block; width: 1rem; color: #c3c9d4; }
.arbre-ligne.prof-0 .arbre-nom a { font-weight: 700; }
.arbre-ligne.prof-0 { background: #fbfcfd; }
.arbre-ligne:not(.prof-0) .arbre-nom a { font-weight: 500; }
.arbre-enfants .arbre-ligne { padding-left: 2rem; }
.arbre-enfants .arbre-enfants .arbre-ligne { padding-left: 3.2rem; }
.arbre-enfants .arbre-enfants .arbre-enfants .arbre-ligne { padding-left: 4.4rem; }
.arbre-nom a { color: var(--texte); text-decoration: none; }
.arbre-nom a:hover { color: var(--accent); text-decoration: underline; }
.arbre-barre { height: 8px; background: #e9ecf1; border-radius: 4px; overflow: hidden; }
.arbre-barre span { display: block; height: 100%; background: var(--succes); }
.arbre-chiffre { text-align: right; font-variant-numeric: tabular-nums; }
.arbre-chiffre.valide { color: var(--succes); font-weight: 700; }
.arbre-chiffre.total { font-weight: 600; }
@media (max-width: 760px) { .arbre-ligne { grid-template-columns: 1fr 60px 60px; } .arbre-barre, .arbre-barre-titre, .arbre-ligne .arbre-chiffre:nth-child(4), .arbre-ligne .arbre-chiffre:nth-child(5) { display: none; } }

/* =====================================================================
 * Version 3 : assistant IA, recherche d'images, fond, droits
 * ===================================================================== */
h2.espace { margin-top: 1.4rem; }
code { font: .85em ui-monospace, monospace; background: #f1f3f5; padding: .05rem .3rem; border-radius: 4px; }

/* Boutons de l'assistant IA */
.bouton-ia { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid #c5b3f5; background: #f5f0ff; color: #6741d9;
    border-radius: 99px; padding: .15rem .65rem; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.bouton-ia:hover { background: #6741d9; color: #fff; border-color: #6741d9; }
.bouton-ia.sur-sombre { background: rgba(151,117,250,.18); border-color: rgba(177,151,252,.5); color: #d0bfff; text-transform: none; letter-spacing: 0; }
.bouton-ia.sur-sombre:hover { background: #7950f2; color: #fff; }
.bouton-ia:disabled { opacity: .8; cursor: wait; }
.roue { width: .8rem; height: .8rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: tourne .7s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.apercu-enonce-zone .bouton-ia { position: absolute; right: .3rem; top: -1.6rem; }
.apercu-sous-titre { display: flex; justify-content: space-between; align-items: center; margin: 0 0 .4rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #aab6d3; }
.apercu-anecdote .tuile-etiquette > span { display: inline-flex; align-items: center; gap: .5rem; }
.apercu-anecdote label { margin: 0; font-weight: 400; font-size: inherit; color: inherit; }
.panneau-titre-ia { display: flex; justify-content: space-between; align-items: center; }

/* Résultats de l'assistant */
.ia-resultats { margin: .6rem 0; padding: .6rem .8rem; background: #f8f5ff; border: 1px solid #d0bfff; border-radius: 10px; color: var(--texte); font-size: .88rem; }
.ia-resultats.sur-sombre { background: #f8f5ff; }
.ia-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; color: #5f3dc4; }
.ia-fermer { border: 0; background: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--gris); }
.ia-liste { list-style: none; margin: 0; padding: 0; }
.ia-liste li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .4rem 0; border-top: 1px dashed #e0d6ff; }
.ia-liste li:first-child { border-top: 0; }
.ia-texte { flex: 1 1 60%; }
.ia-meta { font-size: .75rem; color: var(--gris); }
.ia-meta.depasse { color: var(--danger); font-weight: 600; }
.ia-remplacer { display: inline-flex; gap: .25rem; }
.ia-pied, .ia-sources { margin-top: .4rem; font-size: .72rem; color: var(--gris); }
.ia-sources a { color: #6741d9; }
.ia-attente { color: #6741d9; margin: 0; }
.ia-erreur { color: var(--danger); margin: .2rem 0; }
.ia-aide { font-size: .78rem; color: var(--gris); margin: 0 0 .3rem; }
.flash-champ { animation: flashChamp .9s ease; }
@keyframes flashChamp { 0% { box-shadow: 0 0 0 3px #b197fc; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Recherche d'images */
.recherche-image select { margin: 0; width: auto; min-width: 170px; }
.suggestions-mots { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .5rem; }
.puce-neutre { border: 1px solid var(--bord); background: #fff; border-radius: 99px; padding: .15rem .6rem; font: inherit; font-size: .78rem; cursor: pointer; }
.puce-neutre:hover { border-color: var(--accent); color: var(--accent); }
.alerte-revele, .alerte-droits { color: var(--alerte); background: var(--alerte-clair); border-radius: 6px; padding: .35rem .6rem; font-size: .82rem; font-weight: 600; margin: .3rem 0; }
.credits-sources { margin-top: .6rem; }

/* Recadrage avec fond */
.recadrage { grid-template-columns: minmax(0, 1fr) 300px; }
.recadrage-gauche { min-width: 0; }
.recadrage-zone { height: min(56vh, 480px); }
.recadrage-panneau { max-height: 70vh; overflow-y: auto; padding-right: .2rem; }
.segments-petits .segment span { font-size: .75rem; padding: .35rem .2rem; }
.fond-choix { margin-bottom: .6rem; }
.fond-couleurs { display: flex; align-items: center; gap: .35rem; margin-top: .45rem; }
.fond-couleurs input[type=color] { width: 2.2rem; height: 1.8rem; padding: 0; border: 1px solid var(--bord); border-radius: 6px; background: #fff; cursor: pointer; }
.pastille { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid #c3c9d4; cursor: pointer; }
.pastille:hover { outline: 2px solid var(--accent); }
.apercu-final { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 6px; border: 1px solid var(--bord); background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 50% / 16px 16px; margin-bottom: .6rem; }
.apercu-enonce-zone .bouton-ia { top: auto; right: auto; left: .3rem; bottom: -1.45rem; }

/* ---------- v4 : contrôle des anecdotes, images générées par IA ---------- */
.ia-liste li.ia-a-risque { background: #fff8eb; border-radius: 6px; padding-left: .4rem; padding-right: .4rem; }
.ia-liste li.ia-a-risque + li { border-top-color: transparent; }
.ia-meta.depasse a { color: inherit; text-decoration: underline; }
#ligne-prompt textarea { width: 100%; font: inherit; font-size: .85rem; }
#cred-prompt { width: 100%; font: inherit; font-size: .85rem; }
#rappel-droits { margin-top: .5rem; }
.origine-fichier { margin-top: .75rem; max-width: 22rem; }

/* Thèmes (version 5) */
.ligne-form { display: flex; gap: .4rem; align-items: center; margin: 0; }
.ligne-form input[type="text"] { min-width: 0; flex: 1; padding: .3rem .5rem; }
.theme-entete { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.theme-entete h2 { margin: 0; }
.theme-entete .ligne-form { min-width: 320px; }
.themes-liste td, .themes-corriger td { vertical-align: middle; }
.themes-liste tr.a-corriger td { background: var(--alerte-clair); }
.themes-corriger input[type="text"] { width: 100%; padding: .3rem .5rem; }
.choisir-niveau { margin: .1rem 0; }
@media (max-width: 760px) { .themes-liste, .themes-corriger { display: block; overflow-x: auto; } }

/* ---------- Version 5 : recherche, même sujet, public ---------- */
.barre-recherche { margin-left: auto; }
.barre-recherche input { width: 15rem; max-width: 60vw; padding: .35rem .7rem; border-radius: 99px; border: 1px solid #33405a; background: #2a3346; color: #fff; }
.barre-recherche input::placeholder { color: #9aa3b5; }
.barre-recherche input:focus { background: #fff; color: var(--texte); outline: none; border-color: var(--accent); }
.flash-info { background: var(--accent-clair); border-color: var(--accent); }

.recherche-ligne { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.recherche-ligne input[type=search] { flex: 1 1 22rem; font-size: 1.1rem; padding: .6rem .8rem; }
.recherche-ligne select { flex: 0 0 auto; width: auto; }
.recherche-filtres label { min-width: 120px; }
.recherche-form .aide { margin: .8rem 0 0; }
.facettes { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 1rem; font-size: .9rem; }
a.puce-neutre { color: var(--texte); text-decoration: none; display: inline-block; }
.puce-neutre b { color: var(--gris); font-weight: 600; margin-left: .2rem; }
.puce-neutre.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.puce-neutre.active b { color: #dfe5ff; }
.espace-gauche { margin-left: .8rem; }

.resultats-recherche { list-style: none; padding: 0; margin: 0; }
.resultat { display: flex; gap: 1rem; background: var(--carte); border: 1px solid var(--bord); border-left: 4px solid var(--accent); border-radius: var(--rayon); padding: .8rem 1rem; margin-bottom: .6rem; }
.resultat.statut-valide { border-left-color: var(--succes); }
.resultat.statut-rejete, .resultat.statut-doublon { border-left-color: #c3c8d2; opacity: .8; }
.resultat-image { width: 128px; height: 72px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.resultat-corps { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.resultat-meta { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: center; font-size: .82rem; margin-bottom: .25rem; }
.resultat-num { font-weight: 700; text-decoration: none; }
.resultat-enonce { display: block; font-size: 1.02rem; font-weight: 600; color: var(--texte); text-decoration: none; margin-bottom: .3rem; }
.resultat-enonce:hover { color: var(--accent); }
.resultat-reponses { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .88rem; }
.resultat-reponses .bonne { color: var(--succes); font-weight: 600; }
.resultat-reponses .mauvaise { color: var(--gris); }
.resultat-anecdote, .resultat-extra { margin: .35rem 0 0; font-size: .85rem; }
mark { background: #ffe066; color: inherit; padding: 0 .1em; border-radius: 2px; }
@media (max-width: 640px) { .resultat-image { display: none; } .barre-recherche { margin-left: 0; width: 100%; } .barre-recherche input { width: 100%; max-width: none; } }

.sous-titre-proches { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gris); margin: .6rem 0 .2rem; }
.sous-titre-proches small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.mots-communs { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-left: .3rem; }
.mots-communs .puce-neutre { font-size: .72rem; padding: .05rem .5rem; }

.public-aide { display: flex; flex-direction: column; gap: .15rem; margin: .5rem 0 .8rem; padding: .5rem .6rem; background: #f7f8fb; border-radius: 6px; font-size: .82rem; }
.public-auto { background: var(--alerte-clair); border-radius: 6px; padding: .4rem .6rem; font-size: .85rem; }

/* Thèmes : création, déplacement, correspondances */
.creer-grille { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.creer-grille form { flex: 1 1 22rem; align-items: flex-end; flex-wrap: wrap; }
.creer-grille label { flex: 1 1 10rem; margin: 0; }
.theme-deplacer { margin: .2rem 0 .8rem; font-size: .9rem; }
.theme-deplacer summary { cursor: pointer; color: var(--accent); }
.theme-deplacer form { margin-top: .6rem; align-items: flex-end; flex-wrap: wrap; }
.theme-deplacer label { margin: 0; }
.choix-mode { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.choix-mode label.case { font-weight: 400; }
.ajout-sous-theme { margin-top: .6rem; max-width: 26rem; }
form.en-ligne { display: inline; margin-left: .4rem; }
.lien-danger { border: none; background: none; padding: 0; color: var(--danger); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; }
.liste-gem { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }

/* ---------- Thèmes repliables (version 6) ---------- */
button.lien { border: none; background: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
.themes-outils { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 1.4rem 0 .6rem; }
.themes-outils h2 { margin: 0 auto 0 0; }
.themes-outils input[type=search] { width: 260px; margin: 0; }
details.theme-carte { padding: 0; margin-bottom: .5rem; }
details.theme-carte[open] { padding-bottom: 1rem; }
details.theme-carte > :not(summary) { margin-left: 1.2rem; margin-right: 1.2rem; }
.theme-resume { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; padding: .75rem 1.2rem; cursor: pointer; list-style: none; }
.theme-resume::-webkit-details-marker { display: none; }
.theme-resume::before { content: '▸'; color: var(--gris); transition: transform .15s; display: inline-block; }
details[open] > .theme-resume::before { transform: rotate(90deg); }
details[open] > .theme-resume { border-bottom: 1px solid var(--bord); margin-bottom: .8rem; }
.theme-nom { font-weight: 700; font-size: 1.05rem; min-width: 160px; }
.theme-compte { font-size: .85rem; font-variant-numeric: tabular-nums; }
.theme-apercu { font-size: .82rem; flex: 1 1 100%; padding-left: 1.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details[open] > .theme-resume .theme-apercu { display: none; }

/* ---------- Choix du thème et du sous-thème ---------- */
.choix-classement .champ-nouveau { margin-top: .3rem; }

/* ---------- Sujet de dessin (Cékoissa ?) ---------- */
.apercu-dessin { display: block; }
.apercu-dessin .apercu-enonce { font-size: 1.4rem; }
.apercu-aide { color: rgba(255,255,255,.75); font-size: .85rem; margin: .6rem 0 0; }
.type-jeu { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .4rem; border-radius: 4px; background: #eef2ff; color: #4338ca; }
.type-jeu.dessin { background: #fff4e6; color: #c2410c; }

/* ---------- Nouvelle question ---------- */
.nouvelle-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; margin-bottom: 1rem; }
.nouvelle-reponses { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1rem; }
.nouvelle .compteur { float: right; }
form[data-type=dessin] .seul-qcm, form:not([data-type=dessin]) .seul-dessin { display: none; }
@media (max-width: 760px) { .nouvelle-grille, .nouvelle-reponses { grid-template-columns: 1fr; } }

/* ---------- Connexion (outil en ligne) ---------- */
.page-connexion main { max-width: 380px; margin: 12vh auto; }
.connexion h1 { font-size: 1.2rem; margin-top: 0; }
.barre-sortir { color: rgba(255,255,255,.75); font-size: .85rem; margin-left: 1rem; white-space: nowrap; }
.barre-sortir:hover { color: #fff; }