:root {

--fond: #eef1f5;
--fond-halo: rgba(255,255,255,.85);
--surface: #ffffff;
--surface-2: #f4f6f9;
--surface-3: #e7ebf1;
--bordure: #d9dee7;
--bordure-ui: #c6ceda;
--bordure-forte: #7c8699;

--texte: #161d2c;
--texte-2: #4f5a6d;
--texte-3: #5d6879;
--texte-inactif: #808a9b;

--accent: #4f46e5;
--accent-fort: #4338ca;
--accent-doux: #e4e7fb;
--accent-texte: #3730a3;
--sur-accent: #ffffff;
--accent-encre: #4f46e5;
--note-encre: #b45309;
--note-source: #5d6879;
--corr-souligne: rgba(79,70,229,.75);
--corr-survol: rgba(79,70,229,.18);

--caviard: #000000;
--sur-caviard: #ffffff;
--caviard-survol: rgba(0,0,0,.30);
--caviard-hachure-1: rgba(0,0,0,.62);
--caviard-hachure-2: rgba(0,0,0,.26);
--caviard-contour: transparent;
--rech-trouve: rgba(79,70,229,.16);
--rech-cible: rgba(79,70,229,.32);

--danger: #b42318; --danger-fond: #b42318; --danger-doux: #fde8e6; --danger-texte: #8c1d14;
--danger-fort: #8c1d14; --sur-danger: #ffffff;
--succes: #067647; --succes-doux: #e1f5ea; --succes-texte: #05603a;
--avert: #b54708; --avert-doux: #fdf1e3; --avert-texte: #93370d;
--coeur: #d61a44;

--papier: #ffffff;
--pastille: rgba(22,29,44,.80);
--lisere: rgba(255,255,255,.35);
--contour-image: transparent;
--damier: #e4e7ec;
--voile: rgba(238,241,245,.72);
--fond-backdrop: rgba(8,12,20,.55);

--toast-fond: #161d2c; --toast-texte: #ffffff;
--puce-succes: #32d583; --puce-avert: #fdb022; --puce-danger: #f97066; --puce-info: #818cf8;

--ombre-papier: 0 1px 2px rgba(15,23,42,.10), 0 8px 20px -8px rgba(15,23,42,.28);
--ombre-papier-haute: 0 2px 4px rgba(15,23,42,.10), 0 18px 34px -12px rgba(15,23,42,.38);
--ombre-flottante: 0 24px 60px -16px rgba(15,23,42,.45), 0 0 0 1px rgba(15,23,42,.06);

--t-1: 12px; --t-2: 13px; --t-3: 14px; --t-4: 15px; --t-5: 18px; --t-6: 22px;
--e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
--rayon-papier: 2px; --rayon-1: 4px; --rayon-2: 8px; --rayon-3: 12px; --rayon-4: 16px; --rayon-plein: 999px;
--h-s: 32px; --h-m: 36px; --h-l: 40px;
--d-1: 120ms; --d-2: 200ms; --d-3: 250ms; --courbe: cubic-bezier(.2,.8,.2,1);
--z-carte: 2; --z-indicateur: 5; --z-entete: 20; --z-lucarne: 45; --z-voile: 50; --z-toast: 60;
--carte: 168px;
--grille-gap: var(--e4);
--grille-pad: var(--e5);
color-scheme: light;
}
:root[data-theme="dark"] {
--fond: #101419;
--fond-halo: rgba(255,255,255,.03);
--surface: #171c24;
--surface-2: #1f2630;
--surface-3: #29313d;
--bordure: #2c3542;
--bordure-ui: #3a4452;
--bordure-forte: #6b7686;
--texte: #e8ecf2;
--texte-2: #a3adbd;
--texte-3: #99a3b3;
--texte-inactif: #707b8b;
--accent: #818cf8;
--accent-fort: #a5b4fc;
--accent-doux: #262a4f;
--accent-texte: #c7d2fe;
--sur-accent: #101419;
--danger: #f97066; --danger-fond: #c8281b; --danger-doux: #3b1d1d; --danger-texte: #fda29b;
--danger-fort: #b42318;
--succes: #32d583; --succes-doux: #15302a; --succes-texte: #6ce9a6;
--avert: #fdb022; --avert-doux: #3a2a12; --avert-texte: #fec84b;
--coeur: #fb7185;
--pastille: rgba(16,20,25,.82);
--contour-image: rgba(255,255,255,.10);
--caviard-contour: rgba(255,255,255,.45);
--voile: rgba(16,20,25,.72);
--fond-backdrop: rgba(0,0,0,.60);
--toast-fond: #29313d; --toast-texte: #e8ecf2;
--ombre-papier: 0 1px 2px rgba(0,0,0,.40), 0 10px 24px -8px rgba(0,0,0,.65);
--ombre-papier-haute: 0 2px 4px rgba(0,0,0,.40), 0 20px 40px -12px rgba(0,0,0,.75);
--ombre-flottante: 0 24px 60px -16px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
color-scheme: dark;
}


* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html:lang(ja) { word-break: auto-phrase; }
html, body { height: 100%; }
body {
font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Noto Sans", "Noto Naskh Arabic", sans-serif;
font-size: var(--t-3);
line-height: 1.45;
color: var(--texte);
background: var(--fond);
display: flex;
flex-direction: column;
user-select: none;
-webkit-tap-highlight-color: transparent;
}

