/* palette : chaque thème = 3 couleurs (c1 foncée, c2 d’accent, c3 fond clair), en aplats */ :root{ /* palette de base « corail/terracotta sur crème » : c1 = terracotta foncé (encre, textes), c2 = corail vif (accent, boutons), c3 = fond crème. Les couleurs des branches restent personnalisables indépendamment via --h sur chaque matière (voir sv()/TONEV), ce thème ne les touche pas. */ --c1:#A8441F; --c2:#E2693A; --c3:#FAF7F1; --bg:var(--c3); --surface:color-mix(in srgb,var(--c3) 35%,#fff); --ink:color-mix(in srgb,var(--c1) 60%,#000); --muted:color-mix(in srgb,var(--c1) 76%,var(--c3)); --line:color-mix(in srgb,var(--c1) 20%,var(--c3)); --soft:color-mix(in srgb,var(--c1) 9%,var(--c3)); --accent:var(--c2); --accent-ink:#FFFFFF; --sun:var(--c2); --today-bg:color-mix(in srgb,var(--c3) 35%,#fff); --ok:var(--c1); --ok-bg:color-mix(in srgb,var(--c1) 13%,#fff); --ready-bg:color-mix(in srgb,var(--c2) 15%,#fff); --ready-ink:color-mix(in srgb,var(--c2) 75%,#000); --danger:#B3261E; /* couleur « pétante » façon planning du jour : un ROUGE qui tire vers l’orange (pas l’inverse) — c’est elle qui porte le logo, le titre du jour, la grille du tableau et les titres de colonnes */ --pop-red:#E8431F; --pt-line:color-mix(in srgb,var(--pop-red) 70%,#fff); --pt-head:var(--pop-red); --time-ink:var(--pop-red); --title-ink:var(--pop-red); --st-todo:#B3261E; --st-todo-bg:#FBE2E0; --st-todo-ink:#7A1710; --st-material:#C97A2B; --st-material-bg:#FBEBD8; --st-material-ink:#8A4E12; --st-print:#2B6CB0; --st-print-bg:#DCEAF7; --st-print-ink:#164572; --st-ready:#2F7D4F; --st-ready-bg:#DEF0E3; --st-ready-ink:#1D5734; /* versions « pétantes » utilisées uniquement pour le texte de la colonne État sur fond blanc (les -ink ci-dessus restent pour les pastilles/puces sur fond teinté, qui ont besoin d’un ton plus sombre pour le contraste) */ --st-todo-pop:var(--pop-red); --st-material-pop:#E2850A; --st-print-pop:#1D7FE0; --st-ready-pop:#13A251; --hero:var(--c1); --hero-ink:#FFFFFF; --hero-sub:color-mix(in srgb,var(--c3) 85%,var(--c1)); --tab-track:color-mix(in srgb,#000 28%,var(--c1)); --tab-ink:#FFFFFF; --tab-act-bg:#FFFFFF; --tab-act-ink:var(--c1); --cs:78%; --cl:58%; --ts:0%; --tl:0%; --bl:45%; --bs:76%; --branch:#5A6B78; --cellbg:#FFFFFF; --shadow:0 1px 2px rgba(40,20,10,.08),0 8px 24px rgba(40,20,10,.10); --display:"Chewy",Arial,Helvetica,system-ui,sans-serif; --label:"Handlee",cursive,Arial,Helvetica,system-ui,sans-serif; --body:Arial,Helvetica,system-ui,-apple-system,"Segoe UI",sans-serif; --script:"Dancing Script",cursive; --mono:Arial,Helvetica,system-ui,-apple-system,"Segoe UI",sans-serif; --cover-ink:#A8441F; --cover-bg:#FAF7F1; --cover-card:#FFFFFF; --cover-line:color-mix(in srgb,#A8441F 28%,#FAF7F1); /* ===== échelle de typographie (4 tailles de texte + 1 spéciale titre) ===== sm : petits labels, badges, méta-infos base : texte courant (jamais trop petit, lisible) lg : sous-titres, emphase xl : titres de section, gros chiffres d'affichage title: le gros titre "Mon carnet de classe" uniquement */ --fs-sm:12.5px; --fs-base:15px; --fs-lg:18px; --fs-xl:23px; --fs-title:clamp(46px,8.5vw,92px); /* ===== échelle de rayons (border-radius) ===== sharp : boutons / boutons-icônes (style « épuré », angles nets) field : champs de formulaire (input/select/textarea), petits contrôles icône card : cartes, popovers, panneaux, encarts sheet : grands panneaux type feuille (menu latéral, tiroirs) */ --r-sharp:2px; --r-field:8px; --r-card:14px; --r-sheet:18px; /* ===== hauteur commune des champs (input/select/bouton alignés) ===== */ --field-h-sm:30px; --field-h:38px; --field-h-lg:46px; } :root[data-season="corail"] .top{ /* bandeau du logo : fond blanc quadrillé (traits orange-rouge, couleurs du thème) plutôt qu'un aplat de couleur, écriture inchangée mais centrée */ --hero:#FFFFFF; --hero-ink:var(--pop-red); --hero-sub:color-mix(in srgb,var(--pop-red) 88%,#fff); background-image: repeating-linear-gradient(to right,color-mix(in srgb,var(--pop-red) 50%,transparent) 0 1.5px,transparent 1.5px 26px), repeating-linear-gradient(to bottom,color-mix(in srgb,var(--pop-red) 50%,transparent) 0 1.5px,transparent 1.5px 26px); justify-content:center; border-bottom:1.5px solid var(--pop-red); } :root[data-season="corail"] .top .brand{margin-right:0;align-items:center} :root[data-season="autumn"]{ /* fond orange citrouille bien vif (c1/bg — la version précédente virait trop terne, façon citrouille moisie) + boutons dans un brun bien identifiable (c2), pas trop sombre pour rester clairement « brun » */ --c1:#EA7317;--c2:#6B4226;--c3:#F7E8D4;--cs:48%;--cl:76%;--ts:50%;--tl:22%; --bg:#C2650F;--surface:color-mix(in srgb,var(--c3) 25%,var(--bg)); --ink:color-mix(in srgb,var(--c3) 92%,#fff);--muted:color-mix(in srgb,var(--ink) 60%,var(--bg)); --line:color-mix(in srgb,#000 20%,var(--bg));--soft:color-mix(in srgb,#000 10%,var(--bg)); --today-bg:color-mix(in srgb,var(--bg) 55%,#fff); /* la barre d'onglets Jour/Semaine/Mois/Année reste en brun foncé plutôt que de suivre l'orange vif du fond, pour un vrai contraste brun/citrouille */ --tab-track:#54341E; } :root[data-season="autumn"] .navtabs{ /* la barre d'onglets (rendue via --hero ici, pas --tab-track, à cause de comment elle est placée dans la page) reprend le même brun foncé que l'en-tête du tableau juste en dessous */ --hero:#54341E; } :root[data-season="autumn"] .tscroll{ --bg:var(--c3);--surface:color-mix(in srgb,var(--c3) 35%,#fff); --ink:color-mix(in srgb,var(--c1) 60%,#000);--muted:color-mix(in srgb,var(--c1) 76%,var(--c3)); --line:color-mix(in srgb,var(--c1) 20%,var(--c3));--soft:color-mix(in srgb,var(--c1) 9%,var(--c3)); --cellbg:#FFFBF3; color:var(--ink); } :root[data-season="autumn"] .top{ --hero:color-mix(in srgb,var(--c3) 78%,var(--c2)); /* le texte de l'en-tête (titre, sous-titre, badge classe) est basé sur le brun (c2) plutôt que sur l'orange (c1), pour rester bien brun ici */ --hero-ink:color-mix(in srgb,var(--c2) 88%,#000); --hero-sub:color-mix(in srgb,var(--c2) 70%,var(--c3)); } :root[data-season="autumn"] .dhnotes, :root[data-season="autumn"] .hw, :root[data-season="autumn"] .wgrid:not(.h) .wc{ --surface:#FFFBF3; --ink:color-mix(in srgb,var(--c1) 60%,#000); --muted:color-mix(in srgb,var(--c1) 76%,var(--c3)); --line:color-mix(in srgb,var(--c1) 20%,var(--c3)); color:var(--ink); } :root[data-season="autumn"] .tscroll .pt tbody th.rh{ background:color-mix(in srgb,var(--surface) 55%,var(--bg)); } /* la ligne d’en-tête du tableau (les titres de colonnes) reprend en automne le même brun foncé que la barre d’onglets Jour/Semaine/Mois/Année, texte blanc */ :root[data-season="autumn"] .tscroll .pt thead th{ background:var(--tab-track); border-bottom-color:var(--tab-track); } :root[data-season="autumn"] .tscroll .pt th.h textarea{color:#fff} :root[data-season="autumn"] .tscroll .pt th.h textarea::placeholder{color:#fff;opacity:.7} :root[data-season="autumn"] .tscroll .pt th.h .cm{background:rgba(255,255,255,.18);color:#fff} :root[data-season="autumn"] .tscroll .pt th.h .rz::after{background:rgba(255,255,255,.4)} :root[data-season="winter"]{ --c1:#1F3A52;--c2:#3E7CB1;--c3:#E9F1F8; --bg:#2E4759;--surface:color-mix(in srgb,var(--c3) 25%,var(--bg)); --ink:color-mix(in srgb,var(--c3) 92%,#fff);--muted:color-mix(in srgb,var(--ink) 60%,var(--bg)); --line:color-mix(in srgb,#000 20%,var(--bg));--soft:color-mix(in srgb,#000 10%,var(--bg)); --today-bg:color-mix(in srgb,var(--bg) 55%,#fff); } :root[data-season="winter"] .tscroll{ --bg:var(--c3);--surface:color-mix(in srgb,var(--c3) 35%,#fff); --ink:color-mix(in srgb,var(--c1) 60%,#000);--muted:color-mix(in srgb,var(--c1) 76%,var(--c3)); --line:color-mix(in srgb,var(--c1) 20%,var(--c3));--soft:color-mix(in srgb,var(--c1) 9%,var(--c3)); --cellbg:#F7FAFD; color:var(--ink); } :root[data-season="winter"] .top{ --hero:color-mix(in srgb,var(--c3) 78%,var(--c2)); --hero-ink:color-mix(in srgb,var(--c1) 88%,#000); --hero-sub:color-mix(in srgb,var(--c1) 62%,var(--c3)); } :root[data-season="winter"] .dhnotes, :root[data-season="winter"] .hw, :root[data-season="winter"] .wgrid:not(.h) .wc{ --surface:#FBF8F3; --ink:color-mix(in srgb,var(--c1) 60%,#000); --muted:color-mix(in srgb,var(--c1) 76%,var(--c3)); --line:color-mix(in srgb,var(--c1) 20%,var(--c3)); color:var(--ink); } :root[data-season="spring"]{--c1:#B84A73;--c2:#C94A78;--c3:#FCE9EE} :root[data-season="summer"]{--c1:#A87400;--c2:#E0A300;--c3:#FBF8F1;--accent-ink:#3A2A00} :root[data-season="halloween"]{ --c1:#241934;--c2:#DD7A2E;--c3:#F3EAF6; --bg:#4B3468;--surface:color-mix(in srgb,var(--c3) 25%,var(--bg)); --ink:color-mix(in srgb,var(--c3) 92%,#fff);--muted:color-mix(in srgb,var(--ink) 60%,var(--bg)); --line:color-mix(in srgb,#000 20%,var(--bg));--soft:color-mix(in srgb,#000 10%,var(--bg)); --today-bg:color-mix(in srgb,var(--bg) 55%,#fff); } :root[data-season="halloween"] .tscroll{ --bg:var(--c3);--surface:color-mix(in srgb,var(--c3) 35%,#fff); --ink:color-mix(in srgb,var(--c1) 60%,#000);--muted:color-mix(in srgb,var(--c1) 76%,var(--c3)); --line:color-mix(in srgb,var(--c1) 20%,var(--c3));--soft:color-mix(in srgb,var(--c1) 9%,var(--c3)); --cellbg:#FCF8FF; color:var(--ink); } :root[data-season="halloween"] .top{ --hero:color-mix(in srgb,var(--c3) 78%,var(--c2)); --hero-ink:color-mix(in srgb,var(--c1) 88%,#000); --hero-sub:color-mix(in srgb,var(--c1) 62%,var(--c3)); } :root[data-season="halloween"] .dhnotes, :root[data-season="halloween"] .hw, :root[data-season="halloween"] .wgrid:not(.h) .wc{ --surface:#FCF8FF; --ink:color-mix(in srgb,var(--c1) 60%,#000); --muted:color-mix(in srgb,var(--c1) 76%,var(--c3)); --line:color-mix(in srgb,var(--c1) 20%,var(--c3)); color:var(--ink); } :root[data-season="autumn"] .note-lbl, :root[data-season="halloween"] .note-lbl, :root[data-season="winter"] .note-lbl{ color:color-mix(in srgb,var(--c3) 85%,#fff); } :root[data-season="autumn"] .note-in, :root[data-season="halloween"] .note-in, :root[data-season="winter"] .note-in{ color:color-mix(in srgb,var(--c1) 60%,#000); } :root[data-season="autumn"] .mode, :root[data-season="halloween"] .mode, :root[data-season="winter"] .mode{ --soft:color-mix(in srgb,var(--c3) 78%,var(--c2)); --surface:#FFFBF3; --ink:color-mix(in srgb,var(--c1) 88%,#000); --muted:color-mix(in srgb,var(--c1) 62%,var(--c3)); } :root[data-season="easter"]{--c1:#6B55A6;--c2:#2F8F6F;--c3:#F3ECFA} :root[data-season="carnival"]{--c1:#0F7C86;--c2:#B87400;--c3:#F9F5EA} :root[data-season="christmas"]{--c1:#7A1F2B;--c2:#C79A3A;--c3:#F6F1E6} /* thèmes sobres « Chic » et « Zen » : pas de scène ludique ni de texte d'ambiance (volontairement absents de TAG/MOTIF/DECO/MOOD_SEASONS), onglets et pied de page repliés (voir SOBER_THEMES, render(), footBar()). Angles nets, bordures fines plutôt que des ombres, couleurs de matières très désaturées, une composition géométrique épurée dans l'en-tête (SCENE) : l'idée est un rendu « plan d'architecte », pas « ludique ». */ :root[data-season="chic"]{ /* noir/gris + blanc cassé (plus de brun du tout, pour bien se différencier de Zen) : cartes de matières quasi monochromes, un soupçon de teinte à peine visible plutôt que des pastels vifs */ --c1:#1C1C1A;--c2:#6E6E6A;--c3:#FAF9F5; --cs:4%;--cl:95%;--ts:8%;--tl:20%;--bs:6%;--bl:28%; --accent-ink:#FFFFFF; --shadow:none; --line:color-mix(in srgb,var(--c1) 22%,var(--c3)); /* états (à planifier / matériel / à imprimer / prêt) recolorés en niveaux de gris au lieu du rouge/orange/bleu/vert par défaut */ --st-todo:#2E2E2C;--st-todo-bg:#E7E7E4;--st-todo-ink:#202020; --st-material:#57574F;--st-material-bg:#ECECE8;--st-material-ink:#2E2E2A; --st-print:#7C7C74;--st-print-bg:#EFEFEB;--st-print-ink:#3D3D38; --st-ready:#9E9E92;--st-ready-bg:#F1F1EC;--st-ready-ink:#4A4A42; } :root[data-season="zen"]{ /* même fond crème que « Chic » (--c3), en-tête et accent restent dans une teinte brun mousse + ocre propre à Zen ; mêmes cartes de matières très sobres et mêmes états recolorés que « Chic » */ --c1:#453321;--c2:#8A6A47;--c3:#F5F0E8; --cs:9%;--cl:91%;--ts:18%;--tl:24%;--bs:12%;--bl:32%; --accent-ink:#FFFFFF; --shadow:none; --line:color-mix(in srgb,var(--c1) 22%,var(--c3)); --st-todo:#8B4A3A;--st-todo-bg:#F1E1D7;--st-todo-ink:#5A2E22; --st-material:#8A6B3E;--st-material-bg:#F1E9D8;--st-material-ink:#5C4720; --st-print:#5B6B63;--st-print-bg:#E7EAE6;--st-print-ink:#3A453F; --st-ready:#4F6B4A;--st-ready-bg:#E6ECE1;--st-ready-ink:#33452E; } :root[data-season="terracotta"]{ /* terre cuite brûlée + mur crépi sable + touche d'olivier, inspiré d'une branche d'olivier dans un vase en terre cuite sur une table en bois ; mêmes cartes de matières très sobres et même logique d'états recolorés que « Chic »/« Zen », mais dans une famille terracotta/olive */ --c1:#7A3B26;--c2:#C1603A;--c3:#F6EDE3; --cs:10%;--cl:90%;--ts:20%;--tl:26%;--bs:14%;--bl:34%; --accent-ink:#FFFFFF; --shadow:none; --line:color-mix(in srgb,var(--c1) 22%,var(--c3)); --st-todo:#A15332;--st-todo-bg:#F3E0D2;--st-todo-ink:#6B3419; --st-material:#B8874A;--st-material-bg:#F5EBDA;--st-material-ink:#7A5623; --st-print:#6B7A52;--st-print-bg:#E9ECE2;--st-print-ink:#414A30; --st-ready:#8C6A4A;--st-ready-bg:#EFE6DA;--st-ready-ink:#573F29; } :root[data-season="chic"] .brandtitle{ font-family:"Playfair Display",serif; font-weight:600; font-style:normal; letter-spacing:.01em; } :root[data-season="zen"] .brandtitle{ font-family:"Playfair Display",serif; font-weight:500; font-style:normal; letter-spacing:.02em; } :root[data-season="terracotta"] .brandtitle{ font-family:"Playfair Display",serif; font-weight:600; font-style:normal; letter-spacing:.01em; } /* angles nets partout dans les thèmes sobres (au lieu des coins très arrondis des autres thèmes) ; les boutons eux-mêmes (.btn, .ibtn, les onglets, les résumés repliables…) ont maintenant ce traitement épuré dans TOUS les thèmes, voir la règle globale plus haut */ :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .top, :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .card, :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .fgrp, :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .seg, :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .banner, :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .note-in, :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .tabs, :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .seg label, :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .pill, :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .rte, :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .agrow .rte, :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .tscroll{ border-radius:var(--r-sharp); } /* en-tête de tableau : fond chocolat plein et lettrage clair au lieu du gris-beige plat, pour un rendu plus soutenu/élégant */ :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .tscroll .pt thead th{ background:var(--c1); border-bottom:2px solid var(--c2); } :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .tscroll .pt th.h textarea{color:var(--c3)} :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .tscroll .pt th.h textarea::placeholder{color:var(--c3);opacity:.7} :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .tscroll .pt th.h .cm{background:rgba(255,255,255,.16);color:var(--c3)} :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .tscroll .pt th.h .rz::after{background:rgba(255,255,255,.35)} :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .top{ box-shadow:none; border-bottom:1px solid color-mix(in srgb,var(--c2) 45%,#000); } :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .card.sub{border-width:1px;box-shadow:none} /* la bannière "Régler mon horaire" perd son fond crème plein pour rester discrète : juste un filet, pas de bloc coloré */ :root:is([data-season="chic"],[data-season="zen"],[data-season="terracotta"]) .banner{ background:none; border:1px solid var(--line); } /* composition géométrique de l'en-tête (voir SCENE.chic / SCENE.zen / SCENE.terracotta) : traits fins, pas de remplissage plein, pour rester discret */ :root[data-season="chic"] .top .scene, :root[data-season="zen"] .top .scene, :root[data-season="terracotta"] .top .scene{opacity:.9} /* vraie texture « grain de bois » (veines ondulées + quelques nœuds) sur l'en-tête et le bouton d'accent du thème Zen, à la place d'un aplat brun */ :root[data-season="zen"] .top{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMzAwIDE4MCI+PHBhdGggZD0iTTAuMCwxMy43IEw3LjUsMTMuNCBMMTUuMCwxMi45IEwyMi41LDEyLjIgTDMwLjAsMTEuNCBMMzcuNSwxMC41IEw0NS4wLDkuNCBMNTIuNSw4LjMgTDYwLjAsNy4yIEw2Ny41LDYuMSBMNzUuMCw1LjEgTDgyLjUsNC4yIEw5MC4wLDMuNCBMOTcuNSwyLjggTDEwNS4wLDIuNSBMMTEyLjUsMi4zIEwxMjAuMCwyLjMgTDEyNy41LDIuNiBMMTM1LjAsMy4xIEwxNDIuNSwzLjcgTDE1MC4wLDQuNiBMMTU3LjUsNS41IEwxNjUuMCw2LjYgTDE3Mi41LDcuNyBMMTgwLjAsOC44IEwxODcuNSw5LjkgTDE5NS4wLDEwLjkgTDIwMi41LDExLjggTDIxMC4wLDEyLjYgTDIxNy41LDEzLjEgTDIyNS4wLDEzLjUgTDIzMi41LDEzLjcgTDI0MC4wLDEzLjcgTDI0Ny41LDEzLjQgTDI1NS4wLDEyLjkgTDI2Mi41LDEyLjMgTDI3MC4wLDExLjUgTDI3Ny41LDEwLjUgTDI4NS4wLDkuNSBMMjkyLjUsOC40IEwzMDAuMCw3LjIgIiBmaWxsPSJub25lIiBzdHJva2U9IiMxMjBhMDUiIHN0cm9rZS13aWR0aD0iMy4wNDg0MjExNjgwNDc0NTkiIHN0cm9rZS1vcGFjaXR5PSIwLjEwMTIyMTUwNzcxMDk3NTA3IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMC4wLDE5LjUgTDcuNSwxOS4xIEwxNS4wLDE4LjkgTDIyLjUsMTguOSBMMzAuMCwxOS4xIEwzNy41LDE5LjUgTDQ1LjAsMjAuMSBMNTIuNSwyMC44IEw2MC4wLDIxLjYgTDY3LjUsMjIuNSBMNzUuMCwyMy41IEw4Mi41LDI0LjQgTDkwLjAsMjUuMiBMOTcuNSwyNi4wIEwxMDUuMCwyNi41IEwxMTIuNSwyNi45IEwxMjAuMCwyNy4xIEwxMjcuNSwyNy4xIEwxMzUuMCwyNi45IEwxNDIuNSwyNi40IEwxNTAuMCwyNS44IEwxNTcuNSwyNS4xIEwxNjUuMCwyNC4yIEwxNzIuNSwyMy4zIEwxODAuMCwyMi40IEwxODcuNSwyMS41IEwxOTUuMCwyMC42IEwyMDIuNSwxOS45IEwyMTAuMCwxOS40IEwyMTcuNSwxOS4wIEwyMjUuMCwxOC45IEwyMzIuNSwxOC45IEwyNDAuMCwxOS4yIEwyNDcuNSwxOS42IEwyNTUuMCwyMC4yIEwyNjIuNSwyMS4wIEwyNzAuMCwyMS45IEwyNzcuNSwyMi44IEwyODUuMCwyMy43IEwyOTIuNSwyNC42IEwzMDAuMCwyNS40ICIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMWExMDA4IiBzdHJva2Utd2lkdGg9IjIuMTUxNTI2NDcyNDE3NzUyNSIgc3Ryb2tlLW9wYWNpdHk9IjAuMTE3NTM1NDcxNzQ2NTMwMDYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0wLjAsMzcuMiBMNy41LDM3LjQgTDE1LjAsMzcuNSBMMjIuNSwzNy41IEwzMC4wLDM3LjQgTDM3LjUsMzcuMiBMNDUuMCwzNi45IEw1Mi41LDM2LjYgTDYwLjAsMzYuMiBMNjcuNSwzNS43IEw3NS4wLDM1LjEgTDgyLjUsMzQuNSBMOTAuMCwzMy45IEw5Ny41LDMzLjMgTDEwNS4wLDMyLjYgTDExMi41LDMyLjAgTDEyMC4wLDMxLjMgTDEyNy41LDMwLjcgTDEzNS4wLDMwLjEgTDE0Mi41LDI5LjYgTDE1MC4wLDI5LjEgTDE1Ny41LDI4LjcgTDE2NS4wLDI4LjMgTDE3Mi41LDI4LjEgTDE4MC4wLDI3LjkgTDE4Ny41LDI3LjggTDE5NS4wLDI3LjggTDIwMi41LDI3LjkgTDIxMC4wLDI4LjEgTDIxNy41LDI4LjQgTDIyNS4wLDI4LjcgTDIzMi41LDI5LjIgTDI0MC4wLDI5LjcgTDI0Ny41LDMwLjIgTDI1NS4wLDMwLjggTDI2Mi41LDMxLjQgTDI3MC4wLDMyLjEgTDI3Ny41LDMyLjcgTDI4NS4wLDMzLjQgTDI5Mi41LDM0LjAgTDMwMC4wLDM0LjYgIiBmaWxsPSJub25lIiBzdHJva2U9IiMxYTEwMDgiIHN0cm9rZS13aWR0aD0iMi44MTkyODkwNjg3MzQzNTUiIHN0cm9rZS1vcGFjaXR5PSIwLjEyNjI3ODIzMzA3OTUzNjI4IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMC4wLDUxLjAgTDcuNSw1MC43IEwxNS4wLDUwLjIgTDIyLjUsNDkuNSBMMzAuMCw0OC44IEwzNy41LDQ3LjkgTDQ1LjAsNDcuMCBMNTIuNSw0Ni4wIEw2MC4wLDQ1LjAgTDY3LjUsNDQuMSBMNzUuMCw0My4yIEw4Mi41LDQyLjQgTDkwLjAsNDEuNyBMOTcuNSw0MS4xIEwxMDUuMCw0MC43IEwxMTIuNSw0MC41IEwxMjAuMCw0MC40IEwxMjcuNSw0MC42IEwxMzUuMCw0MC45IEwxNDIuNSw0MS4zIEwxNTAuMCw0MS45IEwxNTcuNSw0Mi43IEwxNjUuMCw0My41IEwxNzIuNSw0NC41IEwxODAuMCw0NS40IEwxODcuNSw0Ni40IEwxOTUuMCw0Ny40IEwyMDIuNSw0OC4zIEwyMTAuMCw0OS4xIEwyMTcuNSw0OS44IEwyMjUuMCw1MC40IEwyMzIuNSw1MC44IEwyNDAuMCw1MS4xIEwyNDcuNSw1MS4yIEwyNTUuMCw1MS4xIEwyNjIuNSw1MC44IEwyNzAuMCw1MC40IEwyNzcuNSw0OS44IEwyODUuMCw0OS4xIEwyOTIuNSw0OC4zIEwzMDAuMCw0Ny40ICIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTIwYTA1IiBzdHJva2Utd2lkdGg9IjIuNjc3ODMxNzYwMjgwNzY4NCIgc3Ryb2tlLW9wYWNpdHk9IjAuMTIxNTA3ODA3MTMwNTQ3OTgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0wLjAsNDguOCBMNy41LDQ4LjggTDE1LjAsNDguOSBMMjIuNSw0OS4xIEwzMC4wLDQ5LjQgTDM3LjUsNDkuOCBMNDUuMCw1MC40IEw1Mi41LDUwLjkgTDYwLjAsNTEuNiBMNjcuNSw1Mi4zIEw3NS4wLDUzLjEgTDgyLjUsNTMuOSBMOTAuMCw1NC43IEw5Ny41LDU1LjUgTDEwNS4wLDU2LjMgTDExMi41LDU3LjEgTDEyMC4wLDU3LjkgTDEyNy41LDU4LjYgTDEzNS4wLDU5LjIgTDE0Mi41LDU5LjcgTDE1MC4wLDYwLjIgTDE1Ny41LDYwLjYgTDE2NS4wLDYwLjkgTDE3Mi41LDYxLjAgTDE4MC4wLDYxLjEgTDE4Ny41LDYxLjAgTDE5NS4wLDYwLjkgTDIwMi41LDYwLjYgTDIxMC4wLDYwLjMgTDIxNy41LDU5LjggTDIyNS4wLDU5LjMgTDIzMi41LDU4LjYgTDI0MC4wLDU3LjkgTDI0Ny41LDU3LjIgTDI1NS4wLDU2LjQgTDI2Mi41LDU1LjYgTDI3MC4wLDU0LjggTDI3Ny41LDU0LjAgTDI4NS4wLDUzLjIgTDI5Mi41LDUyLjQgTDMwMC4wLDUxLjcgIiBmaWxsPSJub25lIiBzdHJva2U9IiMxYTEwMDgiIHN0cm9rZS13aWR0aD0iMS41ODA0MTY1MjU1OTU4NTgyIiBzdHJva2Utb3BhY2l0eT0iMC4wNzY2MTM3MzE1MDMxNzM2MyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTAuMCw3MC42IEw3LjUsNzEuNSBMMTUuMCw3Mi40IEwyMi41LDczLjEgTDMwLjAsNzMuNyBMMzcuNSw3NC4xIEw0NS4wLDc0LjMgTDUyLjUsNzQuMyBMNjAuMCw3NC4xIEw2Ny41LDczLjggTDc1LjAsNzMuMiBMODIuNSw3Mi41IEw5MC4wLDcxLjcgTDk3LjUsNzAuOCBMMTA1LjAsNjkuOCBMMTEyLjUsNjguOCBMMTIwLjAsNjcuOSBMMTI3LjUsNjcuMCBMMTM1LjAsNjYuMSBMMTQyLjUsNjUuNSBMMTUwLjAsNjQuOSBMMTU3LjUsNjQuNiBMMTY1LjAsNjQuNCBMMTcyLjUsNjQuNSBMMTgwLjAsNjQuNyBMMTg3LjUsNjUuMSBMMTk1LjAsNjUuNyBMMjAyLjUsNjYuNCBMMjEwLjAsNjcuMyBMMjE3LjUsNjguMiBMMjI1LjAsNjkuMiBMMjMyLjUsNzAuMiBMMjQwLjAsNzEuMSBMMjQ3LjUsNzIuMCBMMjU1LjAsNzIuOCBMMjYyLjUsNzMuNCBMMjcwLjAsNzMuOSBMMjc3LjUsNzQuMiBMMjg1LjAsNzQuMyBMMjkyLjUsNzQuMiBMMzAwLjAsNzMuOSAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzJhMWEwZSIgc3Ryb2tlLXdpZHRoPSIxLjU5MDY0Mjc1NTAxODUzMzgiIHN0cm9rZS1vcGFjaXR5PSIwLjA3NTcwMTAyMDEzOTY5NDg3IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMC4wLDgzLjEgTDcuNSw4NC4zIEwxNS4wLDg1LjUgTDIyLjUsODYuNSBMMzAuMCw4Ny40IEwzNy41LDg4LjEgTDQ1LjAsODguNSBMNTIuNSw4OC44IEw2MC4wLDg4LjggTDY3LjUsODguNiBMNzUuMCw4OC4yIEw4Mi41LDg3LjUgTDkwLjAsODYuNyBMOTcuNSw4NS43IEwxMDUuMCw4NC42IEwxMTIuNSw4My4zIEwxMjAuMCw4Mi4xIEwxMjcuNSw4MC44IEwxMzUuMCw3OS42IEwxNDIuNSw3OC40IEwxNTAuMCw3Ny40IEwxNTcuNSw3Ni41IEwxNjUuMCw3NS43IEwxNzIuNSw3NS4yIEwxODAuMCw3NS4wIEwxODcuNSw3NC45IEwxOTUuMCw3NS4xIEwyMDIuNSw3NS41IEwyMTAuMCw3Ni4xIEwyMTcuNSw3Ni45IEwyMjUuMCw3Ny45IEwyMzIuNSw3OS4wIEwyNDAuMCw4MC4yIEwyNDcuNSw4MS41IEwyNTUuMCw4Mi43IEwyNjIuNSw4NC4wIEwyNzAuMCw4NS4xIEwyNzcuNSw4Ni4yIEwyODUuMCw4Ny4xIEwyOTIuNSw4Ny45IEwzMDAuMCw4OC40ICIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMWExMDA4IiBzdHJva2Utd2lkdGg9IjEuNzU2MzI1Nzk5MzI3NzcxNyIgc3Ryb2tlLW9wYWNpdHk9IjAuMTU5NzQyMTgyMDUwOTM5MjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0wLjAsMTAwLjcgTDcuNSwxMDAuNyBMMTUuMCwxMDAuNSBMMjIuNSwxMDAuMiBMMzAuMCw5OS44IEwzNy41LDk5LjMgTDQ1LjAsOTguOCBMNTIuNSw5OC4xIEw2MC4wLDk3LjQgTDY3LjUsOTYuNyBMNzUuMCw5NS45IEw4Mi41LDk1LjIgTDkwLjAsOTQuNSBMOTcuNSw5My43IEwxMDUuMCw5My4xIEwxMTIuNSw5Mi41IEwxMjAuMCw5Mi4wIEwxMjcuNSw5MS42IEwxMzUuMCw5MS4yIEwxNDIuNSw5MS4wIEwxNTAuMCw5MC45IEwxNTcuNSw5MS4wIEwxNjUuMCw5MS4xIEwxNzIuNSw5MS4zIEwxODAuMCw5MS43IEwxODcuNSw5Mi4xIEwxOTUuMCw5Mi43IEwyMDIuNSw5My4zIEwyMTAuMCw5NC4wIEwyMTcuNSw5NC43IEwyMjUuMCw5NS40IEwyMzIuNSw5Ni4yIEwyNDAuMCw5Ni45IEwyNDcuNSw5Ny43IEwyNTUuMCw5OC4zIEwyNjIuNSw5OC45IEwyNzAuMCw5OS41IEwyNzcuNSw5OS45IEwyODUuMCwxMDAuMyBMMjkyLjUsMTAwLjUgTDMwMC4wLDEwMC43ICIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMWExMDA4IiBzdHJva2Utd2lkdGg9IjEuNzc4MDc5ODk0NjI4NDA0MiIgc3Ryb2tlLW9wYWNpdHk9IjAuMDU3NzI0NTg0OTUxNTkxODU2IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMC4wLDExMy40IEw3LjUsMTE0LjMgTDE1LjAsMTE1LjAgTDIyLjUsMTE1LjUgTDMwLjAsMTE1LjcgTDM3LjUsMTE1LjcgTDQ1LjAsMTE1LjQgTDUyLjUsMTE0LjkgTDYwLjAsMTE0LjIgTDY3LjUsMTEzLjIgTDc1LjAsMTEyLjEgTDgyLjUsMTEwLjkgTDkwLjAsMTA5LjYgTDk3LjUsMTA4LjIgTDEwNS4wLDEwNi44IEwxMTIuNSwxMDUuNCBMMTIwLjAsMTA0LjEgTDEyNy41LDEwMi45IEwxMzUuMCwxMDEuOCBMMTQyLjUsMTAwLjkgTDE1MC4wLDEwMC4yIEwxNTcuNSw5OS44IEwxNjUuMCw5OS42IEwxNzIuNSw5OS42IEwxODAuMCw5OS44IEwxODcuNSwxMDAuMyBMMTk1LjAsMTAxLjEgTDIwMi41LDEwMi4wIEwyMTAuMCwxMDMuMSBMMjE3LjUsMTA0LjMgTDIyNS4wLDEwNS42IEwyMzIuNSwxMDcuMCBMMjQwLjAsMTA4LjQgTDI0Ny41LDEwOS44IEwyNTUuMCwxMTEuMSBMMjYyLjUsMTEyLjMgTDI3MC4wLDExMy40IEwyNzcuNSwxMTQuMyBMMjg1LjAsMTE1LjAgTDI5Mi41LDExNS40IEwzMDAuMCwxMTUuNyAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFhMTAwOCIgc3Ryb2tlLXdpZHRoPSIzLjExNjA4NDc2NjYzOTYyNyIgc3Ryb2tlLW9wYWNpdHk9IjAuMTQzMjA0MDc1MDYzMzA4NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTAuMCwxMDkuOSBMNy41LDExMC40IEwxNS4wLDExMC45IEwyMi41LDExMS42IEwzMC4wLDExMi40IEwzNy41LDExMy4yIEw0NS4wLDExNC4yIEw1Mi41LDExNS4zIEw2MC4wLDExNi4zIEw2Ny41LDExNy41IEw3NS4wLDExOC42IEw4Mi41LDExOS43IEw5MC4wLDEyMC44IEw5Ny41LDEyMS45IEwxMDUuMCwxMjIuOCBMMTEyLjUsMTIzLjcgTDEyMC4wLDEyNC41IEwxMjcuNSwxMjUuMiBMMTM1LjAsMTI1LjggTDE0Mi41LDEyNi4yIEwxNTAuMCwxMjYuNSBMMTU3LjUsMTI2LjcgTDE2NS4wLDEyNi43IEwxNzIuNSwxMjYuNSBMMTgwLjAsMTI2LjIgTDE4Ny41LDEyNS44IEwxOTUuMCwxMjUuMiBMMjAyLjUsMTI0LjUgTDIxMC4wLDEyMy43IEwyMTcuNSwxMjIuOCBMMjI1LjAsMTIxLjggTDIzMi41LDEyMC43IEwyNDAuMCwxMTkuNiBMMjQ3LjUsMTE4LjUgTDI1NS4wLDExNy40IEwyNjIuNSwxMTYuMiBMMjcwLjAsMTE1LjIgTDI3Ny41LDExNC4xIEwyODUuMCwxMTMuMiBMMjkyLjUsMTEyLjMgTDMwMC4wLDExMS41ICIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMmExYTBlIiBzdHJva2Utd2lkdGg9IjEuOTUwOTI2NDE5Nzk5OTA3OSIgc3Ryb2tlLW9wYWNpdHk9IjAuMTI3OTc4OTA1NzY1MDkxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTAuMCwxMzMuOSBMNy41LDEzMy4yIEwxNS4wLDEzMi4yIEwyMi41LDEzMC45IEwzMC4wLDEyOS41IEwzNy41LDEyOC4wIEw0NS4wLDEyNi41IEw1Mi41LDEyNS4xIEw2MC4wLDEyMy44IEw2Ny41LDEyMi42IEw3NS4wLDEyMS43IEw4Mi41LDEyMS4xIEw5MC4wLDEyMC45IEw5Ny41LDEyMC45IEwxMDUuMCwxMjEuMyBMMTEyLjUsMTIyLjAgTDEyMC4wLDEyMy4wIEwxMjcuNSwxMjQuMiBMMTM1LjAsMTI1LjYgTDE0Mi41LDEyNy4xIEwxNTAuMCwxMjguNiBMMTU3LjUsMTMwLjEgTDE2NS4wLDEzMS40IEwxNzIuNSwxMzIuNiBMMTgwLjAsMTMzLjUgTDE4Ny41LDEzNC4xIEwxOTUuMCwxMzQuNCBMMjAyLjUsMTM0LjMgTDIxMC4wLDEzNC4wIEwyMTcuNSwxMzMuMyBMMjI1LjAsMTMyLjMgTDIzMi41LDEzMS4xIEwyNDAuMCwxMjkuNyBMMjQ3LjUsMTI4LjIgTDI1NS4wLDEyNi43IEwyNjIuNSwxMjUuMiBMMjcwLjAsMTIzLjkgTDI3Ny41LDEyMi43IEwyODUuMCwxMjEuOCBMMjkyLjUsMTIxLjIgTDMwMC4wLDEyMC45ICIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMmExYTBlIiBzdHJva2Utd2lkdGg9IjEuNzM5NTUxMTczNzAwMjg1MyIgc3Ryb2tlLW9wYWNpdHk9IjAuMDU5NTg1ODYxODE4NzM4NzIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0wLjAsMTMxLjMgTDcuNSwxMzEuNSBMMTUuMCwxMzIuMSBMMjIuNSwxMzIuOSBMMzAuMCwxMzQuMCBMMzcuNSwxMzUuMiBMNDUuMCwxMzYuNSBMNTIuNSwxMzcuOCBMNjAuMCwxMzkuMCBMNjcuNSwxNDAuMSBMNzUuMCwxNDEuMSBMODIuNSwxNDEuNyBMOTAuMCwxNDIuMSBMOTcuNSwxNDIuMiBMMTA1LjAsMTQxLjkgTDExMi41LDE0MS40IEwxMjAuMCwxNDAuNSBMMTI3LjUsMTM5LjUgTDEzNS4wLDEzOC4zIEwxNDIuNSwxMzcuMCBMMTUwLjAsMTM1LjcgTDE1Ny41LDEzNC40IEwxNjUuMCwxMzMuMyBMMTcyLjUsMTMyLjQgTDE4MC4wLDEzMS43IEwxODcuNSwxMzEuNCBMMTk1LjAsMTMxLjMgTDIwMi41LDEzMS41IEwyMTAuMCwxMzIuMSBMMjE3LjUsMTMyLjkgTDIyNS4wLDEzNC4wIEwyMzIuNSwxMzUuMiBMMjQwLjAsMTM2LjUgTDI0Ny41LDEzNy44IEwyNTUuMCwxMzkuMCBMMjYyLjUsMTQwLjEgTDI3MC4wLDE0MS4xIEwyNzcuNSwxNDEuNyBMMjg1LjAsMTQyLjEgTDI5Mi41LDE0Mi4yIEwzMDAuMCwxNDEuOSAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFhMTAwOCIgc3Ryb2tlLXdpZHRoPSIxLjQ2OTE5MjkzNzcwNzcyMTMiIHN0cm9rZS1vcGFjaXR5PSIwLjEyNzc3MTc2MzIxMzgzNjM4IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMC4wLDE1My45IEw3LjUsMTUzLjggTDE1LjAsMTUzLjQgTDIyLjUsMTUyLjkgTDMwLjAsMTUyLjMgTDM3LjUsMTUxLjUgTDQ1LjAsMTUwLjYgTDUyLjUsMTQ5LjcgTDYwLjAsMTQ4LjYgTDY3LjUsMTQ3LjUgTDc1LjAsMTQ2LjMgTDgyLjUsMTQ1LjIgTDkwLjAsMTQ0LjEgTDk3LjUsMTQzLjAgTDEwNS4wLDE0Mi4wIEwxMTIuNSwxNDEuMCBMMTIwLjAsMTQwLjIgTDEyNy41LDEzOS42IEwxMzUuMCwxMzkuMCBMMTQyLjUsMTM4LjYgTDE1MC4wLDEzOC40IEwxNTcuNSwxMzguNCBMMTY1LjAsMTM4LjUgTDE3Mi41LDEzOC44IEwxODAuMCwxMzkuMiBMMTg3LjUsMTM5LjggTDE5NS4wLDE0MC42IEwyMDIuNSwxNDEuNCBMMjEwLjAsMTQyLjQgTDIxNy41LDE0My41IEwyMjUuMCwxNDQuNiBMMjMyLjUsMTQ1LjcgTDI0MC4wLDE0Ni45IEwyNDcuNSwxNDguMCBMMjU1LjAsMTQ5LjEgTDI2Mi41LDE1MC4xIEwyNzAuMCwxNTEuMSBMMjc3LjUsMTUxLjkgTDI4NS4wLDE1Mi42IEwyOTIuNSwxNTMuMiBMMzAwLjAsMTUzLjYgIiBmaWxsPSJub25lIiBzdHJva2U9IiMxYTEwMDgiIHN0cm9rZS13aWR0aD0iMi4zMTg1OTAyODMyMjA3ODk0IiBzdHJva2Utb3BhY2l0eT0iMC4wOTkyMTY3MzY1MjUxMTIzNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTAuMCwxNTQuNyBMNy41LDE1NS4xIEwxNS4wLDE1NS44IEwyMi41LDE1Ni43IEwzMC4wLDE1Ny43IEwzNy41LDE1OC45IEw0NS4wLDE2MC4yIEw1Mi41LDE2MS41IEw2MC4wLDE2Mi45IEw2Ny41LDE2NC4yIEw3NS4wLDE2NS41IEw4Mi41LDE2Ni42IEw5MC4wLDE2Ny42IEw5Ny41LDE2OC41IEwxMDUuMCwxNjkuMSBMMTEyLjUsMTY5LjUgTDEyMC4wLDE2OS43IEwxMjcuNSwxNjkuNiBMMTM1LjAsMTY5LjMgTDE0Mi41LDE2OC43IEwxNTAuMCwxNjguMCBMMTU3LjUsMTY3LjAgTDE2NS4wLDE2NS45IEwxNzIuNSwxNjQuNyBMMTgwLjAsMTYzLjQgTDE4Ny41LDE2Mi4wIEwxOTUuMCwxNjAuNyBMMjAyLjUsMTU5LjQgTDIxMC4wLDE1OC4xIEwyMTcuNSwxNTcuMSBMMjI1LjAsMTU2LjEgTDIzMi41LDE1NS40IEwyNDAuMCwxNTQuOCBMMjQ3LjUsMTU0LjUgTDI1NS4wLDE1NC40IEwyNjIuNSwxNTQuNiBMMjcwLjAsMTU1LjAgTDI3Ny41LDE1NS42IEwyODUuMCwxNTYuNSBMMjkyLjUsMTU3LjUgTDMwMC4wLDE1OC42ICIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMWExMDA4IiBzdHJva2Utd2lkdGg9IjEuOTY3NTAzNTc2MjI2NjUxMyIgc3Ryb2tlLW9wYWNpdHk9IjAuMDkzNDMzODcwODY5MDA0MTIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0wLjAsMTc5LjEgTDcuNSwxNzkuMiBMMTUuMCwxNzguOCBMMjIuNSwxNzcuOSBMMzAuMCwxNzYuNiBMMzcuNSwxNzQuOSBMNDUuMCwxNzMuMSBMNTIuNSwxNzEuMCBMNjAuMCwxNjkuMCBMNjcuNSwxNjcuMSBMNzUuMCwxNjUuNSBMODIuNSwxNjQuMiBMOTAuMCwxNjMuMyBMOTcuNSwxNjIuOSBMMTA1LjAsMTYzLjAgTDExMi41LDE2My42IEwxMjAuMCwxNjQuNiBMMTI3LjUsMTY2LjAgTDEzNS4wLDE2Ny44IEwxNDIuNSwxNjkuNyBMMTUwLjAsMTcxLjcgTDE1Ny41LDE3My43IEwxNjUuMCwxNzUuNSBMMTcyLjUsMTc3LjEgTDE4MC4wLDE3OC4zIEwxODcuNSwxNzkuMCBMMTk1LjAsMTc5LjIgTDIwMi41LDE3OS4wIEwyMTAuMCwxNzguMiBMMjE3LjUsMTc3LjEgTDIyNS4wLDE3NS41IEwyMzIuNSwxNzMuNyBMMjQwLjAsMTcxLjcgTDI0Ny41LDE2OS43IEwyNTUuMCwxNjcuNyBMMjYyLjUsMTY2LjAgTDI3MC4wLDE2NC42IEwyNzcuNSwxNjMuNSBMMjg1LjAsMTYzLjAgTDI5Mi41LDE2Mi45IEwzMDAuMCwxNjMuMyAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFhMTAwOCIgc3Ryb2tlLXdpZHRoPSIyLjM4NTQ4MTI1NDgxODIxOCIgc3Ryb2tlLW9wYWNpdHk9IjAuMTU5NzY5NDA5MDU1NTI0NzgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxlbGxpcHNlIGN4PSI3MCIgY3k9Ijk1IiByeD0iMTAuMCIgcnk9IjE1LjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzE1MGMwNiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMC4xNCIvPjxlbGxpcHNlIGN4PSI3MCIgY3k9Ijk1IiByeD0iNi44IiByeT0iMTAuMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTUwYzA2IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1vcGFjaXR5PSIwLjEyIi8+PGVsbGlwc2UgY3g9IjcwIiBjeT0iOTUiIHJ4PSIzLjgiIHJ5PSI1LjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzE1MGMwNiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMC4xMCIvPjxlbGxpcHNlIGN4PSI3MCIgY3k9Ijk1IiByeD0iMS41IiByeT0iMi4yIiBmaWxsPSJub25lIiBzdHJva2U9IiMxNTBjMDYiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLW9wYWNpdHk9IjAuMDgiLz48ZWxsaXBzZSBjeD0iMjMwIiBjeT0iNDAiIHJ4PSI3LjAiIHJ5PSIxMC41IiBmaWxsPSJub25lIiBzdHJva2U9IiMxNTBjMDYiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLW9wYWNpdHk9IjAuMTQiLz48ZWxsaXBzZSBjeD0iMjMwIiBjeT0iNDAiIHJ4PSI0LjgiIHJ5PSI3LjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzE1MGMwNiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMC4xMiIvPjxlbGxpcHNlIGN4PSIyMzAiIGN5PSI0MCIgcng9IjIuNyIgcnk9IjQuMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTUwYzA2IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1vcGFjaXR5PSIwLjEwIi8+PGVsbGlwc2UgY3g9IjIzMCIgY3k9IjQwIiByeD0iMS4xIiByeT0iMS42IiBmaWxsPSJub25lIiBzdHJva2U9IiMxNTBjMDYiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLW9wYWNpdHk9IjAuMDgiLz48L3N2Zz4="); background-size:300px 180px; background-repeat:repeat; background-color:var(--hero); } :root[data-season="zen"] .btn.primary{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMzAwIDE4MCI+PHBhdGggZD0iTTAuMCwxMy43IEw3LjUsMTMuNCBMMTUuMCwxMi45IEwyMi41LDEyLjIgTDMwLjAsMTEuNCBMMzcuNSwxMC41IEw0NS4wLDkuNCBMNTIuNSw4LjMgTDYwLjAsNy4yIEw2Ny41LDYuMSBMNzUuMCw1LjEgTDgyLjUsNC4yIEw5MC4wLDMuNCBMOTcuNSwyLjggTDEwNS4wLDIuNSBMMTEyLjUsMi4zIEwxMjAuMCwyLjMgTDEyNy41LDIuNiBMMTM1LjAsMy4xIEwxNDIuNSwzLjcgTDE1MC4wLDQuNiBMMTU3LjUsNS41IEwxNjUuMCw2LjYgTDE3Mi41LDcuNyBMMTgwLjAsOC44IEwxODcuNSw5LjkgTDE5NS4wLDEwLjkgTDIwMi41LDExLjggTDIxMC4wLDEyLjYgTDIxNy41LDEzLjEgTDIyNS4wLDEzLjUgTDIzMi41LDEzLjcgTDI0MC4wLDEzLjcgTDI0Ny41LDEzLjQgTDI1NS4wLDEyLjkgTDI2Mi41LDEyLjMgTDI3MC4wLDExLjUgTDI3Ny41LDEwLjUgTDI4NS4wLDkuNSBMMjkyLjUsOC40IEwzMDAuMCw3LjIgIiBmaWxsPSJub25lIiBzdHJva2U9IiMxMjBhMDUiIHN0cm9rZS13aWR0aD0iMy4wNDg0MjExNjgwNDc0NTkiIHN0cm9rZS1vcGFjaXR5PSIwLjEwMTIyMTUwNzcxMDk3NTA3IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMC4wLDE5LjUgTDcuNSwxOS4xIEwxNS4wLDE4LjkgTDIyLjUsMTguOSBMMzAuMCwxOS4xIEwzNy41LDE5LjUgTDQ1LjAsMjAuMSBMNTIuNSwyMC44IEw2MC4wLDIxLjYgTDY3LjUsMjIuNSBMNzUuMCwyMy41IEw4Mi41LDI0LjQgTDkwLjAsMjUuMiBMOTcuNSwyNi4wIEwxMDUuMCwyNi41IEwxMTIuNSwyNi45IEwxMjAuMCwyNy4xIEwxMjcuNSwyNy4xIEwxMzUuMCwyNi45IEwxNDIuNSwyNi40IEwxNTAuMCwyNS44IEwxNTcuNSwyNS4xIEwxNjUuMCwyNC4yIEwxNzIuNSwyMy4zIEwxODAuMCwyMi40IEwxODcuNSwyMS41IEwxOTUuMCwyMC42IEwyMDIuNSwxOS45IEwyMTAuMCwxOS40IEwyMTcuNSwxOS4wIEwyMjUuMCwxOC45IEwyMzIuNSwxOC45IEwyNDAuMCwxOS4yIEwyNDcuNSwxOS42IEwyNTUuMCwyMC4yIEwyNjIuNSwyMS4wIEwyNzAuMCwyMS45IEwyNzcuNSwyMi44IEwyODUuMCwyMy43IEwyOTIuNSwyNC42IEwzMDAuMCwyNS40ICIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMWExMDA4IiBzdHJva2Utd2lkdGg9IjIuMTUxNTI2NDcyNDE3NzUyNSIgc3Ryb2tlLW9wYWNpdHk9IjAuMTE3NTM1NDcxNzQ2NTMwMDYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0wLjAsMzcuMiBMNy41LDM3LjQgTDE1LjAsMzcuNSBMMjIuNSwzNy41IEwzMC4wLDM3LjQgTDM3LjUsMzcuMiBMNDUuMCwzNi45IEw1Mi41LDM2LjYgTDYwLjAsMzYuMiBMNjcuNSwzNS43IEw3NS4wLDM1LjEgTDgyLjUsMzQuNSBMOTAuMCwzMy45IEw5Ny41LDMzLjMgTDEwNS4wLDMyLjYgTDExMi41LDMyLjAgTDEyMC4wLDMxLjMgTDEyNy41LDMwLjcgTDEzNS4wLDMwLjEgTDE0Mi41LDI5LjYgTDE1MC4wLDI5LjEgTDE1Ny41LDI4LjcgTDE2NS4wLDI4LjMgTDE3Mi41LDI4LjEgTDE4MC4wLDI3LjkgTDE4Ny41LDI3LjggTDE5NS4wLDI3LjggTDIwMi41LDI3LjkgTDIxMC4wLDI4LjEgTDIxNy41LDI4LjQgTDIyNS4wLDI4LjcgTDIzMi41LDI5LjIgTDI0MC4wLDI5LjcgTDI0Ny41LDMwLjIgTDI1NS4wLDMwLjggTDI2Mi41LDMxLjQgTDI3MC4wLDMyLjEgTDI3Ny41LDMyLjcgTDI4NS4wLDMzLjQgTDI5Mi41LDM0LjAgTDMwMC4wLDM0LjYgIiBmaWxsPSJub25lIiBzdHJva2U9IiMxYTEwMDgiIHN0cm9rZS13aWR0aD0iMi44MTkyODkwNjg3MzQzNTUiIHN0cm9rZS1vcGFjaXR5PSIwLjEyNjI3ODIzMzA3OTUzNjI4IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMC4wLDUxLjAgTDcuNSw1MC43IEwxNS4wLDUwLjIgTDIyLjUsNDkuNSBMMzAuMCw0OC44IEwzNy41LDQ3LjkgTDQ1LjAsNDcuMCBMNTIuNSw0Ni4wIEw2MC4wLDQ1LjAgTDY3LjUsNDQuMSBMNzUuMCw0My4yIEw4Mi41LDQyLjQgTDkwLjAsNDEuNyBMOTcuNSw0MS4xIEwxMDUuMCw0MC43IEwxMTIuNSw0MC41IEwxMjAuMCw0MC40IEwxMjcuNSw0MC42IEwxMzUuMCw0MC45IEwxNDIuNSw0MS4zIEwxNTAuMCw0MS45IEwxNTcuNSw0Mi43IEwxNjUuMCw0My41IEwxNzIuNSw0NC41IEwxODAuMCw0NS40IEwxODcuNSw0Ni40IEwxOTUuMCw0Ny40IEwyMDIuNSw0OC4zIEwyMTAuMCw0OS4xIEwyMTcuNSw0OS44IEwyMjUuMCw1MC40IEwyMzIuNSw1MC44IEwyNDAuMCw1MS4xIEwyNDcuNSw1MS4yIEwyNTUuMCw1MS4xIEwyNjIuNSw1MC44IEwyNzAuMCw1MC40IEwyNzcuNSw0OS44IEwyODUuMCw0OS4xIEwyOTIuNSw0OC4zIEwzMDAuMCw0Ny40ICIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTIwYTA1IiBzdHJva2Utd2lkdGg9IjIuNjc3ODMxNzYwMjgwNzY4NCIgc3Ryb2tlLW9wYWNpdHk9IjAuMTIxNTA3ODA3MTMwNTQ3OTgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0wLjAsNDguOCBMNy41LDQ4LjggTDE1LjAsNDguOSBMMjIuNSw0OS4xIEwzMC4wLDQ5LjQgTDM3LjUsNDkuOCBMNDUuMCw1MC40IEw1Mi41LDUwLjkgTDYwLjAsNTEuNiBMNjcuNSw1Mi4zIEw3NS4wLDUzLjEgTDgyLjUsNTMuOSBMOTAuMCw1NC43IEw5Ny41LDU1LjUgTDEwNS4wLDU2LjMgTDExMi41LDU3LjEgTDEyMC4wLDU3LjkgTDEyNy41LDU4LjYgTDEzNS4wLDU5LjIgTDE0Mi41LDU5LjcgTDE1MC4wLDYwLjIgTDE1Ny41LDYwLjYgTDE2NS4wLDYwLjkgTDE3Mi41LDYxLjAgTDE4MC4wLDYxLjEgTDE4Ny41LDYxLjAgTDE5NS4wLDYwLjkgTDIwMi41LDYwLjYgTDIxMC4wLDYwLjMgTDIxNy41LDU5LjggTDIyNS4wLDU5LjMgTDIzMi41LDU4LjYgTDI0MC4wLDU3LjkgTDI0Ny41LDU3LjIgTDI1NS4wLDU2LjQgTDI2Mi41LDU1LjYgTDI3MC4wLDU0LjggTDI3Ny41LDU0LjAgTDI4NS4wLDUzLjIgTDI5Mi41LDUyLjQgTDMwMC4wLDUxLjcgIiBmaWxsPSJub25lIiBzdHJva2U9IiMxYTEwMDgiIHN0cm9rZS13aWR0aD0iMS41ODA0MTY1MjU1OTU4NTgyIiBzdHJva2Utb3BhY2l0eT0iMC4wNzY2MTM3MzE1MDMxNzM2MyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTAuMCw3MC42IEw3LjUsNzEuNSBMMTUuMCw3Mi40IEwyMi41LDczLjEgTDMwLjAsNzMuNyBMMzcuNSw3NC4xIEw0NS4wLDc0LjMgTDUyLjUsNzQuMyBMNjAuMCw3NC4xIEw2Ny41LDczLjggTDc1LjAsNzMuMiBMODIuNSw3Mi41IEw5MC4wLDcxLjcgTDk3LjUsNzAuOCBMMTA1LjAsNjkuOCBMMTEyLjUsNjguOCBMMTIwLjAsNjcuOSBMMTI3LjUsNjcuMCBMMTM1LjAsNjYuMSBMMTQyLjUsNjUuNSBMMTUwLjAsNjQuOSBMMTU3LjUsNjQuNiBMMTY1LjAsNjQuNCBMMTcyLjUsNjQuNSBMMTgwLjAsNjQuNyBMMTg3LjUsNjUuMSBMMTk1LjAsNjUuNyBMMjAyLjUsNjYuNCBMMjEwLjAsNjcuMyBMMjE3LjUsNjguMiBMMjI1LjAsNjkuMiBMMjMyLjUsNzAuMiBMMjQwLjAsNzEuMSBMMjQ3LjUsNzIuMCBMMjU1LjAsNzIuOCBMMjYyLjUsNzMuNCBMMjcwLjAsNzMuOSBMMjc3LjUsNzQuMiBMMjg1LjAsNzQuMyBMMjkyLjUsNzQuMiBMMzAwLjAsNzMuOSAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzJhMWEwZSIgc3Ryb2tlLXdpZHRoPSIxLjU5MDY0Mjc1NTAxODUzMzgiIHN0cm9rZS1vcGFjaXR5PSIwLjA3NTcwMTAyMDEzOTY5NDg3IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMC4wLDgzLjEgTDcuNSw4NC4zIEwxNS4wLDg1LjUgTDIyLjUsODYuNSBMMzAuMCw4Ny40IEwzNy41LDg4LjEgTDQ1LjAsODguNSBMNTIuNSw4OC44IEw2MC4wLDg4LjggTDY3LjUsODguNiBMNzUuMCw4OC4yIEw4Mi41LDg3LjUgTDkwLjAsODYuNyBMOTcuNSw4NS43IEwxMDUuMCw4NC42IEwxMTIuNSw4My4zIEwxMjAuMCw4Mi4xIEwxMjcuNSw4MC44IEwxMzUuMCw3OS42IEwxNDIuNSw3OC40IEwxNTAuMCw3Ny40IEwxNTcuNSw3Ni41IEwxNjUuMCw3NS43IEwxNzIuNSw3NS4yIEwxODAuMCw3NS4wIEwxODcuNSw3NC45IEwxOTUuMCw3NS4xIEwyMDIuNSw3NS41IEwyMTAuMCw3Ni4xIEwyMTcuNSw3Ni45IEwyMjUuMCw3Ny45IEwyMzIuNSw3OS4wIEwyNDAuMCw4MC4yIEwyNDcuNSw4MS41IEwyNTUuMCw4Mi43IEwyNjIuNSw4NC4wIEwyNzAuMCw4NS4xIEwyNzcuNSw4Ni4yIEwyODUuMCw4Ny4xIEwyOTIuNSw4Ny45IEwzMDAuMCw4OC40ICIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMWExMDA4IiBzdHJva2Utd2lkdGg9IjEuNzU2MzI1Nzk5MzI3NzcxNyIgc3Ryb2tlLW9wYWNpdHk9IjAuMTU5NzQyMTgyMDUwOTM5MjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0wLjAsMTAwLjcgTDcuNSwxMDAuNyBMMTUuMCwxMDAuNSBMMjIuNSwxMDAuMiBMMzAuMCw5OS44IEwzNy41LDk5LjMgTDQ1LjAsOTguOCBMNTIuNSw5OC4xIEw2MC4wLDk3LjQgTDY3LjUsOTYuNyBMNzUuMCw5NS45IEw4Mi41LDk1LjIgTDkwLjAsOTQuNSBMOTcuNSw5My43IEwxMDUuMCw5My4xIEwxMTIuNSw5Mi41IEwxMjAuMCw5Mi4wIEwxMjcuNSw5MS42IEwxMzUuMCw5MS4yIEwxNDIuNSw5MS4wIEwxNTAuMCw5MC45IEwxNTcuNSw5MS4wIEwxNjUuMCw5MS4xIEwxNzIuNSw5MS4zIEwxODAuMCw5MS43IEwxODcuNSw5Mi4xIEwxOTUuMCw5Mi43IEwyMDIuNSw5My4zIEwyMTAuMCw5NC4wIEwyMTcuNSw5NC43IEwyMjUuMCw5NS40IEwyMzIuNSw5Ni4yIEwyNDAuMCw5Ni45IEwyNDcuNSw5Ny43IEwyNTUuMCw5OC4zIEwyNjIuNSw5OC45IEwyNzAuMCw5OS41IEwyNzcuNSw5OS45IEwyODUuMCwxMDAuMyBMMjkyLjUsMTAwLjUgTDMwMC4wLDEwMC43ICIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMWExMDA4IiBzdHJva2Utd2lkdGg9IjEuNzc4MDc5ODk0NjI4NDA0MiIgc3Ryb2tlLW9wYWNpdHk9IjAuMDU3NzI0NTg0OTUxNTkxODU2IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMC4wLDExMy40IEw3LjUsMTE0LjMgTDE1LjAsMTE1LjAgTDIyLjUsMTE1LjUgTDMwLjAsMTE1LjcgTDM3LjUsMTE1LjcgTDQ1LjAsMTE1LjQgTDUyLjUsMTE0LjkgTDYwLjAsMTE0LjIgTDY3LjUsMTEzLjIgTDc1LjAsMTEyLjEgTDgyLjUsMTEwLjkgTDkwLjAsMTA5LjYgTDk3LjUsMTA4LjIgTDEwNS4wLDEwNi44IEwxMTIuNSwxMDUuNCBMMTIwLjAsMTA0LjEgTDEyNy41LDEwMi45IEwxMzUuMCwxMDEuOCBMMTQyLjUsMTAwLjkgTDE1MC4wLDEwMC4yIEwxNTcuNSw5OS44IEwxNjUuMCw5OS42IEwxNzIuNSw5OS42IEwxODAuMCw5OS44IEwxODcuNSwxMDAuMyBMMTk1LjAsMTAxLjEgTDIwMi41LDEwMi4wIEwyMTAuMCwxMDMuMSBMMjE3LjUsMTA0LjMgTDIyNS4wLDEwNS42IEwyMzIuNSwxMDcuMCBMMjQwLjAsMTA4LjQgTDI0Ny41LDEwOS44IEwyNTUuMCwxMTEuMSBMMjYyLjUsMTEyLjMgTDI3MC4wLDExMy40IEwyNzcuNSwxMTQuMyBMMjg1LjAsMTE1LjAgTDI5Mi41LDExNS40IEwzMDAuMCwxMTUuNyAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFhMTAwOCIgc3Ryb2tlLXdpZHRoPSIzLjExNjA4NDc2NjYzOTYyNyIgc3Ryb2tlLW9wYWNpdHk9IjAuMTQzMjA0MDc1MDYzMzA4NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTAuMCwxMDkuOSBMNy41LDExMC40IEwxNS4wLDExMC45IEwyMi41LDExMS42IEwzMC4wLDExMi40IEwzNy41LDExMy4yIEw0NS4wLDExNC4yIEw1Mi41LDExNS4zIEw2MC4wLDExNi4zIEw2Ny41LDExNy41IEw3NS4wLDExOC42IEw4Mi41LDExOS43IEw5MC4wLDEyMC44IEw5Ny41LDEyMS45IEwxMDUuMCwxMjIuOCBMMTEyLjUsMTIzLjcgTDEyMC4wLDEyNC41IEwxMjcuNSwxMjUuMiBMMTM1LjAsMTI1LjggTDE0Mi41LDEyNi4yIEwxNTAuMCwxMjYuNSBMMTU3LjUsMTI2LjcgTDE2NS4wLDEyNi43IEwxNzIuNSwxMjYuNSBMMTgwLjAsMTI2LjIgTDE4Ny41LDEyNS44IEwxOTUuMCwxMjUuMiBMMjAyLjUsMTI0LjUgTDIxMC4wLDEyMy43IEwyMTcuNSwxMjIuOCBMMjI1LjAsMTIxLjggTDIzMi41LDEyMC43IEwyNDAuMCwxMTkuNiBMMjQ3LjUsMTE4LjUgTDI1NS4wLDExNy40IEwyNjIuNSwxMTYuMiBMMjcwLjAsMTE1LjIgTDI3Ny41LDExNC4xIEwyODUuMCwxMTMuMiBMMjkyLjUsMTEyLjMgTDMwMC4wLDExMS41ICIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMmExYTBlIiBzdHJva2Utd2lkdGg9IjEuOTUwOTI2NDE5Nzk5OTA3OSIgc3Ryb2tlLW9wYWNpdHk9IjAuMTI3OTc4OTA1NzY1MDkxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTAuMCwxMzMuOSBMNy41LDEzMy4yIEwxNS4wLDEzMi4yIEwyMi41LDEzMC45IEwzMC4wLDEyOS41IEwzNy41LDEyOC4wIEw0NS4wLDEyNi41IEw1Mi41LDEyNS4xIEw2MC4wLDEyMy44IEw2Ny41LDEyMi42IEw3NS4wLDEyMS43IEw4Mi41LDEyMS4xIEw5MC4wLDEyMC45IEw5Ny41LDEyMC45IEwxMDUuMCwxMjEuMyBMMTEyLjUsMTIyLjAgTDEyMC4wLDEyMy4wIEwxMjcuNSwxMjQuMiBMMTM1LjAsMTI1LjYgTDE0Mi41LDEyNy4xIEwxNTAuMCwxMjguNiBMMTU3LjUsMTMwLjEgTDE2NS4wLDEzMS40IEwxNzIuNSwxMzIuNiBMMTgwLjAsMTMzLjUgTDE4Ny41LDEzNC4xIEwxOTUuMCwxMzQuNCBMMjAyLjUsMTM0LjMgTDIxMC4wLDEzNC4wIEwyMTcuNSwxMzMuMyBMMjI1LjAsMTMyLjMgTDIzMi41LDEzMS4xIEwyNDAuMCwxMjkuNyBMMjQ3LjUsMTI4LjIgTDI1NS4wLDEyNi43IEwyNjIuNSwxMjUuMiBMMjcwLjAsMTIzLjkgTDI3Ny41LDEyMi43IEwyODUuMCwxMjEuOCBMMjkyLjUsMTIxLjIgTDMwMC4wLDEyMC45ICIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMmExYTBlIiBzdHJva2Utd2lkdGg9IjEuNzM5NTUxMTczNzAwMjg1MyIgc3Ryb2tlLW9wYWNpdHk9IjAuMDU5NTg1ODYxODE4NzM4NzIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0wLjAsMTMxLjMgTDcuNSwxMzEuNSBMMTUuMCwxMzIuMSBMMjIuNSwxMzIuOSBMMzAuMCwxMzQuMCBMMzcuNSwxMzUuMiBMNDUuMCwxMzYuNSBMNTIuNSwxMzcuOCBMNjAuMCwxMzkuMCBMNjcuNSwxNDAuMSBMNzUuMCwxNDEuMSBMODIuNSwxNDEuNyBMOTAuMCwxNDIuMSBMOTcuNSwxNDIuMiBMMTA1LjAsMTQxLjkgTDExMi41LDE0MS40IEwxMjAuMCwxNDAuNSBMMTI3LjUsMTM5LjUgTDEzNS4wLDEzOC4zIEwxNDIuNSwxMzcuMCBMMTUwLjAsMTM1LjcgTDE1Ny41LDEzNC40IEwxNjUuMCwxMzMuMyBMMTcyLjUsMTMyLjQgTDE4MC4wLDEzMS43IEwxODcuNSwxMzEuNCBMMTk1LjAsMTMxLjMgTDIwMi41LDEzMS41IEwyMTAuMCwxMzIuMSBMMjE3LjUsMTMyLjkgTDIyNS4wLDEzNC4wIEwyMzIuNSwxMzUuMiBMMjQwLjAsMTM2LjUgTDI0Ny41LDEzNy44IEwyNTUuMCwxMzkuMCBMMjYyLjUsMTQwLjEgTDI3MC4wLDE0MS4xIEwyNzcuNSwxNDEuNyBMMjg1LjAsMTQyLjEgTDI5Mi41LDE0Mi4yIEwzMDAuMCwxNDEuOSAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFhMTAwOCIgc3Ryb2tlLXdpZHRoPSIxLjQ2OTE5MjkzNzcwNzcyMTMiIHN0cm9rZS1vcGFjaXR5PSIwLjEyNzc3MTc2MzIxMzgzNjM4IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMC4wLDE1My45IEw3LjUsMTUzLjggTDE1LjAsMTUzLjQgTDIyLjUsMTUyLjkgTDMwLjAsMTUyLjMgTDM3LjUsMTUxLjUgTDQ1LjAsMTUwLjYgTDUyLjUsMTQ5LjcgTDYwLjAsMTQ4LjYgTDY3LjUsMTQ3LjUgTDc1LjAsMTQ2LjMgTDgyLjUsMTQ1LjIgTDkwLjAsMTQ0LjEgTDk3LjUsMTQzLjAgTDEwNS4wLDE0Mi4wIEwxMTIuNSwxNDEuMCBMMTIwLjAsMTQwLjIgTDEyNy41LDEzOS42IEwxMzUuMCwxMzkuMCBMMTQyLjUsMTM4LjYgTDE1MC4wLDEzOC40IEwxNTcuNSwxMzguNCBMMTY1LjAsMTM4LjUgTDE3Mi41LDEzOC44IEwxODAuMCwxMzkuMiBMMTg3LjUsMTM5LjggTDE5NS4wLDE0MC42IEwyMDIuNSwxNDEuNCBMMjEwLjAsMTQyLjQgTDIxNy41LDE0My41IEwyMjUuMCwxNDQuNiBMMjMyLjUsMTQ1LjcgTDI0MC4wLDE0Ni45IEwyNDcuNSwxNDguMCBMMjU1LjAsMTQ5LjEgTDI2Mi41LDE1MC4xIEwyNzAuMCwxNTEuMSBMMjc3LjUsMTUxLjkgTDI4NS4wLDE1Mi42IEwyOTIuNSwxNTMuMiBMMzAwLjAsMTUzLjYgIiBmaWxsPSJub25lIiBzdHJva2U9IiMxYTEwMDgiIHN0cm9rZS13aWR0aD0iMi4zMTg1OTAyODMyMjA3ODk0IiBzdHJva2Utb3BhY2l0eT0iMC4wOTkyMTY3MzY1MjUxMTIzNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTAuMCwxNTQuNyBMNy41LDE1NS4xIEwxNS4wLDE1NS44IEwyMi41LDE1Ni43IEwzMC4wLDE1Ny43IEwzNy41LDE1OC45IEw0NS4wLDE2MC4yIEw1Mi41LDE2MS41IEw2MC4wLDE2Mi45IEw2Ny41LDE2NC4yIEw3NS4wLDE2NS41IEw4Mi41LDE2Ni42IEw5MC4wLDE2Ny42IEw5Ny41LDE2OC41IEwxMDUuMCwxNjkuMSBMMTEyLjUsMTY5LjUgTDEyMC4wLDE2OS43IEwxMjcuNSwxNjkuNiBMMTM1LjAsMTY5LjMgTDE0Mi41LDE2OC43IEwxNTAuMCwxNjguMCBMMTU3LjUsMTY3LjAgTDE2NS4wLDE2NS45IEwxNzIuNSwxNjQuNyBMMTgwLjAsMTYzLjQgTDE4Ny41LDE2Mi4wIEwxOTUuMCwxNjAuNyBMMjAyLjUsMTU5LjQgTDIxMC4wLDE1OC4xIEwyMTcuNSwxNTcuMSBMMjI1LjAsMTU2LjEgTDIzMi41LDE1NS40IEwyNDAuMCwxNTQuOCBMMjQ3LjUsMTU0LjUgTDI1NS4wLDE1NC40IEwyNjIuNSwxNTQuNiBMMjcwLjAsMTU1LjAgTDI3Ny41LDE1NS42IEwyODUuMCwxNTYuNSBMMjkyLjUsMTU3LjUgTDMwMC4wLDE1OC42ICIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMWExMDA4IiBzdHJva2Utd2lkdGg9IjEuOTY3NTAzNTc2MjI2NjUxMyIgc3Ryb2tlLW9wYWNpdHk9IjAuMDkzNDMzODcwODY5MDA0MTIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0wLjAsMTc5LjEgTDcuNSwxNzkuMiBMMTUuMCwxNzguOCBMMjIuNSwxNzcuOSBMMzAuMCwxNzYuNiBMMzcuNSwxNzQuOSBMNDUuMCwxNzMuMSBMNTIuNSwxNzEuMCBMNjAuMCwxNjkuMCBMNjcuNSwxNjcuMSBMNzUuMCwxNjUuNSBMODIuNSwxNjQuMiBMOTAuMCwxNjMuMyBMOTcuNSwxNjIuOSBMMTA1LjAsMTYzLjAgTDExMi41LDE2My42IEwxMjAuMCwxNjQuNiBMMTI3LjUsMTY2LjAgTDEzNS4wLDE2Ny44IEwxNDIuNSwxNjkuNyBMMTUwLjAsMTcxLjcgTDE1Ny41LDE3My43IEwxNjUuMCwxNzUuNSBMMTcyLjUsMTc3LjEgTDE4MC4wLDE3OC4zIEwxODcuNSwxNzkuMCBMMTk1LjAsMTc5LjIgTDIwMi41LDE3OS4wIEwyMTAuMCwxNzguMiBMMjE3LjUsMTc3LjEgTDIyNS4wLDE3NS41IEwyMzIuNSwxNzMuNyBMMjQwLjAsMTcxLjcgTDI0Ny41LDE2OS43IEwyNTUuMCwxNjcuNyBMMjYyLjUsMTY2LjAgTDI3MC4wLDE2NC42IEwyNzcuNSwxNjMuNSBMMjg1LjAsMTYzLjAgTDI5Mi41LDE2Mi45IEwzMDAuMCwxNjMuMyAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFhMTAwOCIgc3Ryb2tlLXdpZHRoPSIyLjM4NTQ4MTI1NDgxODIxOCIgc3Ryb2tlLW9wYWNpdHk9IjAuMTU5NzY5NDA5MDU1NTI0NzgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxlbGxpcHNlIGN4PSI3MCIgY3k9Ijk1IiByeD0iMTAuMCIgcnk9IjE1LjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzE1MGMwNiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMC4xNCIvPjxlbGxpcHNlIGN4PSI3MCIgY3k9Ijk1IiByeD0iNi44IiByeT0iMTAuMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTUwYzA2IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1vcGFjaXR5PSIwLjEyIi8+PGVsbGlwc2UgY3g9IjcwIiBjeT0iOTUiIHJ4PSIzLjgiIHJ5PSI1LjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzE1MGMwNiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMC4xMCIvPjxlbGxpcHNlIGN4PSI3MCIgY3k9Ijk1IiByeD0iMS41IiByeT0iMi4yIiBmaWxsPSJub25lIiBzdHJva2U9IiMxNTBjMDYiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLW9wYWNpdHk9IjAuMDgiLz48ZWxsaXBzZSBjeD0iMjMwIiBjeT0iNDAiIHJ4PSI3LjAiIHJ5PSIxMC41IiBmaWxsPSJub25lIiBzdHJva2U9IiMxNTBjMDYiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLW9wYWNpdHk9IjAuMTQiLz48ZWxsaXBzZSBjeD0iMjMwIiBjeT0iNDAiIHJ4PSI0LjgiIHJ5PSI3LjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzE1MGMwNiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMC4xMiIvPjxlbGxpcHNlIGN4PSIyMzAiIGN5PSI0MCIgcng9IjIuNyIgcnk9IjQuMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTUwYzA2IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1vcGFjaXR5PSIwLjEwIi8+PGVsbGlwc2UgY3g9IjIzMCIgY3k9IjQwIiByeD0iMS4xIiByeT0iMS42IiBmaWxsPSJub25lIiBzdHJva2U9IiMxNTBjMDYiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLW9wYWNpdHk9IjAuMDgiLz48L3N2Zz4="); background-size:150px 90px; background-repeat:repeat; background-color:var(--accent); } /* bandeau de lianes suspendues sous l'en-tête du thème Zen */ .zen-vines{width:100%;overflow:hidden;line-height:0;pointer-events:none;margin:-2px 0 6px;background:var(--bg)} .zen-vines-svg{display:block;width:100%;height:clamp(64px,11vw,140px)} .zen-vines-svg .vine-sway{transform-box:view-box} .zen-vines.mood-on .zen-vines-svg .vine-sway{animation:zenVineSway var(--dur,5s) ease-in-out infinite;animation-delay:var(--del,0s)} @keyframes zenVineSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}} @media(prefers-reduced-motion:reduce){.zen-vines.mood-on .zen-vines-svg .vine-sway{animation:none}} /* quand on déplie Jour/Semaine/Mois…, la barre remonte légèrement pour passer par-dessus le bas du bandeau de lianes (les feuilles disparaissent derrière, au lieu de laisser un espace vide entre les deux) */ :root[data-season="zen"] .navcollapse[open]{position:relative;z-index:3;margin-top:-24px} :root[data-cozy="on"][data-season]{--c1:#7A2E1E;--c2:#D98A3D;--c3:#FBEAD2;--sun:#D98A3D} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:color-mix(in srgb,var(--c1) 24%,#0d0d0d); --surface:color-mix(in srgb,var(--c1) 34%,#0d0d0d); --ink:color-mix(in srgb,var(--c3) 85%,#fff); --muted:color-mix(in srgb,var(--ink) 62%,var(--bg)); --line:color-mix(in srgb,var(--c1) 55%,#0d0d0d); --soft:color-mix(in srgb,var(--c1) 44%,#0d0d0d); --accent:color-mix(in srgb,var(--c2) 60%,#fff); --accent-ink:#1A0D08; --sun:var(--accent); --today-bg:var(--surface); --ok:color-mix(in srgb,var(--c3) 75%,var(--c1)); --ok-bg:color-mix(in srgb,var(--c1) 55%,#0d0d0d); --ready-bg:color-mix(in srgb,var(--c2) 35%,#0d0d0d); --ready-ink:color-mix(in srgb,var(--c2) 40%,#fff); --danger:#FF8F80; --st-todo:#FF8F80; --st-todo-bg:color-mix(in srgb,#B3261E 45%,#0d0d0d); --st-todo-ink:#FFD9D2; --st-material:#F0A85C; --st-material-bg:color-mix(in srgb,#C97A2B 45%,#0d0d0d); --st-material-ink:#FFE3C2; --st-print:#7FB2E0; --st-print-bg:color-mix(in srgb,#2B6CB0 45%,#0d0d0d); --st-print-ink:#D9EAFA; --st-ready:#7FCB9C; --st-ready-bg:color-mix(in srgb,#2F7D4F 45%,#0d0d0d); --st-ready-ink:#D9F2E1; --hero:color-mix(in srgb,var(--c1) 75%,#000); --hero-sub:color-mix(in srgb,var(--c3) 70%,var(--c1)); --tab-track:rgba(0,0,0,.35); --tab-act-ink:var(--c1); --cs:42%; --cl:24%; --ts:82%; --tl:88%; --bl:58%; --bs:68%; --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.30); --cellbg:var(--surface); } } :root[data-theme="dark"]{ --bg:color-mix(in srgb,var(--c1) 24%,#0d0d0d); --surface:color-mix(in srgb,var(--c1) 34%,#0d0d0d); --ink:color-mix(in srgb,var(--c3) 85%,#fff); --muted:color-mix(in srgb,var(--ink) 62%,var(--bg)); --line:color-mix(in srgb,var(--c1) 55%,#0d0d0d); --soft:color-mix(in srgb,var(--c1) 44%,#0d0d0d); --accent:color-mix(in srgb,var(--c2) 60%,#fff); --accent-ink:#1A0D08; --sun:var(--accent); --today-bg:var(--surface); --ok:color-mix(in srgb,var(--c3) 75%,var(--c1)); --ok-bg:color-mix(in srgb,var(--c1) 55%,#0d0d0d); --ready-bg:color-mix(in srgb,var(--c2) 35%,#0d0d0d); --ready-ink:color-mix(in srgb,var(--c2) 40%,#fff); --danger:#FF8F80; --st-todo:#FF8F80; --st-todo-bg:color-mix(in srgb,#B3261E 45%,#0d0d0d); --st-todo-ink:#FFD9D2; --st-material:#F0A85C; --st-material-bg:color-mix(in srgb,#C97A2B 45%,#0d0d0d); --st-material-ink:#FFE3C2; --st-print:#7FB2E0; --st-print-bg:color-mix(in srgb,#2B6CB0 45%,#0d0d0d); --st-print-ink:#D9EAFA; --st-ready:#7FCB9C; --st-ready-bg:color-mix(in srgb,#2F7D4F 45%,#0d0d0d); --st-ready-ink:#D9F2E1; --hero:color-mix(in srgb,var(--c1) 75%,#000); --hero-sub:color-mix(in srgb,var(--c3) 70%,var(--c1)); --tab-track:rgba(0,0,0,.35); --tab-act-ink:var(--c1); --cs:42%; --cl:24%; --ts:82%; --tl:88%; --bl:58%; --bs:68%; --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.30); --cellbg:var(--surface); } /* grille Horaire : table.pt dans .hgrid/.tscroll, même habillage que jour/semaine */ .hgrid table.pt{min-width:760px} .hgrid .rh .rhtime{display:flex;align-items:center;gap:1px;margin-top:2px} .hgrid .rh .rhti{border:0;background:none;padding:0;width:62px;font:600 var(--fs-sm) var(--label);color:var(--time-ink)} .hgrid .rh .rhti::-webkit-calendar-picker-indicator{opacity:.55;width:10px;height:10px;filter:none;margin-left:1px;padding:0} .pt tr.brkrow td{background:var(--soft);padding:0} .pt tr.brkrow input{width:100%;border:0;background:transparent;font:700 var(--fs-sm) var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:7px 10px} .subtheme-fld input.tplsub-in{width:100%;border:0;background:none;padding:0;font:700 var(--fs-base) var(--display);letter-spacing:.02em;text-transform:uppercase;line-height:1.3;color:#000;text-align:center} .subtheme-fld input.tplsub-in::placeholder{color:#000;opacity:.4;text-transform:none;font-family:var(--body);font-weight:600;letter-spacing:0} .tplgrip{position:absolute;top:3px;right:3px;z-index:2;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-field);font-size:var(--fs-sm);line-height:1;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;color:inherit;opacity:.55;background:rgba(255,255,255,.35)} .tplgrip:hover{opacity:.9} .pt td.pcell.tpl-dragging{opacity:.55} .pt td.pcell.tpl-drag-over{outline:2px dashed var(--accent);outline-offset:-2px} .tip2{margin:0 0 10px;color:var(--muted);font-size:var(--fs-base)} .sect{font:800 var(--fs-lg) var(--display);margin:22px 0 10px} .subs{display:flex;flex-direction:column;gap:8px;max-width:760px} .srow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-left:8px solid hsl(var(--h) 62% 55%);border-radius:var(--r-card);padding:8px 10px} .srow .sn{flex:1 1 180px;min-width:0;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-field);padding:8px 10px;font-weight:700} .hues{display:flex;gap:5px;align-items:center;flex-wrap:wrap} .hd{width:22px;height:22px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);padding:0} .hd.on{box-shadow:0 0 0 2px var(--ink)} .hues input[type=color]{width:30px;height:26px;padding:0;border:1px solid var(--line);border-radius:var(--r-field);background:none} .subrow input[type=color]{width:100%;height:36px;padding:2px;border:1px solid var(--line);border-radius:var(--r-field);background:none} .todo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:10px 12px;margin-top:16px} .todo h4{margin:0 0 6px;font:800 var(--fs-base) var(--display)} .todo ul{list-style:none;margin:0;padding:0} .todo li{display:flex;align-items:flex-start;gap:8px;padding:4px 0} .todo li input[type=checkbox]{width:18px;height:18px;border-radius:50%;accent-color:var(--accent);flex:none;margin-top:8px} .tdt{flex:1;min-width:0;border:0;border-bottom:1px solid transparent;background:transparent;padding:6px 2px;resize:none;overflow:hidden;font:inherit;line-height:1.35;white-space:pre-wrap;word-break:break-word;display:block} .tdt:focus{outline:none} .todo li.done .tdt{text-decoration:line-through;color:var(--muted)} .tdx{border:0;background:none;color:var(--muted);font-size:var(--fs-lg);width:26px;height:26px;border-radius:var(--r-field);flex:none;margin-top:2px} .tdx:hover{background:var(--soft);color:var(--danger)} .tdadd{width:100%;margin-top:6px;border:1px dashed var(--line);background:var(--bg);border-radius:var(--r-field);padding:8px 10px} .tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px} .tcol{min-width:0} .tcol .todo{margin-top:0;min-height:140px} .tcol.we .todo{background:var(--soft)} .tcol.today .todo{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)} /* mini to-do "carnet à anneaux" de la vue Jour : la même reliure que les tableaux, mais en petit format posé au-dessus des cours — et qui se replie tout seul (une seule ligne, discrète) dès qu'il n'y a plus rien à cocher, pour ne pas encombrer une fois tout fait. */ .todo.mini{max-width:320px;margin:12px 0} .todo.mini.collapsed{padding-top:9px;padding-bottom:9px} .todo-collapsed-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px} .todo-collapsed-head b{font:800 var(--fs-base) var(--display);opacity:.75} .todo-done-msg{font:600 var(--fs-sm) var(--body);color:var(--st-ready-pop);white-space:nowrap} .thd{display:flex;align-items:baseline;gap:8px;margin:0 2px 6px;flex-wrap:wrap} .thd .dn{font:800 var(--fs-lg) var(--display)} .thd .dd{font-size:var(--fs-base);color:var(--muted)} .thd em{font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;font-style:normal;font-weight:700;color:var(--accent)} .thd .cnt{margin-left:auto;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:1px 8px;font-size:var(--fs-sm)} .clsbtn{border:1px dashed color-mix(in srgb,var(--hero-ink) 55%,transparent);background:transparent;color:var(--hero-sub);border-radius:999px;padding:3px 12px;font:500 var(--fs-base) var(--body);letter-spacing:0} .clsbtn:hover{background:rgba(255,255,255,.15)} .crow2{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-card);padding:8px 10px} .crow2.here{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .crow2 .cn{display:flex;gap:6px;flex:1 1 220px;min-width:0} .crow2 .cn input{border:1px solid var(--line);background:var(--bg);border-radius:var(--r-field);padding:7px 9px;min-width:0} .crow2 .cn input:first-child{flex:2}.crow2 .cn input:last-child{flex:1;max-width:120px} .crow2 .ca{display:flex;align-items:center;gap:10px} .here-t{font:700 var(--fs-sm) var(--body);color:var(--accent)} .arch{display:flex;align-items:center;gap:5px;font-size:var(--fs-base)} .clist{display:flex;flex-direction:column;gap:8px} .cpy{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-base)} .foot{margin:34px 0 48px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:center;background:none;border:0;padding:0;opacity:.85} .foot:hover{opacity:1} .foot{position:relative} .foot:has(.fcorner){padding:0 96px 6px 0;min-height:64px} .fcorner{position:absolute;right:0;bottom:0;width:84px;height:auto;pointer-events:none} @media (max-width:760px){.fcorner{display:none}.foot:has(.fcorner){padding:0}} .foot .btn,.foot .cozybtn,.foot .seasel select{background-color:transparent;border:1px solid var(--line);box-shadow:none;color:var(--muted);font-size:var(--fs-sm);font-weight:600;height:var(--field-h-sm);padding:0 12px;display:inline-flex;align-items:center;box-sizing:border-box} .foot .seasel select{padding-right:28px} .foot .btn:hover,.foot .cozybtn:hover,.foot .seasel select:hover{background-color:var(--soft);color:var(--ink)} .foot .opts>summary{background:transparent;border:1px solid var(--line);color:var(--muted);font-size:var(--fs-base);font-weight:600;padding:6px 10px;border-radius:var(--r-field)} .foot .opts .oc{top:auto;bottom:calc(100% + 6px);right:0;min-width:230px} .foot .opts .oc .btn{color:var(--ink);font-size:var(--fs-base);text-align:left;border:1px solid var(--line)} .foot .seasel{color:var(--muted);font-weight:600} .foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;align-items:start;justify-content:stretch;opacity:1} .foot .fgrp{border:1px solid var(--line);border-radius:var(--r-card);padding:10px 12px;background:color-mix(in srgb,var(--surface) 60%,transparent)} .foot .fgrp h4{margin:0 0 8px;font:800 var(--fs-sm) var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .ibtn.md{width:var(--field-h);height:var(--field-h);font-size:var(--fs-lg)} .ibtn.lg{width:var(--field-h-lg);height:var(--field-h-lg);font-size:var(--fs-xl)} .fldrow2 input[type=text]{flex:1 1 200px;min-width:0;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-field);padding:7px 9px} .foot .grp{display:flex;gap:8px 10px;align-items:center;flex-wrap:wrap} .foot .ftag{flex-basis:100%;margin:2px 0 0;text-align:center;color:var(--muted);font:italic 600 14px var(--display)} .foot .ftag:empty{display:none} .hub{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px;padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)} .hub .hubt{font:800 var(--fs-lg) var(--display);margin:0 6px 0 4px} .hub button:not(.btn){border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:7px 14px;font-weight:700;color:var(--ink)} .hub .ibtn{padding:0;width:var(--field-h);height:var(--field-h);border-radius:999px} .hub button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:transparent} .hub .clsbtn{margin-left:auto;border:1px dashed var(--line);background:var(--bg);color:var(--muted);border-radius:999px;padding:7px 14px;font:700 var(--fs-base) var(--body)} .acct{margin:6px 0 0;font-size:var(--fs-sm);color:var(--muted);max-width:260px} .vacb{margin:0 0 10px;padding:9px 14px;border-radius:var(--r-card);background:color-mix(in srgb,var(--c2) 28%,var(--surface));border:1px solid color-mix(in srgb,var(--c2) 55%,var(--line));font-size:var(--fs-base)} .vacb span{color:var(--muted)} .wh.vac{background:color-mix(in srgb,var(--c2) 28%,var(--surface))} .wh.vac::after{content:"Vacances";display:block;font-size:var(--fs-sm);font-weight:700;opacity:.75} .mcell.vac{background:color-mix(in srgb,var(--c2) 22%,var(--surface))} .mcell.vac .mbar,.mcell.vac .mcnt,.mcell.vac .mtx{display:none} .mvac{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--muted)} .rte a,.card a,.mnote a,.note a,main a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:2px} #rtb .lnkrow{display:flex;gap:4px;flex-basis:100%} #rtb .lnkrow[hidden]{display:none} #rtb .lnkrow input{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--r-field);padding:5px 8px;background:var(--bg);color:var(--ink)} #rtb .lnkrow button{background:var(--accent);color:var(--accent-ink);padding:0 12px} .obcat,.obfil{display:flex;flex-wrap:wrap;gap:6px} .obcat .oc{margin:0;text-transform:none;letter-spacing:0} .obcat input{position:absolute;opacity:0} .obcat span,.obfil button{display:inline-block;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 13px;font-size:var(--fs-base);font-weight:700;color:var(--ink);cursor:pointer} .obcat input:checked+span,.obfil button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:transparent} .obcat input:focus-visible+span{outline:none} .obfil{margin:4px 0 8px} .obh{gap:6px;flex-wrap:wrap}.obh b{margin-right:auto}.obh .obt{margin-right:0;font-size:var(--fs-sm);font-weight:800;border-radius:99px;padding:1px 9px;background:var(--soft);color:var(--ink)} .obt.c-par{background:color-mix(in srgb,var(--c3) 35%,var(--surface))} .obed{padding:3px 10px;font-size:var(--fs-sm)} .obh span:last-child{display:flex;gap:6px;align-items:center;margin-left:auto} .obact{display:flex;gap:8px;margin-top:6px} .obs.edit{border-color:var(--accent)} #obe-t{width:100%;border:1px solid var(--line);border-radius:var(--r-field);background:var(--surface);padding:8px;color:var(--ink)} .sobs{padding:5px 10px;font-size:var(--fs-sm);white-space:nowrap} .strow select{max-width:120px} .obs{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:8px 12px;margin:8px 0} .obs p{margin:4px 0 0;white-space:normal;overflow-wrap:anywhere} .obh{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-base);color:var(--muted)} #ob-t{width:100%;border:1px solid var(--line);border-radius:var(--r-field);background:var(--bg);padding:8px;color:var(--ink)} .mcell{position:relative} .wkn{position:absolute;top:6px;right:8px;font-size:var(--fs-sm);font-weight:700;color:var(--muted);opacity:.8} .bdb{margin:0 0 10px;padding:9px 14px;border-radius:var(--r-card);background:color-mix(in srgb,var(--c3) 22%,var(--surface));border:1px solid color-mix(in srgb,var(--c3) 50%,var(--line));font-size:var(--fs-base)} .wbd{margin-left:4px;font-size:var(--fs-sm);font-weight:800;background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:1px 7px} .mbd{display:block;font-size:var(--fs-sm);font-weight:800;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .stbd{width:128px;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-field);padding:5px 6px;color:var(--ink);font-size:var(--fs-sm)} @media(max-width:560px){.strow{flex-wrap:wrap}} .agn{font-size:var(--fs-sm);font-weight:800;background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:1px 9px;margin-left:6px} .fldrow{position:relative;display:flex;align-items:center;gap:8px;padding:8px 40px 8px 12px;border:1px solid var(--line);border-radius:var(--r-field);background:var(--surface);margin-bottom:6px} .fldrow .cm{position:absolute} .helpb{display:flex;flex-direction:column;gap:8px}.hlp{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);padding:0 12px}.hlp summary{cursor:pointer;font-weight:800;padding:10px 0}.hlp>div{padding:0 0 10px;font-size:var(--fs-base);line-height:1.5}.hlp p{margin:0 0 8px}.hlp ol{margin:0 0 8px;padding-left:20px} .agbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px} .agbar .btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)} .agedit{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;margin-bottom:14px} .agedit input[type=text]{border:1px solid var(--line);border-radius:var(--r-field);padding:7px 10px;background:var(--bg);color:var(--ink);width:100%;max-width:360px} .agc{display:flex;gap:6px;align-items:center;margin:0 0 6px} .agpage{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sheet);padding:16px} .agtitle{margin:0 0 12px;font:800 var(--fs-xl) var(--display);color:var(--accent)} .agenda{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start} .agcol{display:flex;flex-direction:column;gap:14px;min-width:0} .agtop{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}.agtop .agtitle{margin:0} .agday header{font-size:var(--fs-lg);padding:10px 14px} .agrow{padding:8px 14px 10px!important} .agpage{display:flex;flex-direction:column;height:var(--agh,auto);box-sizing:border-box;overflow:hidden} .agpage .agenda{flex:1;min-height:0;align-items:stretch;grid-template-rows:minmax(0,1fr)} .agpage .agcol{min-height:0} .agpage .agday{flex:1 1 0;min-height:0;display:flex;flex-direction:column} .agpage .agday header{flex:none;padding:6px 12px;font-size:var(--fs-base)} .agpage .agrow{flex:1 1 0;min-height:0;padding:4px 12px 5px!important} .agpage .agrow label{padding-top:3px} .agpage .agrow .rte{min-height:0!important;height:100%;overflow:auto;font-size:var(--fs-base);line-height:26px} .agpage.agfs .agrow .rte{font-size:var(--fs-xl)} .agpage.agfs{position:fixed;inset:0;z-index:200;border-radius:0;overflow:hidden;padding:16px 24px;background:var(--bg)} .agpage.agfs{height:100vh} [data-vdev] .banner,[data-vdev] main>.eyebrow{display:none} [data-vdev] .agbar{margin-bottom:8px} .agpage.agfs .agday header{font-size:var(--fs-xl)} @media(max-width:760px){.agenda{grid-template-columns:1fr}} .agday{border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg);overflow:hidden} .agday.today{border-color:var(--accent)} .agday header{background:transparent;border-bottom:1px solid var(--line);padding:8px 12px;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline} .agday header span{color:var(--muted)}.agday header em{font-style:normal;font-size:var(--fs-sm);font-weight:700;color:var(--accent);margin-left:auto} .agrow{padding:6px 12px 8px;border-top:1px solid var(--line);display:grid;grid-template-columns:82px minmax(0,1fr);gap:10px;align-items:start} .agrow label{display:block;font:700 var(--fs-sm) var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:6px;padding-right:6px} .agday.one{border:0;background:transparent}.agday.one .agrow:first-child{border-top:0} .agbox .agenda{margin-top:8px}.agbox .tip2{margin:8px 0 0} /* toujours blanc crème ici, quel que soit le thème : ce sont les cases que les élèves recopient depuis le tableau projeté, il faut un fond neutre et lisible dans tous les cas */ .agrow .rte{min-height:44px;line-height:26px;border-radius:var(--r-field);padding:2px 4px;background:#FFFBF3;color:#2A2018} .agrow .rte:empty::before{color:#8A7A66;opacity:.8} .mcddtag{display:inline-flex;align-items:center;font-size:var(--fs-sm);font-weight:800;border-radius:99px;padding:1px 9px;background:color-mix(in srgb,var(--danger) 16%,var(--surface));color:var(--danger);letter-spacing:.02em;vertical-align:middle} .mcddfld{background:color-mix(in srgb,var(--danger) 6%,transparent);border-radius:var(--r-field);padding:10px 12px 4px} .mcddfld label{font-weight:800} .mesurestag{display:inline-flex;align-items:center;font-size:var(--fs-sm);font-weight:800;border-radius:99px;padding:1px 9px;background:color-mix(in srgb,var(--ok) 18%,var(--surface));color:var(--ok);letter-spacing:.02em;vertical-align:middle} .mesuresfld{background:color-mix(in srgb,var(--ok) 7%,transparent);border-radius:var(--r-field);padding:10px 12px 4px;margin-top:8px} .mesuresfld label{font-weight:800} .doctip{background:var(--soft);border-radius:var(--r-field);padding:8px 12px;font-size:var(--fs-base)} .docact{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px} .docact .btn{padding:6px 10px;font-size:var(--fs-sm)} .docfolder{background:var(--surface);border:1.5px solid var(--line);border-left:8px solid hsl(var(--h,0) 62% 55%);border-radius:var(--r-card);padding:4px 14px 14px;margin-bottom:12px} .docfolder:not([style*="--h"]){border-left-color:var(--line)} .docfolder summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 0;font-family:var(--display);font-weight:700} .docfolder summary::-webkit-details-marker{display:none} .docfolder .dfname{flex:1;font-size:var(--fs-lg)} .docfolder .dfcount{font-family:var(--label);font-size:var(--fs-sm);font-weight:500;letter-spacing:.04em;color:var(--muted);background:var(--soft);border-radius:999px;padding:2px 10px} /* ---------- "Documents" : couverture "Mes recettes" + carnet à pages ---------- La couverture reproduit l'image fournie par l'utilisatrice (rayures, reliure dorée, titre arqué, bol de nouilles, "2026-2027") ; cliquer dessus ouvre un carnet à pages blanches (reliure noire au centre) où s'écrivent, au fil du temps, tous les liens/pièces jointes ajoutés dans les planifications Jour/Semaine/Mois/Année. */ /* .rc-wrap n'est jamais rogné (contrairement à .recipe-cover, dont overflow:hidden arrondit les coins) : exactement le principe de .ringbook/.ringmark pour le tableau — la moitié de chaque anneau doit rester visible à gauche de la couverture, donc les anneaux ne peuvent pas vivre dans un élément qui se rogne lui-même. */ .rc-wrap{position:relative;max-width:420px;margin:10px auto 22px;padding-left:25px} .rc-wrap::before{ /* z-index:2 : passe par-dessus .rc-stripes (0) et .rc-content (1), sinon la partie de l'anneau qui déborde sur la couverture se fait recouvrir par les rayures/le texte au lieu de rester visible par-dessus. */ /* anneaux ≈ 20 % plus petits (largeur --rcw) et deux fois moins nombreux : le dessin (72×50) est posé en haut d'une tuile 72×125, le vide en dessous double l'écart. Même débord sur la couverture qu'avant (left = pad − w/3). */ --rcw:60px; content:"";position:absolute;z-index:2;left:calc(var(--rc-pad,25px) - var(--rcw) / 3);top:10px;bottom:10px;width:var(--rcw);pointer-events:none; background-repeat:repeat-y;background-size:var(--rcw) calc(var(--rcw) * 125 / 72);background-position:0 0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 125'%3E%3Cdefs%3E%3ClinearGradient id='rg3' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFF8DC'/%3E%3Cstop offset='0.3' stop-color='%23F3C94A'/%3E%3Cstop offset='0.62' stop-color='%23C8961A'/%3E%3Cstop offset='1' stop-color='%237A5A10'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='36' cy='45' rx='28' ry='4' fill='%23000000' opacity='0.16'/%3E%3Cpath d='M8,40 Q36,14 64,40' fill='none' stroke='url(%23rg3)' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M13,31 Q36,6 59,31' fill='none' stroke='url(%23rg3)' stroke-width='8' stroke-linecap='round'/%3E%3Crect x='4' y='35' width='8' height='8' rx='1.5' fill='%232a1d12'/%3E%3Crect x='60' y='35' width='8' height='8' rx='1.5' fill='%232a1d12'/%3E%3C/svg%3E"); } .recipe-cover{position:relative;border-radius:20px;overflow:hidden;cursor:pointer;box-shadow:0 14px 34px rgba(70,35,10,.22);border:1px solid rgba(0,0,0,.08);min-height:500px;display:flex} .recipe-cover:hover{box-shadow:0 18px 40px rgba(70,35,10,.28)} .recipe-cover:focus-visible{outline:none} .rc-stripes{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,#DEC5A4 0 32px,#F2E6D5 32px 64px);z-index:0} .rc-content{position:relative;z-index:1;flex:1;text-align:center;padding:34px 26px 40px 34px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px} .rc-title{width:100%;max-width:300px;height:auto;overflow:visible} .rc-title text{fill:var(--pop-red);font-family:var(--display);font-size:38px;letter-spacing:.01em} .rc-bowl{width:112px;height:112px;margin:2px 0} .rc-sub{font:700 28px var(--script);color:var(--pop-red);margin:2px 0 0} @media(max-width:480px){.rc-wrap{padding-left:19px;--rc-pad:19px}.rc-wrap::before{--rcw:46px}.recipe-cover{min-height:440px}.rc-content{padding:28px 18px 32px 26px}.rc-bowl{width:92px;height:92px}.rc-sub{font-size:24px}} .dn-wrap{max-width:900px;margin:0 auto} .dn-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px} .dn-top .tdadd{flex:1;min-width:200px;margin-top:0} .dn-book{display:flex;align-items:stretch;gap:8px} .dn-nav{flex:none;align-self:center;width:var(--field-h);height:var(--field-h);border-radius:50%;border:1.5px solid var(--line);background:var(--surface);font-size:var(--fs-lg);color:var(--ink)} .dn-nav:disabled{opacity:.3} .dn-spread{flex:1;display:flex;min-width:0;background:#FDFBF6;border-radius:var(--r-sharp);box-shadow:0 10px 26px rgba(40,25,10,.16);position:relative;min-height:360px} .dn-page{flex:1;min-width:0;padding:26px 22px;display:flex;flex-direction:column;gap:10px} .dn-spine{flex:none;width:22px;background-image:repeating-linear-gradient(180deg,transparent 0 8px,#2a2a2a 8px 11px,transparent 11px 19px);background-position:center;position:relative} .dn-spine::before,.dn-spine::after{content:"";position:absolute;top:0;bottom:0;width:6px;background:linear-gradient(90deg,rgba(0,0,0,.08),transparent)} .dn-spine::before{left:0} .dn-spine::after{right:0;transform:scaleX(-1)} .dn-item{display:flex;align-items:flex-start;gap:8px} .dn-link{display:flex;align-items:flex-start;gap:8px;flex:1;min-width:0;text-decoration:none;color:inherit} .dn-dot{flex:none;width:10px;height:10px;border-radius:50%;margin-top:6px;background:hsl(var(--h,0) 62% 55%)} .dn-dot-none{background:var(--line)} .dn-txt{flex:1;min-width:0;font-family:var(--label);line-height:1.3} .dn-txt b{display:block;font-size:var(--fs-lg);color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px} .dn-link:hover .dn-txt b{text-decoration-color:var(--accent)} .dn-txt i{display:block;font-style:normal;font-family:var(--body);font-size:var(--fs-sm);color:var(--muted)} .dn-go{flex:none;border:0;background:var(--soft);color:var(--muted);width:24px;height:24px;border-radius:var(--r-field);font-size:var(--fs-base);margin-top:3px} .dn-go:hover{background:var(--line);color:var(--ink)} .dn-empty{font:italic 14px var(--body);color:var(--muted);margin:auto 0} .dn-pg{text-align:center;margin-top:10px} @media(max-width:640px){.dn-book{flex-direction:column}.dn-spread{flex-direction:column}.dn-spine{width:auto;height:14px;background-image:repeating-linear-gradient(90deg,transparent 0 8px,#2a2a2a 8px 11px,transparent 11px 19px)}.dn-nav{align-self:center}} .sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px} .scard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;display:flex;flex-direction:column;gap:6px} .sch{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-lg)}.sch span{font-size:var(--fs-sm);color:var(--muted)} .sct{display:flex;flex-wrap:wrap;gap:4px}.sct .obt{font-size:var(--fs-sm);font-weight:800;border-radius:99px;padding:1px 9px;background:var(--soft)} .scl{margin:0;font-size:var(--fs-base);flex:1}.scl i{font-style:normal;font-weight:700;color:var(--muted);margin-right:4px} .hwl{display:block;margin-top:2px;font-size:var(--fs-sm);opacity:.85;overflow-wrap:anywhere;white-space:normal} .bkb{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.bkb span{flex:1 1 260px;color:var(--ink)} .srow .tone,.subrow .tone{border:1px solid var(--line);background-color:var(--bg);border-radius:var(--r-field);padding:0 28px 0 10px;color:var(--ink);font-size:var(--fs-sm);width:100%;height:var(--field-h-sm);min-width:0;box-sizing:border-box} .mhw{display:block;font-size:var(--fs-sm);font-weight:800;color:var(--muted)} .wkl{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px} .wkl li{font-size:var(--fs-base)} .ymo{margin-bottom:8px} .ygrid{align-items:start;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px} .ywk{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:10px 12px;display:flex;flex-direction:column;gap:4px;color:var(--ink)} .ywk:hover{border-color:var(--accent)}.ywk.today{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)} .ywk.vac{background:color-mix(in srgb,var(--c2) 22%,var(--surface))} .ywk .yh{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-base)}.ywk .yh span{color:var(--muted)} .ywk .yv{font-style:normal;font-size:var(--fs-sm);font-weight:800;color:var(--accent)} .ywk .yi{font-size:var(--fs-sm);line-height:1.35;overflow-wrap:anywhere}.ywk .yi i{font-style:normal;font-weight:700;color:var(--muted);margin-right:3px}.ywk .yi.none{color:var(--muted)} .msubgrid{display:flex;flex-direction:column;gap:14px} .msubwk{width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sheet);padding:16px 20px;display:flex;flex-direction:column;gap:10px;color:var(--ink)} .msubwk:hover{border-color:var(--accent)}.msubwk.today{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)} .msubwk.vac{background:color-mix(in srgb,var(--c2) 22%,var(--surface))} .msubwk .yh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:800 var(--fs-lg) var(--display)}.msubwk .yh span{color:var(--muted);font:500 var(--fs-base) var(--body)} .msubwk .yv{font-style:normal;font-size:var(--fs-sm);font-weight:800;color:var(--accent)} .msubf{border-top:1px solid var(--line);padding-top:8px} .msubf:first-of-type{border-top:0;padding-top:0} .msubf b{display:block;font:700 var(--fs-sm) var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:3px} .msubf p{margin:0;font-size:var(--fs-base);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere} .msubf p.none{color:var(--muted);font-style:italic} .hwl i{font-style:normal;font-weight:700} .mcell{min-height:130px;gap:4px} .mcell.sel{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)} .mhd{display:flex;justify-content:space-between;align-items:center;gap:4px} .mcell .wkn{position:static} .mtags{display:flex;flex-wrap:wrap;gap:3px} .mtag{font-size:var(--fs-sm);font-weight:800;border-radius:99px;padding:1px 7px;background:var(--soft);color:var(--ink);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} .mtag.vac{background:color-mix(in srgb,var(--c2) 45%,var(--surface))} .mtag.bd{background:var(--accent);color:var(--accent-ink)} .mlines{display:flex;flex-direction:column;gap:2px;min-width:0} .ml{display:flex;gap:4px;align-items:center;font-size:var(--fs-sm);line-height:1.3;min-width:0;white-space:nowrap;overflow:hidden;color:var(--ink)} .ml i{flex:none;width:8px;height:8px;border-radius:50%;background:hsl(var(--h) 62% 50%);border:2px solid hsl(var(--h) 62% 50%)} .ml i{padding:0;box-sizing:content-box}.ml i.st-todo{background:transparent}.ml i.st-material{border-radius:var(--r-sharp);opacity:.75}.ml i.st-print{border-radius:var(--r-sharp)}.ml i.st-ready{opacity:.6} .ml b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:700} .ml u{display:none} .ml.more{color:var(--muted)} .mdet{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;display:flex;flex-direction:column;gap:8px} .mdet header{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--fs-lg)}.mdet header em{font-style:normal;font-size:var(--fs-base);color:var(--accent);font-weight:700} .mdn{margin:0;font-size:var(--fs-base)} .legend .ld{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ink);margin-right:4px;border:2px solid var(--ink)} .legend .ld{padding:0;box-sizing:content-box}.legend .ld.st-todo{background:transparent}.legend .ld.st-material{border-radius:var(--r-sharp);opacity:.75}.legend .ld.st-print{border-radius:var(--r-sharp)}.legend .ld.st-ready{opacity:.6} @media(max-width:700px){.ml b{display:none}.ml u{display:none}.ml{width:auto}.mlines{flex-direction:row;flex-wrap:wrap;gap:3px}.mtag,.mcnt{display:none}.mcell{min-height:64px}} .cd{margin:0 0 12px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);font-size:var(--fs-base);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center} .cd i{font-style:normal;color:var(--muted)} .cd b{color:var(--accent)} .hint{font-size:var(--fs-sm);color:var(--muted);margin:4px 0 0} .cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start} .cbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:14px} .cbox .sect small{font:500 var(--fs-base) var(--body);color:var(--muted);margin-left:6px} .stlist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px} .strow{display:flex;gap:6px;align-items:center} .stn{flex:1;min-width:0;border:1px solid transparent;background:transparent;border-radius:var(--r-field);padding:7px 8px} .stn:hover,.stn:focus{border-color:var(--line);background:var(--bg);outline:none} .strow select{border:1px solid var(--line);background-color:var(--bg);border-radius:var(--r-field);padding:0 26px 0 10px;height:var(--field-h-sm);max-width:140px;box-sizing:border-box} .pasted{margin-top:8px;font-size:var(--fs-base)}.pasted summary{cursor:pointer;color:var(--accent);font-weight:700} .pasted textarea{width:100%;margin:8px 0;border:1px solid var(--line);border-radius:var(--r-field);background:var(--bg);padding:8px} .gact{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px} .grand input{width:56px;border:1px solid var(--line);border-radius:var(--r-field);padding:6px;background:var(--bg)} .gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px} .gcard{border-radius:var(--r-card);background:hsl(var(--h) 60% 94%);border-top:6px solid hsl(var(--h) 55% 55%);padding:8px 10px;color:hsl(var(--h) 45% 20%)} .gh{display:flex;align-items:center;gap:6px} .gh input{flex:1;min-width:0;border:0;background:transparent;font:800 var(--fs-base) var(--display);color:inherit;padding:2px 0} .gh input:focus{outline:none;border-bottom:1px solid currentColor} .gc{font-size:var(--fs-sm);opacity:.7} .gm{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px} .chip{background:#fff;border-radius:999px;padding:2px 10px;font-size:var(--fs-base);color:#3B2416} .gm em{font-size:var(--fs-base);opacity:.7} .none{color:var(--muted);font-size:var(--fs-base)} #pomo{position:fixed;right:16px;bottom:16px;z-index:45;width:250px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sheet);box-shadow:var(--shadow);padding:12px 14px} #pomo[hidden]{display:none} #pomo .ph2{display:flex;justify-content:space-between;align-items:center;font:800 var(--fs-base) var(--display)} #pomo .ph2 button{border:0;background:none;font-size:var(--fs-xl);color:var(--muted)} #pomo .pmodes{display:flex;gap:4px;margin:8px 0} #pomo .pmodes button{flex:1;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-field);padding:5px 2px;font-size:var(--fs-sm);font-weight:700} #pomo .pmodes button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:transparent} #pomo .ptime2{font:800 44px/1 var(--display);text-align:center;font-variant-numeric:tabular-nums;margin:6px 0} #pomo .pbar{height:6px;background:var(--soft);border-radius:99px;overflow:hidden} #pomo .pbar i{display:block;height:100%;background:var(--accent)} #pomo .pbt{display:flex;gap:6px;margin:10px 0 6px}#pomo .pbt .btn{flex:1;padding:8px 6px} #pomo .pcnt{margin:0;font-size:var(--fs-sm);color:var(--muted);text-align:center} #pomo .pset{margin-top:6px;font-size:var(--fs-base)}#pomo .pset summary{cursor:pointer;color:var(--muted)} #pomo .pin{display:flex;flex-direction:column;gap:6px;margin-top:6px} #pomo .pin input[type=number]{width:54px;border:1px solid var(--line);border-radius:var(--r-field);padding:3px 4px;background:var(--bg)} @media print{#pomo{display:none}} #deco .b{position:absolute;border-radius:50%;opacity:.09;background:var(--c2)} #deco .b:nth-child(2n){background:var(--c1);opacity:.07} .mug{position:absolute;right:20px;bottom:0;height:92px;width:auto;z-index:0;pointer-events:none} .cozytxt{position:absolute;right:290px;bottom:16px;font:600 var(--fs-xl)/1.28 var(--script);letter-spacing:.01em;color:var(--hero-sub);text-shadow:0 1px 0 rgba(255,255,255,.25);pointer-events:none} .mug.scene{height:104px} .mug .st{fill:none;stroke:#FFF3E6;stroke-width:3;stroke-linecap:round;opacity:0} @media (prefers-reduced-motion:no-preference){.mug .st{animation:steam 3.4s ease-in-out infinite}.mug .st:nth-of-type(2){animation-delay:-1.1s}.mug .st:nth-of-type(3){animation-delay:-2.2s} @keyframes steam{0%{opacity:0;transform:translateY(6px)}40%{opacity:.7}100%{opacity:0;transform:translateY(-10px)}}} @media (prefers-reduced-motion:reduce){.mug .st{opacity:.5}} .mood-scene{position:fixed;right:0;bottom:0;pointer-events:none;z-index:-1;width:min(70vw,1200px);height:min(86vh,1200px);overflow:visible;opacity:.96} /* le café animé du mode Ambiance (automne) n'est plus une vignette flottante fixe à l'écran : il est affiché à droite du bloc « Note du jour / Absences » (voir dhNotesBar) et défile normalement avec le reste du contenu */ .mood-scene.mood-autumn{position:relative;display:block;top:auto;left:auto;right:auto;bottom:auto;z-index:auto;pointer-events:auto;margin:0 0 0 38px;flex:0 0 auto;width:min(190px,40vw);height:auto;opacity:1} .mood-scene.mood-autumn .mug{position:static;left:auto;bottom:auto;height:auto;width:100%;display:block} .mood-scene .mug{position:absolute;left:0;bottom:-4%;height:auto;width:100%} .mood-scene .mug .st{display:none} .mood-scene .mug .steam2{fill:none;stroke:#FBEAD2;stroke-width:6;stroke-linecap:round;opacity:0;filter:blur(1.1px)} .mood-scene .snowground{position:absolute;left:0;right:0;bottom:0;width:100%;height:11%} .mood-scene .snowman{position:absolute;left:50%;bottom:0;transform-origin:50% 100%;transform:translateX(-50%);width:62%;height:auto} .mood-scene .pumpkin{position:absolute;left:50%;bottom:6%;transform-origin:50% 90%;transform:translateX(-50%);width:70%;height:auto} .mood-scene .glow{position:absolute;left:50%;bottom:14%;width:64%;padding-top:64%;transform:translate(-50%,18%);border-radius:50%;background:radial-gradient(circle,rgba(255,175,70,.55),rgba(255,175,70,0) 68%)} .mood-scene .snowfall{position:absolute;inset:0;overflow:hidden} .mood-scene .snowfall .flake{position:absolute;top:-10%;border-radius:50%;background:#fff;opacity:.85} .mood-scene .lutin{position:absolute;left:50%;bottom:0;transform-origin:50% 100%;transform:translateX(-50%);width:58%;height:auto} .mood-scene .mask{position:absolute;left:50%;bottom:8%;transform-origin:50% 60%;transform:translateX(-50%);width:76%;height:auto} .mood-scene .mask .mo-b,.mood-scene .mask .mo-a{opacity:0} .mood-scene .rabbit{position:absolute;left:50%;bottom:0;transform-origin:50% 100%;transform:translateX(-50%);width:62%;height:auto} .mood-scene .field{position:absolute;left:2%;right:2%;bottom:0;height:64%} .mood-scene .field .fl{position:absolute;bottom:0;width:12%;height:72%} .mood-scene .field .tuft{position:absolute;bottom:0;width:6%;height:20%;opacity:.8} @media (prefers-reduced-motion:no-preference){ .mood-scene .snowfall .flake{animation:moodsnow var(--dur) linear infinite;animation-delay:var(--delay)} .mood-scene .pumpkin{animation:moodbob 3.6s ease-in-out infinite} .mood-scene .glow{animation:moodglow 3.6s ease-in-out infinite} .mood-scene .snowman{animation:moodsway 4.8s ease-in-out infinite} .mood-scene .mug .steam2{animation:moodsteam 3.2s ease-in-out infinite} .mood-scene .mug .steam2:nth-of-type(2){animation-delay:-.9s} .mood-scene .mug .steam2:nth-of-type(3){animation-delay:-1.8s} .mood-scene .mug .steam2:nth-of-type(4){animation-delay:-2.5s} .mood-scene .lutin{animation:moodsway 3.6s ease-in-out infinite} .mood-scene .lutin .bell{animation:moodbell .6s ease-in-out infinite} .mood-scene .mask{animation:moodbob2 5s ease-in-out infinite} .mood-scene .mask .mo-a{animation:moodMouthA 4s ease-in-out infinite} .mood-scene .mask .mo-b{animation:moodMouthB 4s ease-in-out infinite} .mood-scene .rabbit .paw{animation:moodwave 1.6s ease-in-out infinite} .mood-scene .field .fl.sway{animation:moodsway3 3.2s ease-in-out infinite} .mood-scene .field .fl.grow{animation:moodgrow 5.5s ease-in-out infinite} } @media (prefers-reduced-motion:reduce){ .mood-scene .snowfall .flake{opacity:.5} .mood-scene .mug .steam2{opacity:.6} .mood-scene .mask .mo-a{opacity:1} .mood-scene .field .fl.grow{opacity:1;transform:scaleY(1)} } @keyframes moodsnow{0%{transform:translateY(-20px)}100%{transform:translateY(1100px)}} @keyframes moodbob{0%,100%{transform:translateX(-50%) rotate(-3deg)}50%{transform:translateX(-50%) rotate(3deg) translateY(-4px)}} @keyframes moodbob2{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}} @keyframes moodglow{0%,100%{opacity:.7;transform:translate(-50%,18%) scale(1)}50%{opacity:1;transform:translate(-50%,18%) scale(1.08)}} @keyframes moodsway{0%,100%{transform:translateX(-50%) rotate(-1.6deg)}50%{transform:translateX(-50%) rotate(1.6deg)}} @keyframes moodsteam{0%{opacity:0;transform:translateY(10px) scale(1)}18%{opacity:.9}55%{opacity:.95}100%{opacity:0;transform:translateY(-42px) scale(1.22)}} @keyframes moodbell{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}} @keyframes moodMouthA{0%,42%{opacity:1}50%,100%{opacity:0}} @keyframes moodMouthB{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}} @keyframes moodwave{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-26deg)}75%{transform:rotate(18deg)}} @keyframes moodsway3{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}} @keyframes moodgrow{0%,100%{transform:scaleY(.03);opacity:0}12%{opacity:1}45%,55%{transform:scaleY(1);opacity:1}88%{opacity:1}100%{transform:scaleY(.03);opacity:0}} @media (max-width:640px){.mood-scene{display:none}} @media (max-width:520px){.mug{height:56px;right:10px}} @media (max-width:380px){.mug{height:44px}} .cozybtn{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-size:var(--fs-base);font-weight:700;cursor:pointer} .cozybtn input{accent-color:var(--accent);width:16px;height:16px} /* interrupteur à bascule (toggle switch) pour le mode cocooning : même que les autres réglages (change event, id "cozyTog" inchangés) mais rendu comme un vrai interrupteur plutôt qu'une case à cocher. input visuellement masqué mais toujours au clavier/lecteur d'écran ; .toggle-track dessine le rail + le galet via ::after. */ .toggle{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px 7px 7px;font-size:var(--fs-base);font-weight:700;cursor:pointer} .toggle input{position:absolute;width:1px;height:1px;opacity:0;margin:0} .toggle-track{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;flex:none;transition:background .18s ease} .toggle-track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .18s ease} .toggle input:checked+.toggle-track{background:var(--accent)} .toggle input:checked+.toggle-track::after{transform:translateX(16px)} .toggle input:focus-visible+.toggle-track{outline:none} .toggle-lbl{display:inline-flex;align-items:center;gap:6px} .opts{position:relative} .opts>summary{list-style:none;cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-field);padding:8px 14px;font-weight:700} .opts>summary::-webkit-details-marker{display:none} .opts .oc{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-width:230px} .opts .oc .seasel{justify-content:space-between} /* thème « Chic » : la barre d'onglets et le pied de page se replient derrière un simple bouton, pour un rendu minimal (voir footBar() et render()) */ .navcollapse{width:100%} .navcollapse>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;background:var(--hero);color:var(--tab-ink);border-radius:999px;padding:10px 18px;font-size:var(--fs-base);font-weight:700} .navcollapse>summary::-webkit-details-marker{display:none} .navcollapse[open]>summary{margin-bottom:8px;border-radius:var(--r-card)} .footcollapse{width:100%;text-align:center} .footcollapse>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:10px 20px;font-weight:700} .footcollapse>summary::-webkit-details-marker{display:none} .footcollapse[open]>summary{margin-bottom:14px} .footgrid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;text-align:left} .tip{display:none} .rte{min-height:38px;line-height:1.4;overflow-wrap:break-word;word-break:normal;hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;outline:none;white-space:pre-wrap} .rte:empty::before{content:attr(data-ph);color:var(--muted);opacity:.7;pointer-events:none} .rte.rte-dropok{outline:2px dashed var(--accent);outline-offset:2px;background:color-mix(in srgb,var(--accent) 10%,transparent)} .rte ul,.rte ol{margin:2px 0;padding-left:20px} .rte blockquote,.fld .rte blockquote,.card blockquote{margin:2px 0 2px 40px;border:0;padding:0;font-style:normal} .pt td .rte{padding:9px 10px;height:100%;box-sizing:border-box} .pt td .rte:focus{outline:none} .fld .rte{border:1px solid var(--line);background:var(--bg);border-radius:var(--r-field);padding:9px 11px;min-height:44px} .fld .rte.big{min-height:120px} .fld .rte:focus{outline:none;border-color:var(--muted)} #rtb{position:fixed;z-index:60;display:flex;flex-wrap:wrap;gap:4px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:5px 6px;max-width:min(560px,94vw)} #rtb[hidden]{display:none} #rtb button{border:0;background:none;min-width:30px;height:30px;border-radius:var(--r-field);padding:0 6px;font-weight:700;color:var(--ink)} #rtb button:hover{background:var(--soft)} #rtb .sw{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);padding:0} #rtb .sw.more{background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red)} #rtb .sep{width:1px;height:20px;background:var(--line);margin:0 3px} #rtb select.fsel{border:1px solid var(--line);border-radius:var(--r-field);padding:0 24px 0 8px;background-color:var(--surface);color:var(--ink);font-size:var(--fs-sm);max-width:118px;height:var(--field-h-sm);box-sizing:border-box} .hw{margin:0 0 14px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sheet);padding:10px 14px} .hw>summary{cursor:pointer;font:800 var(--fs-base) var(--display);list-style:none} .hw>summary::-webkit-details-marker{display:none} .hwc{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 22px;margin-top:8px} .hwc h4{margin:0 0 4px;font:700 var(--fs-sm) var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .hwc ul{margin:0;padding-left:0;list-style:none;font-size:var(--fs-base)} .hwc li{margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--line)} .hwc li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0} .hwc .al{text-decoration:none;font-weight:700} .hwc .none{color:var(--muted);font-size:var(--fs-base)} .wgrid.h{grid-template-columns:104px repeat(7,minmax(118px,1fr));min-width:980px} .wgrid.h>div:nth-child(8n),.wgrid.h>button:nth-child(8n){border-right:0} .wgrid.h .wt{align-items:center} .wgrid.h .wh{display:flex;flex-direction:column;justify-content:center} .subtabs{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%;order:5} .subtabs button{border:1px solid hsl(var(--h) 45% 60%/.5);background:hsl(var(--h) 70% 92%);color:hsl(var(--h) 55% 24%);border-radius:999px;padding:6px 14px;font-weight:700;font-size:var(--fs-base)} .subtabs button[aria-pressed="true"]{background:hsl(var(--h) 55% 42%);color:#fff;border-color:transparent} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .subtabs button{background:hsl(var(--h) 30% 24%);color:hsl(var(--h) 60% 88%)}:root:not([data-theme="light"]) .subtabs button[aria-pressed="true"]{background:hsl(var(--h) 55% 50%);color:#fff}} *{box-sizing:border-box} [hidden]{display:none!important} html,body{background:var(--bg);color:var(--ink)} body{transition:background .4s;font:var(--fs-base)/1.45 var(--body);padding-inline:16px;padding-block:0 48px;overflow-x:hidden} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} :focus-visible{outline:none} /* ===== selects : jamais le look natif du navigateur, partout ===== appearance:none + chevron dessiné en currentColor (s'adapte à la couleur du texte de chaque contexte/thème sans avoir à le redéfinir à chaque fois). Les contextes avec un style propre (.syear-select, .tpl select…) gardent la main via leur spécificité plus élevée. */ select{ appearance:none;-webkit-appearance:none;-moz-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:13px 13px; cursor:pointer; } select::-ms-expand{display:none} .tpl select{background-image:none} /* ===== la liste déroulante elle-même : options ciblées directement ===== Base pour tous les navigateurs : options sur fond blanc, texte foncé, même police que le reste. Là où le navigateur le permet (appearance:base-select, Chrome/Edge récents), la liste s'ouvre comme un vrai menu déroulant : carte blanche arrondie, ombre douce, survol coloré. Ailleurs (Safari, Firefox), le select reste fonctionnel avec la liste système. */ select option{background:#fff;color:#1a1a1a;font:500 var(--fs-base) var(--body);text-transform:none;letter-spacing:normal} select option:checked{background:#f3eee8;color:#1a1a1a;font-weight:700} @supports (appearance: base-select){ select,select::picker(select){appearance:base-select} select{align-items:center} select::picker-icon{display:none} select::picker(select){ background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:var(--r-field); box-shadow:0 12px 32px rgba(0,0,0,.16);padding:4px;margin-block:4px; min-width:anchor-size(width);max-height:min(60vh,360px);overflow-y:auto; } select option{padding:8px 12px;border-radius:calc(var(--r-field) - 3px);min-height:0;gap:8px;cursor:pointer} select option::checkmark{display:none} select option:hover,select option:focus-visible{background:#f1f1f1;outline:none} select option:checked{background:#f3eee8} } /* ===== hauteur commune des champs : input/select/bouton alignés ===== */ .btn,.ibtn,select,.crow input,.crow select,.fld input[type=text],.fld input[type=time],.fld select,.strow select,#s-canton{box-sizing:border-box} .wrap{max-width:1280px;margin-inline:auto} .sub{background:hsl(var(--h) var(--cs) var(--cl));color:hsl(var(--h) var(--ts) var(--tl))} /* header */ .top{position:relative;left:50%;margin-left:-50vw;width:100vw;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:18px clamp(16px,4vw,44px);border-radius:0;margin-bottom:22px;background:var(--hero);color:var(--hero-ink);box-shadow:none} .top>*{position:relative;z-index:1} .top>.mug,.top>.cozytxt{position:absolute} :root .top:has(.mug){padding-bottom:104px} .top>.cozytxt{right:auto;left:22px;bottom:22px} .top>.mug{height:92px;right:24px;bottom:0} :root[data-cozy="on"] .top>.mug{top:14px;bottom:auto;right:24px;height:86px} :root[data-cozy="on"] .top>.cozytxt{left:auto;right:246px;top:18px;bottom:auto;text-align:right;max-width:250px} :root[data-cozy="on"] .top:has(.mug){padding-top:100px;padding-bottom:18px} .top>.leaves{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none} .leaves .sw{transform-box:fill-box;transform-origin:center} .brand{font:800 clamp(46px,8.5vw,92px)/1 var(--display);letter-spacing:.035em;text-transform:uppercase;margin-right:auto;display:flex;flex-direction:column;align-items:flex-start;gap:4px;color:var(--hero-ink)} .brandtitle{font-family:var(--display);font-weight:800;font-size:1em;line-height:1;letter-spacing:.01em;color:inherit} .brand small{font:700 var(--fs-lg) var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--hero-sub)} .syear-select{appearance:none;-webkit-appearance:none;font:700 var(--fs-lg) var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--hero-ink);background:color-mix(in srgb,var(--hero-ink) 16%,transparent) url('data:image/svg+xml;utf8,') no-repeat right 10px center/14px 14px;border:1.5px solid color-mix(in srgb,var(--hero-ink) 35%,transparent);border-radius:999px;padding:6px 34px 6px 14px;cursor:pointer;max-width:100%} .syear-select:hover{background-color:color-mix(in srgb,var(--hero-ink) 26%,transparent)} .syear-select option{color:#1a1a1a;background:#fff;font-weight:600;text-transform:none;letter-spacing:normal} .tabs{max-width:100%;overflow-x:auto;scrollbar-width:none;display:flex;background:var(--tab-track);border-radius:999px;padding:4px;gap:2px} .tabs button{border:0;background:none;padding:7px 16px;border-radius:999px;font-weight:700;color:var(--tab-ink)} .tabs button:hover{background:rgba(255,246,232,.14)} .tabs button[aria-pressed="true"]{background:var(--tab-act-bg);color:var(--tab-act-ink)} .navbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;width:100%;margin-bottom:14px;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sheet);padding:10px 14px;position:relative} .navdeco{position:absolute;right:10px;top:-6px;width:52px;height:auto;opacity:.9;pointer-events:none} .navdeco svg{width:100%;height:auto;display:block} .navl{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 320px}.navr{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .navgrp{display:flex;align-items:center;gap:8px} .seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);overflow:hidden} .seg>button{border:0;background:none;padding:8px 13px;font-weight:700;color:var(--ink);white-space:nowrap} .seg.sm>button{padding:5px 9px;font-size:var(--fs-sm);font-weight:600;color:var(--muted)}.seg.sm{border-radius:var(--r-field)} .seg>button+button{border-left:1px solid var(--line)} .seg>button:hover{background:var(--soft)}.seg>button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)} .tabs .tsep{width:1px;background:var(--tab-ink);opacity:.35;margin:6px 6px} .navbar h1{font:800 var(--fs-xl)/1.1 var(--display);letter-spacing:-.01em;margin:0 auto 0 6px;text-wrap:balance;color:var(--title-ink)} @media(max-width:700px){.navr{width:100%}.seg{flex:1 1 auto}.seg>button{flex:1;padding:8px 8px;font-size:var(--fs-base)}} .ibtn,.btn{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-field);font-weight:700;height:var(--field-h);display:inline-flex;align-items:center;justify-content:center;line-height:1;box-sizing:border-box;gap:6px} .btn{padding:0 14px} .ibtn{width:var(--field-h);padding:0;font-size:var(--fs-lg);flex:none} .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .btn.ghost{background:none} .btn:hover,.ibtn:hover{border-color:var(--ink)} .btn.primary:hover{filter:brightness(1.06)} /* icônes Lucide (lucide.dev) : taille relative au texte du bouton qui les contient (sm/md/lg s'accordent automatiquement), alignées sur la ligne de base. Les contextes qui ont besoin d'une autre taille (.navitem, .ibtn…) la redéfinissent eux-mêmes plus loin. */ .lucide-ico{width:1em;height:1em;flex:none;vertical-align:-.125em} .btn .lucide-ico,.ibtn .lucide-ico{width:1.15em;height:1.15em} /* ===== menu latéral (masqué par défaut, s'ouvre via le bouton 3 lignes) ===== */ .shell{display:flex;align-items:flex-start;gap:0} .side{width:280px;flex:none;display:flex;flex-direction:column;gap:3px;padding:12px 10px;position:fixed;left:12px;top:12px;height:calc(100vh - 24px);max-height:none;z-index:20;overflow-y:auto;overflow-x:hidden;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:0;box-shadow:var(--shadow);border-radius:var(--r-sheet);transform:translateX(calc(-100% - 20px));transition:transform .22s ease} body.navopen .side{transform:translateX(0)} .side-head{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 8px;gap:6px} .side-head span{font:500 var(--fs-sm) var(--label);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);white-space:nowrap;overflow:hidden} .collapsebtn{width:26px;height:26px;flex:none;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-field);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--fs-lg);font-weight:700;line-height:1} .side-sec{font:500 var(--fs-sm) var(--label);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);opacity:.75;padding:12px 10px 5px} .navitem{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-field);color:var(--ink);text-decoration:none;border:none;background:none;width:100%;text-align:left;font-size:var(--fs-base);font-weight:600} .navitem svg{flex:none;width:17px;height:17px;opacity:.8} .navitem:hover{background:var(--soft)} .navitem[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)} .navitem[aria-pressed="true"] svg{opacity:1} .navlbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .optwrap{margin-top:auto;padding-top:8px;border-top:1px solid var(--line)} /* liens externes en petit, tout au fond du menu */ .side-foot{display:flex;flex-wrap:wrap;gap:4px 14px;padding:10px 10px 2px;margin-top:6px} .side-optview+.side-foot{margin-top:auto} .side-foot a{font-size:var(--fs-sm);font-weight:600;color:var(--muted);text-decoration:none} .side-foot a:hover{color:var(--ink);text-decoration:underline} /* le panneau Options n'est plus une bulle flottante (qui débordait toujours d'une manière ou d'une autre selon la largeur d'écran) : ouvrir Options remplace le contenu du menu par ce panneau, exactement comme un nouveau sous-menu qui prend la place du précédent. Un bouton « Retour » en haut ramène au menu normal. Comme ça reste dans la largeur normale du menu (216px, avec le défilement vertical déjà prévu sur .side), rien ne peut déborder à gauche ou à droite. */ .side-optview{display:flex;flex-direction:column;gap:10px;min-height:0} .backitem{color:var(--muted);margin-bottom:4px} .backitem svg{opacity:1} .side-optbody{display:flex;flex-direction:column;gap:10px} /* le contenu du panneau (optionsGroupsHTML) réutilise les classes du pied de page d'origine (.fgrp/.grp/.btn/.cozybtn/.seasel/.opts…), qui n'étaient stylées que sous ".foot" ; on reprend les mêmes règles ici pour qu'elles s'enroulent proprement dans la largeur du menu, sans jamais déborder */ .side-optbody *{min-width:0} .side-optbody .fgrp{border:1px solid var(--line);border-radius:var(--r-card);padding:10px 12px;background:color-mix(in srgb,var(--surface) 60%,transparent)} .side-optbody .fgrp h4{margin:0 0 8px;font:800 var(--fs-sm) var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .side-optbody .grp{display:flex;gap:8px 10px;align-items:center;flex-wrap:wrap} .side-optbody .btn,.side-optbody .cozybtn,.side-optbody .toggle,.side-optbody .seasel select{background-color:transparent;border:1px solid var(--line);box-shadow:none;color:var(--muted);font-size:var(--fs-sm);font-weight:600;padding:0 12px;max-width:100%} .side-optbody .btn,.side-optbody .cozybtn,.side-optbody .seasel select{height:var(--field-h-sm);display:inline-flex;align-items:center;box-sizing:border-box} .side-optbody .seasel select{padding-right:28px} .side-optbody .btn:hover,.side-optbody .cozybtn:hover,.side-optbody .toggle:hover,.side-optbody .seasel select:hover{background-color:var(--soft);color:var(--ink)} .side-optbody .opts{position:relative;max-width:100%} .side-optbody .opts>summary{background:transparent;border:1px solid var(--line);color:var(--muted);font-size:var(--fs-base);font-weight:600;padding:6px 10px;border-radius:var(--r-field)} .side-optbody .opts .oc{position:static;width:100%;max-width:100%;margin-top:6px;box-shadow:none} .side-optbody .seasel{color:var(--muted);font-weight:600;flex-wrap:wrap;max-width:100%} .side-optbody select,.side-optbody input[type=text]{max-width:100%} .maincol{flex:1;min-width:0} .mobar{display:flex;align-items:center;gap:10px;margin-bottom:14px;position:sticky;top:12px;z-index:19} .hambtn{width:var(--field-h);height:var(--field-h);border:1px solid var(--line);background:var(--surface);border-radius:var(--r-field);display:flex;align-items:center;justify-content:center;color:var(--ink);flex:none} .hambtn svg{width:18px;height:18px;flex:none} .navbackdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:19;display:none} body.navopen .navbackdrop{display:block} @media (max-width:860px){ .side{width:min(280px,calc(100vw - 24px))} } /* boutons épurés partout (pas seulement dans les thèmes sobres) : angles nets et lettrage légèrement espacé, au lieu des pilules très arrondies */ .btn,.ibtn,.tabs button,.navcollapse>summary,.footcollapse>summary,.clsbtn{letter-spacing:.02em} /* les boutons (.btn/.ibtn) gardent le même rayon que les champs (--r-field) : seuls les onglets/pastilles de navigation restent à angles nets */ .tabs button,.navcollapse>summary,.footcollapse>summary,.clsbtn{border-radius:var(--r-sharp)} .banner{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;background:var(--today-bg);border-radius:var(--r-card);padding:10px 14px;margin-bottom:16px;font-size:var(--fs-base)} .banner button{margin-left:auto} /* day view */ .dayhead{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:16px} .eyebrow{margin:0 0 4px;font:700 var(--fs-sm) var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} .dayhead h2{margin:0;font:800 34px/1.05 var(--display);letter-spacing:-.02em;color:var(--title-ink)} .sum{margin:6px 0 0;color:var(--muted);font-size:var(--fs-base)} .note-in{flex:1 1 260px;max-width:420px;border:0;background:none;border-radius:0;padding:0;width:100%;resize:none;overflow:hidden;white-space:pre-wrap;word-break:break-word;display:block;line-height:1.35;min-height:1.4em} .dhnotes{display:flex;flex-direction:column;gap:8px;flex:1 1 260px;max-width:640px;margin-bottom:22px} .dhnotes-row{display:flex;align-items:stretch;gap:16px;flex-wrap:wrap} /* Note du jour + Absences du jour CÔTE À CÔTE (pas l'une sous l'autre) ; flex-wrap les repasse en colonne tout seuls si la place manque (mobile) */ .dhfields{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;flex:1 1 320px;min-width:0;max-width:640px} .dhfields>.note-lbl{flex:1 1 220px;min-width:220px} .dhfields>.note-lbl:first-child{white-space:nowrap} .note-lbl{display:block;font:500 var(--fs-sm) var(--label);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} .note-lbl input,.note-lbl textarea{margin-top:6px;width:100%;max-width:none} /* chaque champ dans son propre encadré coloré, comme les pastilles « DATE » et « PRODUCTIVITÉ » de l’exemple ; flex-direction:column pour empiler le libellé puis le champ (sinon .card les mettrait côte à côte et le texte déborderait du cadre quand la note est longue) */ .note-lbl.card{background:var(--cellbg);border:1.5px solid var(--pt-line);border-radius:var(--r-card);padding:10px 14px;display:flex;flex-direction:column;align-items:stretch} .note-lbl.card .note-in{flex:none;max-width:none} .note-lbl.abs{color:var(--pop-red)} .note-lbl.abs .note-in{color:var(--ink)} .abs-add{display:inline-flex;align-items:center;gap:6px;margin-top:6px;border:0;background:none;color:var(--pop-red);padding:4px 0;font:700 var(--fs-base) var(--body);cursor:pointer} .abs-add:hover{text-decoration:underline;text-underline-offset:3px} .note-empty{margin:6px 0 0;color:var(--muted);font-size:var(--fs-base)} .fld .rte.memo-rte{min-height:220px} .postit-slot{width:150px;min-height:72px;flex:none;border-radius:var(--r-sharp);cursor:pointer;border:1px dashed transparent;transition:border-color .15s,background .15s} .postit-slot:hover,.postit-slot:focus-visible{border-color:var(--line);background:color-mix(in srgb,var(--surface) 60%,transparent)} .postit-slot:hover::after{content:"Double-clic : petit mémo à imprimer";display:block;font-size:var(--fs-sm);color:var(--muted);padding:8px;line-height:1.3} .postit{flex:none;width:150px;max-width:150px;background:#FFF3B0;color:#4A3B00;border-radius:var(--r-sharp);padding:8px 9px 6px;box-shadow:0 2px 6px rgba(0,0,0,.14),0 1px 0 rgba(0,0,0,.06);transform:rotate(-1.4deg)} .postit .rte.postit-rte{min-height:56px;font-size:var(--fs-sm);line-height:1.35} .postit .rte.postit-rte:empty::before{color:#8a7a3a} @media print{.postit-slot{display:none}} .note-lbl.standalone{margin:0 0 12px;max-width:420px} .absweek{display:flex;flex-direction:column;gap:8px;padding:2px} .absrow{display:flex;align-items:center;gap:10px} .absrow b{flex:0 0 60px;font:700 var(--fs-sm) var(--body);color:var(--muted)} .absrow input{flex:1;min-width:0;border:1px dashed var(--line);background:var(--surface);border-radius:var(--r-field);padding:7px 10px} .periods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .prow{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:stretch} .ptime{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding-right:4px} .ptime b{font:800 30px/1 var(--display);color:var(--muted)} .ptime span{font:600 var(--fs-base) var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap} .card{position:relative;text-align:left;border:0;border-radius:var(--r-sheet);padding:12px 14px;display:flex;gap:12px;align-items:flex-start;width:100%;min-height:78px} .card.sub{border:1.5px solid hsl(var(--h) var(--bs) var(--bl));box-shadow:0 1px 2px rgba(40,20,10,.06),0 4px 10px rgba(40,20,10,.05)} .card .body{flex:1;min-width:0} .card .subj{font:700 var(--fs-sm) var(--body);letter-spacing:.08em;text-transform:uppercase;opacity:.85} .prow .card.sub .subj{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;display:inline-block} .prow .card.sub.dragging{cursor:grabbing;opacity:.55;box-shadow:var(--shadow);position:relative} .prow .card.drag-over{outline:2px dashed var(--accent);outline-offset:-2px} .card .subthm{font:600 var(--fs-sm) var(--body);opacity:.75;margin-top:-2px} .card .ttl{font:700 var(--fs-lg)/1.25 var(--display);margin-top:2px;overflow-wrap:anywhere} .card .ttl.empty{font-weight:600;opacity:.6;font-style:italic} .card .meta{margin-top:4px;font-size:var(--fs-base);opacity:.88;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} .card .mat{margin-top:4px;font-size:var(--fs-sm);opacity:.75} .card:hover{box-shadow:var(--shadow)} .empty-slot{border:1.5px dashed var(--line);background:none;color:var(--muted);justify-content:center;align-items:center;font-weight:700} .empty-slot:hover{border-color:var(--accent);color:var(--accent);box-shadow:none} .free-slot{border:1.5px dashed var(--line);background:none;color:var(--muted);align-items:center;justify-content:center;font-style:italic} .pill{border:1.5px solid currentColor;background:none;border-radius:999px;padding:3px 11px;font:700 var(--fs-sm) var(--body);white-space:nowrap;flex:none} .pill.todo{background:var(--st-todo-bg);color:var(--st-todo-ink);border-color:var(--st-todo)} .pill.material{background:var(--st-material-bg);color:var(--st-material-ink);border-color:var(--st-material)} .pill.print{background:var(--st-print-bg);color:var(--st-print-ink);border-color:var(--st-print)} .pill.ready{background:var(--st-ready-bg);color:var(--st-ready-ink);border-color:var(--st-ready)} .dot.todo{background:var(--st-todo);border-color:var(--st-todo)} .dot.material{background:var(--st-material);border-color:var(--st-material)} .dot.print{background:var(--st-print);border-color:var(--st-print)} .dot.ready{background:var(--st-ready);border-color:var(--st-ready)} .pt td.stc.s-todo{color:var(--st-todo-pop);font-weight:800} .pt td.stc.s-material{color:var(--st-material-pop);font-weight:800} .pt td.stc.s-print{color:var(--st-print-pop);font-weight:800} .pt td.stc.s-ready{color:var(--st-ready-pop);font-weight:800} /* colonne État intégrée, repliée : un simple bouton qui remplit la case, fond blanc comme le reste du tableau, seul le titre du statut est coloré */ .pt td.stc .matopen{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:38px;border:0;background:none;font:inherit;font-family:var(--display);font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:inherit;text-align:center;padding:9px 10px;cursor:pointer} .pt td.stc .selwrap{display:flex;align-items:center;justify-content:center;min-height:38px} .pt td.stc .selwrap .selval{font-family:var(--display);font-weight:800;letter-spacing:.03em;text-transform:uppercase;text-align:center;color:inherit} /* … et dépliée en 3 cases (à créer / à imprimer / à préparer) */ .pt td.matc{position:relative;padding:4px 4px 4px 20px;background:var(--cellbg)} .pt td.matc .matclose{position:absolute;left:3px;top:7px;width:15px;height:15px;border:0;background:none;color:var(--muted);cursor:pointer;font-size:var(--fs-sm);line-height:1;padding:0} .pt td.matc .matrow{display:flex;flex-direction:column;gap:3px;padding:5px 2px;border-bottom:1px dashed var(--line)} .pt td.matc .matrow:last-child{border-bottom:0} .pt td.matc .matrow:has(input:checked){background:color-mix(in srgb,var(--st-ready-bg) 65%,transparent)} .pt td.matc .mathead{display:flex;align-items:center;gap:6px;cursor:pointer;min-width:0} .pt td.matc .mathead input{width:14px;height:14px;border-radius:50%;margin:0;cursor:pointer;flex:none;accent-color:var(--pop-red)} .pt td.matc .mathead b{font:500 var(--fs-sm) var(--label);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);min-width:0;overflow-wrap:break-word} .pt td.matc .matrow:has(input:checked) .mathead b{color:var(--st-ready-ink)} .pt td.matc .rte{width:100%;min-width:0;padding:2px 2px 4px;font-size:var(--fs-sm);min-height:24px} /* mode projection (Jour) : une période à la fois, en grand */ .dayhead.sm{margin-bottom:10px} .dayhead.sm h2{font-size:var(--fs-xl)} .proj{display:flex;flex-direction:column;gap:14px;max-width:900px;margin:0 auto} .projnav{display:flex;align-items:center;justify-content:center;gap:18px} .projnav .ibtn{width:var(--field-h-lg);height:var(--field-h-lg);font-size:var(--fs-xl)} .projnav .ibtn:disabled{opacity:.35;cursor:default} .projmid{text-align:center;min-width:140px} .projmid b{display:block;font:800 var(--fs-xl) var(--display)} .projmid span{display:block;font:600 var(--fs-base) var(--mono);color:var(--muted);font-variant-numeric:tabular-nums} .card.proj{min-height:min(60vh,520px);padding:28px 32px;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:14px} .card.proj.free-slot,.card.proj.empty-slot{align-items:center;justify-content:center;font-size:var(--fs-xl)} .card.proj .subj{font-size:var(--fs-lg);letter-spacing:.1em} .card.proj .subthm{font-size:var(--fs-base)} .card.proj .ttl{font-size:clamp(26px,4vw,40px);line-height:1.2;margin-top:8px} .card.proj .meta{-webkit-line-clamp:unset;font-size:var(--fs-xl);line-height:1.5;opacity:1;margin-top:10px} .card.proj .mat{font-size:var(--fs-lg);opacity:.85;margin-top:8px} .card.proj .pill{position:absolute;top:20px;right:20px;font-size:var(--fs-base);padding:6px 16px} .projdots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center} .projdot{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);font-weight:700;color:var(--muted)} .projdot.on{background:var(--accent);color:var(--accent-ink);border-color:transparent} @media(max-width:640px){.card.proj{padding:18px 16px;min-height:auto}.card.proj .ttl{font-size:var(--fs-xl)}.card.proj .meta{font-size:var(--fs-lg)}} .mbar i.s.material{opacity:.6} .pt td.subc{background:hsl(var(--h) var(--cs) var(--cl))} .pt td.subc .selwrap .selval{color:hsl(var(--h) var(--ts) var(--tl));font:800 var(--fs-lg) var(--display);letter-spacing:.02em;text-transform:uppercase;text-align:center} .subwrap{height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center} .pt td.subc .selwrap{flex:0 0 auto} .pt td .selwrap{position:relative;min-height:38px} .pt td .selwrap select{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;cursor:pointer} .pt td .selwrap .selval{display:block;padding:9px 10px;line-height:1.3;white-space:normal;word-break:normal;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;pointer-events:none;box-sizing:border-box} /* ===== API CSS invisible superposé à .selval ci-dessus continue de fonctionner exactement comme avant (c'est le cas de la quasi-totalité des navigateurs aujourd'hui). Dès qu'un navigateur la supporte, le