/* ================= LA BASCULE : le site existant en BARYTE ================= Aucune reecriture de contenu. On redefinit le jeu de jetons sous la classe `baryte` posee sur `body`, et toutes les regles du site suivent. MESURE PREALABLE DE L USAGE DE CHAQUE JETON, 04/09/2026 : 30 jetons servent un seul role, 12 en servent plusieurs. Les premiers se basculent tels quels. Les seconds sont traites un par un, plus bas, car inverser un jeton employe a la fois comme texte et comme fond casserait l un des deux. RIEN SUR html. La tentative precedente avait pose un fond sur `html` et un `background:transparent` sur `body` : 30 pages etaient devenues noir sur noir. Ici on pose le fond sur `body` lui-meme, et on traite les textes AVANT. */ /* ---- 1. LES JETONS A USAGE UNIQUE, bascules tels quels ---- */ body.baryte{ /* fonds */ --paper:#010B16; --surface:#0B1420; --surface-2:#0E1926; --ice:#0E1926; --deep:#01060E; --navy:#0E1926; /* textes */ --ink:#E9E7E3; --muted:#AEB4BC; --ink-invert:#E9E7E3; --muted-invert:#AEB4BC; --teal-ink:#E9E7E3; --accent-ink:#01060E; --ok-ink:#86B8A4; --fauve-ink:#E9B698; /* traits */ --border:rgba(233,231,227,.16); --grid-line:rgba(125,178,225,.10); /* NOTE 1 : accents : on eclaircit ceux qui servent de TEXTE sur fond sombre. -- voir galyct-baryte-bascule-notes.md */ --accent-deep:#8ABBE7; --fauve-deep:#E9B698; background:var(--paper); color:var(--ink); } /* NOTE 2 : ---- 2. LES JETONS A USAGE MULTIPLE, traites un par un ---- -- voir galyct-baryte-bascule-notes.md */ body.baryte h1,body.baryte h2,body.baryte h3,body.baryte h4{color:#E9E7E3} body.baryte .btn--primary{color:#01060E} body.baryte .final,body.baryte .urgence,body.baryte .hero{color:#E9E7E3} /* NOTE 3 : ---- 3. LE SOCLE ---- -- voir galyct-baryte-bascule-notes.md */ body.baryte main{background:transparent} body.baryte .card,body.baryte .tile,body.baryte .panel{ border-color:rgba(233,231,227,.16)} /* NOTE 4 : ---- 3 bis. LES RATTRAPAGES ISSUS DE L AUDIT ---- -- voir galyct-baryte-bascule-notes.md */ /* NOTE 5 : LE MOTIF EXACT, PAS LA BALISE. L en-tete de tableau signale par l audi -- voir galyct-baryte-bascule-notes.md */ body.baryte [style*="color:var(--midnight)"], body.baryte [style*="color: var(--midnight)"], body.baryte [style*="color:var(--ink)"], body.baryte [style*="color:#171A1F"], body.baryte [style*="color:#1B1712"]{color:#E9E7E3!important} body.baryte [style*="background:var(--surface)"], body.baryte [style*="background: var(--surface)"]{background:#0B1420!important} /* NOTE 6 : ---- 4. CE QUI RESTE ECRIT EN DUR ---- -- voir galyct-baryte-bascule-notes.md */ body.baryte [style*="color:#171A1F"], body.baryte [style*="color:#1B1712"]{color:#E9E7E3!important} /* NOTE 7 : ============ SECONDE COUCHE : LES TROIS FAMILLES DE L AUDIT ========== -- voir galyct-baryte-bascule-notes.md */ /* NOTE 8 : ---- FAMILLE A. `--paper` sert de FOND 15 fois et de TEXTE 5 fois. -- voir galyct-baryte-bascule-notes.md */ body.baryte .offer, body.baryte .price, body.baryte .testi, body.baryte .steps .st, body.baryte .sov .s, body.baryte .maturity .rung{background:#0B1420;border-color:rgba(233,231,227,.16)} body.baryte .ur-titre, body.baryte .ur-fort, body.baryte .fn-title, body.baryte .fn-releve-v, body.baryte .fn-releve, body.baryte .ur-bloc, body.baryte .ur-bloc *{color:#E9E7E3} /* NOTE 9 : ---- FAMILLE B. Sept surfaces gardaient un fond `#fff` ecrit en dur, d -- voir galyct-baryte-bascule-notes.md */ body.baryte .s-plan, body.baryte .trustbar, body.baryte .pv-dos, body.baryte .sd-phone, body.baryte .sd-sms, body.baryte .sd-plan-h{background:#0B1420!important;border-color:rgba(233,231,227,.16)} body.baryte .s-plan *, body.baryte .trustbar *, body.baryte .pv-dos *, body.baryte .sd-phone *, body.baryte .sd-sms *{color:#E9E7E3} body.baryte .sd-plan-h{color:#86B8A4} /* NOTE 10 : ---- FAMILLE C. Textes sombres ecrits en dur : #526277 trente usages, -- voir galyct-baryte-bascule-notes.md */ body.baryte .card p, body.baryte .tile .t-tx span, body.baryte .trustbar .t, body.baryte .msp-lead, body.baryte .msp-turn, body.baryte .msp-pay, body.baryte .lbl-open, body.baryte .rail-item{color:#AEB4BC} body.baryte .zsc-verdict .bdg{color:#01060E} /* ---- LES ETIQUETTES DE SECTEUR de l accueil Pro : onze `` a 2,03. Elles heritent d une couleur sombre posee sur leur conteneur. */ body.baryte .ref4-tag, body.baryte .ref4-tag b, body.baryte .prv-chip, body.baryte .prv-chip b, body.baryte .pk b, body.baryte .plim b{color:#E9E7E3} /* ---- LE ROUGE D ALERTE. `--danger` #C93C4B sur l assise donne 2,7. On l eclaircit pour ce seul usage de texte, sans toucher a ses usages de fond. */ body.baryte .ur-cote, body.baryte .ur-bloc strong{color:#E59D93} /* NOTE 11 : ========= TROISIEME COUCHE : LES CONTENEURS RESTES CLAIRS ============ -- voir galyct-baryte-bascule-notes.md */ body.baryte .card, body.baryte .msp-c, body.baryte .msp-story, body.baryte .prv-chip{background:#0B1420!important;border-color:rgba(233,231,227,.16)!important} body.baryte .card *, body.baryte .msp-c *, body.baryte .msp-story *, body.baryte .prv-chip, body.baryte .prv-chip *{color:#E9E7E3} body.baryte .card p, body.baryte .msp-c p, body.baryte .msp-story p{color:#AEB4BC} /* les surfaces pastel de Perso et de MSP */ body.baryte .sd-body, body.baryte .sd-plan, body.baryte .pv-dos-h, body.baryte .pv-dos-st, body.baryte .pv-dos-f, body.baryte .msp-stats, body.baryte .card-ic, body.baryte .sd-chip{background:#0E1926!important} body.baryte .sd-body *, body.baryte .pv-dos-h *, body.baryte .pv-dos-f *, body.baryte .msp-stats *{color:#E9E7E3} body.baryte .sd-plan,body.baryte .sd-plan *{color:#86B8A4} body.baryte .sd-chip,body.baryte .sd-chip *{color:#E59D93} /* ce qui reste ecrit en dur et signale par l audit */ body.baryte .lbl,body.baryte .lbl-open{color:#8ABBE7} body.baryte .msp-c p,body.baryte .msp-story p, body.baryte [class*="msp-"] p{color:#AEB4BC} /* NOTE 12 : ====== QUATRIEME COUCHE : LES DERNIERES FAMILLES, VISEES PAR CONTEXTE -- voir galyct-baryte-bascule-notes.md */ /* Le titre du heros de Perso est decoupe en mots par le script d animation : douze `span` heritant d une couleur devenue sombre sur sombre, a 1,01. */ body.baryte .z-split, body.baryte .z-split .z-word, body.baryte .z-split .z-word span{color:#E9E7E3} /* Sept `strong` de la liste des etapes, a 1,14. */ body.baryte .en-liste strong, body.baryte .en-item strong, body.baryte .en-txt strong, body.baryte .en-col p, body.baryte .en-guet h2{color:#E9E7E3} /* Trois `b` dans les temoignages, a 1,06. */ body.baryte .testi .who, body.baryte .testi .who b{color:#AEB4BC} /* Le rouge d alerte et le bleu profond, ecrits en dur, entre 3,1 et 3,99 : au-dessus du seuil des grands titres mais sous celui du texte courant. */ body.baryte .ur-prose strong, body.baryte .ur-prose b{color:#E59D93} body.baryte .lbl, body.baryte .lbl-open, body.baryte .msp-c .lbl, body.baryte [class*="lbl"]{color:#8ABBE7} body.baryte .msp-c b, body.baryte .msp-story b, body.baryte [class*="msp-"] b{color:#E59D93} /* Un lien vert pose sur une pastille bleue, a 1,2 : le fond de la pastille passe en sombre, comme les autres surfaces du parcours. */ body.baryte .sd-plan a, body.baryte .sd-go{background:#0B1420!important;color:#86B8A4!important; border:1px solid rgba(233,231,227,.16)} /* NOTE 13 : ========== CINQUIEME COUCHE : LES DEUX DERNIERS ECHECS ========== -- voir galyct-baryte-bascule-notes.md */ body.baryte .en-titre, body.baryte .en-guet .en-titre{color:#E9E7E3!important} body.baryte .msp-illus, body.baryte .msp-illus span, body.baryte .msp-illus p{color:#AEB4BC} /* NOTE 14 : ============== LE FOND ANIME, INTEGRE A LA BASCULE ============== -- voir galyct-baryte-bascule-notes.md */ body.baryte{ --f-titre:"Fraunces","Iowan Old Style",Charter,Georgia,serif; --f-courant:"Inter",-apple-system,"Segoe UI",Arial,sans-serif; --f-mesure:"JetBrains Mono",ui-monospace,Consolas,monospace; --noir:#000000; --nuit:#01060E; --papier:#E9E7E3; --papier-voile:#AEB4BC; --limite:#878E98; --signal:#7DB2E1; --signal-haut:#8ABBE7; --inactinique:#E0A07C; --inactinique-haut:#E9B698; --etat-tenu:#86B8A4; --etat-rompu:#E59D93; --accent:var(--signal); --assise-rgb:4 21 40; --crete-rgb:24 46 72; --crete-haut-rgb:34 60 90; --assise:rgb(var(--assise-rgb)); --pic-x:18%; --pic-y:55%; --sens:to left; --densite:.14; --voile-a:.58; --voile-b:.50; --voile-c:.30; --derive:40px; --grain-a:.045; --coupe:20px; --coin:polygon(0 0,calc(100% - var(--coupe)) 0,100% var(--coupe),100% 100%,0 100%); --marge:24px; --e1:4px; --e2:8px; --e3:12px; --e4:20px; --e5:32px; --e6:44px; --e7:64px; --e8:96px; --obturateur:cubic-bezier(.16,.84,.28,1); --diaphragme:cubic-bezier(.34,0,.24,1); --declic:cubic-bezier(.2,0,0,1); --retrait:cubic-bezier(.5,0,.9,.4); --d-entree:120ms; --d-sortie:180ms; --d-court:480ms; --d-moyen:560ms; --d-titre:720ms; --d-long:900ms; --t:0ms; --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='g' x='0' y='0' width='200' height='200' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .914 0 0 0 0 .906 0 0 0 0 .89 .21 .72 .07 0 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"); --repli:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Cfilter id='p' x='0' y='0' width='240' height='160' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.014 .026' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .17 0 0 0 0 .28 .95 .55 .2 0 -.08'/%3E%3C/filter%3E%3Crect width='240' height='160' filter='url(%23p)'/%3E%3C/svg%3E"); --registre:url("data:image/svg+xml,GOV-01GOV-02RSK-01AST-01IAM-01PAM-01CFG-01VUL-01LOG-01INC-01REG-01BCM-01DR-01SUP-01INC-01REG-01BCM-01DR-01SUP-01DEV-01PRV-01AI-01PHY-01HR-01CRY-01TST-01EXC-012016/679HR-01CRY-01TST-01EXC-012016/6792022/25542022/25552024/16892024/28472026/1744ISO%2022301:2019ISO/IEC%2027001:2022ISO/IEC%2027005:2022ISO/IEC%2027701:20252026/1744ISO%2022301:2019ISO/IEC%2027001:2022ISO/IEC%2027005:2022ISO/IEC%2027701:2025ISO/IEC%2042001:20232026.08.27dGOV-01GOV-02RSK-01AST-01IAM-01PAM-01CFG-01"); --facette:url("data:image/svg+xml,"); --facette-moyen:url("data:image/svg+xml,"); --facette-gros:url("data:image/svg+xml,"); } /* NOTE 15 : ---------------------- LA FACETTE, second regime de matiere ---------- -- voir galyct-baryte-bascule-notes.md */ .sys--fond-registre{--motif:var(--registre)} .sys--fond-facette{--motif:var(--facette)} /* NOTE 16 : ================= LE BAIN REVELATEUR, le fond de page ================ -- voir galyct-baryte-bascule-notes.md */ /* NOTE 17 : LES QUATRE JETONS DE REGLAGE VIVENT SUR LE CALQUE, PAS SUR LES NAPPES. -- voir galyct-baryte-bascule-notes.md */ .sys-fond{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; contain:strict;opacity:0; --pas:1px;--ech:1.06;--bord:.52;--fin:91%} .sys-fond i{position:absolute;display:block;border-radius:50%; will-change:transform;transform:translate3d(0,0,0)} .sys-fond .f1{left:-18%;top:-22%;width:86%;height:78%; background:radial-gradient(closest-side,rgb(var(--crete-haut-rgb)/.72),rgb(var(--crete-rgb)/.22) 58%,rgb(var(--assise-rgb)/0) 82%)} .sys-fond .f2{right:-24%;top:22%;width:96%;height:88%; background:radial-gradient(closest-side,rgb(var(--crete-rgb)/.66),rgb(var(--crete-rgb)/.18) 54%,rgb(var(--assise-rgb)/0) 80%)} .sys-fond .f3{left:16%;bottom:-30%;width:78%;height:72%; background:radial-gradient(closest-side,rgb(var(--crete-haut-rgb)/.44),rgb(var(--assise-rgb)/0) 74%)} /* le grain, obligatoire : il dithere les bandes du degrade */ .sys-fond b{position:absolute;inset:0;display:block;opacity:.05; background:var(--grain) 0 0/200px repeat} /* le champ n existe que si un regime est demande */ .sys--fond-defilement .sys-fond, .sys--fond-continu .sys-fond, .sys--fond-melange .sys-fond, .sys--lampe .sys-fond{opacity:1} .sys--fond-defilement .sys-fond i, .sys--fond-melange .sys-fond i{animation-duration:auto;animation-timing-function:linear; animation-fill-mode:both;animation-timeline:scroll(root)} .sys--fond-defilement .f1,.sys--fond-melange .f1{animation-name:sys-bain-a} .sys--fond-defilement .f2,.sys--fond-melange .f2{animation-name:sys-bain-b} .sys--fond-defilement .f3,.sys--fond-melange .f3{animation-name:sys-bain-c} /* NOTE 18 : REGIME 2, le temps. Boucle permanente, assumee. Le navigateur suspend -- voir galyct-baryte-bascule-notes.md */ .sys--fond-continu .f1{animation:sys-bain-a 96s var(--diaphragme) infinite alternate} .sys--fond-continu .f2{animation:sys-bain-b 128s var(--diaphragme) infinite alternate} .sys--fond-continu .f3{animation:sys-bain-c 152s var(--diaphragme) infinite alternate} /* REGIME 3, les deux : la derive suit le defilement, la lumiere respire. */ .sys--fond-melange .sys-fond{animation:sys-bain-souffle 84s var(--diaphragme) infinite alternate} @media (prefers-reduced-motion:reduce){ .sys-fond,.sys-fond *{animation:none!important}} /* NOTE 19 : ============== LE REGISTRE LATENT : la lampe, sa trainee, la trame === -- voir galyct-baryte-bascule-notes.md */ /* NOTE 20 : LA NAPPE DE FOND, PLEIN ECRAN. Le fondateur : « pourquoi cela ne prend -- voir galyct-baryte-bascule-notes.md */ .sys-fond .rev-plein{position:fixed;inset:0;pointer-events:none;opacity:0; background:var(--motif,var(--registre)) 0 0/var(--reg,500px) calc(var(--reg,500px)/1.5) repeat; -webkit-mask-image:radial-gradient(circle at center,#000 0 calc(var(--pas)*.36),transparent calc(var(--pas)*.42)); mask-image:radial-gradient(circle at center,#000 0 calc(var(--pas)*.36),transparent calc(var(--pas)*.42)); -webkit-mask-size:var(--pas) var(--pas);mask-size:var(--pas) var(--pas)} .sys--lampe .rev-plein{opacity:var(--o0,.085);transition:opacity 620ms var(--obturateur)} .sys--lampe.sys--eteint .rev-plein{opacity:calc(var(--o0,.085) * .55)} .sys-fond .rev{position:fixed;left:0;top:0;pointer-events:none;opacity:0; transform:translate3d(var(--x,50vw),var(--y,42vh),0);will-change:transform; -webkit-mask-image:radial-gradient(closest-side,#000 0,rgb(0 0 0/var(--bord)) 40%,transparent var(--fin)); mask-image:radial-gradient(closest-side,#000 0,rgb(0 0 0/var(--bord)) 40%,transparent var(--fin))} .sys-fond .rev>i{position:absolute;left:0;top:0;display:block;width:100vw;height:100vh; transform:translate3d(var(--cx,0px),var(--cy,0px),0);will-change:transform; background:var(--motif,var(--registre)) 0 0/var(--reg,760px) calc(var(--reg,760px)/1.5) repeat; -webkit-mask-image:radial-gradient(circle at center,#000 0 calc(var(--pas)*.36),transparent calc(var(--pas)*.42)); mask-image:radial-gradient(circle at center,#000 0 calc(var(--pas)*.36),transparent calc(var(--pas)*.42)); -webkit-mask-size:var(--pas) var(--pas);mask-size:var(--pas) var(--pas)} /* les six nappes : plus elles trainent, plus elles sont larges et faibles */ .sys-fond .rev1{width:calc(520px*var(--ech));height:calc(520px*var(--ech));margin:calc(-260px*var(--ech)) 0 0 calc(-260px*var(--ech))} .sys-fond .rev2{width:calc(590px*var(--ech));height:calc(590px*var(--ech));margin:calc(-295px*var(--ech)) 0 0 calc(-295px*var(--ech))} .sys-fond .rev3{width:calc(665px*var(--ech));height:calc(665px*var(--ech));margin:calc(-332px*var(--ech)) 0 0 calc(-332px*var(--ech))} .sys-fond .rev4{width:calc(745px*var(--ech));height:calc(745px*var(--ech));margin:calc(-372px*var(--ech)) 0 0 calc(-372px*var(--ech))} .sys-fond .rev5{width:calc(830px*var(--ech));height:calc(830px*var(--ech));margin:calc(-415px*var(--ech)) 0 0 calc(-415px*var(--ech))} .sys-fond .rev6{width:calc(920px*var(--ech));height:calc(920px*var(--ech));margin:calc(-460px*var(--ech)) 0 0 calc(-460px*var(--ech))} .sys-fond .rev7{width:calc(1015px*var(--ech));height:calc(1015px*var(--ech));margin:calc(-507px*var(--ech)) 0 0 calc(-507px*var(--ech))} .sys-fond .rev8{width:calc(1120px*var(--ech));height:calc(1120px*var(--ech));margin:calc(-560px*var(--ech)) 0 0 calc(-560px*var(--ech))} /* NOTE 21 : LES DEUX DERNIERES SONT DIMENSIONNEES EN FRACTION D ECRAN, pas en pixe -- voir galyct-baryte-bascule-notes.md */ .sys-fond .rev9{width:calc(118vmax*var(--ech));height:calc(118vmax*var(--ech));margin:calc(-59vmax*var(--ech)) 0 0 calc(-59vmax*var(--ech))} .sys-fond .rev10{width:calc(168vmax*var(--ech));height:calc(168vmax*var(--ech));margin:calc(-84vmax*var(--ech)) 0 0 calc(-84vmax*var(--ech))} /* NOTE 22 : LES DEUX PLUS GRANDES PERDENT LEUR MASQUE ROND. Mesure du 04/09/2026 : -- voir galyct-baryte-bascule-notes.md */ .sys-fond .rev9, .sys-fond .rev10{-webkit-mask-image:none;mask-image:none} .sys--lampe .rev{transition:opacity 620ms var(--obturateur)} .sys--lampe .rev1{opacity:var(--o1,.22)} .sys--lampe .rev2{opacity:var(--o2,.125)} .sys--lampe .rev3{opacity:var(--o3,.075)} .sys--lampe .rev4{opacity:var(--o4,.045)} .sys--lampe .rev5{opacity:var(--o5,.026)} .sys--lampe .rev6{opacity:var(--o6,.014)} .sys--lampe .rev7{opacity:var(--o7,.008)} .sys--lampe .rev8{opacity:var(--o8,.0045)} .sys--lampe .rev9{opacity:var(--o9,.021)} .sys--lampe .rev10{opacity:var(--o10,.013)} /* le pointeur quitte la fenetre : tout se referme doucement */ .sys--lampe.sys--eteint .rev{opacity:0} /* NOTE 23 : AU REPOS, LA TRAINEE SE DISSOUT, ET CE N EST PAS QU UNE QUESTION DE GO -- voir galyct-baryte-bascule-notes.md */ .sys--lampe.sys--pose .rev2, .sys--lampe.sys--pose .rev3, .sys--lampe.sys--pose .rev4, .sys--lampe.sys--pose .rev5, .sys--lampe.sys--pose .rev6, .sys--lampe.sys--pose .rev7, .sys--lampe.sys--pose .rev8, .sys--lampe.sys--pose .rev9, .sys--lampe.sys--pose .rev10{opacity:0} @media (hover:none),(pointer:coarse){ .sys--lampe .rev{opacity:0} .sys--lampe .rev3{opacity:.13;width:96vw;height:96vw;margin:-48vw 0 0 -48vw; transform:translate3d(64vw,38vh,0)} .sys--lampe .rev3>i{transform:translate3d(calc(48vw - 64vw),calc(48vw - 38vh),0)}} @media (prefers-reduced-motion:reduce){ .sys-fond .rev,.sys-fond .rev>i{transition:none!important}} /* NOTE 24 : ======== SIXIEME COUCHE : L AUDIT DES 38 PAGES DE PRO ======== -- voir galyct-baryte-bascule-notes.md */ body.baryte .steps .st, body.baryte .steps .st b, body.baryte .steps .st *, body.baryte .maturity .rung, body.baryte .maturity .rung b, body.baryte .maturity .rung *{color:#E9E7E3} body.baryte .steps .st p, body.baryte .maturity .rung p{color:#AEB4BC} /* Les maquettes d interface de `plateforme.html` : fonds blancs ecrits en dur, 52 echecs a elles seules. */ body.baryte .vz, body.baryte .vzc, body.baryte .win, body.baryte .win-bar, body.baryte .feed, body.baryte .fr, body.baryte .tl, body.baryte .ev, body.baryte .cap{background:#0B1420!important;border-color:rgba(233,231,227,.16)} body.baryte .win-bar .ti{color:#E9E7E3} body.baryte .win-bar .tag, body.baryte .feed .msg, body.baryte .tl time, body.baryte .cap{color:#AEB4BC} body.baryte .feed .src{color:#E9E7E3} body.baryte .feed .ar{color:#8ABBE7} body.baryte .vzc .av{color:#01060E} /* La serie a 3,1 - 4,1 : juste sous le seuil du texte courant. */ body.baryte .eyebrow{color:#8ABBE7} body.baryte .btn--secondary, body.baryte .btn--ghost, body.baryte a.btn:not(.btn--primary){color:#E9E7E3;border-color:rgba(233,231,227,.34)} body.baryte .trust-center .st, body.baryte .st{color:#AEB4BC} /* ====== SEPTIEME COUCHE : LES TROIS DERNIERES FAMILLES DE PRO ====== 58 echecs restants apres la sixieme couche. */ /* NOTE 25 : 1. Les `` de `.sov .s`. J avais assombri ce conteneur a la deuxieme -- voir galyct-baryte-bascule-notes.md */ body.baryte .sov .s, body.baryte .sov .s *, body.baryte .sov .s b{color:#E9E7E3} body.baryte .sov .s p{color:#AEB4BC} /* 2. Les `` de `.tile .t-tx`, en #171A1F ecrit en dur sur l assise. */ body.baryte .tile, body.baryte .tile .t-tx, body.baryte .tile .t-tx b, body.baryte .tile b{color:#E9E7E3} body.baryte .tile .t-tx span{color:#AEB4BC} /* NOTE 26 : 3. LE BOUTON D ALERTE, ET LE DEFAUT EST DE MOI. -- voir galyct-baryte-bascule-notes.md */ body.baryte .btn--danger{background:#B02A38;border-color:#B02A38;color:#FFFFFF} body.baryte .btn--danger:hover, body.baryte .btn--danger:focus-visible{background:#9C2431;border-color:#9C2431} /* NOTE 27 : ====== SEPTIÈME COUCHE : L'AUDIT DES QUATRE SURFACES, 04/09/2026 ===== -- voir galyct-baryte-bascule-notes.md */ /* NOTE 28 : --- 1. LES PAGES D'ERREUR 403 et 404, sur les trois vitrines. -- voir galyct-baryte-bascule-notes.md */ body.baryte main.core .acts .btn--p{ background:#3DA6E8!important;border-color:#3DA6E8!important;color:#00121F!important} body.baryte main.core .acts .btn--p *{color:#00121F!important} /* NOTE 29 : --- 2. GALYCT.IO, la page « État des services ». -- voir galyct-baryte-bascule-notes.md */ body.baryte .wrap > .svc, body.baryte .wrap > .hist{background:#0B1420!important;border-color:rgba(233,231,227,.16)!important} body.baryte .wrap > .banner.down{background:#0E1926!important;border-color:rgba(233,231,227,.16)!important} body.baryte .wrap > .bar .btn{ background:#0B1420!important;border-color:rgba(233,231,227,.24)!important;color:#E9E7E3!important} body.baryte .svc .row{border-color:rgba(233,231,227,.10)!important} /* --- 3. PRO, la maquette d'interface de `plateforme.html`. `div.cfr` est une ligne de cadre de conformité, restée blanche. */ body.baryte .win-body .cft .cfr{ background:#0B1420!important;border-color:rgba(233,231,227,.16)!important} /* NOTE 30 : --- 4. PERSO, la surface la plus touchée : 250 textes. -- voir galyct-baryte-bascule-notes.md */ body.baryte .vf-wrap > .vf-card, body.baryte .prv-pillars > .prv-p, body.baryte .sig-grid > .sig, body.baryte .util > .util-c, body.baryte .cf-numbers > .cf-n, body.baryte .grid > a.moment, body.baryte .rp-wrap > .rp-card, body.baryte .vf-links > a.big, body.baryte .wrap > figure, body.baryte .trustbar, body.baryte ul.cf-facts > li{ background:#0B1420!important;border-color:rgba(233,231,227,.16)!important} /* les surfaces teintées de Perso : bleu très pâle et crème */ body.baryte .sov, body.baryte .vf-ref, body.baryte .vf-note, body.baryte .rp-note, body.baryte a.intent, body.baryte .intent-ic{ background:#0E1926!important;border-color:rgba(233,231,227,.16)!important} /* le formulaire de rappel : un champ doit rester un champ, donc lisible, bordé, et son texte de substitution doit se distinguer de la saisie. */ body.baryte .rp-form input, body.baryte .rp-form select, body.baryte .rp-form textarea{ background:#0B1420!important;border-color:rgba(233,231,227,.24)!important;color:#E9E7E3!important} body.baryte .rp-form input::placeholder, body.baryte .rp-form textarea::placeholder{color:#8B939C!important} body.baryte .rp-form select option{background:#0B1420;color:#E9E7E3} /* LA PASTILLE VERTE DES TÉMOIGNAGES reste claire, comme les autres jetons d'accent : on lui donne l'encre sombre qui va avec, on ne l'assombrit pas. */ body.baryte .wrap > figure > span{color:#0A1A14!important} /* NOTE 31 : --- 5. LA DERNIÈRE FAMILLE, relevée après la première passe. -- voir galyct-baryte-bascule-notes.md */ /* LA CLASSE, PAS LA BALISE. Une premiere version visait `a.tile` : il existe aussi `div.tile`, et douze textes sont restes a 1,23:1. */ body.baryte .grid > .tile{ background:#0B1420!important;border-color:rgba(233,231,227,.16)!important} /* NOTE 32 : ====== HUITIÈME COUCHE : LE TEXTE SOMBRE SUR FOND SOMBRE ====== -- voir galyct-baryte-bascule-notes.md */ /* --- 1. CE QUI PRÉEXISTAIT --- */ /* Le titre de la section finale de Perso, 36 fois, à 1,14:1 : une encre `#010B16` posée sur `#171A1F`. Invisible, et sur toutes les pages. */ body.baryte section.final h2, body.baryte section.final .wrap > h2{color:#E9E7E3!important} body.baryte section.final p, body.baryte section.final .sub{color:#AEB4BC!important} /* Le tableau de la page Souveraineté : 40 cellules à 1,06:1 et 8 `b` à 3,94. */ body.baryte .wrap table tbody td{color:#E9E7E3!important} body.baryte .wrap table tbody td b, body.baryte .wrap table tbody td strong{color:#8ABBE7!important} /* Les montants des grilles de tarifs, `#171A1F` sur `#0B1420`. */ body.baryte .price .p-amount, body.baryte .price .p-amount *{color:#E9E7E3!important} /* La citation et sa chute, dans les sections sombres. */ body.baryte .section--dark figure.pq blockquote, body.baryte .section--dark .pq-chute strong, body.baryte .section--dark .pq-chute b{color:#E9E7E3!important} /* Les étiquettes du formulaire dirigeants. */ body.baryte .porte-dirigeants label, body.baryte .porte-dirigeants .cx-fi label{color:#AEB4BC!important} /* Le nom de destination dans le schéma d'orientation, à 4,38:1. */ body.baryte .or-dests .or-dest{color:#AEB4BC!important} /* MSP : le paragraphe « sans » est écrit en rouge sombre, 2,45:1. */ body.baryte p.msp-without{color:#E5949E!important} /* NOTE 33 : --- 2. CE QUE LA SEPTIÈME COUCHE A CRÉÉ --- -- voir galyct-baryte-bascule-notes.md */ body.baryte .vf-card .sub, body.baryte .vf-card p.sub, body.baryte .rp-card .rp-alt, body.baryte .rp-head p, body.baryte .rp-note, body.baryte .rp-note *, body.baryte .prv-p p, body.baryte .sig p, body.baryte .util-c p, body.baryte .cf-n p, body.baryte .tile p, body.baryte .tile span{color:#AEB4BC!important} /* NOTE 34 : LA PASTILLE VERTE DES TÉMOIGNAGES : la septième couche lui a donné une -- voir galyct-baryte-bascule-notes.md */ body.baryte .wrap > figure > span{ color:#86B8A4!important;background:#12241C!important;border-color:rgba(134,184,164,.28)!important} /* Les étoiles des témoignages, or foncé sur fond sombre. */ body.baryte .wrap > figure > div{color:#E0A43C!important} body.baryte .wrap > figure figcaption{color:#AEB4BC!important} /* --- 3. LES JETONS D'ACCENT MAL ENCRÉS --- */ /* NOTE 35 : Un bouton primaire orange portant l'encre CLAIRE, à 2,22:1. Sur un apl -- voir galyct-baryte-bascule-notes.md */ body.baryte .btn--primary, body.baryte a.btn.btn--primary{color:#1A0F00!important} body.baryte .btn--primary *{color:#1A0F00!important} /* NOTE 36 : Les pastilles de la matrice de risque : leur aplat est trop clair pour -- voir galyct-baryte-bascule-notes.md */ /* L'état « EN COURS », rouge sombre sur fond sombre. */ body.baryte .vzc span{color:#E58A96!important} /* NOTE 37 : ====== NEUVIÈME COUCHE : LES CAUSES, PAS LES SYMPTÔMES ====== -- voir galyct-baryte-bascule-notes.md */ body.baryte .en-titre, body.baryte .en-etiq, body.baryte .en-phrase, body.baryte .en-txt strong, body.baryte .en h2, body.baryte .urgence h2, body.baryte .urgence .u-tx > *, body.baryte .ur .ur-titre, body.baryte .ur .ur-fort, body.baryte .fn-final .fn-title, body.baryte .fn-final .fn-releve-v, body.baryte .pq blockquote, body.baryte .pq-chute h3, body.baryte .pq-signature strong{color:#E9E7E3!important} /* NOTE 38 : ---- LE GRIS SECONDAIRE `#526277`, les contextes que la famille C ne c -- voir galyct-baryte-bascule-notes.md */ body.baryte .vf-note, body.baryte .vf-note *, body.baryte .vf-ref, body.baryte .vf-ref *, body.baryte .rp-consent, body.baryte .rp-consent *, body.baryte .vf-hero .lead, body.baryte .vf-wrap > p, body.baryte .vf-wrap > p b, body.baryte p.lead{color:#AEB4BC!important} /* le libellé d'alerte « À éviter absolument », ambre sombre sur fond sombre */ body.baryte .card > span, body.baryte .grid .card span[class*="evit"], body.baryte .card .warn{color:#E0A43C!important} /* le lien de retour de la page d'état, bleu profond à 4,01:1 */ body.baryte .top a.home{color:#5FC4FF!important} /* NOTE 39 : ---- TROIS JETONS D'INTERFACE MAL ENCRÉS, dans les maquettes de `plate -- voir galyct-baryte-bascule-notes.md */ /* L'avatar : `background:var(--ink)` était un rond SOMBRE sur le site clair. BARYTÉ a éclairci `--ink`, le rond est devenu blanc et son texte illisible. */ body.baryte .av{background:#1E2733!important;color:#E9E7E3!important} /* Le chrono réglementaire garde son bandeau crème : c'est un jeton d'alerte, il reste clair et reçoit l'encre sombre qui va avec. */ body.baryte .clock{background:#FFF4E2!important;color:#6B3E00!important; border-color:#E8C583!important} /* NOTE 40 : LES PASTILLES DE LA MATRICE DE RISQUE. Leur aplat est écrit en ligne, -- voir galyct-baryte-bascule-notes.md */ body.baryte .mx-dot b[style*="#B42318"]{background:#7F1911!important} body.baryte .mx-dot b[style*="#AA6700"]{background:#7A4A00!important} body.baryte .mx-dot b[style*="#0E7CC0"]{background:#0A5687!important} body.baryte .mx-dot b[style*="#1E8759"]{background:#14603F!important} /* NOTE 41 : ====== DIXIÈME COUCHE : LE GROUPE COMPLET, ET UNE RÈGLE DE MA MAIN === -- voir galyct-baryte-bascule-notes.md */ body.baryte .en .en-titre, body.baryte .en h2, body.baryte .en h3, body.baryte .section--dark h1, body.baryte .section--dark h2, body.baryte .section--dark h3, body.baryte .urgence h2, body.baryte .final h2, body.baryte .hero h1{color:#E9E7E3!important} /* NOTE 42 : UNE RÈGLE DE MA MAIN ÉCRASAIT UNE AUTRE RÈGLE DE MA MAIN. La huitième -- voir galyct-baryte-bascule-notes.md */ body.baryte .vzc span.clock{color:#6B3E00!important} /* Le paragraphe de la page Souveraineté, gris `#526277` posé directement sur le sol de la page, à 3,18:1. */ body.baryte main > .section > .wrap > p{color:#AEB4BC!important} /* NOTE 43 : ---- LES DEUX DERNIERS DEFAUTS, releves EN PRODUCTION le 04/09/2026. -- voir galyct-baryte-bascule-notes.md */ body.baryte .wrap > .banner.ok{ background:#0E1926!important;border-color:rgba(233,231,227,.16)!important} body.baryte .wrap > .banner.ok *{color:#E9E7E3!important} body.baryte .wrap > .banner.ok p{color:#AEB4BC!important} /* NOTE 44 : ====== ONZIÈME COUCHE : UNE RÈGLE DE MA MAIN, TROP LARGE ====== -- voir galyct-baryte-bascule-notes.md */ body.baryte .vzc span.pin, body.baryte .vzc .rail span.s{color:#0A1A2E!important} /* NOTE 45 : ====== DOUZIÈME COUCHE : CE QUE LA LECTURE DES PIXELS A TROUVÉ ====== -- voir galyct-baryte-bascule-notes.md */ /* --- 1. GALYCT.IO, les conditions générales : une encre ardoise `#4A5A69` posée sur le sol de la page, 2,79:1. */ body.baryte #cga-quoi, body.baryte .cga-pied, body.baryte .cga-pied *{color:#AEB4BC!important} /* Le point de la marque, sur la page d'état : bleu profond à 4,01:1. */ body.baryte .top .brand span{color:#5FC4FF!important} /* NOTE 46 : --- 2. `p.lead` ÉTAIT VISÉ NU EN NEUVIÈME COUCHE. Le gris `#AEB4BC` co -- voir galyct-baryte-bascule-notes.md */ body.baryte section.hero.canvas .h-tx p.lead, body.baryte section.hero.canvas .h-tx .lead{color:#F4F6F9!important} /* NOTE 47 : --- 3. LES PASTILLES CLAIRES ATTEINTES PAR MES RÈGLES D'ENCRE CLAIRE. -- voir galyct-baryte-bascule-notes.md */ body.baryte .sd-phone .sd-replay{color:#0A1A14!important} body.baryte .vf-card h2 .n{color:#0A2B47!important} body.baryte .pv-dos-h .pv-dos-seal{color:#04231F!important} /* NOTE 48 : ---- LE BOUTON « REJOUER » DE LA MAQUETTE ANIMÉE. -- voir galyct-baryte-bascule-notes.md */ body.baryte .sd-phone .sd-replay{ background:#0A5687!important;border-color:#0A5687!important;color:#FFFFFF!important} /* NOTE 49 : ====== QUATORZIÈME COUCHE : LES RÈGLES RESTAURÉES, PASSÉES EN BARYTÉ = -- voir galyct-baryte-bascule-notes.md */ /* Le bandeau des référentiels et ses jetons. */ body.baryte .ref4{ background:#0B1420!important; border-top-color:rgba(233,231,227,.16)!important; border-bottom-color:rgba(233,231,227,.16)!important} body.baryte .ref4-row{border-bottom-color:rgba(233,231,227,.10)!important} body.baryte .ref4-tag{ background:#0E1926!important;border-color:rgba(233,231,227,.22)!important;color:#E9E7E3!important} body.baryte .ref4-lbl{color:#E9E7E3!important} body.baryte .ref4-v{color:#AEB4BC!important} body.baryte .ref4-n{color:#8B939C!important} body.baryte .ref4-m{color:#8B939C!important} /* Le journal du registre : un libellé écrit avec l'encre du sol de la page, à 1,14:1. Même famille que le jeton `--paper` détourné en encre. */ body.baryte .rg-entree .rg-lib{color:#E9E7E3!important} body.baryte .rg-entree .rg-meta{color:#AEB4BC!important} /* Les libellés d'état : rouge d'alerte et vert de validation, écrits pour un fond clair. On les éclaircit sans changer leur sémantique. */ body.baryte .up-panneau .up-cote, body.baryte .rg-etat--crit{color:#E58A96!important} body.baryte .rg-etat--ok{color:#86B8A4!important} /* ==== DEBUT BARYTE / SYSTEME (couche de portage, 05/09/2026) ==== */ /* NOTE 50 : ===================================================================== -- voir galyct-baryte-bascule-notes.md */ /* NOTE 51 : ===================================================================== -- voir galyct-baryte-bascule-notes.md */ body.baryte{ --f-titre:"Fraunces","Iowan Old Style",Charter,Georgia,serif; --f-mesure:"JetBrains Mono",ui-monospace,Consolas,monospace; --e2:8px; --e3:12px; --e4:20px; --e5:32px; --coupe:20px; --coin:polygon(0 0,calc(100% - var(--coupe)) 0,100% var(--coupe),100% 100%,0 100%); --obturateur:cubic-bezier(.16,.84,.28,1); --declic:cubic-bezier(.2,0,0,1); --retrait:cubic-bezier(.5,0,.9,.4); --d-entree:120ms; --d-sortie:180ms; --d-moyen:560ms; --d-titre:720ms; } /* NOTE 52 : ===================================================================== -- voir galyct-baryte-bascule-notes.md */ /* NOTE 53 : --- .sys-titre--s -> le titre de section ------------------------- -- voir galyct-baryte-bascule-notes.md */ body.baryte .sec-head h2:not([style*="font-size"]){ font-family:var(--f-titre); font-weight:500; font-size:clamp(36px,3.6vw,46px); line-height:1.1; letter-spacing:-.018em; } /* NOTE 54 : --- .sys-titre--b -> le titre de carte --------------------------- -- voir galyct-baryte-bascule-notes.md */ body.baryte .card h3:not([style*="font-size"]){ font-family:var(--f-titre); font-weight:500; font-size:1.875rem; line-height:1.22; letter-spacing:-.012em; } /* NOTE 55 : --- .sys-chapeau -> le chapeau de section ------------------------ -- voir galyct-baryte-bascule-notes.md */ body.baryte .sec-head p:not(.eyebrow), body.baryte .sh-r, body.baryte .lede{ font-size:1.375rem; line-height:1.4; letter-spacing:-.006em; } /* NOTE 56 : --- .sys-texte -> le corps de carte ------------------------------ -- voir galyct-baryte-bascule-notes.md */ body.baryte .card p{ font-size:1.125rem; letter-spacing:-.003em; } /* Repli mobile de BARYTE. Indispensable sur .card p : 18 px de corps dans une carte de 248 px de large devient illisible. */ @media (max-width:899px){ body.baryte .sec-head p:not(.eyebrow), body.baryte .sh-r, body.baryte .lede{ font-size:1.125rem; } body.baryte .card p{ font-size:1rem; } } /* NOTE 57 : --- .sys-etiquette -> le numero et le surtitre de section -------- -- voir galyct-baryte-bascule-notes.md */ body.baryte .sec-num, body.baryte .section .eyebrow{ font-family:var(--f-mesure); font-size:.75rem; font-weight:400; line-height:1.45; letter-spacing:.08em; text-transform:uppercase; } /* NOTE 58 : --- .sys-lien -> le lien de prose -------------------------------- -- voir galyct-baryte-bascule-notes.md */ body.baryte main p a:not([class]), body.baryte main li a:not([class]){ text-decoration-line:underline; text-underline-offset:.18em; text-decoration-color:var(--papier-voile); transition:text-decoration-color var(--d-sortie) var(--retrait); } body.baryte main p a:not([class]):hover, body.baryte main p a:not([class]):focus-visible, body.baryte main li a:not([class]):hover, body.baryte main li a:not([class]):focus-visible{ text-decoration-color:var(--accent); transition-duration:var(--d-entree); transition-timing-function:var(--declic); } /* NOTE 59 : ===================================================================== -- voir galyct-baryte-bascule-notes.md */ /* NOTE 60 : --- .sys-carte -> les boites bordees ----------------------------- -- voir galyct-baryte-bascule-notes.md */ body.baryte .card, body.baryte .tile, body.baryte .testi, body.baryte .offer, body.baryte .rung, body.baryte .eco-brique, body.baryte .split, body.baryte .price:not(.is-featured){ border-radius:0; clip-path:var(--coin); } /* NOTE 61 : --- .sys-donnees -> les bandes de chiffres ----------------------- -- voir galyct-baryte-bascule-notes.md */ body.baryte .kfig, body.baryte .sov{ border-radius:0; clip-path:var(--coin); } /* NOTE 62 : --- .sys-grille--cinq -> la frise d etapes ----------------------- -- voir galyct-baryte-bascule-notes.md */ body.baryte .steps{ border-radius:0; clip-path:var(--coin); } /* NOTE 63 : --- .sys-rang -> les rangees de pastilles ------------------------ -- voir galyct-baryte-bascule-notes.md */ body.baryte .prv-chip, body.baryte .rp-tag{ border-radius:0; padding:var(--e2) var(--e3); } /* NOTE 64 : ===================================================================== -- voir galyct-baryte-bascule-notes.md */ body.baryte .grid{ gap:var(--e5); } /* NOTE 65 : --- restitution de la maquette produit ----------------------------- -- voir galyct-baryte-bascule-notes.md */ body.baryte .app .card h3, body.baryte .work .card h3, body.baryte .mock .card h3{ /* NOTE 66 : la pile EXACTE de l origine, mesuree sur la maquette. Pas -- voir galyct-baryte-bascule-notes.md */ font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-weight:700; font-size:.875rem; line-height:1.5; letter-spacing:-.02em; } body.baryte .app .grid, body.baryte .work .grid, body.baryte .mock .grid{ gap:18px; } /* NOTE 67 : LA MAQUETTE SORT AUSSI DU COIN COUPE, ET C EST INDISSOCIABLE DU RESTE. -- voir galyct-baryte-bascule-notes.md */ body.baryte .app .card, body.baryte .work .card, body.baryte .mock .card{ border-radius:6px; clip-path:none; } /* NOTE 68 : ===================================================================== -- voir galyct-baryte-bascule-notes.md */ /* NOTE 69 : --- .sys-cta -> le bouton ---------------------------------------- -- voir galyct-baryte-bascule-notes.md */ body.baryte .btn{ border-radius:2px; transition:background var(--d-sortie) var(--retrait), color var(--d-sortie) var(--retrait), border-color var(--d-sortie) var(--retrait), transform .16s var(--retrait), box-shadow var(--d-sortie) var(--retrait); } body.baryte .btn:hover, body.baryte .btn:focus-visible{ transition-duration:var(--d-entree); transition-timing-function:var(--declic); } /* NOTE 70 : --- .sys-actions -> les groupes de boutons ----------------------- -- voir galyct-baryte-bascule-notes.md */ body.baryte .fn-actions, body.baryte .df-actions, body.baryte .df__actions{ gap:var(--e3); } /* NOTE 71 : --- .sys-registre -> la main courante ---------------------------- -- voir galyct-baryte-bascule-notes.md */ body.baryte .rg-journal{ border-radius:0; } /* NOTE 72 : --- .sys-empreinte -> les empreintes ----------------------------- -- voir galyct-baryte-bascule-notes.md */ body.baryte .rg-hash{ font-size:.6875rem; letter-spacing:.04em; margin-top:var(--e2); overflow-wrap:anywhere; word-break:normal; } body.baryte .hashln{ font-family:var(--f-mesure); letter-spacing:.04em; overflow-wrap:anywhere; } /* NOTE 73 : --- .sys-etat -> la pastille d etat ------------------------------ -- voir galyct-baryte-bascule-notes.md */ body.baryte .rg-etat{ font-size:.6875rem; letter-spacing:.06em; padding:1px var(--e2); border-radius:0; } /* NOTE 74 : ===================================================================== -- voir galyct-baryte-bascule-notes.md */ @keyframes sys-monter{ from{ opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } @keyframes sys-tirer{ from{ clip-path:inset(-.15em -.15em 100% -.15em); } to { clip-path:inset(-.15em -.15em -.35em -.15em); } } @keyframes sys-filet-y{ from{ transform:scaleY(0); } to { transform:none; } } /* NOTE 75 : --- .sys-monte -> la revelation au defilement --------------------- -- voir galyct-baryte-bascule-notes.md */ @supports (animation-timeline:view()){ html.motion body.baryte .z-reveal{ opacity:1; transform:none; transition:none; animation:sys-monter var(--d-moyen) var(--obturateur) forwards; animation-duration:auto; animation-timeline:view(); animation-range:entry 6% entry 46%; } html.motion body.baryte .section .grid>.z-reveal:nth-child(2){ animation-range:entry 10% entry 50%; } html.motion body.baryte .section .grid>.z-reveal:nth-child(3){ animation-range:entry 14% entry 54%; } } /* NOTE 76 : --- .sys-donnee -> le chiffre de la frise d etapes ---------------- -- voir galyct-baryte-bascule-notes.md */ @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ body.baryte .steps .st .k{ animation:sys-tirer var(--d-titre) var(--obturateur) forwards; animation-duration:auto; animation-timeline:view(); animation-range:entry 14% entry 44%; } body.baryte .steps .st:nth-child(2) .k{ animation-range:entry 18% entry 48%; } body.baryte .steps .st:nth-child(3) .k{ animation-range:entry 22% entry 52%; } body.baryte .steps .st:nth-child(4) .k{ animation-range:entry 26% entry 56%; } } } /* NOTE 77 : --- .sys-plan -> le filet de l en-tete de section ------------------ -- voir galyct-baryte-bascule-notes.md */ @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ body.baryte .section .sec-head{ position:relative; border-left-color:transparent; } body.baryte .section .sec-head::before{ content:""; position:absolute; left:-2px; top:0; bottom:0; width:2px; background:var(--accent); transform-origin:top; animation:sys-filet-y var(--d-moyen) var(--declic) forwards; animation-duration:auto; animation-timeline:view(); animation-range:entry 4% entry 34%; } } } /* NOTE 78 : ===================================================================== -- voir galyct-baryte-bascule-notes.md */ body.baryte .grid{ counter-reset:sys-repere; } body.baryte .grid > .card{ counter-increment:sys-repere; position:relative; } /* NOTE 79 : LA MARGE DE BARYTE, MESUREE SUR LA DEMONSTRATION : 32 px en haut, -- voir galyct-baryte-bascule-notes.md */ body.baryte .grid > .card{ padding:32px 20px 20px; } body.baryte .grid > .card::after{ content:counter(sys-repere,decimal-leading-zero); position:absolute; top:10px; right:calc(var(--coupe,20px) + 8px); font-family:var(--f-mesure,"JetBrains Mono",ui-monospace,monospace); font-size:.6875rem; font-weight:400; letter-spacing:.1em; line-height:1; color:var(--accent,#3DA6E8); opacity:.68; pointer-events:none; } /* NOTE 80 : SOUS 620 PX LA GRILLE PASSE A UNE COLONNE. Le repere perdrait son sens -- voir galyct-baryte-bascule-notes.md */ @media (max-width:620px){ body.baryte .grid > .card::after{ content:none; } body.baryte .grid > .card{ padding:20px; } } /* NOTE 81 : ===================================================================== -- voir galyct-baryte-bascule-notes.md */ /* le bloc commun aux 4 surfaces */ body.baryte .lead, body.baryte .sec-head p, body.baryte .zsys-head p, body.baryte .cx-r p, body.baryte .urgence .u-tx p, body.baryte .offer > p:not(.who):not(.tag), body.baryte .ebrick p, body.baryte .eco-infra, body.baryte .final p, /* galyct.io */ body.baryte .rp-sub, body.baryte .ap-feat, body.baryte .cx-lede, body.baryte .ur .ur-texte, body.baryte .cf-sous, body.baryte .fn-final .fn-lede, /* pro et perso */ body.baryte .mo-texte, body.baryte .ur .ur-prose, body.baryte .en-intro, body.baryte .tf .tf-sous, body.baryte .df__texte, body.baryte .lc-txt, body.baryte .rg-sous, body.baryte .up-texte{ text-align:left; -webkit-hyphens:manual; hyphens:manual; } /* ==== FIN BARYTE / SYSTEME ==== */ /* TRAIT-BISEAU-08092026 (v3) ----------------------------------------------- Deux defauts de contour, une meme cause : le POIDS des regles Baryte. 1. LE SURVOL NE CHANGEAIT PLUS LE CONTOUR. site.css dit .card:hover{border-color:var(--accent)} ; ce fichier dit body.baryte .card{...!important}, qui gagne AUSSI pendant le survol. Mesure : la carte se soulevait et prenait une ombre, le contour restait eteint. On rend au survol la meme priorite qu au repos. 2. LE BISEAU N AVAIT PAS DE TRAIT. Le clip-path qui coupe le coin superieur droit coupe aussi la bordure : le trait du haut s arretait net, celui de droite reprenait plus bas, la diagonale restait nue. TROIS PRECAUTIONS. a) Le trait est pose sur les MEMES selecteurs que le decoupage, et retire la ou le decoupage est retire : il ne peut pas deborder du biseau. b) Sa largeur et sa POSITION sont mesurees sur la brique reelle, non deduites : bordure d un pixel (rapport 0,94) et son bord exterieur coincide avec l arete du biseau. c) Sa couleur n est pas ecrite a la main. Chaque regle qui fixe une couleur de bordure a sa jumelle ci-dessous, au selecteur ET a la priorite identiques, qui fixe --tb a la meme couleur. Meme cascade, donc le trait suit la bordure partout, y compris dans les contextes non listes. Le !important n est pas un confort : sans lui, background:...!important de Baryte remet image, taille, position et repetition a leur valeur initiale, et le degrade se repeterait sur toute la carte. */ /* 1. le survol reprend la main sur le contour */ body.baryte .card:hover{border-color:var(--accent)!important} body.baryte .tile:hover{border-color:var(--accent)!important} body.baryte .eco-brique:hover, body.baryte .eco-brique:focus-visible{border-color:var(--accent)!important} /* 2. le trait du biseau, sur les selecteurs qui posent le decoupage */ body.baryte .card, body.baryte .tile, body.baryte .testi, body.baryte .offer, body.baryte .rung, body.baryte .eco-brique, body.baryte .split, body.baryte .price:not(.is-featured){background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .kfig, body.baryte .sov{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .steps{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} /* 2 bis. et sur tout selecteur qui repose un fond par-dessus : le raccourci background efface image, taille, position et repetition. */ body.baryte .card{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .section--dark .card, body.baryte .section--deep .card{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .tile{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .offer{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .price:not(.is-featured){background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .sov{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .section--dark .sov, body.baryte .section--deep .sov{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .maturity .rung{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .testi{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .card::before{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte.brand-smart .card, body.baryte.brand-smart .tile, body.baryte.brand-smart .price:not(.is-featured), body.baryte.brand-smart .offer, body.baryte.brand-smart .testi{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte.brand-smart .sov{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte.brand-smart .section--deep .card, body.baryte.brand-smart .section--dark .card{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte.brand-smart .section--deep .sov, body.baryte.brand-smart .section--dark .sov{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .kfig{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .eco-brique{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .offer, body.baryte .price:not(.is-featured), body.baryte .testi, body.baryte .maturity .rung{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .grid > .tile{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .card, body.baryte .tile, body.baryte .testi, body.baryte .offer, body.baryte .rung, body.baryte .eco-brique, body.baryte .split{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte.brand-smart .card, body.baryte.brand-smart .tile, body.baryte.brand-smart .offer, body.baryte.brand-smart .testi{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .offer, body.baryte .testi, body.baryte .maturity .rung{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte body.brand-smart .card, body.baryte body.brand-smart .tile, body.baryte body.brand-smart .offer, body.baryte body.brand-smart .testi{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte body.brand-smart .sov{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte body.brand-smart .section--deep .card, body.baryte body.brand-smart .section--dark .card{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte body.brand-smart .section--deep .sov, body.baryte body.brand-smart .section--dark .sov{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte .app .card, body.baryte .work .card, body.baryte .mock .card{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} body.baryte #loginchooser .offer{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--tb,var(--border)) calc(50% - 1px),var(--tb,var(--border)) 50%,transparent 50%)!important;background-size:var(--coupe) var(--coupe)!important;background-position:top right!important;background-repeat:no-repeat!important;transition:border-color .2s var(--ease,ease),background-image .2s var(--ease,ease)} /* 2 ter. mais jamais la ou le decoupage est retire */ body.baryte .app .card, body.baryte .work .card, body.baryte .mock .card{background-image:none!important} /* 4. l anneau de focus clavier, redessine a l interieur du biseau */ body.baryte :is(.card,.tile,.testi,.offer,.rung,.eco-brique,.split,.price:not(.is-featured),.kfig,.sov,.steps):focus-visible, body.baryte :is(.card,.tile,.testi,.offer,.rung,.eco-brique,.split,.price:not(.is-featured),.kfig,.sov,.steps) :is(a[href],button,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--accent,#3DA6E8)!important;outline-offset:-2px!important} /* 5. les survols rendus : chaque declaration du site, au poids de Baryte */ body.baryte .btn--primary:hover{box-shadow:0 8px 20px rgba(224,135,42,.30)!important} body.baryte .site-head nav a:hover{color:#fff!important;background-color:rgba(255,255,255,.07)!important} body.baryte .head-actions .link-connect:hover{color:#fff!important} body.baryte .card:hover{border-color:var(--accent)!important;box-shadow:var(--shadow-md)!important} body.baryte .card:hover .card-ic{border-color:var(--accent)!important;color:var(--accent)!important} body.baryte .card--link:hover{border-color:var(--accent)!important} body.baryte .tile:hover{border-color:var(--accent)!important;box-shadow:var(--shadow-md)!important} body.baryte .tile:hover .t-ic{border-color:var(--accent)!important;color:var(--accent)!important} body.baryte .tile:hover .t-go{color:var(--accent)!important} body.baryte .offer:hover{box-shadow:var(--shadow-md)!important} body.baryte .price:hover{box-shadow:var(--shadow-md)!important} body.baryte .testi:hover{box-shadow:var(--shadow-md)!important} body.baryte .foot-col a:hover{color:#fff!important} body.baryte .foot-eco a:hover{color:#fff!important} body.baryte .card:hover{box-shadow:0 14px 30px rgba(0,17,46,.10)!important} body.baryte .card:hover .card-ic{background-color:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important} body.baryte .section--dark .card:hover .card-ic, body.baryte .section--deep .card:hover .card-ic{background-color:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important} body.baryte .eco-switch a:hover{color:#fff!important} body.baryte.brand-smart .eco-switch a:hover, body.baryte.brand-smart .eco-switch a[aria-current]{color:#fff!important} body.baryte .horoute-c.is-smart:hover{border-color:#00A9B8!important;background-color:rgba(0,169,184,.12)!important} body.baryte .horoute-c.is-pro:hover{border-color:#008CD6!important;background-color:rgba(0,140,214,.12)!important} body.baryte .horoute-c.is-cab:hover{border-color:#C79A3B!important;background-color:rgba(199,154,59,.12)!important} body.baryte .horoute-all:hover{color:#fff!important} body.baryte .rp-row:hover{background-color:rgba(58,166,232,.06)!important} body.baryte .rp-src:hover{background-color:rgba(58,166,232,.14)!important;border-color:var(--accent)!important;color:#fff!important} body.baryte .eco-brique:hover, body.baryte .eco-brique:focus-visible{border-color:var(--accent)!important} body.baryte .ap-panel:hover{border-color:var(--accent-deep)!important} body.baryte .hb-c.is-smart:hover{border-color:#00A9B8!important;background-color:rgba(0,169,184,.12)!important} body.baryte .hb-c.is-pro:hover{border-color:#008CD6!important;background-color:rgba(0,140,214,.12)!important} body.baryte .hb-c.is-cab:hover{border-color:#C79A3B!important;background-color:rgba(199,154,59,.12)!important} body.baryte .hb-all:hover{color:#fff!important} body.baryte .eco-switch a.eco-item:hover{color:#fff!important;background-color:rgba(255,255,255,.05)!important} body.baryte .eco-switch a.eco-item:hover .eco-dot{background-color:var(--h,#fff)!important} body.baryte .foot-li:hover{color:#fff!important;background-color:#0A66C2!important;border-color:#0A66C2!important} body.baryte .decor:hover .decor-cmd, body.baryte .decor:focus-within .decor-cmd, body.baryte .decor[data-anime="1"] .decor-cmd{opacity:.9!important} body.baryte .decor-cmd:hover{opacity:1!important;background-color:rgba(9,13,19,.8)!important} body.baryte .decor-cmd:focus-visible{opacity:1!important} body.baryte .zsys .zpil:hover{border-color:var(--zs-accent)!important;background-color:rgba(58,160,232,.07)!important} body.baryte .zsys .zpil .zplus:hover{border-color:var(--zs-accent)!important;color:var(--zs-accent-soft)!important} body.baryte .zsys .zsys-explore a:hover{border-color:var(--zs-accent)!important;background-color:rgba(58,160,232,.08)!important} body.baryte .site-head .nav-group:hover>.nav-panel, body.baryte .site-head .nav-group:focus-within>.nav-panel{opacity:1!important} body.baryte .site-head .nav-panel a:hover, body.baryte .site-head .nav-panel a:focus-visible{background-color:rgba(255,255,255,.07)!important} body.baryte .site-head .nav-group:hover .nav-trigger svg, body.baryte .site-head .nav-group:focus-within .nav-trigger svg{opacity:1!important} body.baryte .site-foot .foot-msp:hover, body.baryte .site-foot .foot-msp:focus-visible{border-color:rgba(255,255,255,.30)!important;background-color:rgba(255,255,255,.05)!important} body.baryte .zc-fab:hover, body.baryte .zc-fab:focus-visible{background-color:#171A1F!important;border-color:rgba(255,255,255,.30)!important} body.baryte .galyct-haut:hover, body.baryte .galyct-haut:focus-visible{opacity:1!important} body.baryte .top .back:hover{color:#fff!important;border-color:#00aceb!important} body.baryte .btn--p:hover{background-color:#eaf7fc!important} body.baryte .btn--s:hover{border-color:#00aceb!important;color:#fff!important} body.baryte .foot a:hover{color:#fff!important} body.baryte .cx-modal__close:hover{color:var(--ink)!important} body.baryte .cx-field input:focus-visible{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)!important} body.baryte .btn:hover{border-color:var(--azure)!important;color:var(--azure)!important} /* 6. les traits verticaux effaces par l arrondi sous-pixel */ @media (min-width:1150px){body.baryte .eco-briques{justify-content:flex-start}body.baryte .eco-briques>li{flex:0 0 auto;width:calc((100% - 64px)/5)}} @supports (width:round(down,10px,1px)){@media (min-width:1150px){ body.baryte .eco-briques>li{width:round(down,calc((100% - 64px)/5),1px)}}} /* 7. le soulevement au survol, rendu par-dessus l animation de revelation */ html.motion body.baryte .btn:hover{transform:translateY(-2px)!important} html.motion body.baryte .card:hover{transform:translateY(-4px)!important} html.motion body.baryte .card:hover .card-ic{transform:translateY(-1px)!important} html.motion body.baryte .card--link:hover{transform:translateY(-4px)!important} html.motion body.baryte .tile:hover{transform:translateY(-4px)!important} html.motion body.baryte .tile:hover .t-go{transform:translateX(4px)!important} html.motion body.baryte .offer:hover{transform:translateY(-4px)!important} html.motion body.baryte .price:hover{transform:translateY(-4px)!important} html.motion body.baryte .testi:hover{transform:translateY(-3px)!important} html.motion body.baryte .card:hover{transform:translateY(-3px)!important} html.motion body.baryte .card:hover::before{transform:scaleX(1)!important} html.motion body.baryte .horoute-c:hover{transform:translateX(3px)!important} html.motion body.baryte .btn:hover::after{transform:translateX(130%)!important} html.motion body.baryte .ap-cta .btn:hover .ap-arrow{transform:translateX(3px)!important} html.motion body.baryte .ur .ur-cta:hover .ur-fleche{transform:translateX(4px)!important} html.motion body.baryte .cf-src:hover span{transform:translateX(3px)!important} html.motion body.baryte .hb-c:hover{transform:translateY(-2px)!important} html.motion body.baryte .site-head nav a:hover{transform:translateY(-1px)!important} html.motion body.baryte .foot-li:hover{transform:translateY(-1px)!important} html.motion body.baryte .site-head .nav-group:hover .nav-trigger svg, body.baryte .site-head .nav-group:focus-within .nav-trigger svg{transform:translateY(1px)!important} html.motion body.baryte .btn--p:hover{transform:translateY(-2px)!important} html.motion body.baryte .btn--s:hover{transform:translateY(-2px)!important} html.motion body.baryte .ebrick:hover{transform:translateY(-2px)!important} /* 3. les jumelles : --tb suit la bordure, regle par regle, priorite comprise */ .card{--tb:var(--border)} .card:hover{--tb:var(--accent)} .section--dark .card, .section--deep .card{--tb:rgba(255,255,255,.12)} .tile{--tb:var(--border)} .tile:hover{--tb:var(--accent)} .split{--tb:var(--border)} .offer{--tb:var(--border)} .price:not(.is-featured){--tb:var(--border)} .sov{--tb:var(--border)} .steps{--tb:var(--border)} .maturity .rung{--tb:var(--border)} .testi{--tb:var(--border)} body.brand-smart .card, body.brand-smart .tile, body.brand-smart .price:not(.is-featured), body.brand-smart .offer, body.brand-smart .testi{--tb:#eaf7fc} body.brand-smart .section--deep .card, body.brand-smart .section--dark .card{--tb:rgba(255,255,255,.15)} .kfig{--tb:rgba(255,255,255,.36)} .eco-brique{--tb:var(--border)} .eco-brique:hover, .eco-brique:focus-visible{--tb:var(--accent)} body.baryte .card, body.baryte .tile{--tb:rgba(233,231,227,.16)} body.baryte .offer, body.baryte .price:not(.is-featured), body.baryte .testi, body.baryte .maturity .rung{--tb:rgba(233,231,227,.16)} body.baryte .card{--tb:rgba(233,231,227,.16)!important} body.baryte .sov{--tb:rgba(233,231,227,.16)!important} body.baryte .grid > .tile{--tb:rgba(233,231,227,.16)!important} body.baryte .card:hover{--tb:var(--accent)!important} body.baryte .tile:hover{--tb:var(--accent)!important} body.baryte .eco-brique:hover, body.baryte .eco-brique:focus-visible{--tb:var(--accent)!important} #loginchooser .offer{--tb:rgba(255,255,255,.11)!important}