:root:lang(zh) body { font-family: "Segoe UI", system-ui, "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; }
:root:lang(ja) body { font-family: "Segoe UI", system-ui, "Yu Gothic UI", "Meiryo", "Hiragino Sans", "Noto Sans CJK JP", "Noto Sans JP", sans-serif; }

@font-face { font-family: "Naskh UI"; font-weight: 400; src: local("Noto Naskh Arabic UI"), local("Noto Naskh Arabic UI Regular"), local("NotoNaskhArabicUI-Regular"), local("Noto Naskh Arabic"), local("Noto Naskh Arabic Regular"), local("NotoNaskhArabic-Regular"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Naskh UI"; font-weight: 700; src: local("Noto Naskh Arabic UI Bold"), local("NotoNaskhArabicUI-Bold"), local("Noto Naskh Arabic Bold"), local("NotoNaskhArabic-Bold"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
:root:lang(ar) body { font-family: "Naskh UI", "Segoe UI", system-ui, "Tahoma", sans-serif; }

:root:lang(zh), :root:lang(ja) { --t-1: 13px; }
:root:lang(ar) { --t-3: 15px; }
:root:lang(zh) body, :root:lang(ja) body { line-height: 1.6; }
:root:lang(ar) body { line-height: 1.65; }

:root:is(:lang(ar), :lang(zh), :lang(ja)) :is(.titre-champ, .tag, .dlg-tete h2, .carte-vide .titre, .num, .cav-liste h3) { letter-spacing: 0; text-transform: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }


.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.noscript { margin: var(--e4); padding: var(--e3) var(--e4); border-radius: var(--rayon-3); background: var(--accent-doux); color: var(--accent-texte); font-size: var(--t-3); line-height: 1.5; }

html:not(.js) .toolbar, html:not(.js) .droite, html:not(.js) main, html:not(.js) #statut, html:not(.js) footer .aide, html:not(.js) #btn_apropos { display: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ic {
width: 18px; height: 18px; flex: none;
stroke: currentColor; fill: none;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
kbd {
font-family: inherit; font-size: var(--t-1); font-weight: 600; line-height: 1;
padding: 3px 6px;
border: 1px solid var(--bordure-forte);
border-bottom-width: 2px;
border-radius: var(--rayon-1);
background: var(--surface);
color: var(--texte-2);
}


header {
position: relative;
z-index: var(--z-entete);
display: flex;
align-items: center;
gap: var(--e3);
min-height: 54px;
padding: var(--e2) var(--e4);
background: var(--surface);
border-bottom: 1px solid var(--bordure);
}
.brand {
display: flex;
align-items: center;
gap: var(--e3);
font-weight: 700;
font-size: var(--t-4);
letter-spacing: -.01em;
white-space: nowrap;
margin-inline-end: 8px;
}


.brand h1 { font: inherit; font-weight: 600; letter-spacing: inherit; margin: 0; }
.brand h1 b { font-weight: 700; color: var(--accent); }
.logo {
width: 32px; height: 32px;
border-radius: 8px;
display: grid; place-items: center;
color: var(--papier);
background: linear-gradient(135deg, #4f46e5, #6a3fe0);


-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.logo .ic { width: 32px; height: 32px; }

.apropos-tete { display: flex; align-items: center; gap: var(--e4); }
.logo.logo-grand { flex: none; width: 56px; height: 56px; border-radius: 14px; }
.logo.logo-grand .ic { width: 56px; height: 56px; }
.toolbar {
display: flex;
align-items: center;
gap: var(--e1);
flex: 1;
min-width: 0;
flex-wrap: wrap;
}
.groupe { display: flex; align-items: center; gap: 2px; }
.sep { width: 1px; height: 22px; background: var(--bordure); margin: 0 var(--e2); flex: none; }
.sep.coupe { visibility: hidden; }
.sep.rejete { display: none; }
.btn {
display: inline-flex;
align-items: center;
gap: var(--e2);
height: var(--h-m);
padding: 0 var(--e3);
border-radius: var(--rayon-2);
border: 1px solid transparent;
color: var(--texte);
white-space: nowrap;
flex: none;
transition: background var(--d-1), border-color var(--d-1), color var(--d-1), transform var(--d-1), box-shadow var(--d-2);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:active:not(:disabled):not(.primaire) { background: var(--surface-3); }
.btn:disabled { color: var(--texte-inactif); cursor: default; }
.btn.primaire:disabled { background: var(--surface-3); color: var(--texte-inactif); }
.btn.icone { width: var(--h-m); padding: 0; justify-content: center; }
.btn.danger:not(:disabled) { color: var(--danger); }
.btn.primaire {
background: var(--accent);
color: var(--sur-accent);
font-weight: 600;
padding: 0 var(--e4);
}
.btn.primaire:active:not(:disabled) { background: var(--accent-fort); }

.droite { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.btn.langue {
position: relative;
width: auto; padding: 0 var(--e2); gap: var(--e1);
color: var(--texte-2);
font-size: var(--t-1); font-weight: 700; letter-spacing: .04em;
cursor: pointer;
}
.btn.langue select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; }
.btn.langue:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
#btn_theme { color: var(--texte-2); }

.btn.soutenir { color: var(--texte-2); }
.btn.soutenir .ic { stroke-width: 2; }
.dlg-corps > p:not([class]) { font-size: var(--t-2); line-height: 1.5; }
.dlg-note { font-size: var(--t-1); color: var(--texte-2); }
#dons_moyens { display: flex; flex-wrap: wrap; gap: var(--e2); }
#dons_moyens .moyen { text-decoration: none; }
#dons_section_liens .dlg-note, #dons_section_crypto .dlg-note { margin-top: var(--e2); }
#dlg_dons { width: min(500px, 92vw); }

.puces { display: flex; flex-wrap: wrap; gap: var(--e2); }
.puce { padding: 6px var(--e3); font-size: var(--t-2); font-weight: 600; color: var(--texte-2); border: 1px solid var(--bordure-ui); border-radius: var(--rayon-plein); }
.puce:active { background: var(--surface-3); }
.puce.actif { color: var(--accent-texte); border-color: var(--accent); background: var(--accent-doux); }
.crypto {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e2) var(--e4); align-items: start;
margin-top: var(--e2); padding: var(--e4);
border: 1px solid var(--bordure-ui); border-radius: var(--rayon-3);
}
.crypto > * { grid-column: 1; min-width: 0; }

#dons_crypto { display: grid; }
#dons_crypto .crypto { grid-area: 1 / 1; }
#dons_crypto .crypto[hidden] { display: grid !important; visibility: hidden; }
.crypto.sans-qr { grid-template-columns: minmax(0, 1fr); }
.crypto .qr { grid-column: 2; grid-row: 1 / span 3; width: 128px; height: 128px; padding: 7px; border-radius: var(--rayon-2); background: var(--papier); box-shadow: inset 0 0 0 1px var(--bordure); }
.crypto .qr svg { display: block; width: 100%; height: 100%; }
.crypto .entete { display: flex; flex-direction: column; gap: 2px; }
.crypto .entete strong { font-size: var(--t-4); }
.crypto .reseau { font-size: var(--t-1); color: var(--texte-2); }

.crypto .adresse { font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, "Roboto Mono", monospace; font-size: var(--t-2); line-height: 1.6; font-variant-numeric: tabular-nums; user-select: all; }

:where(html[dir="rtl"]) .crypto .adresse { text-align: right; }
.crypto .adresse span { display: inline-block; margin-inline-end: .55em; }
.crypto .adresse span:last-child { margin-inline-end: 0; }
.crypto .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); }
.crypto .copier { height: var(--h-s); padding: 0 var(--e3); border-color: var(--bordure-ui); font-size: var(--t-2); }

.crypto .portefeuille { display: none; font-size: var(--t-2); color: var(--accent-texte); text-decoration: underline; }
@media (pointer: coarse) { .crypto .portefeuille { display: inline-flex; align-items: center; min-height: var(--h-m); } }
@media (max-width: 479px) {
.crypto { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.crypto .qr { grid-column: 1; grid-row: 1; width: 152px; height: 152px; }
.crypto .adresse { text-align: center; }
.crypto .actions { justify-content: center; }
}
#lucarne {
position: fixed;
inset-inline-end: var(--e4); bottom: 52px;
z-index: var(--z-lucarne);
width: min(340px, calc(100vw - 32px));
padding: var(--e4);
border-radius: var(--rayon-3);
border: 1px solid var(--bordure);
color: var(--texte);
background: var(--surface);
box-shadow: var(--ombre-flottante);
animation: monte var(--d-3) var(--courbe);
}
body:has(#toast.actif) #lucarne { bottom: calc(52px + var(--toast-h, 64px) + var(--e3)); }
#lucarne .titre { display: flex; align-items: center; gap: var(--e2); font-weight: 700; margin-bottom: var(--e1); }
#lucarne .titre .ic { color: var(--coeur); stroke-width: 2; }
#lucarne p { font-size: var(--t-2); color: var(--texte-2); margin-bottom: var(--e3); }
#lucarne .actions { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
#lucarne .actions .btn:not(.primaire) { border-color: var(--bordure-ui); }
#lucarne .lien { font-size: var(--t-1); color: var(--texte-2); text-decoration: underline; padding: 4px; margin-inline-start: auto; }

[dir="rtl"] #btn_reculer .ic, [dir="rtl"] #btn_avancer .ic,
[dir="rtl"] #btn_annuler .ic, [dir="rtl"] #btn_retablir .ic { transform: scaleX(-1); }
:root[data-theme="dark"] .soleil { display: block; }
:root[data-theme="dark"] .lune { display: none; }
.soleil { display: none; }


#zone {
flex: 1;
overflow: auto;
position: relative;
background:
radial-gradient(900px 380px at 50% -120px, var(--fond-halo), transparent 70%),
var(--fond);
transition: box-shadow var(--d-2);
}
#zone.survol-depot { box-shadow: inset 0 0 0 3px var(--accent); }
#grille {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--carte), 1fr));
gap: var(--grille-gap);
padding: var(--grille-pad);
min-height: 100%;
align-content: start;
}


.card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--e2);
padding: var(--e2);
border-radius: var(--rayon-3);
cursor: grab;
outline: none;
transition: background var(--d-1), box-shadow var(--d-2), opacity var(--d-2);
}
.card.selectionnee { background: var(--accent-doux); box-shadow: inset 0 0 0 2px var(--accent); }
.card.selectionnee .tag { background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent); }
.card:focus-visible { box-shadow: 0 0 0 2px var(--accent), inset 0 0 0 2px var(--surface); }
.card.en-deplacement { opacity: .4; }
.card:active { cursor: grabbing; }
.vignette {
width: 100%;
aspect-ratio: 150 / 210;
display: flex;
align-items: center;
justify-content: center;


container-type: size;
}
.feuille { position: relative; display: inline-block; line-height: 0; transition: transform var(--d-2); }
.vignette img {
max-width: 100cqw;
max-height: 100cqh;
background: var(--papier);
border-radius: var(--rayon-papier);
box-shadow: var(--ombre-papier);
transition: box-shadow var(--d-2);
}
.vignette img.neuve { animation: apparait .22s ease-out; }
.vignette img { outline: 1px solid var(--contour-image); }
.attente {
width: 100%; height: 100%;
border-radius: var(--rayon-papier);
display: flex; align-items: center; justify-content: center;
font-size: var(--t-1); color: var(--texte-3);
background: linear-gradient(100deg, var(--surface-3) 30%, var(--surface-2) 50%, var(--surface-3) 70%);
background-size: 200% 100%;
animation: scintille 1.3s linear infinite;
}
.attente:not(:empty) { animation: none; padding: var(--e2); text-align: center; font-size: var(--t-1); background: var(--danger-doux); color: var(--danger-texte); }
body:has(#voile.actif) .attente { animation-play-state: paused; }



body.lecteur-ouvert #zone { content-visibility: hidden; }
.num {
position: absolute;
top: 14px; inset-inline-start: 12px;
z-index: var(--z-carte);
min-width: 22px; height: 22px;
padding: 0 7px;
border-radius: var(--rayon-plein);
display: flex; align-items: center; justify-content: center;
font-size: var(--t-1); font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums;
color: var(--papier);
background: var(--pastille);
pointer-events: none;
}
.feuille > .num { top: 6px; inset-inline-start: 6px; }
.num { box-shadow: 0 0 0 1px var(--lisere); }
.card.selectionnee .num { background: var(--accent-encre); }
.card.selectionnee .feuille::after {
content: "";
position: absolute;
top: 6px; inset-inline-end: 6px;
z-index: var(--z-carte);
width: 22px; height: 22px;
border-radius: 50%;
background: var(--accent-encre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
box-shadow: 0 0 0 2px var(--papier);
}
.legende {
display: flex; flex-direction: column; align-items: center; gap: 3px;
min-height: 1.3em;
text-align: center;
line-height: 1.3;
}
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%; }
.tag { display: inline-block; padding: 1px var(--e2); border-radius: var(--rayon-plein); font-size: var(--t-1); font-weight: 600; letter-spacing: .04em; background: var(--surface-3); color: var(--texte-2); }
.src {
max-width: 100%;
font-size: var(--t-1);
color: var(--texte-2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rot {
font-size: var(--t-1); font-weight: 600;
color: var(--texte-2);
background: var(--surface-3);
border-radius: var(--rayon-plein);
padding: 1px var(--e2);
}


#indicateur {
position: absolute;
width: 4px;
margin-left: -1px;
border-radius: var(--rayon-papier);
background: var(--accent);
box-shadow: 0 0 0 3px var(--accent-doux);
pointer-events: none;
z-index: var(--z-indicateur);
}
#indicateur::before, #indicateur::after {
content: "";
position: absolute;
left: 50%;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--accent);
transform: translateX(-50%);
}
#indicateur::before { top: -5px; }
#indicateur::after { bottom: -5px; }


#vide {
position: absolute;
inset: 0;
display: flex;
align-items: safe center;
justify-content: center;
overflow: auto;
padding: var(--e5);
}
.carte-vide {
cursor: pointer;
width: min(600px, 100%);
padding: var(--e7) var(--e6) 40px;
border: 2px dashed var(--bordure-forte);
border-radius: var(--rayon-4);
text-align: center;
background: var(--surface-2);
background: color-mix(in srgb, var(--surface) 72%, transparent);
transition: border-color var(--d-2), background var(--d-2), transform var(--d-2);
}
#zone.survol-depot .carte-vide {
border-color: var(--accent);
background: var(--accent-doux);
transform: translateY(-2px);
}
.carte-vide .illu {
width: 76px; height: 76px;
margin: 0 auto var(--e4);
border-radius: var(--rayon-4);
display: grid; place-items: center;
color: var(--accent);
background: var(--accent-doux);
}
.carte-vide .illu .ic { width: 38px; height: 38px; stroke-width: 1.5; }
.carte-vide .titre { font-size: var(--t-6); font-weight: 700; letter-spacing: -.01em; }
.carte-vide p { margin: var(--e2) auto 0; max-width: 46ch; color: var(--texte-2); }
.raccourcis {
display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2) var(--e4);
margin-top: var(--e5);
font-size: var(--t-1); color: var(--texte-3);
}
.raccourcis span { display: inline-flex; align-items: center; gap: 4px; }
.raccourcis.tactile { display: none; }

