:root{--bg:#3a0b1c;--deep:#26060f;--card:#2d0713;--line:rgba(246,235,224,.18);--ink:#f6ebe0;--muted:#d9c3bc;--leaf:#a8cf6d;--warm:#f0b35a;--bad:#ff8f7a;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 system-ui,"Segoe UI",sans-serif}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.2;margin:0 0 10px}
h1{font-size:1.8rem}h2{font-size:1.3rem;margin-top:26px}h3{font-size:1.05rem}
a{color:var(--link,var(--warm))}
header{background:var(--deep);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
header .in{max-width:980px;margin:auto;padding:12px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
header strong{font-family:Georgia,serif;font-size:1.3rem}
a.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
a.brand img{border-radius:7px;display:block}
nav.menu{display:flex;flex-wrap:wrap;gap:4px 6px}
nav.menu a{color:var(--muted);text-decoration:none;font-weight:700;font-size:15px;padding:6px 14px;border-radius:999px;border:2px solid transparent}
nav.menu a:hover{color:var(--ink);border-color:var(--line)}
nav.menu a[aria-current=page]{background:var(--warm);color:var(--on-warm,var(--deep));border-color:var(--warm)}
@media (max-width:760px){nav.menu{order:5;flex-basis:100%}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.card>h2:first-child{margin-top:0}
header .sp{flex:1}
main{max-width:980px;margin:auto;padding:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:14px 0;min-width:0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:10px 0}
.col{display:flex;flex-direction:column;gap:4px;min-width:0}
label{font-weight:600;font-size:15px}
input,select,textarea{font:16px system-ui,sans-serif;background:var(--input,rgba(0,0,0,.35));color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:42px;max-width:100%}
textarea{width:100%;min-height:90px}
input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:var(--leaf)}
button{font:700 16px system-ui,sans-serif;border-radius:999px;border:2px solid var(--warm);background:var(--warm);color:var(--on-warm,var(--deep));padding:8px 18px;min-height:42px;cursor:pointer}
button.alt{background:transparent;color:var(--ink);border-color:var(--line)}
button.bad{background:transparent;color:var(--bad);border-color:var(--bad)}
button.sm{font-size:14px;padding:4px 12px;min-height:34px}
button:disabled{opacity:.5;cursor:not-allowed}
:focus-visible{outline:3px solid var(--leaf);outline-offset:2px}
.msg{min-height:1.4em;color:var(--muted)}.msg:empty{display:none}.msg.err{color:var(--bad)}.msg.ok{color:var(--leaf)}
.pill{display:inline-block;font-size:13px;font-weight:700;padding:1px 10px;border-radius:999px;border:1px solid var(--leaf);color:var(--leaf)}
.pill.warn{border-color:var(--warm);color:var(--warm)}.pill.bad{border-color:var(--bad);color:var(--bad)}
.wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:14px;word-break:break-all}
.code{font:700 1.6rem ui-monospace,Consolas,monospace;letter-spacing:.08em;color:var(--link,var(--warm))}
.small{font-size:14px;color:var(--muted)}
img.ph{max-width:100%;max-height:340px;border-radius:8px;border:1px solid var(--line)}
.hide{display:none!important}
ul.flat{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.flag{border-left:4px solid var(--warm);padding:6px 12px;background:rgba(240,179,90,.1);border-radius:0 8px 8px 0;margin:8px 0}

.todo{background:rgba(240,179,90,.2);color:var(--warm);padding:0 6px;border-radius:4px}
ul{padding-left:20px}

/* Fonds d'écran au choix. Chaque image a sa palette (fenêtres, textes, boutons) accordée à ses couleurs.
   Grand écran : l'image est montrée en entier (logos compris) sur une copie floue d'elle-même, le contenu est centré dans un panneau.
   Téléphone et écrans hauts : l'image remplit l'écran. */
body[data-fond="1"]{--fond-url:url(/static/fonds/1.webp);--panel:rgba(255,255,255,.82);--bg:#e6eff0;--deep:#ffffff;--card:rgba(255,255,255,.93);--line:rgba(25,70,60,.24);--ink:#14323a;--muted:#40606a;--leaf:#2c7a3c;--warm:#2c7a3c;--on-warm:#ffffff;--bad:#b3261e;--input:#ffffff;color-scheme:light}
body[data-fond="2"]{--fond-url:url(/static/fonds/2.webp);--panel:rgba(22,12,6,.82);--bg:#150c06;--deep:#1c1008;--card:rgba(42,25,13,.93);--line:rgba(246,234,216,.22);--ink:#f6ead8;--muted:#d6c1a5;--leaf:#b9dc8c;--warm:#c8346b;--on-warm:#ffffff;--link:#ff8db8;--bad:#ff9a85;--input:rgba(0,0,0,.42);color-scheme:dark}
body[data-fond="3"]{--fond-url:url(/static/fonds/3.webp);--panel:rgba(255,250,240,.84);--bg:#f3e6cf;--deep:#fffaf0;--card:rgba(255,252,246,.94);--line:rgba(90,60,20,.24);--ink:#3b2812;--muted:#6a5334;--leaf:#4a7a2a;--warm:#b8620f;--on-warm:#ffffff;--bad:#b3261e;--input:#ffffff;color-scheme:light}
body:is([data-fond="1"],[data-fond="2"],[data-fond="3"])::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--fond-url) 72% center/cover no-repeat}
body:is([data-fond="1"],[data-fond="2"],[data-fond="3"]) header{background:var(--panel);backdrop-filter:blur(6px)}
body:is([data-fond="1"],[data-fond="2"],[data-fond="3"]) main{background:var(--panel);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:16px;margin:14px auto}
@media (min-aspect-ratio:5/4) and (min-width:900px){
  /* grand écran : image entière au centre, sa copie floue remplit les côtés */
  body:is([data-fond="1"],[data-fond="2"],[data-fond="3"])::before{filter:blur(28px) saturate(1.1);transform:scale(1.15)}
  body:is([data-fond="1"],[data-fond="2"],[data-fond="3"])::after{content:"";position:fixed;inset:0;z-index:-1;background:var(--fond-url) center center/contain no-repeat}
  body:is([data-fond="1"],[data-fond="2"],[data-fond="3"]) header,body:is([data-fond="1"],[data-fond="2"],[data-fond="3"]) main{max-width:max(420px,min(640px,36vw,64vh));margin-left:auto;margin-right:auto}
  body:is([data-fond="1"],[data-fond="2"],[data-fond="3"]) header{margin-top:12px;border:1px solid var(--line);border-radius:14px}
  body:is([data-fond="1"],[data-fond="2"],[data-fond="3"]) nav.menu{order:5;flex-basis:100%}
  body:is([data-fond="1"],[data-fond="2"],[data-fond="3"]) main{margin-top:10px;margin-bottom:10px}
}
@media (max-width:640px){body:is([data-fond="1"],[data-fond="2"],[data-fond="3"]) main{margin:10px;border-radius:12px;padding:12px}}
/* Fonds unis : une palette de couleurs, chacune avec ses fenêtres, ses textes et ses boutons assortis. */
body[data-fond="uni-nuit"]{--bg:#13233a;--deep:#0c1727;--card:#0f1c30;--line:rgba(233,240,250,.2);--ink:#e9f0fa;--muted:#b9c7da;--leaf:#8fd3a4;--warm:#f0b35a;--on-warm:#0c1727;--bad:#ff8f7a;color-scheme:dark}
body[data-fond="uni-foret"]{--bg:#123222;--deep:#0b2217;--card:#0e2a1c;--line:rgba(234,245,236,.2);--ink:#eaf5ec;--muted:#b9d2bf;--leaf:#a8dc7a;--warm:#e9b44c;--on-warm:#0b2217;--bad:#ff9a85;color-scheme:dark}
body[data-fond="uni-ardoise"]{--bg:#2b3640;--deep:#1e262d;--card:#232d36;--line:rgba(238,242,245,.2);--ink:#eef2f5;--muted:#bcc6cf;--leaf:#9fd6b0;--warm:#5fc4c4;--on-warm:#14323a;--bad:#ff9a85;color-scheme:dark}
body[data-fond="uni-aubergine"]{--bg:#3a1a48;--deep:#29112f;--card:#30153a;--line:rgba(246,233,247,.2);--ink:#f6e9f7;--muted:#d4bcd8;--leaf:#b9e08f;--warm:#f2a65a;--on-warm:#29112f;--bad:#ff9a85;color-scheme:dark}
body[data-fond="uni-chocolat"]{--bg:#3a2417;--deep:#28170e;--card:#301c11;--line:rgba(246,234,219,.2);--ink:#f6eadb;--muted:#d3bda5;--leaf:#b5d98b;--warm:#e9a64b;--on-warm:#28170e;--bad:#ff9a85;color-scheme:dark}
body[data-fond="uni-creme"]{--bg:#f6efe3;--deep:#fffaf0;--card:#ffffff;--line:rgba(90,60,20,.22);--ink:#3b2812;--muted:#6a5334;--leaf:#4a7a2a;--warm:#b8620f;--on-warm:#ffffff;--bad:#b3261e;--input:#ffffff;color-scheme:light}
body[data-fond="uni-ciel"]{--bg:#e6f0f7;--deep:#f7fbfe;--card:#ffffff;--line:rgba(22,48,74,.22);--ink:#16304a;--muted:#46627a;--leaf:#2c7a5a;--warm:#1f5f99;--on-warm:#ffffff;--bad:#b3261e;--input:#ffffff;color-scheme:light}
body[data-fond="uni-menthe"]{--bg:#e4f2e8;--deep:#f4fbf6;--card:#ffffff;--line:rgba(23,58,38,.22);--ink:#173a26;--muted:#466a54;--leaf:#2c7a3c;--warm:#2c7a3c;--on-warm:#ffffff;--bad:#b3261e;--input:#ffffff;color-scheme:light}
body[data-fond="uni-rose"]{--bg:#f7e4e8;--deep:#fff5f7;--card:#ffffff;--line:rgba(74,26,42,.22);--ink:#4a1a2a;--muted:#7a4a5a;--leaf:#4a7a2a;--warm:#b02a5b;--on-warm:#ffffff;--bad:#b3261e;--input:#ffffff;color-scheme:light}
body[data-fond="uni-perle"]{--bg:#e9ecef;--deep:#f8f9fa;--card:#ffffff;--line:rgba(31,41,51,.22);--ink:#1f2933;--muted:#52606d;--leaf:#2c7a3c;--warm:#3b6ea5;--on-warm:#ffffff;--bad:#b3261e;--input:#ffffff;color-scheme:light}
body[data-fond^="uni-"]{background:var(--bg)}
footer.copyright{max-width:980px;margin:14px auto 22px;padding:0 18px;font-size:13px;color:var(--muted);text-align:center}
body:is([data-fond="1"],[data-fond="2"],[data-fond="3"]) footer.copyright{width:fit-content;max-width:calc(100% - 20px);padding:4px 14px;border-radius:999px;background:var(--panel);color:var(--ink)}
.fonds{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin:10px 0;max-width:640px}
button.fond-choix{display:flex;flex-direction:column;gap:6px;align-items:center;background:transparent;color:var(--ink);border:2px solid var(--line);border-radius:12px;padding:8px;min-height:0;font-size:14px;font-weight:600}
button.fond-choix img{border-radius:8px;display:block;width:100%;height:auto}
button.fond-choix[aria-pressed="true"]{border-color:var(--leaf);box-shadow:0 0 0 2px var(--leaf)}
.fonds-titre{margin:16px 0 4px;font-weight:700;font-size:15px}
.pastilles{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
button.pastille{width:44px;height:44px;min-height:0;padding:0;border-radius:50%;border:2px solid var(--line);position:relative;font-size:0}
button.pastille[aria-pressed="true"]{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--leaf);border-color:var(--leaf)}
button.pastille[aria-pressed="true"]::after{content:"\2713";font-size:20px;font-weight:700;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.7)}
.fond-aucun{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;border-radius:8px;background:#26060f;color:#d9c3bc;font-size:13px}