/* ═══════════════════════════════════════════════════════════════ FirstSI — site promotionnel Habillage aligné sur l'application : accent vert émeraude, DM Sans + JetBrains Mono, cartes translucides. Deux thèmes : sombre (défaut, marque) et clair (préférence système ou bascule manuelle via data-theme sur ). Les panneaux console restent sombres dans les deux thèmes : c'est l'élément signature. ═══════════════════════════════════════════════════════════════ */ :root { /* ── thème sombre (défaut) ── */ --fond: #0F172A; /* fond général (slate-900, comme l'appli) */ --fond-2: #0A101F; /* sections denses / footer (slate-950) */ --encre: #F8FAFC; /* titres */ --texte: #E2E8F0; /* texte courant */ --encre-2: #94A3B8; /* texte secondaire (slate-400) */ --texte-liste: #CBD5E1; --vert: #22C55E; /* accent de marque (green-500) */ --vert-clair: #4ADE80; /* accent lisible sur le fond courant */ --vert-fonce: #16A34A; --ambre: #FBBF24; --grad-accent: linear-gradient(135deg, #22C55E 0%, #10B981 50%, #14B8A6 100%); --carte: rgba(30, 41, 59, 0.5); --carte-bord: rgba(51, 65, 85, 0.55); --carte-hover: rgba(30, 41, 59, 0.7); --nav-fond: rgba(15, 23, 42, 0.85); --bord: rgba(51, 65, 85, 0.5); --bord-leger: rgba(51, 65, 85, 0.35); --bord-btn: rgba(148, 163, 184, 0.3); --bande: rgba(10, 16, 31, 0.6); --fond-alt: rgba(10, 16, 31, 0.55); --fleche: rgba(148, 163, 184, 0.35); --ombre-carte: 0 20px 40px -12px rgba(0, 0, 0, 0.4); --ombre-console: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 48px rgba(34, 197, 94, 0.06); --invert-fond: #FFFFFF; --invert-texte: #0A101F; --invert-hover: #E2E8F0; --mesh1: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(34, 197, 94, 0.10) 0%, transparent 50%); --mesh2: radial-gradient(ellipse 60% 40% at 80% 10%, rgba(59, 130, 246, 0.07) 0%, transparent 50%); --scroll-track: #1E293B; --scroll-thumb: #475569; --scroll-thumb-h: #64748B; /* ── console : toujours sombre, quel que soit le thème ── */ --console: #0A101F; --console-2: #101B30; --console-bord: #1F2C45; --console-texte: #A9B6D3; --ok: #22C55E; --warn: #F59E0B; --crit: #EF4444; --radius: 14px; --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; } /* ── thème clair automatique (préférence système, sans choix forcé) ── */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --fond: #F1F5F9; --fond-2: #E8EDF3; --encre: #0F172A; --texte: #1E293B; --encre-2: #526078; --texte-liste: #334155; --vert-clair: #15803D; --ambre: #92400E; --grad-accent: linear-gradient(135deg, #16A34A 0%, #059669 50%, #0D9488 100%); --carte: rgba(255, 255, 255, 0.75); --carte-bord: rgba(15, 23, 42, 0.09); --carte-hover: rgba(255, 255, 255, 0.95); --nav-fond: rgba(241, 245, 249, 0.85); --bord: rgba(15, 23, 42, 0.1); --bord-leger: rgba(15, 23, 42, 0.07); --bord-btn: rgba(15, 23, 42, 0.25); --bande: rgba(255, 255, 255, 0.65); --fond-alt: rgba(255, 255, 255, 0.55); --fleche: rgba(15, 23, 42, 0.25); --ombre-carte: 0 20px 40px -12px rgba(15, 23, 42, 0.14); --ombre-console: 0 24px 60px rgba(15, 23, 42, 0.28), 0 0 48px rgba(34, 197, 94, 0.08); --invert-fond: #0F172A; --invert-texte: #F8FAFC; --invert-hover: #1E293B; --mesh1: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(34, 197, 94, 0.12) 0%, transparent 50%); --mesh2: radial-gradient(ellipse 60% 40% at 80% 10%, rgba(59, 130, 246, 0.08) 0%, transparent 50%); --scroll-track: #E2E8F0; --scroll-thumb: #94A3B8; --scroll-thumb-h: #64748B; } } /* ── thème clair forcé par la bascule (doit rester après le bloc média) ── */ :root[data-theme="light"] { --fond: #F1F5F9; --fond-2: #E8EDF3; --encre: #0F172A; --texte: #1E293B; --encre-2: #526078; --texte-liste: #334155; --vert-clair: #15803D; --ambre: #92400E; --grad-accent: linear-gradient(135deg, #16A34A 0%, #059669 50%, #0D9488 100%); --carte: rgba(255, 255, 255, 0.75); --carte-bord: rgba(15, 23, 42, 0.09); --carte-hover: rgba(255, 255, 255, 0.95); --nav-fond: rgba(241, 245, 249, 0.85); --bord: rgba(15, 23, 42, 0.1); --bord-leger: rgba(15, 23, 42, 0.07); --bord-btn: rgba(15, 23, 42, 0.25); --bande: rgba(255, 255, 255, 0.65); --fond-alt: rgba(255, 255, 255, 0.55); --fleche: rgba(15, 23, 42, 0.25); --ombre-carte: 0 20px 40px -12px rgba(15, 23, 42, 0.14); --ombre-console: 0 24px 60px rgba(15, 23, 42, 0.28), 0 0 48px rgba(34, 197, 94, 0.08); --invert-fond: #0F172A; --invert-texte: #F8FAFC; --invert-hover: #1E293B; --mesh1: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(34, 197, 94, 0.12) 0%, transparent 50%); --mesh2: radial-gradient(ellipse 60% 40% at 80% 10%, rgba(59, 130, 246, 0.08) 0%, transparent 50%); --scroll-track: #E2E8F0; --scroll-thumb: #94A3B8; --scroll-thumb-h: #64748B; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--fond); } body { font-family: var(--font-sans); background-image: var(--mesh1), var(--mesh2); background-color: var(--fond); color: var(--texte); line-height: 1.6; -webkit-font-smoothing: antialiased; } ::selection { background: rgba(34, 197, 94, 0.35); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scroll-track); } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-h); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; border-radius: 4px; } /* ───────────────────────────── Typographie commune */ .eyebrow { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vert-clair); margin-bottom: 1rem; } .section-title { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: var(--encre); margin-bottom: 1rem; } .section-sub { color: var(--encre-2); font-size: 1.06rem; max-width: 42rem; margin-bottom: 3rem; } /* ───────────────────────────── Boutons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; padding: 0.65rem 1.25rem; border-radius: 10px; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%); color: #fff; box-shadow: 0 4px 14px -3px rgba(34, 197, 94, 0.4); } .btn-primary:hover { background: linear-gradient(135deg, #16A34A 0%, #15803D 100%); box-shadow: 0 8px 20px -4px rgba(34, 197, 94, 0.5); } .btn-outline { border-color: var(--bord-btn); color: var(--texte); background: transparent; } .btn-outline:hover { border-color: var(--encre); } .btn-ghost { color: var(--encre-2); } .btn-ghost:hover { color: var(--encre); } .btn-invert { background: var(--invert-fond); color: var(--invert-texte); } .btn-invert:hover { background: var(--invert-hover); } .btn-lg { padding: 0.85rem 1.7rem; font-size: 1.02rem; } .btn-block { width: 100%; } /* ───────────────────────────── Navigation */ .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-fond); backdrop-filter: blur(12px); border-bottom: 1px solid var(--bord); transition: box-shadow 0.25s ease, background 0.25s ease; } /* Des que la page defile, la barre se detache : elle cesse d'etre un titre pour devenir une barre d'outils. */ .nav.scrolled { box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.45); } .nav.scrolled .nav-inner { padding-top: 0.55rem; padding-bottom: 0.55rem; } .nav-inner { transition: padding 0.25s ease; } .nav-inner { max-width: 1180px; margin: 0 auto; padding: 0.8rem 1.5rem; display: flex; align-items: center; gap: 2rem; } .brand { display: flex; align-items: center; gap: 0.6rem; } .brand-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--encre); } .brand-name em { font-style: normal; color: var(--vert); } .nav-links { display: flex; gap: 1.6rem; margin-left: auto; } .nav-links a { font-size: 0.93rem; font-weight: 500; color: var(--encre-2); transition: color 0.15s ease; } .nav-links a:hover { color: var(--encre); } .nav-actions { display: flex; align-items: center; gap: 0.5rem; } .lang-switch { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: var(--encre-2); border: 1px solid var(--bord-btn); border-radius: 6px; padding: 0.32rem 0.6rem; margin-left: 0.4rem; transition: color 0.15s ease, border-color 0.15s ease; } .lang-switch:hover { color: var(--encre); border-color: var(--texte); } /* bascule clair/sombre */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; background: none; border: 1px solid var(--bord-btn); border-radius: 6px; color: var(--encre-2); cursor: pointer; margin-left: 0.4rem; transition: color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { color: var(--encre); border-color: var(--texte); } .theme-toggle svg { width: 16px; height: 16px; } /* icône affichée = thème vers lequel on bascule. Sombre (défaut) → on propose le soleil. */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; } :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; } } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } .nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; margin-left: auto; } .nav-burger span { width: 22px; height: 2px; background: var(--texte); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ───────────────────────────── Hero */ .hero { padding: 4.5rem 1.5rem 5rem; } .hero-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5rem; align-items: center; } .hero-title { font-size: clamp(2.5rem, 5.5vw, 4rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--encre); margin-bottom: 1.4rem; } .hero-title .accent { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--vert); } .hero-sub { font-size: 1.12rem; color: var(--encre-2); max-width: 34rem; margin-bottom: 2rem; } .hero-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; } .hero-note { font-family: var(--font-mono); font-size: 0.78rem; color: var(--encre-2); } /* ───────────────────────────── Console (élément signature, toujours sombre) */ .console { background: var(--console); border: 1px solid var(--console-bord); border-radius: var(--radius); box-shadow: var(--ombre-console); overflow: hidden; font-family: var(--font-mono); color: var(--console-texte); } .console-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; background: var(--console-2); border-bottom: 1px solid var(--console-bord); font-size: 0.75rem; } .console-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .console-dot { transition: background 0.3s ease, box-shadow 0.3s ease; } .console-dot.ok { background: var(--ok); box-shadow: 0 0 8px rgba(34, 197, 94, 0.8); } .console-dot.warn { background: var(--warn); box-shadow: 0 0 8px rgba(245, 158, 11, 0.85); } /* seul l'etat critique bat : l'alerte doit se distinguer du reste */ .console-dot.crit { background: var(--crit); box-shadow: 0 0 8px rgba(239, 68, 68, 0.9); animation: dot-bat 1.1s ease-in-out infinite; } @keyframes dot-bat { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .console-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .console-time { margin-left: auto; color: #5E6C8C; } .console-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--console-bord); border-bottom: 1px solid var(--console-bord); } .tile { background: var(--console); padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; } .tile-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; color: #5E6C8C; } .tile-value { font-size: 1.3rem; font-weight: 600; color: #E8EDF7; } .tile-value.ok { color: var(--ok); } .tile-value.warn { color: var(--warn); } .tile-unit { font-size: 0.8rem; color: #5E6C8C; font-weight: 400; } .tile-hint { font-size: 0.66rem; color: #5E6C8C; } .console-graph { position: relative; border-bottom: 1px solid var(--console-bord); } .console-graph svg { width: 100%; height: 96px; } /* La courbe monte jusqu'en haut du cadre : sans fond, le libelle passait derriere l'aplat vert et devenait illisible. */ .graph-label { position: absolute; top: 8px; left: 12px; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em; color: #8B99B8; background: rgba(10, 16, 31, 0.78); padding: 0.15rem 0.4rem; border-radius: 4px; } .console-feed { height: 168px; overflow: hidden; padding: 0.6rem 1rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.32rem; font-size: 0.74rem; line-height: 1.45; } .feed-line { display: flex; gap: 0.55rem; align-items: baseline; white-space: nowrap; overflow: hidden; animation: feed-in 0.35s ease; } .feed-line .t { color: #5E6C8C; flex-shrink: 0; } .feed-line .msg { overflow: hidden; text-overflow: ellipsis; } @keyframes feed-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* étiquettes des événements : uniquement dans les consoles (fond sombre) */ .tag { display: inline-block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; padding: 0.08rem 0.42rem; border-radius: 4px; background: rgba(96, 165, 250, 0.16); color: #93C5FD; flex-shrink: 0; } .tag.ok { background: rgba(34, 197, 94, 0.14); color: #4ADE80; } .tag.warn { background: rgba(245, 158, 11, 0.14); color: #FBBF24; } .tag.crit { background: rgba(239, 68, 68, 0.16); color: #F87171; } /* ───────────────────────────── Bandeau chiffres */ .stats { background: var(--bande); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); padding: 2.6rem 1.5rem; } .stats-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .stat { text-align: center; } .stat-value { display: block; font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -0.02em; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--vert); } .stat-label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); } /* ───────────────────────────── Sections génériques */ .section { padding: 5.5rem 1.5rem; } .section-alt { background: var(--fond-alt); border-top: 1px solid var(--bord-leger); border-bottom: 1px solid var(--bord-leger); } .section-inner { max-width: 1180px; margin: 0 auto; } /* ───────────────────────────── Modules */ /* ───────────────────────────── Explorateur de modules La liste de gauche est un jeu d'onglets ARIA qui pilote la console de droite. Le nombre de modules n'impose aucune valeur à retoucher ici. */ .explorer { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; gap: 1.6rem; align-items: start; } /* ── Piste de defilement : la console reste en place pendant qu'on parcourt les dix modules. Reserve au grand ecran et a la presence de JavaScript ; sans l'un ou l'autre, la piste n'existe pas et l'explorateur se comporte comme un simple jeu d'onglets. Aucun detournement du defilement : la page descend a sa vitesse normale, seule la selection suit la position. */ @media (min-width: 861px) { .js .explorer-track { position: relative; /* une fenetre de maintien + environ un quart d'ecran de course par module */ height: calc(100vh + 10 * 22vh); } /* L'enveloppe collante occupe exactement une fenetre et centre son contenu : le centrage suit la hauteur reelle de l'explorateur et celle de l'ecran, sans qu'aucune valeur ne soit ecrite en dur. La course de la piste vaut alors exactement sa hauteur moins une fenetre, ce que lit le JavaScript. */ .js .explorer-track > .explorer-sticky { position: sticky; top: 0; /* min-height et non height : si le contenu depasse une fenetre (ecran bas, zoom navigateur, police systeme agrandie) la boite grandit au lieu de comprimer ses enfants. Avec une hauteur fixe, flex ecrasait le paragraphe et son overflow:hidden le tronquait a une ligne. */ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } /* Ceinture et bretelles : aucun enfant ne doit etre comprime pour tenir. */ .js .explorer-track > .explorer-sticky > * { flex-shrink: 0; } /* Le sur-titre et le titre restent visibles pendant tout le parcours : on doit savoir ce qu'on regarde jusqu'au dixieme module. L'accroche, elle, est lue a l'arrivee dans la section puis s'efface des les premiers pixels de defilement, rendant sa hauteur a la console. Elle revient si l'on remonte : rien n'est perdu, seulement range. */ .js .explorer-sticky > .section-sub { overflow: hidden; /* large : ce plafond ne sert qu'a rendre le repli animable, il ne doit jamais rogner le texte, meme etroit ou avec une police agrandie. */ max-height: 14rem; opacity: 1; transition: max-height 0.45s ease, opacity 0.28s ease, margin-bottom 0.45s ease; } .js .explorer-sticky.entame > .section-sub { max-height: 0; opacity: 0; margin-bottom: 0; } .js .explorer-sticky > .eyebrow { margin-bottom: 0.7rem; } .js .explorer-sticky > .section-title { margin-bottom: 1.6rem; } /* Ecran bas : centrer ferait passer le haut du bloc sous la barre de navigation. On revient a un alignement haut, degage du bandeau, et le titre se resserre pour laisser la place a la console. */ @media (max-height: 860px) { .js .explorer-track > .explorer-sticky { justify-content: flex-start; padding-top: 4.6rem; } .js .explorer-sticky > .section-title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1.1rem; } .js .explorer-sticky > .eyebrow { margin-bottom: 0.5rem; } } /* Tres bas (portables 13 pouces, fenetre reduite) : le flux d'evenements est ce qui se coupe le mieux — il perd deux lignes, pas son propos. */ @media (max-height: 760px) { .js .explorer-sticky .console-feed { height: 118px; } .js .explorer-sticky .console-graph svg { height: 74px; } .js .explorer-sticky .mod-detail { margin-top: 0.8rem; } } /* Reperes de progression le long de la liste : on voit ou l'on en est dans la serie, et combien il en reste. */ .js .explorer-track .mod-state { position: relative; } .js .explorer-track .mod[data-passe="1"] .mod-state { background: var(--vert-fonce); box-shadow: none; } } @media (prefers-reduced-motion: reduce) { /* pas de piste, pas de collage : la selection redevient uniquement manuelle */ .js .explorer-track { height: auto; } .js .explorer-track > .explorer-sticky { position: static; height: auto; display: block; padding-top: 0; } /* sans piste, l'accroche reste simplement en place */ .js .explorer-sticky > .section-sub { max-height: none; opacity: 1; transition: none; } } .explorer-hint { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--encre-2); margin-bottom: 0.7rem; } .explorer-list { display: flex; flex-direction: column; gap: 0.25rem; } .mod { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.62rem 0.75rem; text-align: left; font: inherit; color: var(--texte); background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .mod:hover { background: var(--carte); border-color: var(--carte-bord); transform: translateX(3px); } .mod:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; } .mod[aria-selected="true"] { background: var(--carte-hover); border-color: rgba(34, 197, 94, 0.45); box-shadow: var(--ombre-carte); transform: translateX(3px); } /* Étiquette de code monospace : préfixe de table dans l'explorateur, mot-clé sur les cartes des pages Sécurité. Même identité visuelle. */ .mod-code, .module-code { font-family: var(--font-mono); font-weight: 600; color: var(--vert-clair); background: rgba(34, 197, 94, 0.12); border-radius: 5px; } .mod-code { font-size: 0.68rem; padding: 0.16rem 0.42rem; flex-shrink: 0; min-width: 3.4rem; text-align: center; } .module-code { display: inline-block; font-size: 0.72rem; padding: 0.18rem 0.5rem; } .mod-name { font-size: 0.94rem; font-weight: 600; color: var(--encre); } /* pastille d'état : le vocabulaire visuel du produit, repris sur le site */ .mod-state { width: 7px; height: 7px; border-radius: 50%; background: var(--fleche); margin-left: auto; flex-shrink: 0; transition: background 0.18s ease, box-shadow 0.18s ease; } .mod[aria-selected="true"] .mod-state { background: var(--vert); box-shadow: 0 0 8px rgba(34, 197, 94, 0.75); } .explorer-panel { min-width: 0; } /* Sans JavaScript, les dix descriptions restent lisibles à la suite ; avec JavaScript, seule celle du module choisi s'affiche. */ .js .mod-detail { display: none; } .js .mod-detail.is-active { display: block; } .mod-detail { margin-top: 1.1rem; padding-left: 0.1rem; } .mod-detail h3 { font-size: 1.1rem; font-weight: 700; color: var(--encre); margin-bottom: 0.4rem; } .mod-detail p { font-size: 0.94rem; color: var(--encre-2); line-height: 1.6; max-width: 62ch; } .mod-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; } .mod-chips span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--texte-liste); background: var(--fond-alt); border: 1px solid var(--bord-leger); border-radius: 999px; padding: 0.22rem 0.66rem; } /* ───────────────────────────── Étapes */ .steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 1.6rem; align-items: start; margin-top: 3rem; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%); color: #fff; font-weight: 700; font-size: 1.05rem; box-shadow: 0 4px 14px -3px rgba(34, 197, 94, 0.4); margin-bottom: 1rem; } .step h3 { font-size: 1.15rem; font-weight: 700; color: var(--encre); margin-bottom: 0.5rem; } .step p { color: var(--encre-2); font-size: 0.95rem; } .step-arrow { color: var(--fleche); align-self: center; padding-top: 0.5rem; } /* Une impulsion parcourt la fleche : les donnees circulent de l'agent vers la console. Un tiret qui se deplace le long du trace, pas un objet en plus. */ .arrow-pulse { stroke: var(--vert); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 5 29; animation: fleche-pulse 2.2s linear infinite; } .step-arrow:nth-of-type(2) .arrow-pulse { animation-delay: 1.1s; } @keyframes fleche-pulse { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } } /* ───────────────────────────── Sécurité */ .security-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: center; } .security-list { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; } .security-list li { position: relative; padding-left: 1.7rem; color: var(--encre-2); font-size: 0.98rem; } .security-list li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: rgba(34, 197, 94, 0.15); border: 2px solid var(--ok); } .security-list strong { color: var(--encre); } .console-small .console-bar { font-size: 0.72rem; } .audit-lines { padding: 1rem 1.1rem 1.2rem; font-size: 0.76rem; display: flex; flex-direction: column; gap: 0.55rem; } .audit-lines p { display: flex; gap: 0.55rem; align-items: baseline; flex-wrap: wrap; } .audit-lines .t { color: #5E6C8C; } /* ───────────────────────────── Tarifs */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3rem; align-items: stretch; } /* Une seule carte : sans largeur maximale, elle s'étire sur toute la grille et le texte part en lignes trop longues. La même largeur que la carte isolée du mode étroit, pour qu'elle garde ses proportions à toutes les tailles. */ .pricing-solo { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } /* Lien secondaire sous le bouton d'une carte : la sortie discrète pour qui ne veut pas de l'action principale. */ .plan-lien { display: block; margin-top: .8rem; text-align: center; font-size: .84rem; font-weight: 500; color: var(--texte-doux, #64748B); text-decoration: none; transition: color .18s ease; } .plan-lien:hover { color: var(--accent, #16A34A); } .plan { position: relative; background: var(--carte); backdrop-filter: blur(12px); border: 1px solid var(--carte-bord); border-radius: var(--radius); padding: 2rem 1.8rem; display: flex; flex-direction: column; } .plan-featured { border: 2px solid var(--vert); box-shadow: 0 20px 44px -12px rgba(34, 197, 94, 0.25); } .plan-badge { position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%); color: #fff; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.9rem; border-radius: 999px; white-space: nowrap; } .plan-name { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--encre-2); margin-bottom: 0.8rem; } .plan-price { margin-bottom: 0.6rem; } .plan-price .amount { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--encre); } .plan-price .per { color: var(--encre-2); font-size: 0.9rem; margin-left: 0.3rem; } /* Quand la ligne de prix porte du texte (« Sans inscription ») et non un montant, 2,2 rem déborde et passe à la ligne. */ .plan-price .amount-texte { font-size: 1.3rem; letter-spacing: 0; } .plan-desc { color: var(--encre-2); font-size: 0.92rem; margin-bottom: 1.4rem; } .plan-features { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.8rem; flex-grow: 1; } .plan-features li { position: relative; padding-left: 1.5rem; font-size: 0.92rem; color: var(--texte-liste); } .plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--vert-clair); font-weight: 700; } /* ───────────────────────────── CTA final */ .final-cta { background: radial-gradient(ellipse 60% 90% at 50% 0%, rgba(34, 197, 94, 0.14) 0%, transparent 60%), var(--fond-2); border-top: 1px solid var(--bord); padding: 5.5rem 1.5rem; text-align: center; color: var(--texte); } .final-inner { max-width: 720px; margin: 0 auto; } .final-cta h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--encre); margin-bottom: 1rem; } .final-cta p { color: var(--encre-2); font-size: 1.05rem; margin-bottom: 2.2rem; } /* ───────────────────────────── Footer */ .footer { background: var(--fond-2); border-top: 1px solid var(--bord); padding: 3.5rem 1.5rem 2rem; } .footer-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; } .footer-brand p { color: var(--encre-2); font-size: 0.9rem; margin-top: 0.7rem; max-width: 20rem; } .footer-col { display: flex; flex-direction: column; gap: 0.55rem; } .footer-col h4 { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--encre-2); margin-bottom: 0.3rem; } .footer-col a { font-size: 0.92rem; color: var(--encre-2); } .footer-col a:hover { color: var(--vert-clair); } .footer-copy { max-width: 1180px; margin: 2.5rem auto 0; padding-top: 1.4rem; border-top: 1px solid var(--bord); font-family: var(--font-mono); font-size: 0.74rem; color: var(--encre-2); } /* ───────────────────────────── Pages internes */ .page { padding: 4.5rem 1.5rem 5.5rem; } .page-inner { max-width: 860px; margin: 0 auto; } .page-title { font-size: clamp(2.1rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; color: var(--encre); margin-bottom: 0.8rem; } .page-updated { font-family: var(--font-mono); font-size: 0.76rem; color: var(--encre-2); margin-bottom: 2.8rem; } .page-intro { font-size: 1.12rem; color: var(--encre-2); margin-bottom: 3rem; max-width: 42rem; } .prose h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.015em; color: var(--encre); margin: 2.8rem 0 0.9rem; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 1.08rem; font-weight: 700; color: var(--encre); margin: 1.8rem 0 0.5rem; } .prose p { color: var(--encre-2); margin-bottom: 1rem; } .prose ul { list-style: none; margin: 0 0 1.2rem; display: flex; flex-direction: column; gap: 0.55rem; } .prose ul li { position: relative; padding-left: 1.4rem; color: var(--encre-2); } .prose ul li::before { content: "—"; position: absolute; left: 0; color: var(--vert-clair); font-weight: 600; } .prose strong { color: var(--encre); } .prose a { color: var(--vert-clair); text-decoration: underline; text-underline-offset: 3px; } .prose .placeholder { background: rgba(245, 158, 11, 0.16); color: var(--ambre); border-radius: 4px; padding: 0 0.3rem; font-style: italic; } /* grille de garanties (page sécurité) */ .sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin: 2rem 0 1rem; } .sec-card { background: var(--carte); backdrop-filter: blur(12px); border: 1px solid var(--carte-bord); border-radius: var(--radius); padding: 1.5rem 1.4rem; } .sec-card .module-code { margin-bottom: 0.7rem; } .sec-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--encre); margin: 0 0 0.45rem; } .sec-card p { font-size: 0.92rem; color: var(--encre-2); margin: 0; line-height: 1.55; } .page-backlink { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--encre-2); margin-bottom: 2rem; } .page-backlink:hover { color: var(--vert-clair); } /* ───────────────────────────── Animations d'apparition */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ── Apparition echelonnee par groupe ── Reutilise le mecanisme .reveal existant : seul le retard de transition est calcule par indice. Les enfants recoivent .reveal par JavaScript, donc sans JavaScript ils restent simplement visibles. */ [data-stagger="fade"] > .reveal { transform: none; } /* ── Ligne de progression de lecture, sous la barre de navigation ── Une jauge, pas une decoration : elle dit ou l'on en est. */ .scroll-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform: scaleX(var(--progress, 0)); transform-origin: 0 50%; background: var(--grad-accent); pointer-events: none; } /* ── Le hero s'efface quand on le quitte ── Lie a la position de defilement, pas declenche : la transition vers la section suivante devient intentionnelle au lieu d'etre un simple depart. */ .hero-inner { opacity: var(--hero-opacite, 1); transform: translateY(var(--hero-lift, 0px)); will-change: opacity, transform; } /* ── Entree du hero : une seule sequence orchestree au chargement ── Le hero est au-dessus de la ligne de flottaison, il n'a pas de .reveal : il s'anime a l'arrivee, dans l'ordre de lecture, puis plus jamais. Conditionne a .js pour que sans JavaScript le contenu soit simplement la. */ @keyframes entre { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes entre-console { from { opacity: 0; transform: translateY(22px) scale(0.985); } to { opacity: 1; transform: none; } } .js .hero-copy > * { animation: entre 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; } .js .hero-copy > :nth-child(1) { animation-delay: 0.05s; } .js .hero-copy > :nth-child(2) { animation-delay: 0.14s; } .js .hero-copy > :nth-child(3) { animation-delay: 0.23s; } .js .hero-copy > :nth-child(4) { animation-delay: 0.32s; } .js .hero-copy > :nth-child(5) { animation-delay: 0.41s; } /* la console arrive en dernier : elle se « pose » plutot qu'elle ne glisse */ .js .console-hero { animation: entre-console 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both; } /* ── Tuiles : leger echelonnement a chaque changement de module ── Rend la bascule perceptible sans la ralentir. */ @keyframes tuile-entre { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .console-explorer .tile { animation: tuile-entre 0.32s ease both; } .console-explorer .tile:nth-child(1) { animation-delay: 0s; } .console-explorer .tile:nth-child(2) { animation-delay: 0.05s; } .console-explorer .tile:nth-child(3) { animation-delay: 0.10s; } .console-explorer .tile:nth-child(4) { animation-delay: 0.15s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .feed-line { animation: none; } .btn, .mod, .mod-state { transition: none; } .mod:hover, .mod[aria-selected="true"] { transform: none; } /* aucune entree animee, aucune impulsion : tout est simplement en place */ .js .hero-copy > *, .js .console-hero, .console-explorer .tile { animation: none; opacity: 1; transform: none; } .arrow-pulse { animation: none; opacity: 0; } .nav, .nav-inner { transition: none; } /* le hero ne s'efface plus au defilement */ .hero-inner { opacity: 1 !important; transform: none !important; will-change: auto; } /* la jauge de lecture reste : c'est une information, pas un effet */ } /* ───────────────────────────── Responsive */ @media (max-width: 1024px) { .explorer { grid-template-columns: minmax(200px, 250px) 1fr; gap: 1.2rem; } .hero-inner { grid-template-columns: 1fr; gap: 2.8rem; } .hero-copy { text-align: center; } .hero-sub { margin-left: auto; margin-right: auto; } .hero-cta { justify-content: center; } .security-grid { grid-template-columns: 1fr; gap: 2.5rem; } } @media (max-width: 860px) { .nav-links, .nav-actions { display: none; } .nav-burger { display: flex; } .nav.menu-open .nav-links, .nav.menu-open .nav-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; } .nav.menu-open .nav-inner { flex-wrap: wrap; } .nav.menu-open .nav-links { width: 100%; order: 3; margin: 0.8rem 0 0.3rem; } .nav.menu-open .nav-links a { padding: 0.5rem 0.2rem; } .nav.menu-open .nav-actions { width: 100%; order: 4; padding-bottom: 0.6rem; } .nav.menu-open .theme-toggle { width: 100%; margin-left: 0; } .nav.menu-open .lang-switch { text-align: center; margin-left: 0; } .steps { grid-template-columns: 1fr; } .step-arrow { transform: rotate(90deg); justify-self: center; padding: 0; } /* la liste d'onglets devient une barre horizontale défilante */ .explorer { grid-template-columns: 1fr; gap: 1.1rem; } .explorer-list { flex-direction: row; overflow-x: auto; gap: 0.4rem; padding-bottom: 0.5rem; scrollbar-width: thin; } .mod { width: auto; flex-shrink: 0; padding: 0.5rem 0.75rem; } .mod:hover, .mod[aria-selected="true"] { transform: none; } .mod-state { display: none; } .stats-inner { grid-template-columns: repeat(2, 1fr); } .pricing { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } .footer-inner { grid-template-columns: 1fr 1fr; } .br-desktop { display: none; } } @media (max-width: 560px) { .hero { padding-top: 3rem; } .section { padding: 4rem 1.2rem; } .page { padding: 3rem 1.2rem 4rem; } .sec-grid { grid-template-columns: 1fr; } .mod-code { display: none; } .console-tiles { grid-template-columns: repeat(2, 1fr); } .footer-inner { grid-template-columns: 1fr; gap: 1.8rem; } .hero-cta .btn { width: 100%; } } /* ───────────────────────────── Ouverture : API & MCP (accueil) */ .open-banner { margin-top: 3.2rem; display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.4rem; align-items: center; background: var(--carte); border: 1px solid var(--carte-bord); border-radius: var(--radius); padding: 2.2rem 2.4rem; } .open-copy h3 { font-size: 1.45rem; font-weight: 700; color: var(--encre); margin: 0.5rem 0 0.7rem; letter-spacing: -0.01em; } .open-copy p:not(.eyebrow) { color: var(--encre-2); font-size: 0.97rem; margin-bottom: 1.3rem; } .open-console .audit-lines .u { color: var(--vert-clair); font-weight: 600; } @media (max-width: 860px) { .open-banner { grid-template-columns: 1fr; padding: 1.6rem; } }