.accueil { width: min(600px, 100%); display: flex; flex-direction: column; align-items: center; gap: var(--e4); }
.promesse { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2); }
.pastille { font-size: var(--t-1); font-weight: 600; color: var(--accent-texte); background: var(--accent-doux); border-radius: var(--rayon-plein); padding: 5px var(--e3); }
.presentation { margin: 0; max-width: 58ch; text-align: center; font-size: var(--t-2); line-height: 1.5; color: var(--texte-3); }


footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e3);
min-height: 36px;
padding: 0 var(--e4);
background: var(--surface);
border-top: 1px solid var(--bordure);
font-size: var(--t-1);
color: var(--texte-2);
}

#statut { margin-inline-end: auto; }
.liens-pied { display: flex; align-items: center; gap: var(--e1); flex: none; }
.lien-pied { font-size: var(--t-1); color: var(--texte-2); text-decoration: underline; padding: var(--e1) var(--e2); border-radius: var(--rayon-2); flex: none; }
.lien-pied:active { color: var(--texte); }
@media (pointer: coarse) { .lien-pied { display: inline-flex; align-items: center; min-height: var(--h-l); } }


.nav-langues { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.nav-langues a { color: var(--accent-texte); }
@media (pointer: coarse) { .nav-langues a { display: inline-flex; align-items: center; min-height: var(--h-l); } }
html.js .nav-langues { display: none; }
#statut { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-3); font-weight: 600; color: var(--texte); font-variant-numeric: tabular-nums; }
#statut::before {
content: "";
width: 8px; height: 8px; flex: none;
border-radius: 50%;
background: var(--texte-3);
}
#statut[data-etat="propre"]::before { background: var(--succes); }





#statut[data-etat="chargement"]::before { background: var(--accent); animation: pulse-chargement 1.2s ease-in-out infinite alternate; }
html.js:not([data-pret]):not([data-sans-dictionnaire]) :is(header, main, footer, .barre-bas) :is(button, select, label.btn, .carte-vide),
html.js.hors-site:not([data-pret]):not([data-sans-dictionnaire]) #lien_mentions { cursor: progress; }








html.js:not([data-pret]):not([data-sans-dictionnaire]) header .btn,
html.js:not([data-pret]):not([data-sans-dictionnaire]) #btn_theme,
html.js:not([data-pret]):not([data-sans-dictionnaire]) .bas-btn,
html.js:not([data-pret]):not([data-sans-dictionnaire]) #btn_apropos,
html.js.hors-site:not([data-pret]):not([data-sans-dictionnaire]) #lien_mentions { color: var(--texte-inactif); }
html.js:not([data-pret]):not([data-sans-dictionnaire]) header .btn:not(:disabled):is(:hover, :active) { background: transparent; border-color: transparent; transform: none; }
html.js:not([data-pret]):not([data-sans-dictionnaire]) .bas-btn:not(:disabled):is(:hover, :active) .bas-ic { background: transparent; }
html.js:not([data-pret]):not([data-sans-dictionnaire]) header .btn.langue select { pointer-events: none; }
html.js:not([data-pret]):not([data-sans-dictionnaire]) :is(.carte-vide, #vide:hover .carte-vide) { border-color: var(--bordure-ui); transform: none; }
html.js:not([data-pret]):not([data-sans-dictionnaire]) #vide:hover .carte-vide { background: var(--surface-2); background: color-mix(in srgb, var(--surface) 72%, transparent); }
html.js:not([data-pret]):not([data-sans-dictionnaire]) .carte-vide .illu { color: var(--texte-inactif); background: var(--surface-2); }
html.js:not([data-pret]):not([data-sans-dictionnaire]) .carte-vide .titre { color: var(--texte-2); }


html.js:not([data-pret]):not([data-sans-dictionnaire]) #statut[data-rappel] {
border-radius: var(--rayon-1);
color: var(--accent-texte);
background: var(--accent-doux);
box-shadow: 0 0 0 4px var(--accent-doux);
animation: rappel-chargement 1.6s ease-out forwards;
}
@media (forced-colors: active) {
html.js:not([data-pret]):not([data-sans-dictionnaire]) :is(header .btn, .bas-btn, #btn_apropos, .carte-vide .illu, .carte-vide .titre),
html.js.hors-site:not([data-pret]):not([data-sans-dictionnaire]) #lien_mentions { color: GrayText; }
html.js:not([data-pret]):not([data-sans-dictionnaire]) :is(.carte-vide, #vide:hover .carte-vide) { border-color: GrayText; }
html.js:not([data-pret]):not([data-sans-dictionnaire]) #statut[data-rappel] { outline: 2px solid Highlight; outline-offset: 2px; }
}


#statut[data-etat="erreur"]::before { background: var(--danger); }
#statut[data-etat="modifie"]::before { background: var(--avert); box-shadow: 0 0 0 3px var(--avert-doux); box-shadow: 0 0 0 3px color-mix(in srgb, var(--avert) 18%, transparent); }
.aide { font-size: var(--t-1); color: var(--texte-3); }


@media (min-width: 720px) {
#statut { flex: none; white-space: nowrap; }

#statut[data-etat="erreur"] { flex: 1 1 auto; min-width: 0; white-space: normal; padding-block: var(--e1); }
footer .aide { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: end; }
}


dialog {
margin: auto;
border: 0;
border-radius: var(--rayon-4);
padding: 0;
width: min(480px, 92vw);
color: var(--texte);
background: var(--surface);
box-shadow: var(--ombre-flottante);
}
dialog::backdrop { background: var(--fond-backdrop); backdrop-filter: blur(3px); }
dialog[open] { animation: monte var(--d-3) var(--courbe); }

dialog form { display: flex; flex-direction: column; max-height: calc(100dvh - 40px); }
.dlg-tete { padding: var(--e5) var(--e5) 0; }
.dlg-tete h2 { font-size: var(--t-5); font-weight: 700; letter-spacing: -.01em; }
.dlg-tete p { margin-top: var(--e1); font-size: var(--t-2); color: var(--texte-2); }
.dlg-corps { display: flex; flex-direction: column; gap: var(--e4); padding: var(--e4) var(--e5) var(--e1); overflow: auto; min-height: 0; }
.dlg-pied { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e2); padding: var(--e3) var(--e5) var(--e5); }
.dlg-pied .a-gauche { margin-inline-end: auto; }

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


.dlg-tete.avec-croix:not(.apropos-tete) { display: flex; align-items: flex-start; gap: var(--e3); }
.dlg-tete.avec-croix > h2, .apropos-tete > div { flex: 1; min-width: 0; }
.dlg-croix { flex: none; align-self: flex-start; margin-inline-start: auto; margin-block-start: calc(-1 * var(--e2)); margin-inline-end: calc(-1 * var(--e2)); color: var(--texte-2); }

.dlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e2); margin-inline-start: auto; }

.onglets { display: flex; gap: 2px; border-bottom: 1px solid var(--bordure); margin-bottom: var(--e3); overflow-x: auto; scrollbar-width: none; }
.onglet { padding: var(--e2) var(--e3); font-size: var(--t-2); font-weight: 600; color: var(--texte-2); border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: var(--rayon-2) var(--rayon-2) 0 0; white-space: nowrap; flex: none; }
.onglet:active { background: var(--surface-3); }
.onglet.actif { color: var(--accent-texte); border-bottom-color: var(--accent); }
.panneau { display: flex; flex-direction: column; gap: var(--e3); }
.ligne-boutons { display: flex; gap: var(--e2); }


.dlg-corps .ligne-boutons .btn:not(.primaire) { border-color: var(--bordure-ui); }
.sig-canvas { display: block; width: 100%; aspect-ratio: 3 / 1; background: var(--papier); border: 1px dashed var(--bordure-forte); border-radius: var(--rayon-3); touch-action: none; cursor: crosshair; }

.damier { background: repeating-conic-gradient(var(--damier) 0 25%, var(--papier) 0 50%) 0 0 / 16px 16px; }
.sig-apercu img { display: block; max-width: 100%; max-height: 120px; border-radius: var(--rayon-2); padding: var(--e2); }
.sig-liste { display: flex; flex-wrap: wrap; gap: var(--e2); }
.carte-sig { display: flex; flex-direction: column; align-items: center; gap: var(--e2); padding: var(--e2); border: 1px solid var(--bordure-ui); border-radius: var(--rayon-3); }
.carte-sig img { height: 48px; max-width: 180px; object-fit: contain; border-radius: var(--rayon-1); }
.carte-sig .ligne-boutons .btn { height: var(--h-s); padding: 0 var(--e3); font-size: var(--t-1); }
.sig-scene-conteneur { display: flex; justify-content: center; }
.sig-scene { position: relative; display: inline-block; max-width: 100%; user-select: none; }
#sig_page { display: block; max-width: 100%; max-height: 52vh; border: 1px solid var(--bordure); box-shadow: var(--ombre-papier); background: var(--papier); }
.sig-calque { position: absolute; border: 2px dashed var(--accent-encre); border-radius: var(--rayon-papier); background-size: contain; background-repeat: no-repeat; background-position: center; cursor: move; touch-action: none; }

.sig-calque:focus-visible { outline: 2px solid var(--accent-encre); outline-offset: 3px; }
.sig-calque .poignee { position: absolute; right: -8px; bottom: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-encre); border: 2px solid var(--papier); cursor: nwse-resize; touch-action: none; }
.sig-calque .poignee::before { content: ""; position: absolute; inset: -8px; }
@media (pointer: coarse) { .sig-calque .poignee { width: 32px; height: 32px; } }
#sig_etape2 { display: flex; flex-direction: column; gap: var(--e4); }
.options.ligne { flex-direction: row; flex-wrap: wrap; }
.options.ligne .option { flex: 1 1 140px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
#num_bloc { grid-template-columns: repeat(2, minmax(0, 1fr)); }


#fil_reglages { grid-template-columns: repeat(2, minmax(0, 1fr)); }

#vg_grille { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 479px) {
.grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#num_bloc, #fil_reglages { grid-template-columns: minmax(0, 1fr); }
.onglet { padding-inline: var(--e1); font-size: var(--t-1); }
}
input[type=range] { width: 100%; accent-color: var(--accent); margin: var(--e1) 0; }
.dlg-pied .btn:not(.primaire):not(.langue) { border-color: var(--bordure-ui); }
.dlg-pied .btn { flex: 0 1 auto; max-width: 100%; height: auto; min-height: var(--h-m); white-space: normal; text-align: center; }


