/* ========================================================================== LRD PANEL — menu en sections, mode simple / avancé, recherche (Ctrl K), liste « Ce qui manque », valeurs conseillées, éditeurs avec aperçu. ========================================================================== */ /* Champs sans type (texte par défaut) et adresses web : même allure que les champs texte du panel. */ input:not([type]),input[type=url]{ width:100%;background:var(--bg-2);border:1px solid var(--line);color:var(--tx); padding:.62rem .8rem;border-radius:10px;font:inherit;font-size:.93rem;transition:border-color .15s,box-shadow .15s; } input:not([type]):disabled,input[type=url]:disabled{opacity:.5} /* ---------------------------------------------------------- Sections */ .lrd-sections{align-items:center} .lrd-navtools{margin-left:auto;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap} .lrd-navtools .btn{gap:.45rem} .lrd-navtools kbd{font:inherit;font-size:.7rem;padding:.05rem .4rem;border:1px solid var(--line);border-radius:6px;color:var(--tx-3);margin-left:.2rem} .lrd-mode{font-size:.84rem;white-space:nowrap} .lrd-subnav{display:flex;gap:.2rem;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent;border-bottom:1px solid var(--line);margin:-.5rem 0 1.5rem} .lrd-subnav a{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .85rem;color:var(--tx-2);font-size:.9rem;font-weight:600; border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .15s,border-color .15s} .lrd-subnav a:hover{color:var(--tx)} .lrd-subnav a.on{color:var(--accent);border-bottom-color:var(--accent)} /* ------------------------------------------- Sommaire d'une page de réglages Un deuxième niveau de navigation : il ne change pas de page, il descend dans celle-ci. Il doit donc se distinguer du bandeau au-dessus — d'où le fond, les pastilles, et l'absence de soulignement actif : aucune de ces sections n'est « la page en cours ». Il suit le défilement, sinon revenir au sommaire demande de remonter six écrans. */ .admin-sections{ position:sticky;top:72px;z-index:20;gap:.35rem;padding:.55rem .35rem;margin:-.5rem 0 1.8rem; /* sous l'en-tête collant (64 px), pas dessous */ border:1px solid var(--line);border-radius:12px;background:var(--bg-2); backdrop-filter:saturate(1.2) blur(6px); } .admin-sections a{ padding:.34rem .7rem;border-bottom:0;margin-bottom:0;border-radius:999px; font-size:.84rem;font-weight:600;color:var(--tx-3); } .admin-sections a:hover{color:var(--tx);background:var(--surface)} .admin-sections a:target,.admin-sections a:focus-visible{color:var(--accent)} /* Les titres de section : une seule règle, au lieu d'un style en ligne recopié huit fois avec à chaque fois une marge légèrement différente. */ .admin-h2{font-size:1.25rem;margin:2.6rem 0 .4rem;scroll-margin-top:9rem} .admin-h2:first-of-type{margin-top:1.4rem} /* Mode simple : les pages et réglages techniques disparaissent. */ body.mode-simple .adv-only{display:none!important} body.mode-simple .adv-only.adv-reveal{display:revert!important} body.mode-adv .simple-only{display:none!important} .adv-tag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--tx-3); border:1px solid var(--line);border-radius:6px;padding:.02rem .35rem;margin-left:.35rem;vertical-align:middle} :target{scroll-margin-top:140px} input:target,select:target,textarea:target{outline:2px solid var(--accent);outline-offset:2px} @media (max-width:760px){ .lrd-navtools{margin-left:0;width:100%;justify-content:space-between} .lrd-navtools kbd{display:none} .lrd-subnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin} } /* Les pages de travail gardent le contexte du serveur sans repousser les actions sous le premier écran. */ @media(max-width:600px){ :is(.insight-page,.support-page,.rr-page,.workspace-page,.notifications-page,.quality-page) .srv-head{padding:16px;margin-bottom:20px} :is(.insight-page,.support-page,.rr-page,.workspace-page,.notifications-page,.quality-page) .srv-head-in{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px 12px} :is(.insight-page,.support-page,.rr-page,.workspace-page,.notifications-page,.quality-page) .srv-head .srv-logo{width:40px;height:40px;font-size:1.1rem} :is(.insight-page,.support-page,.rr-page,.workspace-page,.notifications-page,.quality-page) .srv-head h1{font-size:1.05rem;line-height:1.4} :is(.insight-page,.support-page,.rr-page,.workspace-page,.notifications-page,.quality-page) .srv-head .sub{font-size:.72rem;line-height:1.5} :is(.insight-page,.support-page,.rr-page,.workspace-page,.notifications-page,.quality-page) .srv-head .ctrls{grid-column:2;margin-left:0} } /* ---------------------------------------------------------- Recherche */ .lrd-palette{position:fixed;inset:0;z-index:200;background:rgba(var(--bg-0-rgb),.66);display:flex;align-items:flex-start;justify-content:center;padding:12vh 1rem 1rem} .lrd-palette[hidden]{display:none} .lrd-palette-box{width:min(660px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.55);overflow:hidden} .lrd-palette-box input{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:1rem 1.15rem;font-size:1.05rem;background:transparent;width:100%} .lrd-palette-box input:focus{outline:none} .lrd-palette-list{max-height:min(60vh,520px);overflow:auto;padding:.4rem} .lrd-palette-list a{display:flex;gap:.8rem;align-items:center;padding:.6rem .75rem;border-radius:10px;color:var(--tx)} .lrd-palette-list a.on,.lrd-palette-list a:hover{background:var(--accent-soft)} .lrd-palette-list b{display:block;font-weight:600} .lrd-palette-list small{color:var(--tx-3);display:block;font-size:.78rem} .lrd-palette-kind{margin-left:auto;flex:none;font-size:.68rem;font-weight:700;color:var(--tx-3);border:1px solid var(--line);border-radius:6px;padding:.08rem .4rem} .lrd-palette-empty{padding:1rem 1.1rem;color:var(--tx-3)} .lrd-palette-foot{padding:.5rem 1.1rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--tx-3);display:flex;gap:1rem;flex-wrap:wrap} /* ---------------------------------------------------------- Ce qui manque */ .todo-card ul{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.45rem} .todo-card li{position:relative;display:flex;align-items:center;gap:.8rem;padding:.65rem .8rem;border:1px solid var(--line);border-radius:12px} .todo-card li.crit{border-color:rgba(244,63,94,.45);background:rgba(244,63,94,.06)} .todo-card li.warn{border-color:rgba(245,158,11,.4)} .todo-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--tx-3)} li.crit .todo-dot{background:var(--err)} li.warn .todo-dot{background:var(--warn)} li.tip .todo-dot{background:var(--info)} .todo-text{flex:1;min-width:0} .todo-text b{display:block} .todo-text small{color:var(--tx-3)} .todo-ok{display:flex;align-items:center;gap:.6rem;color:var(--tx-2)} .todo-ok i{width:22px;height:22px;border-radius:50%;background:var(--ok);color:var(--bg);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.8rem} /* ---------------------------------------------------------- Valeurs conseillées */ .gp-advice{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.3rem;font-size:.78rem;color:var(--tx-3)} .gp-advice button{background:none;border:1px solid var(--line);border-radius:7px;color:var(--tx-2);font-size:.74rem;padding:.08rem .45rem;cursor:pointer} .gp-advice button:hover{border-color:var(--accent);color:var(--tx)} .gp-example{display:block;font-size:.78rem;color:var(--tx-3);margin-top:.25rem;font-style:italic} /* ---------------------------------------------------------- Modèles de serveur */ .tpl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin:1rem 0} .tpl{border:1px solid var(--line);border-radius:14px;padding:1rem;background:var(--bg-2);display:flex;flex-direction:column;gap:.5rem} .tpl.on{border-color:var(--accent);background:linear-gradient(135deg,var(--accent-soft),transparent 70%)} .tpl h4{margin:0} .tpl ul{margin:0;padding-left:1.1rem;color:var(--tx-2);font-size:.84rem} .tpl form{margin-top:auto} /* ---------------------------------------------------------- Éditeurs avec aperçu */ .editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1.3rem;align-items:start} .editor-preview{position:sticky;top:140px} .editor-preview h4{margin:0 0 .5rem} .editor-frame{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9;position:relative} .editor-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} @media (max-width:980px){.editor{grid-template-columns:1fr}.editor-preview{position:static}} .list-edit{display:grid;gap:.5rem} .list-edit-row{display:flex;gap:.5rem;align-items:center} .list-edit-row input{flex:1} .saved-note{font-size:.8rem;color:var(--tx-3)} .hist-table td{vertical-align:top} .hist-diff{font-size:.8rem;color:var(--tx-3);max-width:520px} /* ---------------------------------------------------------- Catalogue des métiers */ .jc-summary{display:flex;gap:1.6rem;flex-wrap:wrap} .jc-summary div{display:flex;align-items:baseline;gap:.35rem} .jc-summary b{font-size:1.5rem} .jc-summary span{color:var(--tx-3);font-size:.85rem;margin-left:.3rem} .jc-tools{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:1rem} .jc-tools input{flex:1;min-width:220px;max-width:420px} .jc-chips{display:flex;gap:.3rem} .jc-chips button{background:var(--surface-2);border:1px solid var(--line);color:var(--tx-2);border-radius:999px;padding:.35rem .8rem;font:inherit;font-size:.84rem;cursor:pointer} .jc-chips button.on{border-color:var(--accent);color:var(--tx);background:var(--accent-soft)} .jc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:.9rem} .jc-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem;display:flex;flex-direction:column;gap:.5rem} .jc-card.on{border-color:rgba(34,197,94,.45)} .jc-card header{display:flex;gap:.7rem;align-items:center} .jc-card header b{display:block} .jc-card header small{display:block;font-size:.75rem} .jc-card p{margin:0} .jc-card ul{margin:0;padding-left:1.1rem;display:grid;gap:.15rem} .jc-card footer{margin-top:auto;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding-top:.4rem} .jc-card footer .small{flex:1} .jc-warn{color:var(--warn)} .jc-orgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.5rem} .jc-org{display:flex;gap:.6rem;align-items:center;padding:.55rem .7rem;border:1px solid var(--line);border-radius:10px;background:var(--surface)} .jc-org.on{border-color:rgba(34,197,94,.45)} .jc-org b,.jc-org small{display:block} .jc-hidden{display:none!important} /* ---------------------------------------------------------- Modération sur téléphone */ @media (max-width:760px){ .mod-cards table.tbl,.mod-cards table.tbl tbody,.mod-cards table.tbl tr,.mod-cards table.tbl td{display:block;width:100%} .mod-cards table.tbl thead{display:none} .mod-cards table.tbl tr{border:1px solid var(--line);border-radius:12px;margin-bottom:.6rem;padding:.4rem .2rem;background:var(--surface)} .mod-cards table.tbl td{border:0;padding:.35rem .8rem} .mod-cards .td-actions,.mod-cards td:last-child{display:flex;gap:.5rem;flex-wrap:wrap} .mod-cards .btn-sm{padding:.65rem .95rem;font-size:.9rem;flex:1;justify-content:center} .mod-quick{position:sticky;bottom:0;z-index:30;display:flex;gap:.5rem;padding:.6rem;background:linear-gradient(0deg,var(--bg) 70%,transparent)} .mod-quick .btn{flex:1;justify-content:center;padding:.8rem} } @media (min-width:761px){.mod-quick{display:none}} /* ---------------------------------------------------------- Offres : fonctions comprises (_plans.php) */ /* ------------------------------------------------- Fonctions d'une autre offre Gris, cadenas, et rien d'autre : la page reste cliquable — elle présente l'offre qui la contient. Un lien qu'on ne peut pas cliquer laisse le client sans explication. */ .lrd-subnav a.locked,.quicknav a.locked{color:var(--tx-3)} .lrd-subnav a.locked:hover,.quicknav a.locked:hover{color:var(--tx-2)} /* Le cadenas est rose, pas gris : « compris dans une autre offre », et non « en panne ». */ .lrd-subnav a.locked svg:last-child,.quicknav a.locked svg:last-child{color:var(--pink-300);opacity:.85} .lrd-subnav a.locked:hover svg:last-child,.quicknav a.locked:hover svg:last-child{opacity:1} .quicknav a.locked{background:transparent;border-style:dashed;border-color:var(--line-soft)} .quicknav a.locked:hover{border-color:var(--pink-700)} .quicknav a.locked>svg:first-child{opacity:.45;color:var(--tx-3)} /* ---------------------------------------------------------- Bandeau cookies En bas, jamais en plein écran : il informe, il ne prend pas le site en otage. */ .cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:180;padding:0 12px 12px; animation:cookiebar-up .25s ease-out} @keyframes cookiebar-up{from{transform:translateY(120%)}to{transform:none}} @media (prefers-reduced-motion:reduce){.cookiebar{animation:none}} .cookiebar-in{max-width:980px;margin:0 auto;display:flex;gap:1rem;align-items:center;flex-wrap:wrap; background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1rem 1.2rem; box-shadow:0 20px 60px -20px rgba(0,0,0,.85)} .cookiebar-txt{flex:1 1 320px;font-size:.87rem;line-height:1.6;color:var(--tx-2)} .cookiebar-txt b{color:var(--tx)} .cookiebar-txt a{color:var(--pink-300);text-decoration:underline} .cookiebar-btns{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center} .cookiebar-act{margin:0} @media (max-width:620px){ .cookiebar-btns{width:100%} .cookiebar-act,.cookiebar-act button{width:100%} } /* Un tableau de diagnostic : deux colonnes serrées, l'étiquette étroite. */ table.tbl.tbl-tight{min-width:0} /* deux colonnes : elles passent à la ligne plutôt que de déborder du téléphone */ .tbl-tight td{padding:.4rem .6rem;vertical-align:top;overflow-wrap:anywhere} .tbl-tight tr td:first-child{width:38%;white-space:nowrap} @media (max-width:560px){.tbl-tight tr td:first-child{white-space:normal}} /* --------------------------------------------------------- Serveur suspendu */ .freeze-deadline{color:#ffb8c8;background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.35); border-radius:12px;padding:.75rem 1rem;margin:0 0 1rem} .freeze-deadline b{color:#fff} /* ------------------------------------------------------------------ CGV Les encadrés « à compléter » doivent sauter aux yeux tant qu'ils le sont. */ .cgv-todo{background:rgba(245,158,11,.08);border:1px dashed rgba(245,158,11,.5);border-radius:12px; padding:.85rem 1.1rem;margin:.8rem 0 1.4rem;color:var(--tx-2);font-size:.9rem} .cgv-todo b{display:block;color:#fcd34d;font-size:.72rem;letter-spacing:.09em;margin-bottom:.35rem} .cgv-todo p{margin:0;line-height:1.6} .cgv-steps{margin:1rem 0;padding-left:1.2rem;line-height:1.75;color:var(--tx-2)} .cgv-steps li{margin-bottom:.5rem} .cgv-steps li::marker{color:var(--accent);font-weight:700} .switch-err{border-color:rgba(244,63,94,.55)!important} .field-err{color:#fda4af;font-size:.85rem;margin:.35rem 0 0} /* ------------------------------------------------------ Zone de suppression */ .danger-zone{border-color:rgba(244,63,94,.4)} .danger-zone h2,.danger-zone h3{margin-top:0} .danger-list{margin:.6rem 0 1rem;padding-left:1.1rem;color:var(--tx-2);font-size:.9rem;line-height:1.7} .danger-list li::marker{color:var(--err)} .plan-base{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem} .plan-base ul{list-style:none;margin:.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.35rem 1.2rem} .plan-base li{display:flex;gap:.5rem;font-size:.87rem;color:var(--tx-2);align-items:flex-start} .plan-base li svg{flex:none;margin-top:.25em} .plan li.plan-more{color:var(--tx);font-size:.86rem;padding-bottom:.1rem} .plan-compare td:not(:first-child),.plan-compare th:not(:first-child){text-align:center} .plan-compare tr.plan-group th{text-align:left;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3);background:var(--bg-2);padding-top:.55rem;padding-bottom:.55rem} .plan-compare-box{margin-top:1.3rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden} .plan-compare-box summary{cursor:pointer;padding:.9rem 1.1rem;font-weight:600} .plan-compare-box[open] summary{border-bottom:1px solid var(--line)} .plan-lock{max-width:720px;margin:1rem auto 2rem;text-align:center;padding:2.2rem 1.6rem} .plan-lock-ico{display:inline-flex;width:58px;height:58px;border-radius:50%;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--accent);margin-bottom:.8rem} .plan-lock h2{margin:0 0 .4rem;font-size:1.35rem} .plan-lock-desc{color:var(--tx-2);margin:0 0 1rem} .plan-lock-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;align-items:center;margin:1.2rem 0 .8rem} .po-head{padding:1.1rem 1.2rem .4rem} .po-head h2{font-size:1.15rem;margin:0} .po-matrix .po-col{text-align:center;white-space:nowrap} .po-matrix th.po-col small{display:block;font-weight:500;color:var(--tx-3);font-size:.72rem} .po-matrix input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);cursor:pointer} .po-pages{font-size:.72rem;color:var(--tx-3);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .po-foot{padding:.9rem 1.2rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--tx-2)} .po-texts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1rem} .po-texts h3{font-size:1.05rem;margin:0 0 .8rem} .po-texts textarea{width:100%} .po-actions{position:sticky;bottom:0;z-index:20;display:flex;justify-content:flex-end;padding:.9rem 0;background:linear-gradient(0deg,var(--bg) 65%,transparent)} /* Le formulaire « Aligner les machines » reprend la mise en page, pas le collage : collé, il restait en bas de l'écran sur toute la page et recouvrait « Enregistrer les offres ». */ form.po-actions{position:static;background:none;justify-content:flex-start;align-items:center;gap:.4rem 1rem;flex-wrap:wrap} /* ---------------------------------------------------------- Vitrine (index.php, _vitrine.php) */ .hero-note{margin:.9rem 0 0;color:var(--tx-3);font-size:.86rem} .hero-live{display:inline-flex;align-items:center;gap:.55rem;margin:1.1rem 0 0;padding:.45rem .9rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.88rem;color:var(--tx-2)} .hero-live i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18)} .hero-cta .btn svg{vertical-align:-3px} .shots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:1.3rem} .shot-fig{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden} .shot-fig a{display:block;line-height:0;border-bottom:1px solid var(--line)} .shot-fig img{width:100%;height:auto;display:block} .shot-fig figcaption{padding:.9rem 1.1rem 1.05rem;display:grid;gap:.2rem} .shot-fig figcaption span{color:var(--tx-2);font-size:.9rem} .plan-trial{margin:-.9rem 0 1.1rem;font-size:.82rem;font-weight:600;color:#6ee7a0} .orgs-line{margin:1.4rem auto 0;max-width:820px;color:var(--tx-2);font-size:.92rem} .reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1rem} .review{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.9rem} .review blockquote{margin:0;color:var(--tx);font-size:.95rem;line-height:1.55} .review blockquote::before{content:"“";color:var(--accent,#ff2d78);font-size:1.6rem;line-height:0;vertical-align:-.35em;margin-right:.2rem} .review figcaption{margin-top:auto;font-size:.86rem;display:grid} .review figcaption span{color:var(--tx-3)} .cta-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}.po-pick{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap} .po-pick select{min-width:280px} .po-extras{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.45rem .9rem;margin-top:.9rem} .po-extras .switch{margin:0} .po-extras .po-inplan{opacity:.55} .po-extras small{color:var(--tx-3);font-size:.75rem;margin-left:.35rem}.po-state{margin:.9rem 0 0;padding:.7rem .9rem;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);font-size:.9rem;color:var(--tx-2)} /* ---------------------------------------------------------- Fréquentation (_traffic.php) */ .tfc-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.7rem;margin-bottom:1.1rem} .tfc-num{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem} .tfc-num b{display:block;font-size:1.45rem;line-height:1.1} .tfc-num span{display:block;color:var(--tx-3);font-size:.78rem;margin-top:.15rem} .tfc-bars{display:flex;align-items:flex-end;gap:.35rem;height:130px;padding-top:1.1rem} .tfc-bar{position:relative;flex:1;min-width:0;height:var(--h);background:var(--accent,#ff2d78);border-radius:6px 6px 3px 3px;display:flex;align-items:flex-start;justify-content:center} .tfc-bar-empty{background:var(--line)} .tfc-bar b{position:absolute;top:-1.1rem;font-size:.72rem;color:var(--tx-2);font-weight:600} .tfc-bar i{position:absolute;bottom:-1.25rem;font-size:.67rem;color:var(--tx-3);font-style:normal;white-space:nowrap} .tfc-bars{margin-bottom:1.5rem} @media (max-width:640px){.tfc-bar i{display:none}.tfc-bars{height:100px}} /* ------------------------------------------------------- Journal du serveur (_journal.php) */ .jr-filter{display:flex;gap:.4rem;flex-wrap:wrap;margin:.2rem 0 1rem} .jr-filter .chip{display:inline-block;padding:.3rem .7rem;border:1px solid var(--line);border-radius:999px;font-size:.82rem;color:var(--tx-2);text-decoration:none} .jr-filter .chip:hover{border-color:var(--accent,#ff2d78);color:var(--tx)} .jr-filter .chip-on{background:var(--accent-soft,rgba(255,45,120,.14));border-color:var(--accent,#ff2d78);color:var(--tx);font-weight:700} /* texte clair sur fond teinté : lisible quelle que soit la couleur du serveur */ /* ------------------------------------------------------------ Styles de base (_styles.php) Une carte par style, à la commande comme sur la vitrine. Un style fermé reste visible — il donne envie — mais passe en gris avec un cadenas, et son bouton radio est désactivé : on ne peut ni le cocher ni l'envoyer. La couleur propre au style ne vit que dans son icône, pour que la carte cochée garde la couleur du panel. */ .style-pick{container-type:inline-size;margin:1rem 0 .4rem} .style-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.75rem} .style-card{position:relative;display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.05rem; border:1px solid var(--line);border-radius:14px;background:var(--bg-2); font-weight:400;color:var(--tx);margin:0; /* une