/* ========================================================================== Stolip — matière « La chaîne » (prototype de direction artistique) La page EST la chaîne Stolip : les trois barres du logo de la nav se prolongent en trois voies qui descendent toute la page dans les marges, traversent d'un bord à l'autre entre deux sections (une station par traversée) et finissent dans un grand logo au-dessus du formulaire. Un convoi de trois capsules porte les objets de l'univers de démo ; il se dessine, s'étire, change d'objet aux stations et se range dans le logo. Le dessin et le mouvement sont dans js/mat-chaine.js ; cette feuille éteint l'ancien système (nuages floutés, halos violets) et donne les encres. Couleur (palette « Atelier », palette-atelier.css) : une couleur par fonctionnalité, en traits et aplats nets. Chaque capsule prend la couleur de l'objet qu'elle porte (classe k- posée par le JS) ; le tronçon de voie de la section courante prend celle de la section ; le reste de la chaîne est graphite. Aucune teinte en dur ici : tout passe par les jetons --c- (et leurs encres --c--ink sur les surfaces claires). Activation : + cette feuille chargée APRÈS toutes les autres + js/mat-chaine.js. Sans JS, la page est simplement nette : plus de nuages, plus de halos. ========================================================================== */ /* ---------- 1. Jetons ---------- */ html[data-mat="chaine"]{ --tex:0; /* éteint matières et ombres calc(…*var(--tex)) */ --br-1:#C9CCD2;--br-2:#A3A7AF;--br-3:#7C8189; /* restes de dégradé → gris */ --grad:linear-gradient(90deg,#D3D6DB,#D3D6DB); --chn-brand-tx:#0A0B0D; /* texte sur une capsule pleine */ --chn-lane:rgba(255,255,255,.2); --chn-ghost:rgba(255,255,255,.07); --chn-cap:#14171C;--chn-cap-bd:rgba(255,255,255,.16);--chn-cap-tx:#A9ADB5; --chn-st:#6E727B;--chn-st-on:#C9CCD2;--chn-st-bg:#0A0B0D; --chn-slot:rgba(255,255,255,.12);--chn-bar:#3A3E45; --chn-mono:'Spline Sans Mono',ui-monospace,monospace; } /* Papier d'AVA (page /fonctionnalites/ava) : encre chaude, orange d'AVA. */ html[data-mat="chaine"] body.fx-ava{ --chn-brand-tx:#16130F; --chn-lane:rgba(22,19,15,.24);--chn-ghost:rgba(22,19,15,.08); --chn-cap:#FFFFFF;--chn-cap-bd:rgba(22,19,15,.16);--chn-cap-tx:#5A544C; --chn-st:#8C8578;--chn-st-on:#16130F;--chn-st-bg:#FAFAF8; --chn-slot:rgba(22,19,15,.14);--chn-bar:#D9D4CA} /* ---------- 2. Extinction de l'ancien système ---------- */ html[data-mat="chaine"] .tex{display:none} html[data-mat="chaine"] .veil{background:none} html[data-mat="chaine"] :is(.appwrap,.fx-stage,.bn-spw,.va-hmark,.fx-hero)::before, html[data-mat="chaine"] .nmenu-all::after{content:none;display:none} /* Halos et ombres violettes écrits en dur → anneaux nets, sans flou. */ html[data-mat="chaine"] .fx-progress{display:none} /* la chaîne fait la progression */ /* Le rail du parcours reste un trait neutre ; ses nœuds portent la palette. */ html[data-mat="chaine"] .fx-path::after{background:var(--tx-2);opacity:.8;height:1px} html[data-mat="chaine"] .fx-node.cur .o{box-shadow:0 0 0 5px var(--bg),0 0 0 6px var(--fx-c)} html[data-mat="chaine"] .hb-tok{box-shadow:0 0 0 4px var(--bg),0 0 0 5px rgba(255,255,255,.5)} html[data-mat="chaine"] .v-br .core{box-shadow:0 0 0 5px rgba(255,255,255,.08)} html[data-mat="chaine"] .pz-beam{background:linear-gradient(90deg,transparent,rgba(255,255,255,.05))} html[data-mat="chaine"] .pz-beam::after,html[data-mat="chaine"] .pz-sl .hd{background:#fff;box-shadow:none} html[data-mat="chaine"] .bn-halo{display:none} /* ---------- 3. La chaîne (svg posé par le JS sous tout le contenu) ---------- */ html[data-mat="chaine"] .chn{position:absolute;left:0;top:0;width:100%;z-index:-1;pointer-events:none;overflow:hidden; font-family:var(--chn-mono);-webkit-user-select:none;user-select:none} html[data-mat="chaine"] .chn path{fill:none;vector-effect:non-scaling-stroke} html[data-mat="chaine"] .chn-ghost{stroke:var(--chn-ghost);stroke-width:1;stroke-dasharray:1 5;stroke-linecap:round} html[data-mat="chaine"] .chn-lane{stroke:var(--chn-lane);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} @media (max-width:699px){html[data-mat="chaine"] .chn-lane{stroke-width:1.25}} /* Couleur d'un élément de la chaîne = sa fonctionnalité (classe k-). */ html[data-mat="chaine"] .chn .k-catalogue{--k:var(--c-catalogue)} html[data-mat="chaine"] .chn .k-devis{--k:var(--c-devis)} html[data-mat="chaine"] .chn .k-espace-client{--k:var(--c-espace-client)} html[data-mat="chaine"] .chn .k-commandes{--k:var(--c-commandes)} html[data-mat="chaine"] .chn .k-boutiques{--k:var(--c-boutiques)} html[data-mat="chaine"] .chn .k-ava{--k:var(--c-ava)} html[data-mat="chaine"] .chn .k-branchements{--k:var(--c-branchements)} html[data-mat="chaine"] .chn .k-maquettes{--k:var(--c-maquettes)} /* Surfaces claires de la chaîne (îlot AVA de la landing) : les encres. La page AVA est déjà passée aux encres par palette-atelier.css (body.fx-ava). */ html[data-mat="chaine"] .chn :is(.chn-lt,.lt){ --c-catalogue:var(--c-catalogue-ink);--c-devis:var(--c-devis-ink);--c-espace-client:var(--c-espace-client-ink); --c-commandes:var(--c-commandes-ink);--c-boutiques:var(--c-boutiques-ink);--c-ava:var(--c-ava-ink); --c-branchements:var(--c-branchements-ink);--c-maquettes:var(--c-maquettes-ink)} /* Le tronçon de la section courante : la même voie, à la couleur de la section. Trait plein, net, posé sur la voie graphite. */ html[data-mat="chaine"] .chn-tint{stroke:var(--k,transparent);stroke-width:2;stroke-linecap:butt;stroke-linejoin:round} @media (max-width:699px){html[data-mat="chaine"] .chn-tint{stroke-width:1.5}} /* Îlot AVA de la landing : son papier est peint dans le svg, les voies passent à l'encre. */ html[data-mat="chaine"].chn-on .ava-sec{background:transparent} html[data-mat="chaine"] .chn-isle{fill:#FAFAF8} html[data-mat="chaine"] .chn-lt{--chn-lane:rgba(22,19,15,.24);--chn-ghost:rgba(22,19,15,.08)} /* Stations : un panneau en travers des voies, comme un pôle d'échange. Son nom annonce déjà sa couleur (atténuée) ; une fois franchie, nom et filet passent à la couleur du tronçon qu'elle ouvre. */ html[data-mat="chaine"] .chn-stb{fill:var(--chn-st-bg);stroke:var(--chn-lane);stroke-width:1;transition:stroke .6s} html[data-mat="chaine"] .chn-stn.on .chn-stb{stroke:var(--k,var(--chn-st-on))} html[data-mat="chaine"] .chn-stt{fill:color-mix(in srgb,var(--k,var(--chn-st)) 45%,var(--chn-st));text-anchor:middle;dominant-baseline:central;letter-spacing:.14em;text-transform:uppercase;font-weight:500;transition:fill .6s} html[data-mat="chaine"] .chn-stn.on .chn-stt{fill:var(--k,var(--chn-st-on))} html[data-mat="chaine"] .chn-stn.lt{--chn-st:#8C8578;--chn-st-on:#16130F;--chn-st-bg:#FAFAF8;--chn-lane:rgba(22,19,15,.3)} html[data-mat="chaine"] body.fx-ava .chn-stn.on .chn-stt, html[data-mat="chaine"] .chn-stn.lt.on .chn-stt{fill:color-mix(in srgb,var(--k) 72%,#16130F)} /* Le convoi. Capsule de marque (voie médiane) : aplat plein de sa couleur. Les deux autres : étiquette teintée (fond sombre lavé de la couleur, filet et texte à la couleur) : on lit trois objets, une seule capsule crie. Sans étiquette (marge trop étroite) ou arrimée au logo final : aplat plein (sans --k : graphite). */ html[data-mat="chaine"] .chn-cb{fill:color-mix(in srgb,var(--k,#fff) 13%,var(--chn-cap));stroke:color-mix(in srgb,var(--k,#fff) 52%,transparent);stroke-width:1; transition:fill .45s,stroke .45s} html[data-mat="chaine"] .chn-ct{fill:var(--k,var(--chn-cap-tx));text-anchor:middle;dominant-baseline:central;font-weight:500;white-space:pre;transition:fill .45s} html[data-mat="chaine"] .chn-cap.on .chn-cb{fill:var(--k);stroke:var(--k)} html[data-mat="chaine"] .chn-cap.on .chn-ct{fill:var(--chn-brand-tx)} /* Sur papier clair (page AVA, îlot AVA) : étiquette blanche filetée d'encre, texte encre assombri ; capsule de marque à l'encre, texte noir chaud. */ html[data-mat="chaine"] .chn-cap.lt{--chn-cap:#FFFFFF;--chn-cap-bd:rgba(22,19,15,.16);--chn-cap-tx:#5A544C;--chn-brand-tx:#16130F;--chn-bar:#D9D4CA} html[data-mat="chaine"] :is(body.fx-ava .chn-cap,.chn-cap.lt) .chn-cb{fill:color-mix(in srgb,var(--k,#000) 9%,#FFFFFF);stroke:color-mix(in srgb,var(--k,#000) 60%,transparent)} html[data-mat="chaine"] :is(body.fx-ava .chn-cap,.chn-cap.lt) .chn-ct{fill:color-mix(in srgb,var(--k,#000) 70%,#16130F)} html[data-mat="chaine"] :is(body.fx-ava .chn-cap,.chn-cap.lt).on .chn-cb{fill:var(--k);stroke:var(--k)} html[data-mat="chaine"] :is(body.fx-ava .chn-cap,.chn-cap.lt).on .chn-ct{fill:var(--chn-brand-tx)} html[data-mat="chaine"] .chn-cap:is(.nl,.dk) .chn-cb, html[data-mat="chaine"] :is(body.fx-ava .chn-cap,.chn-cap.lt):is(.nl,.dk) .chn-cb{fill:var(--k,var(--chn-bar));stroke:var(--k,var(--chn-bar))} /* Logo final : le contour qui attend ses barres. */ html[data-mat="chaine"] .chn-slot{fill:none;stroke:var(--chn-slot);stroke-width:1;stroke-dasharray:3 4} html[data-mat="chaine"] .chn-end.lt{--chn-slot:rgba(22,19,15,.14)} /* ---------- 4. La palette hors de la chaîne ---------- */ /* #modules de la landing : chaque carte à la couleur de SA fonctionnalité, lue sur son lien (palette-atelier.css associe .b-c/.b-d/.b-e/.b-f à d'autres fonctionnalités que celles des cartes). Le code « M—0x » est précédé d'une petite barre pleine, la même capsule que sur les voies. */ html[data-mat="chaine"] .bento .bcard:has(.bmore[href$="/catalogue"]){--fx-c:var(--c-catalogue)} html[data-mat="chaine"] .bento .bcard:has(.bmore[href$="/devis"]){--fx-c:var(--c-devis)} html[data-mat="chaine"] .bento .bcard:has(.bmore[href$="/espace-client"]){--fx-c:var(--c-espace-client)} html[data-mat="chaine"] .bento .bcard:has(.bmore[href$="/commandes"]){--fx-c:var(--c-commandes)} html[data-mat="chaine"] .bento .bcard:has(.bmore[href$="/boutiques"]){--fx-c:var(--c-boutiques)} html[data-mat="chaine"] .bento .bcard:has(.bmore[href$="/ava"]){--fx-c:var(--c-ava)} html[data-mat="chaine"] .bento .bcard:has(.bmore[href$="/branchements"]){--fx-c:var(--c-branchements)} html[data-mat="chaine"] .bento .bcard:has(.bmore[href$="/maquettes"]){--fx-c:var(--c-maquettes)} html[data-mat="chaine"] .bento .bcard .code{display:flex;align-items:center;gap:8px} html[data-mat="chaine"] .bento .bcard .code::before{content:"";width:16px;height:5px;border-radius:3px;background:var(--fx-c);flex:none} /* Hub : même barre devant le code de chaque tuile. */ html[data-mat="chaine"] .hb-tile .hb-c{display:flex;align-items:center;gap:8px} html[data-mat="chaine"] .hb-tile .hb-c::before{content:"";width:16px;height:5px;border-radius:3px;background:var(--fx-c);flex:none} @media print{html[data-mat="chaine"] .chn{display:none}}