/* ==========================================================================
QORSEC — Système de design du site v3
« Engineering Trust »
--------------------------------------------------------------------------
Fichier unique, sans build. Chargé par toutes les pages :
Mode d'emploi détaillé : /_dev/STYLEGUIDE.md (jamais déployé).
SOMMAIRE
00. Jetons (couleurs, espacements 8 px, rayons, ombres, z-index)
01. Reset et base
02. Typographie
03. Mise en page (conteneur, sections claires / sombres, grilles)
04. Boutons
05. En-tête collant, menu « Solutions », menu mobile
06. Héros (maillage animé, treillis, grain)
07. Bandeau défilant des référentiels
08. Cartes (et bordure lumineuse qui suit la souris)
09. Badges de statut, puces, étiquettes
10. En-têtes de section, chiffres-clés
11. Onglets
12. Accordéon / FAQ
13. Tableaux
14. Formulaires, formulaire court [data-lead-form]
15. Alertes
16. Jauge de score A-F
17. Barres de progression
18. Fenêtres d'application (aperçus d'interface)
19. Gabarit de page outil (.tool-*)
20. Pied de page
21. Page 404, fil d'Ariane, en-tête de page
22. Utilitaires
23. Apparition au défilement et animations
24. prefers-reduced-motion
25. Impression (rapports des outils)
========================================================================== */
/* ==========================================================================
00. JETONS
========================================================================== */
:root {
/* --- Marque (charte officielle) --- */
--navy-950: #060e22;
--navy-900: #0a1633; /* fond du héros (haut) */
--navy-800: #10214b; /* NAVY DE MARQUE */
--navy-700: #182d61;
--navy-600: #22397a;
--blue-700: #1e40af; /* survol du bouton primaire */
--blue-600: #1d4ed8; /* ACTION : boutons, liens d'action */
--blue-500: #2563eb;
--blue-400: #60a5fa; /* liens sur fond sombre */
--cyan-700: #0369a1; /* donnée en texte sur fond clair */
--cyan-500: #0ea5e9; /* DONNÉES : graphiques, chiffres */
--cyan-300: #7dd3fc; /* donnée en texte sur fond sombre */
--orange-700: #b84d06; /* signalisation en texte (fond clair, AA) */
--orange-600: #dc5e09; /* SIGNALISATION UNIQUEMENT — jamais sur un bouton */
--orange-400: #fb923c; /* signalisation en texte (fond sombre) */
/* --- États (signalisation) --- */
--green-700: #15803d;
--green-500: #22c55e;
--green-300: #86efac;
--amber-600: #d97706;
--amber-300: #fcd34d;
--red-700: #b91c1c;
--red-500: #ef4444;
--red-300: #fca5a5;
/* --- Neutres --- */
--ink-900: #0b1530; /* texte principal sur clair */
--ink-700: #2b3756;
--ink-500: #4a5873; /* texte secondaire sur clair (AA) */
--ink-400: #6b7893;
--line-200: #e3e8f2;
--line-100: #eef2f8;
--paper-50: #f6f8fc;
--white: #ffffff;
/* --- Rôles (redéfinis par .section--dark / .theme-dark) --- */
--bg: var(--white);
--fg: var(--ink-900);
--fg-muted: var(--ink-500);
--fg-subtle: #5f6b86; /* 5,3:1 sur blanc, 5:1 sur --paper-50 (AA) ; --ink-400 reste pour bordures et icônes */
--surface: var(--white);
--surface-2: var(--paper-50);
--border: var(--line-200);
--border-strong: #cbd4e4;
--link: var(--blue-600);
--data: var(--cyan-700);
--signal: var(--orange-700);
--focus: #3b82f6;
/* --- Typographie --- */
--font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
--fs-body: 1.0625rem; /* 17 px */
--fs-lead: clamp(1.0625rem, .98rem + .35vw, 1.25rem);
--fs-small: .875rem;
--fs-xs: .78rem;
--fs-h1: clamp(2.35rem, 1.4rem + 4.2vw, 4.6rem);
--fs-h2: clamp(1.85rem, 1.25rem + 2.4vw, 3.05rem);
--fs-h3: clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
--lh-tight: 1.04;
--lh-body: 1.65;
/* --- Espacements (base 8 px) --- */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
--s-6: 32px; --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 80px;
--s-11: 96px; --s-12: 128px;
--section-y: clamp(72px, 6vw + 40px, 128px);
--gutter: clamp(16px, 4vw, 32px);
--container: 1200px;
--container-wide: 1320px;
/* --- Rayons --- */
--r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
/* --- Ombres --- */
--sh-1: 0 1px 2px rgba(11, 21, 48, .06), 0 1px 1px rgba(11, 21, 48, .04);
--sh-2: 0 6px 20px -6px rgba(11, 21, 48, .14), 0 2px 6px rgba(11, 21, 48, .05);
--sh-3: 0 24px 60px -18px rgba(11, 21, 48, .28), 0 8px 20px -8px rgba(11, 21, 48, .12);
--sh-glow: 0 0 0 1px rgba(14, 165, 233, .25), 0 18px 50px -12px rgba(29, 78, 216, .45);
/* --- z-index --- */
--z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-header: 200;
--z-mobile: 300; --z-toast: 400; --z-skip: 500;
/* --- Mouvement --- */
--ease: cubic-bezier(.2, .7, .2, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--t-fast: .15s; --t: .25s; --t-slow: .6s;
--header-h: 68px;
}
/* Thème sombre local : s'applique à une section, une carte, un bloc. */
.section--dark, .theme-dark {
--bg: var(--navy-900);
--fg: #f1f5fd;
--fg-muted: #aab7d4;
--fg-subtle: #8494b6;
--surface: rgba(255, 255, 255, .035);
--surface-2: rgba(255, 255, 255, .06);
--border: rgba(173, 196, 255, .14);
--border-strong: rgba(173, 196, 255, .26);
--link: var(--blue-400);
--data: var(--cyan-300);
--signal: var(--orange-400);
color: var(--fg);
}
/* ==========================================================================
01. RESET ET BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
margin: 0;
font-family: var(--font);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--fg);
background: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(14, 165, 233, .28); }
[hidden] { display: none !important; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-7) 0; }
code, kbd, samp, pre { font-family: var(--mono); font-size: .92em; }
:not(pre) > code { background: var(--surface-2); border: 1px solid var(--border); padding: .08em .38em; border-radius: 5px; }
.skip-link {
position: absolute; left: 16px; top: -100px; z-index: var(--z-skip);
background: var(--white); color: var(--ink-900); padding: 10px 16px; border-radius: var(--r-sm);
font-weight: 700; box-shadow: var(--sh-3); transition: top var(--t);
}
.skip-link:focus { top: 12px; }
.visually-hidden, .sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ==========================================================================
02. TYPOGRAPHIE
========================================================================== */
h1, h2, h3, h4, h5 { margin: 0 0 .5em; color: var(--fg); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.045em; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.035em; }
h3, .h3 { font-size: var(--fs-h3); letter-spacing: -.02em; line-height: 1.25; }
h4, .h4 { font-size: 1.05rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, .h1, .h2, .h3 { text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--fg-muted); max-width: 62ch; }
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }
.small { font-size: var(--fs-small); }
.xs { font-size: var(--fs-xs); }
.mono { font-family: var(--mono); }
.text-grad {
background: linear-gradient(100deg, #7dd3fc 0%, #60a5fa 40%, #a5b4fc 70%, #7dd3fc 100%);
background-size: 200% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent;
animation: grad-shift 8s var(--ease) infinite alternate;
}
.text-grad--light { background-image: linear-gradient(100deg, var(--blue-600), var(--cyan-700) 60%, var(--blue-600)); }
@keyframes grad-shift { to { background-position: 100% 0; } }
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--data);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; opacity: .8; }
.eyebrow--plain::before { display: none; }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.6em; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .35em 0; }
/* ==========================================================================
03. MISE EN PAGE
========================================================================== */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
.container--narrow { max-width: calc(820px + 2 * var(--gutter)); }
.section { position: relative; padding-block: var(--section-y); background: var(--bg); }
.section--tight { padding-block: clamp(48px, 4vw + 24px, 80px); }
.section--paper { --bg: var(--paper-50); }
.section--dark { background: var(--navy-900); }
.section--deep { background: radial-gradient(120% 80% at 50% 0%, #142a5e 0%, var(--navy-900) 55%, var(--navy-950) 100%); }
.section--border-top { border-top: 1px solid var(--border); }
/* fine grille décorative sur sections sombres */
.section--grid::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(148, 178, 255, .055) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 178, 255, .055) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 20%, transparent 75%);
mask-image: radial-gradient(80% 70% at 50% 30%, #000 20%, transparent 75%);
}
.section > .container { position: relative; z-index: var(--z-base); }
.grid { display: grid; gap: var(--s-5); }
.grid-2 { display: grid; gap: var(--s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: var(--s-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.stack > * + * { margin-top: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
@media (max-width: 1024px) {
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.split, .split--wide-left { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
04. BOUTONS
Primaire = bleu #1d4ed8 (action). L'orange n'est JAMAIS utilisé ici.
========================================================================== */
.btn {
--btn-bg: var(--blue-600); --btn-fg: #fff; --btn-bd: transparent;
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 48px; padding: 12px 22px; border-radius: var(--r-sm);
border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg);
font-weight: 700; font-size: .98rem; line-height: 1.2; letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease), box-shadow var(--t);
-webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn .btn__arrow { transition: transform var(--t) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--primary { box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 22px -10px rgba(29, 78, 216, .8); }
.btn--primary:hover { --btn-bg: var(--blue-700); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 12px 28px -10px rgba(29, 78, 216, .9); }
.section--dark .btn--primary:hover, .theme-dark .btn--primary:hover { --btn-bg: var(--blue-500); }
.btn--secondary { --btn-bg: var(--white); --btn-fg: var(--ink-900); --btn-bd: var(--border-strong); box-shadow: var(--sh-1); }
.btn--secondary:hover { --btn-bd: var(--ink-400); --btn-bg: var(--paper-50); }
.section--dark .btn--secondary, .theme-dark .btn--secondary,
.btn--on-dark { --btn-bg: rgba(255, 255, 255, .06); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .22); box-shadow: none; backdrop-filter: blur(6px); }
.section--dark .btn--secondary:hover, .theme-dark .btn--secondary:hover,
.btn--on-dark:hover { --btn-bg: rgba(255, 255, 255, .12); --btn-bd: rgba(255, 255, 255, .4); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--link); --btn-bd: transparent; padding-inline: 8px; min-height: 40px; }
.btn--ghost:hover { --btn-bg: rgba(29, 78, 216, .08); }
.section--dark .btn--ghost:hover, .theme-dark .btn--ghost:hover { --btn-bg: rgba(96, 165, 250, .12); }
.btn--sm { min-height: 38px; padding: 8px 14px; font-size: .9rem; border-radius: 7px; }
.btn--lg { min-height: 56px; padding: 16px 28px; font-size: 1.05rem; }
.btn--block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--link); text-decoration: none; }
.link-arrow::after { content: "→"; transition: transform var(--t) var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
/* ==========================================================================
05. EN-TÊTE COLLANT
Le bandeau est toujours sombre (logo fond sombre) : cohérent sur toutes les pages.
========================================================================== */
.site-header {
position: sticky; top: 0; z-index: var(--z-header);
height: var(--header-h);
background: rgba(8, 18, 43, .72);
-webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid rgba(173, 196, 255, .1);
color: #fff;
transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.site-header.is-scrolled { background: rgba(8, 18, 43, .92); border-bottom-color: rgba(173, 196, 255, .16); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--s-5); }
.brand { display: inline-flex; align-items: center; flex: none; border-radius: 6px; }
.brand img { height: 38px; width: auto; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: var(--s-4); }
.nav__link, .nav__trigger {
display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 8px;
color: #c9d4ec; font-weight: 600; font-size: .95rem; text-decoration: none; background: none; border: 0;
transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .07); text-decoration: none; }
.nav__link[aria-current="page"], .nav__trigger.is-current { color: #fff; }
.nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--cyan-500); border-radius: 8px 8px 2px 2px; }
.nav__trigger svg { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__item { position: relative; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
/* Sélecteur de langue */
.lang-switch { display: inline-flex; padding: 3px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.lang-switch button {
min-width: 36px; height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent;
color: #aab7d4; font-weight: 700; font-size: .8rem; letter-spacing: .04em;
}
.lang-switch button:hover { color: #fff; }
.lang-switch button.on, .lang-switch button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); color: #fff; }
/* Menu déroulant « Solutions » */
.dropdown {
position: absolute; top: calc(100% + 10px); left: -16px; z-index: var(--z-dropdown);
width: min(640px, calc(100vw - 32px));
padding: 10px; border-radius: var(--r-lg);
background: rgba(12, 24, 56, .97); border: 1px solid rgba(173, 196, 255, .16);
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .2);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985); transform-origin: top left;
transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
}
.dropdown.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* pont de survol */
.dropdown__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.dropdown__link {
display: flex; gap: 12px; padding: 12px; border-radius: 10px; color: #dfe6f5; text-decoration: none;
transition: background var(--t-fast);
}
.dropdown__link:hover, .dropdown__link:focus-visible { background: rgba(255, 255, 255, .06); text-decoration: none; }
.dropdown__icon {
flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
background: linear-gradient(140deg, rgba(29, 78, 216, .35), rgba(14, 165, 233, .18)); border: 1px solid rgba(125, 211, 252, .22); color: var(--cyan-300);
}
.dropdown__icon svg { width: 20px; height: 20px; }
.dropdown__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: .95rem; color: #fff; line-height: 1.3; }
.dropdown__desc { display: block; margin-top: 2px; font-size: .84rem; line-height: 1.45; color: #9fb0d2; }
.dropdown__footer {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
margin-top: 6px; padding: 12px 12px 6px; border-top: 1px solid rgba(173, 196, 255, .12); font-size: .88rem; color: #9fb0d2;
}
.dropdown__footer a { color: var(--blue-400); font-weight: 700; text-decoration: none; }
.dropdown__footer a:hover { text-decoration: underline; }
/* Bouton burger et menu mobile */
.burger {
display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16);
background: rgba(255, 255, 255, .05); color: #fff; align-items: center; justify-content: center; flex: none;
}
.burger__bars { position: relative; width: 18px; height: 12px; }
.burger__bars span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--t) var(--ease), opacity var(--t-fast), top var(--t) var(--ease); }
.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { top: 5px; }
.burger__bars span:nth-child(3) { top: 10px; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }
.mobile-menu {
position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-mobile);
background: var(--navy-950); color: #fff; overflow-y: auto; overscroll-behavior: contain;
padding: var(--s-5) var(--gutter) var(--s-8);
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-menu__group { border-bottom: 1px solid rgba(173, 196, 255, .12); padding: var(--s-3) 0; }
.mobile-menu__label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-300); padding: 8px 4px; }
.mobile-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; color: #e6ecf8; font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.mobile-menu a[aria-current="page"] { color: var(--cyan-300); }
.mobile-menu__cta { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.mobile-menu__cta a { justify-content: center; }
body.menu-open { overflow: hidden; }
@media (max-width: 1080px) {
.nav, .header-actions .btn--header { display: none; }
.burger { display: inline-flex; }
.header-actions { gap: var(--s-2); }
}
@media (min-width: 1081px) { .mobile-menu { display: none; } }
@media (max-width: 380px) { .brand img { height: 32px; } }
/* ==========================================================================
06. HÉROS
========================================================================== */
.hero {
position: relative; isolation: isolate; overflow: hidden;
color: #fff; background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
padding: clamp(56px, 7vw, 112px) 0 clamp(64px, 7vw, 120px);
margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--header-h) + clamp(48px, 7vw, 104px));
}
.hero--compact { padding-bottom: clamp(48px, 5vw, 80px); padding-top: calc(var(--header-h) + clamp(40px, 5vw, 72px)); }
/* maillage de dégradés animé (4 taches floues) */
.hero__mesh { position: absolute; inset: -20%; z-index: -3; pointer-events: none; filter: blur(70px) saturate(120%); opacity: .9; }
.hero__mesh span { position: absolute; border-radius: 50%; will-change: transform; }
.hero__mesh span:nth-child(1) { width: 52%; height: 60%; left: 2%; top: 4%; background: radial-gradient(circle, rgba(29, 78, 216, .62), transparent 68%); animation: mesh-a 26s var(--ease) infinite alternate; }
.hero__mesh span:nth-child(2) { width: 46%; height: 52%; right: 4%; top: 0; background: radial-gradient(circle, rgba(14, 165, 233, .42), transparent 68%); animation: mesh-b 32s var(--ease) infinite alternate; }
.hero__mesh span:nth-child(3) { width: 40%; height: 46%; left: 34%; bottom: 0; background: radial-gradient(circle, rgba(56, 78, 190, .5), transparent 70%); animation: mesh-c 38s var(--ease) infinite alternate; }
.hero__mesh span:nth-child(4) { width: 18%; height: 22%; right: 18%; bottom: 14%; background: radial-gradient(circle, rgba(220, 94, 9, .26), transparent 70%); animation: mesh-d 30s var(--ease) infinite alternate; }
@keyframes mesh-a { to { transform: translate(14%, 10%) scale(1.12); } }
@keyframes mesh-b { to { transform: translate(-16%, 14%) scale(.92); } }
@keyframes mesh-c { to { transform: translate(10%, -14%) scale(1.15); } }
@keyframes mesh-d { to { transform: translate(-30%, -20%) scale(1.3); } }
/* treillis « post-quantique » (canvas dessiné par site.js) */
.hero__lattice {
position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 82%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 82%, transparent 100%);
}
/* grain léger */
.hero__grain, .grain::after {
position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain { position: relative; isolation: isolate; }
.grain::after { content: ""; }
/* liseré lumineux en bas du héros */
.hero::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 0;
background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .5), rgba(96, 165, 250, .5), transparent);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__pill {
display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
padding: 6px 14px 6px 6px; border-radius: var(--r-pill);
background: rgba(255, 255, 255, .06); border: 1px solid rgba(173, 196, 255, .2);
color: #d4def3; font-size: .85rem; font-weight: 600; line-height: 1.3;
}
.hero__pill-dot { display: inline-grid; place-items: center; flex: none; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: rgba(14, 165, 233, .16); color: var(--cyan-300); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { margin: 22px 0 22px; color: #fff; max-width: 13ch; }
.hero .lead { color: #b9c6e2; font-size: clamp(1.06rem, .98rem + .4vw, 1.24rem); max-width: 58ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__note { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; font-size: .86rem; color: #93a4c8; }
.hero__note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange-600); box-shadow: 0 0 0 4px rgba(220, 94, 9, .18); flex: none; margin-top: calc(.75em - 3.5px); }
@media (max-width: 960px) {
.hero__grid { grid-template-columns: minmax(0, 1fr); }
.hero h1 { max-width: 16ch; }
}
@media (max-width: 520px) {
.hero__actions .btn { flex: 1 1 100%; }
}
/* Carte « Testez votre domaine » du héros */
.domain-card {
position: relative; border-radius: var(--r-xl); padding: 22px;
background: linear-gradient(180deg, rgba(20, 38, 86, .72), rgba(10, 22, 51, .8));
border: 1px solid rgba(173, 196, 255, .18);
box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.domain-card__label { display: block; font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em; color: #fff; margin-bottom: 4px; }
.domain-card__hint { margin: 0 0 14px; font-size: .88rem; color: #9fb0d2; }
.domain-form { display: flex; gap: 8px; padding: 6px; border-radius: 12px; background: rgba(2, 8, 24, .55); border: 1px solid rgba(173, 196, 255, .2); transition: border-color var(--t), box-shadow var(--t); }
.domain-form:focus-within { border-color: rgba(125, 211, 252, .6); box-shadow: 0 0 0 4px rgba(14, 165, 233, .15); }
.domain-form__prefix { display: flex; align-items: center; padding-left: 10px; color: #7086b0; font-family: var(--mono); font-size: .9rem; }
.domain-form input {
flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; color: #fff;
font-family: var(--mono); font-size: 1rem;
}
.domain-form input::placeholder { color: #6a7ea6; }
.domain-form .btn { min-height: 44px; }
.domain-form__error { margin: 8px 2px 0; font-size: .85rem; color: var(--red-300); min-height: 1.2em; }
.domain-card__divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #7f93bb; }
.domain-card__divider::before, .domain-card__divider::after { content: ""; flex: 1; height: 1px; background: rgba(173, 196, 255, .14); }
.scan-preview { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.scan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .88rem; }
.scan-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(173, 196, 255, .08); color: #d5def1; }
.scan-list .mono { color: #fff; font-size: .82rem; }
.scan-list li { opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.scan-preview.is-run .scan-list li { opacity: 1; transform: none; }
.scan-preview.is-run .scan-list li:nth-child(2) { transition-delay: .25s; }
.scan-preview.is-run .scan-list li:nth-child(3) { transition-delay: .5s; }
.scan-preview.is-run .scan-list li:nth-child(4) { transition-delay: .75s; }
.scan-preview.is-run .scan-list li:nth-child(5) { transition-delay: 1s; }
.scan-caption { margin: 14px 0 0; font-size: .78rem; color: #7f93bb; }
@media (max-width: 460px) {
.scan-preview { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.scan-list { width: 100%; }
.domain-form__prefix { display: none; }
.domain-card { padding: 16px; }
}
/* ==========================================================================
07. BANDEAU DÉFILANT DES RÉFÉRENTIELS
Le contenu est dupliqué par site.js (copie aria-hidden) pour une boucle continue.
========================================================================== */
.marquee { position: relative; overflow: hidden; padding: 22px 0; background: var(--navy-950); border-block: 1px solid rgba(173, 196, 255, .1); color: #c9d4ec; }
.marquee__label { text-align: center; margin: 0 0 14px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8496bc; padding-inline: var(--gutter); }
.marquee__viewport {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list { display: flex; align-items: center; gap: 14px; padding-right: 14px; margin: 0; list-style: none; }
.marquee__item {
display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid rgba(173, 196, 255, .14); background: rgba(255, 255, 255, .03);
font-weight: 700; font-size: .92rem; letter-spacing: -.005em;
}
.marquee__item small { font-weight: 600; color: #8496bc; font-size: .78rem; }
.marquee__item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-500); box-shadow: 0 0 10px var(--cyan-500); }
.marquee__item--roadmap::before { background: #8496bc; box-shadow: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* ==========================================================================
08. CARTES
.card carte de base (s'adapte au thème clair / sombre)
.card--link carte entièrement cliquable (lien étiré)
[data-glow] bordure lumineuse qui suit la souris (site.js)
========================================================================== */
.card {
position: relative; display: flex; flex-direction: column; gap: 12px;
padding: clamp(20px, 2.2vw, 28px); border-radius: var(--r-lg);
background: var(--surface); border: 1px solid var(--border);
transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t), background var(--t);
}
.section:not(.section--dark) .card { box-shadow: var(--sh-1); }
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--fg-muted); }
.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card__kicker { font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--data); }
.card--link:hover { transform: translateY(-3px); }
.section:not(.section--dark) .card--link:hover { box-shadow: var(--sh-2); border-color: var(--border-strong); }
.section--dark .card--link:hover { background: rgba(255, 255, 255, .055); }
.card--link a.card__stretch { color: inherit; text-decoration: none; }
.card--link a.card__stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; }
.card--link a.card__stretch:focus-visible { outline: none; }
.card--link:has(a.card__stretch:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
/* icône de carte */
.icon-tile {
display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 12px;
background: linear-gradient(145deg, rgba(29, 78, 216, .12), rgba(14, 165, 233, .1)); color: var(--blue-600);
border: 1px solid rgba(29, 78, 216, .16);
}
.icon-tile svg { width: 24px; height: 24px; }
.section--dark .icon-tile, .theme-dark .icon-tile { background: linear-gradient(145deg, rgba(29, 78, 216, .4), rgba(14, 165, 233, .16)); color: var(--cyan-300); border-color: rgba(125, 211, 252, .22); }
/* bordure lumineuse qui suit la souris */
[data-glow] { --mx: 50%; --my: 50%; --glow-o: 0; }
[data-glow]::before {
content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
background: radial-gradient(360px circle at var(--mx) var(--my), rgba(125, 211, 252, .95), rgba(29, 78, 216, .55) 35%, transparent 65%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: var(--glow-o); transition: opacity var(--t);
}
[data-glow]::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
background: radial-gradient(420px circle at var(--mx) var(--my), rgba(56, 189, 248, .08), transparent 60%);
opacity: var(--glow-o); transition: opacity var(--t);
}
.section:not(.section--dark) [data-glow]::after { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(29, 78, 216, .06), transparent 60%); }
[data-glow] > * { position: relative; z-index: 1; }
[data-glow]:hover { --glow-o: 1; }
/* Bento des solutions */
.bento { display: grid; gap: var(--s-4); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bento > .card { grid-column: span 2; }
.bento > .card--feature { grid-column: span 4; grid-row: span 1; background: linear-gradient(160deg, rgba(29, 78, 216, .05), rgba(14, 165, 233, .03) 40%, var(--surface) 70%); }
.bento > .card--feature::after { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--cyan-500), var(--blue-600), transparent); opacity: .7; pointer-events: none; z-index: 2; }
.bento > .card--half { grid-column: span 3; }
@media (max-width: 1024px) { .bento > .card, .bento > .card--feature, .bento > .card--half { grid-column: span 3; } }
@media (max-width: 680px) { .bento { grid-template-columns: minmax(0, 1fr); } .bento > .card, .bento > .card--feature, .bento > .card--half { grid-column: auto; } }
.card__name { font-family: var(--mono); font-size: .8rem; color: var(--fg-subtle); font-weight: 600; }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.feature-list li { position: relative; padding-left: 26px; color: var(--fg-muted); font-size: .96rem; line-height: 1.5; }
.feature-list li::before {
content: ""; position: absolute; left: 0; top: .28em; width: 16px; height: 16px; border-radius: 50%;
background: rgba(14, 165, 233, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%230369a1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.section--dark .feature-list li::before, .theme-dark .feature-list li::before { background-color: rgba(14, 165, 233, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%237dd3fc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.feature-list--two { grid-template-columns: 1fr 1fr; column-gap: 24px; }
/* Fonctions prévues (pas encore construites) : cercle en pointillés, jamais une coche. */
.feature-list--planned li::before, .section--dark .feature-list--planned li::before, .theme-dark .feature-list--planned li::before { background: transparent; border: 1.5px dashed currentColor; opacity: .7; box-sizing: border-box; }
@media (max-width: 560px) { .feature-list--two { grid-template-columns: 1fr; } }
/* Cartes outils */
.tool-card { min-height: 100%; }
.tool-card h3 { font-size: 1.1rem; }
.tool-card p { font-size: .95rem; }
.tool-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* ==========================================================================
09. BADGES DE STATUT, PUCES, ÉTIQUETTES
.status--available Disponible (vert)
.status--early Accès anticipé (cyan)
.status--beta Bêta (bleu)
.status--dev En développement (orange = signalisation)
.status--roadmap Feuille de route (neutre, pointillé)
========================================================================== */
.status {
--st: var(--ink-500); --st-bg: rgba(74, 88, 115, .1); --st-bd: rgba(74, 88, 115, .22);
display: inline-flex; align-items: center; gap: 7px; flex: none;
padding: 4px 10px 4px 9px; border-radius: var(--r-pill);
font-size: .78rem; font-weight: 800; letter-spacing: .02em; line-height: 1.3; white-space: nowrap;
color: var(--st); background: var(--st-bg); border: 1px solid var(--st-bd);
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status--available { --st: var(--green-700); --st-bg: rgba(34, 197, 94, .1); --st-bd: rgba(21, 128, 61, .25); }
.status--available::before { box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); animation: pulse-dot 2.4s infinite; }
.status--early { --st: var(--cyan-700); --st-bg: rgba(14, 165, 233, .1); --st-bd: rgba(3, 105, 161, .25); }
.status--beta { --st: var(--blue-600); --st-bg: rgba(29, 78, 216, .08); --st-bd: rgba(29, 78, 216, .22); }
.status--dev { --st: var(--orange-700); --st-bg: rgba(220, 94, 9, .09); --st-bd: rgba(184, 77, 6, .25); }
.status--roadmap { --st: var(--ink-500); --st-bg: transparent; --st-bd: rgba(74, 88, 115, .4); border-style: dashed; }
.status--roadmap::before { background: transparent; border: 1.5px solid currentColor; width: 6px; height: 6px; }
.section--dark .status--available, .theme-dark .status--available { --st: var(--green-300); --st-bg: rgba(34, 197, 94, .12); --st-bd: rgba(134, 239, 172, .3); }
.section--dark .status--early, .theme-dark .status--early { --st: var(--cyan-300); --st-bg: rgba(14, 165, 233, .12); --st-bd: rgba(125, 211, 252, .3); }
.section--dark .status--beta, .theme-dark .status--beta { --st: #93c5fd; --st-bg: rgba(59, 130, 246, .14); --st-bd: rgba(147, 197, 253, .3); }
.section--dark .status--dev, .theme-dark .status--dev { --st: var(--orange-400); --st-bg: rgba(220, 94, 9, .14); --st-bd: rgba(251, 146, 60, .32); }
.section--dark .status--roadmap, .theme-dark .status--roadmap { --st: #a9b6d3; --st-bd: rgba(169, 182, 211, .4); }
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } }
/* puces d'information (non statutaires) */
.chip {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill);
font-size: .76rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--border);
}
.chip svg { width: 13px; height: 13px; }
.chip--data { color: var(--data); border-color: rgba(14, 165, 233, .28); background: rgba(14, 165, 233, .07); }
.chip--signal { color: var(--signal); border-color: rgba(220, 94, 9, .3); background: rgba(220, 94, 9, .07); }
.chip--ok { color: var(--green-700); border-color: rgba(21, 128, 61, .25); background: rgba(34, 197, 94, .08); }
.section--dark .chip--ok, .theme-dark .chip--ok { color: var(--green-300); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
/* ==========================================================================
10. EN-TÊTES DE SECTION, CHIFFRES-CLÉS
========================================================================== */
.section-head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head h2 { margin-top: 14px; }
.section-head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section-head--split > div { max-width: 720px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-radius: var(--r-lg); overflow: hidden; background: var(--border); border: 1px solid var(--border); }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { padding: 22px 24px; background: var(--bg); }
.section--dark .stat { background: rgba(10, 22, 51, .92); }
.stat__value { display: flex; align-items: baseline; gap: 4px; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.stat__value .unit { font-size: .45em; letter-spacing: 0; color: var(--data); font-weight: 800; }
.stat__label { margin-top: 10px; font-size: .9rem; color: var(--fg-muted); line-height: 1.45; }
@media (max-width: 860px) { .stats, .stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .stats, .stats--3 { grid-template-columns: minmax(0, 1fr); } }
/* ==========================================================================
11. ONGLETS (role="tablist" / role="tab" / role="tabpanel", géré par site.js [data-tabs])
========================================================================== */
.tabs__list { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); max-width: 100%; }
.tabs__tab {
display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 9px;
background: transparent; color: var(--fg-muted); font-weight: 700; font-size: .93rem; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.tabs__tab svg { width: 16px; height: 16px; }
.tabs__tab:hover { color: var(--fg); }
.tabs__tab[aria-selected="true"] { background: var(--white); color: var(--ink-900); box-shadow: var(--sh-1); }
.section--dark .tabs__tab[aria-selected="true"], .theme-dark .tabs__tab[aria-selected="true"] { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }
.tabs__panel { margin-top: var(--s-5); }
.tabs__panel:focus-visible { outline-offset: 6px; }
.tabs__panel.is-entering { animation: tab-in .45s var(--ease-out); }
@keyframes tab-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 640px) {
.tabs__list { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab { flex: 0 0 auto; padding-inline: 12px; font-size: .88rem; white-space: nowrap; }
}
/* ==========================================================================
12. ACCORDÉON / FAQ ( natif, sans JS)
========================================================================== */
.accordion-group { display: grid; gap: 10px; }
.accordion { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--t), box-shadow var(--t); }
.accordion[open] { border-color: var(--border-strong); box-shadow: var(--sh-1); }
.accordion summary {
list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 18px 20px; font-weight: 700; font-size: 1.02rem; color: var(--fg); border-radius: inherit;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;
border: 1px solid var(--border); transition: transform var(--t) var(--ease);
}
.accordion[open] summary::after { transform: rotate(45deg); }
.accordion__body { padding: 0 20px 18px; color: var(--fg-muted); }
.accordion__body > :last-child { margin-bottom: 0; }
/* ==========================================================================
13. TABLEAUX (.table dans .table-wrap pour le défilement horizontal interne)
========================================================================== */
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); background: var(--surface-2); white-space: nowrap; }
/* En-têtes de ligne (th scope=row dans le corps) : style de cellule, pas d'en-tête de colonne. */
.table tbody th { font-size: inherit; font-weight: 700; letter-spacing: normal; text-transform: none; white-space: normal; color: var(--fg); background: transparent; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: rgba(29, 78, 216, .025); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table caption { caption-side: bottom; padding: 10px 14px; font-size: .82rem; color: var(--fg-subtle); text-align: left; }
/* ==========================================================================
14. FORMULAIRES
========================================================================== */
.field { display: grid; gap: 6px; }
.field > span, .field label, .label { font-size: .88rem; font-weight: 700; color: var(--fg); }
.field .opt { font-weight: 500; color: var(--fg-subtle); }
.input, .select, .textarea,
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--r-sm);
border: 1px solid var(--border-strong); background: var(--white); color: var(--ink-900);
font-size: 1rem; line-height: 1.4; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea, .textarea { min-height: 120px; resize: vertical; }
.field select, .select { appearance: none; padding-right: 40px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%234a5873' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center/18px no-repeat; }
.input:focus, .select:focus, .textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(29, 78, 216, .15); }
.field input::placeholder, .field textarea::placeholder { color: #8391ab; }
.field--invalid input, .field--invalid textarea, [aria-invalid="true"] { border-color: var(--red-700) !important; }
/* .field > .field__help : l'emporte sur « .field > span » (aide en enfant direct d'un label.field). */
.field__help, .field > .field__help { font-size: .82rem; font-weight: 400; color: var(--fg-subtle); }
.section--dark .field input:not([type="checkbox"]):not([type="radio"]), .section--dark .field select, .section--dark .field textarea,
.theme-dark .field input:not([type="checkbox"]):not([type="radio"]), .theme-dark .field select, .theme-dark .field textarea {
background-color: rgba(2, 8, 24, .45); border-color: rgba(173, 196, 255, .22); color: #fff;
}
.section--dark .field select, .theme-dark .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23aab7d4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.section--dark .field select option, .theme-dark .field select option { color: var(--ink-900); background: #fff; }
.section--dark .field input::placeholder, .section--dark .field textarea::placeholder,
.theme-dark .field input::placeholder, .theme-dark .field textarea::placeholder { color: #7086b0; }
.section--dark .field input:focus, .section--dark .field select:focus, .section--dark .field textarea:focus,
.theme-dark .field input:focus, .theme-dark .field select:focus, .theme-dark .field textarea:focus { border-color: var(--cyan-500); box-shadow: 0 0 0 4px rgba(14, 165, 233, .18); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: var(--fg); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blue-600); flex: none; }
.form-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
/* piège à robots : invisible pour les humains (NE PAS utiliser display:none) */
.leurre, .hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
/* état du formulaire (#formetat et .form-status) */
.form-etat, .form-status { margin: 0; padding: 12px 14px; border-radius: var(--r-sm); font-size: .92rem; font-weight: 600; line-height: 1.45; border: 1px solid transparent; }
.form-etat.ok, .form-status.ok { color: #0f5e2e; background: #e8f8ee; border-color: #b4e5c6; }
.form-etat.ko, .form-status.ko { color: #8f1d1d; background: #fdecec; border-color: #f4c2c2; }
.form-etat.encours, .form-status.encours { color: var(--blue-700); background: #ebf1ff; border-color: #c8d6fb; }
.form-legal { font-size: .8rem; color: var(--fg-subtle); margin: 0; line-height: 1.5; }
/* formulaire de contact (contact.html) */
.contact-form { display: grid; gap: 16px; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-2); }
.contact-form h3 { margin: 0; }
/* formulaire court réutilisable [data-lead-form] */
.lead-form { display: grid; gap: 14px; }
.lead-form__row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .lead-form__row { grid-template-columns: 1fr; } }
.lead-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.lead-panel {
position: relative; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-xl);
background: linear-gradient(180deg, rgba(22, 42, 94, .7), rgba(10, 22, 51, .78));
border: 1px solid rgba(173, 196, 255, .18); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .65);
}
/* ==========================================================================
15. ALERTES .alert--info | --ok | --warn | --danger
========================================================================== */
.alert {
--al: var(--blue-600); --al-bg: #eef3ff;
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
padding: 14px 16px; border-radius: var(--r-md); background: var(--al-bg); border: 1px solid color-mix(in srgb, var(--al) 26%, transparent);
border-left: 4px solid var(--al); color: var(--ink-900); font-size: .95rem; line-height: 1.5;
}
.alert > svg { width: 20px; height: 20px; color: var(--al); margin-top: 1px; }
.alert strong { display: block; margin-bottom: 2px; }
.alert p { margin: 0; color: var(--ink-700); }
.alert--ok { --al: var(--green-700); --al-bg: #ecf9f0; }
.alert--warn { --al: var(--orange-700); --al-bg: #fff4ec; }
.alert--danger { --al: var(--red-700); --al-bg: #fdeeee; }
.section--dark .alert, .theme-dark .alert { --al-bg: rgba(255, 255, 255, .05); color: var(--fg); }
.section--dark .alert p, .theme-dark .alert p { color: var(--fg-muted); }
.section--dark .alert--info, .theme-dark .alert--info { --al: var(--cyan-300); }
.section--dark .alert--warn, .theme-dark .alert--warn { --al: var(--orange-400); }
/* ==========================================================================
16. JAUGE DE SCORE A-F (rendue par QTools.gauge(el, score) ou en HTML statique)
========================================================================== */
.gauge { --score: 0; --g: var(--cyan-500); --size: 132px; position: relative; width: var(--size); height: var(--size); flex: none; }
.gauge__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge__track { fill: none; stroke: var(--border); stroke-width: 10; }
.gauge__value {
fill: none; stroke: var(--g); stroke-width: 10; stroke-linecap: round;
stroke-dasharray: 314.16; stroke-dashoffset: calc(314.16 - 314.16 * var(--score) / 100);
transition: stroke-dashoffset 1.2s var(--ease-out), stroke .3s;
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--g) 55%, transparent));
}
.gauge__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.gauge__grade { font-size: calc(var(--size) * .36); font-weight: 800; letter-spacing: -.04em; color: var(--g); }
.gauge__score { margin-top: 6px; font-size: calc(var(--size) * .095); font-weight: 700; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.gauge--sm { --size: 96px; }
.gauge--lg { --size: 176px; }
.gauge--a { --g: #16a34a; } .gauge--b { --g: #0d9488; } .gauge--c { --g: #0284c7; }
.gauge--d { --g: #d97706; } .gauge--e { --g: #dc5e09; } .gauge--f { --g: #dc2626; }
.section--dark .gauge--a, .theme-dark .gauge--a { --g: #4ade80; }
.section--dark .gauge--b, .theme-dark .gauge--b { --g: #2dd4bf; }
.section--dark .gauge--c, .theme-dark .gauge--c { --g: #38bdf8; }
.section--dark .gauge--d, .theme-dark .gauge--d { --g: #fbbf24; }
.section--dark .gauge--e, .theme-dark .gauge--e { --g: #fb923c; }
.section--dark .gauge--f, .theme-dark .gauge--f { --g: #f87171; }
.section--dark .gauge__track, .theme-dark .gauge__track { stroke: rgba(173, 196, 255, .12); }
/* échelle A-F sous la jauge */
.grade-scale { display: flex; gap: 4px; font-size: .74rem; font-weight: 800; }
.grade-scale span { flex: 1; text-align: center; padding: 3px 0; border-radius: 4px; background: var(--surface-2); color: var(--fg-subtle); border: 1px solid var(--border); }
.grade-scale span.is-current { color: #fff; background: var(--g, var(--blue-600)); border-color: transparent; }
/* résultat de contrôle (ligne de rapport) */
.check-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--border); }
.check-row:last-child { border-bottom: 0; }
.check-row__icon { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: #fff; }
.check-row--pass .check-row__icon { background: var(--green-700); }
.check-row--warn .check-row__icon { background: var(--orange-600); }
.check-row--fail .check-row__icon { background: var(--red-700); }
.check-row--info .check-row__icon { background: var(--cyan-700); }
.check-row__title { font-weight: 700; }
.check-row__detail { font-size: .9rem; color: var(--fg-muted); margin-top: 2px; overflow-wrap: anywhere; }
/* ==========================================================================
17. BARRES DE PROGRESSION
La barre se remplit quand un parent .reveal reçoit .in (ou immédiatement si .is-static).
========================================================================== */
.progress { --v: 0; --c: var(--cyan-500); position: relative; height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.progress > span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue-600), var(--c)); transition: width 1.4s var(--ease-out); }
.in .progress > span, .progress.is-static > span, .is-active .progress > span { width: calc(var(--v) * 1%); }
.progress--signal { --c: var(--orange-600); }
.progress--thin { height: 5px; }
.progress-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; font-size: .86rem; }
.progress-row .progress { grid-column: 1 / -1; }
.progress-row b { font-variant-numeric: tabular-nums; }
/* ==========================================================================
18. FENÊTRES D'APPLICATION (aperçus d'interface en HTML/CSS)
Toujours accompagnées d'une légende honnête (.app-caption).
========================================================================== */
.app-stage { position: relative; }
.app-stage::before {
content: ""; position: absolute; inset: 6% 4% -4%; z-index: 0; border-radius: 40px; pointer-events: none;
background: radial-gradient(60% 60% at 30% 30%, rgba(29, 78, 216, .35), transparent 70%), radial-gradient(50% 50% at 75% 70%, rgba(14, 165, 233, .28), transparent 70%);
filter: blur(40px);
}
.app-window {
position: relative; z-index: 1; overflow: hidden; border-radius: 14px;
background: #0b1631; color: #dfe6f5; border: 1px solid rgba(173, 196, 255, .16);
box-shadow: 0 50px 120px -40px rgba(4, 10, 30, .75), 0 0 0 1px rgba(0, 0, 0, .25);
font-size: 13px; line-height: 1.45;
--app-fg: #dfe6f5; --app-muted: #8a9bc0; --app-line: rgba(173, 196, 255, .1); --app-panel: rgba(255, 255, 255, .035);
}
.app-window__bar { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 14px; background: #0e1b3b; border-bottom: 1px solid var(--app-line); }
.app-window__dots { display: flex; gap: 7px; }
.app-window__dots i { width: 11px; height: 11px; border-radius: 50%; background: #2a3a63; }
.app-window__url { flex: 1; min-width: 0; max-width: 440px; margin: 0 auto; display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: 7px; background: rgba(255, 255, 255, .05); color: var(--app-muted); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-window__url svg { width: 12px; height: 12px; flex: none; color: #4ade80; }
.app-window__tag { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a9bc0; white-space: nowrap; }
.app-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); min-height: 470px; }
.app-side { padding: 14px 10px; border-right: 1px solid var(--app-line); background: rgba(3, 9, 26, .35); }
.app-side__brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 14px; font-weight: 800; color: #fff; font-size: 13px; letter-spacing: -.01em; }
.app-side__brand img { width: 22px; height: 22px; }
.app-side__org { margin: 0 4px 12px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid var(--app-line); font-size: 11.5px; color: var(--app-muted); }
.app-side__org b { display: block; color: #fff; font-size: 12px; }
.app-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.app-nav li { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 7px; color: var(--app-muted); font-weight: 600; font-size: 12.5px; }
.app-nav li svg { width: 15px; height: 15px; flex: none; }
.app-nav li.is-on { background: rgba(29, 78, 216, .28); color: #fff; box-shadow: inset 2px 0 0 var(--cyan-500); }
.app-nav li .app-count { margin-left: auto; font-size: 10.5px; padding: 0 6px; border-radius: 99px; background: rgba(220, 94, 9, .2); color: var(--orange-400); font-weight: 800; }
.app-main { padding: 18px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.app-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.app-head h4 { margin: 0; color: #fff; font-size: 16px; letter-spacing: -.015em; }
.app-head p { margin: 2px 0 0; color: var(--app-muted); font-size: 12px; }
.app-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 7px; font-size: 11.5px; font-weight: 700; background: var(--blue-600); color: #fff; border: 0; pointer-events: none; }
.app-btn--ghost { background: rgba(255, 255, 255, .06); color: #dfe6f5; border: 1px solid var(--app-line); }
.app-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.app-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-kpi { padding: 12px; border-radius: 10px; background: var(--app-panel); border: 1px solid var(--app-line); min-width: 0; }
.app-kpi__label { font-size: 11px; color: var(--app-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-kpi__value { margin-top: 4px; font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.app-kpi__value small { font-size: 12px; color: var(--app-muted); font-weight: 700; letter-spacing: 0; }
.app-kpi__delta { margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--cyan-300); }
.app-kpi__delta--signal { color: var(--orange-400); }
.app-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.app-panel { padding: 14px; border-radius: 10px; background: var(--app-panel); border: 1px solid var(--app-line); min-width: 0; }
.app-panel__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 800; color: #fff; letter-spacing: .01em; }
.app-panel__title span { font-weight: 600; color: var(--app-muted); font-size: 11px; }
.app-panel__title .app-panel__name { color: #fff; font-weight: 800; font-size: 12px; }
.app-window .progress { background: rgba(255, 255, 255, .06); border-color: transparent; height: 6px; }
.app-window .progress-row { font-size: 12px; color: #c8d3ea; }
.app-window .progress-row b { color: #fff; }
.app-list { list-style: none; margin: 0; padding: 0; display: grid; }
.app-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--app-line); font-size: 12px; }
.app-list li:last-child { border-bottom: 0; }
.app-list .t { color: #e6ecf8; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-list .s { display: block; color: var(--app-muted); font-size: 11px; font-weight: 500; }
.app-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.app-table th { text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--app-muted); font-weight: 800; padding: 8px 10px; border-bottom: 1px solid var(--app-line); white-space: nowrap; }
.app-table td { padding: 9px 10px; border-bottom: 1px solid var(--app-line); color: #dfe6f5; white-space: nowrap; }
.app-table tr:last-child td { border-bottom: 0; }
.app-table .mono { font-family: var(--mono); font-size: 11.5px; color: #fff; }
.app-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.app-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.app-tag--ok { color: #4ade80; background: rgba(74, 222, 128, .1); }
.app-tag--info { color: var(--cyan-300); background: rgba(14, 165, 233, .12); }
.app-tag--warn { color: var(--amber-300); background: rgba(252, 211, 77, .1); }
.app-tag--high { color: var(--orange-400); background: rgba(220, 94, 9, .16); }
.app-tag--crit { color: var(--red-300); background: rgba(239, 68, 68, .14); }
.app-tag--muted { color: #a9b6d3; background: rgba(169, 182, 211, .1); }
/* matrice des risques 5x5 */
.heatmap { display: grid; grid-template-columns: 16px repeat(5, minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.heatmap__axis { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9.5px; color: var(--app-muted); text-align: center; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; grid-row: span 5; }
.heatmap__cell { aspect-ratio: 2.1; border-radius: 5px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.heatmap__x { grid-column: 2 / -1; text-align: center; font-size: 9.5px; color: var(--app-muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin-top: 2px; }
.h1c { background: rgba(14, 165, 233, .16); box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .14); } .h2c { background: rgba(14, 165, 233, .5); }
.h3c { background: #f2b51c; color: #241a00; text-shadow: none; } .h4c { background: var(--orange-600); } .h5c { background: #dc2626; }
/* Matrice : cyan (faible) → cyan franc → ambre → orange de signalisation → rouge, comme les étiquettes warn / high / crit. */
.heatmap__legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 10px; font-weight: 700; color: var(--app-muted); letter-spacing: .02em; }
.heatmap__legend i { width: 18px; height: 8px; border-radius: 2px; flex: none; }
.heatmap__legend span:first-child { margin-right: 4px; } .heatmap__legend span:last-child { margin-left: 4px; }
/* anneau de score dans les aperçus */
.ring { --v: 0; --c: var(--cyan-500); position: relative; width: 84px; height: 84px; border-radius: 50%; flex: none;
background: conic-gradient(var(--c) calc(var(--v) * 1%), rgba(255, 255, 255, .07) 0); display: grid; place-items: center; }
.ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #0f1d40; }
.ring b { position: relative; font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.ring-row { display: flex; gap: 14px; align-items: center; }
/* barre empilée */
.stackbar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.stackbar span { height: 100%; width: 0; transition: width 1.2s var(--ease-out); }
.is-active .stackbar span, .in .stackbar span { width: var(--w); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 11.5px; color: #c8d3ea; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
/* courbe sparkline */
.spark { width: 100%; height: 64px; }
.spark path.line { fill: none; stroke: var(--cyan-500); stroke-width: 2; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2s var(--ease-out); }
.spark path.area { fill: url(#sparkFill); opacity: 0; transition: opacity 1s .6s; }
.is-active .spark path.line { stroke-dashoffset: 0; }
.is-active .spark path.area { opacity: 1; }
/* ligne de balayage « live » */
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #4ade80; }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse-live 1.8s infinite; }
@keyframes pulse-live { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); } 70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
.app-caption { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; font-size: .86rem; color: var(--fg-muted); }
.app-caption svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--data); }
@media (max-width: 1024px) {
.app-body { grid-template-columns: minmax(0, 1fr); }
.app-side { display: none; }
}
@media (max-width: 760px) {
.app-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-grid { grid-template-columns: minmax(0, 1fr); }
.app-window__tag { display: none; }
.app-body { min-height: 0; }
.app-main { padding: 12px; }
.app-scroll { overflow-x: auto; margin-inline: -2px; }
}
@media (max-width: 420px) {
.app-kpis--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-kpis--3 > :last-child { grid-column: 1 / -1; }
.app-window__url { font-size: 10.5px; }
}
/* ==========================================================================
19. GABARIT DE PAGE OUTIL (.tool-*)
Voir /outils/_modele.html
========================================================================== */
.tool-hero { padding-bottom: clamp(40px, 5vw, 64px); }
.tool-hero h1 { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.4rem); max-width: 20ch; margin: 14px 0 16px; }
.tool-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tool-badge {
display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill);
background: rgba(255, 255, 255, .06); border: 1px solid rgba(173, 196, 255, .2); color: #d6dff2; font-size: .84rem; font-weight: 700;
}
.tool-badge svg { width: 15px; height: 15px; color: var(--cyan-300); }
.tool-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 3vw, 40px); align-items: start; }
/* Piste explicite minmax(0, 1fr) : un contenu insécable (empreinte, URL, base64) ne peut plus élargir la colonne. */
.tool-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); min-width: 0; }
.tool-main > * { min-width: 0; }
.tool-aside { display: grid; gap: var(--s-4); position: sticky; top: calc(var(--header-h) + 20px); }
@media (max-width: 980px) { .tool-layout { grid-template-columns: minmax(0, 1fr); } .tool-aside { position: static; } }
.tool-panel { padding: clamp(20px, 2.6vw, 32px); border-radius: var(--r-xl); background: var(--white); border: 1px solid var(--border); box-shadow: var(--sh-2); }
.tool-panel__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.tool-panel__title h2 { margin: 0; font-size: 1.3rem; letter-spacing: -.02em; }
.tool-results { padding: clamp(20px, 2.6vw, 32px); border-radius: var(--r-xl); background: var(--white); border: 1px solid var(--border); box-shadow: var(--sh-1); }
.tool-results[aria-busy="true"] { opacity: .65; }
.tool-results__head { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.tool-results__summary { flex: 1; min-width: 220px; }
.tool-results__summary h2 { font-size: 1.35rem; margin: 0 0 6px; }
.tool-results__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tool-empty { display: grid; place-items: center; text-align: center; gap: 8px; padding: 40px 16px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); color: var(--fg-subtle); }
.tool-box { padding: 20px; border-radius: var(--r-lg); background: var(--paper-50); border: 1px solid var(--border); }
.tool-box h3 { font-size: 1.02rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.tool-box h3 svg { width: 18px; height: 18px; color: var(--cyan-700); }
.tool-box p, .tool-box li { font-size: .92rem; color: var(--fg-muted); }
.tool-box ul { margin: 0; padding-left: 1.1em; }
.tool-box li { margin: .3em 0; }
.tool-pro { position: relative; overflow: hidden; padding: 22px; border-radius: var(--r-lg); background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); color: #fff; border: 1px solid rgba(173, 196, 255, .16); }
.tool-pro::before { content: ""; position: absolute; width: 260px; height: 260px; right: -110px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(14, 165, 233, .35), transparent 70%); pointer-events: none; }
.tool-pro > * { position: relative; }
.tool-pro h3 { color: #fff; font-size: 1.1rem; margin: 10px 0 8px; }
.tool-pro p { color: #b9c6e2; font-size: .92rem; }
.tool-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.print-only { display: none; }
/* ==========================================================================
20. PIED DE PAGE
========================================================================== */
.site-footer { position: relative; overflow: hidden; background: var(--navy-950); color: #aab7d4; padding: clamp(56px, 6vw, 88px) 0 28px; border-top: 1px solid rgba(173, 196, 255, .1); font-size: .94rem; }
.site-footer::before { content: ""; position: absolute; left: 50%; top: -260px; width: 900px; height: 420px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(29, 78, 216, .2), transparent); pointer-events: none; }
.site-footer > .container { position: relative; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-brand img { height: 42px; width: auto; }
.footer-brand p { margin: 18px 0 18px; max-width: 34ch; line-height: 1.6; }
.footer-contact { display: grid; gap: 8px; }
.footer-contact a, .footer-contact span { display: inline-flex; align-items: center; gap: 9px; color: #dfe6f5; text-decoration: none; font-weight: 600; }
.footer-contact a:hover { color: #fff; text-decoration: underline; }
.footer-contact svg { width: 16px; height: 16px; color: var(--cyan-300); flex: none; }
.footer-col h2 { font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 6px 0 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: #aab7d4; text-decoration: none; transition: color var(--t-fast); }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-privacy { display: flex; align-items: flex-start; gap: 12px; margin-top: 44px; padding: 14px 18px; border-radius: var(--r-md); background: rgba(14, 165, 233, .06); border: 1px solid rgba(125, 211, 252, .16); color: #c8d3ea; font-size: .88rem; }
.footer-privacy svg { width: 18px; height: 18px; color: var(--cyan-300); flex: none; margin-top: 2px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(173, 196, 255, .1); font-size: .85rem; color: #8496bc; }
.footer-bottom .sig { font-weight: 800; letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; color: #8496bc; }
.footer-social { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid rgba(173, 196, 255, .18); color: #dfe6f5; }
.footer-social:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.footer-social svg { width: 16px; height: 16px; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; } }
/* ==========================================================================
21. EN-TÊTE DE PAGE, FIL D'ARIANE, 404
========================================================================== */
.breadcrumb { font-size: .86rem; color: #93a4c8; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "/"; color: #5c6f98; }
.breadcrumb a { color: #c9d4ec; text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #fff; font-weight: 600; }
.page-404 { min-height: calc(100vh - var(--header-h)); display: grid; align-items: center; }
.page-404 .code404 { font-size: clamp(5rem, 3rem + 10vw, 10rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; }
/* ==========================================================================
22. UTILITAIRES
========================================================================== */
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.center { text-align: center; }
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-3 { gap: var(--s-3); } .wrap { flex-wrap: wrap; }
.w-full { width: 100%; }
.nowrap { white-space: nowrap; }
.divider-glow { height: 1px; background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .45), transparent); border: 0; margin: 0; }
/* Parcours Gratuit → Abonnement → On-premise */
.journey { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.journey__line { position: absolute; top: 33px; left: 16%; right: 16%; height: 2px; background: linear-gradient(90deg, var(--cyan-500), var(--blue-600), var(--navy-700)); opacity: .35; border-radius: 2px; }
.journey__line::after { content: ""; position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan-500); box-shadow: 0 0 14px var(--cyan-500); animation: travel 6s var(--ease) infinite; }
@keyframes travel { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.journey__step { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: var(--r-xl); background: var(--white); border: 1px solid var(--border); box-shadow: var(--sh-1); }
.journey__step--featured { border-color: rgba(29, 78, 216, .35); box-shadow: 0 0 0 1px rgba(29, 78, 216, .12), var(--sh-3); }
.journey__num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-weight: 800; font-size: 1.05rem; color: #fff; background: linear-gradient(140deg, var(--blue-600), var(--cyan-500)); box-shadow: 0 10px 24px -8px rgba(29, 78, 216, .6); }
.journey__step--featured .journey__num { background: linear-gradient(140deg, var(--navy-800), var(--blue-600)); }
.journey__price { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink-900); }
.journey__for { font-size: .88rem; color: var(--fg-subtle); min-height: 3em; }
@media (max-width: 900px) { .journey__for { min-height: 0; } }
.journey__limits { margin: 0; font-size: .85rem; color: var(--fg-subtle); padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.journey__step .btn { margin-top: auto; }
@media (max-width: 900px) { .journey { grid-template-columns: minmax(0, 1fr); } .journey__line { display: none; } }
/* « Pourquoi Qorsec » */
.why { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.why__sticky { position: sticky; top: calc(var(--header-h) + 40px); }
.why__facts { list-style: none; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(173, 196, 255, .14); display: grid; gap: 16px; }
.why__facts li { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.why__facts b { white-space: nowrap; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--cyan-300); line-height: 1.2; }
.why__facts span { color: var(--fg-muted); font-size: .95rem; }
.why__list { display: grid; gap: 14px; }
.why__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.why__item h3 { margin: 2px 0 6px; font-size: 1.18rem; }
.why__item p { margin: 0; color: var(--fg-muted); font-size: .98rem; }
.why__code { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(2, 8, 24, .55); border: 1px solid var(--border); font-family: var(--mono); font-size: .8rem; color: var(--cyan-300); overflow-x: auto; white-space: nowrap; }
.why__code .k { color: #c4b5fd; } .why__code .c { color: #64748b; }
@media (max-width: 900px) { .why { grid-template-columns: minmax(0, 1fr); } .why__sticky { position: static; } .why__facts { margin-top: 28px; } }
@media (max-width: 420px) { .why__facts li { grid-template-columns: 128px minmax(0, 1fr); gap: 10px; } .why__facts b { font-size: 1.2rem; } }
/* Appel à l'action final */
.cta-final { position: relative; overflow: hidden; isolation: isolate; }
.cta-final__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 60% at 15% 20%, rgba(29, 78, 216, .45), transparent 70%), radial-gradient(40% 50% at 90% 80%, rgba(14, 165, 233, .25), transparent 70%); }
/* ==========================================================================
22 bis. MOBILE : CIBLES TACTILES ≥ 44 PX, FIL D'ARIANE, HÉROS D'OUTIL COMPACT
La zone cliquable grandit (hauteur minimale, marges négatives quand il faut garder la mise en page),
le texte garde sa taille.
========================================================================== */
@media (pointer: coarse), (max-width: 760px) {
.lang-switch button { height: 44px; min-width: 44px; }
.btn--sm { min-height: 44px; }
.tabs__tab { min-height: 44px; }
.link-arrow { min-height: 44px; }
.breadcrumb a, .breadcrumb [aria-current="page"] { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
.footer-col ul { gap: 0; }
.footer-col a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 5px; } /* un lien sur 2 lignes garde un écart avec le suivant */
.footer-col li > span { display: block; padding-block: 10px; }
.footer-contact { gap: 0; }
.footer-contact a, .footer-contact > span { min-height: 44px; }
.check { min-height: 44px; align-items: center; }
.check input { margin-top: 0; }
summary { min-height: 44px; }
.accordion summary { min-height: 52px; }
}
/* Fil d'Ariane : le séparateur termine l'élément précédent (plus de « / » seul en début de ligne). */
.breadcrumb li + li::before { content: none; }
.breadcrumb li:not(:last-child)::after { content: "/"; color: #5c6f98; }
@media (max-width: 640px) {
.tool-hero { padding-bottom: 32px; }
.tool-hero h1 { margin: 12px 0 12px; }
.tool-hero .lead { font-size: 1rem; line-height: 1.55; }
.js .tool-hero .lead.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.tool-badges { gap: 6px; margin-top: 12px; }
.tool-badge { padding: 4px 10px; gap: 6px; font-size: .8rem; }
.tool-badge svg { width: 13px; height: 13px; }
}
.lead-more, .lead-more[hidden] { display: none; }
@media (max-width: 640px) {
.lead-more:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; margin: -4px 0 -6px; padding: 0; border: 0; background: none; color: var(--cyan-300); font: inherit; font-size: .95rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lead-more:not([hidden]):hover { color: #fff; }
}
/* ==========================================================================
23. APPARITION AU DÉFILEMENT ET ANIMATIONS
.reveal apparaît au défilement (site.js ajoute .in)
style="--d:2" décalage (x 80 ms) pour un effet en cascade
html.js est posé par site.js : sans JavaScript tout reste visible.
========================================================================== */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal--scale { transform: translateY(24px) scale(.98); }
.js .reveal--scale.in { transform: none; }
/* ==========================================================================
24. PREFERS-REDUCED-MOTION : tout mouvement décoratif est coupé
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
.hero__mesh span, .marquee__track, .text-grad, .journey__line::after, .status--available::before, .live-dot::before { animation: none !important; }
.marquee__track { flex-wrap: wrap; width: auto; justify-content: center; transform: none !important; }
.marquee__list[aria-hidden="true"] { display: none; }
.marquee__list { flex-wrap: wrap; justify-content: center; padding-inline: var(--gutter); }
.marquee__viewport { -webkit-mask-image: none; mask-image: none; }
.js .reveal { opacity: 1; transform: none; }
.scan-list li { opacity: 1; transform: none; }
}
/* ==========================================================================
25. IMPRESSION (rapports des outils : window.print() / QTools.printReport())
========================================================================== */
@media print {
@page { margin: 16mm 14mm; }
:root { --fg: #000; --fg-muted: #333; --border: #ccc; }
html, body { background: #fff !important; color: #000 !important; font-size: 11pt; }
.site-header, .site-footer, .mobile-menu, .skip-link, .hero__mesh, .hero__lattice, .hero__grain,
.no-print, .tool-aside, .tool-pro, .lead-form, .lead-panel, .btn, .tabs__list, .marquee, .cta-final,
.domain-form, .tool-panel form, [data-print="hide"] { display: none !important; }
.print-only { display: block !important; }
.hero, .section, .section--dark, .theme-dark { background: #fff !important; color: #000 !important; padding: 0 !important; margin: 0 !important; }
.hero::after, .section--grid::before, .grain::after { display: none !important; }
.hero h1, .tool-hero h1, h1, h2, h3, h4 { color: #000 !important; }
.hero .lead, .lead { color: #333 !important; }
.tool-badge, .breadcrumb, .lead-more { display: none !important; }
/* Le rapport commence en page 1 : héros de l'outil masqué (l'en-tête imprimé .print-header porte le titre),
ainsi que les panneaux de saisie (formulaire déjà masqué : il n'en resterait qu'un titre vide). */
.tool-hero { display: none !important; }
.tool-main > .tool-panel:not(.tool-results):not(:has(.tool-results)) { display: none !important; }
/* Seul le rapport s'imprime : les sections d'explication de la page (méthode, FAQ, sources, outils liés) restent à l'écran. */
main:has(.tool-results) > section:not(:has(.tool-results)) { display: none !important; }
.tool-layout { display: block; }
.tool-panel { box-shadow: none !important; border: 1px solid #bbb !important; break-inside: avoid; }
/* Un rapport peut dépasser une page : il ne doit pas être repoussé en entier sur la page suivante. */
.tool-results { box-shadow: none !important; border: 1px solid #bbb !important; break-inside: auto; }
.card, .check-row, .table tr, .alert { break-inside: avoid; }
.tool-results h2, .tool-results h3, .tool-results h4 { break-after: avoid; }
.table-wrap { overflow: visible; border-color: #bbb; }
.js .reveal { opacity: 1 !important; transform: none !important; }
a { color: #000; text-decoration: underline; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; overflow-wrap: anywhere; }
.print-header { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 10px; margin-bottom: 16px; border-bottom: 2px solid #10214b; }
.print-header img { height: 34px; width: auto; }
.print-footer { display: block !important; margin-top: 18px; padding-top: 8px; border-top: 1px solid #bbb; font-size: 8.5pt; color: #555; }
.gauge__value { filter: none; }
}