/* Les habits de Gaston — voir src/habits.ts. Chaque habit redéfinit les jetons du socle (gaston.css) et ajoute quelques touches qui lui sont propres. Deux portées : — la page entière, quand l'hébergement a posé `data-habit` sur ; — un aperçu, n'importe quel élément `.apercu-habit[data-habit]` (onglet Apparence des Réglages) : les jetons redéfinis sur lui valent pour tout ce qu'il contient, quel que soit l'habit de la page autour. `:root:root` passe devant les jetons sombres des pages (`:root:not(…)`), qui ont la même force qu'un `:root[data-habit]` simple. */ [data-habit]{--on-dial:#FFFFFF} .apercu-habit[data-habit],.titre-habit[data-habit]{background:var(--paper);color:var(--ink);font-family:var(--body)} [data-habit] .bouton.primaire,[data-habit] .primaire{color:var(--on-dial)} /* ─── 01 Évolution : l'habit d'origine, pour l'aperçu seulement ─── */ .apercu-habit[data-habit="evolution"]{ --paper:#FFFFFF;--surface:#F5F5F7;--sunk:#ECECF1;--raised:#FFF;--ink:#0B0B10;--ink-soft:#40404C;--ink-faint:#767684; --rule:#D5D5DD;--rule-soft:#E6E6EC;--dial:#0040FF;--dial-soft:#E3E9FF;--good-ink:#008A3E;--warn:#E58A00;--low:#E3001B;--on-dial:#FFF8EE; --display:"Playfair Display",Georgia,serif;--body:"IBM Plex Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace} @media (prefers-color-scheme:dark){.apercu-habit[data-habit="evolution"]{ --paper:#0E0F14;--surface:#16171E;--sunk:#0A0B0F;--raised:#1B1C24;--ink:#F4F4F7;--ink-soft:#B0B0BC;--ink-faint:#7C7C8A; --rule:#2A2B36;--rule-soft:#20212B;--dial:#4F7DFF;--dial-soft:#1A2544;--good-ink:#35C46A;--warn:#FFAE1F;--low:#FF4A5B}} /* ─── 03 Console de mixage ─── */ :root:root[data-habit="console"],.apercu-habit[data-habit="console"],.titre-habit[data-habit="console"]{color-scheme:dark; --paper:#2B3139;--surface:#343B45;--sunk:#262C34;--raised:#3A424D;--ink:#E6EAF0;--ink-soft:#AEB6C2;--ink-faint:#8B95A4; --rule:#46505D;--rule-soft:#3C4450;--dial:#E8B83E;--dial-soft:#4A4330;--good-ink:#5BD07A;--warn:#F08A3C;--low:#EE5A4E;--on-dial:#1F242B; --display:"Archivo",system-ui,sans-serif;--body:"Archivo",system-ui,sans-serif;--mono:"Chivo Mono",ui-monospace,monospace} @scope ([data-habit="console"]) to (.apercu-habit){ :scope .fil{background:#1F242B} :scope h1{font-family:"Permanent Marker","Archivo",cursive;font-size:30px;display:inline-block;background:#ECE6D2;color:#1F242B; padding:2px 18px 4px;transform:rotate(-1deg);box-shadow:0 1px 3px rgba(0,0,0,.5)} :scope h2{font-weight:600} :scope .bouton,:scope .primaire{background:linear-gradient(#4B535F,#353C46);border-color:#1A1E24; box-shadow:inset 0 1px rgba(255,255,255,.14),0 1px 0 #15181D} :scope .bouton.primaire,:scope .primaire{background:linear-gradient(#F3CB5C,#D9A62A);color:#1F242B} :scope .item::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#58616E;margin-right:9px;vertical-align:2px} :scope .item[aria-current="true"]::before{background:#5BD07A;box-shadow:0 0 6px #5BD07A} } /* ─── 04 Rack 19 pouces ─── */ :root:root[data-habit="rack"],.apercu-habit[data-habit="rack"],.titre-habit[data-habit="rack"]{color-scheme:dark; --paper:#1C1C1E;--surface:#252528;--sunk:#18181A;--raised:#2C2C30;--ink:#ECECEC;--ink-soft:#A8A8AE;--ink-faint:#83838A; --rule:#3A3A40;--rule-soft:#303035;--dial:#7CE38B;--dial-soft:#1F3324;--good-ink:#7CE38B;--warn:#FFC145;--low:#FF5A4E;--on-dial:#0F1A11; --display:"Rajdhani",system-ui,sans-serif;--body:"Titillium Web",system-ui,sans-serif;--mono:"Share Tech Mono",ui-monospace,monospace} @scope ([data-habit="rack"]) to (.apercu-habit){ :scope .fil{background:#101011} :scope .fil a[aria-current="page"]{text-shadow:0 0 8px rgba(124,227,139,.6)} :scope h1,:scope h2{font-weight:700;text-transform:uppercase;letter-spacing:.1em} :scope h1{font-size:34px} :scope :is(.bloc,.liste,.rangs,.tableau){ background-image:radial-gradient(circle,#9A9AA0 0 2px,#2E2E32 2.6px,transparent 3.4px),radial-gradient(circle,#9A9AA0 0 2px,#2E2E32 2.6px,transparent 3.4px); background-size:10px 10px;background-position:left 4px top 4px,right 4px top 4px;background-repeat:no-repeat; box-shadow:inset 0 1px rgba(255,255,255,.07)} :scope .liste-titre{padding-left:22px} :scope .bouton,:scope .primaire{border-radius:2px} } /* ─── 05 Cockpit ─── */ :root:root[data-habit="cockpit"],.apercu-habit[data-habit="cockpit"],.titre-habit[data-habit="cockpit"]{color-scheme:dark; --paper:#0B1418;--surface:#0F1C21;--sunk:#091216;--raised:#132329;--ink:#E8F1F2;--ink-soft:#9FB3B8;--ink-faint:#6F8C95; --rule:#21383F;--rule-soft:#172A31;--dial:#22D3EE;--dial-soft:#0E2E36;--good-ink:#3BE36B;--warn:#FFC21A;--low:#FF4B4B;--on-dial:#04161B; --display:"B612",system-ui,sans-serif;--body:"B612",system-ui,sans-serif;--mono:"B612 Mono",ui-monospace,monospace} @scope ([data-habit="cockpit"]) to (.apercu-habit){ :scope .fil{background:#071013} :scope .fil a[aria-current="page"]{color:#E256F7} :scope h1,:scope h2{font-weight:700} :scope :is(.chiffre,.num,td.n){color:var(--good-ink)} :scope :is(.bloc,.liste,.rangs,.tableau){border-color:#16272E;background: linear-gradient(var(--dial),var(--dial)) left top/14px 1px no-repeat,linear-gradient(var(--dial),var(--dial)) left top/1px 14px no-repeat, linear-gradient(var(--dial),var(--dial)) right bottom/14px 1px no-repeat,linear-gradient(var(--dial),var(--dial)) right bottom/1px 14px no-repeat,var(--surface)} :scope .item[aria-current="true"]{border-left-color:#E256F7} } /* ─── 08 Tableau d'affichage ─── */ :root:root[data-habit="solari"],.apercu-habit[data-habit="solari"],.titre-habit[data-habit="solari"]{color-scheme:dark; --paper:#171717;--surface:#1F1F1F;--sunk:#121212;--raised:#262626;--ink:#F2F2F2;--ink-soft:#B5B5B5;--ink-faint:#8A8A8A; --rule:#333333;--rule-soft:#282828;--dial:#F7C948;--dial-soft:#3A3214;--good-ink:#6BD48A;--warn:#F2994A;--low:#F25F4C;--on-dial:#141414; --display:"Saira Condensed",system-ui,sans-serif;--body:"Saira",system-ui,sans-serif;--mono:"Overpass Mono",ui-monospace,monospace} @scope ([data-habit="solari"]) to (.apercu-habit){ :scope .fil{background:#0E0E0E} :scope h1,:scope h2{font-weight:700;text-transform:uppercase;letter-spacing:.02em} } /* Une lettre par volet : habits.js découpe le titre. */ @scope ([data-habit="solari"]) to (.apercu-habit){ :scope h1 .volet-lettre{display:inline-block;min-width:.72em;text-align:center;margin-right:3px;padding:2px .06em;border-radius:3px; background:linear-gradient(#2E2E2E 0 49%,#060606 49% 52%,#232323 52%);box-shadow:0 2px 3px rgba(0,0,0,.5)} :scope h1 .volet-blanc{display:inline-block;width:.4em} :scope :is(.chiffre,td.n){color:var(--dial)} } /* ─── 11 TSF ─── */ :root:root[data-habit="tsf"],.apercu-habit[data-habit="tsf"],.titre-habit[data-habit="tsf"]{color-scheme:dark; --paper:#2A1A12;--surface:#352318;--sunk:#24170F;--raised:#3D291D;--ink:#F3E6D3;--ink-soft:#CDB8A0;--ink-faint:#A08A72; --rule:#4E3727;--rule-soft:#412D20;--dial:#F2A541;--dial-soft:#4A3320;--good-ink:#A8C47A;--warn:#E9B949;--low:#E2553F;--on-dial:#2A1A12; --display:"Fraunces",Georgia,serif;--body:"Work Sans",system-ui,sans-serif;--mono:"Azeret Mono",ui-monospace,monospace} @scope ([data-habit="tsf"]) to (.apercu-habit){ :scope .fil{padding-bottom:22px;background: repeating-linear-gradient(90deg,rgba(242,165,65,.7) 0 1px,transparent 1px 14px) left 24px bottom 6px/calc(100% - 48px) 6px no-repeat, repeating-linear-gradient(90deg,rgba(242,165,65,.9) 0 1px,transparent 1px 70px) left 24px bottom 6px/calc(100% - 48px) 10px no-repeat, radial-gradient(ellipse at 50% 140%,rgba(242,165,65,.26),transparent 60%),#1E120B} :scope h1,:scope h2{font-style:italic;font-weight:600} :scope h1{color:#F7C77F;text-shadow:0 0 22px rgba(242,165,65,.35)} :scope :is(.bloc,.liste,.rangs,.tableau){border-radius:5px} } /* ─── 13 Reportage ─── */ :root:root[data-habit="reportage"],.apercu-habit[data-habit="reportage"],.titre-habit[data-habit="reportage"]{color-scheme:light; --paper:#E3E5E7;--surface:#F1F2F3;--sunk:#D3D6D9;--raised:#FFFFFF;--ink:#17191C;--ink-soft:#4A4F55;--ink-faint:#666C73; --rule:#B9BEC4;--rule-soft:#CDD1D5;--dial:#C9351C;--dial-soft:#F6D9D3;--good-ink:#2A7F45;--warn:#B06A0C;--low:#B3121F;--on-dial:#FFFFFF; --display:"Red Hat Display",system-ui,sans-serif;--body:"Hanken Grotesk",system-ui,sans-serif;--mono:"Spline Sans Mono",ui-monospace,monospace} [data-habit="reportage"]:root body,.apercu-habit[data-habit="reportage"],.titre-habit[data-habit="reportage"]{background:repeating-linear-gradient(90deg,#E3E5E7 0 2px,#DCDFE2 2px 3px)} @scope ([data-habit="reportage"]) to (.apercu-habit){ :scope .fil{background:#2B2D30;border-bottom-color:#111} :scope .fil a{color:#B9BEC4} :scope .fil-sep{background:#B9BEC4} :scope .fil a[aria-current="page"]{color:#FF6A4D} :scope .fil-moi{color:#B9BEC4} :scope .fil-moi button:hover{color:#FF6A4D} :scope .fil-bouton{color:#EDEFF1} :scope h1,:scope h2{font-weight:800;text-transform:uppercase;letter-spacing:.14em;text-shadow:0 1px 0 #fff} :scope h1{font-size:30px} :scope :is(.liste-titre,.champ label,th){text-shadow:0 1px 0 #fff} :scope .bouton,:scope .primaire{background:linear-gradient(#FAFAFB,#D8DBDE);border:1px solid #A9AEB4} :scope .bouton.primaire,:scope .primaire{background:linear-gradient(#E54A2E,#C42F16);border-color:#9E2410;color:#fff} } /* ─── 14 ORTF 1964 ─── */ :root:root[data-habit="ortf"],.apercu-habit[data-habit="ortf"],.titre-habit[data-habit="ortf"]{color-scheme:light; --paper:#F7F7F2;--surface:#FFFFFF;--sunk:#EEF2F7;--raised:#FFFFFF;--ink:#111111;--ink-soft:#444444;--ink-faint:#6F6F6F; --rule:#D8D8CF;--rule-soft:#E7E7E0;--dial:#0055A4;--dial-soft:#E1EBF6;--good-ink:#2E8B57;--warn:#D9501F;--low:#C62828;--on-dial:#FFFFFF; --display:"Jost",system-ui,sans-serif;--body:"Jost",system-ui,sans-serif;--mono:"Cousine",ui-monospace,monospace} @scope ([data-habit="ortf"]) to (.apercu-habit){ :scope .fil{background:#0055A4;border-bottom:0;font-family:"Jost",sans-serif;font-size:13px;letter-spacing:.03em;text-transform:lowercase} :scope .fil a{color:rgba(255,255,255,.78);border-radius:999px;padding:3px 10px} :scope .fil-sep{background:#fff} :scope .fil a:hover{color:#fff} :scope .fil a[aria-current="page"]{background:#fff;color:#0055A4} :scope .fil-moi{color:rgba(255,255,255,.78)} :scope .fil-moi button{opacity:1} :scope .fil-moi button:hover{color:#fff;text-decoration:underline} :scope .fil-bouton{color:#fff} :scope h1,:scope h2{font-weight:800;text-transform:lowercase} :scope h1{font-size:42px} :scope h1::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#E4572E;margin-right:.25em} :scope .onglet{text-transform:lowercase;font-family:"Jost",sans-serif;font-size:13.5px;letter-spacing:.02em} :scope :is(.bloc,.liste,.rangs,.tableau){border-radius:18px;overflow:hidden} :scope .bouton,:scope .primaire{border-radius:999px} } /* ─── 15 Typographie suisse ─── */ :root:root[data-habit="suisse"],.apercu-habit[data-habit="suisse"],.titre-habit[data-habit="suisse"]{color-scheme:light; --paper:#FFFFFF;--surface:#FFFFFF;--sunk:#F2F2F2;--raised:#FFFFFF;--ink:#000000;--ink-soft:#333333;--ink-faint:#666666; --rule:#000000;--rule-soft:#D0D0D0;--dial:#E30613;--dial-soft:#FDE6E7;--good-ink:#00803C;--warn:#D97A00;--low:#B00010;--on-dial:#FFFFFF; --display:"Schibsted Grotesk",system-ui,sans-serif;--body:"Schibsted Grotesk",system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,monospace} @scope ([data-habit="suisse"]) to (.apercu-habit){ :scope .fil{border-top:8px solid #000;border-bottom-color:#000} :scope h1,:scope h2{font-weight:800;letter-spacing:-.03em} :scope h1{font-size:54px;line-height:1.02} :scope :is(.bloc,.liste,.rangs,.tableau){border:0;border-top:2px solid #000;border-radius:0} :scope :is(.bouton,.primaire,select,input[type=text],input[type=password],input[type=number],textarea){border-radius:0} :scope th{color:#000} } /* ─── 18 Mousse acoustique ─── */ :root:root[data-habit="mousse"],.apercu-habit[data-habit="mousse"],.titre-habit[data-habit="mousse"]{color-scheme:light; --paper:#EEF1EC;--surface:#F9FAF7;--sunk:#E2E8DE;--raised:#FFFFFF;--ink:#1F2A24;--ink-soft:#4E5B53;--ink-faint:#6A776F; --rule:#CAD3C6;--rule-soft:#DDE3D9;--dial:#2F6B4F;--dial-soft:#DCEBE2;--good-ink:#2E7D50;--warn:#B07A1E;--low:#B9473A;--on-dial:#FFFFFF; --display:"Nunito",system-ui,sans-serif;--body:"Figtree",system-ui,sans-serif;--mono:"Fragment Mono",ui-monospace,monospace} @scope ([data-habit="mousse"]) to (.apercu-habit){ :scope .fil{background:conic-gradient(from 45deg,#CDD5C8 25%,#E3E8DF 0 50%,#CDD5C8 0 75%,#E3E8DF 0) 0 0/14px 14px;border-bottom:0} :scope .fil a{background:#F9FAF7;border-radius:999px;padding:4px 11px} :scope .fil a[aria-current="page"]{background:#2F6B4F;color:#fff} :scope .fil-bouton{background:#F9FAF7;border-radius:999px;padding:5px 12px} :scope h1,:scope h2{font-weight:800} :scope :is(.bloc,.liste,.rangs,.tableau){border-color:transparent;border-radius:14px;overflow:hidden; box-shadow:0 1px 2px rgba(31,42,36,.06),0 6px 18px rgba(31,42,36,.06)} :scope .bouton,:scope .primaire{border-radius:999px} } /* ─── 20 Prestige ─── */ :root:root[data-habit="prestige"],.apercu-habit[data-habit="prestige"],.titre-habit[data-habit="prestige"]{color-scheme:light; --paper:#FFFFFF;--surface:#FFFFFF;--sunk:#F7F3EC;--raised:#FFFFFF;--ink:#121212;--ink-soft:#4A4A4A;--ink-faint:#7A756E; --rule:#E2DBCF;--rule-soft:#EFEAE2;--dial:#121212;--dial-soft:#F3ECDD;--good-ink:#4C7A4C;--warn:#A87A24;--low:#A23B2E;--on-dial:#FFFFFF; --display:"Cormorant Garamond",Georgia,serif;--body:"Manrope",system-ui,sans-serif;--mono:"Manrope",system-ui,sans-serif} @scope ([data-habit="prestige"]) to (.apercu-habit){ :scope .fil{background:#0E0E0E;border-bottom:1px solid #B08D4F} :scope .fil a{color:#BDB6A8} :scope .fil-sep{background:#BDB6A8} :scope .fil a[aria-current="page"],:scope .fil a:hover{color:#C9A86A} :scope .fil-moi{color:#BDB6A8} :scope .fil-moi button:hover{color:#C9A86A} :scope .fil-bouton{color:#EDE6D8} :scope h1,:scope h2{font-style:italic;font-weight:500} :scope h1{font-size:48px} :scope :is(.onglet,.liste-titre,.champ label,th,.etiq){letter-spacing:.2em;font-weight:600} :scope .onglet[aria-selected="true"]{color:#121212;border-bottom-color:#B08D4F} :scope .item[aria-current="true"]{border-left-color:#B08D4F} :scope .etiq{background:transparent;color:#8C6D35;box-shadow:inset 0 0 0 1px #C9A86A} }/* ─── 21 Ulm 1956 ─── Le design industriel allemand : la radio-phono blanche, son couvercle de plexiglas, la grille perforée du haut-parleur, des boutons gris et une seule touche orange. Rien d'autre ne colore la page. */ :root:root[data-habit="ulm"],.apercu-habit[data-habit="ulm"],.titre-habit[data-habit="ulm"]{color-scheme:light; --paper:#EDEBE6;--surface:#F7F6F2;--sunk:#E4E2DC;--raised:#FFFFFF;--ink:#2B2B2B;--ink-soft:#5E5E5B;--ink-faint:#73736F; --rule:#CFCCC5;--rule-soft:#DEDBD5;--dial:#D4561F;--dial-soft:#F6E2D6;--good-ink:#3E7D4C;--warn:#B97416;--low:#B8402F;--on-dial:#FFFFFF; --display:"Hanken Grotesk",system-ui,sans-serif;--body:"Hanken Grotesk",system-ui,sans-serif;--mono:"DM Mono",ui-monospace,monospace} @scope ([data-habit="ulm"]) to (.apercu-habit){ :scope .fil{background:radial-gradient(circle,#B9B6AE 0 1.3px,transparent 1.6px) 0 0/8px 8px,#E1DED7;border-bottom:1px solid #CFCCC5} :scope .fil a{background:#EDEBE6;border-radius:3px;padding:3px 9px;color:#4A4A47} :scope .fil a[aria-current="page"]{background:#2B2B2B;color:#F7F6F2} :scope .fil a[aria-current="page"]::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#E8692C;margin-right:6px;vertical-align:1px} :scope .fil-bouton{background:#EDEBE6;border-radius:3px;padding:4px 10px} :scope h1,:scope h2{font-weight:600;letter-spacing:-.025em} :scope h1{font-size:40px} :scope :is(.bloc,.liste,.rangs,.tableau){border-color:#DEDBD5;border-radius:6px;overflow:hidden;box-shadow:0 1px 0 #D6D3CC} :scope :is(.onglet,.liste-titre,.champ label,th){font-family:"DM Mono",ui-monospace,monospace;letter-spacing:.06em} :scope .onglet[aria-selected="true"]{color:#2B2B2B;border-bottom-color:#D4561F} :scope .bouton{background:linear-gradient(#F4F3EF,#DCDAD4);border:1px solid #BFBCB4;border-radius:4px;box-shadow:inset 0 1px #fff} :scope .bouton.primaire,:scope .primaire{background:#D4561F;border-color:#B4471A;box-shadow:inset 0 1px rgba(255,255,255,.22)} :scope .item[aria-current="true"]{border-left-color:#D4561F} :scope .etiq{background:#2B2B2B;color:#F7F6F2;border-radius:3px} } /* ─── 22 Munich 72 ─── Les Jeux de 1972 : bleu ciel, vert, orange et argent — ni noir, ni rouge —, tout en minuscules, des aplats francs et les bandes de couleur des affiches. */ :root:root[data-habit="munich"],.apercu-habit[data-habit="munich"],.titre-habit[data-habit="munich"]{color-scheme:light; --paper:#F4F6F3;--surface:#FFFFFF;--sunk:#E8EEF0;--raised:#FFFFFF;--ink:#133E5A;--ink-soft:#44637A;--ink-faint:#5E7789; --rule:#C9D6DD;--rule-soft:#DDE6EA;--dial:#1689C9;--dial-soft:#DCEEF8;--good-ink:#2E9B57;--warn:#D9761A;--low:#C2453A;--on-dial:#FFFFFF; --display:"Rubik",system-ui,sans-serif;--body:"Rubik",system-ui,sans-serif;--mono:"Red Hat Mono",ui-monospace,monospace} @scope ([data-habit="munich"]) to (.apercu-habit){ :scope .fil{background:#FFFFFF;border-bottom:0;border-top:6px solid; border-image:linear-gradient(90deg,#1689C9 0 25%,#2FA36B 25% 50%,#F08A24 50% 75%,#A7ADB3 75%) 1;text-transform:lowercase;letter-spacing:.01em} :scope .fil a{border-radius:3px;padding:3px 9px} :scope .fil a[aria-current="page"]{background:#1689C9;color:#fff} :scope :is(h1,h2,.onglet,.liste-titre,th){text-transform:lowercase} :scope h1,:scope h2{font-weight:500;letter-spacing:-.01em} :scope h1{font-size:44px;color:#1689C9} /* Les bandes des affiches sur les listes et les fiches ; les rangées et les tableaux gardent un simple filet. */ :scope :is(.bloc,.liste,.rangs,.tableau){border:0;border-radius:3px} :scope .liste{border-top:4px solid #1689C9} :scope .bloc{border-top:4px solid #2FA36B} :scope .bloc:nth-of-type(3n+2){border-top-color:#F08A24} :scope .bloc:nth-of-type(3n){border-top-color:#A7ADB3} :scope :is(.rangs,.tableau){border-top:1px solid #C9D6DD} :scope .bouton,:scope .primaire{border-radius:3px} :scope .item[aria-current="true"]{background:#DCEEF8;border-left-color:#1689C9} :scope .etiq{background:#2FA36B;color:#fff;border-radius:3px} } /* ─── 23 Pochette jazz ─── Les disques de jazz des années soixante : la bichromie bleue, le nom en capitales étroites et immenses, une référence de catalogue au-dessus, le blanc pour seul accent fort. */ :root:root[data-habit="jazz"],.apercu-habit[data-habit="jazz"],.titre-habit[data-habit="jazz"]{color-scheme:dark; --paper:#0F2C52;--surface:#143762;--sunk:#0C2445;--raised:#1A4272;--ink:#F2F5F8;--ink-soft:#B4C8DE;--ink-faint:#8CA8C8; --rule:#2A5285;--rule-soft:#1F4677;--dial:#7FB8E8;--dial-soft:#1D4A7C;--good-ink:#6FD39A;--warn:#F2B84B;--low:#FF7A6E;--on-dial:#0C2445; --display:"Oswald",system-ui,sans-serif;--body:"Libre Franklin",system-ui,sans-serif;--mono:"Fira Mono",ui-monospace,monospace} @scope ([data-habit="jazz"]) to (.apercu-habit){ :scope .fil{background:#0A0A0A;border-bottom:0;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:12.5px} :scope .fil a{color:#9DB4CF} :scope .fil a[aria-current="page"],:scope .fil a:hover{color:#FFFFFF;box-shadow:inset 0 -2px #7FB8E8} :scope .fil-moi,:scope .fil-bouton{color:#C9D7E6} :scope :is(h1,h2,.onglet,.liste-titre,th,.bouton,.primaire){font-family:"Oswald",sans-serif;text-transform:uppercase} :scope h1{font-size:62px;font-weight:700;line-height:.92;letter-spacing:-.005em} :scope h1::before{content:"Gaston · ST-1964";content:"Gaston · ST-1964" / "";display:block;font:500 11px/1.4 "Oswald",sans-serif;letter-spacing:.22em;color:#8CA8C8;margin-bottom:6px} :scope h2{font-weight:600;letter-spacing:.02em} :scope :is(.onglet,.liste-titre,th){letter-spacing:.12em} :scope :is(.bloc,.liste,.rangs,.tableau){border:0;border-radius:0} :scope .bouton,:scope .primaire{border-radius:0;letter-spacing:.1em} :scope .bouton.primaire,:scope .primaire{background:#FFFFFF;border-color:#FFFFFF;color:#0F2C52} :scope .item[aria-current="true"]{border-left-color:#FFFFFF} :scope .etiq{background:transparent;color:#FFFFFF;box-shadow:inset 0 0 0 1px #FFFFFF;border-radius:0} } /* ─── 24 Riviera 1960 ─── La carte postale de la Côte d'Azur : le sable pour fond, le bleu des stores rayés et leurs festons en guise de barre de menu, le nom de la page signé à la main sous un petit soleil, la mer turquoise pour les étiquettes. Le texte est bleu marine, jamais noir. */ :root:root[data-habit="riviera"],.apercu-habit[data-habit="riviera"],.titre-habit[data-habit="riviera"]{color-scheme:light; --paper:#F7F3EA;--surface:#FFFDF8;--sunk:#EFE8DA;--raised:#FFFFFF;--ink:#1E3A5A;--ink-soft:#4A6582;--ink-faint:#61768E; --rule:#DCD3C2;--rule-soft:#E9E2D4;--dial:#1D5FA8;--dial-soft:#DDE9F6;--good-ink:#2C8C78;--warn:#D9821E;--low:#C8443B;--on-dial:#FFFFFF; --display:"Outfit",system-ui,sans-serif;--body:"Outfit",system-ui,sans-serif;--mono:"Sometype Mono",ui-monospace,monospace} @scope ([data-habit="riviera"]) to (.apercu-habit){ /* Le store : des rayures bleu et sable, et leurs festons qui pendent sous la barre. */ :scope .fil{background:repeating-linear-gradient(90deg,#1D5FA8 0 26px,#F7F3EA 26px 52px);border-bottom:0;margin-bottom:12px} :scope .fil::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;pointer-events:none; background:radial-gradient(circle at 13px 0,#1D5FA8 12.5px,transparent 13px) 0 0/52px 12px repeat-x, radial-gradient(circle at 39px 0,#F7F3EA 12.5px,transparent 13px) 0 0/52px 12px repeat-x} :scope .fil a{background:#FFFDF8;color:#1E3A5A;border-radius:999px;padding:3px 10px;box-shadow:0 1px 2px rgba(30,58,90,.18)} :scope .fil a:hover{color:#1D5FA8} :scope .fil a[aria-current="page"]{background:#E2683C;color:#fff} :scope .fil-sep{background:#FFFDF8;opacity:.9} :scope .fil-moi{background:#FFFDF8;border-radius:999px;padding:3px 10px;color:#1E3A5A} :scope .fil-bouton{background:#FFFDF8;border-radius:999px;padding:4px 12px;color:#1E3A5A} :scope h1{font-family:"Yellowtail","Outfit",cursive;font-weight:400;font-size:50px;line-height:1.15;color:#1D5FA8;letter-spacing:.005em} :scope h1::before{content:"";display:inline-block;width:.42em;height:.42em;border-radius:50%;background:#F4C542;margin-right:.3em;vertical-align:.12em} :scope h2{font-weight:600;letter-spacing:.01em} :scope :is(.onglet,.liste-titre,.champ label,th){letter-spacing:.1em} :scope .onglet[aria-selected="true"]{color:#1E3A5A;border-bottom-color:#E2683C} :scope :is(.bloc,.liste,.rangs,.tableau){border-color:#E4DCCB;border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(30,58,90,.06),0 8px 22px rgba(30,58,90,.06)} :scope .bouton,:scope .primaire{border-radius:999px} :scope .item[aria-current="true"]{background:#FFF4E2;border-left-color:#E2683C} :scope .etiq{background:#BFE6EF;color:#1E3A5A;border-radius:999px} }