.btn.danger.plein:not(:disabled) { background: var(--danger-fond); border-color: var(--danger-fond); color: var(--sur-danger); font-weight: 600; padding: 0 var(--e4); }
.btn.danger.plein:active:not(:disabled) { background: var(--danger-fort); border-color: var(--danger-fort); }
.titre-champ {
display: block;
margin-bottom: var(--e2);
font-size: var(--t-1); font-weight: 600;
letter-spacing: .05em; text-transform: uppercase;
color: var(--texte-2);
}
.entree {
font: inherit;
line-height: 1.4;
width: 100%;
min-height: var(--h-m);
padding: 6px var(--e3);
border: 1px solid var(--bordure-forte);
border-radius: var(--rayon-2);
color: var(--texte);
background: var(--surface);
transition: border-color var(--d-1), box-shadow var(--d-1);
}
.entree:focus { border-color: var(--accent); }
.entree::placeholder { color: var(--texte-2); }



html[dir="rtl"] #ins_plage, html[dir="rtl"] #ext_plages { text-align: right; }


.entree:disabled { color: var(--texte-inactif); border-color: var(--bordure); cursor: default; opacity: 1; }


.deroulant { position: relative; }
select.entree { -webkit-appearance: none; appearance: none; padding-inline-end: calc(var(--e3) + 16px + var(--e2)); cursor: pointer; }
select.entree:disabled { cursor: default; }
.deroulant .chevron { position: absolute; top: 50%; inset-inline-end: var(--e3); width: 16px; height: 16px; margin-top: -8px; color: var(--texte-2); pointer-events: none; }
.deroulant:has(select:disabled) .chevron { color: var(--texte-inactif); }


.choix-fichier { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); min-width: 0; }
.choix-fichier .btn:not(.primaire):not(.langue) { border-color: var(--bordure-ui); max-width: 100%; height: auto; min-height: var(--h-m); white-space: normal; text-align: start; }
.choix-fichier:has(input[aria-invalid="true"]) .btn:not(.primaire):not(.langue) { border-color: var(--danger); }
.choix-fichier .chip { min-width: 0; }
.chip.vide { color: var(--texte-2); }
.aide-champ { margin-top: var(--e2); font-size: var(--t-1); color: var(--texte-2); }

.entree[aria-invalid="true"], .sig-canvas[aria-invalid="true"] { border-color: var(--danger); }
.aide-champ.erreur { display: flex; align-items: flex-start; gap: var(--e1); color: var(--danger-texte); font-weight: 600; }
.aide-champ.erreur::before {
content: ""; flex: none; width: 14px; height: 14px; margin-top: 1px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16.5v.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16.5v.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dlg-corps > .aide-champ.erreur { margin-top: calc(var(--e2) - var(--e4)); }
.panneau > .aide-champ.erreur { margin-top: calc(var(--e2) - var(--e3)); }
.options > .aide-champ.erreur { margin-top: 0; }
.entree.court { width: 78px; min-height: var(--h-s); padding: 4px var(--e2); margin-inline-start: auto; }
.entree.nombre { width: 120px; }
.dlg-texte { font-size: var(--t-2); line-height: 1.5; color: var(--texte-2); }
#apropos_mentions p + p { margin-top: var(--e2); }
.insecable { white-space: nowrap; }
.licences { padding-inline-start: var(--e4); font-size: var(--t-2); line-height: 1.7; color: var(--texte-2); }
.licences a, .dlg-texte a { color: var(--accent-texte); }
.conditions { display: grid; gap: var(--e2); margin: var(--e2) 0 0; padding-inline-start: var(--e4); }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.options { display: flex; flex-direction: column; gap: var(--e2); }
.option {
display: flex; align-items: center; gap: var(--e3);
padding: var(--e2) var(--e3);
border: 1px solid var(--bordure-ui);
border-radius: var(--rayon-3);
cursor: pointer;
transition: background var(--d-1), border-color var(--d-1);
}
.option:active { background: var(--surface-3); }
.option.inactif:active { background: none; }

@supports selector(:has(a)) {
.option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.option input:focus-visible { outline: none; }
}
@supports not selector(:has(a)) {
.option:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
}

.marque-principale { display: none; margin-inline-start: auto; font-size: var(--t-1); color: var(--texte-2); }
.option.principale .marque-principale { display: inline; }
.option.inactif, .grille-3.inactif { color: var(--texte-inactif); cursor: default; }
.option.inactif .aide-champ { color: var(--texte-2); }
.grille-3.inactif .titre-champ { color: var(--texte-inactif); }
.option.inactif input { opacity: .5; }
.option:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); }
.option input[type=radio] { accent-color: var(--accent); margin: 0; width: 16px; height: 16px; }
.cases { display: flex; flex-wrap: wrap; gap: var(--e2); }
.cases .option, .case-seule { padding: 6px var(--e3); font-size: var(--t-2); }
.case-seule { margin-top: 2px; }
.option input[type=checkbox] { accent-color: var(--accent); margin: 0; width: 16px; height: 16px; flex: none; }

.dlg-note.alerte { font-size: var(--t-2); padding: var(--e2) var(--e3); border-radius: var(--rayon-2); border-inline-start: 3px solid var(--avert); background: var(--avert-doux); color: var(--texte); }
#voile progress { width: min(360px, 80vw); height: 6px; accent-color: var(--accent); }
#voile .btn { pointer-events: auto; border-color: var(--bordure-forte); background: var(--surface); }
.chips { display: flex; flex-wrap: wrap; gap: var(--e2); max-height: 96px; overflow: auto; }
.chip {
display: inline-flex; align-items: center; gap: var(--e2);
max-width: 100%;
padding: var(--e1) var(--e3);
border-radius: var(--rayon-plein);
font-size: var(--t-1);
color: var(--texte);
background: var(--surface-3);
}
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .ic { width: 14px; height: 14px; color: var(--texte-2); }

.lecteur { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; border-radius: 0; background: var(--fond); }
.lecteur[open] { display: flex; flex-direction: column; animation: none; }
.lect-barre { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); padding: var(--e2) var(--e3); background: var(--surface); border-bottom: 1px solid var(--bordure); }
.lect-barre .btn:not(.primaire) { border-color: var(--bordure-ui); }
.lect-titre { font-weight: 600; margin-inline-end: auto; font-variant-numeric: tabular-nums; }
.lect-groupe { display: flex; align-items: center; gap: var(--e1); }
.lect-valeur { min-width: 68px; justify-content: center; font-variant-numeric: tabular-nums; }

.lect-scene { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable both-edges; display: flex; padding: var(--e4); touch-action: none; }
.lect-scene:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lect-scene { -webkit-user-select: none; user-select: none; }
.lect-page { margin: auto; line-height: 0; background: var(--papier); box-shadow: var(--ombre-papier-haute); outline: 1px solid var(--contour-image); }
.lect-page canvas { display: block; }
.lect-scene.rendu .lect-page { cursor: progress; }
.lect-scene.lect-attente .lect-page { opacity: .4; transition: opacity var(--d-2); }
.lect-message { margin: auto; padding: var(--e3) var(--e4); border-radius: var(--rayon-2); background: var(--danger-doux); color: var(--danger-texte); font-weight: 600; }
[dir="rtl"] #lect_prec .ic, [dir="rtl"] #lect_suiv .ic { transform: scaleX(-1); }

.lect-page { position: relative; }
.lect-calque { position: absolute; inset: 0; pointer-events: none; }
.lect-scene.noter .lect-page { cursor: crosshair; }
.note-puce { position: absolute; pointer-events: auto; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; translate: -50% -50%; --demi-puce: 12px; border-radius: 50%; border: 2px solid var(--papier); background: var(--note-encre); color: var(--papier); font-size: var(--t-1); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: var(--ombre-papier); cursor: pointer; }
.note-puce .ic { width: 14px; height: 14px; }
.note-puce.source { background: var(--note-source); }
.note-puce.active { box-shadow: 0 0 0 2px var(--papier), 0 0 0 4px var(--accent-encre); }
.note-puce.provisoire { outline: 2px dashed var(--accent-encre); outline-offset: 2px; box-shadow: var(--ombre-papier); }
.note-puce:focus-visible { outline: 2px solid var(--accent-encre); outline-offset: 2px; }
.lect-noter, .lect-corriger { gap: var(--e1); padding: 0 var(--e2); }
.lect-noter[aria-pressed="true"] { background: var(--accent-doux); border-color: var(--accent); color: var(--accent-texte); }
.lect-compte { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--rayon-plein); background: var(--avert-doux); color: var(--avert-texte); font-size: var(--t-1); font-weight: 700; line-height: 18px; text-align: center; }
.lect-barre .lect-noter[aria-pressed="true"], .lect-barre .lect-corriger[aria-pressed="true"] { border-color: var(--accent); }
.lect-noter[aria-pressed="true"] .ic { fill: currentColor; }
.lect-corriger[aria-pressed="true"] { background: var(--accent-doux); color: var(--accent-texte); }
.lect-corriger[aria-pressed="true"] .ic { stroke-width: 3; }


.lect-scene.corriger .lect-page { cursor: text; }
.lect-calque[inert] { opacity: .35; }
.cible-texte { position: absolute; pointer-events: auto; border: 0; border-bottom: 1.5px dotted var(--corr-souligne); padding: 0; margin: 0; background: transparent; border-radius: 0; cursor: text; }
.cible-texte.active { border-bottom-color: transparent; outline: 2px solid var(--accent-encre); outline-offset: 1px; background: var(--corr-survol); border-radius: var(--rayon-1); z-index: 1; }
.cible-texte.corrigee { border-bottom-color: transparent; background: transparent; outline: 2px dashed var(--accent-encre); outline-offset: 1px; border-radius: var(--rayon-1); }
.cible-texte.corrigee.active { outline-style: solid; background: var(--corr-survol); }
.cible-texte:focus-visible { outline: 2px solid var(--accent-encre); outline-offset: 2px; background: var(--corr-survol); border-radius: var(--rayon-1); z-index: 1; }

