/* =========================================================================== OFSH Hero — la landing de l'Organization OFSH. TASK-1699. Source : design/HomePage/OFSH-Homepage-Couleurs (maquette validee par Cyril le 25/10, 4 PNG de reference + home.css + home-color.css). ## Ce fichier est la FUSION des deux feuilles de la maquette `home.css` posait la structure, `home-color.css` la variante chromatique 2 et l'ecrasait par un `body.ofsh-color-variant`. Les servir toutes les deux aurait fait deux requetes pour un seul rendu, et laisse un selecteur de variante qui ne designe plus rien : il n'y a qu'une variante, c'est celle que Cyril a validee. L'ordre de cascade de la maquette est PRESERVE : structure d'abord, chromie ensuite. Les valeurs n'ont pas ete retouchees — ce qui est a l'ecran est ce qui a ete valide. ## Les deux seules modifications de fond 1. Les deux blocs `:root` sont remplaces par celui ci-dessous, CABLE SUR LES JETONS DE THEME. Chaque variable prend `var(--bp-x, )` : le theme `ofsh` (`config/bouclepro_themes.php`) pilote la couleur, et le litteral de la maquette reste le repli si le producteur de jetons venait a manquer. Rien ne peut donc devenir invisible en silence. 2. Un volet SOMBRE, en fin de fichier, sous `prefers-color-scheme`. Voir le bloc qui l'introduit : il explique pourquoi ce n'est pas `.dark`. =========================================================================== */ :root { /* Les quatre couleurs d'ADN OFSH, prises au theme. */ --ofsh-blue: var(--bp-primary, #097FD5); --ofsh-deep: var(--bp-primary-deep, #0B3C72); --ofsh-green: var(--bp-accent, #158C68); --ofsh-amber: var(--bp-validation, #FFC247); --ofsh-coral: var(--bp-warning, #F26A35); /* Encre, surfaces, filets. */ --ink: var(--bp-text, #09294B); --ink-soft: #28445D; --muted: var(--bp-muted, #536D83); --paper: var(--bp-page, #F8FBFA); --panel: var(--bp-panel, #FFFFFF); --line: var(--bp-border, #DDE9E7); /* Alias historiques de la maquette : un seul endroit les definit. */ --ocean: var(--ofsh-blue); --deep: var(--ofsh-deep); --green: var(--ofsh-green); --amber: var(--ofsh-amber); --coral: var(--ofsh-coral); --ease: cubic-bezier(.2,.8,.2,1); } /* OFSH Home • BouclePro organization theme • 2026-10-25 */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;color:var(--ink);background:radial-gradient(88% 84% at 94% 10%,#fff 0%,#faf9f5 60%,#f6f5f1 100%)} a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #4c85aa;outline-offset:4px} .page{min-height:100vh;max-width:1540px;margin:auto;display:flex;flex-direction:column;padding:18px clamp(24px,3vw,56px) 14px} .nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px;position:relative;z-index:20} .logo img{width:191px;height:auto;display:block;margin-left:-12px} .nav-links{display:flex;align-items:center;gap:31px;font-size:14px;font-weight:650} .nav-links>a:not(.nav-dashboard),.mobile-menu>a:not(.nav-dashboard){transition:color .2s;color:var(--ink-soft)} .nav-links>a:not(.nav-dashboard):hover,.mobile-menu>a:not(.nav-dashboard):hover{color:var(--ocean)} .lang{display:flex;align-items:center;gap:4px;font-size:12px} .lang a{padding:6px 8px;border-radius:8px;color:#a1abba}.lang a.active{background:#ecefed;color:var(--ink)} .nav-dashboard{padding:13px 23px;border:1px solid #e6e9ed;border-radius:40px;box-shadow:0 6px 19px rgba(16,51,75,.07);background:#fff;white-space:nowrap} .nav-dashboard:hover{box-shadow:0 8px 24px rgba(16,51,75,.12)} .burger{display:none;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px;color:var(--ink)}.burger .icon{width:23px;height:23px;display:block} .mobile-menu{display:none}.mobile-menu[hidden]{display:none} .hero{flex:1;display:grid;grid-template-columns:minmax(0,1.01fr) minmax(0,.99fr);align-items:center;gap:clamp(16px,2.5vw,60px);padding:8px 0 22px} .lead{position:relative;z-index:2;padding-bottom:12px} .eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#468671;display:flex;align-items:center;gap:11px;margin-bottom:28px} .eyebrow:before{content:"";display:inline-block;width:25px;height:2px;background:#64a18b} h1{margin:0 0 26px;font-weight:820;letter-spacing:-.059em;line-height:1.035;font-size:clamp(40px,4.42vw,69px);text-wrap:balance} h1 span{display:block}h1 .line-blue{color:#2675a7}h1 .line-green{color:#4a986f} .intro{color:var(--muted);font-size:clamp(16px,1.22vw,19px);line-height:1.7;max-width:540px;margin:0 0 23px} .mantra{font-weight:720;letter-spacing:-.025em;color:var(--ink-soft);font-size:clamp(15px,1.55vw,21px);display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:29px} .mantra .bullet{width:5px;height:5px;border-radius:50%;background:#bcc5c8} .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .cta{min-height:54px;padding:16px 23px;border-radius:30px;display:inline-flex;align-items:center;justify-content:center;gap:14px;font-size:15px;font-weight:740;transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .cta:hover{transform:translateY(-2px)}.cta-primary{background:var(--deep);color:#fff;box-shadow:0 14px 29px rgba(25,72,113,.2)}.cta-primary:hover{box-shadow:0 18px 35px rgba(25,72,113,.3)} .cta-secondary{background:#fff;border:1px solid #e4e8e7;box-shadow:0 5px 14px rgba(20,49,65,.06)}.cta svg{width:18px;height:18px} .orbit-wrap{position:relative;width:min(100%,640px);height:620px;justify-self:center;isolation:isolate} .orbit-bg{position:absolute;inset:23px 4px 7px 4px;background:url('/img/ofsh/orbits.svg') center/contain no-repeat;pointer-events:none;z-index:-1} .orbit-center{position:absolute;inset:37%;border-radius:50%;background:rgba(255,255,255,.30);filter:blur(30px);pointer-events:none} .orbit-card{position:absolute;display:flex;gap:14px;align-items:flex-start;padding:19px 19px 19px 18px;border-radius:24px;width:clamp(215px,16.8vw,242px);min-height:116px;box-shadow:0 19px 33px rgba(13,33,52,.11),0 3px 8px rgba(13,33,52,.02);border:1px solid rgba(255,255,255,.7);transition:transform .23s var(--ease),box-shadow .23s var(--ease);z-index:2} .orbit-card:hover{transform:translateY(-6px);box-shadow:0 25px 42px rgba(13,33,52,.16)} .orbit-card .symbol{flex:none;width:43px;height:43px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.54)} .orbit-card .symbol .icon{width:23px;height:23px} .orbit-card h2{font-size:18px;line-height:1.17;letter-spacing:-.045em;margin:1px 0 7px;font-weight:800} .orbit-card small{color:#4a5c6d;font-size:11.5px;line-height:1.36;display:block;font-weight:540} .card-help{top:40px;left:48%;background:#f7eaf0;color:#8d3865} .card-offer{top:206px;right:1%;background:#e8edfb;color:#2d589b} .card-share{top:229px;left:1%;background:#edf5e7;color:#407a56} .card-together{bottom:46px;left:45%;background:#fff0de;color:#b56a35} .orbit-card h2{color:var(--ink)} .orbit-note{position:absolute;bottom:1px;left:5%;display:flex;align-items:center;gap:11px;color:#65798b;font-family:Georgia,serif;font-style:italic;font-size:16px;line-height:1.4;max-width:255px} .orbit-note:before{content:"↗";font-size:33px;font-weight:400;color:#9aafbc} .footer{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:36px;border-top:1px solid rgba(15,48,70,.07);padding-top:14px;color:#8a97a3;font-size:12px} .footer-right{display:flex;gap:20px;align-items:center}.footer a:hover{text-decoration:underline} .about-section{border-top:1px solid var(--line);padding:42px 0 54px;max-width:900px;width:100%;margin:auto} .about-section h2{font-size:clamp(23px,2.2vw,32px);letter-spacing:-.04em;margin:0 0 10px}.about-section p{font-size:16px;line-height:1.75;color:var(--muted);margin:0;max-width:820px} .about-section .about-line{font-size:18px;margin:22px 0 0;color:var(--deep);font-weight:700} @media(max-width:1160px){.hero{grid-template-columns:1fr;gap:0}.lead{padding:32px 0 0;max-width:770px}.lead h1{font-size:clamp(48px,6.1vw,68px)}.orbit-wrap{margin:0 auto 0;height:580px;width:640px;max-width:100%}.card-help{left:50%}} @media(max-width:720px){.page{padding:16px 20px 14px}.nav{min-height:58px}.logo img{width:158px}.nav-links{display:none}.burger{display:flex}.mobile-menu{position:absolute;right:0;top:66px;padding:16px;display:flex;flex-direction:column;gap:17px;background:white;border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 45px rgba(20,46,68,.15);width:min(270px,90vw)}.mobile-menu .nav-dashboard{text-align:center}.mobile-menu .lang{justify-content:center}.lead{padding-top:48px}.eyebrow{margin-bottom:20px}.lead h1{font-size:clamp(38px,8.8vw,61px);margin-bottom:22px}.intro{font-size:16px;line-height:1.6}.mantra{font-size:16px;margin-bottom:23px}.cta{min-height:50px}.orbit-wrap{display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:12px;width:100%;max-width:600px;height:auto;padding:45px 0 22px}.orbit-bg{inset:10px 0;opacity:.5}.orbit-card{position:relative;top:auto;left:auto;right:auto;bottom:auto;width:100%;height:100%;min-height:154px;display:flex;flex-direction:column;gap:11px;padding:16px;border-radius:20px}.orbit-card h2{font-size:17px}.orbit-card small{font-size:11px}.orbit-card .symbol{width:38px;height:38px}.orbit-note{position:relative;grid-column:1/-1;bottom:auto;left:auto;max-width:none;justify-content:center;font-size:14px;padding-top:9px}.orbit-note:before{font-size:25px}.footer{flex-wrap:wrap;justify-content:center;text-align:center;gap:9px}.about-section{padding:30px 0 40px}} @media(max-width:440px){.page{padding-left:16px;padding-right:16px}.lead{padding-top:30px}.eyebrow{font-size:11px}.lead h1{font-size:clamp(36px,10vw,46px)}.cta-row{align-items:stretch;flex-direction:column}.cta{width:100%}.orbit-card{min-height:156px;padding:14px}.orbit-card h2{font-size:16px}.orbit-card .symbol{width:35px;height:35px}.orbit-card .symbol svg{width:20px;height:20px}.mantra{font-size:15px;gap:6px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}} /* About follows the hero, while the footer closes the full page. */ @media(max-width:720px){.about-section{padding-left:2px;padding-right:2px}} /* OFSH • Variante chromatique 2 • 25 octobre 2026 ADN : #097FD5 bleu, #158C68 vert, #FFC247 ambre, #F26A35 corail. Complète home.css et préserve le HTML, la grille responsive, et le tenant OFSH. */ body { overflow-x:hidden; background: radial-gradient(ellipse 40% 50% at 102% 17%, rgba(69,165,242,.18),transparent 80%), radial-gradient(ellipse 37% 46% at 94% 57%, rgba(255,180,57,.15),transparent 80%), radial-gradient(ellipse 38% 60% at -9% 76%,rgba(59,179,134,.09),transparent 78%), linear-gradient(180deg,#FCFEFC 0%,#F9FCFB 54%,#F7FAF8 100%); } body::before { content:"";position:absolute;top:0;left:0;width:100%;height:5px; background:linear-gradient(90deg,#0E91E4 0%,#08A7B3 30%,#24A76E 54%,#FFBD43 77%,#F66C3B 100%); z-index:80;pointer-events:none; } .page {padding-top:22px;isolation:isolate;} .nav { padding:0 4px 9px; border-bottom:1px solid rgba(16,95,117,.085); } .nav-dashboard { background:#ECF6FF;border-color:#CFE7FA; color:#075A9C;box-shadow:0 8px 24px rgba(4,82,152,.075); } .nav-dashboard:hover {background:#DDF0FF;box-shadow:0 12px 26px rgba(4,82,152,.11);} .lang a.active {background:#DDF1E7;color:#106F4E;} .hero {padding:18px 0 19px;gap:clamp(12px,2.1vw,45px);} .lead {padding-bottom:14px;} .eyebrow {color:#15855F;letter-spacing:.155em;margin-bottom:26px;} .eyebrow:before { height:4px;width:31px;border-radius:5px; background:linear-gradient(90deg,#088AD2,#26B777); } h1 {letter-spacing:-.059em;font-weight:835;} h1 .line-blue {color:#0A76BF;} h1 .line-green {color:#209764;} h1 span:first-child {color:#0C2B50;} h1 span:last-child {color:#0C2B50;} .intro {color:#476780;max-width:570px;} .mantra {color:#183D62;} .mantra .bullet {background:linear-gradient(135deg,#6AC9AD,#FEBB52);width:7px;height:7px;} .cta-primary { background:linear-gradient(110deg,#087BD0 0%,#0C66AD 55%,#115D98 100%); box-shadow:0 15px 31px rgba(9,104,178,.21); border:1px solid rgba(5,89,159,.13); } .cta-primary:hover {box-shadow:0 19px 35px rgba(9,104,178,.27);} .cta-secondary {background:#FFFFFF;border-color:#D7EAF1;color:#0B4472;} .cta-secondary:hover {background:#F1FAFF;} .orbit-wrap {isolation:isolate;} .orbit-wrap::before { content:"";position:absolute;z-index:-3; width:96%;aspect-ratio:1;left:3%;top:4%;border-radius:50%;pointer-events:none; background:conic-gradient(from -58deg, rgba(21,141,232,.21) 0deg, rgba(61,178,225,.27) 78deg, rgba(65,185,125,.23) 160deg,rgba(255,193,79,.28) 250deg, rgba(249,129,82,.17) 322deg,rgba(21,141,232,.21) 360deg); filter:blur(52px); } .orbit-wrap::after { content:"";position:absolute;z-index:-2;width:78%;aspect-ratio:1;left:11%;top:13%;border-radius:50%; border:1px solid rgba(16,121,183,.12);pointer-events:none; } .orbit-bg { inset:45px 38px 35px; background:conic-gradient(from -35deg, rgba(49,157,232,.36),rgba(30,143,225,.50) 17%, rgba(27,169,122,.39) 43%,rgba(254,190,68,.50) 70%, rgba(250,128,79,.35) 83%,rgba(49,157,232,.36)); border-radius:50%; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 67px),#000 calc(100% - 65px)); mask:radial-gradient(farthest-side,transparent calc(100% - 67px),#000 calc(100% - 65px)); opacity:.73;z-index:-1; filter:saturate(1.14); } .orbit-center {inset:39%;filter:blur(25px);background:rgba(255,255,255,.36);} .orbit-card { border:1px solid rgba(255,255,255,.70); box-shadow:0 18px 38px rgba(10,58,91,.14),0 4px 10px rgba(10,58,91,.055); padding:20px 19px;min-height:123px; } .orbit-card:hover {box-shadow:0 22px 39px rgba(9,68,111,.19);} .orbit-card .symbol { background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.27); } .orbit-card h2 {color:inherit;font-weight:800;font-size:18px;} .orbit-card small {color:inherit;opacity:.86;font-weight:550;font-size:11.5px;} .orbit-card .symbol .icon {width:24px;height:24px;} .card-help {top:32px;left:47%;color:#fff;background:linear-gradient(135deg,#116FBF 0%,#0A62A7 100%);} .card-offer {top:208px;right:0%;color:#fff;background:linear-gradient(130deg,#147E5D 0%,#0B6F55 100%);} .card-share {top:222px;left:0%;color:#152F48;background:linear-gradient(135deg,#FFCF71 0%,#FFAB43 100%);} .card-share .symbol {background:rgba(255,255,255,.43);border-color:rgba(255,255,255,.38);} .card-together {bottom:49px;left:46%;color:#192E43;background:linear-gradient(130deg,#FF9966 0%,#F47548 100%);} .card-together .symbol {background:rgba(255,255,255,.37);border-color:rgba(255,255,255,.35);} .orbit-note {bottom:-3px;left:3%;color:#41708A;max-width:260px;} .orbit-note:before {color:#47A7BA;} .about-section { max-width:1040px;border:1px solid #DAECE8;border-radius:26px; background:linear-gradient(115deg,rgba(222,247,235,.73),rgba(235,246,255,.72) 67%,rgba(255,242,216,.65)); box-shadow:0 14px 40px rgba(40,120,111,.045); padding:33px clamp(24px,4.1vw,60px) 35px; margin:15px auto 30px; position:relative;overflow:hidden; } .about-section:before { content:"";position:absolute;left:0;top:0;bottom:0;width:6px; background:linear-gradient(180deg,#1189DB,#20A67A 52%,#FFB44B 82%,#EF7245); } .about-section h2 {color:#10375C;} .about-section p {color:#47667E;} .about-section .about-line {color:#087A63;} .footer {border-top:1px solid rgba(13,113,129,.13);color:#758A9A;} @media(max-width:1160px) { .orbit-bg {inset:26px 45px 14px;} .orbit-wrap::before {top:0;} } @media(max-width:720px) { body { background: radial-gradient(ellipse 100% 34% at 110% 23%,rgba(81,176,237,.14),transparent 85%), radial-gradient(ellipse 90% 40% at -15% 68%,rgba(255,184,58,.11),transparent 85%), #FAFDFC; } .page {padding-top:18px;} .nav {padding-bottom:6px;} .lead {padding-top:43px;} .orbit-wrap {padding-top:40px;} .orbit-wrap::before {width:105%;left:-2.5%;height:70%;top:10%;} .orbit-wrap::after {display:none;} .orbit-bg {display:none;} .orbit-card {position:relative;top:auto;left:auto;right:auto;bottom:auto;width:100%;height:100%;border-radius:20px;min-height:158px;padding:16px 15px;} .orbit-card .symbol {width:41px;height:41px;} .orbit-card h2 {font-size:17px;letter-spacing:-.025em;} .orbit-card small {font-size:11px;} .orbit-note {color:#3D7486;text-align:center;left:auto;bottom:auto;} .about-section {margin:4px 0 20px;border-radius:23px;padding:26px 23px 28px;} .mobile-menu {border:1px solid #D9EDEB;box-shadow:0 16px 44px rgba(12,75,100,.16);} } @media(max-width:440px) { .orbit-card {min-height:170px;} .orbit-card h2 {font-size:16px;} .orbit-card small {font-size:11px;} .eyebrow {letter-spacing:.11em;} .mantra {font-size:14.5px;} } @media(prefers-reduced-motion:reduce) { .orbit-card:hover,.cta:hover {transform:none;} } /* =========================================================================== VOLET SOMBRE — `prefers-color-scheme`, et surtout PAS `.dark`. `.dark` est pose par le JavaScript des layouts APPLICATIFS, qui lisent une preference rangee dans `localStorage`. Une landing publique ne doit pas la lire : `components/theme-tokens.blade.php` le documente depuis TASK-1471 — « honorer une preference de theme laissee dans le navigateur ferait afficher a un visiteur les couleurs d'une AUTRE Organization que celle qu'il consulte ». Ce fichier ne contredit pas cette regle, il la suit. Ce que suit ce volet est donc la preference du SYSTEME du visiteur, qui n'appartient a aucun tenant. Les valeurs ne sont pas recopiees ici : elles viennent des jetons SOMBRES du theme `ofsh`, emis par `` dans un bloc `@media (prefers-color-scheme: dark)`. Une seule palette, deux lectures. =========================================================================== */ @media (prefers-color-scheme: dark) { body { background: radial-gradient(ellipse 40% 50% at 102% 17%, rgba(63,163,232,.16), transparent 80%), radial-gradient(ellipse 37% 46% at 94% 57%, rgba(255,194,71,.09), transparent 80%), radial-gradient(ellipse 38% 60% at -9% 76%, rgba(47,177,131,.10), transparent 78%), linear-gradient(180deg, var(--bp-page, #04182C) 0%, var(--bp-surface, #072540) 100%); } .nav { border-bottom-color: var(--bp-border, #164263); } /* `--ink-soft` est une encre FONCEE, litterale dans la maquette : elle disparait sur fond sombre. Les liens de navigation reprennent donc le jeton de texte du theme, et le survol son bleu. */ .nav-links > a:not(.nav-dashboard), .mobile-menu > a:not(.nav-dashboard) { color: var(--bp-text, #F2F8FB); } .nav-links > a:not(.nav-dashboard):hover, .mobile-menu > a:not(.nav-dashboard):hover { color: var(--bp-primary, #3FA3E8); } /* Les deux lignes de couleur du titre : les valeurs claires de la maquette (#0A76BF, #209764) perdent leur contraste sur fond sombre. */ h1 .line-blue { color: var(--bp-primary, #3FA3E8); } h1 .line-green { color: var(--bp-accent, #2FB183); } .eyebrow { color: var(--bp-accent, #2FB183); } .nav-dashboard { background: var(--bp-surface-soft, #0D3557); border-color: var(--bp-border, #164263); color: var(--bp-text, #F2F8FB); box-shadow: 0 8px 24px rgba(0,0,0,.35); } .nav-dashboard:hover { background: var(--bp-border, #164263); } .lang a { color: var(--bp-muted, #A9C3D4); } .lang a.active { background: var(--bp-surface-soft, #0D3557); color: var(--bp-text, #F2F8FB); } .burger { background: var(--bp-surface, #072540); border-color: var(--bp-border, #164263); color: var(--bp-text, #F2F8FB); } .mobile-menu { background: var(--bp-surface, #072540); border-color: var(--bp-border, #164263); } h1 span:first-child, h1 span:last-child { color: var(--bp-text, #F2F8FB); } .intro { color: var(--bp-muted, #A9C3D4); } .mantra { color: var(--bp-text, #F2F8FB); } .cta-secondary { background: var(--bp-surface-soft, #0D3557); border-color: var(--bp-border, #164263); color: var(--bp-text, #F2F8FB); } .cta-secondary:hover { background: var(--bp-border, #164263); } /* Les quatre cartes gardent leurs couleurs : elles SONT le repere de la page. Seul le liseré blanc, invisible sur fond clair et criard sur fond sombre, est rabattu. */ .orbit-card { border-color: rgba(255,255,255,.10); box-shadow: 0 18px 38px rgba(0,0,0,.42); } .orbit-center { background: rgba(255,255,255,.05); } .orbit-note { color: var(--bp-muted, #A9C3D4); } .about-section { border-color: var(--bp-border, #164263); background: linear-gradient(115deg, rgba(47,177,131,.10), rgba(63,163,232,.10) 67%, rgba(255,194,71,.07)); box-shadow: none; } .about-section h2 { color: var(--bp-text, #F2F8FB); } .about-section p { color: var(--bp-muted, #A9C3D4); } .about-section .about-line { color: var(--bp-accent, #2FB183); } .footer { border-top-color: var(--bp-border, #164263); color: var(--bp-muted, #A9C3D4); } } /* --------------------------------------------------------------------------- Les deux logos. Le pack de marque fournit un export COULEUR pour fond clair et un export BLANC pour fond sombre (« pour la version en fond sombre, utiliser l'export blanc, contraste garanti »). Les deux sont dans le HTML et c'est le CSS qui choisit : un `` avec `prefers-color-scheme` aurait fait la meme chose, en moins lisible, et `currentColor` n'existe pas pour une image matricielle. ------------------------------------------------------------------------- */ .logo [data-ofsh-logo-dark] { display: none; } @media (prefers-color-scheme: dark) { .logo [data-ofsh-logo-light] { display: none; } .logo [data-ofsh-logo-dark] { display: block; } } /* --------------------------------------------------------------------------- Le selecteur FR / EN. La maquette l'avait dessine en ``. Le produit ne peut pas : changer de langue est une ECRITURE de session, et `LocaleController` n'expose qu'une route POST — c'est deja le montage des deux autres landings. Chaque langue est donc un `