/* ============================================================ Direction artistique « Azur » — docs/NEXUS-DA.md. Le gris est chaud, le blanc est un ivoire, l'accent est rare. ============================================================ */ :root{ --bg-base:#1a1a18; --bg-raised:#21211f; --bg-overlay:#2a2a27; --bg-input:#1f1f1c; --bg-terminal:#141413; --bg-hover:#232320; --border:#302f2c; --border-strong:#3d3b37; --text-primary:#f0eee6; --text-secondary:#a8a49b; --text-tertiary:#8a867d; --text-disabled:#55524c; --accent:#3b82f6; --accent-hover:#5a96f8; --accent-muted:#213149; --accent-text:#8fb8fc; --accent-border:#2b4c7e; --accent-ring:rgba(59,130,246,.45); --accent-selection:rgba(59,130,246,.28); --data-text:#8ac4bd; --success-text:#9bcb9e; --success-muted:#1e2a1f; --success-border:#34492f; --warning-text:#edbe77; --warning-muted:#33261a; --warning-border:#5a4322; --danger-text:#f0908f; --danger-muted:#331e20; --danger-border:#5c2e30; --font-sans:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif; --font-serif:'Source Serif 4',Georgia,serif; --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace; --radius-sm:6px; --radius:8px; --radius-lg:12px; --radius-full:999px; --shadow-md:0 4px 12px rgba(0,0,0,.4); --shadow-lg:0 12px 32px rgba(0,0,0,.5); --shadow-xl:0 32px 80px rgba(0,0,0,.6); --dur:180ms; --ease:cubic-bezier(.2,0,0,1); --gutter:clamp(20px,5vw,40px); --maxw:1180px; } @media (prefers-reduced-motion:reduce){:root{--dur:0ms}} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--bg-base);color:var(--text-primary); font-family:var(--font-sans);font-size:14px;line-height:1.55; -webkit-font-smoothing:antialiased;overflow-x:hidden; } body.fige{overflow:hidden} ::selection{background:var(--accent-selection)} a{color:var(--accent-text);text-decoration:none} a:hover{color:var(--accent-hover)} h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em;line-height:1.2} p{margin:0} :focus-visible{outline:2px solid var(--accent-ring);outline-offset:3px;border-radius:var(--radius-sm)} /* voile de grain : réchauffe les aplats, évite la bande numérique */ body::before{ content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); } .shell{position:relative;z-index:2} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} /* ---------------- monogramme {N} ---------------- */ .logo{display:inline-flex;align-items:center;font-family:var(--font-serif);color:var(--accent);line-height:1} .logo i{font-style:normal} .logo .b{font-weight:400} .logo .n{font-weight:600;margin:0 .05em;transform:translateY(4%)} /* ---------------- en-tête ---------------- */ /* La barre des pages hors vitrine — connexion, autorisation, suivi : un bandeau plein, parce que leurs liens sont posés à même la page et qu'il faut les en séparer. */ header{ position:sticky;top:0;z-index:50; background:rgba(20,20,19,.88);backdrop-filter:blur(12px); border-bottom:1px solid var(--border); } /* Le site vitrine, lui, n'a QUE la pilule : pas de bandeau derrière, rien qui barre l'écran sur toute sa largeur. La pilule porte son propre fond opaque, c'est ce qui la garde lisible quand la page défile dessous. */ header.flottant{background:transparent;backdrop-filter:none;border-bottom:0} .bar{display:flex;align-items:center;gap:14px;height:74px} .brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;color:var(--text-primary);flex:none} .brand .logo{font-size:20px} .brand .logo .n{font-size:15px} /* La pilule : la marque, les onglets et les actions dans UN seul objet, centré sur le rectangle. `margin:0 auto` suffit à la centrer parce qu'elle est le seul enfant de la barre — les pages hors vitrine, qui n'en ont pas, gardent la barre ordinaire décrite juste en dessous. */ .pilule{ position:relative; display:flex;align-items:center;justify-content:space-between; gap:clamp(12px,2.2vw,28px);margin:0 auto;max-width:100%; padding:5px 5px 5px 20px; border:1px solid var(--border);border-radius:999px; background:var(--bg-raised);box-shadow:var(--shadow-md); } /* La barre simple — pages de connexion, d'autorisation, de suivi : une ou deux entrées poussées à droite, sans pilule et sans menu. */ nav{display:flex;align-items:center;gap:2px;margin-left:auto} .pilule nav{margin-left:0} nav a{ padding:8px 14px;border-radius:999px;color:var(--text-secondary); font-size:13.5px;white-space:nowrap; transition:color var(--dur) var(--ease),background var(--dur) var(--ease); } nav a:hover{color:var(--text-primary);background:var(--bg-hover)} /* L'onglet de la page courante : la pilule sert à se situer, pas seulement à naviguer. Posé par le générateur, jamais par le script — un état affiché après coup clignote au chargement. */ nav a[aria-current="page"]{color:var(--text-primary);background:var(--bg-hover)} /* `bar-actions` et non `actions` : cette dernière existe déjà pour les boutons d'un dialogue, où elle porte `flex:1`. Le même nom rendait le bouton de la barre trois fois trop large, et la cause était invisible dans l'en-tête. */ .bar-actions{display:flex;align-items:center;gap:8px;flex:none} .bar-actions .btn{ padding:9px 16px;font-size:13px;border-radius:999px;white-space:nowrap; } /* Se connecter : une icône de membre, sans texte. Le libellé vit dans `aria-label` et dans `title` — sans lui, le lien serait muet pour un lecteur d'écran. */ .btn-icone{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:36px;height:36px;border-radius:999px; border:1px solid var(--border);background:transparent;color:var(--text-secondary); transition:color var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease); } .btn-icone:hover{color:var(--text-primary);background:var(--bg-hover);border-color:var(--border-strong)} .btn-icone svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* ---------------- les volets de la barre ---------------- * * « Fonctionnalités » ouvre sur vingt-sept pages et « API » sur deux mondes * distincts : le lien seul oblige à charger une page pour découvrir ce qu'il y * a derrière. Le volet le dit avant le clic. * * En CSS, sans une ligne de script : `:hover` pour la souris, `:focus-within` * pour le clavier. Un menu qui dépend du JavaScript est un menu qui disparaît * quand le script tombe — et le lien parent, lui, reste toujours cliquable. */ .onglet{display:flex} .volet{ position:absolute;top:100%;left:50%;z-index:60; transform:translateX(-50%) translateY(-6px); opacity:0;visibility:hidden;pointer-events:none; transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur); margin-top:14px;padding:14px; border:1px solid var(--border);border-radius:var(--radius-lg); background:var(--bg-overlay);box-shadow:var(--shadow-lg); /* Une largeur assumée : le volet décrit six familles, il lui faut la place de les écrire. Bornée à la fenêtre, pour ne jamais dépasser à droite. */ width:min(720px,calc(100vw - 32px)); } .volet.deux{width:min(540px,calc(100vw - 32px))} /* Le pont : sans lui, la souris traverse quatorze pixels de vide entre l'onglet et le volet, et le volet se referme en chemin. */ .volet::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px} .onglet:hover > .volet, .onglet:focus-within > .volet{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0); } .volet-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px} .volet.deux .volet-grille{grid-template-columns:repeat(2,minmax(0,1fr))} .volet a{ display:block;padding:10px 12px;border-radius:var(--radius); white-space:normal;color:var(--text-secondary); } .volet a:hover{background:var(--bg-hover)} .volet a b{display:block;font-size:13.5px;font-weight:600;color:var(--text-primary);margin-bottom:3px} .volet a span{display:block;font-size:12.5px;line-height:1.5;color:var(--text-tertiary)} .volet-pied{ margin:10px -14px -14px;padding:12px 26px;border-top:1px solid var(--border); background:var(--bg-raised);border-radius:0 0 var(--radius-lg) var(--radius-lg); } .volet-pied a{padding:0;font-size:13px;color:var(--accent-text)} .volet-pied a:hover{background:none;color:var(--accent-hover)} @media (max-width:840px){.volet{display:none}} /* ---------------- menu mobile ---------------- * * La barre était une simple rangée : cinq entrées à côté du logo. Sur un * téléphone de 375 px, elle en réclamait 572 — la PAGE ENTIÈRE défilait donc * latéralement, sur toutes les pages du site, à cause d'un seul élément. * * Le bouton et le panneau sont posés par le script à partir des entrées déjà * présentes : elles ne sont écrites qu'une fois, dans l'en-tête, et le menu * mobile ne peut pas diverger de la barre de bureau. Rien à recopier dans les * vingt-huit pages. */ .burger{ display:none;width:36px;height:36px;padding:0;flex-direction:column; align-items:center;justify-content:center;flex:none; background:transparent;border:1px solid var(--border);border-radius:999px; color:var(--text-primary);cursor:pointer; } .burger:hover{background:var(--bg-hover)} .burger i{ display:block;width:17px;height:1.5px;background:currentColor;border-radius:2px; transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease); } .burger i + i{margin-top:4px} /* ouvert, les trois barres deviennent une croix — l'état se lit sans texte */ .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .burger[aria-expanded="true"] i:nth-child(2){opacity:0} .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} /* Plein écran, et par-dessus la barre : le menu prend l'écran entier, avec sa marque et sa croix. Le z-index passe devant l'en-tête (50), sinon la pilule flotterait au milieu du menu. */ .menu-mobile{ display:none;position:fixed;inset:0;z-index:100; background:var(--bg-base); padding:0 var(--gutter) 28px; overflow-y:auto;overscroll-behavior:contain; } .menu-tete{ position:sticky;top:0;z-index:1;background:var(--bg-base); display:flex;align-items:center;gap:12px; height:74px;margin-bottom:8px; } .menu-tete .brand{flex:1;min-width:0} .menu-fermer{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:40px;height:40px;border-radius:999px;cursor:pointer; border:1px solid var(--border);background:transparent;color:var(--text-primary); } .menu-fermer:hover{background:var(--bg-hover);border-color:var(--border-strong)} .menu-fermer svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} .menu-mobile a{ display:block;padding:15px 2px;font-size:16.5px;color:var(--text-primary); border-bottom:1px solid var(--border); } .menu-mobile a:hover{color:var(--accent)} /* L'en-tête d'un onglet replié : un bouton, pas un lien — il ouvre, il ne va nulle part. La page de l'onglet est la première entrée de son repli. */ .menu-onglet{ display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; padding:15px 2px;border:0;border-bottom:1px solid var(--border); background:none;color:var(--text-primary);font-family:inherit;font-size:16.5px; font-weight:500;text-align:left;cursor:pointer; } .menu-onglet .chev{ width:18px;height:18px;flex:none;fill:none;stroke:var(--text-tertiary); stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; transition:transform var(--dur) var(--ease); } .menu-onglet.ouvert .chev{transform:rotate(180deg)} .menu-repli{padding:4px 0 10px} .menu-repli[hidden]{display:none} /* Les entrées d'un volet : décalées, plus petites, et sans leur description — la place manque, et le titre suffit. */ .menu-mobile a.sous{ padding:12px 2px 12px 16px;font-size:15px;color:var(--text-secondary); border-bottom:0; } .menu-mobile a.sous.tout{color:var(--accent-text)} .menu-mobile a.sous b{font-weight:400} .menu-mobile a.sous span{display:none} .menu-pied{margin-top:22px} .menu-mobile .btn{width:100%} @media (max-width:840px){ /* Les onglets et le bouton d'activation sortent de la pilule, qui prend alors toute la largeur : il reste la marque, la connexion et le menu — c'est ce qui rend la page à sa largeur. */ nav .hide-sm{display:none} .pilule{width:100%;padding-left:16px} .pilule > nav{display:none} .bar-actions > .btn{display:none} .burger{display:flex} .menu-mobile[data-ouvert]{display:block} } /* ---------------- boutons ---------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:10px 18px;border-radius:var(--radius);border:1px solid transparent; font-family:inherit;font-size:14px;font-weight:500;cursor:pointer; transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease); } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-md)} .btn-primary:hover{background:var(--accent-hover);color:#fff} .btn-primary:disabled{background:var(--bg-overlay);color:var(--text-disabled);box-shadow:none;cursor:not-allowed} .btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text-primary)} .btn-ghost:hover{background:var(--bg-hover);border-color:var(--text-disabled);color:var(--text-primary)} .btn-sm{padding:7px 14px;font-size:13px} .btn-lien{ background:none;border:none;padding:0;color:var(--text-tertiary);font-family:inherit; font-size:13px;cursor:pointer;transition:color var(--dur) var(--ease); } .btn-lien:hover{color:var(--text-primary)} /* ---------------- typographie de section ---------------- */ .eyebrow{ font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--text-tertiary); display:flex;align-items:center;gap:9px;margin-bottom:14px; } .eyebrow::before{content:'';width:18px;height:1px;background:var(--border-strong);flex:none} /* LA MÊME POLICE QUE L'APPLICATION. Le site a longtemps composé ses paragraphes en Source Serif. L'application, elle, est en Plus Jakarta Sans du premier au dernier écran — sa classe `.serif` existe mais n'est employée nulle part. Deux typographies pour un seul produit : celui qui passe du site au logiciel change de monde. Le serif ne reste donc que là où l'application le garde : dans le logo. */ .lead{font-size:16.5px;line-height:1.62;color:var(--text-secondary)} /* Cible les sections de la PAGE seulement : le tunnel en contient aussi, et elles n'ont ni ce rythme vertical ni ce filet de séparation. */ main > section{padding:clamp(64px,9vw,108px) 0;border-top:1px solid var(--border)} main > section h2{font-size:clamp(22px,3vw,29px)} .section-head{max-width:640px;margin-bottom:clamp(32px,5vw,48px)} .section-head .lead{margin-top:14px} /* ---------------- accueil ---------------- */ /* `overflow-x:clip` et non `hidden` : le halo fait 150vw À DESSEIN, et débordait donc la page — sur iOS, `overflow-x:hidden` posé sur le corps ne retient pas ce genre de débord, et le doigt faisait glisser la page entière. `clip` coupe l'horizontale SANS toucher à la verticale : le halo continue de remonter derrière l'en-tête, ce qui est tout l'effet. */ .hero{position:relative;overflow-x:clip;border-top:0;padding:clamp(52px,8vw,92px) 0 clamp(56px,8vw,88px);text-align:center} /* halo azur : l'unique éclat de couleur de la page, posé une seule fois */ .hero::before{ content:'';position:absolute;top:-340px;left:50%;transform:translateX(-50%); width:min(1200px,150vw);height:760px;pointer-events:none; background:radial-gradient(50% 50% at 50% 50%,rgba(59,130,246,.14),transparent 70%); } .hero-inner{position:relative;max-width:760px;margin:0 auto} .hero h1{font-size:clamp(34px,6vw,60px);letter-spacing:-.03em;line-height:1.06} .hero h1 em{font-style:normal;color:var(--accent-text)} .hero .lead{margin:22px auto 0;font-size:clamp(16px,1.7vw,18.5px);max-width:56ch} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;justify-content:center} .hero-note{ margin-top:20px;font-size:13px;color:var(--text-tertiary); display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center; } .dot{width:5px;height:5px;border-radius:50%;background:var(--success-text);flex:none} .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums} .hero-mark{ display:flex;align-items:center;justify-content:center; font-family:var(--font-serif);color:var(--accent); font-size:clamp(48px,7vw,72px);margin-bottom:22px;line-height:1; } .hero-mark .b{font-weight:400} .hero-mark .n{font-weight:600;font-size:.72em;margin:0 .05em;transform:translateY(4%)} .pulse{animation:pulse 2.6s var(--ease) infinite;display:inline-block} .hero-mark .n.pulse{animation-delay:.2s} .hero-mark .b.pulse:last-child{animation-delay:.4s} @keyframes pulse{0%,60%,100%{opacity:1}30%{opacity:.42}} @media (prefers-reduced-motion:reduce){.pulse{animation:none}} /* ---------------- la capture de l'application ---------------- */ .vitrine{position:relative;margin-top:clamp(44px,6vw,72px)} /* le dégradé du bas fait fondre l'image dans la page plutôt que de la couper net */ .vitrine::after{ content:'';position:absolute;left:0;right:0;bottom:-1px;height:22%;pointer-events:none; background:linear-gradient(to bottom,transparent,var(--bg-base)); } .chassis{ border:1px solid var(--border-strong);border-radius:var(--radius-lg);overflow:hidden; background:var(--bg-raised);box-shadow:var(--shadow-xl); } .chassis-bar{ display:flex;align-items:center;gap:8px;padding:10px 14px; background:var(--bg-raised);border-bottom:1px solid var(--border); } .chassis-bar i{width:9px;height:9px;border-radius:50%;background:var(--border-strong);flex:none} .chassis-bar span{margin-left:6px;font-size:12px;color:var(--text-tertiary);letter-spacing:.02em} .chassis img{display:block;width:100%;height:auto;background:var(--bg-base)} .legende{ margin-top:16px;text-align:center;font-size:12.5px;color:var(--text-tertiary); } /* ---------------- grille de cartes ---------------- */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px} .card{ background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg); padding:24px;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease); } .card:hover{border-color:var(--border-strong);background:var(--bg-hover)} .card svg{width:19px;height:19px;stroke:var(--text-tertiary);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .card h3{font-size:15px;font-weight:500;margin:14px 0 8px} .card p{font-size:13.5px;color:var(--text-secondary);line-height:1.6} /* ---------------- téléchargements ---------------- */ .dl-latest{ background:var(--bg-raised);border:1px solid var(--accent-border);border-radius:var(--radius-lg); padding:clamp(22px,3vw,30px);box-shadow:var(--shadow-md); } .dl-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px} .badge{ font-size:11.5px;font-weight:500;letter-spacing:.04em;padding:4px 10px;border-radius:var(--radius-full); border:1px solid var(--accent-border);background:var(--accent-muted);color:var(--accent-text); } .badge-plain{border-color:var(--border-strong);background:var(--bg-overlay);color:var(--text-secondary)} .badge-warn{border-color:var(--warning-border);background:var(--warning-muted);color:var(--warning-text)} .badge-ok{border-color:var(--success-border);background:var(--success-muted);color:var(--success-text)} .dl-version{font-family:var(--font-mono);font-size:26px;font-weight:500;letter-spacing:-.01em} .dl-meta{font-size:13px;color:var(--text-tertiary);display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:2px} .dl-notes{ font-size:14.5px;line-height:1.62;color:var(--text-secondary); margin:16px 0 22px;white-space:pre-wrap; } .dl-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:15px 0;border-top:1px solid var(--border)} .dl-row .v{font-family:var(--font-mono);font-size:14px;min-width:74px;font-variant-numeric:tabular-nums} .dl-row .d{font-size:13px;color:var(--text-tertiary)} .dl-row .a{margin-left:auto} @media (max-width:560px){.dl-row .a{margin-left:0;width:100%}} /* --- les notes d'une version --- */ .notes{margin:16px 0 22px;max-width:70ch} .notes-chapo{font-size:15px;line-height:1.6;color:var(--text-primary)} .notes-liste{list-style:none;margin:16px 0 0;padding:0} .notes-liste li{ padding:12px 0;border-top:1px solid var(--border); font-size:13.5px;line-height:1.6;color:var(--text-secondary); } .notes-liste li:first-child{border-top:0;padding-top:6px} /* Les capitales du titre sont celles de la source. La DA ne les admet qu'à cette taille et avec ce lettrage — le seul endroit du site qui en porte. */ .notes-liste b{ display:block;margin-bottom:4px;font-size:12px;font-weight:500; letter-spacing:.05em;color:var(--text-tertiary); } .notes-plus{margin-top:14px;font-size:13.5px;color:var(--accent-text)} .notes-plus:hover{color:var(--accent-hover)} .dl-older{margin-top:34px} .dl-older h3{font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--text-tertiary);margin-bottom:4px} .state{ border:1px dashed var(--border-strong);border-radius:var(--radius-lg);padding:34px 24px; text-align:center;color:var(--text-tertiary);font-size:13.5px; } /* ---------------- « Démarrer » : le texte à gauche, les cibles à droite ------ */ .demarrer{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:start} @media (max-width:880px){.demarrer{grid-template-columns:1fr}} .demarrer-texte h2{margin-bottom:16px} .panneau{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(22px,3vw,28px)} .panneau h3{font-size:19px;font-weight:600;letter-spacing:-.015em} .panneau-intro{font-size:13.5px;color:var(--text-secondary);line-height:1.6;margin:10px 0 6px} .plateforme{ display:flex;align-items:center;gap:14px;padding:15px 0; border-top:1px solid var(--border); } .plateforme svg{width:18px;height:18px;flex:none;fill:var(--text-tertiary)} .plateforme .nom{font-size:14px} .plateforme .taille{font-size:12.5px;color:var(--text-tertiary);font-variant-numeric:tabular-nums} .plateforme .fin{margin-left:auto;display:flex;align-items:center;gap:12px} .plateforme .bientot{ font-size:12px;color:var(--text-tertiary);border:1px solid var(--border); background:var(--bg-overlay);border-radius:var(--radius-full);padding:5px 12px; } @media (max-width:480px){ .plateforme{flex-wrap:wrap} .plateforme .fin{margin-left:0;width:100%} .plateforme .fin .btn{flex:1} } /* ---------------- le détail de la version ---------------- */ .detail{margin-top:clamp(34px,5vw,52px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--border)} .detail-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px} .detail-version{font-family:var(--font-mono);font-size:20px;font-weight:500} .detail-meta{font-size:13px;color:var(--text-tertiary)} /* Une version annoncée dont les fichiers ne sont pas encore déposés : on le dit plutôt que de laisser le visiteur devant des tuiles vides. */ .detail-attente{margin-bottom:14px;padding:10px 12px;border:1px solid var(--trait,#2a2a27);border-radius:8px;font-size:14px;line-height:1.5;opacity:.85} .detail-notes{ font-size:14.5px;line-height:1.62;color:var(--text-secondary); margin-top:14px;max-width:70ch;white-space:pre-wrap; } /* ---------------- prérequis ---------------- */ .req{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px} .req div{padding:20px 22px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-raised)} .req h3{font-size:14px;font-weight:500;margin-bottom:7px} .req p{font-size:13.5px;color:var(--text-secondary)} /* ---------------- tunnel d'inscription (fenêtre modale) ---------------- */ .modale{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:var(--gutter)} .modale[hidden]{display:none} .modale-fond{position:absolute;inset:0;background:rgba(10,10,9,.72);backdrop-filter:blur(6px);animation:fondu var(--dur) var(--ease)} .modale-boite{ position:relative;width:min(560px,100%);max-height:calc(100vh - 2*var(--gutter));overflow-y:auto; background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:var(--radius-lg); box-shadow:var(--shadow-xl);padding:clamp(24px,4vw,34px); animation:monte var(--dur) var(--ease); } @keyframes fondu{from{opacity:0}} @keyframes monte{from{opacity:0;transform:translateY(10px)}} @media (prefers-reduced-motion:reduce){.modale-fond,.modale-boite{animation:none}} .modale-fermer{ position:absolute;top:14px;right:14px;width:32px;height:32px;display:grid;place-items:center; background:transparent;border:1px solid transparent;border-radius:var(--radius-sm); color:var(--text-tertiary);font-size:20px;line-height:1;cursor:pointer; transition:color var(--dur) var(--ease),background var(--dur) var(--ease); } .modale-fermer:hover{color:var(--text-primary);background:var(--bg-hover)} .jalons{display:flex;align-items:center;gap:8px;margin-bottom:22px} .jalon{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-disabled)} .jalon b{ width:24px;height:24px;border-radius:50%;display:grid;place-items:center; background:var(--bg-overlay);border:1px solid var(--border-strong); font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--text-tertiary); transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease); } .jalon.actif{color:var(--text-primary)} .jalon.actif b{background:var(--accent);border-color:var(--accent);color:#fff} .jalon.faite b{background:var(--accent-muted);border-color:var(--accent-border);color:var(--accent-text)} .jalons hr{flex:1;height:1px;border:0;background:var(--border);margin:0} @media (max-width:520px){.jalon span{display:none}} .etape[hidden]{display:none} .etape h3{font-size:19px;margin-bottom:8px} .etape > p.intro{font-size:13.5px;color:var(--text-secondary);line-height:1.6;margin-bottom:22px} .field{margin-bottom:17px} .field label{display:block;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:7px} .field .hint{display:block;font-weight:400;font-size:12.5px;color:var(--text-tertiary);margin-top:3px} input{ width:100%;padding:11px 13px;border-radius:var(--radius); background:var(--bg-input);border:1px solid var(--border);color:var(--text-primary); font-family:inherit;font-size:14px;transition:border-color var(--dur) var(--ease); } input::placeholder{color:var(--text-disabled)} input:hover{border-color:var(--border-strong)} input:focus{outline:none;border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-ring)} input.code{font-family:var(--font-mono);letter-spacing:.03em} .actions{display:flex;align-items:center;gap:14px;margin-top:22px} .actions .btn{flex:1} .msg{ display:none;margin-top:16px;padding:13px 15px;border-radius:var(--radius); font-size:13.5px;line-height:1.55;border:1px solid transparent; } .msg.show{display:block} .msg.err{background:var(--danger-muted);border-color:var(--danger-border);color:var(--danger-text)} .suite{list-style:none;margin:22px 0 0;padding:0;counter-reset:s} .suite li{ counter-increment:s;position:relative;padding:0 0 20px 40px; font-size:13.5px;color:var(--text-secondary);line-height:1.6; } .suite li::before{ content:counter(s);position:absolute;left:0;top:-1px; width:26px;height:26px;border-radius:50%;display:grid;place-items:center; background:var(--bg-overlay);border:1px solid var(--border-strong); font-family:var(--font-mono);font-size:11.5px;color:var(--text-tertiary); } .suite li::after{content:'';position:absolute;left:12.5px;top:28px;bottom:2px;width:1px;background:var(--border)} .suite li:last-child{padding-bottom:0} .suite li:last-child::after{display:none} .suite strong{color:var(--text-primary);font-weight:500;display:block;margin-bottom:2px} /* ---------------- pied ---------------- */ /* ---------------- pied de page ---------------- * * Cinq colonnes, et c'est un PLAN DU SITE, pas une rangée de liens. Le pied * n'était qu'une ligne : Fonctionnalités, Télécharger, API — et les * vingt-sept pages du site n'étaient atteignables que par une page d'index. * C'est aussi le seul endroit d'une page longue où l'on cherche encore * quelque chose une fois arrivé en bas. */ footer{border-top:1px solid var(--border);padding:clamp(46px,6vw,72px) 0 34px;color:var(--text-tertiary);font-size:13px} /* Deux grilles imbriquées, et non une de six colonnes : les cinq listes vivent dans un