.corr-ligne { display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.corr-ligne .entree { flex: 1 1 8em; min-width: 0; }
.corr-origine { flex: 0 0 auto; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-2); color: var(--texte-2); }
.corr-origine:empty { display: none; }
.corr-image { flex: none; height: 28px; max-width: 42%; object-fit: contain; object-position: left center; border: 1px solid var(--bordure-ui); border-radius: var(--rayon-1); background: var(--papier); }
.corr-actions { display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap; }
.corr-actions .dlg-actions { margin-inline-start: auto; }
#lect_corr_gras[aria-pressed="true"] { background: var(--accent-doux); border-color: var(--accent); color: var(--accent-texte); }
#lect_corr_gras[aria-pressed="true"] .ic { stroke-width: 3; }
.corr-etat { margin: 0; font-size: var(--t-1); color: var(--texte-2); }
.lect-libelle-icone .ic { display: none; }
.vers-gauche .ic { transform: scaleX(-1); }
.corr-etat[data-mode="masque"] { color: var(--avert-texte); }
.note-puce::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.note-puce:hover, .note-puce:focus-visible, .note-puce.active { z-index: 1; }

.note-puce.zone { margin: 0; translate: none; width: auto; height: auto; border: 0; border-radius: var(--rayon-1); background: transparent; box-shadow: none; }
.note-puce.zone:hover { outline: 2px solid var(--note-source); outline-offset: 2px; }
.note-puce.zone.active { outline: 2px solid var(--accent-encre); outline-offset: 2px; box-shadow: none; }
.lect-note textarea[readonly], .lect-note textarea:disabled, .lect-note input.entree:disabled { background: var(--surface-2); resize: none; }
.lect-note textarea[readonly]:focus { border-color: var(--bordure-forte); }
.lect-note textarea:disabled, .lect-note input.entree:disabled { color: var(--texte-inactif); cursor: default; }
.lect-note-actions { flex-wrap: wrap; }
[dir="rtl"] #lect_noter .ic, [dir="rtl"] .note-puce .ic { transform: scaleX(-1); }


.lect-note { padding: var(--e3); border-top: 1px solid var(--bordure); background: var(--surface); }
.lect-note-corps { display: flex; flex-direction: column; gap: var(--e2); width: min(560px, 100%); margin: 0 auto; }
.lect-note-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3); font-weight: 600; font-size: var(--t-2); }
.lect-note-date { margin-inline-start: auto; font-weight: 400; font-size: var(--t-1); color: var(--texte-2); }
.lect-note textarea { resize: vertical; min-height: 72px; max-height: 40dvh; }
html[dir="rtl"] #lect_corr_texte:placeholder-shown, html[dir="rtl"] #lect_note_texte:placeholder-shown { direction: rtl; }
.lect-note-actions { display: flex; align-items: center; gap: var(--e2); }
@media (pointer: coarse) { .note-puce { width: 32px; height: 32px; --demi-puce: 16px; } .note-puce .ic { width: 18px; height: 18px; } }
@media (max-width: 719px) {
.lect-barre { order: 2; border-bottom: 0; border-top: 1px solid var(--bordure); padding-bottom: max(var(--e2), env(safe-area-inset-bottom, 0px)); }
.lect-scene { order: 1; padding: var(--e2); }
.lect-note { order: 1; padding: var(--e2) var(--e3); }
}

@media (min-width: 720px) and (max-height: 480px) {
.lecteur[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) auto; }
.lect-barre { grid-column: 1 / -1; }
.lect-scene { grid-row: 2; grid-column: 1; }
.lect-note { grid-row: 2; grid-column: 2; width: min(320px, 45vw); border-top: 0; border-inline-start: 1px solid var(--bordure); overflow: auto; }
}
@media (max-height: 480px) {
.lect-note { padding: var(--e2) var(--e3); }
.lect-note textarea { min-height: var(--h-l); }
}
@media (max-width: 719px) and (max-height: 480px) {
.lecteur:has(#lect_note_texte:enabled:focus) .lect-barre, .lecteur:has(#lect_corr_texte:enabled:focus) .lect-barre { display: none; }
}
@media (max-width: 479px) {
.lect-corr .corr-actions .btn:not(.icone) { padding: 0 var(--e2); }


.lect-libelle-icone { width: var(--h-m); padding: 0; justify-content: center; }
.lect-libelle-icone .ic { display: block; }
.lect-libelle-icone > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.lect-noter, .lect-corriger { position: relative; width: var(--h-m); padding: 0; justify-content: center; }
.lect-noter .lect-compte, .lect-corriger .lect-compte { position: absolute; top: -6px; inset-inline-end: -6px; box-shadow: 0 0 0 2px var(--surface); }
}



.lect-caviarder { gap: var(--e1); padding: 0 var(--e2); }
.lect-caviarder[aria-pressed="true"], .lect-barre .lect-caviarder[aria-pressed="true"] { background: var(--accent-doux); border-color: var(--accent); color: var(--accent-texte); }
.lect-caviarder[aria-pressed="true"] .ic { stroke-width: 3; }
[dir="rtl"] #lect_caviarder .ic { transform: scaleX(-1); }

.lect-caviards[inert] { opacity: 1; }
.cav-zone { position: absolute; pointer-events: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--caviard); }

.lect-scene.caviarder .cav-zone { pointer-events: auto; cursor: move; outline: 1px dashed var(--accent-encre); outline-offset: 1px; }

.cav-zone.active, .cav-zone.trace, .lect-caviards.dessous .cav-zone { background: repeating-linear-gradient(-45deg, var(--caviard-hachure-1) 0 4px, var(--caviard-hachure-2) 4px 8px); }
.lect-scene.caviarder .cav-zone.active { outline: 2px solid var(--accent-encre); outline-offset: 1px; z-index: 2; }
.cav-zone.trace { outline: 2px dashed var(--accent-encre); outline-offset: 0; z-index: 3; }
.lect-scene.caviarder .cav-zone:focus-visible { outline: 2px solid var(--accent-encre); outline-offset: 3px; }

