/* ========================================================= THEME : variantes de couleurs pour la démonstration (jamais chargé en production par défaut). Chargé par motion.js (bloc THEME) seulement si un thème est actif : ?theme=vert | bordeaux | nuit | sable | blanc (puis mémorisé dans sessionStorage['m7_theme']) ?type=v2 (typographie « mélange gras + italique », mémorisée dans sessionStorage['m7_type'], avec ou sans thème de couleurs) ?theme=defaut (charte actuelle, aucun fichier chargé) Sans attribut data-theme sur , rien de ce fichier ne s'applique : la charte actuelle est inchangée. Principe : les 8 jetons de la charte (--canvas --ink --surf --emph --rule --deep --accent --accent-d) sont redéfinis par thème, puis quelques jetons dérivés : --on-accent texte posé sur --accent (boutons, onglet actif, bouton d'encart) --on-emph texte posé sur --emph (puces, encadrés, messages) et sur le fond de page --ink-rgb --deep-rgb --accent-rgb pour les filets, voiles et ombres écrits en rgba() dans les pages Choix de conception : - sable et blanc gardent la polarité de la charte (fond clair, encre foncée, sections sombres) : les règles des pages fonctionnent telles quelles, seules les valeurs changent. - nuit inverse la polarité (fond sombre, encre claire) : à l'intérieur des surfaces sombres (.sec-dark, .xhero, .foot, .dbar, encarts signature...), --canvas et --ink sont ré-échangés localement pour que « var(--canvas) = texte clair, var(--ink) = texte foncé » reste vrai comme dans la charte d'origine. Pas modifiés : photos (aucun filtre), verre 7 (WebGL, palette fixée dans glass/hero7.js), couleur de marque d'un partenaire (fixée en ligne par les pages), barre d'adresse factice des maquettes (.win-bar). ========================================================= */ /* ---------- 1. jetons par thème ---------- */ html[data-theme="nuit"]{ --t-canvas:#1F2E38; --t-ink:#F2ECE0; --canvas:#1F2E38; --ink:#F2ECE0; --surf:#273944; --emph:#2E4350; --rule:#9BABB4; --deep:#121B21; --accent:#D9B48A; --accent-d:#C49E72; --on-accent:#1F2E38; --on-emph:#F2ECE0; --on-deep:#F2ECE0; --ink-rgb:242,236,224; --deep-rgb:18,27,33; --accent-rgb:217,180,138; color-scheme:dark; } html[data-theme="sable"]{ --t-canvas:#EFE3D0; --t-ink:#3B3128; --canvas:#EFE3D0; --ink:#3B3128; --surf:#E6D7BF; --emph:#F6ECD9; --rule:#66574A; --deep:#2B241E; --accent:#7A4E2D; --accent-d:#5E3B21; --on-accent:#F6ECD9; --on-emph:#2B241E; --on-deep:#EFE3D0; --ink-rgb:59,49,40; --deep-rgb:43,36,30; --accent-rgb:122,78,45; } html[data-theme="blanc"]{ --t-canvas:#FFFFFF; --t-ink:#2A2521; --canvas:#FFFFFF; --ink:#2A2521; --surf:#F4F1EC; --emph:#F7F2EA; --rule:#6E665D; --deep:#1E1B18; --accent:#6B4A2E; --accent-d:#4F361F; --on-accent:#FFFFFF; --on-emph:#1E1B18; --on-deep:#FFFFFF; --ink-rgb:42,37,33; --deep-rgb:30,27,24; --accent-rgb:107,74,46; } /* vert : dominante verte de la boutique mind7first.fr (accent-3 du thème Shopify #576046, bouton principal en vert sauge #A5AB95 mais texte blanc à 2,4:1 : on prend donc l'olive pour les boutons, liens et puces), fond blanc cassé, beiges très pâles. --accent-rgb sert aussi de couleur aux courbes de fond (section 8). */ html[data-theme="vert"]{ --t-canvas:#FBFAF7; --t-ink:#1D261B; --canvas:#FBFAF7; --ink:#1D261B; --surf:#F3EFE6; --emph:#ECE6D8; --rule:#566048; --deep:#1F2A1C; --accent:#576046; --accent-d:#444C37; --on-accent:#FFFFFF; --on-emph:#1D261B; --on-deep:#FBFAF7; --ink-rgb:29,38,27; --deep-rgb:31,42,28; --accent-rgb:87,96,70; } /* naila : palette fournie par Naïla le 26/10. Base du site = Cocoa, Candlelit Cream, Sage, Olive Print ; fond blanc, la couleur vient des boutons, liens, accents et du mot en serif italique des titres (mode typo v2). #3E2C22 Cocoa (texte, sections sombres) #EDDFC4 Candlelit Cream (--emph : puces, encadrés, fonds doux) #6E6B41 Olive Print (--accent : boutons, liens) #B7BB88 Sage (--sage : fonds de puces, surlignages, jamais du texte sur blanc) --surf #F7F3EA = blanc cassé dérivé de la cream ; --rule #6B5A4E = cocoa éclairci (texte d'aide, 5,0:1 minimum sur la cream) --accent-text : olive foncé pour du petit texte posé sur la cream (4,15:1 avec l'olive officiel, 5,6:1 avec celui-ci) */ html[data-theme="naila"]{ --t-canvas:#FFFFFF; --t-ink:#3E2C22; --canvas:#FFFFFF; --ink:#3E2C22; --surf:#F7F3EA; --emph:#EDDFC4; --rule:#6B5A4E; --deep:#3E2C22; --accent:#6E6B41; --accent-d:#55532F; --accent-text:#5E5C37; --on-accent:#FFFFFF; --on-emph:#3E2C22; --on-deep:#FBF7EE; --ink-rgb:62,44,34; --deep-rgb:62,44,34; --accent-rgb:110,107,65; --chip-bg:#B7BB88; } /* bordeaux : sous-thème de la page challenge (Merry Fit Mas). Sceptre Red #4D0E12 (rouge profond de ses animations, fourni par Naïla, vocal 26/10) en accent, #2E0A0D pour les sections sombres, Wine #651F30 en variante claire (--accent-light : survols, soulignés), Mauve #A8697A pour les touches, cream teintée mauve. */ html[data-theme="bordeaux"]{ --t-canvas:#FFFFFF; --t-ink:#3E2C22; --canvas:#FFFFFF; --ink:#3E2C22; --surf:#F7F3EA; --emph:#F2E4E8; --rule:#6B5A4E; --deep:#2E0A0D; --accent:#4D0E12; --accent-d:#3A0A0E; --accent-light:#651F30; --accent-text:#4D0E12; --on-accent:#FFFFFF; --on-emph:#3E2C22; --on-deep:#FBF7EE; --ink-rgb:62,44,34; --deep-rgb:46,10,13; --accent-rgb:77,14,18; --chip-bg:#F2E4E8; } /* Couleurs des challenges, événements et opérations mensuelles, disponibles dans tous les thèmes : --event Sceptre Red #4D0E12, --event-2 Wine #651F30, --event-3 Dusty Mauve #A8697A. --sage #B7BB88 (fonds, jamais du texte sur blanc). --highlight #F5EFC6 (« Transparent Yellow », sous-titres de Naïla) : surlignage de mot ou fond de puce claire, à employer avec parcimonie (non utilisé par défaut). */ html[data-theme]{--event:#4D0E12; --event-2:#651F30; --event-3:#A8697A; --sage:#B7BB88; --highlight:#F5EFC6} /* En thème naila, les zones « challenge » passent en rouge Sceptre Red sans toucher au HTML : toute la page calendrier (détectée par #cases-titre), la section Challenge de l'accueil (#challenge), l'encart partenaire du challenge, le teaser des prochains challenges (#prochains) et la section sponsoring de challenge de la page entreprises (#sponsor). Mêmes jetons que le sous-thème bordeaux (Sceptre Red). */ html[data-theme="naila"]:has(#cases-titre), html[data-theme="naila"] #challenge,html[data-theme="naila"] #encart-challenge,html[data-theme="naila"] .enc-chal, html[data-theme="naila"] #prochains,html[data-theme="naila"] #sponsor{ --emph:#F2E4E8; --deep:#2E0A0D; --accent:#4D0E12; --accent-d:#3A0A0E; --accent-light:#651F30; --accent-text:#4D0E12; --deep-rgb:46,10,13; --accent-rgb:77,14,18; --chip-bg:#F2E4E8; } /* ---------- 2. texte posé sur --accent ---------- */ /* Onglet actif, bouton de maquette et bouton « marque » du configurateur : ces classes n'existent qu'avec un fond --accent. */ html[data-theme] .rej-tab[aria-selected="true"], html[data-theme] .mk-btn.p, html[data-theme] .sec-dark .btn-lg.btn-brand{color:var(--on-accent)} /* bouton « marque » du configurateur au survol : fond clair, texte foncé (comme la charte d'origine) */ html[data-theme] .sec-dark .btn-lg.btn-brand:hover, html[data-theme] .sec-dark .btn-lg.btn-brand:focus-visible{color:var(--ink)} /* Boutons principaux (.btn-p, .btn-lg) : sur le fond de page, leur « var(--canvas) » d'origine est déjà le bon contraste dans les trois thèmes. Dans les surfaces sombres de nuit, --canvas est clair : on force alors --on-accent (sable sur texte foncé). Volontairement pas posé partout : sur contact.html, .btn-p n'a pas de fond accent et un texte --on-accent y serait invisible. */ html[data-theme="nuit"] .sec-dark .btn-p,html[data-theme="nuit"] .sec-dark .btn-lg:not(.btn-o), html[data-theme="nuit"] .xhero .btn-p,html[data-theme="nuit"] .xhero .btn-lg:not(.btn-o), html[data-theme="nuit"] .xhero .btn.btn-p, html[data-theme="nuit"] .foot .btn-p,html[data-theme="nuit"] .enc-sig .btn-p, html[data-theme="nuit"] .sec-dark .btn-p:hover,html[data-theme="nuit"] .sec-dark .btn-p:focus-visible, html[data-theme="nuit"] .sec-dark .btn-lg:not(.btn-o):hover,html[data-theme="nuit"] .sec-dark .btn-lg:not(.btn-o):focus-visible, html[data-theme="nuit"] .xhero .btn-p:hover,html[data-theme="nuit"] .xhero .btn-p:focus-visible, html[data-theme="nuit"] .xhero .btn-lg:not(.btn-o):hover,html[data-theme="nuit"] .xhero .btn-lg:not(.btn-o):focus-visible, html[data-theme="nuit"] .xhero .btn.btn-p:hover,html[data-theme="nuit"] .xhero .btn.btn-p:focus-visible{color:var(--on-accent)} /* encarts sans couleur de partenaire : la marque suit l'accent du thème (une couleur de partenaire posée en ligne garde la priorité) */ html[data-theme] .enc-slot,html[data-theme] .tier-vis{--brand-rgb:var(--accent-rgb);--brand-ink:var(--on-accent)} /* ---------- 3. texte sur fond --emph (puces, encadrés, messages, bande) et fond de page ---------- */ html[data-theme] .chip, html[data-theme] .goal, html[data-theme] .banner, html[data-theme] .form-msg, html[data-theme] .demo-msg, html[data-theme] .conf, html[data-theme] .cell.sel, html[data-theme] .cell.passee.valide, html[data-theme] .doc .todo, html[data-theme] .note-box, html[data-theme] .scratch, html[data-theme] .m-band, html[data-theme] .m-title, html[data-theme] .tier-vis::after, html[data-theme] .err, html[data-theme] .dg .wk em, html[data-theme] .dg-m tbody th em, html[data-theme] .dg .fl{color:var(--on-emph)} /* champs : texte d'aide lisible sur le fond du thème */ html[data-theme] input::placeholder,html[data-theme] textarea::placeholder{color:var(--rule);opacity:1} /* ---------- 4. filets, voiles et ombres écrits en dur dans les pages ---------- */ /* filets d'encre à faible opacité sur le fond de page */ html[data-theme] .pe-milieu{border-top-color:rgba(var(--ink-rgb),.2);border-bottom-color:rgba(var(--ink-rgb),.2)} html[data-theme] .pe-milieu .pe-kicker::after, html[data-theme] .pe-nl .pe-kicker::after{background:rgba(var(--ink-rgb),.22)} html[data-theme] .m-loader-rule{background:rgba(var(--ink-rgb),.22)} html[data-theme] .pe-nl,html[data-theme] .mk-nav,html[data-theme] .win-mini{border-color:rgba(var(--ink-rgb),.16)} html[data-theme] .mk-row{border-top-color:rgba(var(--ink-rgb),.18)} html[data-theme] .mk-row:last-child{border-bottom-color:rgba(var(--ink-rgb),.18)} html[data-theme] .mk-ln i{background:rgba(var(--ink-rgb),.14)} /* voiles sombres posés sur les photos : teinte du thème */ html[data-theme] .xhero::before{background:rgba(var(--deep-rgb),.46)} html[data-theme] .hs::before{background:rgba(var(--deep-rgb),.6)} html[data-theme] .hs-2::before{background:rgba(var(--deep-rgb),.62)} html[data-theme] .hs-2.sans-visuel::before{background:none} html[data-theme] .pe-pill{background:rgba(var(--deep-rgb),.5)} html[data-theme] .pe-milieu .pe-pill{background:rgba(var(--deep-rgb),.62)} html[data-theme] .pe-glass{background:linear-gradient(135deg,rgba(var(--brand-rgb,var(--accent-rgb)),.5),rgba(var(--deep-rgb),.62))} @supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){ html[data-theme] .pe-pill{background:rgba(var(--deep-rgb),.32)} html[data-theme] .pe-milieu .pe-pill{background:rgba(var(--deep-rgb),.62)} html[data-theme] .pe-glass{background:linear-gradient(135deg,rgba(var(--brand-rgb,var(--accent-rgb)),.42),rgba(var(--deep-rgb),.42))} } /* ---------- 5. nuit : polarité inversée ---------- */ /* surfaces sombres : --canvas devient le texte clair, --ink le texte foncé, comme dans la charte d'origine */ html[data-theme="nuit"] .foot, html[data-theme="nuit"] .dbar, html[data-theme="nuit"] .xhero, html[data-theme="nuit"] .sec-dark, html[data-theme="nuit"] .toast, html[data-theme="nuit"] .pe-pied, html[data-theme="nuit"] .pe-glass, html[data-theme="nuit"] .pe-pill, html[data-theme="nuit"] .enc-sig, html[data-theme="nuit"] .m-scene, html[data-theme="nuit"] .m-zoom, html[data-theme="nuit"] .hs, html[data-theme="nuit"] .hs-ctl, html[data-theme="nuit"] .mk-dark, html[data-theme="nuit"] .mk-foot, html[data-theme="nuit"] .ml-av{--canvas:var(--on-deep);--ink:var(--t-canvas)} /* ... sauf les éléments clairs posés dans une surface sombre : ils retrouvent les jetons du thème */ html[data-theme="nuit"] .m-title, html[data-theme="nuit"] .win, html[data-theme="nuit"] .phone-screen{--canvas:var(--t-canvas);--ink:var(--t-ink)} /* la maquette d'e-mail reste un e-mail clair (il s'affiche dans la messagerie du lecteur, pas sur le site) */ html[data-theme="nuit"] .mail{--canvas:#FAF5EB;--ink:#484036;--surf:#ECECE4;--emph:#F2E9CF;--rule:#666E72;--deep:#33302C;--accent:#34505F;--ink-rgb:72,64,54;color:#484036} html[data-theme="nuit"] .hs-ph{background:linear-gradient(135deg,var(--deep) 0%,#22333d 55%,#2c414d 100%)} /* logos noirs (menu, voile d'entrée, marques sponsors du bandeau) : version claire */ html[data-theme="nuit"] .brand img, html[data-theme="nuit"] .m-loader-logo, html[data-theme="nuit"] .sp-logo{filter:brightness(0) invert(.94)} /* ombre du 7 en verre : plus profonde sur fond sombre */ html[data-theme="nuit"] .hero-7 canvas{filter:drop-shadow(0 34px 38px rgba(0,0,0,.35))} /* ---------- 6. polices du mode typo « v2 » (OFL, Google Fonts, latin) ---------- */ /* Inter Tight 700 (titres gras) et Instrument Serif italique 400 (mot en serif fin). Chemins relatifs à ce fichier. */ @font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-tight-v9-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-v5-latin-italic-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ---------- 7. typo v2 : sans gras + serif italique fin (référence elevateapp.fr) ---------- */ html[data-type="v2"]{--f-d:'Inter Tight','Helvetica Neue',Arial,sans-serif;--f-s:'Instrument Serif',Georgia,'Times New Roman',serif} /* titres .disp : casse normale, graisse 700, approche serrée. Les autres usages de --f-d (chiffres, lots, boutons de maquette) gardent leurs propres règles (majuscules comprises) et ne changent que de police. */ html[data-type="v2"] .disp{text-transform:none;font-weight:700;letter-spacing:-.028em;word-spacing:.04em;line-height:1} /* Inter Tight est bien plus large qu'Anton : tailles recalculées (jetons --d / --dt des pages, multipliés) */ html[data-type="v2"] .title{font-size:calc(var(--d) * .56)} html[data-type="v2"] .h2{font-size:calc(var(--dt) * .66);line-height:1.08} html[data-type="v2"] .xh-title{font-size:clamp(28px,5.4vw,96px);line-height:1} html[data-type="v2"] .fv-ttl{font-size:clamp(22px,2.4vw,32px)} html[data-type="v2"] .price-big .disp{font-size:clamp(48px,7vw,116px)} html[data-type="v2"] .foot h2{font-size:clamp(34px,4.4vw,70px);line-height:1.08} @media (min-width:901px){html[data-type="v2"] .title{font-size:min(10.4cqw,128px)}} /* chiffres du compte à rebours et des statistiques : Inter Tight est plus large qu'Anton, ils tiennent sinon à la ligne */ html[data-type="v2"] .cd-n{font-size:clamp(46px,6.6vw,104px);line-height:1} html[data-type="v2"] .nm-n{font-size:clamp(34px,4.2vw,66px)} /* intertitres de blocs (étapes, formules, lots) : même casse normale que les titres, plus doux avec le serif */ html[data-type="v2"] .stp-h,html[data-type="v2"] .cards span em,html[data-type="v2"] .fv-r,html[data-type="v2"] .conf h2, html[data-type="v2"] .ofb-t,html[data-type="v2"] .pcs .pn,html[data-type="v2"] .gcard .gc-lot,html[data-type="v2"] .cell-lot, html[data-type="v2"] .scratch-under .defi,html[data-type="v2"] .pvm-n{text-transform:none;letter-spacing:-.02em} /* dans un titre .disp, hors typo v2 : Fraunces italique léger (--f-s), casse normale, un peu plus grand. */ html[data-theme] .disp em{font-family:var(--f-s);font-style:italic;font-weight:300;text-transform:none;font-size:1.08em;letter-spacing:0} /* Le premier mot ou la première ligne en serif italique fin, sans toucher au HTML : - plusieurs lignes (.mask.ln, .m-zl, .m-tl) : la première ligne d'un titre qui en compte au moins deux ; - ou un explicite dans un titre .disp. Un titre d'une seule ligne (un seul .mask) reste entièrement en gras : le HTML n'isole pas son premier mot. */ html[data-type="v2"] .disp > .mask:first-child:not(:only-child) > .ln-in, html[data-type="v2"] .disp > .m-zl:first-child:not(:only-child) > span, html[data-type="v2"] .disp > .m-tl:first-child:not(:only-child) > span, html[data-type="v2"] .disp em{font-family:var(--f-s);font-style:italic;font-weight:400;letter-spacing:-.015em;font-size:1.12em;line-height:.95} /* ---------- 8. fond de courbes (vert, naila, bordeaux) ---------- */ /* img/bg-courbes.svg sert de masque : le trait prend la couleur --accent du thème (olive en naila, Sceptre Red en bordeaux et sur la page calendrier ; l'opacité de 7 % est dans le SVG). Fixe, derrière le contenu (z-index -1 : les sections qui ont leur propre fond le recouvrent), sans effet sur le scroll ni le clic. */ /* Désactivé le 26/10 à la demande de Jordan (lignes de fond retirées pour le moment). Pour réactiver : remplacer [data-theme="off"] par les trois thèmes. */ html:is([data-theme="off"]) body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:var(--accent); -webkit-mask:url(img/bg-courbes.svg) center / cover no-repeat;mask:url(img/bg-courbes.svg) center / cover no-repeat} @media print{html[data-theme] body::before{display:none}} /* ---------- 9. animations douces (vert, naila, bordeaux), style Apple ---------- */ @media (prefers-reduced-motion:no-preference){ /* apparitions de motion.js (.rv + .in) : 12 px, 600 ms, courbe douce ; la logique d'ajout de .in ne change pas */ html:is([data-theme="vert"],[data-theme="naila"],[data-theme="bordeaux"]).anim .rv{transform:translate3d(0,12px,0); transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0) * 80ms)} html:is([data-theme="vert"],[data-theme="naila"],[data-theme="bordeaux"]).anim .rv.in{transform:none} /* état d'attente du hero (voile d'entrée) : même décalage de 12 px */ html:is([data-theme="vert"],[data-theme="naila"],[data-theme="bordeaux"]).m-hold.anim :is(.xhero,.hero) .rv.in{transform:translate3d(0,12px,0)} } /* léger parallaxe des photos : chronologie de défilement CSS (pas de JS), propriété « translate » qui se compose avec le zoom au scroll déjà posé par les pages ; l'image est agrandie de 14 % en hauteur pour ne jamais montrer de bord. */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ /* .ph est overflow:hidden (donc lui-même un conteneur de défilement) : la chronologie est portée par .ph et lue par son image */ html:is([data-theme="vert"],[data-theme="naila"],[data-theme="bordeaux"]) .ph{view-timeline:--m7ph block} html:is([data-theme="vert"],[data-theme="naila"],[data-theme="bordeaux"]) .ph img{top:-7%;bottom:auto;height:114%; animation:m7-par linear both;animation-timeline:--m7ph;animation-range:cover 0% cover 100%} @keyframes m7-par{from{translate:0 -5%}to{translate:0 5%}} } } /* ---------- 10. couleur dans les puces et les titres (naila, bordeaux) ---------- */ /* puces : fond Sage en naila (texte Cocoa, 6,6:1), cream teintée mauve en bordeaux et sur les zones challenge */ html:is([data-theme="naila"],[data-theme="bordeaux"]) .chip{background:var(--chip-bg,var(--emph))} /* mot en serif italique des titres : couleur d'accent LOCALE (olive en naila ; Sceptre Red sur les zones challenge et en bordeaux, car --accent y est redéfini), cream sur fond sombre ou photo. Valable pour un dans .disp (tous modes) et, en typo v2, pour la première ligne des titres à plusieurs lignes. (Pas de variable intermédiaire : elle serait figée à la valeur de .) */ html:is([data-theme="naila"],[data-theme="bordeaux"]) .disp em, html:is([data-theme="naila"],[data-theme="bordeaux"])[data-type="v2"] .disp > .mask:first-child:not(:only-child) > .ln-in, html:is([data-theme="naila"],[data-theme="bordeaux"])[data-type="v2"] .disp > .m-zl:first-child:not(:only-child) > span, html:is([data-theme="naila"],[data-theme="bordeaux"])[data-type="v2"] .disp > .m-tl:first-child:not(:only-child) > span{color:var(--accent)} html:is([data-theme="naila"],[data-theme="bordeaux"]) :is(.foot,.dbar,.xhero,.sec-dark,.toast,.pe-pied,.pe-glass,.pe-pill,.enc-sig,.m-scene,.m-zoom,.hs,.hs-ctl,.mk-dark,.mk-foot) .disp em, html:is([data-theme="naila"],[data-theme="bordeaux"])[data-type="v2"] :is(.foot,.dbar,.xhero,.sec-dark,.toast,.pe-pied,.pe-glass,.pe-pill,.enc-sig,.m-scene,.m-zoom,.hs,.hs-ctl,.mk-dark,.mk-foot) .disp > .mask:first-child:not(:only-child) > .ln-in, html:is([data-theme="naila"],[data-theme="bordeaux"])[data-type="v2"] :is(.foot,.dbar,.xhero,.sec-dark,.toast,.pe-pied,.pe-glass,.pe-pill,.enc-sig,.m-scene,.m-zoom,.hs,.hs-ctl,.mk-dark,.mk-foot) .disp > .m-zl:first-child:not(:only-child) > span, html:is([data-theme="naila"],[data-theme="bordeaux"])[data-type="v2"] :is(.foot,.dbar,.xhero,.sec-dark,.toast,.pe-pied,.pe-glass,.pe-pill,.enc-sig,.m-scene,.m-zoom,.hs,.hs-ctl,.mk-dark,.mk-foot) .disp > .m-tl:first-child:not(:only-child) > span{color:var(--emph)} /* ---------- 10b. pied de page sombre harmonisé (naila, bordeaux) ---------- */ /* Cible :