/* AXDIA Design System — surfaces produit (Bibliothèque, Outils, AXDIA Website). * * Ce fichier n'introduit AUCUNE couleur, police, rayon ni ombre nouvelle : il * consomme uniquement les tokens de /assets/uiux-tokens.css, déjà partagés par * ecosystem.css et le reste du site. Objectif : les pages ajoutées ici sont * indiscernables des pages existantes, dans les trois thèmes. * * Tout est scopé sous .public-shell pour ne jamais fuir vers /app ni /admin. */ /* ---------- Utilitaire : masqué à l'écran, lu par les lecteurs d'écran ---------- * « u-sr-only » n'était défini que sous .newsletter-form. Les pages qui * l'utilisaient ailleurs (agence-ia-vendee.html : deux titres de section) * affichaient donc un texte destiné aux seuls lecteurs d'écran. Promu ici en * utilitaire global, sans toucher à la règle existante de la newsletter. */ .public-shell .u-sr-only{ position:absolute!important;width:1px!important;height:1px!important; padding:0!important;margin:-1px!important;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0; } /* ---------- Bandeau de consentement ---------- * Ses couleurs et sa typographie étaient codées en dur (fond crème, police * système, angles droits) : il apparaissait comme un élément étranger sur * chaque page, dans les trois thèmes. Il reprend ici les jetons du Design * System. Aucun texte, aucun bouton et aucune logique de consentement ne sont * modifiés — uniquement la présentation. * * Non scopé sous .public-shell : le bandeau est injecté directement dans * par consent.js et n'est pas un descendant du shell. */ .axdia-consent{ background:var(--axdia-panel,#201a16); color:var(--axdia-text,#f4eee8); border:1px solid var(--axdia-border-strong,#59473b); border-radius:var(--axdia-radius,18px); box-shadow:var(--axdia-shadow,0 24px 60px rgba(0,0,0,.25)); padding:20px; font:400 14px/1.6 var(--axdia-ui,Inter,sans-serif); } .axdia-consent h2{ font:400 20px/1.25 var(--axdia-display,Georgia,serif); letter-spacing:-.02em;margin:0 0 10px;color:var(--axdia-text,#f4eee8); } .axdia-consent p{color:var(--axdia-muted,#b7aaa0);margin:.4rem 0} .axdia-consent summary{cursor:pointer;color:var(--axdia-text,#f4eee8);font-weight:650} .axdia-consent button, .axdia-consent a{ min-height:44px;padding:0 15px; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--axdia-border,#40342b);border-radius:12px; background:var(--axdia-panel-raised,#28201a);color:var(--axdia-text,#f4eee8); font:700 12px/1 var(--axdia-ui,Inter,sans-serif); transition:.16s; } .axdia-consent button:hover, .axdia-consent a:hover{border-color:var(--axdia-border-strong,#59473b);transform:translateY(-1px)} .axdia-consent :focus-visible{ outline:3px solid var(--accent-readable,var(--axdia-focus));outline-offset:2px; } .axdia-consent button.primary{ background:var(--axdia-rust,#a93010);border-color:var(--axdia-rust,#a93010);color:#fff; } .axdia-consent-manage{ border:1px solid var(--axdia-border,#40342b);border-radius:12px; background:var(--axdia-panel,#201a16);color:var(--axdia-muted,#b7aaa0); padding:9px 13px;min-height:44px; font:600 12px/1 var(--axdia-ui,Inter,sans-serif); } .axdia-consent-manage:hover{color:var(--axdia-text,#f4eee8);border-color:var(--axdia-border-strong,#59473b)} body.public-shell .axdia-consent-manage{min-height:44px} @media(prefers-reduced-motion:reduce){ .axdia-consent button:hover,.axdia-consent a:hover{transform:none} } /* ---------- Cibles tactiles du pied de page ---------- * Les liens du footer sont empilés (et non insérés dans une phrase) : ils * doivent donc respecter le minimum WCAG 2.5.8 de 24 px. Ils étaient mesurés * à 20 px sur toutes les pages. On agit sur la hauteur de la zone cliquable, * pas sur la taille du texte : l'aspect du pied de page est inchangé. */ .public-shell .public-footer-grid a, .public-shell .footer-resources a{ display:inline-flex;align-items:center;min-height:24px; } /* ---------- Parcours de qualification (Contact) ---------- * Un formulaire par étapes : Besoin → Projet → Coordonnées → Résumé. * Tout est construit sur les jetons du DS, sans composant nouveau. */ .public-shell .qual-progress{ display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;padding:0;list-style:none; counter-reset:qual; } .public-shell .qual-progress li{ flex:1 1 130px;min-width:0;padding:11px 13px; border:1px solid var(--axdia-border);border-radius:12px; background:var(--axdia-panel);color:var(--axdia-muted-2); font:600 11px/1.3 var(--axdia-ui); } .public-shell .qual-progress li b{display:block;margin-top:3px;font:700 13px/1.3 var(--axdia-ui);color:inherit} .public-shell .qual-progress li[aria-current="step"]{ border-color:var(--axdia-accent);background:var(--axdia-accent-soft);color:var(--axdia-text); } .public-shell .qual-progress li[data-done="1"]{color:var(--axdia-muted);border-color:var(--axdia-border-strong)} .public-shell .qual-progress li[data-done="1"] b::after{content:" ✓";color:var(--axdia-green)} .public-shell .qual-step{ border:1px solid var(--axdia-border);border-radius:var(--axdia-radius); background:var(--axdia-panel);box-shadow:var(--axdia-shadow-soft);padding:26px; } .public-shell .qual-step > h2{ margin:0 0 6px;font:400 28px/1.15 var(--axdia-display); letter-spacing:-.025em;color:var(--axdia-text); } .public-shell .qual-step > p.qual-lede{margin:0 0 22px;color:var(--axdia-muted);font:400 14px/1.65 var(--axdia-ui)} /* Choix du besoin : des cartes, pas un menu déroulant. */ .public-shell .qual-needs{ display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px; border:0;padding:0;margin:0; } .public-shell .qual-needs legend{ padding:0;margin:0 0 14px;font:400 28px/1.15 var(--axdia-display); letter-spacing:-.025em;color:var(--axdia-text); } .public-shell .qual-need{position:relative} .public-shell .qual-need input{position:absolute;opacity:0;width:1px;height:1px} .public-shell .qual-need span{ display:flex;flex-direction:column;gap:5px;height:100%; padding:15px;min-height:92px; border:1px solid var(--axdia-border);border-radius:14px; background:var(--axdia-panel-raised);cursor:pointer;transition:.16s; } .public-shell .qual-need span b{font:700 14px/1.3 var(--axdia-ui);color:var(--axdia-text)} .public-shell .qual-need span small{color:var(--axdia-muted);font:400 12px/1.5 var(--axdia-ui)} /* Temps annoncé : calculé sur le nombre de questions, pour que personne ne commence un parcours sans savoir ce qu'il engage. */ .public-shell .qual-need span .qual-need-time{ margin-top:auto;padding-top:9px;font-style:normal; color:var(--axdia-muted-2);font:600 10px/1.4 var(--axdia-mono); text-transform:uppercase;letter-spacing:.06em; } .public-shell .qual-need input:hover + span{border-color:var(--axdia-border-strong);transform:translateY(-1px)} .public-shell .qual-need input:checked + span{ border-color:var(--axdia-accent);background:var(--axdia-accent-soft); box-shadow:0 0 0 1px var(--axdia-accent); } .public-shell .qual-need input:focus-visible + span{ outline:3px solid var(--accent-readable,var(--axdia-focus));outline-offset:2px; } /* Repli sans JavaScript : mêmes cartes, mais de simples liens mailto. */ .public-shell .qual-need-static{ display:flex;flex-direction:column;gap:5px; padding:15px;min-height:92px; border:1px solid var(--axdia-border);border-radius:14px; background:var(--axdia-panel-raised);transition:.16s; } .public-shell .qual-need-static:hover{border-color:var(--axdia-border-strong);transform:translateY(-1px)} .public-shell .qual-need-static b{font:700 14px/1.3 var(--axdia-ui);color:var(--axdia-text)} .public-shell .qual-need-static small{color:var(--axdia-muted);font:400 12px/1.5 var(--axdia-ui)} /* Champs */ .public-shell .qual-field{display:grid;gap:7px;margin-bottom:17px} .public-shell .qual-field > label, .public-shell .qual-group > legend{ font:700 12px/1.4 var(--axdia-ui);color:var(--axdia-text);padding:0; } .public-shell .qual-field .qual-help{color:var(--axdia-muted-2);font:400 12px/1.5 var(--axdia-ui)} .public-shell .qual-req{color:var(--accent-readable,var(--axdia-accent));margin-left:3px} .public-shell .qual-field input, .public-shell .qual-field select, .public-shell .qual-field textarea{ width:100%;min-height:46px;padding:12px 13px; border:1px solid var(--axdia-border);border-radius:12px; background:var(--axdia-panel-raised);color:var(--axdia-text); font:400 14px/1.5 var(--axdia-ui); } .public-shell .qual-field textarea{min-height:112px;resize:vertical} .public-shell .qual-field input:focus, .public-shell .qual-field select:focus, .public-shell .qual-field textarea:focus{ outline:0;border-color:var(--axdia-accent);box-shadow:0 0 0 3px var(--axdia-accent-soft); } .public-shell .qual-field :is(input,select,textarea):focus-visible{ outline:3px solid var(--accent-readable,var(--axdia-focus));outline-offset:2px; } .public-shell .qual-field input[aria-invalid="true"], .public-shell .qual-field textarea[aria-invalid="true"], .public-shell .qual-field select[aria-invalid="true"]{ border-color:var(--axdia-red);box-shadow:0 0 0 3px color-mix(in srgb,var(--axdia-red) 22%,transparent); } .public-shell .qual-error{color:var(--axdia-red);font:600 12px/1.45 var(--axdia-ui)} .public-shell .qual-error:empty{display:none} /* Cases et radios groupés */ .public-shell .qual-group{border:0;padding:0;margin:0 0 17px} .public-shell .qual-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px;margin-top:9px} .public-shell .qual-opt{ display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 12px; border:1px solid var(--axdia-border);border-radius:11px; background:var(--axdia-panel-raised);color:var(--axdia-muted); font:500 13px/1.35 var(--axdia-ui);cursor:pointer;transition:.16s; } .public-shell .qual-opt:hover{border-color:var(--axdia-border-strong);color:var(--axdia-text)} .public-shell .qual-opt input{width:17px;height:17px;flex:none;accent-color:var(--axdia-accent)} .public-shell .qual-opt:has(input:checked){ border-color:var(--axdia-accent);background:var(--axdia-accent-soft);color:var(--axdia-text); } .public-shell .qual-opt:has(input:focus-visible){ outline:3px solid var(--accent-readable,var(--axdia-focus));outline-offset:2px; } /* Barre d'actions */ .public-shell .qual-actions{ display:flex;flex-wrap:wrap;gap:9px;align-items:center; margin-top:24px;padding-top:20px;border-top:1px solid var(--axdia-border); } .public-shell .qual-actions .qual-spacer{margin-left:auto} .public-shell .qual-saved{color:var(--axdia-muted-2);font:500 11px/1.4 var(--axdia-ui)} /* Récapitulatif */ .public-shell .qual-summary{display:grid;gap:0;margin:0 0 6px;border:1px solid var(--axdia-border);border-radius:14px;overflow:hidden} .public-shell .qual-summary div{ display:grid;grid-template-columns:minmax(150px,34%) 1fr;gap:14px; padding:12px 15px;border-bottom:1px solid var(--axdia-border); background:var(--axdia-panel-raised); } .public-shell .qual-summary div:last-child{border-bottom:0} .public-shell .qual-summary dt{color:var(--axdia-muted-2);font:600 11px/1.5 var(--axdia-ui);text-transform:uppercase;letter-spacing:.05em;margin:0} .public-shell .qual-summary dd{margin:0;color:var(--axdia-text);font:400 13px/1.6 var(--axdia-ui);word-break:break-word} /* Résumé d'erreurs en tête d'étape */ .public-shell .qual-errors{ padding:13px 15px;margin-bottom:18px; border:1px solid var(--axdia-red);border-radius:12px; background:color-mix(in srgb,var(--axdia-red) 9%,var(--axdia-panel)); color:var(--axdia-text);font:400 13px/1.6 var(--axdia-ui); } .public-shell .qual-errors b{display:block;margin-bottom:5px} .public-shell .qual-errors ul{margin:0;padding-left:19px} .public-shell .qual-errors a{color:var(--accent-readable,var(--axdia-accent));text-decoration:underline} .public-shell .qual-privacy{ margin-top:18px;padding:14px 16px; border:1px solid var(--axdia-border);border-radius:12px; background:var(--axdia-panel-raised);color:var(--axdia-muted); font:400 12px/1.6 var(--axdia-ui); } .public-shell .qual-privacy a{color:var(--accent-readable,var(--axdia-accent));text-decoration:underline} @media(max-width:620px){ .public-shell .qual-step{padding:19px} .public-shell .qual-needs{grid-template-columns:1fr} .public-shell .qual-options{grid-template-columns:1fr} .public-shell .qual-summary div{grid-template-columns:1fr;gap:3px} .public-shell .qual-actions .btn{flex:1 1 100%} .public-shell .qual-actions .qual-spacer{margin-left:0} .public-shell .qual-progress li{flex:1 1 100%} } @media(prefers-reduced-motion:reduce){ .public-shell .qual-need span,.public-shell .qual-opt{transition:none} .public-shell .qual-need input:hover + span{transform:none} } /* ---------- Barre de recherche + filtres ---------- */ .public-shell .lib-toolbar{ position:sticky;top:70px;z-index:20; padding:16px 0;margin-bottom:8px; background:color-mix(in srgb,var(--axdia-bg) 92%,transparent); backdrop-filter:blur(18px); border-bottom:1px solid var(--axdia-border); } .public-shell .lib-search{position:relative;display:flex;gap:9px;flex-wrap:wrap;align-items:center} .public-shell .lib-search-field{position:relative;flex:1 1 280px;min-width:0} .public-shell .lib-search-field input{ width:100%;min-height:46px;padding:0 56px 0 38px; border:1px solid var(--axdia-border);border-radius:12px; background:var(--axdia-panel);color:var(--axdia-text); font:400 14px/1 var(--axdia-ui); } .public-shell .lib-search-field input::placeholder{color:var(--axdia-muted-2)} .public-shell .lib-search-field input:focus{ outline:0;border-color:var(--axdia-accent); box-shadow:0 0 0 3px var(--axdia-accent-soft); } .public-shell .lib-search-field input:focus-visible{ outline:3px solid var(--accent-readable,var(--axdia-focus));outline-offset:2px; } .public-shell .lib-search-icon{ position:absolute;left:13px;top:50%;transform:translateY(-50%); color:var(--axdia-muted-2);font-size:14px;pointer-events:none; } .public-shell .lib-search-clear{ position:absolute;right:1px;top:50%;transform:translateY(-50%); min-width:44px;min-height:44px;display:none;place-items:center; border:0;border-radius:8px;background:transparent;color:var(--axdia-muted); } .public-shell .lib-search-clear:hover{background:var(--axdia-panel-raised);color:var(--axdia-text)} .public-shell .lib-search-field.has-value .lib-search-clear{display:grid} .public-shell .lib-filters{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px} .public-shell .lib-chip{ min-height:44px;padding:0 13px; display:inline-flex;align-items:center;gap:7px; border:1px solid var(--axdia-border);border-radius:999px; background:var(--axdia-panel);color:var(--axdia-muted); font:600 12px/1 var(--axdia-ui);transition:.16s; } .public-shell .lib-chip:hover{border-color:var(--axdia-border-strong);color:var(--axdia-text)} .public-shell .lib-chip[aria-pressed="true"]{ background:var(--axdia-accent-soft);border-color:var(--axdia-accent);color:var(--axdia-text); } .public-shell .lib-chip .n{ font:600 10px/1 var(--axdia-mono);color:var(--axdia-muted-2); padding:3px 6px;border-radius:999px;background:var(--axdia-panel-raised); } .public-shell .lib-chip[aria-pressed="true"] .n{color:var(--axdia-text)} .public-shell .lib-meta{ display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between; margin:20px 0 14px;color:var(--axdia-muted);font:500 12px/1.5 var(--axdia-ui); } .public-shell .lib-meta strong{color:var(--axdia-text)} /* ---------- Grille d'outils ---------- */ .public-shell .lib-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:13px; list-style:none;padding:0;margin:0; } .public-shell .tool-card{ display:flex;flex-direction:column;gap:9px; padding:17px;min-height:172px; border:1px solid var(--axdia-border);border-radius:var(--axdia-radius); background:var(--axdia-panel);box-shadow:var(--axdia-shadow-soft); transition:.16s; } .public-shell .tool-card:hover{ transform:translateY(-2px);border-color:var(--axdia-border-strong); background:var(--axdia-panel-raised); } .public-shell .tool-card-top{display:flex;align-items:center;gap:10px} .public-shell .tool-card-icon{ width:36px;height:36px;flex:none;display:grid;place-items:center; border-radius:11px;background:var(--axdia-accent-soft); color:var(--axdia-accent);font-size:16px; } .public-shell .tool-card h3{ margin:0;font:700 14px/1.32 var(--axdia-ui);color:var(--axdia-text); letter-spacing:0; } .public-shell .tool-card p{ margin:0;color:var(--axdia-muted);font:400 13px/1.58 var(--axdia-ui);flex:1; } .public-shell .tool-card-foot{ display:flex;flex-wrap:wrap;gap:6px;align-items:center; padding-top:11px;border-top:1px solid var(--axdia-border); } .public-shell .tool-tag{ padding:4px 8px;border-radius:999px; border:1px solid var(--axdia-border);background:var(--axdia-panel-raised); color:var(--axdia-muted-2);font:600 10px/1.3 var(--axdia-ui); text-transform:uppercase;letter-spacing:.06em; } .public-shell .tool-tag.local{color:var(--axdia-green);border-color:color-mix(in srgb,var(--axdia-green) 34%,var(--axdia-border))} .public-shell .tool-tag.engine{color:var(--axdia-blue);border-color:color-mix(in srgb,var(--axdia-blue) 34%,var(--axdia-border))} .public-shell .tool-card-open{ margin-left:auto;color:var(--accent-readable,var(--axdia-accent)); font:700 12px/1 var(--axdia-ui);white-space:nowrap; } /* La carte entière est cliquable, mais le lien reste la cible accessible. */ .public-shell .tool-card a.tool-card-link::after{content:"";position:absolute;inset:0} .public-shell .tool-card{position:relative} .public-shell .lib-empty{ padding:46px 20px;text-align:center; border:1px dashed var(--axdia-border-strong);border-radius:var(--axdia-radius); background:var(--axdia-panel);color:var(--axdia-muted); } .public-shell .lib-empty h3{margin:0 0 8px;color:var(--axdia-text);font:700 16px/1.3 var(--axdia-ui)} .public-shell .lib-empty p{margin:0 auto 16px;max-width:420px;font:400 13px/1.6 var(--axdia-ui)} /* Repli sans JavaScript : la grille complète reste lisible et navigable. */ .public-shell .lib-nojs{ padding:13px 15px;margin-bottom:14px; border:1px solid var(--axdia-border-strong);border-radius:12px; background:var(--axdia-panel-raised);color:var(--axdia-muted); font:400 13px/1.55 var(--axdia-ui); } /* ---------- Pages produit AXDIA OS ---------- * .catalog-card impose min-height:320px et des titres de 40px : il est conçu * pour le catalogue éditorial des services. Réutilisé pour des listes de * fonctionnalités courtes, il produisait de grands vides sous deux lignes de * texte. Les composants ci-dessous sont dimensionnés par leur contenu. */ /* Grille de fonctionnalités compacte */ .public-shell .feature-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1px; margin-top:28px; border:1px solid var(--axdia-border);border-radius:16px; background:var(--axdia-border);overflow:hidden; } .public-shell .feature-item{ padding:20px;background:var(--axdia-panel); display:flex;flex-direction:column;gap:7px; } .public-shell .feature-item h3{ margin:0;font:700 14px/1.35 var(--axdia-ui);color:var(--axdia-text);letter-spacing:0; } .public-shell .feature-item p{margin:0;color:var(--axdia-muted);font:400 13px/1.62 var(--axdia-ui)} .public-shell .feature-item .feature-tag{ align-self:flex-start;margin-top:2px; padding:3px 7px;border-radius:999px; border:1px solid var(--axdia-border);background:var(--axdia-panel-raised); color:var(--axdia-muted-2);font:600 10px/1.3 var(--axdia-mono); text-transform:uppercase;letter-spacing:.06em; } /* Liste de faits : une alternative sobre à l'empilement de cartes */ .public-shell .spec-list{ margin:26px 0 0;padding:0;list-style:none; border-top:1px solid var(--axdia-border); } .public-shell .spec-list li{ display:grid;grid-template-columns:minmax(120px,22%) 1fr;gap:20px; padding:16px 2px;border-bottom:1px solid var(--axdia-border); } .public-shell .spec-list dt,.public-shell .spec-list .spec-key{ color:var(--accent-readable,var(--axdia-accent)); font:600 11px/1.5 var(--axdia-mono);text-transform:uppercase;letter-spacing:.08em; } .public-shell .spec-list .spec-val{color:var(--axdia-muted);font:400 14px/1.68 var(--axdia-ui)} .public-shell .spec-list .spec-val strong{color:var(--axdia-text);font-weight:650} /* Aperçu schématique du produit, dans le héros */ .public-shell .product-stage{ border:1px solid var(--axdia-border-strong);border-radius:20px; background:linear-gradient(180deg,var(--axdia-panel),var(--axdia-panel-raised)); box-shadow:var(--axdia-shadow);overflow:hidden; } .public-shell .product-stage-top{ display:flex;align-items:center;justify-content:space-between;gap:10px; min-height:46px;padding:0 14px; border-bottom:1px solid var(--axdia-border); font:700 11px/1 var(--axdia-ui);color:var(--axdia-text); } .public-shell .product-stage-top .stage-note{ color:var(--axdia-muted-2);font:600 10px/1 var(--axdia-mono); text-transform:uppercase;letter-spacing:.09em; } .public-shell .product-stage-body{padding:15px;display:grid;gap:9px} /* Ligne de résultat : sert à montrer la FORME d'une sortie, jamais une vraie donnée */ .public-shell .stage-row{ display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center; padding:12px 13px;border:1px solid var(--axdia-border);border-radius:12px; background:var(--axdia-panel); } .public-shell .stage-row .stage-mark{ width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:9px; background:var(--axdia-accent-soft);color:var(--accent-readable,var(--axdia-accent)); font:700 12px/1 var(--axdia-mono); } .public-shell .stage-row b{display:block;font:650 13px/1.35 var(--axdia-ui);color:var(--axdia-text)} .public-shell .stage-row small{display:block;margin-top:3px;color:var(--axdia-muted-2);font:400 11px/1.45 var(--axdia-ui)} .public-shell .stage-row .stage-score{ font:700 12px/1 var(--axdia-mono);color:var(--axdia-text); padding:5px 8px;border-radius:999px;border:1px solid var(--axdia-border);background:var(--axdia-panel-raised); } .public-shell .stage-row .stage-score.good{color:var(--axdia-green);border-color:color-mix(in srgb,var(--axdia-green) 38%,var(--axdia-border))} .public-shell .stage-row .stage-score.warn{color:var(--axdia-amber);border-color:color-mix(in srgb,var(--axdia-amber) 38%,var(--axdia-border))} .public-shell .stage-row .stage-score.bad{color:var(--axdia-red);border-color:color-mix(in srgb,var(--axdia-red) 38%,var(--axdia-border))} /* Le lien preuve → contrôle, montré explicitement */ .public-shell .stage-evidence{ margin:0;padding:10px 13px; border-left:2px solid var(--axdia-accent); background:var(--axdia-panel-raised); color:var(--axdia-muted);font:400 11px/1.6 var(--axdia-mono); word-break:break-word; } .public-shell .stage-evidence b{color:var(--axdia-text);font-weight:650} /* Héros à deux colonnes des pages produit */ .public-shell .product-hero-grid{ display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center; } /* Service ou produit : la distinction, côte à côte */ .public-shell .compare-split{ display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:28px; border:1px solid var(--axdia-border);border-radius:16px; background:var(--axdia-border);overflow:hidden; } .public-shell .compare-side{padding:24px;background:var(--axdia-panel)} .public-shell .compare-side.is-service{background:var(--axdia-panel-raised)} .public-shell .compare-side h3{ margin:10px 0 6px;font:400 24px/1.15 var(--axdia-display); letter-spacing:-.02em;color:var(--axdia-text); } .public-shell .compare-side p{margin:0 0 14px;color:var(--axdia-muted);font:400 13px/1.65 var(--axdia-ui)} .public-shell .compare-side ul{margin:0 0 18px;padding-left:17px;color:var(--axdia-muted);font:400 13px/1.7 var(--axdia-ui)} .public-shell .compare-side li{margin-bottom:5px} @media(max-width:980px){ .public-shell .product-hero-grid{grid-template-columns:1fr;gap:34px} .public-shell .compare-split{grid-template-columns:1fr} } @media(max-width:620px){ .public-shell .spec-list li{grid-template-columns:1fr;gap:5px;padding:14px 2px} .public-shell .stage-row{grid-template-columns:auto 1fr;gap:10px} .public-shell .stage-row .stage-score{grid-column:2;justify-self:start;margin-top:6px} .public-shell .product-stage-body{padding:11px} .public-shell .compare-side{padding:19px} } /* ---------- Pages outil de la Bibliothèque ---------- */ .public-shell .tool-crumb{padding:18px 0 0} .public-shell .tool-crumb ol{ display:flex;flex-wrap:wrap;gap:6px;align-items:center; margin:0;padding:0;list-style:none; color:var(--axdia-muted-2);font:500 12px/1.6 var(--axdia-ui); } .public-shell .tool-crumb li + li::before{content:"/";margin-right:6px;color:var(--axdia-border-strong)} .public-shell .tool-crumb a{color:var(--axdia-muted)} .public-shell .tool-crumb a:hover{color:var(--axdia-text)} .public-shell .tool-crumb [aria-current="page"]{color:var(--axdia-text)} .public-shell .tool-hero{padding-top:26px} .public-shell .tool-hero h1{font-size:clamp(34px,4.4vw,58px)} /* L'outil n'est chargé qu'au clic : cette zone tient la place en attendant. */ .public-shell .tool-frame-placeholder{ display:grid;gap:12px;place-items:center;text-align:center; padding:52px 20px;background:var(--axdia-panel); } .public-shell .tool-frame-placeholder p{margin:0;color:var(--axdia-muted);font:400 13px/1.6 var(--axdia-ui)} .public-shell .tool-frame-placeholder .muted2{font-size:12px} .public-shell .tool-frame-placeholder a{color:var(--accent-readable,var(--axdia-accent));text-decoration:underline} @media(max-width:620px){ .public-shell .tool-frame-placeholder{padding:34px 16px} } /* ---------- Étapes de workflow (pages outil) ---------- */ .public-shell .flow-steps{ display:grid;grid-template-columns:repeat(4,1fr); border:1px solid var(--axdia-border);border-radius:16px;overflow:hidden;margin-top:8px; } .public-shell .flow-step{padding:20px;border-right:1px solid var(--axdia-border);background:var(--axdia-panel)} .public-shell .flow-step:last-child{border-right:0} .public-shell .flow-step > span{ display:block;margin-bottom:8px; color:var(--accent-readable,var(--axdia-accent));font:600 11px/1 var(--axdia-mono); } .public-shell .flow-step b{display:block;margin-bottom:5px;color:var(--axdia-text);font:700 14px/1.3 var(--axdia-ui)} .public-shell .flow-step p{margin:0;color:var(--axdia-muted);font:400 13px/1.6 var(--axdia-ui)} /* ---------- Démonstration embarquée ---------- */ .public-shell .demo-frame{ border:1px solid var(--axdia-border-strong);border-radius:var(--axdia-radius); background:var(--axdia-panel);box-shadow:var(--axdia-shadow);overflow:hidden; } .public-shell .demo-frame-top{ display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between; min-height:52px;padding:10px 14px;border-bottom:1px solid var(--axdia-border); background:var(--axdia-panel-raised); } .public-shell .demo-frame-title{display:flex;align-items:center;gap:9px;color:var(--axdia-text);font:700 12px/1 var(--axdia-ui)} .public-shell .demo-frame-actions{display:flex;flex-wrap:wrap;gap:7px} .public-shell .demo-frame iframe{ display:block;width:100%;height:clamp(460px,72vh,760px);border:0;background:var(--axdia-bg); } .public-shell .demo-note{ display:flex;gap:10px;align-items:flex-start; padding:13px 15px;margin-bottom:12px; border:1px solid color-mix(in srgb,var(--axdia-amber) 42%,var(--axdia-border)); border-radius:12px;background:color-mix(in srgb,var(--axdia-amber) 7%,var(--axdia-panel)); color:var(--axdia-muted);font:400 13px/1.6 var(--axdia-ui); } .public-shell .demo-note b{color:var(--axdia-text)} /* ---------- Responsive ---------- */ @media(max-width:900px){ .public-shell .lib-toolbar{position:static;backdrop-filter:none} .public-shell .flow-steps{grid-template-columns:1fr 1fr} .public-shell .flow-step:nth-child(2){border-right:0} .public-shell .flow-step:nth-child(-n+2){border-bottom:1px solid var(--axdia-border)} } @media(max-width:620px){ .public-shell .lib-grid{grid-template-columns:1fr} .public-shell .flow-steps{grid-template-columns:1fr} .public-shell .flow-step{border-right:0;border-bottom:1px solid var(--axdia-border)} .public-shell .flow-step:last-child{border-bottom:0} .public-shell .lib-meta{flex-direction:column;gap:6px} .public-shell .demo-frame iframe{height:clamp(420px,64vh,560px)} } @media(prefers-reduced-motion:reduce){ .public-shell .tool-card,.public-shell .lib-chip{transition:none} .public-shell .tool-card:hover{transform:none} }