.cav-poignee { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-encre); border: 2px solid var(--papier); touch-action: none; }
.cav-poignee::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.cav-poignee[data-coin="nw"] { left: 0; top: 0; translate: -100% -100%; cursor: nwse-resize; }
.cav-poignee[data-coin="ne"] { left: 100%; top: 0; translate: 0 -100%; cursor: nesw-resize; }
.cav-poignee[data-coin="sw"] { left: 0; top: 100%; translate: -100% 0; cursor: nesw-resize; }
.cav-poignee[data-coin="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
@media (pointer: coarse) { .cav-poignee { width: 18px; height: 18px; } .cav-poignee::before { inset: -13px; } }
.cav-mot { position: absolute; pointer-events: auto; border: 0; padding: 0; margin: 0; background: transparent; border-radius: 0; cursor: pointer; }
.cav-mot:focus-visible { outline: 2px solid var(--accent-encre); outline-offset: 2px; background: var(--caviard-survol); }
.lect-scene.caviarder .lect-page { cursor: crosshair; }



.lect-cav { position: relative; }


.cav-etat { margin: 0; font-size: var(--t-1); color: var(--texte-2); height: calc(2 * 1.45em); height: 2lh; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.lect-note .btn:not(.primaire) { border-color: var(--bordure-ui); }
.cav-avert { margin: 0; font-size: var(--t-1); color: var(--avert-texte); }
.lect-cav-liste { gap: var(--e1); }
.lect-cav-liste .lect-compte { background: var(--surface-3); color: var(--texte-2); }
.cav-liste { position: absolute; inset-inline: 0; bottom: 100%; z-index: 3; max-height: min(50dvh, 360px); overflow: auto; padding: var(--e2) var(--e3) var(--e3); background: var(--surface); border-top: 1px solid var(--bordure); box-shadow: var(--ombre-flottante); display: flex; flex-direction: column; gap: var(--e1); }
.cav-liste h3 { font-size: var(--t-1); font-weight: 600; color: var(--texte-2); text-transform: uppercase; letter-spacing: .04em; margin: var(--e1) 0 0; }
.cav-liste ol { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.cav-liste li { display: flex; align-items: center; gap: var(--e1); }
.cav-vide { margin: 0; font-size: var(--t-2); color: var(--texte-2); }
.cav-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e2); min-height: var(--h-s); padding: 0 var(--e2); border: 0; border-radius: var(--rayon-1); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.cav-item[aria-current="true"] { background: var(--accent-doux); color: var(--accent-texte); }
.cav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cav-num { flex: none; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 3px; background: var(--caviard); color: var(--sur-caviard); box-shadow: 0 0 0 1px var(--caviard-contour); font-size: var(--t-1); font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.cav-lib { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cav-liste .btn.icone { width: var(--h-s); height: var(--h-s); }
#lect_cav_dessous[aria-pressed="true"] { background: var(--accent-doux); border-color: var(--accent); color: var(--accent-texte); }


@media (min-width: 1024px) {
.lecteur[open]:has(#lect_cav:not([hidden])) { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) auto; }
.lecteur:has(#lect_cav:not([hidden])) .lect-barre { grid-column: 1 / -1; }
.lecteur:has(#lect_cav:not([hidden])) .lect-scene { grid-row: 2; grid-column: 1; }
.lect-cav { grid-row: 2; grid-column: 2; width: min(340px, 30vw); border-top: 0; border-inline-start: 1px solid var(--bordure); overflow: auto; }
.lect-cav .lect-note-corps { width: 100%; }
.lect-cav .cav-liste { position: static; max-height: none; overflow: visible; padding: var(--e2) 0 0; box-shadow: none; background: none; border-top: 1px solid var(--bordure); }
#lect_cav_liste { display: none; }
.lect-cav .cav-etat { height: auto; min-height: 2lh; display: block; overflow: visible; -webkit-line-clamp: none; }
}

.tag.caviard::before { content: ""; display: inline-block; width: 10px; height: 6px; margin-inline-end: 4px; vertical-align: middle; border-radius: 1px; background: var(--caviard); box-shadow: 0 0 0 1px var(--caviard-contour); }

.cav-consequences { padding-inline-start: 1.2em; display: flex; flex-direction: column; gap: var(--e2); }
.cav-ocr { margin-top: var(--e1); height: auto; min-height: var(--h-s); max-width: 100%; white-space: normal; text-align: start; font-size: var(--t-2); border-color: var(--bordure-ui); }
.cav-nom { font-size: var(--t-2); color: var(--texte-2); overflow-wrap: anywhere; }
.cav-alerte-nom { padding: var(--e2) var(--e3); border-radius: var(--rayon-2); border-inline-start: 3px solid var(--danger); background: var(--danger-doux); color: var(--danger-texte); font-size: var(--t-2); font-weight: 600; overflow-wrap: anywhere; }



.avant-infos { display: flex; flex-direction: column; gap: var(--e3); }
#avant_listes, #cav_dlg_listes { display: flex; flex-direction: column; gap: var(--e2); }
.avant-source { font-size: var(--t-2); line-height: 1.5; overflow-wrap: anywhere; }
.avant-liste { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: var(--e1) var(--e3); padding: var(--e2) var(--e3); border: 1px solid var(--bordure-ui); border-radius: var(--rayon-2); font-size: var(--t-2); line-height: 1.45; }
.avant-liste dt { color: var(--texte-2); overflow-wrap: anywhere; }
.avant-liste dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 479px) {
.avant-liste { grid-template-columns: minmax(0, 1fr); gap: 0; }
.avant-liste dd + dt { margin-top: var(--e2); }
}
@media (max-width: 479px) {
.lect-caviarder { position: relative; width: var(--h-m); padding: 0; justify-content: center; }
.lect-caviarder .lect-compte { position: absolute; top: -6px; inset-inline-end: -6px; box-shadow: 0 0 0 2px var(--surface); }
.lect-cav .corr-actions .btn:not(.icone) { padding: 0 var(--e2); }
}
@media (hover: hover) and (pointer: fine) {
.lect-caviarder[aria-pressed="true"]:hover { background: var(--accent-doux); border-color: var(--accent); }
.lect-scene:not(.sans-survol) .cav-mot:hover { background: var(--caviard-survol); }
.cav-item:hover:not([aria-current="true"]) { background: var(--surface-2); }
#lect_cav_dessous[aria-pressed="true"]:hover:not(:disabled) { background: var(--accent-doux); border-color: var(--accent); }
}
@media (forced-colors: active) {
.cav-zone, .cav-num, .tag.caviard::before, .cav-poignee { forced-color-adjust: none; }


.cav-mot { forced-color-adjust: none; }
.cav-mot:focus-visible { outline-color: var(--accent-encre); }
.lect-barre .lect-caviarder[aria-pressed="true"], .lect-caviarder[aria-pressed="true"], #lect_cav_dessous[aria-pressed="true"] { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; }
.cav-item[aria-current="true"] { outline: 2px solid Highlight; }
}



.lect-cav-chercher { position: relative; }
.lect-cav-chercher .lect-compte { position: absolute; top: -6px; inset-inline-end: -6px; box-shadow: 0 0 0 2px var(--surface); background: var(--accent); color: var(--sur-accent); }
.lect-cav-chercher[aria-expanded="true"], .lect-cav-chercher.signale { background: var(--accent-doux); border-color: var(--accent); color: var(--accent-texte); }

.cav-recherche { position: absolute; inset-inline: 0; bottom: 100%; z-index: 3; max-height: min(72dvh, 560px); overflow: auto; padding: var(--e2) var(--e3) 0; background: var(--surface); border-top: 1px solid var(--bordure); box-shadow: var(--ombre-flottante); display: flex; flex-direction: column; gap: var(--e2); overscroll-behavior: contain; scroll-padding-block-end: calc(var(--h-l) + 2 * var(--e2) + 1px); }
.rech-tete { display: flex; align-items: center; gap: var(--e2); }
.rech-tete h3 { flex: 1; min-width: 0; margin: 0; font-size: var(--t-2); font-weight: 600; color: var(--texte); }
.rech-tete .btn.icone { width: var(--h-s); height: var(--h-s); }
.rech-ligne { display: flex; gap: var(--e1); }
.rech-ligne .entree { flex: 1 1 8em; min-width: 0; }
.rech-ligne .btn { flex: none; }
.rech-options { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); margin-top: var(--e1); }
.rech-options .btn { min-height: var(--h-s); height: auto; padding: 0 var(--e2); font-size: var(--t-2); }
.rech-partie { display: inline-flex; align-items: center; gap: var(--e1); min-height: var(--h-s); font-size: var(--t-2); color: var(--texte-2); cursor: pointer; }
.rech-partie input { width: 16px; height: 16px; accent-color: var(--accent); }

.rech-progression { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e1) var(--e2); font-size: var(--t-1); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.rech-progression #rech_progres_texte { grid-column: 1 / -1; min-height: 1.45em; }
.rech-progression progress { width: 100%; min-width: 60px; height: 6px; accent-color: var(--accent); }
.rech-progression .btn { min-height: var(--h-s); height: auto; }
.rech-bilan { margin: 0; font-size: var(--t-2); color: var(--texte); }
.rech-bilan:empty { display: none; }

.rech-proposition, .rech-alerte { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e2) var(--e3); border-radius: var(--rayon-2); font-size: var(--t-2); }
.rech-proposition { border-inline-start: 3px solid var(--accent); background: var(--accent-doux); color: var(--accent-texte); }
.rech-alerte { border-inline-start: 3px solid var(--avert); background: var(--avert-doux); color: var(--avert-texte); }
.rech-proposition p, .rech-alerte p { margin: 0; }
.rech-boutons { display: flex; flex-wrap: wrap; gap: var(--e1); }
.rech-boutons .btn { min-height: var(--h-s); height: auto; max-width: 100%; white-space: normal; text-align: start; padding: var(--e1) var(--e2); font-size: var(--t-2); }
.rech-boutons .btn:not(.primaire) { background: var(--surface); border-color: var(--bordure-ui); color: var(--texte); }

.rech-prop-mots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e1); }
.rech-prop-mots label { display: flex; align-items: flex-start; gap: var(--e2); min-height: var(--h-s); cursor: pointer; overflow-wrap: anywhere; }
.rech-prop-mots input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); cursor: pointer; }
.rech-prop-cours { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e1) var(--e2); font-size: var(--t-1); font-variant-numeric: tabular-nums; }
.rech-prop-cours .btn { min-height: var(--h-s); height: auto; white-space: normal; background: var(--surface); border-color: var(--bordure-ui); color: var(--texte); }

.rech-alerte-listes { display: flex; flex-direction: column; gap: var(--e1); font-size: var(--t-1); }
.rech-alerte-listes summary { cursor: pointer; display: list-item; padding-block: var(--e2); font-weight: 600; }
.rech-alerte-listes p { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.rech-resultats { display: flex; flex-direction: column; gap: var(--e2); }
.rech-groupe { display: flex; flex-direction: column; gap: 2px; content-visibility: auto; contain-intrinsic-size: auto 40px; }
.rech-groupe-tete { display: flex; align-items: center; gap: var(--e2); min-height: var(--h-s); border-bottom: 1px solid var(--bordure); }
.rech-groupe-tete label { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e2); font-size: var(--t-2); font-weight: 600; cursor: pointer; }
.rech-groupe-tete .rech-compte { background: var(--surface-3); color: var(--texte-2); }

.rech-groupe-image .rech-groupe-tete label > span:not(.rech-compte) { min-width: 0; overflow-wrap: anywhere; }
.rech-apercu { flex: none; max-width: 56px; max-height: 36px; border: 1px solid var(--bordure-ui); border-radius: var(--rayon-papier); background: var(--papier); }
.rech-deplier { min-height: 28px; height: auto; padding: 0 var(--e2); font-size: var(--t-1); border-color: var(--bordure-ui); }
.rech-occ { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.rech-item { display: flex; align-items: flex-start; gap: var(--e2); }
.rech-item input, .rech-groupe-tete input { flex: none; width: 18px; height: 18px; margin: 7px 0 0; accent-color: var(--accent); cursor: pointer; }
.rech-case-zone { flex: none; display: flex; cursor: pointer; }
.rech-groupe-tete input { margin: 0; }
.rech-aller { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-height: var(--h-s); padding: var(--e1) var(--e2); border: 0; border-radius: var(--rayon-1); background: transparent; color: inherit; font: inherit; font-size: var(--t-2); text-align: start; cursor: pointer; }
.rech-aller:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rech-extrait { overflow-wrap: anywhere; color: var(--texte-2); line-height: 1.4; }
.rech-extrait mark { background: var(--accent-doux); color: var(--texte); font-weight: 700; border-radius: 2px; padding: 0 1px; }
.rech-extrait b { color: var(--texte); }
.rech-mrz { display: block; font-family: "Courier New", Courier, monospace; font-size: var(--t-1); overflow-wrap: anywhere; }
.rech-tag { font-size: var(--t-1); color: var(--texte-3); }
.rech-item.variante .rech-tag { color: var(--avert-texte); }
.rech-item.couvert .rech-extrait { color: var(--texte-3); }
.rech-note-element { font-size: var(--t-1); color: var(--texte-2); padding: 0 var(--e1); }
.rech-pied { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e1); margin: 0 calc(-1 * var(--e3)); padding: var(--e2) var(--e3); background: var(--surface); border-top: 1px solid var(--bordure); }
.rech-pied .btn { min-height: var(--h-s); height: auto; white-space: normal; }
.rech-pied .rech-annuler { margin-inline-end: auto; border-color: var(--bordure-ui); }
.rech-ailleurs { font-size: var(--t-1); color: var(--texte-2); }
.rech-ailleurs h4 { margin: 0 0 var(--e1); font-size: var(--t-1); font-weight: 600; color: var(--texte-2); text-transform: uppercase; letter-spacing: .04em; }
.rech-ailleurs ul { padding-inline-start: 1.1em; display: flex; flex-direction: column; gap: var(--e1); }
.rech-limites { font-size: var(--t-1); color: var(--texte-2); padding-bottom: var(--e3); }
.rech-limites summary { cursor: pointer; display: list-item; padding-block: var(--e2); font-weight: 600; }
.rech-limites p { margin: 0; }
:root:is(:lang(ar), :lang(zh), :lang(ja)) .rech-ailleurs h4 { letter-spacing: 0; text-transform: none; }

