/* ============================================================================ Jonas Lismont — feuille de style unique. Organisation : 1. Polices (fallbacks calibrés) 2. SYSTÈME DE DESIGN — les tokens (:root) 3. Composants — écrits uniquement en fonction des tokens 4. THÈMES — six directions, chacune = un jeu de tokens (+ quelques règles de structure) : trois refontes (paper, console, bento) et trois variations de couleur sur la mise en page d'origine (amber, ivory, mono) 5. Responsive Changer de thème : poser l'attribut sur la balise — Sans attribut, le site garde sa direction d'origine (indigo). Les mêmes thèmes répondent aussi à [data-xdev-design="…"], l'attribut que pose la barre d'outils d'aperçu, pour pouvoir les comparer en direct. ========================================================================== */ /* 1 ── Polices ------------------------------------------------------------ Fallbacks métriquement ajustés : la police système occupe exactement la même place que la webfont, donc aucun saut au chargement. */ @font-face{ font-family:"Instrument Serif Fallback"; src:local("Georgia"); size-adjust:73.91%; ascent-override:133.95%; descent-override:41.94%; line-gap-override:0%; } @font-face{ font-family:"Inter Fallback"; src:local("Arial"); size-adjust:104.10%; ascent-override:93.06%; descent-override:23.17%; line-gap-override:0%; } /* 2 ── SYSTÈME DE DESIGN — tokens ---------------------------------------- */ :root{ color-scheme:dark; /* Couleur */ --bg:#0a0b12; --bg-soft:#11131d; --ink:#eef0f7; --muted:#9aa0b4; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14); --accent:#7c8cff; --accent-2:#ff6b6b; --on-accent:#0a0b12; /* texte posé sur --accent */ /* Familles */ --font-body:"Inter","Inter Fallback",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --font-display:"Instrument Serif","Instrument Serif Fallback",Georgia,serif; --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --font-ui:var(--font-body); /* boutons, étiquettes, liens */ /* Échelle typographique */ --leading-body:1.6; --h1-font:var(--font-display); --h1-size:clamp(40px,7.5vw,76px); --h1-weight:400; --h1-leading:1.04; --h1-tracking:-.01em; --h1-case:none; --h1-max:none; --h1-em-style:italic; --h1-em-color:var(--accent); --h1-after:""; /* curseur éventuel après le titre */ --title-font:var(--font-display); --title-size:27px; --title-weight:400; --title-leading:1.1; --title-tracking:-.01em; --title-case:none; --title-color:var(--ink); --lede-size:clamp(16px,2.2vw,19px); --lede-color:var(--muted); --lede-max:600px; --body-size:15px; --body-color:var(--muted); --body-max:none; --eyebrow-size:14px; --eyebrow-color:var(--accent); --eyebrow-tracking:.14em; --eyebrow-before:""; --label-size:13px; /* titres de section */ --label-tracking:.12em; --label-color:var(--muted); --label-rule:1px solid var(--line); --label-before:""; /* Formes */ --radius-card:18px; --radius-pill:999px; --radius-thumb:50%; /* Surfaces */ --card-bg:linear-gradient(180deg,rgba(22,24,36,.72),rgba(14,16,26,.66)); --card-bg-hover:linear-gradient(180deg,rgba(30,33,48,.8),rgba(18,20,32,.72)); --card-border:1px solid var(--line); --card-border-bottom:var(--card-border); --card-border-hover:var(--line-strong); --card-blur:blur(6px); --card-pad:26px; --card-min-h:172px; --shadow-card:0 18px 40px -18px rgba(0,0,0,.75),0 6px 16px -10px rgba(0,0,0,.6); --shadow-card-hover:0 28px 60px -20px rgba(0,0,0,.85),0 10px 22px -12px rgba(0,0,0,.7); --card-lift:translateY(-6px); --card-float:float 7s ease-in-out infinite; /* Étiquettes */ --tag-color:var(--accent); --tag-bg:rgba(124,140,255,.12); --tag-border:1px solid rgba(124,140,255,.25); --tag-pad:4px 10px; --tag-size:11px; --tag-open:""; --tag-close:""; /* Compteur d'abonnés */ --dot-size:6px; --dot-radius:50%; --dot-bg:var(--accent); --dot-shadow:0 0 8px 1px rgba(124,140,255,.65); --dot-anim:none; /* Liens d'action */ --link-color:var(--ink); --link-color-hover:var(--accent); --link-size:14px; --link-weight:600; --link-underline:none; /* Vignettes de chaîne */ --thumb-size:74px; --thumb-bg:#0e0b29; --thumb-border:1px solid var(--line-strong); --thumb-shadow:0 6px 20px -6px rgba(124,140,255,.45); --thumb-shadow-hover:0 8px 26px -6px rgba(124,140,255,.7); --thumb-filter:none; --thumb-filter-hover:none; --thumb-scale:scale(1.05); --thumb-margin:26px 0 -4px 26px; --badge-size:27px; --badge-radius:50%; --badge-ring:2.5px solid #0d0f1c; /* Rythme */ --max:1080px; --gutter:28px; --grid-cols:repeat(2,1fr); --grid-gap:18px; --section-space:42px; --intro-top:7vh; --intro-bottom:6vh; --footer-space:60px 0 70px; /* Commutateur de langue */ --chip-bg:rgba(20,22,34,.7); --chip-blur:blur(8px); --chip-border:1px solid var(--line); --chip-radius:999px; --chip-pad:3px; --chip-gap:2px; --chip-shadow:0 10px 26px -14px rgba(0,0,0,.85); --chip-btn-pad:7px 12px; --chip-btn-radius:999px; /* Ambiance de fond */ --stars-display:block; --stars-opacity:1; --stars-filter:none; --glow-top:-30vh; --glow-left:50%; --glow-translate:translateX(-50%); --glow-w:120vw; --glow-h:90vh; --glow-opacity:1; --glow-bg: radial-gradient(50% 60% at 30% 20%, rgba(124,140,255,.22), transparent 70%), radial-gradient(45% 55% at 75% 25%, rgba(255,107,107,.14), transparent 70%); --glow-filter:blur(20px); /* Mouvement */ --ease:cubic-bezier(.2,.7,.3,1); --speed:.25s; } /* 3 ── Composants --------------------------------------------------------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:var(--leading-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; } a{color:inherit;text-decoration:none} /* ciel étoilé */ .stars{ position:fixed; inset:0; width:100vw;height:100vh; pointer-events:none; z-index:0; display:var(--stars-display); opacity:var(--stars-opacity); filter:var(--stars-filter); } /* nappe lumineuse */ .glow{ position:fixed; top:var(--glow-top);left:var(--glow-left);transform:var(--glow-translate); width:var(--glow-w);height:var(--glow-h); background:var(--glow-bg); filter:var(--glow-filter); opacity:var(--glow-opacity); pointer-events:none;z-index:0; } .wrap{ position:relative;z-index:1; max-width:var(--max); margin:0 auto; padding:0 var(--gutter); } /* commutateur de langue */ .lang{ position:fixed;top:18px;right:18px;z-index:5; display:flex;gap:var(--chip-gap); padding:var(--chip-pad); background:var(--chip-bg); -webkit-backdrop-filter:var(--chip-blur); backdrop-filter:var(--chip-blur); border:var(--chip-border); border-radius:var(--chip-radius); box-shadow:var(--chip-shadow); } .lang-btn{ font-family:var(--font-ui); font-size:12px;font-weight:600;letter-spacing:.07em;line-height:1; color:var(--muted); background:none;border:0;cursor:pointer; padding:var(--chip-btn-pad);border-radius:var(--chip-btn-radius); transition:color .2s,background .2s; } .lang-btn:hover{color:var(--ink)} .lang-btn.is-on{color:var(--on-accent);background:var(--accent)} .lang-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* introduction */ .intro{padding-top:var(--intro-top);padding-bottom:var(--intro-bottom)} .eyebrow{ font-family:var(--font-ui); font-size:var(--eyebrow-size);font-weight:600; letter-spacing:var(--eyebrow-tracking);text-transform:uppercase; color:var(--eyebrow-color);margin-bottom:22px; } .eyebrow::before{content:var(--eyebrow-before)} h1{ font-family:var(--h1-font); font-weight:var(--h1-weight); font-size:var(--h1-size); line-height:var(--h1-leading); letter-spacing:var(--h1-tracking); text-transform:var(--h1-case); max-width:var(--h1-max); margin-bottom:26px; } h1 em{font-style:var(--h1-em-style);color:var(--h1-em-color)} h1::after{content:var(--h1-after);color:var(--accent)} .lede{ max-width:var(--lede-max); font-size:var(--lede-size); color:var(--lede-color); margin-bottom:24px; } .contact a{ font-size:16px;font-weight:500; border-bottom:1px solid var(--line-strong); padding-bottom:2px;transition:border-color .2s,color .2s; } .contact a:hover{color:var(--accent);border-color:var(--accent)} /* sections */ .group{padding:var(--section-space) 0} .group-title{ display:flex;align-items:baseline;justify-content:flex-start;gap:14px; font-family:var(--font-ui); font-size:var(--label-size);font-weight:600; letter-spacing:var(--label-tracking);text-transform:uppercase; color:var(--label-color); margin-bottom:22px; padding-bottom:14px; border-bottom:var(--label-rule); } .group-title>span:first-child::before{content:var(--label-before)} .group-total{ color:var(--accent); letter-spacing:.06em; white-space:nowrap; } /* grille de projets */ .grid{ display:grid; grid-template-columns:var(--grid-cols); gap:var(--grid-gap); } .card{ display:flex;flex-direction:column; background:var(--card-bg); -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur); border:var(--card-border); border-bottom:var(--card-border-bottom); border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-card); transition:transform var(--speed) var(--ease),border-color var(--speed),background var(--speed),box-shadow var(--speed); min-height:var(--card-min-h); animation:var(--card-float); } .card:hover{ transform:var(--card-lift); border-color:var(--card-border-hover); background:var(--card-bg-hover); box-shadow:var(--shadow-card-hover); animation-play-state:paused; } @keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} } /* décalage : la grille dérive de façon organique, pas au garde-à-vous */ .grid .card:nth-child(2n){animation-delay:-2.3s;animation-duration:8s} .grid .card:nth-child(3n){animation-delay:-4.1s;animation-duration:7.5s} .grid .card:nth-child(4n){animation-delay:-1.2s} @media (prefers-reduced-motion:reduce){ .card{animation:none} } .card.feature{grid-column:span 1} .card-body{padding:var(--card-pad) var(--card-pad) calc(var(--card-pad) - 2px);display:flex;flex-direction:column;flex:1} .tag{ display:inline-block;align-self:flex-start; font-family:var(--font-ui); font-size:var(--tag-size);font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--tag-color); background:var(--tag-bg); border:var(--tag-border); padding:var(--tag-pad);border-radius:var(--radius-pill); margin-bottom:16px; } .tag::before{content:var(--tag-open)} .tag::after{content:var(--tag-close)} .tag-muted{color:var(--muted);background:rgba(255,255,255,.05);border-color:var(--line)} .card h3{ font-family:var(--title-font); font-weight:var(--title-weight); font-size:var(--title-size); line-height:var(--title-leading); letter-spacing:var(--title-tracking); text-transform:var(--title-case); color:var(--title-color); margin-bottom:10px; } .card p{font-size:var(--body-size);color:var(--body-color);max-width:var(--body-max);margin-bottom:18px} .count{ display:inline-flex;align-items:center;gap:7px;align-self:flex-start; font-family:var(--font-ui); font-size:12.5px;font-weight:600;color:var(--ink); margin:-2px 0 14px; } .count::before{ content:"";width:var(--dot-size);height:var(--dot-size);border-radius:var(--dot-radius); background:var(--dot-bg);box-shadow:var(--dot-shadow); animation:var(--dot-anim); } .link{ margin-top:auto; font-family:var(--font-ui); font-size:var(--link-size);font-weight:var(--link-weight);color:var(--link-color); transition:color .2s,letter-spacing .2s; } .card:hover .link{color:var(--link-color-hover);text-decoration:var(--link-underline)} /* cartes de chaîne, avec vignette */ .card.media{min-height:0} .thumb{ width:var(--thumb-size);height:var(--thumb-size);border-radius:var(--radius-thumb); border:var(--thumb-border); background:var(--thumb-bg); box-shadow:var(--thumb-shadow); filter:var(--thumb-filter); transition:transform var(--speed) var(--ease),box-shadow var(--speed),filter var(--speed); } .card.media:hover .thumb{ transform:var(--thumb-scale); box-shadow:var(--thumb-shadow-hover); filter:var(--thumb-filter-hover); } .card.media .card-body{padding-top:18px} /* pastille de plateforme sur la vignette */ .thumb-wrap{position:relative;align-self:flex-start;margin:var(--thumb-margin);line-height:0} .thumb-wrap .thumb{margin:0} .badge{ position:absolute;right:-3px;bottom:-3px; width:var(--badge-size);height:var(--badge-size);border-radius:var(--badge-radius); display:flex;align-items:center;justify-content:center; border:var(--badge-ring); box-shadow:0 2px 8px -1px rgba(0,0,0,.6); transition:transform var(--speed) var(--ease); } .card.media:hover .badge{transform:scale(1.06)} .badge svg{width:14px;height:14px;display:block;fill:#fff} .badge-x{background:#000} .badge-tg{background:#2aabee} .badge-tg svg{width:16px;height:16px} /* carte pleine largeur à deux liens */ .card.media.wide{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:6px; } .card.media.wide>.thumb{flex:0 0 auto;margin:0 4px 0 26px} .card.media.wide .card-body{padding:22px 26px 22px 6px} .link-row{ margin-top:auto; display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center; } .link-row a{font-family:var(--font-ui);font-size:var(--link-size);font-weight:var(--link-weight);color:var(--link-color);transition:color .2s} .link-row a:hover{color:var(--link-color-hover)} .link-row a.muted{color:var(--muted);font-weight:500} .link-row a.muted:hover{color:var(--link-color-hover)} /* pied de page */ footer{padding:var(--footer-space);color:var(--muted);font-size:14px} footer a{border-bottom:1px solid var(--line);transition:color .2s,border-color .2s} footer a:hover{color:var(--accent);border-color:var(--accent)} /* 4 ── THÈMES ------------------------------------------------------------- Chaque direction se déclare d'abord en tokens ; seules les rares différences de structure sont écrites en règles. */ /* --- Studio papier ------------------------------------------------------- Plein jour, fond papier, pas de cartes : une colonne d'entrées séparées par un filet, gros serif, terre de Sienne comme unique accent. */ :is([data-theme="paper"],[data-xdev-design="paper"]){ color-scheme:light; --bg:#f7f4ed; --bg-soft:#efe9dd; --ink:#181510; --muted:#6d6659; --line:rgba(24,21,16,.13); --line-strong:rgba(24,21,16,.34); --accent:#b0451d; --accent-2:#1f5c4a; --on-accent:#f7f4ed; --h1-size:clamp(42px,6.6vw,68px); --h1-leading:1.06; --h1-tracking:-.005em; --h1-max:14ch; --lede-size:clamp(17px,2.2vw,20px); --lede-color:#3c372e; --lede-max:52ch; --eyebrow-color:var(--muted); --eyebrow-size:12px; --eyebrow-tracking:.22em; --label-size:12px; --label-tracking:.2em; --label-color:var(--ink); --label-rule:1px solid var(--line-strong); --title-size:31px; --body-size:16px; --body-max:60ch; --max:820px; --grid-cols:1fr; --grid-gap:0; --section-space:34px; --intro-top:11vh; --intro-bottom:8vh; --footer-space:48px 0 64px; --card-bg:none; --card-bg-hover:rgba(24,21,16,.035); --card-border:0; --card-border-bottom:1px solid var(--line); --card-blur:none; --shadow-card:none; --shadow-card-hover:none; --card-lift:none; --card-float:none; --card-min-h:0; --radius-card:0; --tag-color:var(--accent); --tag-bg:none; --tag-border:0; --tag-pad:0; --dot-shadow:none; --link-color:var(--muted); --link-size:13.5px; --link-weight:500; --thumb-size:62px; --thumb-bg:var(--bg-soft); --thumb-shadow:none; --thumb-shadow-hover:none; --thumb-scale:none; --badge-ring:2.5px solid var(--bg); --chip-bg:none; --chip-blur:none; --chip-border:0; --chip-shadow:none; --chip-pad:0; --chip-gap:10px; --chip-radius:0; --chip-btn-radius:0; --chip-btn-pad:4px 2px; --stars-display:none; --glow-bg:radial-gradient(60% 50% at 50% 0%, rgba(176,69,29,.07), transparent 70%); --glow-filter:none; } :is([data-theme="paper"],[data-xdev-design="paper"]) .group-title{margin-bottom:0;padding-bottom:10px} :is([data-theme="paper"],[data-xdev-design="paper"]) .card-body{padding:26px 14px 26px 0;transition:padding .2s} :is([data-theme="paper"],[data-xdev-design="paper"]) .card:hover .card-body{padding-left:14px} :is([data-theme="paper"],[data-xdev-design="paper"]) .lang-btn{border-bottom:1px solid transparent} :is([data-theme="paper"],[data-xdev-design="paper"]) .lang-btn.is-on{ color:var(--ink);background:none;border-bottom-color:var(--accent); } :is([data-theme="paper"],[data-xdev-design="paper"]) .contact a{color:var(--accent);border-color:var(--accent)} /* chaînes : vignette à gauche, texte à droite, comme une notice */ :is([data-theme="paper"],[data-xdev-design="paper"]) .card.media{flex-direction:row;align-items:flex-start} :is([data-theme="paper"],[data-xdev-design="paper"]) .card.media .thumb-wrap{margin:26px 20px 26px 0} :is([data-theme="paper"],[data-xdev-design="paper"]) .card.media .card-body{padding-top:26px} /* --- Salle de contrôle --------------------------------------------------- Chasse fixe, fond noir strié d'une grille, vert phosphore en seul signal. Panneaux carrés et denses, curseur clignotant après le titre. */ :is([data-theme="console"],[data-xdev-design="console"]){ --bg:#04070a; --bg-soft:#080d12; --ink:#cfe0d6; --muted:#68807a; --line:rgba(62,242,160,.16); --line-strong:rgba(62,242,160,.42); --accent:#3ef2a0; --accent-2:#f2a03e; --on-accent:#04070a; --font-body:var(--font-mono); --font-ui:var(--font-mono); --leading-body:1.55; --h1-font:var(--font-mono); --h1-weight:500; --h1-size:clamp(28px,4.6vw,48px); --h1-leading:1.18; --h1-tracking:-.02em; --h1-em-style:normal; --h1-after:"_"; --lede-size:15px; --lede-max:66ch; --eyebrow-size:12px; --eyebrow-tracking:.2em; --eyebrow-before:"> "; --label-size:12px; --label-tracking:.16em; --label-color:var(--accent); --label-rule:1px dashed var(--line-strong); --label-before:"// "; --title-font:var(--font-mono); --title-weight:500; --title-size:19px; --title-tracking:-.02em; --body-size:13.5px; --section-space:30px; --intro-top:9vh; --intro-bottom:5vh; --grid-gap:12px; --radius-card:0; --card-bg:rgba(8,13,18,.86); --card-bg-hover:rgba(62,242,160,.05); --card-blur:none; --card-border-hover:var(--accent); --shadow-card:none; --shadow-card-hover:0 0 0 1px rgba(62,242,160,.25); --card-lift:none; --card-float:none; --card-min-h:0; --card-pad:18px; --tag-color:var(--accent); --tag-bg:none; --tag-border:0; --tag-pad:0; --tag-open:"["; --tag-close:"]"; --dot-radius:0; --dot-size:7px; --dot-shadow:none; --dot-anim:consoleBlink 2.4s ease-in-out infinite; --link-color:var(--accent); --link-color-hover:var(--accent); --link-size:13px; --link-weight:400; --link-underline:underline; --thumb-size:54px; --radius-thumb:0; --thumb-bg:#080d12; --thumb-shadow:none; --thumb-shadow-hover:none; --thumb-scale:none; --thumb-filter:saturate(.55) contrast(1.1); --thumb-filter-hover:none; --thumb-margin:18px 0 -2px 18px; --badge-size:22px; --badge-radius:0; --badge-ring:2px solid #080d12; --chip-bg:#04070a; --chip-blur:none; --chip-border:1px solid var(--line-strong); --chip-radius:0; --chip-btn-radius:0; --chip-pad:0; --chip-gap:0; --chip-shadow:none; --stars-opacity:.35; --stars-filter:hue-rotate(95deg) saturate(1.6); --glow-top:0; --glow-left:0; --glow-translate:none; --glow-w:100vw; --glow-h:100vh; --glow-opacity:.5; --glow-filter:none; --glow-bg: linear-gradient(rgba(62,242,160,.055) 1px, transparent 1px) 0 0/100% 34px, linear-gradient(90deg, rgba(62,242,160,.055) 1px, transparent 1px) 0 0/34px 100%; } @keyframes consoleCaret{0%,49%{opacity:1}50%,100%{opacity:0}} @keyframes consoleBlink{0%,100%{opacity:1}50%{opacity:.25}} :is([data-theme="console"],[data-xdev-design="console"]) h1::after{ animation:consoleCaret 1.05s step-end infinite; } :is([data-theme="console"],[data-xdev-design="console"]) .group-title{margin-bottom:16px;padding-bottom:10px} :is([data-theme="console"],[data-xdev-design="console"]) .card.media .card-body{padding-top:14px} :is([data-theme="console"],[data-xdev-design="console"]) .contact a{color:var(--accent);border-color:var(--line-strong)} @media (prefers-reduced-motion:reduce){ :is([data-theme="console"],[data-xdev-design="console"]) h1::after, :is([data-theme="console"],[data-xdev-design="console"]) .count::before{animation:none} } /* --- Affiche bento ------------------------------------------------------- Titre géant en dégradé, puis une mosaïque de tuiles de largeurs inégales, chacune avec sa couleur, qui se soulèvent au survol. */ :is([data-theme="bento"],[data-xdev-design="bento"]){ --bg:#08060f; --bg-soft:#120d20; --ink:#f6f2ff; --muted:#a99dc4; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.24); --accent:#ff4d8d; --accent-2:#7cf7d4; --on-accent:#08060f; --h1-size:clamp(52px,10.5vw,118px); --h1-leading:.92; --h1-tracking:-.035em; --h1-em-color:inherit; --lede-size:clamp(17px,2.3vw,21px); --lede-color:var(--muted); --lede-max:56ch; --eyebrow-color:var(--accent-2); --eyebrow-size:12px; --eyebrow-tracking:.28em; --label-size:12px; --label-tracking:.22em; --label-rule:0; --title-font:var(--font-body); --title-weight:600; --title-size:30px; --title-tracking:-.03em; --body-color:rgba(246,242,255,.72); --max:1140px; --grid-cols:repeat(6,1fr); --grid-gap:16px; --section-space:26px; --intro-top:12vh; --intro-bottom:9vh; --footer-space:70px 0 80px; --radius-card:30px; --card-pad:30px; --card-blur:blur(2px); --card-bg:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); --card-bg-hover:var(--card-bg); --shadow-card:0 26px 60px -30px rgba(0,0,0,.9); --shadow-card-hover:0 40px 80px -34px rgba(0,0,0,.95); --card-lift:translateY(-8px) scale(1.012); --card-float:none; --tag-bg:rgba(8,6,15,.5); --tag-border:1px solid var(--line-strong); --tag-color:var(--ink); --dot-bg:var(--accent-2); --dot-shadow:0 0 10px 2px rgba(124,247,212,.6); --link-color:var(--ink); --link-color-hover:var(--accent-2); --thumb-size:82px; --radius-thumb:26px; --thumb-shadow:0 12px 30px -10px rgba(0,0,0,.8); --thumb-shadow-hover:var(--thumb-shadow); --thumb-scale:none; --thumb-margin:30px 0 -6px 30px; --badge-size:30px; --badge-ring:3px solid #17102a; --chip-bg:rgba(18,13,32,.75); --chip-border:1px solid var(--line-strong); --chip-radius:14px; --chip-btn-radius:11px; --stars-opacity:.35; --glow-h:110vh; --glow-filter:blur(40px); --glow-bg: radial-gradient(45% 55% at 20% 12%, rgba(255,77,141,.30), transparent 70%), radial-gradient(45% 55% at 80% 18%, rgba(124,247,212,.20), transparent 70%), radial-gradient(60% 40% at 50% 60%, rgba(120,80,255,.22), transparent 75%); } /* le titre se remplit d'un dégradé */ :is([data-theme="bento"],[data-xdev-design="bento"]) h1{ background:linear-gradient(112deg,#ffffff 20%,#ffb3cd 52%,#7cf7d4 92%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; margin-bottom:30px; } :is([data-theme="bento"],[data-xdev-design="bento"]) .eyebrow{margin-bottom:18px} :is([data-theme="bento"],[data-xdev-design="bento"]) .contact a{ display:inline-block; border:0;padding:11px 22px;border-radius:var(--radius-pill); color:var(--on-accent);background:var(--accent-2);font-weight:600; transition:transform .2s,box-shadow .2s; } :is([data-theme="bento"],[data-xdev-design="bento"]) .contact a:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(124,247,212,.7); color:var(--on-accent); } :is([data-theme="bento"],[data-xdev-design="bento"]) .group-title{padding-bottom:0;margin-bottom:16px} :is([data-theme="bento"],[data-xdev-design="bento"]) .group-total{ color:var(--on-accent);background:var(--accent-2); padding:3px 10px;border-radius:var(--radius-pill);font-size:11px; } /* mosaïque : bandeaux pleine largeur pour les produits, rythme 4/2 puis 2/4 pour les chaînes */ :is([data-theme="bento"],[data-xdev-design="bento"]) .card{grid-column:span 3} :is([data-theme="bento"],[data-xdev-design="bento"]) .card.feature{grid-column:span 6;min-height:230px} :is([data-theme="bento"],[data-xdev-design="bento"]) .card:not(.feature):not(.media){grid-column:span 6} :is([data-theme="bento"],[data-xdev-design="bento"]) .card.media:nth-child(1){grid-column:span 4} :is([data-theme="bento"],[data-xdev-design="bento"]) .card.media:nth-child(2){grid-column:span 2} :is([data-theme="bento"],[data-xdev-design="bento"]) .card.media:nth-child(3){grid-column:span 2} :is([data-theme="bento"],[data-xdev-design="bento"]) .card.media:nth-child(4){grid-column:span 4} /* une couleur par tuile */ :is([data-theme="bento"],[data-xdev-design="bento"]) .card.feature{ background:linear-gradient(140deg,rgba(255,77,141,.30),rgba(120,80,255,.16) 60%,rgba(255,255,255,.03)); } :is([data-theme="bento"],[data-xdev-design="bento"]) .card.media:nth-child(1){ background:linear-gradient(140deg,rgba(124,247,212,.24),rgba(255,255,255,.03)); } :is([data-theme="bento"],[data-xdev-design="bento"]) .card.media:nth-child(2){ background:linear-gradient(140deg,rgba(255,196,84,.24),rgba(255,255,255,.03)); } :is([data-theme="bento"],[data-xdev-design="bento"]) .card.media:nth-child(3){ background:linear-gradient(140deg,rgba(122,150,255,.26),rgba(255,255,255,.03)); } :is([data-theme="bento"],[data-xdev-design="bento"]) .card.media:nth-child(4){ background:linear-gradient(140deg,rgba(255,120,190,.24),rgba(255,255,255,.03)); } :is([data-theme="bento"],[data-xdev-design="bento"]) .card.feature h3{font-size:40px} :is([data-theme="bento"],[data-xdev-design="bento"]) .card.media .card-body{padding-top:20px} /* --- Ambre nocturne ------------------------------------------------------ Même mise en page, nuit plus chaude : fond expresso, ambre en accent, terracotta en second. */ :is([data-theme="amber"],[data-xdev-design="amber"]){ --bg:#0c0906; --bg-soft:#17100a; --ink:#f7efe2; --muted:#b6a086; --line:rgba(255,226,190,.10); --line-strong:rgba(255,226,190,.20); --accent:#f0a93c; --accent-2:#e0603c; --on-accent:#1a1006; --card-bg:linear-gradient(180deg,rgba(38,27,18,.74),rgba(22,15,10,.68)); --card-bg-hover:linear-gradient(180deg,rgba(50,35,22,.82),rgba(29,20,13,.74)); --shadow-card:0 18px 40px -18px rgba(20,8,0,.8),0 6px 16px -10px rgba(20,8,0,.65); --shadow-card-hover:0 28px 60px -20px rgba(20,8,0,.9),0 10px 22px -12px rgba(20,8,0,.75); --tag-bg:rgba(240,169,60,.14); --tag-border:1px solid rgba(240,169,60,.30); --dot-shadow:0 0 8px 1px rgba(240,169,60,.7); --thumb-bg:#2a1a08; --thumb-shadow:0 6px 20px -6px rgba(240,169,60,.5); --thumb-shadow-hover:0 8px 26px -6px rgba(240,169,60,.75); --badge-ring:2.5px solid #17100a; --chip-bg:rgba(34,23,14,.72); --stars-filter:sepia(.45) saturate(1.35) hue-rotate(-8deg); --glow-bg: radial-gradient(50% 60% at 30% 20%, rgba(240,169,60,.20), transparent 70%), radial-gradient(45% 55% at 75% 25%, rgba(224,96,60,.16), transparent 70%); } /* --- Ivoire & vert ------------------------------------------------------- Le mouvement inverse : fond papier chaud, texte encre, vert profond en accent, brique en second. Les cartes deviennent des feuilles blanches. */ :is([data-theme="ivory"],[data-xdev-design="ivory"]){ color-scheme:light; --bg:#f7f3ea; --bg-soft:#efe9dc; --ink:#16181c; --muted:#6a6f76; --line:rgba(20,24,28,.12); --line-strong:rgba(20,24,28,.24); --accent:#1f6f57; --accent-2:#c05a37; --on-accent:#fff; --card-bg:linear-gradient(180deg,rgba(255,255,255,.92),rgba(252,249,243,.88)); --card-bg-hover:linear-gradient(180deg,#fff,rgba(255,254,251,.95)); --shadow-card:0 18px 40px -24px rgba(20,24,28,.35),0 4px 12px -8px rgba(20,24,28,.18); --shadow-card-hover:0 28px 56px -26px rgba(20,24,28,.42),0 8px 18px -10px rgba(20,24,28,.2); --tag-bg:rgba(31,111,87,.10); --tag-border:1px solid rgba(31,111,87,.28); --dot-shadow:0 0 8px 1px rgba(31,111,87,.45); --thumb-bg:#e6e0d3; --thumb-shadow:0 6px 18px -8px rgba(20,24,28,.4); --thumb-shadow-hover:0 8px 24px -8px rgba(20,24,28,.5); --badge-ring:2.5px solid #fff; --chip-bg:rgba(255,255,255,.75); --chip-shadow:0 10px 26px -16px rgba(20,24,28,.45); --stars-display:none; --glow-bg: radial-gradient(50% 60% at 30% 20%, rgba(31,111,87,.14), transparent 70%), radial-gradient(45% 55% at 75% 25%, rgba(192,90,55,.12), transparent 70%); } /* --- Noir & blanc -------------------------------------------------------- La version dure : ni halo, ni dégradé, ni dérive. Noir d'encre, filets d'un cheveu, angles droits, le rouge comme unique signal. Les titres quittent le serif pour un sans serrré en capitales — un index imprimé. Au survol, la carte s'inverse : fond blanc, texte noir. */ :is([data-theme="mono"],[data-xdev-design="mono"]){ --bg:#080808; --bg-soft:#111; --ink:#fafafa; --muted:#8b8b8b; --line:rgba(255,255,255,.16); --line-strong:rgba(255,255,255,.42); --accent:#ff2d2d; --accent-2:#fff; --on-accent:#080808; --h1-font:var(--font-body); --h1-weight:600; --h1-size:clamp(38px,7vw,68px); --h1-leading:.98; --h1-tracking:-.02em; --h1-case:uppercase; --h1-em-style:normal; --eyebrow-color:var(--ink); --label-color:var(--ink); --label-rule:1px solid var(--line-strong); --title-font:var(--font-body); --title-weight:600; --title-size:21px; --title-tracking:-.015em; --title-case:uppercase; --radius-card:0; --radius-pill:0; --radius-thumb:0; --card-bg:#0c0c0c; --card-bg-hover:#fafafa; --card-border-hover:#fafafa; --card-blur:none; --shadow-card:none; --shadow-card-hover:none; --card-lift:none; --card-float:none; --tag-bg:none; --tag-border:1px solid var(--line-strong); --tag-color:var(--ink); --tag-size:10.5px; --dot-radius:0; --dot-size:7px; --dot-shadow:none; --link-color:var(--accent); --link-color-hover:var(--accent); --link-underline:underline; --thumb-bg:#141414; --thumb-shadow:none; --thumb-shadow-hover:none; --thumb-scale:none; --thumb-filter:grayscale(1) contrast(1.05); --thumb-filter-hover:none; --badge-radius:0; --badge-ring:2px solid #0c0c0c; --chip-bg:#080808; --chip-blur:none; --chip-radius:0; --chip-btn-radius:0; --chip-pad:0; --chip-gap:0; --chip-shadow:none; --chip-btn-pad:8px 13px; --stars-opacity:.5; --stars-filter:grayscale(1) contrast(1.15); --glow-bg:none; --glow-filter:none; } :is([data-theme="mono"],[data-xdev-design="mono"]) .lang-btn.is-on{color:#080808;background:#fafafa} /* au survol, toute la carte s'inverse */ :is([data-theme="mono"],[data-xdev-design="mono"]) .card:hover{color:#080808} :is([data-theme="mono"],[data-xdev-design="mono"]) .card:hover h3, :is([data-theme="mono"],[data-xdev-design="mono"]) .card:hover p, :is([data-theme="mono"],[data-xdev-design="mono"]) .card:hover .count, :is([data-theme="mono"],[data-xdev-design="mono"]) .card:hover .link, :is([data-theme="mono"],[data-xdev-design="mono"]) .card:hover .link-row a{color:#080808} :is([data-theme="mono"],[data-xdev-design="mono"]) .card:hover .tag{ color:#080808;background:none;border-color:#080808; } :is([data-theme="mono"],[data-xdev-design="mono"]) .card.media:hover .badge{border-color:#fafafa} :is([data-theme="mono"],[data-xdev-design="mono"]) .badge{right:-4px;bottom:-4px} /* 5 ── Responsive --------------------------------------------------------- */ @media (max-width:860px){ :is([data-theme="bento"],[data-xdev-design="bento"]){--grid-cols:repeat(2,1fr)} :is([data-theme="bento"],[data-xdev-design="bento"]) .card, :is([data-theme="bento"],[data-xdev-design="bento"]) .card.feature, :is([data-theme="bento"],[data-xdev-design="bento"]) .card:not(.feature):not(.media), :is([data-theme="bento"],[data-xdev-design="bento"]) .card.media:nth-child(n){grid-column:span 2} } @media (max-width:720px){ :root{--grid-cols:1fr} :is([data-theme="bento"],[data-xdev-design="bento"]) .card, :is([data-theme="bento"],[data-xdev-design="bento"]) .card.feature, :is([data-theme="bento"],[data-xdev-design="bento"]) .card:not(.feature):not(.media), :is([data-theme="bento"],[data-xdev-design="bento"]) .card.media:nth-child(n){grid-column:1 / -1} :is([data-theme="bento"],[data-xdev-design="bento"]) .card-body{padding:24px 22px 22px} /* laisser la place au commutateur de langue épinglé en haut à droite */ .intro{padding-top:calc(var(--intro-top) + 26px)} .lang{top:12px;right:12px} .lang-btn{padding:6px 11px} .card.media.wide{flex-direction:column;align-items:stretch;gap:0} .card.media.wide>.thumb{margin:26px 0 -4px 26px} .card.media.wide .card-body{padding:18px 26px 24px} /* Studio papier : la notice repasse en colonne */ :is([data-theme="paper"],[data-xdev-design="paper"]) .card.media{flex-direction:column} :is([data-theme="paper"],[data-xdev-design="paper"]) .card.media .thumb-wrap{margin:24px 0 0} :is([data-theme="paper"],[data-xdev-design="paper"]) .card.media .card-body{padding-top:16px} :is([data-theme="paper"],[data-xdev-design="paper"]) .card-body{padding:20px 0 24px} }