/* * Portail Edmond — feuille de style unique (onboarding v2, « Mon espace », pages légales, * retour administrateur). Sobre et carré : beaucoup de blanc cassé chaud, UNE couleur d'accent * (vin), titres dans un serif (Fraunces, hébergée ici : CSP inchangée), texte en sans-serif * système, boutons noirs, aucune ombre lourde. Mode clair par défaut, mode sombre cohérent selon * le réglage du système ; les contrastes WCAG AA des deux thèmes sont vérifiés par un test * (apps/web/src/pages.test.ts). Mouvement réduit respecté. */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/fraunces-latin.woff2) format("woff2"); } :root { color-scheme: light; --bg: #faf7f2; --surface: #ffffff; --surface-2: #f3efe8; --border: #e4ded4; --border-strong: #b9b1a4; --ink: #1c1a17; --ink-2: #4a463f; --muted: #6b665d; --accent: #7a1f3d; --accent-hover: #62182f; --accent-ink: #ffffff; --accent-soft: #f6e9ee; --btn: #1c1a17; --btn-hover: #33302b; --btn-ink: #ffffff; --ok: #1f6b3a; --ok-bg: #e6f3ea; --warn: #7a4a08; --warn-bg: #fbf0dc; --danger: #9a2b2b; --danger-bg: #fbe8e6; --danger-ink: #ffffff; --neutral: #5d5952; --neutral-bg: #eeeae3; --qr-bg: #ffffff; --radius: 6px; --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --bg: #141211; --surface: #1c1917; --surface-2: #26221f; --border: #352f2b; --border-strong: #5a524b; --ink: #f3efe8; --ink-2: #d6d0c6; --muted: #a69e92; --accent: #e9a2b8; --accent-hover: #f3bccc; --accent-ink: #2a0b16; --accent-soft: #3a2029; --btn: #f3efe8; --btn-hover: #ffffff; --btn-ink: #141211; --ok: #7fd9a4; --ok-bg: #15291d; --warn: #f2c47a; --warn-bg: #2e2410; --danger: #ff9f97; --danger-bg: #341a1b; --danger-ink: #2b0f0f; --neutral: #c9c2b7; --neutral-bg: #2a2724; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px / 1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: var(--accent); text-underline-offset: 2px; } a:hover { color: var(--accent-hover); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---- Colonne : 16 px de marge sur téléphone, étroite et centrée sur ordinateur ---- */ .portal { max-width: 34rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; min-height: 100vh; display: flex; flex-direction: column; } @media (min-width: 48rem) { .portal { padding: 2.5rem 1.5rem 4rem; } } /* « Mon espace » : un peu plus large (trois blocs, une ligne par outil). */ .is-space .portal { max-width: 42rem; } .top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; } @media (min-width: 48rem) { .top { margin-bottom: 3.5rem; } } .portal__brand { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); } .brand-mark { flex: none; color: var(--ink); } /* ---- Progression : quatre points ---- */ .dots { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .dot { display: block; width: 0.5rem; height: 0.5rem; padding: 0; border: 0; border-radius: 50%; background: var(--border-strong); transition: background-color 0.25s ease, transform 0.25s ease; } button.dot { position: relative; cursor: pointer; min-height: 0; box-shadow: none; } /* Zone de clic plus large que le point (doigt, souris), sans déborder sur le voisin. */ button.dot::after { content: ""; position: absolute; inset: -0.75rem -0.25rem; } button.dot:hover { background: var(--ink); } .dot.is-done, .dot.is-past { background: var(--ink-2); } .dot.is-current { background: var(--accent); transform: scale(1.5); } /* ---- Écran courant : un titre, une phrase, une action ---- */ .screen { flex: 1 0 auto; } .screen--in { animation: screen-in 0.36s ease both; } @keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .loading { color: var(--muted); margin: 0; } .title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 6vw, 2.5rem); line-height: 1.12; letter-spacing: -0.012em; margin: 0 0 0.75rem; color: var(--ink); text-wrap: balance; } .lead { font-size: 1.1rem; line-height: 1.5; margin: 0 0 1.75rem; color: var(--ink-2); text-wrap: pretty; } .note { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.9rem; } .note a { color: var(--ink-2); } .hint { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.9rem; } .hint--warn { color: var(--warn); } /* ---- Boutons : noirs (principal), contour (secondaire), discrets ---- */ button, .button { font: inherit; font-weight: 600; font-size: 0.95rem; border: 1px solid var(--btn); border-radius: var(--radius); padding: 0.7rem 1.25rem; min-height: 46px; background: var(--btn); color: var(--btn-ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } button:hover, .button:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-ink); } button[disabled] { opacity: 0.45; cursor: not-allowed; } button.secondary, .button.secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); } button.secondary:hover, .button.secondary:hover { background: var(--surface-2); border-color: var(--ink); color: var(--ink); } button.quiet { background: transparent; border-color: transparent; color: var(--muted); font-weight: 500; padding-inline: 0.5rem; } button.quiet:hover { background: transparent; border-color: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* Bouton-lien : du texte, souligné, dans la ligne. */ button.link { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } button.link:hover { color: var(--accent); background: none; } .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.5rem; } .actions--between { justify-content: space-between; } .actions--center { justify-content: center; } @media (max-width: 30rem) { .actions .primary, .actions .button.primary { width: 100%; } } /* ---- Accord préalable (D-055) : une ligne sobre, la facultative en plus petit ---- */ .consent { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .check { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0 0 0.75rem; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); cursor: pointer; } .check input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--accent); } .check--quiet { font-size: 0.85rem; color: var(--muted); } /* Écran 1 revisité : sous la case obligatoire, comment retirer cet accord (D-092). */ .consent__note { margin: -0.25rem 0 1rem 1.9rem; font-size: 0.85rem; color: var(--muted); } .consent__note a { color: var(--ink-2); } .tag { display: inline-block; vertical-align: middle; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--neutral); background: var(--neutral-bg); border-radius: 3px; padding: 0.05rem 0.4rem; white-space: nowrap; } .tag--required { color: var(--accent); background: var(--accent-soft); } .tag--ok { color: var(--ok); background: var(--ok-bg); } .tag--warn { color: var(--warn); background: var(--warn-bg); } .tag--danger { color: var(--danger); background: var(--danger-bg); } /* ---- Logos des outils (logos.js) ---- */ .logo { flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; } .logo svg { display: block; width: 100%; height: 100%; } .logo--mono { border-radius: 4px; background: var(--ink); color: var(--bg); font-family: var(--serif); font-weight: 600; font-size: 0.85rem; } /* Granola : icône d'application officielle, octets d'origine (PNG 192 × 192 publiée par Granola : https://www.granola.ai/favicon/web-app-manifest-192x192.png, déclarée dans https://www.granola.ai/favicon/site.webmanifest ; SHA-256 92fc0c39…7a644fc6). Son fond vert de marque ne jure ni en clair ni en sombre. Coins arrondis comme une icône d'application (le manifeste la déclare « maskable »). En data: : la CSP n'autorise que 'self' et data:. */ .logo--granola { border-radius: 22%; background: url("data:image/png;base64,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") center / contain no-repeat; } /* Fichier de contacts : icône de tableur au trait fin, couleur du texte (clair et sombre). */ .logo--file { color: var(--ink); } .logo--file path { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ---- Écran 2 : « Se connecter avec Google / Microsoft » (règles de marque : fond blanc, logo d'origine ; en sombre, fond sombre et texte clair comme le veulent les deux guides) ---- */ .brand-buttons { display: grid; gap: 0.75rem; } button.brand { --brand-bg: #ffffff; --brand-border: #747775; --brand-ink: #1f1f1f; width: 100%; justify-content: flex-start; gap: 0.9rem; padding: 0.75rem 1rem; background: var(--brand-bg); border-color: var(--brand-border); color: var(--brand-ink); font-weight: 500; font-size: 1rem; } button.brand:hover { background: #f7f7f7; border-color: #1f1f1f; color: #1f1f1f; } @media (prefers-color-scheme: dark) { button.brand { --brand-bg: #131314; --brand-border: #8e918f; --brand-ink: #e3e3e3; } button.brand:hover { background: #1f1f20; border-color: #e3e3e3; color: #e3e3e3; } } button.brand .logo { width: 1.25rem; height: 1.25rem; } .customize { margin-top: 1rem; text-align: center; } .services { margin: 1rem 0 0; padding: 0; border: 0; min-width: 0; text-align: left; } .services__legend { padding: 0; margin: 0 0 0.5rem; color: var(--muted); font-size: 0.9rem; } .service { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--border); cursor: pointer; } .service:last-of-type { border-bottom: 1px solid var(--border); } .service input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0.2rem 0 0; accent-color: var(--accent); } .service__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .service__name { font-weight: 600; color: var(--ink); } .service__allows { font-size: 0.875rem; color: var(--ink-2); } /* Avertissement de certification Google (D-045), avis « à reconnecter » : une ligne discrète. */ .notice { margin: 0.75rem 0 0; padding: 0; color: var(--muted); font-size: 0.85rem; } .notice--admin { margin-top: 1rem; padding: 0.875rem 1rem; border-left: 3px solid var(--warn); background: var(--surface-2); color: var(--ink); font-size: 0.92rem; } .notice--admin p { margin: 0.5rem 0; } .link-box { overflow-wrap: anywhere; font-size: 0.88rem; color: var(--ink); background: var(--surface); border: 1px solid var(--border); padding: 0.625rem 0.75rem; border-radius: var(--radius); margin: 0.75rem 0; } /* Outil relié, dit en une ligne : logo, nom, coche ; dessous, ses actions (D-092). */ .linked { padding: 0.875rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .linked + .linked { border-top: 0; } .linked__head { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; } /* « Ajouter l'agenda · Changer de compte · Déconnecter », alignés sous le nom. */ .manage { margin: 0.4rem 0 0 2.125rem; font-size: 0.875rem; line-height: 1.9; color: var(--muted); } .brand-buttons + .manage, .tiles + .manage { margin: 0.75rem 0 0; } .manage + .manage { margin-top: 0.25rem; } button.link.link--danger:hover { color: var(--danger); } .linked__check { margin-left: auto; color: var(--ok); font-weight: 700; } .linked__services { font-weight: 400; color: var(--muted); font-size: 0.9rem; } /* ---- Écran 3 : une ligne de logos CRM ---- */ .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } button.tile { flex-direction: column; gap: 0.6rem; padding: 1.1rem 0.5rem 0.9rem; min-height: 6.25rem; background: var(--surface); border-color: var(--border); color: var(--ink); font-weight: 600; font-size: 0.9rem; } button.tile:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); } button.tile[disabled] { opacity: 1; color: var(--muted); border-style: dashed; } button.tile .logo { width: 2rem; height: 2rem; } button.tile[disabled] .logo { filter: grayscale(1); opacity: 0.45; } .tile__name { line-height: 1.2; } .file { margin-top: 1.5rem; } /* Le fichier de contacts, dans le parcours : sa ligne et l'import, sous son nom. */ .linked--file .file { margin: 0.4rem 0 0 2.125rem; } .linked--file .file .note { margin: 0.25rem 0 0; } /* Outils reliés d'abord, puis les boutons ou tuiles de ceux qui restent à relier. */ .linked + .brand-buttons, .linked + .tiles { margin-top: 1.25rem; } .tiles + .linked, .manage + .linked { margin-top: 1.5rem; } .line { margin: 0 0 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--ink-2); font-size: 0.95rem; } .line strong { color: var(--ink); } .line a { color: var(--ink-2); } .import { margin-top: 0.75rem; } .import__file { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; cursor: pointer; } /* Le vrai champ fichier reste accessible au clavier, mais invisible : le bouton le remplace. */ .import__file input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .import__result:empty { display: none; } /* ---- Écran 4 : grand QR code, bouton, promesse ---- */ .qr { margin: 0 0 1.25rem; text-align: center; } .qr img { display: inline-block; width: 220px; height: 220px; background: var(--qr-bg); padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); } .qr--small img { width: 140px; height: 140px; } .qr figcaption { margin-top: 0.75rem; color: var(--muted); font-size: 0.9rem; } .promise { margin: 1.25rem 0 0; text-align: center; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); } .centered { text-align: center; } /* Sur téléphone, le bouton « Ouvrir Telegram » suffit : on ne scanne pas son propre écran. */ @media (max-width: 40rem) { .qr { display: none; } } /* Telegram Web : utile sur ordinateur seulement (sur téléphone, l'application s'ouvre). */ @media (max-width: 40rem) { .desktop-only { display: none; } } /* La commande à copier-coller dans Telegram (D-092) : en clair, lisible, « Copier » à côté. */ .command { margin: 1.5rem 0 0; padding: 1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); } .command__how { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--ink-2); } .command__row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; } .command__text { flex: 1 1 auto; padding: 0.5rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; font-size: 1.05rem; color: var(--ink); user-select: all; word-break: break-all; } .command__row button { min-height: 40px; padding: 0.4rem 1rem; } .examples { margin: 0; padding-left: 1.2rem; color: var(--ink-2); } .examples li + li { margin-top: 0.375rem; } /* ---- « Mon espace » : trois blocs, titre, ligne d'explication, filet fin ---- */ .block { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .block h2 { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; margin: 0 0 0.25rem; letter-spacing: -0.01em; } .block__lead { margin: 0 0 1rem; color: var(--muted); } .reach { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .reach .qr { margin: 0; } .inbound { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-top: 1rem; font-size: 0.95rem; } .inbound code { padding: 0.2rem 0.5rem; background: var(--surface-2); border-radius: 4px; font-size: 0.9rem; } .inbound button { min-height: 36px; padding: 0.35rem 0.75rem; font-size: 0.85rem; } /* Drive (0040) : « Ce qu'Edmond voit dans votre Drive » — même pas que le bloc WhatsApp. */ .drive { margin-top: 1.5rem; } .drive__files { list-style: none; margin: 0.75rem 0; padding: 0; } .drive__files li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--border); font-size: 0.95rem; } .drive__files li:last-child { border-bottom: 1px solid var(--border); } .drive__files li span { min-width: 0; overflow-wrap: anywhere; } .drive__files button { flex: none; min-height: 36px; padding: 0.35rem 0.75rem; font-size: 0.85rem; } .tool { padding: 0.875rem 0; border-top: 1px solid var(--border); } .tool:last-child { border-bottom: 1px solid var(--border); } .tool__head { display: flex; align-items: center; gap: 0.75rem; } .tool__text { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; } .tool__name { font-weight: 600; } .tool__line { margin: 0.35rem 0 0 2.25rem; font-size: 0.9rem; color: var(--ink-2); } .tool__action { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } .tool__action button, .tool__action .button { min-height: 36px; padding: 0.35rem 0.85rem; font-size: 0.85rem; } .tool .services, .tool .import, .tool .notice--admin { margin-left: 2.25rem; } .svc { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-right: 0.35rem; border-radius: 50%; font-size: 0.7rem; font-weight: 700; vertical-align: -0.15rem; } .svc--on { color: var(--ok); background: var(--ok-bg); } .svc--off { color: var(--neutral); background: var(--neutral-bg); } /* Menu « … » d'un outil relié : déconnecter, changer de compte, ajouter un service. */ .menu { position: relative; } .menu summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--ink); font-weight: 700; letter-spacing: 0.1em; background: transparent; } .menu summary::-webkit-details-marker { display: none; } .menu summary:hover { border-color: var(--ink); } .menu__panel { position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 4; min-width: 14rem; padding: 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgb(0 0 0 / 0.08); } .menu__panel button { display: flex; width: 100%; justify-content: flex-start; min-height: 38px; padding: 0.4rem 0.6rem; background: transparent; border-color: transparent; color: var(--ink); font-weight: 500; font-size: 0.9rem; } .menu__panel button:hover { background: var(--surface-2); border-color: transparent; color: var(--ink); } .menu__panel button.danger:hover { color: var(--danger); background: var(--danger-bg); } .menu__hint { margin: 0.5rem 0.6rem 0.25rem; color: var(--muted); font-size: 0.78rem; } .row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-top: 0.75rem; } .fixed { margin: 1rem 0 0; padding: 0.75rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--ink); } /* ---- Liste des contacts (vue dédiée, lecture seule, autre onglet) ---- */ .contacts { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.92rem; } .contacts th, .contacts td { text-align: left; vertical-align: top; padding: 0.5rem 0.5rem 0.5rem 0; border-bottom: 1px solid var(--border); } .contacts th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; } .contacts td { color: var(--ink-2); } .contacts td:first-child { color: var(--ink); font-weight: 600; } /* ---- Message d'état : en bas de l'écran, s'efface seul ---- */ .toast { position: sticky; bottom: 1rem; z-index: 5; margin: 1rem 0 0; padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--ink); color: var(--bg); font-size: 0.95rem; } .toast:empty { display: none; } /* ---- Confirmation dans la page (C3, 20/10/2026) : à la place de window.confirm ---- * Téléphone d'abord : une feuille collée en bas, boutons pleine largeur, l'action au-dessus * d'« Annuler » (sous le pouce). Sur ordinateur : une carte centrée, boutons à droite. Le * bouton d'une action qui retire quelque chose est rouge (--danger), l'autre noir. */ .confirm { box-sizing: border-box; width: 100%; max-width: none; max-height: calc(100vh - 2rem); margin: auto 0 0; padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--border); border-bottom: 0; border-radius: calc(var(--radius) * 2) calc(var(--radius) * 2) 0 0; background: var(--surface); color: var(--ink); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18); overflow: auto; } .confirm::backdrop { background: rgba(28, 26, 23, 0.55); } .confirm__text { margin: 0; font-size: 1.05rem; line-height: 1.5; } .confirm__actions { display: flex; flex-direction: column-reverse; gap: 0.6rem; margin-top: 1.25rem; } .confirm__actions button { width: 100%; } .confirm__actions button.danger { background: var(--danger); border-color: var(--danger); color: var(--danger-ink); } .confirm__actions button.danger:hover { background: var(--danger); border-color: var(--ink); color: var(--danger-ink); } /* Pendant la question, la page derrière ne défile pas. */ html.has-confirm { overflow: hidden; } /* Navigateur sans (très anciens) : la boîte reste cachée tant qu'elle n'est pas * ouverte, puis se fixe en bas, au-dessus d'un voile (ombre étendue, aucun élément en plus). */ .confirm:not([open]) { display: none; } .confirm--fallback[open] { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; box-shadow: 0 0 0 100vmax rgba(28, 26, 23, 0.55); } @media (min-width: 40rem) { .confirm { width: min(100% - 2rem, 28rem); margin: auto; padding: 1.5rem; border-bottom: 1px solid var(--border); border-radius: calc(var(--radius) * 2); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22); } .confirm__actions { flex-direction: row; justify-content: flex-end; } .confirm__actions button { width: auto; } .confirm--fallback[open] { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); } } /* ---- Pied de page ---- */ .portal__footer { margin-top: 2.5rem; font-size: 0.82rem; color: var(--muted); } .portal__footer p { margin: 0.375rem 0; } .portal__footer a { color: var(--muted); } /* ---- Pages légales et retour administrateur (mêmes classes qu'avant) ---- */ .portal__header { margin-bottom: 1.25rem; } .portal__header .portal__brand { margin-bottom: 1.25rem; } .portal__header h1 { font-family: var(--serif); font-weight: 500; font-size: 2rem; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.5rem; } .portal__intro { margin: 0; color: var(--muted); font-size: 1.05rem; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-top: 0.875rem; } .card h2 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; margin: 0 0 0.5rem; } .card p { margin: 0.5rem 0; } .legal .card p, .legal .card li { color: var(--ink-2); line-height: 1.65; } .legal ul { padding-left: 1.25rem; margin: 0.5rem 0 0; } .legal .card li + li { margin-top: 0.375rem; } /* Le bouton du champ fichier prend le focus visible du champ (resté accessible au clavier). */ .import__file:focus-within .button { outline: 3px solid var(--accent); outline-offset: 2px; } /* ---- Mouvement réduit : aucune animation ni transition ---- */ @media (prefers-reduced-motion: reduce) { .screen--in { animation: none; } .dot, button, .button { transition: none; } .dot.is-current { transform: none; } } /* En dernier : un élément masqué le reste, quelle que soit sa classe. */ [hidden] { display: none; } /* Lien « Retour » sous l'action d'un écran du parcours : discret, centré. */ .back { margin-top: 1.5rem; text-align: center; font-size: 0.875rem; } /* Navigateur intégré d'une application : Google y refuse la connexion. Bandeau visible. */ .notice--warn { margin-top: 1rem; padding: 0.875rem 1rem; border-left: 3px solid var(--warn); background: var(--surface-2); color: var(--ink); font-size: 0.92rem; } .notice--warn p { margin: 0.5rem 0; } .notice__title { font-weight: 600; } /* ---- Écran d'ouverture (09/10/2026) --------------------------------------------------------- Une constellation (vos outils) converge vers le « E » d'Edmond : les liens se tracent, des impulsions filent vers le centre, deux orbites tournent en sens contraire, le carré se dessine puis s'éclaire. Propriétés animées : transform, opacity, stroke-dashoffset (fluide sur mobile). Couleurs : jetons du thème, en clair comme en sombre. */ .boot { display: grid; justify-items: center; gap: 1.1rem; padding: 1.5rem 0 0.5rem; transition: opacity 0.22s ease, transform 0.22s ease; } .boot--out { opacity: 0; transform: scale(0.97); } .boot__art { width: min(72vw, 280px); height: auto; overflow: visible; } .boot__halo { opacity: 0; transform-box: view-box; transform-origin: 120px 120px; animation: boot-halo-in 0.3s ease-out 0.95s forwards, boot-breathe 2.8s ease-in-out 1.25s infinite; } .boot__glow-in { stop-color: var(--accent); stop-opacity: 0.38; } .boot__glow-out { stop-color: var(--accent); stop-opacity: 0; } /* Cadran gradué : 40 graduations, rotation lente. */ .boot__ticks { fill: none; stroke: var(--ink); stroke-opacity: 0.16; stroke-width: 5; stroke-dasharray: 0.35 2.15; transform-box: view-box; transform-origin: 120px 120px; animation: boot-spin 24s linear infinite; } .boot__orbit { fill: none; stroke: var(--ink); stroke-opacity: 0.07; stroke-width: 1; } .boot__arc { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 12 88; transform-box: view-box; transform-origin: 120px 120px; animation: boot-spin 3.2s linear infinite; } .boot__arc--inner { stroke-dasharray: 22 78; stroke-opacity: 0.55; animation-duration: 2.4s; animation-direction: reverse; } .boot__link { stroke: var(--ink); stroke-opacity: 0.14; stroke-width: 1; stroke-dasharray: 100; stroke-dashoffset: 100; animation: boot-draw 0.35s ease-out forwards; } .boot__pulse { stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 7 93; stroke-dashoffset: 7; opacity: 0; animation: boot-pulse 1.5s cubic-bezier(0.5, 0, 0.6, 1) infinite; } .boot__node { fill: var(--ink); opacity: 0; transform-box: fill-box; transform-origin: center; animation: boot-pop 0.25s ease-out forwards, boot-twinkle 2.6s ease-in-out 0.6s infinite; } .boot__tile { fill: var(--ink); fill-opacity: 0; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 100; stroke-dashoffset: 100; animation: boot-draw 0.3s ease-out 0.05s forwards, boot-fill 0.2s ease 0.25s forwards; } /* Briques du « E » : chacune part de l'extérieur (--dx, --dy), tourne un peu et vient s'emboîter. */ .boot__brick { fill: var(--bg); opacity: 0; transform-box: fill-box; transform-origin: center; transform: translate(var(--dx), var(--dy)) rotate(90deg) scale(0.6); animation: boot-brick 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15) forwards, boot-fuse 0.3s ease-out 0.95s forwards; } .boot__brick--0 { --dx: -46px; --dy: 0px; animation-delay: 0.25s, 0.95s; } .boot__brick--4 { --dx: -46px; --dy: -46px; animation-delay: 0.37s, 0.95s; } .boot__brick--8 { --dx: -46px; --dy: 46px; animation-delay: 0.49s, 0.95s; } .boot__brick--10 { --dx: 0px; --dy: -46px; animation-delay: 0.55s, 0.95s; } .boot__brick--6 { --dx: 46px; --dy: -46px; animation-delay: 0.43s, 0.95s; } .boot__brick--2 { --dx: 46px; --dy: 0px; animation-delay: 0.31s, 0.95s; } .boot__brick--1 { --dx: 0px; --dy: 46px; animation-delay: 0.28s, 0.95s; } .boot__brick--5 { --dx: 46px; --dy: 46px; animation-delay: 0.4s, 0.95s; } .boot__brick--11 { --dx: -46px; --dy: 0px; animation-delay: 0.58s, 0.95s; } .boot__brick--9 { --dx: -46px; --dy: -46px; animation-delay: 0.52s, 0.95s; } .boot__brick--12 { --dx: -46px; --dy: 46px; animation-delay: 0.61s, 0.95s; } .boot__brick--3 { --dx: 0px; --dy: -46px; animation-delay: 0.34s, 0.95s; } .boot__brick--7 { --dx: 46px; --dy: -46px; animation-delay: 0.46s, 0.95s; } .boot__brick--13 { --dx: 46px; --dy: 0px; animation-delay: 0.64s, 0.95s; } .boot__sheen { opacity: 0; animation: boot-sheen 2.2s ease-in-out 1.3s infinite; } /* Décalages : chaque lien, chaque point, chaque impulsion à son tour. */ .boot__link--0 { animation-delay: 0s; } .boot__node--0 { animation-delay: 0s, 0.6s; } .boot__link--1 { animation-delay: 0.025s; } .boot__node--1 { animation-delay: 0.025s, 0.65s; } .boot__link--2 { animation-delay: 0.05s; } .boot__node--2 { animation-delay: 0.05s, 0.7s; } .boot__link--3 { animation-delay: 0.075s; } .boot__node--3 { animation-delay: 0.075s, 0.75s; } .boot__link--4 { animation-delay: 0.1s; } .boot__node--4 { animation-delay: 0.1s, 0.8s; } .boot__link--5 { animation-delay: 0.125s; } .boot__node--5 { animation-delay: 0.125s, 0.85s; } .boot__link--6 { animation-delay: 0.15s; } .boot__node--6 { animation-delay: 0.15s, 0.9s; } .boot__link--7 { animation-delay: 0.175s; } .boot__node--7 { animation-delay: 0.175s, 0.95s; } .boot__link--8 { animation-delay: 0.2s; } .boot__node--8 { animation-delay: 0.2s, 1s; } .boot__pulse--0 { animation-delay: 0.25s; } .boot__pulse--1 { animation-delay: 0.475s; } .boot__pulse--2 { animation-delay: 0.325s; } .boot__pulse--3 { animation-delay: 0.575s; } .boot__pulse--4 { animation-delay: 0.4s; } .boot__pulse--5 { animation-delay: 0.65s; } .boot__pulse--6 { animation-delay: 0.275s; } .boot__pulse--7 { animation-delay: 0.525s; } .boot__pulse--8 { animation-delay: 0.375s; } .boot__steps { position: relative; margin: 0; width: 100%; height: 1.5em; color: var(--muted); font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; } .boot__steps span { position: absolute; inset: 0; opacity: 0; animation: boot-step 3.6s ease-in-out infinite; } .boot__steps span:nth-child(2) { animation-delay: 1.2s; } .boot__steps span:nth-child(3) { animation-delay: 2.4s; } @keyframes boot-spin { to { transform: rotate(360deg); } } @keyframes boot-halo-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } } @keyframes boot-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.12); } } @keyframes boot-draw { to { stroke-dashoffset: 0; } } @keyframes boot-fill { to { fill-opacity: 1; } } @keyframes boot-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 0.55; transform: scale(1); } } @keyframes boot-twinkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.25; } } @keyframes boot-pulse { 0% { stroke-dashoffset: 7; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } } @keyframes boot-brick { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(90deg) scale(0.6); } 25% { opacity: 1; } 100% { opacity: 1; transform: translate(0px, 0px) rotate(0deg) scale(1); } } /* Soudure : les briques se serrent puis s'effacent pendant que le « E » d'un seul tenant apparaît par-dessus — plus aucune jointure. */ @keyframes boot-fuse { 40% { opacity: 1; transform: translate(0px, 0px) rotate(0deg) scale(1.09); rx: 0; } 100% { opacity: 0; transform: translate(0px, 0px) rotate(0deg) scale(1.09); rx: 0; } } @keyframes boot-weld { to { opacity: 1; } } .boot__weld { fill: var(--bg); opacity: 0; animation: boot-weld 0.3s ease-in 0.95s forwards; } @keyframes boot-sheen { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; } 45% { opacity: 1; transform: translateX(120px); } 50%, 100% { opacity: 0; transform: translateX(120px); } } @keyframes boot-step { 0% { opacity: 0; transform: translateY(6px); } 8%, 30% { opacity: 1; transform: translateY(0); } 38%, 100% { opacity: 0; transform: translateY(-6px); } } /* Moins d'animations demandé par l'appareil : la marque, posée, et la première phrase. */ @media (prefers-reduced-motion: reduce) { .boot *, .boot { animation: none !important; transition: none !important; } .boot__link { stroke-dashoffset: 0; } .boot__node { opacity: 0.55; } .boot__pulse, .boot__sheen, .boot__arc, .boot__halo { display: none; } .boot__tile { stroke-dashoffset: 0; fill-opacity: 1; } .boot__brick { display: none; } .boot__weld { opacity: 1; } .boot__steps span:first-child { opacity: 1; } } /* * Sélecteur Google du Drive (0040) — 13/10 : Google injecte ces règles dans une balise