.cav-trouve { position: absolute; pointer-events: none; outline: 2px dashed var(--accent-encre); outline-offset: 1px; }
.cav-trouve.coche { outline-style: solid; background: var(--rech-trouve); }
.cav-trouve.cible { outline-width: 3px; outline-offset: 2px; background: var(--rech-cible); }
@media (min-width: 1024px) {
.lect-cav .cav-recherche { position: static; max-height: none; overflow: visible; padding: var(--e2) 0 0; box-shadow: none; background: none; border-top: 1px solid var(--bordure); }
.lect-cav { scroll-padding-block-end: calc(var(--h-l) + 2 * var(--e2) + 1px); }



.lect-cav { overflow-anchor: none; }
.lect-cav .rech-pied { margin: 0; padding: var(--e2) 0; bottom: calc(-1 * var(--e3)); }
#lect_cav_chercher, .rech-fermer { display: none; }
}
@media (pointer: coarse) {
.rech-item input, .rech-groupe-tete input { width: 22px; height: 22px; margin-top: 9px; }
.rech-groupe-tete input { margin-top: 0; }
.rech-aller, .rech-groupe-tete, .rech-options .btn, .rech-boutons .btn, .rech-pied .btn, .rech-progression .btn, .rech-partie, .rech-prop-cours .btn, .rech-prop-mots label, .rech-deplier { min-height: var(--h-l); }
.rech-alerte-listes summary, .rech-limites summary { padding-block: var(--e3); }
.rech-tete .btn.icone { width: var(--h-l); height: var(--h-l); }
.rech-case-zone { width: var(--h-l); height: var(--h-l); align-items: center; justify-content: center; margin-inline-start: calc((22px - var(--h-l)) / 2); }
.rech-item .rech-case-zone input { margin: 0; }
.rech-prop-mots input { width: 22px; height: 22px; margin-top: 5px; }
}
@media (max-width: 479px) {
.lect-cav-chercher { width: var(--h-m); }
}
@media (hover: hover) and (pointer: fine) {
.rech-aller:hover { background: var(--surface-2); }
.lect-cav-chercher.signale:hover, .lect-cav-chercher[aria-expanded="true"]:hover { background: var(--accent-doux); border-color: var(--accent); }
}
@media (forced-colors: active) {
.cav-trouve { forced-color-adjust: none; }
.rech-proposition, .rech-alerte { border: 1px solid CanvasText; border-inline-start-width: 3px; }
.lect-cav-chercher[aria-expanded="true"], .lect-cav-chercher.signale { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; }
.rech-extrait mark { forced-color-adjust: none; background: Mark; color: MarkText; }
}


#voile {
position: fixed; inset: 0;
z-index: var(--z-voile);
display: none;
flex-direction: column;
align-items: center; justify-content: center;
gap: var(--e4);
background: var(--voile);
backdrop-filter: blur(3px);
font-weight: 600;
color: var(--texte);
}
#voile.actif { display: flex; }
.spinner {
width: 36px; height: 36px;
border: 3px solid var(--accent-doux);
border-top-color: var(--accent);
border-radius: 50%;
animation: rot .8s linear infinite;
}
#toast {
position: fixed;
top: auto; left: var(--e4); right: var(--e4); bottom: 52px;
width: max-content; max-width: min(90vw, 520px); margin: 0 auto; overflow: visible;
z-index: var(--z-toast);
display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e2);
padding: var(--e3) var(--e4);
border-radius: var(--rayon-3);
font-size: var(--t-2);
border: 1px solid transparent;
color: var(--toast-texte);
background: var(--toast-fond);
box-shadow: var(--ombre-flottante);
opacity: 0;
transform: translateY(8px);
transition: opacity var(--d-2), transform var(--d-2);
pointer-events: none;
}
#toast::before {
content: "";
width: 16px; height: 16px; flex: none; margin-top: 1px;
border-radius: 50%;
background: var(--puce-succes) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101419' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}
#voile.actif ~ #toast .toast-action { display: none; }
#toast[data-type="alerte"]::before {
background: var(--puce-avert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101419' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M12 6v7'/%3E%3Cpath d='M12 17.5v.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
#toast[data-type="erreur"]::before {
background: var(--puce-danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101419' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 10px no-repeat;
}
#toast[data-type="info"]::before {
background: var(--puce-info) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101419' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M12 11v7'/%3E%3Cpath d='M12 6.5v.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
#toast.actif { opacity: 1; transform: none; pointer-events: auto; }
.toast-message { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 16px - var(--e2)); }
.toast-action { margin-inline-start: auto; padding: var(--e1) var(--e3); border-radius: var(--rayon-plein); background: var(--toast-texte); color: var(--toast-fond); font-size: var(--t-1); font-weight: 600; flex: none; display: inline-flex; align-items: center; min-height: var(--h-s); border: 1px solid transparent; }



@media (hover: hover) and (pointer: fine) {
.btn:hover:not(:disabled) { background: var(--surface-3); border-color: var(--bordure); }
.lect-noter[aria-pressed="true"]:hover, .lect-corriger[aria-pressed="true"]:hover { background: var(--accent-doux); border-color: var(--accent); }


.lect-scene:not(.sans-survol) .cible-texte:hover:not(.active) { border-bottom: 2px solid var(--accent-encre); }
.lect-scene:not(.sans-survol) .cible-texte:not(.corrigee):hover:not(.active) { outline: none; background: transparent; }
#lect_corr_gras[aria-pressed="true"]:hover:not(:disabled) { background: var(--accent-doux); border-color: var(--accent); }
.btn.primaire:hover:not(:disabled) { background: var(--accent-fort); border-color: transparent; }
.btn.danger:hover:not(:disabled) { background: var(--danger-doux); border-color: var(--danger-doux); }
.btn.danger.plein:hover:not(:disabled) { background: var(--danger-fort); border-color: var(--danger-fort); }
.btn.soutenir:hover:not(:disabled) { background: var(--surface-2); color: var(--coeur); }
.puce:hover:not(.actif) { color: var(--texte); background: var(--surface-2); }
.onglet:hover:not(.actif) { color: var(--texte); background: var(--surface-2); }
.option:hover { background: var(--surface-2); }
.option.inactif:hover { background: none; }
.card:hover .feuille { transform: translateY(-2px); }
.card:hover .vignette img { box-shadow: var(--ombre-papier-haute); }
#vide:hover .carte-vide { border-color: var(--accent); background: var(--accent-doux); transform: translateY(-2px); }
.lien-pied:hover { color: var(--texte); }
.toast-action:hover { text-decoration: underline; }
}



@media (forced-colors: active) {
.card.selectionnee .vignette img { outline: 3px solid Highlight; outline-offset: 2px; }
.card:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
.onglet { border-bottom-color: Canvas; }
.onglet.actif { border-bottom-color: Highlight; border-bottom-width: 3px; }
.logo, .num, .card.selectionnee .feuille::after, .sig-calque .poignee, .note-puce { forced-color-adjust: none; }
.lect-barre .lect-noter[aria-pressed="true"], .lect-noter[aria-pressed="true"], .lect-barre .lect-corriger[aria-pressed="true"], .lect-corriger[aria-pressed="true"] { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; }


.cible-texte { forced-color-adjust: none; border-bottom-color: var(--corr-souligne); }
.cible-texte.active, .cible-texte.corrigee, .cible-texte:focus-visible { outline-color: var(--accent-encre); }
#lect_corr_gras[aria-pressed="true"] { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; }
.spinner { border-color: CanvasText; border-top-color: Highlight; }


#toast::before { forced-color-adjust: none; }
.aide-champ.erreur::before { forced-color-adjust: none; background: CanvasText; }
.deroulant:has(select:disabled) .chevron { color: GrayText; }
}


