/* ============================================================ axolo — main.css : LA feuille du site, liée par toutes les pages. Structure : 1. base — tokens (:root) + socle commun : gabarit des pages intérieures (articles, listing, pages légales) 2. .p-articles — ce que la page /articles ajoute 3. .p-accueil — ce que l'accueil ajoute ou redéfinit Chaque page pose sa classe sur : p-accueil, p-articles, p-article, p-legal. Le rendu est celui des pages d'origine. ============================================================ */ /* ---------- 1. base ---------- */ /* Page document Axolo : échafaudage Console, tokens de la mémoire DesignBrain (export_identity, tel quel). */ :root { --encre-press: #000000; /* hors tokens : état press du CTA, dérivé de --encre, proposition en file */ --accent-ink: var(--background); --background: #FAFAF7; --brand: #E4571B; --ease-console: cubic-bezier(.22,.61,.36,1); --encre: #17181B; --espace-carte: 18px; --espace-gouttiere: clamp(18px, 3.4vw, 44px); --espace-grille: 16px; --espace-hero: clamp(44px, 6vw, 76px); --espace-section: clamp(64px, 9vw, 120px); --fill: #F2F1EC; --gradient-lumiere: radial-gradient(120% 95% at 12% 0%, var(--paper) 0%, var(--lumiere-2) 46%, var(--lumiere-3) 100%); --gradient-souffle: linear-gradient(158deg, var(--paper) 0%, var(--souffle-2) 100%); --lumiere-2: #FDFDFB; --lumiere-3: #F7F7F3; --mono: "IBM Plex Mono", ui-monospace, monospace; --motion-entree: 800ms; --motion-hover: 300ms; --motion-micro: 220ms; --motion-respiration: 3800ms; --motion-revelation: 700ms; --ombre-brand: 0 18px 36px -16px rgba(228, 87, 27, .55); --ombre-carte: 0 1px 2px rgba(23, 24, 27, .05), 0 14px 40px rgba(23, 24, 27, .07); --paper: #FFFFFF; --pastille-active: #E8B4A8; --r-lg: 18px; --r-md: 13px; --r-pill: 999px; --r-sm: 8px; --sans: "Hanken Grotesk", "Helvetica Neue", sans-serif; --souffle-2: #FCFCFA; --stroke-strong: #C9C7BF; --stroke-weak: #E9E7E1; --text-weak: #63666D; --track-data: 0.12em; --track-hero: -0.035em; --track-titre: -0.03em; --type-body: 16px; --type-chip: 10.5px; --type-citation: clamp(28px, 4vw, 48px); --type-h2: clamp(26px, 3.4vw, 40px); --type-hero: clamp(34px, 5.4vw, 62px); --type-small: 14px; --width-console: 1020px; --width-contenu: 1120px; --width-etroit: 720px; --width-large: 1220px; --width-mesure: 58ch; --width-tete: 640px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--background); color: var(--encre); font-family: var(--sans); font-size: var(--type-body); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--stroke-strong); } a:hover { text-decoration-color: var(--encre); } .nav a, .pied nav a { text-decoration: none; } a:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; } .mono { font-family: var(--mono); font-size: var(--type-chip); letter-spacing: var(--track-data); text-transform: uppercase; } .nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px var(--espace-gouttiere); max-width: var(--width-large); margin: 0 auto; } .wordmark { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; } .glyphe { color: var(--brand); font-style: normal; } .retour { font-size: var(--type-small); color: var(--text-weak); } .retour:hover { color: var(--encre); } .doc-tete { text-align: center; max-width: var(--width-tete); margin: 0 auto; padding: var(--espace-hero) var(--espace-gouttiere) 0; } .doc-tete .eyebrow { display: block; color: var(--brand); font-weight: 500; margin-bottom: 12px; } h1 { font-weight: 700; letter-spacing: var(--track-titre); line-height: 1.08; font-size: var(--type-h2); text-wrap: balance; } .doc-tete p { color: var(--text-weak); margin-top: 12px; } .doc-tete .date { font-family: var(--mono); font-size: var(--type-chip); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--text-weak); margin-top: var(--espace-carte); } .doc { max-width: var(--width-etroit); margin: 0 auto; padding: var(--espace-hero) var(--espace-gouttiere) var(--espace-section); } .doc h2 { font-size: var(--type-body); font-weight: 800; letter-spacing: var(--track-titre); margin: var(--espace-hero) 0 10px; } .doc p { color: var(--text-weak); margin-top: 10px; } .doc p strong { color: var(--encre); font-weight: 700; } .registre { width: 100%; border-collapse: collapse; font-size: var(--type-small); margin-top: var(--espace-carte); background: var(--gradient-souffle); border: 1px solid var(--stroke-weak); border-radius: var(--r-md); overflow: hidden; } .registre td { padding: 10px 14px; border-bottom: 1px solid var(--stroke-weak); vertical-align: top; } .registre tr:last-child td { border-bottom: 0; } .registre td:first-child { font-family: var(--mono); font-size: var(--type-chip); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--text-weak); white-space: nowrap; padding-top: 13px; width: 34%; } .registre td:last-child { font-weight: 600; } .code-ligne { font-family: var(--mono); font-size: 13px; background: var(--fill); border: 1px solid var(--stroke-weak); border-radius: var(--r-sm); padding: 3px 9px; white-space: nowrap; } .doc ul { color: var(--text-weak); margin: 10px 0 0 20px; } .doc li { margin-top: 8px; } .doc li strong { color: var(--encre); } .article-fin { text-align: center; margin-top: var(--espace-hero); } .article-visuel { display: block; width: 100%; border-radius: var(--r-lg); border: 1px solid var(--stroke-weak); margin-bottom: var(--espace-hero); } .lien-linkedin { font-weight: 600; font-size: var(--type-small); } .filet-doc { border: 0; height: 1px; background: var(--stroke-weak); max-width: var(--width-etroit); margin: var(--espace-hero) auto 0; } footer { border-top: 1px solid var(--stroke-weak); margin-top: var(--espace-hero); padding: 34px 0 44px; } .pied { max-width: var(--width-contenu); margin: 0 auto; padding-inline: var(--espace-gouttiere); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--text-weak); font-size: 12.5px; } .pied nav { display: flex; gap: 16px; } .pied nav a:hover { color: var(--encre); } /* ---------- 2. listing des articles (.p-articles) ---------- */ /* Page document Axolo : échafaudage Console, tokens de la mémoire DesignBrain (export_identity, tel quel). */ .p-articles .doc-large { max-width: var(--width-contenu); } .p-articles .articles-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espace-grille); } @media (max-width: 820px) { .p-articles .articles-grille { grid-template-columns: 1fr; } } .p-articles .article-slot { display: block; background: var(--gradient-souffle); border: 1px solid var(--stroke-weak); border-radius: var(--r-lg); padding: 20px var(--espace-carte); text-decoration: none; transition: box-shadow var(--motion-hover) ease, transform var(--motion-hover) var(--ease-console); } .p-articles .article-slot:hover { box-shadow: var(--ombre-carte); transform: translateY(-2px); } .p-articles .article-slot .thumb { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--stroke-weak); margin-bottom: 14px; } .p-articles .article-avenir { font-family: var(--mono); font-size: var(--type-chip); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--brand); display: block; margin-bottom: 12px; } .p-articles .article-slot h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; color: var(--encre); } .p-articles .article-slot p { color: var(--text-weak); font-size: var(--type-small); margin-top: 0; } .p-articles .article-slot.rvl { opacity: 1; transform: none; } /* ---------- 3. accueil (.p-accueil) ---------- */ /* Landing Axolo — échafaudage Console, tokens de la mémoire DesignBrain. :root = export_identity() collé tel quel — ne jamais retaper un token. */ html { scroll-behavior: smooth; } .p-accueil a { color: inherit; text-decoration: none; } .p-accueil a:focus-visible, .p-accueil button:focus-visible, .p-accueil summary:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; } .p-accueil .page { max-width: var(--width-contenu); margin: 0 auto; padding-inline: var(--espace-gouttiere); } /* Le fond travaillé sans photo : micro-grille de points, estompée au centre. */ .p-accueil .quadrille { position: relative; } .p-accueil .quadrille::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, var(--stroke-weak) 1.2px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(75% 90% at 50% 40%, transparent 30%, #000 78%); mask-image: radial-gradient(75% 90% at 50% 40%, transparent 30%, #000 78%); } .p-accueil .quadrille > * { position: relative; } /* ── Nav ── */ .p-accueil .nav-liens { display: flex; align-items: center; gap: 24px; font-size: var(--type-small); color: var(--text-weak); } .p-accueil .nav-liens a:hover { color: var(--encre); } .p-accueil .nouveau { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); border: 1px solid currentColor; border-radius: var(--r-pill); padding: 2px 7px; margin-left: 5px; vertical-align: 2px; } .p-accueil .nav-droite { display: flex; align-items: center; gap: 10px; } .p-accueil .lien-calme { font-size: var(--type-small); color: var(--text-weak); padding: 9px 12px; } .p-accueil .lien-calme:hover { color: var(--encre); } .p-accueil .pilule-noire { display: inline-block; background: var(--encre); color: var(--background); border-radius: var(--r-pill); font-weight: 600; font-size: var(--type-small); padding: 10px 20px; transition: transform var(--motion-micro) var(--ease-console), background var(--motion-micro) ease; } .p-accueil .pilule-noire:hover { transform: translateY(-1px); background: var(--encre-press); } .p-accueil .hero-actions .pilule-noire { box-shadow: var(--ombre-brand); } .p-accueil .pilule-claire { display: inline-block; background: var(--paper); color: var(--encre); border: 1px solid var(--stroke-weak); border-radius: var(--r-pill); font-weight: 600; font-size: var(--type-small); padding: 10px 20px; transition: border-color var(--motion-micro) ease, transform var(--motion-micro) var(--ease-console); } .p-accueil .pilule-claire:hover { border-color: var(--stroke-strong); transform: translateY(-1px); } @media (max-width: 900px) { .p-accueil .nav-liens { display: none; } } /* ── Hero — centré, PAS de photo : la console est l'image ── */ .p-accueil .hero { text-align: center; padding: var(--espace-hero) 0 0; } .p-accueil .badge { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--stroke-weak); border-radius: var(--r-pill); padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-weak); margin-bottom: 22px; } .p-accueil .badge .mono { color: var(--brand); letter-spacing: .08em; } .p-accueil h1 { font-weight: 700; letter-spacing: var(--track-hero); line-height: 1.04; font-size: var(--type-hero); max-width: 34ch; margin: 0 auto 8px; text-wrap: balance; } .p-accueil .hero-sous { font-weight: 600; font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -0.015em; margin-bottom: 14px; } .p-accueil .hero p.lede { color: var(--text-weak); font-size: var(--type-body); max-width: 86ch; margin: 0 auto 26px; text-wrap: balance; } .p-accueil .hero-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; } .p-accueil .hero-actions .pilule-noire, .p-accueil .hero-actions .pilule-claire { padding: 13px 26px; font-size: 15px; } .p-accueil .hero-preuves { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; color: var(--text-weak); font-size: 13.5px; } .p-accueil .hero-preuves span::before { content: "✓"; color: var(--brand); font-weight: 700; margin-right: 7px; } /* ── LA CONSOLE — la capture produit, en HTML. Signature du thème. ── */ .p-accueil .console-cadre { padding: 40px 0 0; max-width: var(--width-console); margin: 0 auto; position: relative; } .p-accueil .fenetre { background: var(--gradient-lumiere); border: 1px solid var(--stroke-weak); border-radius: var(--r-lg); box-shadow: var(--ombre-carte); overflow: hidden; text-align: left; } .p-accueil .fenetre-barre { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--stroke-weak); background: var(--background); } .p-accueil .pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--stroke-weak); } .p-accueil .pastille:first-child { background: var(--pastille-active); } .p-accueil .fenetre-url { flex: 1; text-align: center; font-family: var(--mono); font-size: var(--type-chip); color: var(--text-weak); letter-spacing: .06em; } .p-accueil .console { display: grid; grid-template-columns: 190px 1fr; min-height: 330px; } .p-accueil .console-nav { border-right: 1px solid var(--stroke-weak); padding: 14px 10px; background: var(--background); } .p-accueil .console-nav .wordmark { font-size: 13px; padding: 4px 8px 12px; } .p-accueil .console-nav a { display: block; font-size: 12.5px; color: var(--text-weak); padding: 7px 10px; border-radius: var(--r-sm); } .p-accueil .console-nav a[aria-current="true"] { background: var(--fill); color: var(--encre); font-weight: 600; } .p-accueil .console-corps { padding: 16px 18px 70px; } .p-accueil .console-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .p-accueil .console-titre .console-h { font-size: 14.5px; font-weight: 700; } .p-accueil .console-titre p { font-size: 11.5px; color: var(--text-weak); } .p-accueil .table { width: 100%; border-collapse: collapse; font-size: 12px; } .p-accueil .table th { text-align: left; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-weak); font-weight: 500; padding: 7px 8px; border-bottom: 1px solid var(--stroke-weak); } .p-accueil .table td { padding: 8px; border-bottom: 1px solid var(--stroke-weak); } .p-accueil .table td:first-child { font-weight: 600; } .p-accueil .jauge { display: inline-block; width: 64px; height: 4px; border-radius: 2px; background: var(--fill); vertical-align: 2px; margin-right: 7px; overflow: hidden; } .p-accueil .jauge i { display: block; height: 100%; background: var(--encre); transition: width var(--motion-entree) var(--ease-console); } .p-accueil .etat { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r-pill); padding: 3px 8px; } .p-accueil .etat.ok { background: var(--fill); color: var(--encre); } .p-accueil .etat.alerte { border: 1px solid var(--brand); color: var(--brand); } /* La barre de prompt qui pense — les demandes fantômes au-dessus, la vraie en face. */ .p-accueil .prompt-pile { position: absolute; left: 50%; transform: translateX(-50%); bottom: -34px; width: min(560px, calc(100% - 36px)); } .p-accueil .fantome { font-size: 12.5px; color: var(--text-weak); opacity: .38; padding: 5px 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p-accueil .fantome + .fantome { opacity: .6; } .p-accueil .prompt { background: var(--paper); border: 1px solid var(--stroke-weak); border-radius: var(--r-md); box-shadow: var(--ombre-carte); padding: 13px 14px 11px; } .p-accueil .prompt-texte { font-size: var(--type-small); min-height: 1.5em; } .p-accueil .prompt-pied { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .p-accueil .prompt-chip { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--stroke-weak); border-radius: var(--r-pill); padding: 4px 10px; color: var(--text-weak); } .p-accueil .prompt-chip.actif { border-color: var(--encre); color: var(--encre); } .p-accueil .prompt-envoi { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: var(--encre); color: var(--background); border: 0; cursor: pointer; font-size: 13px; line-height: 1; } /* ── Sections communes ── */ .p-accueil .section { padding: var(--espace-section) 0 0; } .p-accueil .section-tete { max-width: var(--width-tete); margin: 0 auto; text-align: center; } .p-accueil .eyebrow { display: block; color: var(--brand); font-weight: 500; margin-bottom: 12px; } .p-accueil h2 { font-weight: 700; letter-spacing: var(--track-titre); line-height: 1.08; font-size: var(--type-h2); text-wrap: balance; } .p-accueil .section-tete p { color: var(--text-weak); margin-top: 12px; } /* ── Ils nous ont fait confiance — logos N&B (slots tant que les fichiers ne sont pas déposés) ── */ .p-accueil .confiance { text-align: center; padding: var(--espace-section) 0 0; } .p-accueil .confiance-titre { color: var(--text-weak); margin-bottom: var(--espace-carte); } .p-accueil .mascotte-confiance { margin: 0 auto 10px; height: clamp(56px, 7vw, 72px); } .p-accueil .confiance-logos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--espace-carte) clamp(28px, 5vw, 56px); } .p-accueil .logo-slot { font-weight: 700; font-size: var(--type-body); letter-spacing: var(--track-titre); color: var(--text-weak); opacity: .75; filter: grayscale(1); } .p-accueil .confiance-logos img { height: 32px; width: clamp(96px, 13vw, 140px); object-fit: contain; filter: grayscale(1); opacity: .8; } /* ── Filets fins entre sections : le trait décoratif, centré au milieu de la respiration ── */ .p-accueil .filet { position: relative; } .p-accueil .filet::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--filet-decale, var(--espace-section)) / 2); width: min(var(--width-contenu), calc(100% - 2 * var(--espace-gouttiere))); height: 1px; background: var(--stroke-weak); pointer-events: none; } .p-accueil .probleme.filet { --filet-decale: clamp(70px, 10vw, 130px); } .p-accueil .faq.filet::before { top: calc(clamp(48px, 7vw, 88px) / -2); width: min(var(--width-contenu), calc(100vw - 2 * var(--espace-gouttiere))); } /* ── La citation-problème ── */ .p-accueil .probleme { padding: clamp(70px, 10vw, 130px) 0 0; text-align: center; } .p-accueil .probleme blockquote p:first-child { font-weight: 800; letter-spacing: var(--track-titre); line-height: 1.1; font-size: var(--type-citation); max-width: none; margin: 0 auto 18px; text-wrap: balance; } .p-accueil .probleme .argument { color: var(--text-weak); font-size: 17px; max-width: 54ch; margin: 0 auto; } .p-accueil .probleme .argument strong { color: var(--encre); font-weight: 700; } /* ── Les 4 tuiles bidirectionnelles — chaque tuile est illustrée par une mini-UI ── */ .p-accueil .tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espace-grille); margin-top: 38px; } @media (max-width: 820px) { .p-accueil .tuiles { grid-template-columns: 1fr; } } .p-accueil .tuile { background: var(--gradient-souffle); border: 1px solid var(--stroke-weak); border-radius: var(--r-lg); padding: var(--espace-carte); transition: box-shadow var(--motion-hover) ease, transform var(--motion-hover) var(--ease-console); } .p-accueil .tuile:hover { box-shadow: var(--ombre-carte); transform: translateY(-2px); } .p-accueil .mini { background: var(--fill); border-radius: var(--r-md); min-height: 148px; padding: 16px; display: flex; flex-direction: column; gap: 8px; justify-content: center; margin-bottom: 14px; } .p-accueil .tuile h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; } .p-accueil .tuile > p { color: var(--text-weak); font-size: var(--type-small); } /* mini-UI 1 : le code instancie le vrai composant */ .p-accueil .ligne-code { font-family: var(--mono); font-size: 11px; color: var(--text-weak); background: var(--paper); border: 1px solid var(--stroke-weak); border-radius: var(--r-sm); padding: 8px 11px; align-self: flex-start; } .p-accueil .ligne-code b { color: var(--encre); font-weight: 500; } .p-accueil .rendu { display: flex; align-items: center; gap: 10px; } .p-accueil .rendu .pilule-noire { pointer-events: none; font-size: 12.5px; padding: 8px 16px; } .p-accueil .rendu .etat { align-self: center; } /* mini-UI 2 : prod ⇄ figma */ .p-accueil .aller-retour { display: flex; align-items: center; gap: 10px; justify-content: center; } .p-accueil .noeud { background: var(--paper); border: 1px solid var(--stroke-weak); border-radius: var(--r-sm); padding: 9px 14px; font-size: 12.5px; font-weight: 600; } .p-accueil .fleches { font-size: 15px; color: var(--brand); letter-spacing: 2px; } /* mini-UI 3 : le PM génère */ .p-accueil .demande { display: flex; gap: 9px; align-items: flex-start; } .p-accueil .avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--encre); color: var(--background); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; } .p-accueil .demande p { font-size: 12.5px; background: var(--paper); border: 1px solid var(--stroke-weak); border-radius: var(--r-sm); padding: 8px 11px; } /* mini-UI 4 : les connecteurs (fonctionnels, pas un mur de logos) */ .p-accueil .connecteurs { display: flex; flex-direction: column; gap: 7px; } .p-accueil .connecteur { display: flex; align-items: center; gap: 9px; background: var(--paper); border: 1px solid var(--stroke-weak); border-radius: var(--r-sm); padding: 8px 11px; font-size: 12.5px; font-weight: 600; } .p-accueil .connecteur .etat { margin-left: auto; } .p-accueil .connecteur .puce { width: 16px; height: 16px; border-radius: 4px; background: var(--fill); border: 1px solid var(--stroke-weak); display: inline-block; } .p-accueil .tuiles-note { text-align: center; margin-top: 18px; color: var(--text-weak); } /* ── Les 4 mini-UI s'animent : chaque tuile joue SON mécanisme, à la révélation ── */ /* 1 · le code s'écrit, le rendu répond */ .p-accueil .tuile .ligne-code { clip-path: inset(0 100% 0 0); } .p-accueil .tuile.vu .ligne-code { animation: ecrire-code var(--motion-entree) var(--ease-console) .2s forwards; } @keyframes ecrire-code { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } } .p-accueil .tuile .rendu, .p-accueil .tuile .demande, .p-accueil .tuile .connecteur { opacity: 0; transform: translateY(6px); } @keyframes repondre { to { opacity: 1; transform: none; } } .p-accueil .tuile.vu .rendu { animation: repondre var(--motion-entree) var(--ease-console) 1s forwards; } /* 2 · l'aller-retour respire */ .p-accueil .tuile.vu .fleches { animation: osciller var(--motion-respiration) ease-in-out infinite; } @keyframes osciller { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } } .p-accueil .tuile.vu .noeud { animation: passer calc(var(--motion-respiration) * 2) ease-in-out infinite; } .p-accueil .tuile.vu .noeud:last-child { animation-delay: var(--motion-respiration); } @keyframes passer { 0%, 100% { background: var(--paper); } 12% { background: var(--fill); } } /* 3 · la conversation se déroule */ .p-accueil .tuile.vu .demande:first-child { animation: repondre var(--motion-entree) var(--ease-console) .2s forwards; } .p-accueil .tuile.vu .demande + .demande { animation: repondre var(--motion-entree) var(--ease-console) 1.1s forwards; } /* 4 · les connecteurs s'allument un à un, puis veillent */ .p-accueil .tuile.vu .connecteur:nth-child(1) { animation: repondre var(--motion-entree) var(--ease-console) .2s forwards; } .p-accueil .tuile.vu .connecteur:nth-child(2) { animation: repondre var(--motion-entree) var(--ease-console) .55s forwards; } .p-accueil .tuile.vu .connecteur:nth-child(3) { animation: repondre var(--motion-entree) var(--ease-console) .9s forwards; } .p-accueil .tuile.vu .connecteur .etat { animation: veiller var(--motion-respiration) ease-in-out infinite; } .p-accueil .tuile.vu .connecteur:nth-child(2) .etat { animation-delay: calc(var(--motion-respiration) / 3); } .p-accueil .tuile.vu .connecteur:nth-child(3) .etat { animation-delay: calc(var(--motion-respiration) / 3 * 2); } @keyframes veiller { 0%, 100% { opacity: .65; } 12% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .p-accueil .tuile .ligne-code { clip-path: none; animation: none; } .p-accueil .tuile .rendu, .p-accueil .tuile .demande, .p-accueil .tuile .connecteur { opacity: 1; transform: none; animation: none; } .p-accueil .tuile .fleches, .p-accueil .tuile .noeud, .p-accueil .tuile .connecteur .etat { animation: none; } } /* ── Comment ça marche — 01/02/03, une vraie séquence ── */ .p-accueil .etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espace-grille); margin-top: 38px; } @media (max-width: 820px) { .p-accueil .etapes { grid-template-columns: 1fr; } } .p-accueil .etape { background: var(--gradient-souffle); border: 1px solid var(--stroke-weak); border-radius: var(--r-lg); padding: 20px 18px; } .p-accueil .etape .mono { color: var(--brand); display: block; margin-bottom: 12px; } .p-accueil .etape h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; } .p-accueil .etape p { color: var(--text-weak); font-size: var(--type-small); } .p-accueil .score { margin-top: 16px; background: var(--fill); border-radius: var(--r-md); padding: 14px; display: flex; align-items: center; gap: 12px; } .p-accueil .score b { font-size: 26px; font-weight: 800; letter-spacing: var(--track-titre); } .p-accueil .score span { font-size: 11.5px; color: var(--text-weak); } .p-accueil .fichiers { margin-top: 16px; background: var(--fill); border-radius: var(--r-md); padding: 12px 14px; font-family: var(--mono); font-size: var(--type-chip); color: var(--text-weak); line-height: 1.9; } .p-accueil .fichiers b { color: var(--encre); font-weight: 500; } .p-accueil .verifs { margin-top: 16px; background: var(--fill); border-radius: var(--r-md); padding: 12px 14px; font-size: 12.5px; line-height: 2; } .p-accueil .verifs span::before { content: "✓"; color: var(--brand); font-weight: 700; margin-right: 8px; } .p-accueil .verifs span { display: block; } /* ── CII — le financement, avec la bande de chiffres ── */ .p-accueil .cii { background: var(--fill); border-block: 1px solid var(--stroke-weak); margin-top: var(--espace-section); padding: clamp(56px, 8vw, 96px) 0; } .p-accueil .cii-grille { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; } @media (max-width: 820px) { .p-accueil .cii-grille { grid-template-columns: 1fr; } } .p-accueil .cii p { color: var(--text-weak); margin-top: 12px; max-width: 48ch; } .p-accueil .cii p strong { color: var(--encre); } .p-accueil .cii-note { font-size: 12.5px; margin-top: 14px; } .p-accueil .chiffres-cii { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .p-accueil .chiffre-cii { background: var(--paper); border: 1px solid var(--stroke-weak); border-radius: var(--r-md); padding: 18px 16px; } .p-accueil .chiffre-cii b { display: block; font-size: 30px; font-weight: 800; letter-spacing: var(--track-hero); } .p-accueil .chiffre-cii span { font-size: 12px; color: var(--text-weak); } /* ── Le début — l'ouverture au-delà du DS ── */ .p-accueil .debut { text-align: center; padding: clamp(70px, 10vw, 120px) 0 clamp(24px, 4vw, 44px); } .p-accueil .debut .hero-actions { margin-top: 26px; margin-bottom: 0; } /* ── Articles : slots en attente des posts LinkedIn reformatés ── */ .p-accueil .articles-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espace-grille); margin-top: 38px; } @media (max-width: 820px) { .p-accueil .articles-grille { grid-template-columns: 1fr; } } .p-accueil .article-slot { background: var(--gradient-souffle); border: 1px solid var(--stroke-weak); border-radius: var(--r-lg); padding: 20px var(--espace-carte); display: block; transition: box-shadow var(--motion-hover) ease, transform var(--motion-hover) var(--ease-console); } .p-accueil .article-slot:hover { box-shadow: var(--ombre-carte); transform: translateY(-2px); } .p-accueil .article-slot .thumb { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--stroke-weak); margin-bottom: 14px; } .p-accueil .article-slot .article-avenir { color: var(--brand); display: block; margin-bottom: 12px; } .p-accueil .article-slot h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; } .p-accueil .article-slot p { color: var(--text-weak); font-size: var(--type-small); } .p-accueil .articles-note { text-align: center; margin-top: var(--espace-carte); } .p-accueil .note-sep { color: var(--text-weak); } .p-accueil .lien-linkedin { font-weight: 600; font-size: var(--type-small); color: var(--text-weak); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--stroke-strong); } .p-accueil .lien-linkedin:hover { color: var(--encre); text-decoration-color: var(--encre); } /* ── FAQ ── */ .p-accueil .faq { max-width: var(--width-etroit); margin: clamp(48px, 7vw, 88px) auto 0; } .p-accueil .faq h2 { text-align: center; margin-bottom: 24px; } .p-accueil details { background: var(--paper); border: 1px solid var(--stroke-weak); border-radius: var(--r-md); margin-bottom: 10px; } .p-accueil summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 700; font-size: 15.5px; padding: 16px 18px; } .p-accueil summary::-webkit-details-marker { display: none; } .p-accueil summary::after { content: "+"; color: var(--text-weak); font-weight: 400; font-size: 19px; } .p-accueil details[open] summary::after { content: "–"; } .p-accueil details p { padding: 0 18px 16px; color: var(--text-weak); font-size: 14.5px; max-width: 60ch; } .p-accueil details p strong { color: var(--encre); } .p-accueil footer { border-top: 1px solid var(--stroke-weak); margin-top: clamp(56px, 8vw, 96px); padding: 34px 0 44px; } .p-accueil .pied-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .p-accueil .pied-haut .wordmark { font-size: 20px; } .p-accueil .pied-haut nav { display: flex; gap: 20px; font-size: var(--type-small); color: var(--text-weak); } .p-accueil .pied-haut nav a:hover { color: var(--encre); } .p-accueil .pied-tag { color: var(--text-weak); font-size: 13.5px; margin-top: 6px; } .p-accueil .pied-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 26px; color: var(--text-weak); font-size: 12.5px; } .p-accueil .pied-bas nav { display: flex; gap: 16px; } /* ── L'en-tête collant : la démo toujours à portée ── */ .p-accueil .entete { position: sticky; top: 0; z-index: 60; background: var(--background); transition: box-shadow var(--motion-micro) ease, border-color var(--motion-micro) ease; border-bottom: 1px solid transparent; } .p-accueil .entete.colle { border-bottom-color: var(--stroke-weak); box-shadow: var(--ombre-carte); } .p-accueil .entete .nav { transition: padding var(--motion-micro) ease; } .p-accueil .entete.colle .nav { padding-block: 10px; } /* ── Les mascottes : perchées sur les bords, jamais hors cadre ── */ .p-accueil .mascotte { position: absolute; z-index: 3; width: auto; pointer-events: none; user-select: none; } .p-accueil .mascotte-flux { display: block; height: clamp(48px, 11vw, 70px); width: auto; margin-bottom: 12px; } .p-accueil .mascotte-centre { margin: 0 auto var(--espace-carte); height: clamp(110px, 13vw, 143px); } .p-accueil .mascotte-probleme { height: clamp(84px, 10vw, 112px); margin-bottom: var(--espace-carte); } .p-accueil .mascotte-console { height: clamp(84px, 12vw, 118px); top: calc(64px - clamp(84px, 12vw, 118px)); left: clamp(12px, 6vw, 2px); } .p-accueil .mini-perchoir { position: relative; margin-top: clamp(0px, 0vw, 0px); } .p-accueil .mascotte-mini { height: clamp(130px, 9vw, 86px); top: calc(10px - clamp(133px, 9vw, 86px)); left: 22px; } .p-accueil .article-slot { position: relative; } .p-accueil .mascotte-carte { height: clamp(116px, 57vw, 125px); top: -95px; right: -36px; } @media (max-width: 560px) { .p-accueil .mascotte-carte { height: 96px; top: -76px; right: 0; } } .p-accueil .cii { position: relative; } .p-accueil .chiffre-perchoir { position: relative; } .p-accueil .mascotte-cii { height: 96px; top: -90px; left: 14px; } /* ── Mouvement — l'arrivée du hero, puis les révélations ── */ .p-accueil .up { opacity: 0; transform: translateY(14px); animation: lever var(--motion-entree) var(--ease-console) forwards; } .p-accueil .up-2 { animation-delay: .12s; } .p-accueil .up-3 { animation-delay: .24s; } .p-accueil .up-4 { animation-delay: .38s; } .p-accueil .up-5 { animation-delay: .55s; } .p-accueil .console-cadre.up { animation-name: ouvrir; } @keyframes ouvrir { from { opacity: 0; transform: translateY(18px) scale(.965); } to { opacity: 1; transform: none; } } @keyframes lever { to { opacity: 1; transform: none; } } .p-accueil .rvl { opacity: 0; transform: translateY(16px); transition: opacity var(--motion-revelation) ease, transform var(--motion-revelation) var(--ease-console); } .p-accueil .rvl.vu { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .p-accueil .up, .p-accueil .rvl { opacity: 1; transform: none; animation: none; transition: none; } .p-accueil .tuile:hover { transform: none; } }