/* =====================================================================
Charte « Affiche » : apps de Hugues (LeCultureClub, Ornitho Quiz, ŒnoLab…)
Copier ce fichier tel quel en tête de l'app. Toutes les couleurs de l'app
passent par ces variables. Modulation de Time. : LECTURE (fiches Wikipédia en Fraunces) + ACCUEIL EN APLATS (menu de 4 rubriques).
Catégories : Fait = cat-1, Personne = cat-2, Lieu = cat-3, Œuvre = cat-4, Autre = cat-10.
Polices (dans le ) :
Modulation « lecture » : ajouter &family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400
===================================================================== */
:root{
/* Surfaces */
--bg:#FAFAF7; /* fond papier */
--paper:#FFFFFF; /* cartes, barres */
--soft:#F1EFE8; /* survol, rangées clés */
--line:#E6E4DC; /* filets (décoratifs uniquement) */
--line-strong:#949186; /* bord des champs et contrôles (3,2:1) */
/* Texte */
--ink:#1A1A1A; /* texte courant (16,6:1) */
--muted:#5F6B78; /* texte secondaire (5,2:1) — jamais plus clair */
--slate:#3D4F63; /* titres, structure, bandeaux (8:1) */
--on-dark:#FFFFFF; /* texte sur les aplats sombres (tuiles, hero) */
--on-action:#FFFFFF; /* texte sur fond --action (5,2:1) */
--on-slate:#FFFFFF; /* texte sur fond --slate (8,4:1) */
--scrim:rgba(10,15,20,.5); /* voile derrière une fenêtre */
/* Action */
--action:#C8361A; /* boutons, liens, texte vermillon (5,2:1) */
--action-hover:#A82D15;
--red:#E8401C; /* vermillon affiche : grands titres (≥ 24 px), décor, jauges */
--action-soft:#FBEAE4; /* fond de sélection, erreur douce */
/* Statuts */
--good:#2E7D4F; --good-bg:#E3F1E8;
--bad:#C8361A; --bad-bg:#FBEAE4;
--warn:#8A6A1F; --warn-bg:#FBF3E4;
/* Aplats (modulation « accueil » uniquement) */
--tile-1:#3D4F63; --tile-1-ink:#FFFFFF;
--tile-2:#C8361A; --tile-2-ink:#FFFFFF;
--tile-3:#D9A521; --tile-3-ink:#1A1A1A;
--tile-4:#2E5A3C; --tile-4-ink:#FFFFFF;
--tile-5:#F1EFE8; --tile-5-ink:#3D4F63;
/* Palette de catégories : 10 teintes vives pour distinguer des familles
(genres de spectacles, groupes d'oiseaux, régions viticoles…).
Trois valeurs par teinte :
--cat-N aplat (bandeau, pastille carrée, barre de graphique)
--cat-N-text la même teinte assombrie, pour du texte sur fond clair
--cat-N-on le texte posé SUR l'aplat
Ordre d'attribution : la catégorie la plus fréquente prend --cat-1
(le vermillon de la maison), puis on suit l'ordre. */
--cat-1:#E8401C; --cat-1-text:#C22F10; --cat-1-on:#141414; /* vermillon */
--cat-2:#8B3FD0; --cat-2-text:#7130AE; --cat-2-on:#FFFFFF; /* violet */
--cat-3:#00958F; --cat-3-text:#0A6F6A; --cat-3-on:#141414; /* sarcelle */
--cat-4:#2E93DB; --cat-4-text:#0B5E96; --cat-4-on:#141414; /* azur */
--cat-5:#CC1F7A; --cat-5-text:#A81763; --cat-5-on:#FFFFFF; /* magenta */
--cat-6:#3FA535; --cat-6-text:#2E7A27; --cat-6-on:#141414; /* vert */
--cat-7:#F29100; --cat-7-text:#A66200; --cat-7-on:#141414; /* orange */
--cat-8:#3B5BDB; --cat-8-text:#2F48AE; --cat-8-on:#FFFFFF; /* outremer */
--cat-9:#C9A227; --cat-9-text:#8A6B00; --cat-9-on:#141414; /* ocre */
--cat-10:#9C8877; --cat-10-text:#6B5A4D; --cat-10-on:#141414; /* taupe : « mixte », « autre » */
/* Visuels sombres plein cadre */
--hero:#1A1A1A; --hero-ink:#FAFAF7; --hero-muted:#B9C3CD;
/* Typo */
--display:"League Gothic","Oswald","Arial Narrow",sans-serif;
--body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--serif:"Fraunces",Georgia,"Times New Roman",serif;
/* Mesures */
--gutter:16px; --gap:12px; --tap:44px;
--maxw-read:680px; --maxw-app:1080px; --side:240px;
--dur:180ms; --ease:cubic-bezier(.2,.7,.2,1);
color-scheme:light;
}
/* Mode sombre : suit le téléphone, sauf choix manuel data-theme="light" */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--bg:#141A21; --paper:#1B232C; --soft:#212A34; --line:#2A3440; --line-strong:#64748A;
--ink:#ECEAE4; --muted:#94A0AD; --slate:#A9BCCF; --on-dark:#FFFFFF; --on-action:#141A21; --on-slate:#141A21;
--action:#FF5A36; --action-hover:#FF7A5C; --red:#FF5A36; --action-soft:#3A1D16;
--good:#58B97E; --good-bg:#18301F; --bad:#FF5A36; --bad-bg:#3A1D16; --warn:#E0B44A; --warn-bg:#33290F;
--tile-1:#2A3644; --tile-2:#B83218; --tile-3:#C9971C; --tile-4:#26492F; --tile-5:#212A34; --tile-5-ink:#A9BCCF;
--hero:#0E1318;
--cat-1-text:#FF6A45; --cat-2-text:#B583EA; --cat-3-text:#25BDB5; --cat-4-text:#6BB6EE; --cat-5-text:#F056A2;
--cat-6-text:#64C55A; --cat-7-text:#F2A82E; --cat-8-text:#7E92EE; --cat-9-text:#D9B94A; --cat-10-text:#BCA894;
color-scheme:dark;
}
}
:root[data-theme="dark"]{
--bg:#141A21; --paper:#1B232C; --soft:#212A34; --line:#2A3440; --line-strong:#64748A;
--ink:#ECEAE4; --muted:#94A0AD; --slate:#A9BCCF; --on-dark:#FFFFFF; --on-action:#141A21; --on-slate:#141A21;
--action:#FF5A36; --action-hover:#FF7A5C; --red:#FF5A36; --action-soft:#3A1D16;
--good:#58B97E; --good-bg:#18301F; --bad:#FF5A36; --bad-bg:#3A1D16; --warn:#E0B44A; --warn-bg:#33290F;
--tile-1:#2A3644; --tile-2:#B83218; --tile-3:#C9971C; --tile-4:#26492F; --tile-5:#212A34; --tile-5-ink:#A9BCCF;
--hero:#0E1318;
--cat-1-text:#FF6A45; --cat-2-text:#B583EA; --cat-3-text:#25BDB5; --cat-4-text:#6BB6EE; --cat-5-text:#F056A2;
--cat-6-text:#64C55A; --cat-7-text:#F2A82E; --cat-8-text:#7E92EE; --cat-9-text:#D9B94A; --cat-10-text:#BCA894;
color-scheme:dark;
}
/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased;
padding-bottom:env(safe-area-inset-bottom)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--action)}
:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
/* ---------- Typographie ---------- */
.display,h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:.95;color:var(--slate);margin:0;text-wrap:balance}
h1{font-size:clamp(34px,6vw,56px)}
h2{font-size:clamp(26px,4vw,34px);margin:32px 0 12px}
h3{font:600 17px/1.3 var(--body);margin:20px 0 6px;color:var(--ink)}
.eyebrow{font:600 11px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.eyebrow.action{color:var(--action)}
.num{font-family:var(--display);font-variant-numeric:tabular-nums;line-height:1;color:var(--slate)}
.muted{color:var(--muted)} .small{font-size:14px}
.tabular{font-variant-numeric:tabular-nums}
/* Modulation lecture */
.prose{font:18px/1.65 var(--serif);max-width:var(--maxw-read)}
.prose p{margin:0 0 14px} .prose em,.lede{font-style:italic}
.lede{font:italic 19px/1.5 var(--serif);color:var(--muted);max-width:60ch}
blockquote{margin:16px 0;padding:12px 16px;border-left:4px solid var(--red);background:var(--paper);font:italic 18px/1.55 var(--serif)}
/* ---------- Boutons et contrôles ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:10px 18px;
border:1.5px solid var(--slate);background:var(--paper);color:var(--slate);border-radius:0;
font:600 13px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn.primary{background:var(--action);border-color:var(--action);color:var(--on-action)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.wide{width:100%}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}
@media (hover:hover){.btn:hover{background:var(--soft)}.btn.primary:hover{background:var(--action-hover);border-color:var(--action-hover)}}
.btn:active{transform:translateY(1px)}
.icon-btn{width:var(--tap);height:var(--tap);display:grid;place-items:center;border:1.5px solid var(--slate);color:var(--slate);background:transparent;border-radius:0}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font:600 13px var(--body);color:var(--ink)}
.field .hint{font-size:13px;color:var(--muted)}
.field .error{font-size:13px;color:var(--bad);font-weight:600}
.input,select.input,textarea.input{min-height:var(--tap);padding:10px 12px;border:1.5px solid var(--line-strong);background:var(--paper);border-radius:0;width:100%}
.input:focus{border-color:var(--slate);outline:none;box-shadow:inset 0 0 0 1px var(--slate)}
.input[aria-invalid="true"]{border-color:var(--bad)}
.chip{min-height:36px;padding:6px 12px;border:1.5px solid var(--line-strong);background:var(--paper);border-radius:0;font:600 13px var(--body)}
.chip[aria-pressed="true"]{background:var(--slate);border-color:var(--slate);color:var(--on-slate)}
.tag{display:inline-block;padding:3px 8px;font:600 11px var(--body);letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;color:var(--slate)}
.tag.action{background:var(--action);border-color:var(--action);color:var(--on-action)}
/* ---------- Mise en page ---------- */
.app{max-width:var(--maxw-app);margin:0 auto;padding:0 max(var(--gutter),env(safe-area-inset-left)) calc(96px + env(safe-area-inset-bottom))}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
min-height:56px;padding:calc(8px + env(safe-area-inset-top)) var(--gutter) 8px;margin:0 calc(-1 * var(--gutter));
background:var(--paper);border-bottom:1px solid var(--line)}
.wordmark{font:400 30px/1 var(--display);text-transform:none;letter-spacing:.01em;color:var(--slate);text-decoration:none}
.wordmark em{font-style:normal;color:var(--red)}
/* Barre d'onglets (téléphone) qui devient menu latéral (PC) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:var(--paper);border-top:1px solid var(--line);
padding:6px max(8px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom))}
.tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:var(--tap);padding:4px 0;
border:0;background:none;color:var(--muted);font:600 11px var(--body);letter-spacing:.04em;text-decoration:none}
.tabbar svg{width:24px;height:24px}
.tabbar [aria-current="page"]{color:var(--action)}
/* Listes à filets (préférer aux cartes) */
.rows{border-top:1px solid var(--line)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 2px;border-bottom:1px solid var(--line);
color:inherit;text-decoration:none;background:none;width:100%;text-align:left}
.row .title{font:400 21px/1.05 var(--display);text-transform:uppercase;color:var(--slate)}
@media (hover:hover){a.row:hover,button.row:hover{background:var(--soft)}}
/* Grille de chiffres */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stats>div{background:var(--paper);padding:14px}
.stats .num{font-size:34px}
/* Visuel plein cadre */
.hero{position:relative;background:var(--hero);color:var(--hero-ink);margin:0 calc(-1 * var(--gutter));min-height:220px;
display:flex;flex-direction:column;justify-content:flex-end;padding:20px var(--gutter);overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;filter:grayscale(.3)}
.hero>*{position:relative}
.hero h1{color:var(--hero-ink)} .hero .muted{color:var(--hero-muted)}
/* Modulation accueil : aplats */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:0}
.tile{min-height:120px;padding:14px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;border:0;text-align:left;
background:var(--tile-1);color:var(--tile-1-ink)}
.tile:nth-child(5n+2){background:var(--tile-2);color:var(--tile-2-ink)}
.tile:nth-child(5n+3){background:var(--tile-3);color:var(--tile-3-ink)}
.tile:nth-child(5n+4){background:var(--tile-4);color:var(--tile-4-ink)}
.tile:nth-child(5n+5){background:var(--tile-5);color:var(--tile-5-ink)}
.tile svg{width:28px;height:28px}
.tile b{font:400 24px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.tile small{font-size:13px;opacity:.9}
@media (hover:hover){.tile:hover{filter:brightness(1.08)}}
/* Palette de catégories : poser .cat-N sur l'élément, puis utiliser les composants */
.cat-1{--c:var(--cat-1);--c-text:var(--cat-1-text);--c-on:var(--cat-1-on)}
.cat-2{--c:var(--cat-2);--c-text:var(--cat-2-text);--c-on:var(--cat-2-on)}
.cat-3{--c:var(--cat-3);--c-text:var(--cat-3-text);--c-on:var(--cat-3-on)}
.cat-4{--c:var(--cat-4);--c-text:var(--cat-4-text);--c-on:var(--cat-4-on)}
.cat-5{--c:var(--cat-5);--c-text:var(--cat-5-text);--c-on:var(--cat-5-on)}
.cat-6{--c:var(--cat-6);--c-text:var(--cat-6-text);--c-on:var(--cat-6-on)}
.cat-7{--c:var(--cat-7);--c-text:var(--cat-7-text);--c-on:var(--cat-7-on)}
.cat-8{--c:var(--cat-8);--c-text:var(--cat-8-text);--c-on:var(--cat-8-on)}
.cat-9{--c:var(--cat-9);--c-text:var(--cat-9-text);--c-on:var(--cat-9-on)}
.cat-10{--c:var(--cat-10);--c-text:var(--cat-10-text);--c-on:var(--cat-10-on)}
.cat-label{color:var(--c-text);font:600 11px/1.2 var(--body);letter-spacing:.15em;text-transform:uppercase}
.cat-band{display:inline-block;background:var(--c);color:var(--c-on);padding:5px 10px;font:400 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.cat-mark{display:inline-block;width:10px;height:10px;background:var(--c);vertical-align:middle}
.cat-rule{border-left:4px solid var(--c)}
/* États */
.empty{border:1.5px dashed var(--line-strong);padding:24px;text-align:left}
.empty b{display:block;font:400 24px/1 var(--display);text-transform:uppercase;color:var(--slate);margin-bottom:6px}
.skeleton{background:var(--soft);animation:sk 1.2s ease-in-out infinite;min-height:1em}
@keyframes sk{50%{background:var(--line)}}
.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-left:4px solid var(--warn);background:var(--warn-bg);color:var(--ink)}
.banner.bad{border-left-color:var(--bad);background:var(--bad-bg)}
.banner.good{border-left-color:var(--good);background:var(--good-bg)}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;z-index:50;
display:flex;gap:14px;align-items:center;max-width:min(92vw,480px);padding:12px 16px;background:var(--slate);color:var(--on-slate);font:600 14px var(--body);
transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast button{background:none;border:0;color:var(--on-slate);text-decoration:underline;font-weight:700;min-height:32px}
/* Feuille du bas (téléphone) qui devient fenêtre centrée (PC) */
.sheet-bg{position:fixed;inset:0;z-index:60;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--paper);width:100%;max-width:560px;max-height:90dvh;overflow:auto;padding:20px var(--gutter) calc(20px + env(safe-area-inset-bottom));border-top:4px solid var(--slate)}
/* Mouvement réduit */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ---------- PC (≥ 960 px) ---------- */
@media (min-width:960px){
body:has(.tabbar){padding-left:var(--side)}
.app{padding:0 32px 48px}
.tabbar{top:0;bottom:0;right:auto;width:var(--side);flex-direction:column;justify-content:flex-start;gap:2px;border-top:0;border-right:1px solid var(--line);padding:24px 14px}
.tabbar a,.tabbar button{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 12px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;border-left:3px solid transparent}
.tabbar [aria-current="page"]{border-left-color:var(--action);background:var(--soft);color:var(--ink)}
.topbar{margin:0;padding:12px 0}
.hero{margin:0;min-height:320px;padding:32px}
.tiles{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.tile{min-height:160px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
.split>aside{position:sticky;top:24px}
.sheet-bg{align-items:center}
.sheet{border-top-width:4px;max-height:80vh}
.toast{bottom:24px}
}