@keyframes rot { to { transform: rotate(360deg); } }
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes scintille { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes monte { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pulse-chargement { from { opacity: 1; } to { opacity: .35; } }
@keyframes rappel-chargement { 0%, 55% { background-color: var(--accent-doux); box-shadow: 0 0 0 4px var(--accent-doux); } 100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; }
dialog[open], #lucarne, .vignette img.neuve, .attente { animation: none !important; }
#statut[data-etat="chargement"]::before { animation: none !important; }
#statut[data-rappel] { animation: none !important; }
.spinner { animation-duration: 1.6s; }
}

















header.deux-lignes { flex-wrap: wrap; gap: 2px 8px; }
header.deux-lignes .brand { flex: 1; margin-inline-end: 0; }
header.deux-lignes .droite { margin-inline-start: 0; }
header.deux-lignes .toolbar { flex-basis: 100%; order: 3; padding: 2px 0 4px; }
@media (max-width: 1199px) {
header:not(.mesuree) { flex-wrap: wrap; gap: 2px 8px; }
header:not(.mesuree) .brand { flex: 1; margin-inline-end: 0; }
header:not(.mesuree) .droite { margin-inline-start: 0; }
header:not(.mesuree) .toolbar { flex-basis: 100%; order: 3; padding: 2px 0 4px; }
}
@media (max-width: 1023px) {
:root { --carte: 148px; --grille-gap: var(--e3); --grille-pad: var(--e4); }

.btn .lib { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn.primaire .lib { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
header .btn:not(.primaire):not(.langue) { width: var(--h-m); padding: 0; justify-content: center; }
footer .aide { display: none; }
}
@media (max-width: 719px) {
:root { --carte: 126px; --grille-gap: var(--e2); --grille-pad: var(--e3); --t-6: 20px; --h-m: var(--h-l); }
header { padding: var(--e2) var(--e3); }
.toolbar { gap: var(--e1); }
.groupe { display: contents; }
.sep { display: none; }
.btn { min-width: var(--h-l); }
.btn.primaire { padding: 0 var(--e3); }
#grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.num { min-width: 20px; height: 20px; }


footer { flex-wrap: wrap; padding: var(--e1) var(--e3); gap: 0 var(--e2); }
.liens-pied { margin-inline-start: auto; }


#statut { flex: 1 1 auto; font-size: var(--t-1); font-weight: 400; font-variant-numeric: normal; }
.entree.court { min-height: var(--h-m); }
.option { padding: 9px var(--e3); }
.card > .num { top: 12px; inset-inline-start: 10px; }
.feuille > .num { top: 5px; inset-inline-start: 5px; }
.card.selectionnee .feuille::after { top: 5px; inset-inline-end: 5px; width: 20px; height: 20px; }
.carte-vide { padding: var(--e6) var(--e4) var(--e5); }
.grille-2, #vg_grille { grid-template-columns: 1fr; }
.dlg-tete, .dlg-corps, .dlg-pied { padding-left: var(--e4); padding-right: var(--e4); }
}
@media (max-width: 599px) {
#grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
#grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) and (max-height: 480px) {
#grille { grid-template-columns: repeat(auto-fill, minmax(var(--carte), 1fr)); }
}

@media (pointer: coarse) {
:root { --h-m: var(--h-l); }
.btn { min-width: var(--h-l); }
.carte-sig .ligne-boutons .btn, .crypto .copier { height: var(--h-m); }
.puce { min-height: var(--h-m); }
.option { padding: 9px var(--e3); }
.cases .option, .case-seule { padding: 10px var(--e3); }
.entree.court { min-height: var(--h-m); }
.toast-action { min-height: var(--h-m); }
#lucarne .lien { display: inline-flex; align-items: center; min-height: var(--h-m); }
.entree, .btn.langue select { font-size: 16px; }
.toolbar, .groupe { gap: var(--e1); }
.raccourcis { display: none; }
.raccourcis.tactile { display: flex; }
}








.barre-bas { display: none; }


@media (max-width: 1023px) {
html.js header .droite .btn:not(.langue) { position: relative; }
html.js header .droite .btn:not(.langue)::before { content: ""; position: absolute; inset: -3px; }
html.js header .btn.langue select { inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); }
}




@media (pointer: coarse) and (max-width: 1023px) {
.lien-pied { position: relative; }
.lien-pied::before { content: ""; position: absolute; inset: -2px; }
}
@media (pointer: coarse) and (min-width: 720px) and (max-width: 1023px) {
.lien-pied::before { inset: -1px -2px -3px; }
}




.zone-barre-bas { display: none; }
@media (max-width: 719px) {
:root { --barre-bas-h: calc(56px + env(safe-area-inset-bottom, 0px)); }
html.js header .toolbar { display: none; }
html.js .zone-barre-bas { display: block; flex: none; }
html.js .barre-bas {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(max-content, 1fr);
flex: none;
height: var(--barre-bas-h);
padding: 0 var(--e1) env(safe-area-inset-bottom, 0px);
background: var(--surface);
border-top: 1px solid var(--bordure);
}


body:has(dialog[open]) .barre-bas { visibility: hidden; }

html.js #toast, html.js #lucarne { bottom: calc(52px + var(--barre-bas-h)); }
html.js body:has(#toast.actif) #lucarne { bottom: calc(52px + var(--barre-bas-h) + var(--toast-h, 64px) + var(--e3)); }
}
.bas-btn {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
min-width: 48px;
padding: 0 2px;
border: 1px solid transparent;
border-radius: var(--rayon-2);
color: var(--texte);
font-size: var(--t-1); font-weight: 600; line-height: 16px;
white-space: nowrap;
}

.bas-ic { display: grid; place-items: center; width: 40px; height: 28px; border-radius: var(--rayon-plein); transition: background var(--d-1); }
.bas-btn .ic { width: 22px; height: 22px; }
.bas-btn:focus-visible { outline-offset: -2px; }
.bas-btn:active:not(:disabled) .bas-ic { background: var(--surface-3); }
.bas-btn.danger:not(:disabled) { color: var(--danger); }
.bas-btn.primaire:not(:disabled) { color: var(--accent-texte); }
.bas-btn.primaire:not(:disabled) .bas-ic { background: var(--accent); color: var(--sur-accent); }
.bas-btn.primaire:active:not(:disabled) .bas-ic { background: var(--accent-fort); }
.bas-btn:disabled { color: var(--texte-inactif); cursor: default; }
.bas-btn.primaire:disabled .bas-ic { background: var(--surface-3); }


@media (max-width: 359px) {
html.js .barre-bas { padding-inline: 0; }
.bas-btn { min-width: 44px; padding: 0; font-size: 11px; }
}

[dir="rtl"] .miroir .ic { transform: scaleX(-1); }

.feuille-outils[open] {
display: flex; flex-direction: column;
width: min(100%, 560px); max-width: 100%;
max-height: min(85dvh, calc(100dvh - var(--e6)));
margin: auto auto 0;
border-radius: var(--rayon-4) var(--rayon-4) 0 0;
animation: feuille-monte var(--d-3) var(--courbe);
}
.feuille-outils .dlg-tete { padding: var(--e4) var(--e4) var(--e2); }
.feuille-outils .dlg-croix { position: relative; }
.feuille-outils .dlg-croix::before { content: ""; position: absolute; inset: -3px; }
.outils-liste {
flex: 1; min-height: 0;
overflow: auto; overscroll-behavior: contain;
padding: 0 var(--e2) max(var(--e3), env(safe-area-inset-bottom, 0px));
}
.outils-groupe { display: flex; flex-direction: column; }
.outils-groupe + .outils-groupe { margin-top: var(--e1); padding-top: var(--e1); border-top: 1px solid var(--bordure); }
.outils-item {
display: flex; align-items: center; gap: var(--e3);
width: 100%; min-height: 52px;
padding: var(--e2) var(--e3);
border: 1px solid transparent;
border-radius: var(--rayon-3);
color: var(--texte);
text-align: start;
}
.outils-item .ic { width: 22px; height: 22px; color: var(--texte-2); }
.outils-textes { display: flex; flex-direction: column; min-width: 0; }
.outils-lib { font-size: var(--t-4); font-weight: 600; line-height: 1.3; }
.outils-expl { font-size: var(--t-2); line-height: 1.35; color: var(--texte-2); }
.outils-item:focus-visible { outline-offset: -2px; }
.outils-item:active:not(:disabled) { background: var(--surface-3); }
.outils-item:disabled, .outils-item:disabled .ic, .outils-item:disabled .outils-expl { color: var(--texte-inactif); cursor: default; }
@media (hover: hover) and (pointer: fine) {
.bas-btn:hover:not(:disabled) .bas-ic { background: var(--surface-3); }
.bas-btn.primaire:hover:not(:disabled) .bas-ic { background: var(--accent-fort); }
.outils-item:hover:not(:disabled) { background: var(--surface-2); }
}
@media (forced-colors: active) {
.bas-btn.primaire:not(:disabled) .bas-ic { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
@keyframes feuille-monte { from { transform: translateY(100%); } to { transform: none; } }










.lib-ligne { display: none; }
@media (min-width: 720px) and (max-width: 1023px) {
html.js header .toolbar {
flex-wrap: nowrap;
overflow-x: auto; overflow-y: hidden;
--rembourrage-ligne: 2px;
padding: var(--rembourrage-ligne);
margin-inline: -2px;
scrollbar-width: none;
overscroll-behavior-x: contain;
scroll-behavior: smooth;
scroll-snap-type: x proximity;

scroll-padding-inline: var(--e7) calc(var(--e7) + var(--epingle, 0px));
}
html.js header .toolbar::-webkit-scrollbar { display: none; }
html.js header .toolbar .btn {
flex-direction: column; justify-content: center; gap: 2px;
width: auto; min-width: 64px; height: 48px;
padding: 0 var(--e2);
font-size: var(--t-1); line-height: 16px;
scroll-snap-align: start;
}
html.js header .toolbar .btn:focus-visible { outline-offset: 0; }
html.js header .toolbar .btn .lib, html.js header .toolbar .lib-ligne { display: block; position: static; width: auto; height: auto; overflow: visible; clip: auto; }
html.js header .toolbar.deborde .sep { display: none; }





html.js header .toolbar > .btn.primaire {
--plateau: var(--e1);
position: sticky; inset-inline-end: 0; z-index: 1;
margin-inline-start: var(--e1);
box-shadow: 0 0 0 var(--plateau) var(--surface);
scroll-snap-align: none;
}





html.js header .toolbar > .btn.primaire::after {
content: ""; position: absolute;
inset: calc(-1px - var(--rembourrage-ligne)); inset-inline-start: calc(-1px - var(--plateau));
}


html.js header .toolbar > .btn.primaire:focus-visible { outline-color: var(--sur-accent); outline-offset: -4px; }




html.js header .toolbar.deborde {
-webkit-mask-image: linear-gradient(to right, transparent, var(--texte) var(--fondu-debut, 0px), var(--texte) calc(100% - var(--epingle, 0px) - var(--fondu-fin, 0px)), transparent calc(100% - var(--epingle, 0px)), transparent calc(100% - var(--epingle, 0px) + 1px), var(--texte) calc(100% - var(--epingle, 0px) + 1px));
mask-image: linear-gradient(to right, transparent, var(--texte) var(--fondu-debut, 0px), var(--texte) calc(100% - var(--epingle, 0px) - var(--fondu-fin, 0px)), transparent calc(100% - var(--epingle, 0px)), transparent calc(100% - var(--epingle, 0px) + 1px), var(--texte) calc(100% - var(--epingle, 0px) + 1px));
}
html.js[dir="rtl"] header .toolbar.deborde {
-webkit-mask-image: linear-gradient(to left, transparent, var(--texte) var(--fondu-debut, 0px), var(--texte) calc(100% - var(--epingle, 0px) - var(--fondu-fin, 0px)), transparent calc(100% - var(--epingle, 0px)), transparent calc(100% - var(--epingle, 0px) + 1px), var(--texte) calc(100% - var(--epingle, 0px) + 1px));
mask-image: linear-gradient(to left, transparent, var(--texte) var(--fondu-debut, 0px), var(--texte) calc(100% - var(--epingle, 0px) - var(--fondu-fin, 0px)), transparent calc(100% - var(--epingle, 0px)), transparent calc(100% - var(--epingle, 0px) + 1px), var(--texte) calc(100% - var(--epingle, 0px) + 1px));
}
html.js header .toolbar.cache-debut { --fondu-debut: var(--e7); }
html.js header .toolbar.cache-fin { --fondu-fin: var(--e7); }
}
@media (min-width: 720px) and (max-width: 1023px) and (prefers-reduced-motion: reduce) {
html.js header .toolbar { scroll-behavior: auto; }
}



@media (min-width: 720px) and (max-width: 1023px) and (forced-colors: active) {
html.js header .toolbar > .btn.primaire { border-radius: 0; }
html.js header .toolbar > .btn.primaire::after {
border: var(--rembourrage-ligne) solid Canvas; border-inline-start-width: var(--plateau); forced-color-adjust: none;
}
}